:root {
      --slate: #758a9f;
      --slate-dark: #34495c;
      --ink: #202020;
      --cream: #f3eee6;
      --paper: #fbf9f5;
      --white: #ffffff;
      --line: #d8cec1;
      --muted: #6f6b66;
      --success-bg: #edf2ec;
      --success-text: #3f5944;
      --error-bg: #f7e8e5;
      --error-text: #7d3832;
      --shadow: 0 20px 55px rgba(37, 37, 37, 0.08);
    }

    * {
      box-sizing: border-box;
    }
    .booking-section {
      margin: 0;
      width: 100%;
      overflow: hidden;
      background:
        radial-gradient(
          circle at 15% 10%,
          rgba(255, 255, 255, 0.85),
          transparent 34%
        ),
        radial-gradient(
          circle at 85% 70%,
          rgba(117, 138, 159, 0.08),
          transparent 36%
        ),
        var(--cream);
      color: var(--ink);
      font-family: Arial, Helvetica, sans-serif;
    }

    .booking-container {
      width: 100%;
      padding: 42px 20px;
      overflow: visible;
    }

    .booking-section button,
    .booking-section input,
    .booking-section select,
    .booking-section textarea {
      font: inherit;
    }

    .booking-card {
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
      padding: clamp(30px, 5vw, 64px);
      background: rgba(251, 249, 245, 0.98);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .booking-header {
      max-width: 720px;
      margin: 0 auto 44px;
      text-align: center;
    }

    .booking-section h1 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(34px, 5vw, 55px);
      font-weight: 400;
      letter-spacing: 0.075em;
      line-height: 1.12;
      text-transform: uppercase;
    }

    .title-line {
      width: 46px;
      height: 1px;
      margin: 20px auto;
      background: var(--ink);
    }

    .studio-name {
      margin: 0 0 24px;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: 0.34em;
      line-height: 1.6;
      text-transform: uppercase;
    }

    .intro {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.75;
    }

    .form-section {
      padding: 38px 0;
      border-top: 1px solid var(--line);
    }

    .step-heading {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.24em;
      line-height: 1.4;
      text-transform: uppercase;
    }

    .step-number {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border: 1px solid var(--ink);
      border-radius: 50%;
      font-size: 13px;
      letter-spacing: 0;
    }

    .field {
      margin-bottom: 22px;
    }

    .booking-section label {
      display: block;
      margin-bottom: 9px;
      font-size: 14px;
      font-weight: 600;
    }

    .optional {
      color: var(--muted);
      font-weight: 400;
    }

    .booking-section input,
    .booking-section select,
    .booking-section textarea {
      width: 100%;
      min-height: 54px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 0;
      outline: none;
      background: rgba(255, 255, 255, 0.48);
      color: var(--ink);
      transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
    }

    select {
      cursor: pointer;
    }

    textarea {
      min-height: 132px;
      resize: vertical;
    }

    .booking-section input:focus,
    .booking-section select:focus,
    .booking-section textarea:focus {
      border-color: var(--slate);
      background: var(--white);
      box-shadow: 0 0 0 2px rgba(117, 138, 159, 0.13);
    }

    .booking-section input::placeholder,
    .booking-section textarea::placeholder {
      color: #96918b;
    }

    .schedule-grid {
      display: grid;
      grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 1.1fr);
      gap: 44px;
      align-items: start;
    }

    .calendar-panel {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.35);
      padding: 22px;
    }

    .calendar-header {
      display: grid;
      grid-template-columns: 40px 1fr 40px;
      align-items: center;
      margin-bottom: 20px;
    }

    .calendar-month {
      margin: 0;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
    }

    .calendar-nav {
      width: 40px;
      height: 40px;
      border: 0;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font-size: 25px;
      line-height: 1;
    }

    .calendar-nav:hover:not(:disabled) {
      background: rgba(117, 138, 159, 0.10);
    }

    .calendar-nav:disabled {
      cursor: default;
      opacity: 0.25;
    }

    .calendar-weekdays,
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
    }

    .calendar-weekdays {
      margin-bottom: 7px;
    }

    .calendar-weekdays span {
      padding: 4px 0;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
    }

    .calendar-day {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1;
      min-width: 0;
      border: 1px solid transparent;
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font-size: 13px;
      transition:
        background 150ms ease,
        color 150ms ease,
        border-color 150ms ease;
    }

    .calendar-day:hover:not(:disabled) {
      border-color: var(--slate);
    }

    .calendar-day.today:not(.selected) {
      border-color: var(--line);
    }

    .calendar-day.selected {
      border-color: var(--slate-dark);
      background: var(--slate-dark);
      color: var(--white);
    }

    .calendar-day.outside-month,
    .calendar-day:disabled {
      color: #b9b4ae;
      cursor: default;
      opacity: 0.55;
    }

    .calendar-day.closed {
      text-decoration: line-through;
    }

    :root {
      --slate: #758a9f;
      --slate-dark: #34495c;
      --ink: #202020;
      --cream: #f3eee6;
      --paper: #fbf9f5;
      --white: #ffffff;
      --line: #d8cec1;
      --muted: #6f6b66;
      --success-bg: #edf2ec;
      --success-text: #3f5944;
      --error-bg: #f7e8e5;
      --error-text: #7d3832;
      --shadow: 0 20px 55px rgba(37, 37, 37, 0.08);
    }

    * {
      box-sizing: border-box;
    }
    .booking-section {
      margin: 0;
      width: 100%;
      overflow: hidden;
      background:
        radial-gradient(
          circle at 15% 10%,
          rgba(255, 255, 255, 0.85),
          transparent 34%
        ),
        radial-gradient(
          circle at 85% 70%,
          rgba(117, 138, 159, 0.08),
          transparent 36%
        ),
        var(--cream);
      color: var(--ink);
      font-family: Arial, Helvetica, sans-serif;
    }

    .booking-container {
      width: 100%;
      padding: 42px 20px;
      overflow: visible;
    }

    .booking-section button,
    .booking-section input,
    .booking-section select,
    .booking-section textarea {
      font: inherit;
    }

    .booking-card {
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
      padding: clamp(30px, 5vw, 64px);
      background: rgba(251, 249, 245, 0.98);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .booking-header {
      max-width: 720px;
      margin: 0 auto 44px;
      text-align: center;
    }

    .booking-section h1 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(34px, 5vw, 55px);
      font-weight: 400;
      letter-spacing: 0.075em;
      line-height: 1.12;
      text-transform: uppercase;
    }

    .title-line {
      width: 46px;
      height: 1px;
      margin: 20px auto;
      background: var(--ink);
    }

    .studio-name {
      margin: 0 0 24px;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: 0.34em;
      line-height: 1.6;
      text-transform: uppercase;
    }

    .intro {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.75;
    }

    .form-section {
      padding: 38px 0;
      border-top: 1px solid var(--line);
    }

    .step-heading {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.24em;
      line-height: 1.4;
      text-transform: uppercase;
    }

    .step-number {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border: 1px solid var(--ink);
      border-radius: 50%;
      font-size: 13px;
      letter-spacing: 0;
    }

    .field {
      margin-bottom: 22px;
    }

    .booking-section label {
      display: block;
      margin-bottom: 9px;
      font-size: 14px;
      font-weight: 600;
    }

    .optional {
      color: var(--muted);
      font-weight: 400;
    }

    .booking-section input,
    .booking-section select,
    .booking-section textarea {
      width: 100%;
      min-height: 54px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 0;
      outline: none;
      background: rgba(255, 255, 255, 0.48);
      color: var(--ink);
      transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
    }

    select {
      cursor: pointer;
    }

    textarea {
      min-height: 132px;
      resize: vertical;
    }

    .booking-section input:focus,
    .booking-section select:focus,
    .booking-section textarea:focus {
      border-color: var(--slate);
      background: var(--white);
      box-shadow: 0 0 0 2px rgba(117, 138, 159, 0.13);
    }

    .booking-section input::placeholder,
    .booking-section textarea::placeholder {
      color: #96918b;
    }

    .schedule-grid {
      display: grid;
      grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 1.1fr);
      gap: 44px;
      align-items: start;
    }

    .calendar-panel {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.35);
      padding: 22px;
    }

    .calendar-header {
      display: grid;
      grid-template-columns: 40px 1fr 40px;
      align-items: center;
      margin-bottom: 20px;
    }

    .calendar-month {
      margin: 0;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
    }

    .calendar-nav {
      width: 40px;
      height: 40px;
      border: 0;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font-size: 25px;
      line-height: 1;
    }

    .calendar-nav:hover:not(:disabled) {
      background: rgba(117, 138, 159, 0.10);
    }

    .calendar-nav:disabled {
      cursor: default;
      opacity: 0.25;
    }

    .calendar-weekdays,
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
    }

    .calendar-weekdays {
      margin-bottom: 7px;
    }

    .calendar-weekdays span {
      padding: 4px 0;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
    }

    .calendar-day {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1;
      min-width: 0;
      border: 1px solid transparent;
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font-size: 13px;
      transition:
        background 150ms ease,
        color 150ms ease,
        border-color 150ms ease;
    }

    .calendar-day:hover:not(:disabled) {
      border-color: var(--slate);
    }

    .calendar-day.today:not(.selected) {
      border-color: var(--line);
    }

    .calendar-day.selected {
      border-color: var(--slate-dark);
      background: var(--slate-dark);
      color: var(--white);
    }

    .calendar-day.outside-month,
    .calendar-day:disabled {
      color: #b9b4ae;
      cursor: default;
      opacity: 0.55;
    }

    .calendar-day.closed {
      text-decoration: line-through;
    }

    .calendar-help {
      margin: 15px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    #date {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      clip-path: inset(50%);
    }

    .selected-date-label {
      min-height: 24px;
      margin: 0 0 16px;
      font-size: 16px;
      font-weight: 600;
    }

    .slots {
      display: grid;
      grid-template-columns: repeat(2, minmax(120px, 1fr));
      gap: 12px;
    }

    .slot {
      min-height: 52px;
      padding: 12px 16px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.34);
      color: var(--ink);
      cursor: pointer;
      transition:
        background 150ms ease,
        color 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
    }

    .slot:hover {
      border-color: var(--slate);
      transform: translateY(-1px);
    }

    .slot.selected {
      border-color: var(--slate-dark);
      background: var(--slate-dark);
      color: var(--white);
    }

    .availability-placeholder,
    .loading,
    .no-openings {
      margin: 0;
      padding: 18px;
      border: 1px dashed var(--line);
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
      text-align: center;
    }

    .information-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .submit-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      width: min(100%, 700px);
      min-height: 60px;
      margin: 6px auto 0;
      border: 0;
      background: var(--slate-dark);
      color: var(--white);
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      transition:
        background 160ms ease,
        transform 160ms ease;
    }

    .submit-button:hover:not(:disabled) {
      background: var(--slate);
      transform: translateY(-1px);
    }

    .submit-button:disabled {
      cursor: not-allowed;
      opacity: 0.62;
    }

    .button-arrow {
      font-size: 22px;
      font-weight: 400;
      letter-spacing: 0;
    }

    .message {
      display: none;
      width: min(100%, 700px);
      margin: 24px auto 0;
      padding: 18px;
      border: 1px solid transparent;
      font-size: 14px;
      line-height: 1.6;
      text-align: center;
    }

    .message.success {
      display: block;
      border-color: #c8d6c7;
      background: var(--success-bg);
      color: var(--success-text);
    }

    .message.error {
      display: block;
      border-color: #e2c4bf;
      background: var(--error-bg);
      color: var(--error-text);
    }

    @media (max-width: 760px) {
      .booking-container {
        padding: 14px;
      }

      .booking-card {
        padding: 30px 20px;
      }

      .booking-section h1 {
        font-size: clamp(31px, 9vw, 40px);
        letter-spacing: 0.04em;
      }

      .studio-name {
        letter-spacing: 0.23em;
      }

      .form-section {
        padding: 30px 0;
      }

      .schedule-grid,
      .information-grid {
        grid-template-columns: 1fr;
      }

      .schedule-grid {
        gap: 34px;
      }
    }

    @media (max-width: 460px) {
      .slots {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
      }

      .calendar-panel {
        padding: 16px 12px;
      }

      .calendar-weekdays,
      .calendar-grid {
        gap: 2px;
      }

      .calendar-day {
        font-size: 12px;
      }
    }

/* Haircut Option */

.haircut-option {
  margin-top: 18px;
  padding: 22px 24px;

  border: 1px solid rgba(117, 138, 159, 0.28);
  background: rgba(117, 138, 159, 0.07);
}

.haircut-question {
  margin: 0 0 16px;

  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.haircut-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.haircut-choice {
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 0;
  cursor: pointer;
  font-weight: 400;
}

.haircut-choice input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;

  accent-color: var(--slate-dark);
}

.haircut-choice span {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .haircut-option {
    padding: 18px 16px;
  }

  .haircut-choice {
    align-items: flex-start;
  }

  .haircut-choice input[type="radio"] {
    margin-top: 2px;
  }
}
  
.policy-consent,
.sms-consent {
  width: min(100%, 700px);
  margin: 36px auto 28px;
  padding: 24px;

  border: 1px solid rgba(117, 138, 159, 0.28);
  background: rgba(117, 138, 159, 0.07);
}

.policy-consent-label,
.sms-consent-label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 22px;

  margin: 0;
  cursor: pointer;
  font-weight: 400;
}

.policy-consent-label input,
.sms-consent-label input {
  appearance: none;
  -webkit-appearance: none;

  position: relative;

  width: 20px;
  min-width: 20px;
  max-width: 20px;

  height: 20px;
  min-height: 20px;
  max-height: 20px;

  margin: 3px 0 0;
  padding: 0;

  border: 2px solid #8f9295;
  border-radius: 7px;
  background: #fff;

  cursor: pointer;
}

.policy-consent-label input:checked,
.sms-consent-label input:checked {
  border-color: #34495c;
  background: #34495c;
}

.policy-consent-label input:checked::after,
.sms-consent-label input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;

  width: 5px;
  height: 10px;

  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.policy-consent-label span,
.sms-consent-label span {
  min-width: 0;

  color: #4f4c48;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.65;
}

.policy-consent-label a,
.sms-consent-label a {
  color: #34495c;
  font-weight: 600;
  text-underline-offset: 3px;
}

.policy-consent-note {
  margin: 18px 0 0 42px;
  padding-top: 16px;

  border-top: 1px solid rgba(117,138,159,.18);

  color: var(--muted);
  font-size: .8rem;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .policy-consent,
  .sms-consent {
    padding: 18px 16px;
  }

  .policy-consent-label,
  .sms-consent-label {
    gap: 16px;
  }

  .policy-consent-note {
    margin-left: 36px;
  }
}

  

.booking-section {
  min-height: 70vh;
}
.booking-section [hidden] { display: none !important; }

.calendar-day.available:not(.selected) {
  border-color: rgba(117, 138, 159, 0.65);
  background: rgba(117, 138, 159, 0.13);
  color: var(--slate-dark);
  font-weight: 700;
}

.calendar-day.available:not(.selected)::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--slate-dark);
  transform: translateX(-50%);
}

.calendar-day.unavailable {
  color: #b9b4ae;
  opacity: 0.48;
}

.calendar-day.availability-loading {
  cursor: wait;
  opacity: 0.45;
}

.calendar-day.selected::after {
  background: var(--white);
}

    .calendar-help {
      margin: 15px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    #date {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      clip-path: inset(50%);
    }

    .selected-date-label {
      min-height: 24px;
      margin: 0 0 16px;
      font-size: 16px;
      font-weight: 600;
    }

    .slots {
      display: grid;
      grid-template-columns: repeat(2, minmax(120px, 1fr));
      gap: 12px;
    }

    .slot {
      min-height: 52px;
      padding: 12px 16px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.34);
      color: var(--ink);
      cursor: pointer;
      transition:
        background 150ms ease,
        color 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
    }

    .slot:hover {
      border-color: var(--slate);
      transform: translateY(-1px);
    }

    .slot.selected {
      border-color: var(--slate-dark);
      background: var(--slate-dark);
      color: var(--white);
    }

    .availability-placeholder,
    .loading,
    .no-openings {
      margin: 0;
      padding: 18px;
      border: 1px dashed var(--line);
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
      text-align: center;
    }

    .information-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .submit-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      width: min(100%, 700px);
      min-height: 60px;
      margin: 6px auto 0;
      border: 0;
      background: var(--slate-dark);
      color: var(--white);
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      transition:
        background 160ms ease,
        transform 160ms ease;
    }

    .submit-button:hover:not(:disabled) {
      background: var(--slate);
      transform: translateY(-1px);
    }

    .submit-button:disabled {
      cursor: not-allowed;
      opacity: 0.62;
    }

    .button-arrow {
      font-size: 22px;
      font-weight: 400;
      letter-spacing: 0;
    }

    .message {
      display: none;
      width: min(100%, 700px);
      margin: 24px auto 0;
      padding: 18px;
      border: 1px solid transparent;
      font-size: 14px;
      line-height: 1.6;
      text-align: center;
    }

    .message.success {
      display: block;
      border-color: #c8d6c7;
      background: var(--success-bg);
      color: var(--success-text);
    }

    .message.error {
      display: block;
      border-color: #e2c4bf;
      background: var(--error-bg);
      color: var(--error-text);
    }

    @media (max-width: 760px) {
      .booking-container {
        padding: 14px;
      }

      .booking-card {
        padding: 30px 20px;
      }

      .booking-section h1 {
        font-size: clamp(31px, 9vw, 40px);
        letter-spacing: 0.04em;
      }

      .studio-name {
        letter-spacing: 0.23em;
      }

      .form-section {
        padding: 30px 0;
      }

      .schedule-grid,
      .information-grid {
        grid-template-columns: 1fr;
      }

      .schedule-grid {
        gap: 34px;
      }
    }

    @media (max-width: 460px) {
      .slots {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
      }

      .calendar-panel {
        padding: 16px 12px;
      }

      .calendar-weekdays,
      .calendar-grid {
        gap: 2px;
      }

      .calendar-day {
        font-size: 12px;
      }
    }

/* Haircut Option */

.haircut-option {
  margin-top: 18px;
  padding: 22px 24px;

  border: 1px solid rgba(117, 138, 159, 0.28);
  background: rgba(117, 138, 159, 0.07);
}

.haircut-question {
  margin: 0 0 16px;

  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.haircut-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.haircut-choice {
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 0;
  cursor: pointer;
  font-weight: 400;
}

.haircut-choice input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;

  accent-color: var(--slate-dark);
}

.haircut-choice span {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .haircut-option {
    padding: 18px 16px;
  }

  .haircut-choice {
    align-items: flex-start;
  }

  .haircut-choice input[type="radio"] {
    margin-top: 2px;
  }
}
  
.policy-consent,
.sms-consent {
  width: min(100%, 700px);
  margin: 36px auto 28px;
  padding: 24px;

  border: 1px solid rgba(117, 138, 159, 0.28);
  background: rgba(117, 138, 159, 0.07);
}

.policy-consent-label,
.sms-consent-label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 22px;

  margin: 0;
  cursor: pointer;
  font-weight: 400;
}

.policy-consent-label input,
.sms-consent-label input {
  appearance: none;
  -webkit-appearance: none;

  position: relative;

  width: 20px;
  min-width: 20px;
  max-width: 20px;

  height: 20px;
  min-height: 20px;
  max-height: 20px;

  margin: 3px 0 0;
  padding: 0;

  border: 2px solid #8f9295;
  border-radius: 7px;
  background: #fff;

  cursor: pointer;
}

.policy-consent-label input:checked,
.sms-consent-label input:checked {
  border-color: #34495c;
  background: #34495c;
}

.policy-consent-label input:checked::after,
.sms-consent-label input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;

  width: 5px;
  height: 10px;

  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.policy-consent-label span,
.sms-consent-label span {
  min-width: 0;

  color: #4f4c48;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.65;
}

.policy-consent-label a,
.sms-consent-label a {
  color: #34495c;
  font-weight: 600;
  text-underline-offset: 3px;
}

.policy-consent-note {
  margin: 18px 0 0 42px;
  padding-top: 16px;

  border-top: 1px solid rgba(117,138,159,.18);

  color: var(--muted);
  font-size: .8rem;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .policy-consent,
  .sms-consent {
    padding: 18px 16px;
  }

  .policy-consent-label,
  .sms-consent-label {
    gap: 16px;
  }

  .policy-consent-note {
    margin-left: 36px;
  }
}

  

.booking-section {
  min-height: 70vh;
}
.booking-section [hidden] { display: none !important; }