/* =============================================================
   Dr. Alvi Clinic — LIGHT & FRESH theme
   Loads last. White and mint, soft teal, warm coral call-to-action,
   big rounded shapes, friendly rounded type. No dark blocks.
   ============================================================= */

:root {
  --navy:#0B2E4A; --navy-700:#123F63; --navy-900:#082338;   /* used only for text now */
  --teal:#0FA3A0; --teal-700:#0A8582; --cyan:#27B4D8;
  --gold:#FF8A4C; --gold-600:#E26A2C; --gold-tint:#FFF0E6;  /* warm coral accent */
  --bg:#F5FBFA; --tint:#EAF6F4; --teal-tint:#E2F6F3; --mint:#E6F7F4; --sky:#EAF5FC;
  --ink:#0E2B40; --body:#46606F; --muted:#6E8593; --line:#E1EEEC; --line-strong:#CBE0DD;
  --font-display:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --r-sm:14px; --r-md:18px; --r-lg:26px; --r-xl:34px;
  --sh-sm:0 2px 10px rgba(15,110,110,.07); --sh:0 14px 34px -16px rgba(15,110,110,.28); --sh-lg:0 30px 60px -28px rgba(15,110,110,.35);
}
body { background:#fff; color:var(--body); }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; color:var(--ink); }
h3,h4 { font-weight:700; }
.section--mint { background:linear-gradient(180deg,var(--mint),#F3FBFA); }
.section--tint { background:var(--bg); }
.section--white { background:#fff; }

/* ---------- Urdu line under English ---------- */
.ur { display:block; font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif; font-weight:400; font-size:.8em; line-height:2.05; color:var(--muted); direction:rtl; unicode-bidi:isolate; text-align:left; letter-spacing:0; text-transform:none; margin-top:.1rem; }
h1 .ur, h2 .ur { font-size:.5em; color:var(--teal-700); line-height:2; margin-top:.25rem; }
h3 .ur, h4 .ur { font-size:.72em; }
.center .ur, .sec-head.center .ur, .trust-card .ur, .doc-card .ur, .contact-card .ur, .intro-card .ur, .lead-card .ur, .da-empty .ur, .profile__card .ur, .dp-center .ur { text-align:center; }
.hero .ur { color:var(--teal-700); }
.btn .ur { display:inline; font-size:.85em; margin:0; }

/* ---------- eyebrow: soft pill ---------- */
.eyebrow { background:var(--teal-tint); color:var(--teal-700); padding:.38rem .95rem; border-radius:999px; letter-spacing:.09em; font-size:.74rem; }
.eyebrow::before, .eyebrow--center::after { display:none; }
.hero__eyebrow { color:var(--teal-700); background:#fff; box-shadow:var(--sh-sm); }
.hero__eyebrow::before { display:none; }

/* ---------- buttons: pills ---------- */
.btn { border-radius:999px; min-height:52px; font-weight:700; }
.btn--primary, .btn--teal { background:linear-gradient(135deg,#14B8B3,#0A9491); color:#fff; box-shadow:0 12px 24px -12px rgba(10,148,145,.7); }
.btn--primary:hover, .btn--teal:hover { background:linear-gradient(135deg,#10A8A4,#087E7B); color:#fff; }
.btn--gold { background:linear-gradient(135deg,#FF9A5C,#FF7A4A); color:#fff; box-shadow:0 12px 24px -12px rgba(255,122,74,.75); }
.btn--gold:hover { background:linear-gradient(135deg,#FF8B48,#F2692F); color:#fff; }
.btn--ghost, .btn--outline-light { background:#fff; color:var(--ink); border:1.5px solid var(--line-strong); }
.btn--ghost:hover, .btn--outline-light:hover { background:#fff; border-color:var(--teal); color:var(--teal-700); box-shadow:var(--sh-sm); }
.btn--lg { min-height:58px; font-size:1.08rem; }
.btn--sm { min-height:44px; }

/* ---------- header ---------- */
.site-header { background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); }
.brand__name { color:var(--ink); font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; }
.brand__tag { color:var(--teal-700); letter-spacing:.14em; }
.nav__links a { border-radius:999px; font-weight:600; color:var(--body); }
.nav__links a:hover { background:var(--tint); color:var(--ink); }
.nav__links a[aria-current="page"] { background:var(--teal-tint); color:var(--teal-700); }
.nav__links a[aria-current="page"]::after { display:none; }
.langsw { background:#fff; }
.langsw a[aria-current="true"] { background:var(--teal); color:#fff; }
.nav__toggle { border-radius:14px; }

/* ---------- hero: light, airy ---------- */
.hero { background:linear-gradient(135deg,#E3F7F3 0%,#F1FAFD 55%,#FFFFFF 100%); color:var(--body); border-radius:0 0 54px 54px; }
.hero::before { background:radial-gradient(60% 70% at 88% 12%,rgba(39,180,216,.18),transparent 60%),radial-gradient(50% 60% at 4% 100%,rgba(15,163,160,.16),transparent 60%); }
.hero::after { opacity:.7; background-image:radial-gradient(rgba(15,163,160,.12) 1.4px,transparent 1.8px); background-size:30px 30px; mask-image:linear-gradient(180deg,#000,transparent 75%); }
.hero h1 { color:var(--ink); }
.hero h1 .accent { color:var(--teal); }
.hero__sub { color:var(--ink); font-family:var(--font-display); font-weight:600; }
.hero__lead { color:var(--body); }
.hero__extra { color:var(--teal-700); font-weight:600; }
.hero__extra .icon { color:var(--teal); }
.fact { background:#fff; border:1px solid var(--line); color:var(--body); box-shadow:var(--sh-sm); }
.fact strong { color:var(--ink); }
.fact .icon { color:var(--teal); }
.hero-logo { position:relative; }
.hero-logo::before { content:""; position:absolute; width:min(380px,86%); aspect-ratio:1; border-radius:50%; background:#fff; box-shadow:var(--sh-lg); }
.hero-logo img { position:relative; width:min(310px,72%); filter:none; }

/* ---------- trust bar ---------- */
.trustbar { margin-top:-3rem; }
.trust-card { border:0; border-top:0; border-radius:26px; box-shadow:var(--sh); }
.trust-card .big { font-family:var(--font-display); font-weight:800; color:var(--ink); }
.trust-card__icon { border-radius:18px; }
.trust-card:nth-child(2) .trust-card__icon { background:var(--gold-tint); color:var(--gold-600); }

/* ---------- about ---------- */
.about-visual { background:linear-gradient(155deg,#DDF5F1,#E8F3FC); color:var(--body); box-shadow:var(--sh); border-radius:34px; }
.about-visual::after { background:radial-gradient(60% 50% at 100% 0,rgba(255,255,255,.7),transparent 60%); }
.about-visual .icon-lg { color:var(--teal-700); background:#fff; }
.about-visual h3 { color:var(--ink); }
.about-visual .stat-line div { color:var(--body); }
.about-visual .stat-line .icon { color:var(--teal); }
.about-point .tick { background:var(--teal); color:#fff; }

/* ---------- cards ---------- */
.card { border:0; border-radius:26px; box-shadow:var(--sh-sm); background:#fff; }
.card:hover { box-shadow:var(--sh); transform:translateY(-5px); }
.svc__icon { background:var(--teal-tint); color:var(--teal-700); border-radius:18px; }
.card:hover .svc__icon { background:var(--teal); color:#fff; }
.svc__list li::before { background:var(--teal); }
.svc__link { color:var(--teal-700); }
.doc-card__photo, .intro-card__photo, .lead-card__photo, .profile__photo { background:linear-gradient(155deg,#CFEFEA,#DCEBFA); box-shadow:0 0 0 4px #fff,0 0 0 7px var(--teal-tint),var(--sh); }
.doctor-photo__initials { color:var(--teal-700); }
.doc-card .spec, .profile__card .spec, .lead-card .spec { color:var(--teal-700); }
.doc-card__divider { background:var(--teal); opacity:.35; }
.doc-card .avail { color:var(--gold-600); background:var(--gold-tint); }
.avatar { background:linear-gradient(155deg,#CFEFEA,#DCEBFA); box-shadow:0 0 0 3px #fff,0 0 0 5px var(--teal-tint); }
.avatar-man { background:#BFDDEF; }
.fac { border:0; border-radius:20px; box-shadow:var(--sh-sm); }
.fac__icon { background:var(--teal-tint); color:var(--teal-700); border-radius:14px; }
.chip { background:var(--teal-tint); border-color:transparent; color:var(--teal-700); }
.info-list .icon { color:var(--teal); }
.profile__card, .profile__block { border:0; border-radius:26px; box-shadow:var(--sh-sm); }
.profile__block--dark { background:linear-gradient(135deg,var(--mint),var(--sky)); color:var(--body); }
.profile__block--dark h2, .profile__block--dark p { color:var(--ink); }

/* ---------- portals / callout: light ---------- */
.portal { background:#fff; color:var(--body); border:0; border-radius:26px; box-shadow:var(--sh-sm); }
.portal::after { background:radial-gradient(circle,rgba(15,163,160,.12),transparent 62%); }
.portal h3 { color:var(--ink); }
.portal p { color:var(--body); }
.portal__meta { color:var(--body); }
.portal__meta a { color:var(--teal-700); }
.portal__meta .icon { color:var(--teal); }
.portal__icon { background:var(--teal-tint); border-color:transparent; color:var(--teal-700); }
.portal__logo { border:1px solid var(--line); box-shadow:var(--sh-sm); }
.callout { background:linear-gradient(135deg,#DDF5F1,#E6F1FC); color:var(--body); border-radius:34px; box-shadow:var(--sh); }
.callout::before { background:radial-gradient(60% 80% at 100% 0,rgba(255,255,255,.75),transparent 60%); }
.callout .eyebrow { background:#fff; color:var(--teal-700); }
.callout h2 { color:var(--ink); }
.callout p { color:var(--body); }

/* ---------- notice ---------- */
.notice { background:var(--mint); border:0; border-inline-start:5px solid var(--teal); color:var(--ink); border-radius:18px; }
.notice .icon { color:var(--teal); } .notice strong { color:var(--ink); }
.contact-address { border:0; border-radius:26px; box-shadow:var(--sh-sm); }
.contact-address__icon { background:var(--teal-tint); color:var(--teal-700); }

/* ---------- interior page hero ---------- */
.page-hero { background:linear-gradient(135deg,#E3F7F3,#F1FAFD 70%,#fff); color:var(--body); border-radius:0 0 44px 44px; }
.page-hero::before { background:radial-gradient(60% 80% at 90% 0,rgba(39,180,216,.15),transparent 60%); }
.page-hero h1, .page-hero__title { color:var(--ink); font-family:var(--font-display); font-weight:800; }
.page-hero p { color:var(--body); }
.page-hero .eyebrow { background:#fff; }
.breadcrumb, .breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--teal-700); }

/* ---------- footer: light ---------- */
.site-footer { background:linear-gradient(180deg,#EAF7F4,#DFF2EE); color:var(--body); }
.footer-brand .brand__name { color:var(--ink); }
.footer-brand p { color:var(--body); }
.footer h4 { color:var(--ink); }
.footer a { color:var(--body); } .footer a:hover { color:var(--teal-700); }
.footer__contact .icon { color:var(--teal); }
.footer-bottom { border-top:1px solid rgba(15,110,110,.15); color:var(--muted); }
.langsw--footer { border-color:rgba(15,110,110,.25); }
.langsw--footer a { color:var(--body); }
.langsw--footer a:hover { background:#fff; color:var(--ink); }
.langsw--footer a[aria-current="true"] { background:var(--teal); color:#fff; }

/* ---------- drawer ---------- */
.drawer__links a:hover, .drawer__links a[aria-current="page"] { background:var(--teal-tint); color:var(--teal-700); }

/* ---------- AVAILABILITY (home) ---------- */
.da-h { display:flex; align-items:center; gap:.6rem; font-size:1.25rem; margin:0 0 1rem; flex-wrap:wrap; }
.da-h .ur { display:inline-block; margin:0; font-size:.8em; }
.da-h__dot { width:12px; height:12px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 5px rgba(15,163,160,.2); }
.da-h--next { margin-top:2.2rem; }
.da-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.1rem; align-items:start; }
.da-card { background:#fff; border-radius:26px; padding:1.3rem; box-shadow:var(--sh-sm); display:flex; flex-direction:column; gap:.8rem; border:2px solid transparent; }
.da-card--now, .da-card--portal { border-color:rgba(15,163,160,.45); box-shadow:var(--sh); }
.da-card--done { opacity:.72; }
.da-card__top { display:flex; align-items:center; gap:.9rem; }
.da-card__who h4 { font-size:1.08rem; margin:0; line-height:1.25; }
.da-card__who h4 a { color:var(--ink); }
.da-card__who .spec { color:var(--teal-700); font-weight:600; font-size:.88rem; }
.avatar--md { width:62px; height:62px; }
.da-badge { align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem; padding:.34rem .85rem; border-radius:999px; font-weight:700; font-size:.82rem; background:#EEF2F4; color:#5d7080; }
.da-badge__dot { width:8px; height:8px; border-radius:50%; background:currentColor; }
.da-badge--now, .da-badge--portal { background:#DDF6EC; color:#0B8A5B; }
.da-badge--now .da-badge__dot, .da-badge--portal .da-badge__dot { animation:daPulse 1.8s ease-out infinite; }
.da-badge--later { background:#FFF1DC; color:#B26A00; }
@keyframes daPulse { 0% { box-shadow:0 0 0 0 rgba(11,138,91,.5); } 100% { box-shadow:0 0 0 8px rgba(11,138,91,0); } }
@media (prefers-reduced-motion:reduce) { .da-badge__dot { animation:none!important; } }
.da-times { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.da-times li { display:inline-flex; align-items:center; gap:.4rem; background:var(--mint); color:var(--ink); border-radius:999px; padding:.4rem .85rem; font-weight:600; font-size:.92rem; }
.da-times li .icon { width:16px; height:16px; color:var(--teal); }
.da-times li.is-past { text-decoration:line-through; opacity:.55; }
.da-days { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.da-day { background:#fff; border-radius:22px; padding:1rem 1.15rem; box-shadow:var(--sh-sm); }
.da-day__date { font-weight:800; color:var(--ink); font-family:var(--font-display); margin-bottom:.5rem; }
.da-day ul { list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.da-day li { display:flex; justify-content:space-between; gap:.8rem; font-size:.93rem; }
.da-day__name { color:var(--body); } .da-day__time { color:var(--teal-700); font-weight:700; white-space:nowrap; }
.da-empty { text-align:center; background:#fff; border-radius:26px; padding:2.2rem 1.2rem; box-shadow:var(--sh-sm); display:grid; gap:1rem; justify-items:center; }
.da-foot { display:flex; gap:.5rem; align-items:flex-start; margin-top:1.2rem; color:var(--muted); font-size:.86rem; }
.da-foot .icon { width:16px; height:16px; flex:none; margin-top:.2rem; color:var(--teal); }
.board-updated { text-align:center; color:var(--muted); font-size:.82rem; margin-top:.8rem; }
.prof-times { margin-top:1rem; background:var(--mint); border-radius:18px; padding:.9rem 1rem; text-align:start; }
.prof-times__h { display:flex; gap:.5rem; align-items:center; font-weight:800; color:var(--ink); margin-bottom:.5rem; flex-wrap:wrap; }
.prof-times__h .icon { color:var(--teal); } .prof-times__h .ur { display:inline-block; font-size:.8em; margin:0; }
.prof-times ul { list-style:none; padding:0; margin:0; display:grid; gap:.35rem; font-size:.92rem; }
.prof-times li { display:flex; justify-content:space-between; gap:.6rem; } .prof-times li bdi { color:var(--teal-700); font-weight:700; }

/* ---------- intro player: light ---------- */
.intro-dialog::backdrop { background:rgba(10,50,60,.55); }
.intro-box { background:#fff; color:var(--body); border-radius:30px; }
.intro-photo { background:linear-gradient(135deg,#CFEFEA,#DCEBFA); }
.intro-slide__kicker { color:var(--teal-700); }
.intro-slide__title { color:var(--ink); }
.intro-slide__text { color:var(--body); }
.intro-slide__list li { color:var(--ink); }
.intro-slide__list li::before { background:var(--teal); }
.intro-progress { background:var(--teal-tint); } .intro-progress span { background:var(--teal); }
.intro-close { background:var(--teal-tint); color:var(--ink); } .intro-close:hover { background:var(--line-strong); }
.intro-controls button { background:var(--teal-tint); color:var(--ink); border-color:transparent; }
.intro-controls button:hover:not(:disabled) { background:var(--line-strong); }
.intro-play { background:var(--teal)!important; color:#fff!important; border-color:var(--teal)!important; }
.intro-count { color:var(--muted); } .intro-note { color:var(--muted); }
.intro-card { border:0; box-shadow:var(--sh-sm); border-radius:24px; }

/* ---------- doctor's own page ---------- */
body.dp { background:linear-gradient(180deg,#E3F7F3,#F6FBFC 40%,#fff); min-height:100vh; }
.dp-top { background:rgba(255,255,255,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.dp-top__in { max-width:720px; margin:0 auto; padding:.7rem 1rem; display:flex; align-items:center; gap:.7rem; color:var(--ink); }
.dp-wrap { max-width:720px; margin:0 auto; padding:1.2rem 1rem 3rem; display:grid; gap:1rem; }
.dp-card { background:#fff; border-radius:28px; padding:1.4rem; box-shadow:var(--sh); }
.dp-card h2 { font-size:1.2rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:0 0 1rem; }
.dp-card h2 .icon { color:var(--teal); } .dp-card h2 .ur { display:inline-block; font-size:.78em; margin:0; }
.dp-hello { display:flex; gap:1rem; align-items:center; }
.dp-hello h1 { font-size:clamp(1.35rem,5vw,1.9rem); }
.dp-photo { width:84px; height:84px; flex:none; border-radius:50%; overflow:hidden; background:linear-gradient(155deg,#CFEFEA,#DCEBFA); display:grid; place-items:center; box-shadow:0 0 0 4px #fff,0 0 0 7px var(--teal-tint),var(--sh); }
.dp-photo .doctor-photo__img { width:100%; height:100%; object-fit:cover; }
.dp-muted { color:var(--muted); margin:.2rem 0 0; }
.dp-center { text-align:center; display:grid; justify-items:center; gap:.7rem; }
.dp-row { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:.8rem; margin-bottom:1rem; }
.dp-row label, .dp-inline label, .stf { display:grid; gap:.3rem; font-weight:700; font-size:.82rem; color:var(--muted); }
.dp-row select, .dp-inline select, .stf select, .dp-pin input { width:100%; min-height:54px; padding:.6rem .9rem; border:2px solid var(--line); border-radius:16px; font:inherit; font-size:1.02rem; font-weight:600; color:var(--ink); background:#fff; }
.dp-row select:focus, .dp-inline select:focus, .dp-pin input:focus { border-color:var(--teal); outline:none; box-shadow:0 0 0 4px rgba(15,163,160,.18); }
.dp-pin { display:grid; gap:.8rem; width:min(260px,100%); }
.dp-pin input { text-align:center; font-size:1.8rem; letter-spacing:.5em; padding-left:1rem; }
.dp-quick { display:grid; gap:1rem; }
.dp-inline { display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-end; }
.dp-inline strong { flex:1 1 100%; color:var(--ink); }
.dp-inline strong .ur { display:inline-block; margin:0 .5rem; font-size:.8em; }
.dp-inline label { flex:1 1 150px; }
.dp-day { margin-top:.8rem; } .dp-day__date { font-weight:800; font-family:var(--font-display); color:var(--ink); margin-bottom:.4rem; }
.dp-slot { display:flex; justify-content:space-between; align-items:center; gap:.8rem; background:var(--mint); border-radius:16px; padding:.55rem .9rem; margin-bottom:.4rem; font-weight:700; color:var(--ink); }
.dp-slot .icon { width:16px; height:16px; color:var(--teal); vertical-align:-3px; }
.dp-x { border:0; background:#fff; color:#C0392B; font-weight:700; border-radius:999px; padding:.4rem .8rem; display:inline-flex; gap:.3rem; align-items:center; cursor:pointer; min-height:40px; }
.dp-x .icon { width:15px; height:15px; }
.dp-foot { text-align:center; color:var(--muted); display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.dp-link { border:0; background:none; color:var(--teal-700); text-decoration:underline; cursor:pointer; font:inherit; }
.dp .staff-msg { margin:0; border-radius:16px; }
@media (max-width:560px) { .dp-row { grid-template-columns:1fr; } .dp-hello { align-items:flex-start; } }

/* ---------- staff: friendlier ---------- */
body.staff { background:var(--bg); }
.staff-card { border:0; border-radius:22px; box-shadow:var(--sh-sm); }
.staff-actions button.go { background:var(--teal); border-color:var(--teal); }
.staff-actions button.on { background:var(--teal); border-color:var(--teal); }
.stf { font-weight:600; }
.stf select { min-height:46px; font-size:.95rem; border-width:1.5px; }