/* booking.css — styles for the /consult/ React booking island (app.js → BookingApp).
   Self-contained: the consult page has its own chrome CSS, so we DON'T load the
   practice style.css here (it would clash on .header/.footer/.hero). This carries
   only what the booking widget + reused AuthModal/AccountBar need. Palette vars are
   redefined (idempotent — same values as the page) so the file stands alone. */

:root {
  --navy: #1A365D; --navy-deep: #0F2440;
  --soft: #374151; --muted: #6B7280;
  --white: #FFFFFF; --cream: #F9F8F4;
  --line: #E5E7EB; --line-soft: #F3F4F6;
  --font-fa: 'Vazirmatn', 'Vazirmatn Fallback', sans-serif;
  --font-en: 'Vazirmatn', 'Vazirmatn Fallback', sans-serif;
  --radius-card: 10px;
  --shadow-soft: 0 1px 2px rgba(17,24,39,0.04), 0 4px 12px rgba(17,24,39,0.04);
  --shadow-hover: 0 8px 24px rgba(17,24,39,0.06);
}

/* ── booking island shell ── */
#booking-app { font-family: var(--font-fa); }
.bk-acct { max-width: 760px; margin: 0 auto 8px; }
/* AccountBar sits on a LIGHT background here → re-tone from the navy-hero defaults */
.bk-acct .acct { justify-content: flex-end; gap: 10px; margin: 0 0 4px; min-height: 22px; font-size: 13px; color: var(--muted); }
.bk-acct .acct__email { font-family: var(--font-en); color: var(--soft); }
.bk-acct .acct__sep { color: var(--line); }
.bk-acct .acct__btn { font-family: var(--font-fa); font-weight: 600; font-size: 13px; color: var(--navy); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px solid var(--line); transition: border-color 200ms; }
@media (hover: hover) { .bk-acct .acct__btn:hover { border-bottom-color: var(--navy); } }
.bk-acct .acct__hint { font-size: 12.5px; color: var(--muted); }
@media (max-width: 520px) { .bk-acct .acct__hint { display: none; } }
.bk-acct .acct__login { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-fa); font-weight: 600; font-size: 13.5px; color: var(--navy); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: background 200ms, border-color 200ms, transform 150ms; }
.bk-acct .acct__login-ic { font-size: 14px; line-height: 1; }
@media (hover: hover) { .bk-acct .acct__login:hover { background: var(--cream); border-color: var(--navy); transform: translateY(-1px); } }

/* ── "your session" card (logged-in, upcoming booking) ── */
.bk-yours {
  direction: rtl;
  max-width: 760px; margin: 0 auto 22px; padding: 18px 20px;
  background: var(--white); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--navy); border-radius: var(--radius-card);
}
.bk-yours.is-pending { border-inline-start-color: var(--muted); }
.bk-yours__eyebrow { font-weight: 700; font-size: 13px; color: var(--navy); margin: 0 0 6px; }
.bk-yours.is-pending .bk-yours__eyebrow { color: var(--muted); }
.bk-yours__when { font-weight: 700; font-size: 17px; color: var(--navy); margin: 0 0 4px; unicode-bidi: plaintext; }
.bk-yours__meta { font-size: 13px; color: var(--muted); margin: 0; unicode-bidi: plaintext; }
.bk-yours__pay { display: inline-block; margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--navy); border-bottom: 1px solid var(--line); transition: border-color 200ms; }
@media (hover: hover) { .bk-yours__pay:hover { border-bottom-color: var(--navy); } }

/* ── checkout: destination-email confirm (verify-after-pay bounce guard) ── */
.bk-emailto { font-size: 13px; color: var(--soft); background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; line-height: 1.7; }
.bk-emailto__addr { font-family: var(--font-en); font-weight: 600; color: var(--navy); }

/* ── calendar ── */
.bk-cal { max-width: 760px; margin: 0 auto; }
.bk-cal__head { margin: 0 0 20px; }
.bk-cal__eyebrow { font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.bk-cal__title { font-weight: 700; font-size: 22px; color: var(--navy); margin: 0 0 8px; }
.bk-cal__lede { font-size: 14.5px; line-height: 1.75; color: var(--soft); margin: 0; }
.bk-cal__msg { font-size: 14px; color: var(--muted); padding: 24px 0; text-align: center; }

.bk-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .bk-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .bk-grid { grid-template-columns: 1fr 1fr 1fr; } }

.bk-day { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 14px 16px; }
.bk-day__label { font-weight: 700; font-size: 14px; color: var(--navy); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.bk-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.bk-slot { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; min-height: 44px; border-radius: 8px; font-family: var(--font-fa); text-align: start; }
.bk-slot__time { font-family: var(--font-en); font-weight: 600; font-size: 13.5px; }
.bk-slot__tag { font-size: 12px; font-weight: 600; }

.bk-slot--klass { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.bk-slot--klass .bk-slot__tag { color: var(--muted); }

.bk-slot--taken { background: var(--line-soft); border: 1px solid var(--line); color: var(--muted); }
.bk-slot--taken .bk-slot__tag { color: var(--muted); }

.bk-slot--open { background: var(--white); border: 1px solid var(--navy); color: var(--navy); cursor: pointer; transition: background 200ms, transform 150ms; }
.bk-slot--open .bk-slot__tag { color: var(--navy); }
@media (hover: hover) { .bk-slot--open:hover { background: var(--navy); color: var(--white); transform: translateY(-1px); } .bk-slot--open:hover .bk-slot__tag { color: var(--white); } }
.bk-slot--open:active { transform: translateY(0); }

/* ── checkout: cart summary + rules checkbox (inside the auth-card modal) ── */
.bk-cart { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0 0 16px; }
.bk-cart__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bk-cart__name { font-weight: 700; font-size: 14.5px; color: var(--navy); }
.bk-cart__price { font-weight: 700; font-size: 15px; color: var(--navy); white-space: nowrap; }
.bk-cart__when { font-size: 13px; color: var(--soft); margin: 8px 0 0; }
.bk-cart__tz { color: var(--muted); font-size: 12px; }
.bk-check { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 14px; font-size: 13px; line-height: 1.6; color: var(--soft); cursor: pointer; }
.bk-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--navy); flex-shrink: 0; cursor: pointer; }
.bk-check a { color: var(--navy); font-weight: 600; border-bottom: 1px solid var(--line); }
@media (hover: hover) { .bk-check a:hover { border-bottom-color: var(--navy); } }

/* ════════ reused AuthModal + AccountBar styles (copied from practice/style.css) ════════ */
.acct { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 22px; font-size: 13px; }
.acct__btn { background: none; border: 0; cursor: pointer; }

.auth-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(15,36,64,0.55); display: flex; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.auth-card { width: 100%; max-width: 380px; background: var(--white); border-radius: 14px; padding: 28px 26px 26px; box-shadow: var(--shadow-hover); max-height: 92vh; overflow-y: auto; }
.auth-card__title { font-weight: 700; font-size: 19px; color: var(--navy); margin: 0 0 6px; }
.auth-card__lede { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; }
.auth-tabs { display: flex; gap: 6px; margin: 0 0 18px; background: var(--line-soft); border-radius: 10px; padding: 4px; }
.auth-tab { flex: 1; font-family: var(--font-fa); font-weight: 600; font-size: 14px; padding: 9px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; transition: background 200ms, color 200ms; }
.auth-tab--on { background: var(--white); color: var(--navy); box-shadow: var(--shadow-soft); }
.auth-field { margin: 0 0 12px; }
.auth-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--soft); margin: 0 0 6px; }
.auth-input { width: 100%; font-family: var(--font-en); font-size: 16px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--cream); color: var(--navy); transition: border-color 200ms; } /* ≥16px — iOS zoom-on-focus */
.auth-input:focus { outline: none; border-color: var(--navy); background: var(--white); }
.auth-hint { font-size: 11.5px; color: var(--muted); margin: 6px 2px 0; }
.auth-btn { width: 100%; font-family: var(--font-fa); font-weight: 700; font-size: 15px; padding: 12px; margin: 6px 0 0; border: 0; border-radius: 9px; background: var(--navy); color: #fff; cursor: pointer; transition: background 200ms; }
.auth-btn:disabled { opacity: 0.6; cursor: default; }
@media (hover: hover) { .auth-btn:not(:disabled):hover { background: var(--navy-deep); } }
.auth-err { font-size: 13px; color: var(--soft); background: var(--line-soft); border-inline-start: 2px solid var(--soft); border-radius: 6px; padding: 9px 12px; margin: 0 0 12px; }
.auth-note { font-size: 12px; line-height: 1.7; color: var(--muted); background: var(--cream); border-radius: 8px; padding: 11px 13px; margin: 16px 0 0; }
.auth-close { display: block; width: 100%; text-align: center; margin: 14px 0 0; font-size: 13px; color: var(--muted); background: none; border: 0; cursor: pointer; }
@media (hover: hover) { .auth-close:hover { color: var(--navy); } }
.auth-close:disabled { opacity: 0.5; cursor: default; }
.auth-forgot { display: block; width: 100%; text-align: center; margin: 10px 0 0; font-size: 13px; color: var(--navy); background: none; border: 0; cursor: pointer; }
@media (hover: hover) { .auth-forgot:hover { text-decoration: underline; } }
.auth-forgot:disabled { opacity: 0.5; cursor: default; }
.auth-progress { height: 4px; background: var(--line-soft); border-radius: 999px; overflow: hidden; margin: 0 0 16px; }
.auth-progress__bar { height: 100%; width: 40%; background: var(--navy); border-radius: 999px; animation: auth-slide 1.05s ease-in-out infinite; }
.auth-progress__bar--full { width: 100%; animation: none; }
@keyframes auth-slide { 0% { transform: translateX(-130%); } 100% { transform: translateX(360%); } }
.auth-btn__spin { display: inline-block; width: 14px; height: 14px; margin-inline-end: 8px; vertical-align: -2px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: auth-spin 0.7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-card--center { text-align: center; padding-top: 34px; padding-bottom: 30px; }
.auth-success__check { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center; animation: auth-pop 360ms cubic-bezier(0.34,1.56,0.64,1); }
@keyframes auth-pop { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.auth-success__msg { font-weight: 700; font-size: 17px; color: var(--navy); margin: 0 0 6px; }
.auth-success__sub { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
@media (prefers-reduced-motion: reduce) { .auth-progress__bar, .auth-btn__spin, .auth-success__check, .bk-slot--open { animation: none; transition: none; } }