.request-form { width: 100%; max-width: 100%; min-width: 0; padding: 36px; overflow: hidden; border-radius: 22px; background: white; box-shadow: var(--shadow); border: 1px solid var(--sky); }
.compact-form { padding: 28px; box-shadow: 0 28px 80px rgba(4,46,125,.16); }
.compact-form .form-heading { margin-bottom: 18px; }
.compact-form .form-heading span { font-size: 24px; }
.compact-form .form-heading strong { max-width: 190px; }
.compact-form .appointment-fieldset { margin-top: 16px; }
.compact-form .appointment-date { min-height: 58px; }
.compact-time { margin-top: 16px; }
.compact-form .contact-step { margin-top: 16px; }
.compact-form .form-fields { margin-top: 12px; }
.compact-form .form-button { margin-top: 16px; }
.form-heading { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.form-heading span { font-size: 21px; font-weight: 700; }
.form-heading strong { max-width: 220px; color: #5577aa; font-size: 10px; font-weight: 500; text-align: right; line-height: 1.45; }
.request-form label { display: grid; gap: 8px; }
.request-form label > span { color: #315b98; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.request-form label > span b, .appointment-fieldset legend b, .contact-step b { width: 23px; height: 26px; display: inline-grid; place-items: center; color: white; background: var(--primary); font-size: 10px; -webkit-mask: var(--hex-mask) center / contain no-repeat; mask: var(--hex-mask) center / contain no-repeat; }
.doctor-select { display: grid; gap: 8px; }
.doctor-select > span { display: flex; align-items: center; gap: 8px; color: #315b98; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.doctor-select > span b { width: 23px; height: 26px; display: inline-grid; place-items: center; color: white; background: var(--primary); font-size: 10px; -webkit-mask: var(--hex-mask) center / contain no-repeat; mask: var(--hex-mask) center / contain no-repeat; }
.mobile-doctor-trigger, .mobile-doctor-menu { display: none; }
.request-form input, .request-form select { width: 100%; max-width: 100%; min-width: 0; min-height: 54px; padding: 0 15px; border: 1px solid var(--sky); border-radius: 13px; outline: 0; color: var(--deep); background: var(--warm); transition: .2s; }
.request-form input:focus, .request-form select:focus { border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(0,78,224,.12); }
.selected-doctor { margin-top: 12px; padding: 13px; display: flex; align-items: center; gap: 12px; border-radius: 14px; background: var(--light); }
.doctor-mini-avatar { width: 40px; height: 46px; display: grid; place-items: center; color: var(--primary); background: white; -webkit-mask: var(--hex-mask) center / contain no-repeat; mask: var(--hex-mask) center / contain no-repeat; }
.selected-doctor strong, .selected-doctor span { display: block; }
.selected-doctor strong { font-size: 13px; line-height: 1.4; }
.selected-doctor span { margin-top: 3px; color: #40649b; font-size: 10px; }
.appointment-fieldset { min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
.appointment-fieldset legend, .contact-step { margin-bottom: 11px; display: flex; align-items: center; gap: 8px; color: #315b98; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.appointment-dates { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; }
.appointment-date { min-width: 0; min-height: 67px; padding: 8px 4px; border: 1px solid var(--sky); border-radius: 12px; background: var(--warm); cursor: pointer; transition: .2s; }
.appointment-date small, .appointment-date strong { display: block; }
.appointment-date small { color: #5577aa; font-size: 9px; text-transform: uppercase; }
.appointment-date strong { margin-top: 5px; font-size: 12px; white-space: nowrap; }
.appointment-date:hover, .appointment-time:hover { border-color: var(--blue); transform: translateY(-2px); }
.appointment-date.selected { border-color: var(--primary); color: white; background: var(--primary); box-shadow: 0 8px 20px rgba(0,78,224,.2); }
.appointment-date.selected small { color: rgba(255,255,255,.72); }
.appointment-times { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; }
.appointment-time { min-height: 39px; padding: 0 5px; border: 1px solid var(--sky); border-radius: 10px; color: var(--primary); background: #f4faff; font-size: 12px; font-weight: 700; cursor: pointer; transition: .2s; }
.appointment-time.selected { border-color: var(--deep); color: white; background: var(--deep); }
.appointment-time:disabled, .form-button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.otp-confirm { margin-top: 16px; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.otp-confirm input { min-height: 48px; padding: 0 14px; border: 1px solid var(--sky); border-radius: 12px; font-size: 16px; letter-spacing: .12em; }
.otp-confirm .primary-button { min-height: 48px; border: 0; }
.contact-step { margin-top: 22px; }
.form-fields { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.appointment-summary { margin-top: 17px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--sky); border-radius: 14px; background: #f5fbff; }
.appointment-summary svg { color: var(--primary); }
.appointment-summary span, .appointment-summary strong, .appointment-summary small { display: block; }
.appointment-summary span { color: #5577aa; font-size: 9px; text-transform: uppercase; }
.appointment-summary strong { margin-top: 2px; font-size: 15px; }
.appointment-summary small { margin-top: 3px; color: #40649b; font-size: 10px; }
.form-button { width: 100%; margin-top: 18px; }
.form-note { margin: 12px 0 0; color: #5577aa; font-size: 10px; text-align: center; }
.prepayment-note { margin: 2px 0 0; padding: 10px 12px; border: 1px solid #c9dcff; border-radius: 11px; color: #315b80; background: #f4f8ff; font-size: 10px; line-height: 1.45; }
.form-notice { margin-top: 14px; padding: 12px 14px; border-radius: 12px; color: var(--deep); background: var(--light); font-size: 12px; line-height: 1.5; }
.form-notice a { font-weight: 700; text-decoration: underline; }


/* Guided booking: direction, doctor, time, then patient details. */
.request-form [hidden] { display: none !important; }
.booking-direction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.booking-direction-card, .booking-doctor-card { border: 1px solid var(--sky); border-radius: 12px; background: white; color: var(--deep); text-align: left; cursor: pointer; font: inherit; }
.booking-direction-card { display: flex; align-items: center; gap: 9px; padding: 12px; min-height: 64px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.booking-direction-card svg { flex-shrink: 0; color: #075be5; }
.booking-direction-card.selected, .booking-doctor-card.selected { border-color: #075be5; background: #edf5ff; box-shadow: inset 0 0 0 1px #075be5; }
.booking-direction-card:focus-visible, .booking-doctor-card:focus-visible { outline: 3px solid #075be5; outline-offset: 3px; }
.booking-doctor-list { display: grid; gap: 8px; }
.booking-doctor-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; }
.booking-doctor-card span { display: grid; gap: 4px; }
.booking-doctor-card strong { font-size: 15px; font-weight: 700; }
.booking-doctor-card small { font-size: 13px; font-weight: 400; }
.booking-doctor-card svg { flex-shrink: 0; }
.booking-contact-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }