/* Wellkins booking redesign - extracted from the approved mockup.
   Every rule is scoped under .wk-booking so it cannot affect the
   backend or other portal pages. Comments stripped before scoping. */

.wk-booking { --magenta: #D6006D; --magenta-light: #F0408A; --magenta-bg: #FFF0F6; --navy: #211261; --navy-light: #2E1A80; --white: #FFFFFF; --gray-50: #F8F9FC; --gray-100: #F1F3F8; --gray-200: #E2E6EF; --gray-300: #C5CBD9; --gray-400: #9BA3B5; --gray-500: #6B7280; --gray-700: #374151; --gray-900: #111827; --green: #6B8E23; --green-light: #F0F4E4; --red: #DC2626; --red-light: #FEE2E2; --amber: #F59E0B; --amber-light: #FEF3C7; --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 1px 3px rgba(33, 18, 97, 0.06); --shadow-md: 0 4px 16px rgba(33, 18, 97, 0.08); --shadow-lg: 0 8px 32px rgba(33, 18, 97, 0.12); }
.wk-booking * { margin: 0; padding: 0; box-sizing: border-box; }
.wk-booking { font-family: 'DM Sans', sans-serif; background: var(--gray-50); color: var(--gray-900); min-height: 100vh; -webkit-font-smoothing: antialiased; }
.wk-booking .header { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.wk-booking .logo { display: flex; align-items: center; gap: 10px; }
.wk-booking .logo-img { height: 40px; width: auto; object-fit: contain; }
.wk-booking .logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--magenta), var(--navy)); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 14px; font-family: 'Plus Jakarta Sans', sans-serif; }
.wk-booking .logo-text { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; color: var(--navy); letter-spacing: -0.5px; }
.wk-booking .header-nav a { color: var(--gray-500); text-decoration: none; font-weight: 500; font-size: 14px; transition: color 0.2s; }
.wk-booking .header-nav a:hover { color: var(--magenta); }
.wk-booking .main { max-width: 880px; margin: 0 auto; padding: 40px 32px 80px; }
.wk-booking .page-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 28px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.wk-booking .page-subtitle { color: var(--gray-400); font-size: 15px; margin-bottom: 32px; }
.wk-booking .section-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-200); padding: 32px; margin-bottom: 24px; box-shadow: var(--shadow-sm); }
.wk-booking .section-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--magenta); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
.wk-booking .section-label::before { content: ''; width: 4px; height: 16px; background: var(--magenta); border-radius: 2px; }
.wk-booking .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.wk-booking .form-group { display: flex; flex-direction: column; }
.wk-booking .form-group.full-width { grid-column: 1 / -1; }
.wk-booking .form-label { font-size: 13px; font-weight: 600; color: var(--gray-500); margin-bottom: 8px; letter-spacing: 0.2px; }
.wk-booking .form-select, .wk-booking .form-input { width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--gray-900); background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; appearance: none; cursor: pointer; }
.wk-booking .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239BA3B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.wk-booking .form-select:focus, .wk-booking .form-input:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(214, 0, 109, 0.1); }
.wk-booking .form-textarea { width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--gray-700); background: var(--gray-50); resize: vertical; min-height: 80px; line-height: 1.5; }
.wk-booking .form-textarea:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(214, 0, 109, 0.1); }
.wk-booking .doctor-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: linear-gradient(135deg, var(--gray-50), var(--magenta-bg)); border-radius: var(--radius-sm); border: 1.5px solid var(--gray-200); }
.wk-booking .doctor-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--magenta), var(--navy)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.wk-booking .doctor-avatar-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2.5px solid var(--white); box-shadow: 0 2px 8px rgba(33, 18, 97, 0.15); }
.wk-booking .doctor-info h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.wk-booking .doctor-info p { font-size: 13px; color: var(--gray-400); font-weight: 500; }
.wk-booking .alert-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; }
.wk-booking .alert-banner.warning { background: var(--amber-light); border: 1px solid #FDE68A; color: #92400E; }
.wk-booking .alert-banner.error { background: var(--red-light); border: 1px solid #FECACA; color: #991B1B; }
.wk-booking .alert-banner.info { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; }
.wk-booking .alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.wk-booking .alert-content strong { display: block; font-weight: 600; margin-bottom: 2px; }
.wk-booking .calendar-wrapper { max-width: 380px; }
.wk-booking .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.wk-booking .calendar-header h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; color: var(--navy); }
.wk-booking .cal-nav { display: flex; gap: 4px; }
.wk-booking .cal-nav button { width: 32px; height: 32px; border: 1.5px solid var(--gray-200); background: var(--white); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gray-500); font-size: 14px; transition: all 0.2s; }
.wk-booking .cal-nav button:hover { border-color: var(--magenta); color: var(--magenta); }
.wk-booking .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.wk-booking .cal-day-label { font-size: 11px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 0; }
.wk-booking .cal-day { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--gray-700); cursor: pointer; transition: all 0.15s; border: none; background: none; }
.wk-booking .cal-day:hover:not(.disabled):not(.selected) { background: var(--gray-100); }
.wk-booking .cal-day.today { background: var(--magenta-bg); color: var(--magenta); font-weight: 700; }
.wk-booking .cal-day.selected { background: var(--magenta); color: white; font-weight: 700; box-shadow: 0 2px 8px rgba(214, 0, 109, 0.3); }
.wk-booking .cal-day.disabled { color: var(--gray-300); cursor: not-allowed; }
.wk-booking .cal-day.empty { cursor: default; }
.wk-booking .timeslot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wk-booking .timeslot { padding: 14px 8px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; transition: all 0.2s; border: 1.5px solid transparent; }
.wk-booking .timeslot.available { background: linear-gradient(135deg, rgba(214, 0, 109, 0.08), rgba(33, 18, 97, 0.08)); color: var(--navy); border-color: rgba(214, 0, 109, 0.2); }
.wk-booking .timeslot.available:hover { background: linear-gradient(135deg, var(--magenta), var(--navy)); color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(214, 0, 109, 0.3); }
.wk-booking .timeslot.available.selected { background: linear-gradient(135deg, var(--magenta), var(--navy)); color: white; box-shadow: 0 4px 12px rgba(214, 0, 109, 0.3); }
.wk-booking .timeslot.booked { background: var(--red-light); color: var(--red); border-color: #FECACA; cursor: not-allowed; opacity: 0.7; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wk-booking .slot-time { font-size: 14px; font-weight: 600; }
.wk-booking .slot-booked-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }
.wk-booking .slot-legend { display: flex; gap: 24px; margin-bottom: 20px; font-size: 13px; color: var(--gray-500); }
.wk-booking .slot-legend span { display: flex; align-items: center; gap: 6px; }
.wk-booking .legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.wk-booking .legend-dot.available { background: linear-gradient(135deg, var(--magenta), var(--navy)); border: none; }
.wk-booking .legend-dot.booked { background: var(--red-light); border: 1px solid #FECACA; }
.wk-booking .phone-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; }
.wk-booking .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; background: linear-gradient(135deg, var(--magenta), var(--magenta-light)); color: white; border: none; border-radius: var(--radius-sm); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 16px rgba(214, 0, 109, 0.25); }
.wk-booking .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(214, 0, 109, 0.35); }
.wk-booking .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.wk-booking .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; background: var(--white); color: var(--magenta); border: 2px solid var(--magenta); border-radius: var(--radius-sm); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.wk-booking .btn-secondary:hover { background: var(--magenta); color: white; }
.wk-booking .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--gray-300); color: var(--gray-400); }
.wk-booking .btn-secondary:disabled:hover { background: var(--white); color: var(--gray-400); }
.wk-booking .otp-box { background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: var(--radius); padding: 28px; }
.wk-booking .otp-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.wk-booking .otp-icon { font-size: 24px; flex-shrink: 0; }
.wk-booking .otp-header strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--navy); display: block; margin-bottom: 2px; }
.wk-booking .otp-hint { font-size: 13px; color: var(--gray-400); }
.wk-booking .otp-inputs { display: flex; gap: 14px; margin-bottom: 20px; }
.wk-booking .otp-digit { width: 56px; height: 60px; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; font-weight: 800; color: var(--navy); border: 2px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--white); transition: all 0.2s; outline: none; }
.wk-booking .otp-digit:focus { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(214, 0, 109, 0.1); }
.wk-booking .otp-digit.filled { border-color: var(--navy); background: var(--gray-50); }
.wk-booking .otp-digit.success { border-color: var(--green); background: var(--green-light); color: var(--green); }
.wk-booking .otp-digit.error { border-color: var(--red); background: var(--red-light); }
.wk-booking .otp-actions { display: flex; align-items: center; gap: 12px; }
.wk-booking .otp-timer { font-size: 13px; color: var(--gray-400); }
.wk-booking .otp-resend { background: none; border: none; color: var(--magenta); font-weight: 600; font-size: 13px; cursor: pointer; font-family: 'DM Sans', sans-serif; text-decoration: underline; }
.wk-booking .otp-resend:hover { color: var(--navy); }
.wk-booking .otp-error { margin-top: 12px; font-size: 13px; color: var(--red); font-weight: 600; }
.wk-booking .otp-success { margin-top: 12px; font-size: 14px; color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.wk-booking .stepper { display: flex; align-items: center; gap: 0; margin-bottom: 36px; }
.wk-booking .step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--gray-400); }
.wk-booking .step.active { color: var(--magenta); }
.wk-booking .step.completed { color: var(--green); }
.wk-booking .step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--gray-300); background: var(--white); }
.wk-booking .step.active .step-num { border-color: var(--magenta); background: var(--magenta); color: white; }
.wk-booking .step.completed .step-num { border-color: var(--green); background: var(--green); color: white; }
.wk-booking .step-line { flex: 1; height: 2px; background: var(--gray-200); margin: 0 12px; min-width: 32px; }
.wk-booking .step-line.completed { background: var(--green); }
@media (max-width: 768px) {
.wk-booking .main { padding: 24px 20px 48px; }
.wk-booking .timeslot-grid { grid-template-columns: repeat(3, 1fr); }
.wk-booking .calendar-wrapper { max-width: 100%; }
}
@media (max-width: 640px) {
.wk-booking { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.wk-booking .header { padding: 0 16px; height: 56px; position: sticky; top: 0; }
.wk-booking .logo-img { height: 32px; }
.wk-booking .logo-icon { width: 30px; height: 30px; font-size: 12px; }
.wk-booking .header-nav a { font-size: 13px; }
.wk-booking .main { padding: 16px 12px 100px; max-width: 100%; }
.wk-booking .page-title { font-size: 22px; margin-bottom: 2px; }
.wk-booking .page-subtitle { font-size: 13px; margin-bottom: 16px; }
.wk-booking .section-card { padding: 16px; margin-bottom: 12px; border-radius: 10px; margin-left: -2px; margin-right: -2px; }
.wk-booking .section-label { font-size: 11px; margin-bottom: 14px; letter-spacing: 1.2px; }
.wk-booking .form-grid { grid-template-columns: 1fr; gap: 12px; }
.wk-booking .form-label { font-size: 12px; margin-bottom: 5px; }
.wk-booking .form-select, .wk-booking .form-input { font-size: 16px; padding: 14px 16px; border-radius: 10px; min-height: 50px; }
.wk-booking .form-select { padding-right: 42px; }
.wk-booking .form-textarea { font-size: 16px; padding: 14px 16px; min-height: 70px; border-radius: 10px; }
.wk-booking .doctor-card { padding: 14px; gap: 12px; border-radius: 10px; }
.wk-booking .doctor-avatar { width: 44px; height: 44px; font-size: 14px; }
.wk-booking .doctor-avatar-img { width: 50px; height: 50px; }
.wk-booking .doctor-info h3 { font-size: 15px; }
.wk-booking .doctor-info p { font-size: 12px; }
.wk-booking .alert-banner { padding: 12px; font-size: 13px; border-radius: 10px; line-height: 1.4; }
.wk-booking .alert-icon { font-size: 16px; }
.wk-booking .alert-content strong { font-size: 13px; }
.wk-booking .calendar-wrapper { max-width: 100%; }
.wk-booking .calendar-header { margin-bottom: 12px; }
.wk-booking .calendar-header h4 { font-size: 16px; }
.wk-booking .cal-nav button { width: 36px; height: 36px; border-radius: 10px; }
.wk-booking .cal-day-label { font-size: 11px; padding: 6px 0; }
.wk-booking .cal-day { font-size: 15px; border-radius: 10px; min-height: 42px; aspect-ratio: auto; }
.wk-booking .timeslot-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wk-booking .timeslot { padding: 14px 6px; font-size: 13px; font-weight: 600; border-radius: 10px; min-height: 52px; display: flex; align-items: center; justify-content: center; }
.wk-booking .timeslot.booked { min-height: 52px; }
.wk-booking .slot-time { font-size: 13px; }
.wk-booking .slot-booked-tag { font-size: 9px; }
.wk-booking .slot-legend { margin-bottom: 12px; gap: 16px; font-size: 12px; }
.wk-booking .stepper { gap: 0; margin-bottom: 18px; }
.wk-booking .step span { display: none; }
.wk-booking .step-num { width: 28px; height: 28px; font-size: 12px; }
.wk-booking .step-line { min-width: 24px; margin: 0 6px; }
.wk-booking .phone-row { grid-template-columns: 88px 1fr; gap: 8px; }
.wk-booking .otp-box { padding: 16px; border-radius: 10px; }
.wk-booking .otp-header { margin-bottom: 16px; gap: 10px; }
.wk-booking .otp-icon { font-size: 20px; }
.wk-booking .otp-header strong { font-size: 14px; }
.wk-booking .otp-hint { font-size: 12px; }
.wk-booking .otp-inputs { gap: 10px; justify-content: center; }
.wk-booking .otp-digit { width: 54px; height: 58px; font-size: 22px; border-radius: 10px; }
.wk-booking .btn-primary { width: 100%; padding: 16px; font-size: 16px; border-radius: 12px; min-height: 54px; }
.wk-booking .btn-secondary { width: 100%; padding: 14px; font-size: 14px; justify-content: center; border-radius: 12px; min-height: 50px; }
.wk-booking .timeslot:active:not(.booked), .wk-booking .cal-day:active:not(.disabled):not(.empty), .wk-booking .btn-primary:active, .wk-booking .btn-secondary:active { transform: scale(0.97); transition: transform 0.1s; }
.wk-booking { scroll-behavior: smooth; }
.wk-booking .timeslot, .wk-booking .cal-day, .wk-booking .btn-primary, .wk-booking .btn-secondary { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
}
@media (max-width: 380px) {
.wk-booking .main { padding: 12px 8px 90px; }
.wk-booking .section-card { padding: 14px; margin-left: -4px; margin-right: -4px; }
.wk-booking .page-title { font-size: 20px; }
.wk-booking .form-select, .wk-booking .form-input { padding: 12px 14px; }
.wk-booking .otp-digit { width: 48px; height: 52px; font-size: 20px; }
.wk-booking .otp-inputs { gap: 8px; }
.wk-booking .timeslot-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.wk-booking .timeslot { padding: 12px 4px; font-size: 12px; min-height: 48px; }
.wk-booking .cal-day { font-size: 14px; min-height: 38px; }
.wk-booking .calendar-grid { gap: 2px; }
}
@media (max-height: 500px) and (orientation: landscape) {
.wk-booking .header { height: 48px; }
.wk-booking .main { padding: 12px 16px 40px; }
.wk-booking .section-card { padding: 14px; margin-bottom: 10px; }
.wk-booking .timeslot-grid { grid-template-columns: repeat(4, 1fr); }
.wk-booking .cal-day { min-height: 36px; }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
.wk-booking .section-card { animation: fadeUp 0.4s ease-out both; }
.wk-booking .section-card:nth-child(2) { animation-delay: 0.05s; }
.wk-booking .section-card:nth-child(3) { animation-delay: 0.1s; }
.wk-booking .section-card:nth-child(4) { animation-delay: 0.15s; }
.wk-booking .section-card:nth-child(5) { animation-delay: 0.2s; }

/* ============================================================
   INTEGRATION OVERRIDES
   Fixes for the live page: legacy booking.css/form-elements.css
   conflicts, JS-generated markup (slots, doctor card) and the
   jQuery-UI datepicker. Kept at the end of this file so they
   always win the cascade over the extracted mockup rules above.
   ============================================================ */

/* ---- Page layout: kill the pink sidebar & 85% squeeze on booking pages.
   html:has() is fine on the modern Chrome/Edge used at the clinics. */
html:has(.wk-booking) .welkins_img { display: none !important; }
html:has(.wk-booking) #wrapwrap { width: 100% !important; float: none !important; }
html:has(.wk-booking) .book_content { padding: 0 16px !important; }
html:has(.wk-booking) .main_content_pgbooking { width: 100% !important; }

.wk-booking.book_page { padding-top: 24px; background: var(--gray-50); }
.wk-booking .form-box { max-width: none; }
.wk-booking .main { display: block; max-width: 880px; margin: 0 auto; padding: 16px 16px 80px; }
/* ^ display:block kills the global ".main {display:flex}" from home.css:310 */
.wk-booking .f1 fieldset { border: none; padding: 0; margin: 0; background: transparent; box-shadow: none; }

/* ---- Form controls: legacy form-elements.css sets fixed heights/line-heights
   that clip the text. Restore sane boxes. */
.wk-booking select.form-control,
.wk-booking select.form-select {
    height: 44px !important;
    line-height: normal !important;
    padding: 0 36px 0 14px !important;
    font-size: 14px !important;
    color: var(--gray-900) !important;
    background-color: var(--white) !important;
    border: 1.5px solid var(--gray-200) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    width: 100%;
}
.wk-booking input.form-control,
.wk-booking input.form-input {
    height: 44px !important;
    line-height: normal !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    color: var(--gray-900) !important;
    background-color: var(--white) !important;
    border: 1.5px solid var(--gray-200) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    width: 100%;
}
.wk-booking textarea.form-control {
    min-height: 80px !important;
    height: auto !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--gray-700) !important;
    background-color: var(--gray-50) !important;
    border: 1.5px solid var(--gray-200) !important;
    border-radius: var(--radius-sm) !important;
}
.wk-booking select.form-control:focus,
.wk-booking input.form-control:focus,
.wk-booking input.form-input:focus {
    border-color: var(--magenta) !important;
    box-shadow: 0 0 0 3px rgba(214, 0, 109, 0.12) !important;
    outline: none !important;
}

/* ---- Doctor card: booking.js injects
   <div.doc_img_div><div.div_img><img/></div><div.doc_name_div>…</div></div>
   into .doc_img. Style that structure like the mockup's doctor-card. */
.wk-booking .doc_img { width: 100% !important; text-align: left !important; }
.wk-booking .doc_img_div {
    display: flex !important;
    align-items: center;
    gap: 16px;
    background: var(--magenta-bg);
    border: 1px solid #FFD6E8;
    border-radius: var(--radius);
    padding: 16px 20px;
    width: auto !important;
    height: auto !important;
}
.wk-booking .doc_img_div .div_img {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
}
.wk-booking .doc_img_div img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid var(--white);
    box-shadow: var(--shadow-sm);
}
.wk-booking .doc_img_div .doc_name_div {
    float: none !important;
    width: auto !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.5;
}
.wk-booking .doc_img_div .doc_name_div strong {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}
.wk-booking .doc_img_div .doc_name_div i.fa-user-md { display: none; }

/* ---- Mini calendar: skin the jQuery-UI datepicker to match the mockup. */
.wk-booking .mini_calendar { margin-top: 0 !important; }
.wk-booking .mini_calendar .ui-datepicker {
    width: 100% !important;
    max-width: 420px;
    border: none !important;
    background: var(--white) !important;
    font-family: 'DM Sans', sans-serif !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.wk-booking .mini_calendar .ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 14px !important;
}
.wk-booking .mini_calendar .ui-datepicker-title {
    display: flex;
    /* No flex gap: jQuery UI already puts an &nbsp; between the month and year
       spans, so a gap here would double the spacing. */
    gap: 0;
    /* Left-aligned, per the design (was centred for the dropdown header). */
    justify-content: flex-start;
}
.wk-booking .mini_calendar .ui-datepicker-title select {
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--navy) !important;
    border: 1.5px solid var(--gray-200) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--white) !important;
}
.wk-booking .mini_calendar .ui-datepicker-prev,
.wk-booking .mini_calendar .ui-datepicker-next {
    top: 8px !important;
    width: 30px !important;
    height: 30px !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--white) !important;
    cursor: pointer;
}
.wk-booking .mini_calendar .ui-datepicker-prev:hover,
.wk-booking .mini_calendar .ui-datepicker-next:hover {
    border-color: var(--magenta) !important;
    background: var(--magenta-bg) !important;
}
.wk-booking .mini_calendar table.ui-datepicker-calendar {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 4px !important;
    margin: 0 !important;
}
.wk-booking .mini_calendar .ui-datepicker-calendar th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-400);
    padding: 6px 0 !important;
    border: none !important;
    background: transparent !important;
}
.wk-booking .mini_calendar .ui-datepicker-calendar td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.wk-booking .mini_calendar .ui-datepicker-calendar td a,
.wk-booking .mini_calendar .ui-datepicker-calendar td span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    margin: 0 auto;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--gray-700);
    text-align: center !important;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    transition: all 0.15s;
}
.wk-booking .mini_calendar .ui-datepicker-calendar td a:hover {
    background: var(--magenta-bg) !important;
    color: var(--magenta) !important;
}
.wk-booking .mini_calendar .ui-datepicker-calendar td a.ui-state-active {
    background: var(--magenta) !important;
    color: var(--white) !important;
    font-weight: 700;
}
.wk-booking .mini_calendar .ui-datepicker-calendar td a.ui-state-highlight:not(.ui-state-active) {
    border: 1.5px solid var(--magenta) !important;
    color: var(--magenta) !important;
    background: var(--magenta-bg) !important;
}
.wk-booking .mini_calendar .ui-datepicker-calendar td.ui-state-disabled span,
.wk-booking .mini_calendar .ui-datepicker-calendar td.ui-datepicker-unselectable span {
    color: var(--gray-300) !important;
    background: transparent !important;
}

/* ---- Time slots: booking.js regenerates items as .slot_item.font_welkins
   (optionally .slot_busy with a <span class="ribbon">), so style those
   directly. Replace the legacy fixed-height scroll box with the grid. */
.wk-booking .time_slot { width: 100%; }
.wk-booking .slot_list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
}
/* Colours below mirror the mockup's .timeslot rules exactly:
      available  -> magenta/navy 8% tinted gradient + 20% magenta border
      hover      -> full magenta->navy gradient, white text, lift + shadow
      selected   -> same gradient as hover (booking.js adds .selected_slot)
      booked     -> red-light fill, #FECACA border, 0.7 opacity            */
.wk-booking .slot_item.font_welkins {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: auto !important;
    height: auto !important;
    min-height: 56px;
    margin: 0 !important;
    padding: 10px 6px !important;
    background: linear-gradient(135deg, rgba(214, 0, 109, 0.08), rgba(33, 18, 97, 0.08)) !important;
    border: 1.5px solid rgba(214, 0, 109, 0.2) !important;
    border-radius: 10px !important;
    color: var(--navy) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.wk-booking .slot_item.font_welkins:hover {
    background: linear-gradient(135deg, var(--magenta), var(--navy)) !important;
    border-color: transparent !important;
    color: var(--white) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(214, 0, 109, 0.3) !important;
}
.wk-booking .slot_item.font_welkins:hover > span { color: var(--white) !important; }
.wk-booking .slot_item.selected_slot,
.wk-booking .slot_item.selected_slot.font_welkins:hover {
    background: linear-gradient(135deg, var(--magenta), var(--navy)) !important;
    border-color: transparent !important;
    color: var(--white) !important;
    box-shadow: 0 4px 12px rgba(214, 0, 109, 0.3) !important;
}
.wk-booking .slot_item.selected_slot > span { color: var(--white) !important; }
.wk-booking .slot_item.font_welkins.slot_busy {
    background: var(--red-light) !important;
    border-color: #FECACA !important;
    color: var(--red) !important;
    cursor: not-allowed;
    opacity: 0.7 !important;
}
.wk-booking .slot_item.font_welkins.slot_busy:hover {
    border-color: #FECACA !important;
    background: var(--red-light) !important;
    color: var(--red) !important;
    transform: none;
    box-shadow: none !important;
}
/* booking.css styles booked slots as a "ribbon" badge overlay:
       .slot_item.slot_busy > span { height:50%; float:left; margin-top:-12% }
   The negative margin and forced height drag the two spans on top of each
   other inside a flex tile, so every one of those declarations has to be
   neutralised here - not just colour and position. */
.wk-booking .slot_item.font_welkins.slot_busy > span,
.wk-booking .slot_item.font_welkins.slot_busy:hover > span {
    color: var(--red) !important;
    background: transparent !important;
    position: static !important;
    transform: none !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}
/* The tag stays in normal flow, so the tile simply centres whatever it
   contains - nothing can overlap or be clipped at any zoom / DPI. */
.wk-booking .slot_item.font_welkins.slot_busy > span.ribbon {
    display: block;
    position: static !important;
    margin: 0 !important;
    width: auto !important;
    text-align: center;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.8;
    box-shadow: none !important;
}

/* Nothing reserves space and nothing is positioned: each tile is just a
   centred flex column, so its content sits dead-centre both ways - a single
   time label on an available slot, or the time + BOOKED pair on a booked one.
   Being purely content-driven, it holds at any zoom, DPI or font size. */

/* ---- OTP buttons ---- */
.wk-booking .otp_btn2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    padding: 11px 22px;
    background: var(--white) !important;
    color: var(--magenta) !important;
    border: 1.5px solid var(--magenta);
    border-radius: var(--radius-sm);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center !important;
}
.wk-booking .otp_btn2:hover { background: var(--magenta-bg) !important; }

/* ---- Confirm button: legacy .book_next_pg strips padding with !important. */
.wk-booking .f1-buttons { display: flex; justify-content: flex-end; margin-top: 24px; }
.wk-booking .btn-next.book_next_pg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-width: auto !important;
    line-height: 1.2 !important;
    padding: 13px 28px !important;
    background: linear-gradient(135deg, var(--magenta), var(--magenta-light)) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(214, 0, 109, 0.35);
    transition: all 0.2s;
}
.wk-booking .btn-next.book_next_pg:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(214, 0, 109, 0.45);
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
    .wk-booking .slot_list { grid-template-columns: repeat(3, 1fr); }
    .wk-booking .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .wk-booking .slot_list { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ROUND 2 FIXES: header bar, exact centering, doctor card resets
   ============================================================ */

/* ---- Header: legacy floated .h_row collapses and the page title slides
   under the logo. Rebuild it as the mockup's sticky white bar. ---- */
html:has(.wk-booking) header {
    position: sticky !important;
    top: 0;
    z-index: 100;
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E6EF;
    height: 64px;
}
html:has(.wk-booking) header > .h_row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    width: 100% !important;
    padding: 0 24px !important;
}
html:has(.wk-booking) header .logo_div {
    width: auto !important;
    float: none !important;
    display: flex;
    align-items: center;
}
html:has(.wk-booking) header .logo_div img { max-height: 40px; width: auto; }
html:has(.wk-booking) header div.h_row > div.btn_div {
    width: auto !important;
    float: none !important;
}
html:has(.wk-booking) header .hdr_buttons { width: auto !important; display: flex !important; }
html:has(.wk-booking) header .hdr_buttons > div { float: none !important; }
html:has(.wk-booking) header .bt_icon.font_welkins,
html:has(.wk-booking) header .bt_label { display: inline-block; }

/* ---- Exact horizontal centering: neutralise the bootstrap-era wrappers so
   .wk-booking .main { max-width:880px; margin:0 auto } centres in the real
   viewport, exactly like the mockup. ---- */
.wk-booking .top-content { padding: 0 !important; width: 100%; }
.wk-booking .top-content .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wk-booking .top-content .row {
    margin: 0 !important;
    width: 100%;
}
.wk-booking .form-box {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    float: none !important;
}

/* ---- Doctor card: kill the remaining legacy gray blocks. ---- */
.wk-booking .doc_img_div .div_img {
    width: auto !important;
    height: auto !important;
    float: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.wk-booking .doc_img_div img {
    padding: 0 !important;
    background: var(--white);
}
.wk-booking .doc_img_div .doc_name_div {
    width: auto !important;
    height: auto !important;
    float: none !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    flex: 1;
}
.wk-booking .doc_img_div .doc_name_div > strong { color: var(--navy) !important; }

/* ============================================================
   STEP NAVIGATION (3-step wizard)
   ============================================================ */
.wk-booking .wk-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
}
.wk-booking .wk-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-width: auto !important;
    line-height: 1.2 !important;
    padding: 13px 28px !important;
    background: linear-gradient(135deg, var(--magenta), var(--magenta-light)) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(214, 0, 109, 0.35);
    transition: all 0.2s;
}
.wk-booking .wk-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(214, 0, 109, 0.45);
}
.wk-booking .wk-prev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-width: auto !important;
    line-height: 1.2 !important;
    padding: 13px 24px !important;
    background: var(--white) !important;
    color: var(--gray-700) !important;
    border: 1.5px solid var(--gray-200) !important;
    border-radius: var(--radius-sm) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s;
}
.wk-booking .wk-prev:hover {
    border-color: var(--gray-400) !important;
    color: var(--navy) !important;
}
/* Confirm button lives inside the step nav now */
.wk-booking .wk-step-nav .btn-next.book_next_pg { margin-left: auto; }

/* ============================================================
   CLIENT FEEDBACK ROUND: notes banners, additional notes,
   split phone field, WhatsApp OTP button, single action row
   ============================================================ */

/* ---- Doctor / department / procedure notes -------------------------------
   booking.js needs the textareas (it writes them with .val()), so they stay in
   the DOM but are hidden; booking_redesign.js mirrors their text into the
   .alert-banner beside them. */
.wk-booking .wk-note { margin-top: 16px; }
.wk-booking .wk-note > textarea { display: none !important; }
.wk-booking .wk-note .alert-banner { margin: 0; }
.wk-booking .wk-note .wk-note-text { white-space: pre-line; }

/* ---- Additional notes (under the slot grid) ---- */
.wk-booking textarea.form-textarea {
    width: 100%;
    padding: 12px 16px !important;
    height: auto !important;
    border: 1.5px solid var(--gray-200) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--gray-50) !important;
    color: var(--gray-700) !important;
    font-family: 'DM Sans', sans-serif !important;
    line-height: 1.5 !important;
    resize: vertical;
}
.wk-booking textarea.form-textarea:focus {
    border-color: var(--magenta) !important;
    box-shadow: 0 0 0 3px rgba(214, 0, 109, 0.12) !important;
    outline: none !important;
}

/* ---- Phone: country selector + local number ----
   The combined "+<code><number>" field is what booking.js and the booking
   payload read. It must stay a text input (the payload sweep only matches
   input[type=text]) so it is hidden off-screen rather than with display:none. */
.wk-booking .phone-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.wk-booking .phone-row .wk-country {
    padding-right: 30px !important;
    background-position: right 8px center !important;
    text-overflow: ellipsis;
}
.wk-booking input.wk-phone-combined {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* ---- Action row: Send OTP (left) + Confirm Booking (right) ---- */
.wk-booking .wk-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.wk-booking .wk-step-nav .otp_btn2 {
    width: auto !important;
    margin: 0 !important;
}
.wk-booking .wk-step-nav .otp_btn2 svg { flex-shrink: 0; }
/* Confirm always sits at the far right, with or without the OTP button. */
.wk-booking .wk-step-nav .btn-next.book_next_pg { margin-left: auto; }

@media (max-width: 640px) {
    .wk-booking .phone-row { grid-template-columns: 120px 1fr; gap: 8px; }
    /* Natural order on narrow screens: request OTP -> enter it -> confirm.
       (This used to be column-reverse, which put Confirm above Send OTP.) */
    .wk-booking .wk-step-nav { flex-direction: column; align-items: stretch; }
    .wk-booking .wk-step-nav .otp_btn2,
    .wk-booking .wk-step-nav .btn-next.book_next_pg { width: 100% !important; margin-left: 0 !important; }
}

/* ============================================================
   ROUND 2 FEEDBACK: avatar initials, inline 6-digit OTP
   ============================================================ */

/* ---- Doctor avatar: initials when there is no usable photo ----
   booking.js renders .doc_img_div > .div_img > img; when the photo turns out
   to be Odoo's placeholder, booking_redesign.js appends .wk-avatar-initials
   and marks the wrapper .wk-no-photo so the placeholder image is hidden. */
.wk-booking .doc_img_div .div_img { position: relative; }
.wk-booking .doc_img_div .div_img.wk-no-photo img { display: none !important; }
.wk-booking .wk-avatar-initials {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--magenta), var(--navy));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    border: 2px solid var(--white);
    box-shadow: var(--shadow-sm);
}

/* ---- OTP: hidden field + inline six-box entry ---- */
.wk-booking input.wk-otp-combined {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none;
}
.wk-booking .wk-otp-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.wk-booking .wk-otp-inline .otp-inputs { margin-bottom: 0; gap: 8px; }
/* Compact enough to sit between the two action buttons on one line. */
.wk-booking .wk-otp-inline .otp-digit {
    width: 42px !important;
    height: 48px !important;
    font-size: 20px !important;
    padding: 0 !important;
    line-height: 1 !important;
    border: 2px solid var(--gray-200) !important;
    border-radius: 8px !important;
    background: var(--white) !important;
    color: var(--navy) !important;
    text-align: center;
}
.wk-booking .wk-otp-inline .otp-digit:focus {
    border-color: var(--magenta) !important;
    box-shadow: 0 0 0 3px rgba(214, 0, 109, 0.12) !important;
    outline: none !important;
}
.wk-booking .wk-resend { font-size: 12px; color: var(--gray-400); }
.wk-booking .wk-resend .otp_timer { color: var(--magenta); font-weight: 600; }
/* booking.js clears .otp_timer when the countdown ends. The label is hidden
   by a class that booking_redesign.js toggles, so this does not depend on
   :has() being supported by the browser. */
.wk-booking .wk-resend.wk-empty { visibility: hidden; }

@media (max-width: 900px) {
    .wk-booking .wk-otp-inline .otp-digit { width: 36px !important; height: 44px !important; font-size: 18px !important; }
    .wk-booking .wk-otp-inline .otp-inputs { gap: 6px; }
}
@media (max-width: 640px) {
    .wk-booking .wk-step-nav .wk-otp-inline { width: 100%; justify-content: center; }
    .wk-booking .wk-otp-inline .otp-inputs { justify-content: center; }
}

/* ---- Past time slots -------------------------------------------------
   Styled as plainly disabled (grey) rather than red, so they read as
   "no longer available" and stay visually distinct from a booked slot. */
.wk-booking .slot_item.font_welkins.wk-slot-past,
.wk-booking .slot_item.font_welkins.wk-slot-past:hover {
    background: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-300) !important;
    cursor: not-allowed !important;
    opacity: 0.65 !important;
    transform: none !important;
    box-shadow: none !important;
}
.wk-booking .slot_item.font_welkins.wk-slot-past > span,
.wk-booking .slot_item.font_welkins.wk-slot-past:hover > span {
    color: var(--gray-300) !important;
}
/* A past slot that is also booked keeps the disabled grey. */
.wk-booking .slot_item.font_welkins.slot_busy.wk-slot-past > span.ribbon {
    color: var(--gray-300) !important;
}

/* ---- Page background --------------------------------------------------
   The mockup paints <body> with --gray-50 (#F8F9FC). Scoping turned that
   into a rule on .wk-booking, which only covers its own box - the real
   <body> stayed white and showed through around and below the content.
   Paint the whole page instead, but only on pages carrying .wk-booking. */
html:has(.wk-booking),
html:has(.wk-booking) body,
html:has(.wk-booking) #wrapwrap,
html:has(.wk-booking) main.booking_main {
    background: #F8F9FC !important;
}

/* ---- OTP entry: give the inline group the box treatment ----
   The mockup wraps the digits in .otp-box (gray-50 fill + border). Inline
   between the two buttons it needs to be compact, but it should still read
   as one panel rather than six floating outlines. */
.wk-booking .wk-otp-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 10px 14px;
}

/* ---- The form itself must not paint over the page ----------------------
   style.css gives .booking_main .f1 a solid white background, which covered
   the tinted page and made the white cards blend into it. */
.wk-booking form.f1 {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---- OTP card: one row, same height as the buttons beside it ----
   The countdown now lives here rather than on the Send OTP button. */
.wk-booking .wk-otp-inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    min-height: 50px;
}
.wk-booking .wk-otp-inline .otp-inputs { gap: 5px; }
.wk-booking .wk-otp-inline .otp-digit {
    width: 32px !important;
    height: 38px !important;
    font-size: 17px !important;
}
.wk-booking .wk-resend {
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
}

@media (max-width: 1100px) {
    /* Not enough room for all three side by side - give the OTP card its own
       line rather than letting the row overflow. */
    .wk-booking .wk-step-nav { flex-wrap: wrap; }
    .wk-booking .wk-step-nav .wk-otp-inline { width: 100%; justify-content: center; }
}

/* Give every item in the action row the same height so the three line up
   exactly (the two buttons derive their height from padding, the OTP card
   from its contents, so they need a shared floor). */
.wk-booking .wk-step-nav .otp_btn2,
.wk-booking .wk-step-nav .wk-otp-inline,
.wk-booking .wk-step-nav .btn-next.book_next_pg {
    min-height: 52px !important;
    box-sizing: border-box;
}

/* ============================================================
   ACTION ROW v2: three equal controls, countdown under the button
   ============================================================ */
.wk-booking .wk-step-nav {
    display: flex;
    align-items: flex-start;      /* the countdown below the button must not
                                     stretch the other two controls */
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
}
/* Equal width for: [OTP button column] [digit boxes] [confirm] */
.wk-booking .wk-step-nav > .wk-otp-col,
.wk-booking .wk-step-nav > .wk-otp-inline,
.wk-booking .wk-step-nav > .btn-next.book_next_pg {
    flex: 1 1 0;
    min-width: 0;
}
/* Call-centre page has only the Confirm button - keep it right-aligned. */
.wk-booking .wk-step-nav > .btn-next.book_next_pg:only-child {
    flex: 0 0 auto;
    margin-left: auto;
}

.wk-booking .wk-otp-col { display: flex; flex-direction: column; gap: 6px; }
.wk-booking .wk-otp-col .otp_btn2 { width: 100% !important; }

/* Equal height for the three controls. */
.wk-booking .wk-step-nav .otp_btn2,
.wk-booking .wk-step-nav .wk-otp-inline,
.wk-booking .wk-step-nav .btn-next.book_next_pg {
    min-height: 52px !important;
    height: 52px !important;
    box-sizing: border-box;
}

/* Countdown under the button. */
.wk-booking .wk-otp-col .wk-resend {
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    color: var(--gray-400);
}

/* Greyed-out disabled state while the countdown runs (booking.js shows
   .otp_dummy in place of .get_otp for the duration). */
.wk-booking .otp_dummy.otp_btn2,
.wk-booking .otp_dummy.otp_btn2:hover {
    background: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-400) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Digit boxes fill their equal-width cell. */
.wk-booking .wk-otp-inline { padding: 5px 10px; }
.wk-booking .wk-otp-inline .otp-inputs { width: 100%; justify-content: space-between; gap: 4px; }
.wk-booking .wk-otp-inline .otp-digit {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    height: 40px !important;
    font-size: 17px !important;
}

@media (max-width: 820px) {
    .wk-booking .wk-step-nav { flex-wrap: wrap; }
    .wk-booking .wk-step-nav > .wk-otp-col,
    .wk-booking .wk-step-nav > .wk-otp-inline,
    .wk-booking .wk-step-nav > .btn-next.book_next_pg { flex: 1 1 100%; }
}

/* ============================================================
   MOBILE: wider cards + correctly ordered action row
   ============================================================ */
@media (max-width: 640px) {
    /* Reclaim the outer gutters so the cards can hold more.
       Was 16px (.book_content) + 12px (.main) = 28px lost each side. */
    html:has(.wk-booking) .book_content { padding: 0 6px !important; }
    html:has(.wk-booking) .main_content_pgbooking { padding: 0 !important; }
    .wk-booking.book_page { padding-top: 12px; }
    .wk-booking .main { padding: 8px 6px 72px !important; max-width: 100% !important; }
    .wk-booking .section-card {
        padding: 16px 14px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 14px !important;
    }

    /* Action row: full-width stack in the order the user works through it. */
    .wk-booking .wk-step-nav { gap: 12px; flex-wrap: nowrap; }
    .wk-booking .wk-step-nav > .wk-otp-col,
    .wk-booking .wk-step-nav > .wk-otp-inline,
    .wk-booking .wk-step-nav > .btn-next.book_next_pg {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
    .wk-booking .wk-otp-inline { padding: 6px 10px; }
    .wk-booking .wk-otp-inline .otp-digit { height: 40px !important; font-size: 18px !important; }

    /* The date picker and slot grid can use the extra width too. */
    .wk-booking .calendar-wrapper { max-width: 100% !important; }
    .wk-booking .slot_list { gap: 8px !important; }
}

@media (max-width: 380px) {
    html:has(.wk-booking) .book_content { padding: 0 4px !important; }
    .wk-booking .main { padding: 6px 4px 64px !important; }
    .wk-booking .section-card { padding: 14px 12px !important; }
}

/* DOM order is the intended order: request OTP -> enter code -> confirm.
   Earlier breakpoints set conflicting flex order values; neutralise them. */
.wk-booking .wk-step-nav > * { order: 0 !important; }

/* Countdown under the Send OTP button must stay visible on small screens. */
@media (max-width: 640px) {
    .wk-booking .wk-otp-col .wk-resend { display: block !important; font-size: 13px; }
    .wk-booking .wk-otp-col .wk-resend.wk-empty { visibility: hidden; }
}

/* ============================================================
   CALENDAR: match the design's header + grid
   jQuery UI renders
     .ui-datepicker-header > a.ui-datepicker-prev, a.ui-datepicker-next,
                             div.ui-datepicker-title
   with the arrows absolutely positioned. The design wants the month/year
   title on the left and the two nav buttons on the right, so the header is
   turned into a flex row and the arrows are re-ordered after the title.
   ============================================================ */
.wk-booking .mini_calendar .ui-datepicker-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: static !important;
    background: transparent !important;
    border: none !important;
    padding: 0 0 20px 0 !important;
    margin: 0 !important;
}
.wk-booking .mini_calendar .ui-datepicker-title {
    order: 0;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    flex: 1 1 auto;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 0 !important;
}
.wk-booking .mini_calendar .ui-datepicker-prev { order: 1; }
.wk-booking .mini_calendar .ui-datepicker-next { order: 2; margin-left: 4px; }
.wk-booking .mini_calendar .ui-datepicker-prev,
.wk-booking .mini_calendar .ui-datepicker-next {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    border: 1.5px solid var(--gray-200) !important;
    border-radius: 8px !important;
    background: var(--white) !important;
    color: var(--gray-500) !important;
    cursor: pointer;
    transition: all 0.2s;
    text-indent: 0 !important;
    overflow: visible !important;
}
.wk-booking .mini_calendar .ui-datepicker-prev:hover,
.wk-booking .mini_calendar .ui-datepicker-next:hover {
    border-color: var(--magenta) !important;
    color: var(--magenta) !important;
    background: var(--white) !important;
}
.wk-booking .mini_calendar .ui-datepicker-prev.ui-state-disabled,
.wk-booking .mini_calendar .ui-datepicker-next.ui-state-disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-300) !important;
}
/* Replace the sprite icons with the chevrons used in the design. */
.wk-booking .mini_calendar .ui-datepicker-prev .ui-icon,
.wk-booking .mini_calendar .ui-datepicker-next .ui-icon { display: none !important; }
.wk-booking .mini_calendar .ui-datepicker-prev::after { content: '\2039'; font-size: 20px; line-height: 1; }
.wk-booking .mini_calendar .ui-datepicker-next::after { content: '\203A'; font-size: 20px; line-height: 1; }

/* Grid: square, evenly spaced day cells like the design's .cal-day. */
.wk-booking .mini_calendar table.ui-datepicker-calendar {
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 6px !important;
    margin: 0 -6px !important;
    width: calc(100% + 12px) !important;
}
.wk-booking .mini_calendar .ui-datepicker-calendar td a,
.wk-booking .mini_calendar .ui-datepicker-calendar td span {
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 8px !important;
    font-size: 14px !important;
}

/* ---- Country selector locked to Qatar (temporary) ----
   Browsers grey a disabled select inconsistently, so make it explicit. */
.wk-booking .phone-row .wk-country:disabled,
.wk-booking .phone-row .wk-country[disabled] {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-500) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;          /* keep the text readable */
    -webkit-text-fill-color: var(--gray-500);
}