/* Appointment page only. */
.booking-section { background: linear-gradient(180deg, #fbfdfc, var(--brand-green-50)); overflow: hidden; }
.booking-info-column { order: 1; }
.booking-form-column { order: 2; }
.booking-card { max-width: 100%; min-width: 0; }
.booking-card h2 { margin-bottom: 12px; }
.booking-form { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
.booking-field { min-width: 0; }
.booking-field-full { grid-column: 1 / -1; }
.booking-field label { color: var(--heading-font-color); display: block; font-size: 14px; font-weight: 750; margin-bottom: 7px; }
.booking-field label span { color: var(--body-font-color); font-weight: 500; }
.booking-unit-preview { background: var(--brand-green-50); border: 1px solid var(--border-color); border-radius: 12px; margin-top: 10px; padding: 14px; }
.booking-unit-preview[hidden] { display: none; }
.booking-unit-preview strong,
.booking-unit-preview span { display: block; }
.booking-unit-preview strong { color: var(--heading-font-color); margin-bottom: 4px; }
.booking-unit-preview span { color: var(--body-font-color); font-size: 14px; line-height: 1.5; }
.booking-unit-preview a { color: var(--primary-color); display: inline-block; font-size: 14px; font-weight: 750; margin-top: 8px; }
.booking-field input,
.booking-field select,
.booking-field textarea { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; color: var(--heading-font-color); font: inherit; min-height: 50px; padding: 11px 14px; transition: border-color 160ms ease, box-shadow 160ms ease; width: 100%; }
.booking-field input,
.booking-field select,
.booking-field textarea { box-sizing: border-box; max-width: 100%; }
.booking-field textarea { min-height: 96px; resize: vertical; }
.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.1); outline: 0; }
.booking-form.was-validated :invalid { border-color: var(--secondary-color); }
.booking-submit { gap: 9px; margin-top: 4px; }
.booking-submit img { filter: brightness(0) invert(1); }
.booking-status { color: var(--secondary-color); font-size: 14px; font-weight: 650; margin: 10px 0 0; min-height: 1.5em; }
.booking-info { background: var(--brand-green-900); box-shadow: var(--shadow-soft); color: rgba(255, 255, 255, 0.84); padding: clamp(28px, 4vw, 42px); position: sticky; top: 116px; }
.booking-info h3,
.booking-info .subtitle,
.booking-info strong { color: #fff; }
.booking-steps { display: grid; gap: 22px; list-style: none; margin: 28px 0; padding: 0; }
.booking-steps li { align-items: flex-start; display: flex; gap: 14px; }
.booking-steps li > span { align-items: center; background: var(--brand-green-700); border-radius: 50%; color: #fff; display: flex; flex: 0 0 36px; font-weight: 800; height: 36px; justify-content: center; }
.booking-steps strong,
.booking-steps small,
.booking-hours span { display: block; }
.booking-steps small { color: rgba(255, 255, 255, 0.72); line-height: 1.5; margin-top: 2px; }
.booking-hours { align-items: flex-start; border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; gap: 14px; padding-block: 20px; }
.booking-hours i { color: var(--brand-green-300); font-size: 28px; }
.booking-hours span { font-size: 14px; line-height: 1.6; margin-top: 4px; }
.booking-note { display: block; line-height: 1.5; margin-top: 18px; }

@media (max-width: 1100px) { .booking-info { position: static; } }
@media (max-width: 767px) {
  .booking-section .row { --bs-gutter-x: 0; }
  .booking-section [class*="col-"] { min-width: 0; padding-inline: 0; }
  .booking-form { grid-template-columns: 1fr; }
  .booking-field-full { grid-column: auto; }
  .booking-submit { width: 100%; }
}