/* Patient portal front-end styles.
 * Extracted verbatim from the _PORTAL_HTML blob in controllers/portal.py
 * (was lines 39-752). Loaded with a content-hash query string so a deploy
 * busts the 7-day browser cache Odoo sets on module static files.
 */
/* ── Reset ── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
button,.tile,.more-item,.nav-tab,.patient-card,.offer-card,.advice-card,.back-btn,.banner-dot,.switch-patient-card,.form-btn{
  touch-action:manipulation;-webkit-user-select:none;user-select:none;}
/* Splash colour, not a theme colour: this is what shows for the instant before
   the app paints, so it has to match the launch screen or the hand-off flashes.
   Themes that want a different base (midnight) override it below. */
html,body{height:100%;overflow:hidden;background:#004683;
  font-family:'Segoe UI','Helvetica Neue',system-ui,sans-serif}
/* ── CSS Variables ── */
:root{
  --navy:#06303F;--navy2:#084153;--blue:#0599B8;--blue-lt:#DEF3FA;
  --teal:#03748F;--teal-lt:#DEF3FA;
  --brand:#1565C0;--brand-lt:#E3F0FF;
  --green:#2E7D32;--green-lt:#E8F5E9;
  --red:#C62828;--red-lt:#FFEBEE;
  --amber:#E65100;--amber-lt:#FFF3E0;
  --bg:#F3F8F9;--card:#fff;--border:#E2E8F0;
  --text:#1A2535;--muted:#6B7A8D;--light:#A0AEC0;
  --radius:16px;--radius-sm:10px;
  --shadow:0 2px 12px rgba(0,0,0,.08);
  --shadow-md:0 4px 24px rgba(0,0,0,.12);
  --bottom-nav-h:64px;
  --header-h:56px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  /* Theme hooks — defaults reproduce the Classic look exactly.
     Theme blocks (html[data-theme=…] below) override these. */
  --tile-bg:#fff;--tile-border:#A9DEEC;
  --chip-bg:#fff;--input-focus-bg:#fff;
  --tile-label:#374151;--nav-inactive:#9CA3AF;--toast-bg:#323232;
  --grad-hero:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);
  --grad-offer:linear-gradient(135deg,var(--teal) 0%,var(--blue) 100%);
  --grad-btn:var(--blue);
  --rx-head-bg:#f0f4ff;--rx-label-bg:#f8f9ff;--rx-head-text:#1a237e;
  --rx-border:#c5cae9;--rx-accent:#3949ab;
}
[dir="ltr"]{font-family:'Segoe UI','Helvetica Neue',system-ui,sans-serif}

/* ── App shell ── */
#pp-root{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  background:var(--bg);
  padding-top:var(--safe-top);
  padding-bottom:var(--safe-bot);
}

/* ── Login wrapper ── */
#pp-login{
  flex:1;min-height:0;overflow-y:auto;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* The registration details card is the tallest thing on this screen and on a
     short phone it overflows. Centred flex content overflows equally in both
     directions, which puts the top of the card above the scrollable area and
     makes the first field unreachable; `safe` pins it to the top instead once
     it no longer fits. Kept after the plain value as a progressive upgrade. */
  justify-content:safe center;
  padding:32px 24px;gap:0;
}
.login-logo{width:100px;height:100px;border-radius:50%;
  background:#fff;object-fit:contain;padding:8px;border:1px solid var(--border);
  box-shadow:0 6px 20px rgba(5,153,184,.18);margin-bottom:20px}
.login-title{color:var(--text);font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:4px}
.login-sub{color:var(--muted);font-size:.9rem;text-align:center;margin-bottom:32px}
.login-card{background:var(--card);
  border:1.5px solid var(--tile-border);border-radius:24px;
  box-shadow:0 4px 18px rgba(5,153,184,.12);
  padding:28px 24px;width:100%;max-width:380px}
.login-card h2{color:var(--text);font-size:1.05rem;font-weight:600;margin-bottom:20px;text-align:center}
.pp-input{width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--bg);color:var(--text);font-size:1rem;font-family:inherit;
  outline:none;transition:border .2s}
.pp-input::placeholder{color:var(--light)}
.pp-input:focus{border-color:var(--blue);background:var(--input-focus-bg)}
.pp-input[dir="ltr"]{text-align:left}
.pp-btn{width:100%;padding:15px;border-radius:12px;border:none;cursor:pointer;
  font-size:1rem;font-weight:700;font-family:inherit;transition:all .2s;margin-top:14px}
.pp-btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(5,153,184,.3)}
.pp-btn-primary:hover{background:var(--teal);transform:translateY(-1px)}
.pp-btn-primary:active{transform:translateY(0)}
.pp-btn-ghost{background:transparent;border:1.5px solid var(--blue);color:var(--blue)}
.pp-btn-ghost:hover{background:var(--blue-lt)}
.login-hint{color:var(--muted);font-size:.8rem;text-align:center;margin-top:12px}
.login-lang{position:fixed;top:calc(var(--safe-top) + 12px);left:16px;z-index:999;
  background:var(--blue-lt);border:1px solid var(--blue);
  color:var(--blue);padding:6px 14px;border-radius:20px;cursor:pointer;
  font-size:.8rem;font-weight:700;font-family:inherit}
/* OTP boxes */
.otp-row{display:flex;gap:10px;justify-content:center;margin:20px 0}
.otp-box{width:46px;height:54px;border-radius:12px;border:2px solid var(--border);
  background:var(--bg);color:var(--text);font-size:1.4rem;font-weight:700;
  text-align:center;outline:none;font-family:inherit;caret-color:var(--blue);
  transition:border .2s}
.otp-box:focus{border-color:var(--blue);background:var(--input-focus-bg)}
.resend-row{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:16px}
.resend-btn{background:none;border:none;color:var(--blue);cursor:pointer;
  font-size:.85rem;font-family:inherit;text-decoration:underline;padding:0;font-weight:700}
.resend-btn:disabled{opacity:.4;cursor:default}
.resend-timer{color:var(--muted);font-size:.82rem}
/* Patient select */
.patient-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.patient-card{background:var(--bg);border:1.5px solid var(--border);
  border-radius:16px;padding:16px 18px;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;gap:14px}
.patient-card:hover{background:var(--blue-lt);border-color:var(--blue)}
.patient-avatar{width:48px;height:48px;border-radius:50%;
  background:var(--blue-lt);display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;flex-shrink:0}
.patient-card-info{flex:1;min-width:0}
.patient-card-name{color:var(--text);font-weight:600;font-size:.95rem;margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.patient-card-code{color:var(--muted);font-size:.8rem}
.patient-card-arrow{color:var(--muted);font-size:1.1rem}
.remember-primary-row{display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:.85rem;color:var(--muted);cursor:pointer;user-select:none}
.remember-primary-row input{width:16px;height:16px;cursor:pointer;flex-shrink:0}

/* ── Contact us + version line ── */
.contact-row{display:flex;align-items:center;gap:14px;width:100%;text-align:start;
  background:var(--card);border:none;border-bottom:1px solid var(--border);
  padding:15px 16px;cursor:pointer;font-family:inherit}
.contact-row:active{background:var(--blue-lt)}
.contact-row:last-child{border-bottom:none}
.contact-icon{width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;
  background:var(--blue-lt);color:var(--blue)}
.contact-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.contact-label{color:var(--text);font-weight:600;font-size:.9rem}
.contact-value{color:var(--muted);font-size:.78rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Icon-only channels (patient.portal.contact.display_mode = icon) — a wrapped
   strip of round taps under the list instead of one full-width row each. Ten
   rows of https://www.linkedin.com/company/... buried the three numbers a
   patient actually opens this screen for. 54px, so every chip clears the 44px
   minimum touch target with room to spare.
   The inner box carries an inline max-width from ppRenderContact so the chips
   break into even rows (7 → 4+3) instead of stranding one on a line of its own. */
.contact-strip{padding:20px 16px 24px;background:var(--card);
  border-top:1px solid var(--border)}
.contact-strip-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin:0 auto}
.contact-chip{width:54px;height:54px;border-radius:50%;border:none;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;
  line-height:1;background:var(--blue-lt);color:var(--blue);cursor:pointer;
  font-family:inherit;transition:transform .12s ease}
.contact-chip:active{transform:scale(.92)}
/* Per-channel tints, shared by the 42px list icon and the 54px chip. They live
   AFTER both so they win on source order — same specificity, and a tint that
   loses to .contact-chip prints a blue map pin among the brand colours. */
.contact-whatsapp{background:#E7F8EE;color:#128C7E}
.contact-phone{background:#E3F0FF;color:#1565C0}
.contact-location{background:#FFEBEE;color:#C62828}
.contact-instagram{background:#FCE9F3;color:#C13584}
.contact-facebook{background:#E7F0FD;color:#1877F2}
.contact-twitter{background:#ECEFF1;color:#0F1419}
/* Snapchat Yellow (#FFFC00) is a background colour — it is illegible as a
   foreground on a light tint, which is why this used to be an olive that is
   not a Snapchat colour at all. Their own guidance is a black or white ghost,
   so: the official black ghost, on the yellow tint. */
.contact-snapchat{background:#FFF6C4;color:#0F1419}
.contact-youtube{background:#FDE8E8;color:#C4302B}
.contact-tiktok{background:#ECEFF1;color:#111}
/* LinkedIn is filed as an 'other' row (there is no linkedin channel_type), so
   ppContactCls emits `contact-other contact-linkedin` and this — being later —
   is what wins. */
.contact-linkedin{background:#E7F0FD;color:#0A66C2}
/* The marks are single-colour paths filled with currentColor, so each takes
   the tint above. Sized here rather than by font-size: they are SVG now, and
   the emoji font-size on .contact-icon/.contact-chip no longer means anything. */
.contact-icon svg{width:21px;height:21px;fill:currentColor;display:block}
.contact-chip svg{width:26px;height:26px;fill:currentColor;display:block}
.more-version{padding:18px 16px 26px;text-align:center;color:var(--light);
  font-size:.72rem;letter-spacing:.3px}

/* ── Guest access + legal documents ── */
.login-sep{display:flex;align-items:center;gap:10px;margin:16px 0 12px;
  color:var(--muted);font-size:.78rem}
.login-sep::before,.login-sep::after{content:"";flex:1;height:1px;background:var(--border)}
.login-legal{display:flex;align-items:center;justify-content:center;gap:8px;
  flex-wrap:wrap;margin-top:18px;padding:0 16px}
.login-legal-link{background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:.78rem;color:var(--blue);text-decoration:underline}
.login-legal-dot{color:var(--muted);font-size:.78rem}
.reg-consent{display:flex;align-items:center;justify-content:center;gap:5px;
  flex-wrap:wrap;margin:2px 0 14px;font-size:.75rem;color:var(--muted);line-height:1.6}
.signin-req-text{color:var(--muted);font-size:.88rem;line-height:1.7;
  margin-bottom:16px;text-align:center}
.legal-updated{padding:12px 16px 0;color:var(--muted);font-size:.78rem}
.legal-body{padding:14px 16px 28px;color:var(--text);font-size:.9rem;line-height:1.8;
  word-wrap:break-word;overflow-wrap:break-word}
.legal-body h1,.legal-body h2,.legal-body h3{color:var(--text);margin:16px 0 8px;
  font-size:1rem;font-weight:700}
.legal-body p{margin:0 0 10px}
.legal-body ul,.legal-body ol{margin:0 0 10px;padding-inline-start:22px}
.legal-body li{margin-bottom:6px}
.legal-body a{color:var(--blue)}
.legal-body img,.legal-body table{max-width:100%}
/* The overlay variant scrolls inside the sheet rather than the page */
#pp-legal-overlay .legal-body{padding:4px 0 16px;max-height:52vh;overflow-y:auto}

/* ── New patient registration (login screen) ── */
.reg-entry{display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:14px;font-size:.85rem;color:var(--muted)}
.reg-entry-btn{background:none;border:none;padding:0;cursor:pointer;
  color:var(--blue);font-weight:700;font-size:.85rem;font-family:inherit;
  text-decoration:underline}
.reg-note{color:var(--muted);font-size:.85rem;line-height:1.6;text-align:center;
  margin-bottom:16px}
.reg-phone-row{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin:2px 0 14px;font-size:.85rem;color:var(--muted)}
.reg-phone-row strong{color:var(--text)}
/* First and family name share a row: the details card carries six fields and
   still has to fit a phone without scrolling. */
.reg-name-row{display:flex;gap:10px}
.reg-name-row .pp-input{min-width:0}
.reg-field-label{color:var(--muted);font-size:.8rem;font-weight:600;
  margin:4px 2px 6px}
.reg-choice-row{display:flex;gap:10px;margin-bottom:12px}
.reg-choice-btn{flex:1;padding:12px 8px;border-radius:12px;cursor:pointer;
  border:1.5px solid var(--border);background:var(--bg);color:var(--text);
  font-size:.92rem;font-family:inherit;transition:border-color .12s,background .12s}
.reg-choice-btn.selected{border-color:var(--blue);background:rgba(5,153,184,.1);
  color:var(--blue);font-weight:700}
.reg-dob-row{display:flex;gap:8px;margin-bottom:4px}
/* The month select carries names, the other two only numbers — let it take the
   room it needs instead of splitting the row in three equal thirds. */
.reg-dob-sel{min-width:0;padding-inline:10px;font-size:.92rem}
#reg-dob-day,#reg-dob-year{flex:0 1 27%}
#reg-dob-month{flex:1 1 46%}
.pp-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* ── App (after login) ── */
#pp-app{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);min-height:0}
/* Header */
#pp-header{
  height:var(--header-h);background:var(--card);
  display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0;
  border-bottom:1px solid var(--border)
}
.hdr-logo{height:36px;width:36px;border-radius:50%;object-fit:contain;
  background:#fff;padding:3px;border:1px solid var(--border)}
.hdr-title{flex:1;color:var(--text);font-size:1rem;font-weight:700}
.hdr-sub{color:var(--muted);font-size:.72rem;margin-top:1px}
.hdr-lang{background:var(--blue-lt);border:1px solid var(--blue);color:var(--blue);
  padding:4px 10px;border-radius:14px;cursor:pointer;font-size:.72rem;font-weight:700;
  font-family:inherit}
/* Patient switcher bar */
#pp-patient-bar{
  background:var(--blue-lt);padding:10px 16px;
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  border-bottom:1px solid var(--border)
}
.pbar-avatar{width:38px;height:38px;border-radius:50%;
  background:var(--chip-bg);display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;border:1px solid var(--blue)}
.pbar-name{flex:1;color:var(--text);font-size:.9rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar-code{color:var(--muted);font-size:.75rem;margin-top:1px}
/* Greeting line above the name — only the Noor theme shows it */
.pbar-hello{display:none}
.pbar-switch{background:var(--chip-bg);border:1px solid var(--blue);
  color:var(--blue);padding:5px 12px;border-radius:12px;cursor:pointer;
  font-size:.75rem;font-family:inherit;white-space:nowrap;flex-shrink:0;font-weight:700}
/* Content area */
#pp-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}
.pp-view{display:none;flex-direction:column;min-height:100%}
.pp-view.active{display:flex;animation:ppSlideIn .22s cubic-bezier(.25,.46,.45,.94) both}
@keyframes ppSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Bottom nav */
#pp-bottom-nav{
  height:var(--bottom-nav-h);background:var(--card);flex-shrink:0;
  border-top:1px solid var(--border);
  display:flex;align-items:stretch;overflow:visible;
  box-shadow:0 -2px 16px rgba(0,0,0,.07)
}
.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;cursor:pointer;border:none;background:none;
  color:var(--nav-inactive);transition:color .18s,transform .12s;padding:8px 0 6px;font-family:inherit;position:relative}
.nav-tab svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;fill:none;transition:stroke .18s,transform .12s}
.nav-tab.active{color:var(--brand)}
.nav-tab.active svg{stroke:var(--brand)}
.nav-tab:active{transform:scale(.85)}
.nav-tab:active svg{transform:scale(.9)}
.nav-tab-label{font-size:.82rem;font-weight:700;letter-spacing:.01em}
.nav-active-dot{position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--brand);
  opacity:0;transition:opacity .2s;margin-top:0}
.nav-tab.active .nav-active-dot{opacity:1}
/* Floating center tab (Home) */
#nav-home{justify-content:flex-end;padding-bottom:9px}
.nav-fab{position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:52px;height:52px;border-radius:50%;background:var(--brand);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(21,101,192,.45);border:4px solid var(--card);
  transition:background .18s}
.nav-fab svg{width:24px;height:24px;stroke:#fff;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
#nav-home.active .nav-fab{background:var(--brand)}
#nav-home:active .nav-fab{transform:translateX(-50%) scale(.92)}
#nav-home.active .nav-fab svg,#nav-home .nav-fab svg{stroke:#fff}

/* ── Common content blocks ── */
.pp-section{padding:16px 16px 8px}
.pp-section-title{font-size:.75rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
/* Banner carousel */
.banner-wrap{position:relative;overflow:hidden;width:100%;background:var(--navy);flex-shrink:0}
.banner-track{display:flex;transition:transform .4s ease}
.banner-slide{width:100vw;flex-shrink:0;position:relative}
.banner-slide picture{display:block;width:100%}
#offer-detail-img picture{display:block;width:100%}
.banner-slide img{width:100%;height:auto;display:block}
@media(min-width:768px){
  .banner-slide{width:100%}
}
.banner-slide-placeholder{width:100%;min-height:160px;height:100%;
  background:var(--grad-hero);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem}
.banner-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px}
.banner-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);
  transition:all .3s;cursor:pointer}
.banner-dot.active{background:#fff;width:18px;border-radius:4px}
/* ── Live queue card ── */
.queue-card{background:var(--card);border-radius:var(--radius);margin:14px 16px 0;
  padding:14px;box-shadow:var(--shadow);border:1.5px solid var(--border);
  border-inline-start:5px solid var(--muted);position:relative;overflow:hidden}
/* First card after the section title drops its top margin so the title→card gap
   matches the "next appointment" section (which uses no top margin on its list). */
.pp-section + .queue-card{margin-top:0}
.queue-card.q-waiting{border-inline-start-color:var(--blue)}
.queue-card.q-calling{border-inline-start-color:var(--amber);
  background:var(--amber-lt);animation:queuePulse 1.6s ease-in-out infinite}
.queue-card.q-serving{border-inline-start-color:var(--green);background:var(--green-lt)}
.queue-card.q-pending_reception{border-inline-start-color:var(--amber);background:var(--amber-lt)}
@keyframes queuePulse{0%,100%{box-shadow:var(--shadow)}
  50%{box-shadow:0 0 0 4px var(--amber-lt),var(--shadow-md)}}
.queue-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.queue-ticket{flex-shrink:0;background:var(--navy);color:#fff;border-radius:12px;
  padding:8px 12px;font-size:1.15rem;font-weight:800;letter-spacing:.02em;
  min-width:74px;text-align:center}
.queue-card.q-calling .queue-ticket{background:var(--amber)}
.queue-card.q-serving .queue-ticket{background:var(--green)}
.queue-headtext{flex:1;min-width:0}
.queue-status{font-size:1rem;font-weight:800;color:var(--text);line-height:1.3}
.queue-station{font-size:.8rem;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-who{font-size:.72rem;font-weight:700;color:var(--blue);margin-bottom:6px}
.queue-position{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.queue-position-num{font-size:2rem;font-weight:800;color:var(--blue);line-height:1}
.queue-position-lbl{font-size:.82rem;color:var(--muted)}
/* "3 people ahead of you" — the same sentence the ticket's QR slip shows, and
   the only number on the card: a big "place in line" (ahead + 1) beside it read
   as a different number from the slip's (owner, 2026-10-14). */
.queue-ahead{font-size:1.05rem;font-weight:700;color:var(--blue);line-height:1.3}
.queue-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.queue-chip{background:var(--bg);border:1px solid var(--border);border-radius:999px;
  padding:5px 10px;font-size:.74rem;color:var(--text);font-weight:600}
.queue-chip b{color:var(--blue)}
.queue-note{margin-top:10px;font-size:.78rem;color:var(--muted);line-height:1.5}
.queue-updated{margin-top:8px;font-size:.68rem;color:var(--light);text-align:end}
/* Book appointment button */
.book-appt-btn{display:flex;align-items:center;justify-content:center;
  width:calc(100% - 32px);margin:14px 16px 4px;padding:15px;border-radius:14px;
  background:var(--blue);color:#fff;font-size:1rem;font-weight:700;
  border:none;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 16px rgba(5,153,184,.35);transition:transform .12s}
.book-appt-btn:active{transform:scale(.98)}
/* Quick tiles */
.tiles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px 8px}
.tile{background:var(--tile-bg);border-radius:16px;padding:16px 8px 14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;
  box-shadow:0 4px 14px rgba(5,153,184,.14);transition:all .15s;
  border:1.5px solid var(--tile-border)}
.tile:active{transform:scale(.95);background:var(--brand-lt);border-color:var(--brand)}
.tile-ic{width:48px;height:48px;border-radius:12px;background:var(--brand-lt);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tile-ic svg{width:22px;height:22px;stroke:var(--brand);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.tile-label{font-size:.78rem;font-weight:600;color:var(--tile-label);
  text-align:center;line-height:1.3}
/* Row-style tiles (Medical Records, Services menus) — bigger text, direction-aware alignment */
.tile-row{flex-direction:row;justify-content:flex-start;gap:14px;padding:16px}
.tile-row .tile-label{font-size:.9rem;text-align:start}
/* Horizontal scroll cards */
.hscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;display:flex;gap:12px;
  padding:0 16px 8px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
/* Offer card */
.offer-card{flex-shrink:0;width:200px;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);background:var(--card);cursor:pointer}
.offer-card picture{display:block;width:100%}
.offer-img{width:100%;height:110px;object-fit:cover;background:var(--navy);display:block}
.offer-img-placeholder{width:100%;height:110px;
  background:var(--grad-offer);
  display:flex;align-items:center;justify-content:center;font-size:2rem}
.offer-img-full{width:100%;aspect-ratio:800/400;object-fit:cover;background:var(--navy);display:block}
.offer-img-full-placeholder{width:100%;aspect-ratio:800/400;
  background:var(--grad-offer);
  display:flex;align-items:center;justify-content:center;font-size:2rem}
@media (min-width:768px){
  .offer-img-full,.offer-img-full-placeholder{aspect-ratio:1600/500}
}
.offer-body{padding:10px 12px}
.offer-title{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:3px}
.offer-valid{font-size:.72rem;color:var(--muted)}
/* Advice card */
.advice-card{background:var(--card);border-radius:var(--radius);padding:14px;
  box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:flex-start;gap:12px;
  margin-bottom:10px}
.advice-icon{font-size:1.5rem;flex-shrink:0;margin-top:2px}
.advice-title{font-size:.88rem;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.advice-body{font-size:.78rem;color:var(--muted);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Advice — article cards (cover photo, teaser, own page).
   The plain .advice-card above is what a server that has not been upgraded yet
   still draws; everything below is what portal.js builds once the payload
   carries covers. */
.advice-tile,.advice-item{touch-action:manipulation;-webkit-user-select:none;user-select:none}
/* The rail card's size is ONE number: --advice-tile-w. The cover is a 16:9
   slice of that width and the type below is scaled to it, so "make the tips
   smaller" stays a single edit instead of seven.
   224px wide draws a ~230px card on a 430px phone — a quarter of the screen,
   and the next tip peeks in far enough to read. 270px at 16:10 drew 293px,
   just under a THIRD of the screen for one tip, with the rail's second card
   barely showing. */
.advice-rail{--advice-tile-w:224px;
  display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:4px}
.advice-rail::-webkit-scrollbar{display:none}
.advice-tile{flex:0 0 62%;max-width:var(--advice-tile-w);display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);cursor:pointer;text-align:start}
.advice-tile-cover,.advice-item-cover,.advice-article-cover{line-height:0;background:var(--border)}
.advice-tile-cover img,.advice-item-cover img{width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;display:block}
/* No photo: the tip's own emoji on a soft field, so the rail keeps its rhythm.
   This ratio must track the photo's above it: every tile in a flex row is as
   tall as the tallest, so two ratios in one rail leave white space under the
   shorter card rather than a shorter card. */
.advice-cover--none{display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/9;background:var(--grad-offer);font-size:1.7rem}
.advice-tile-pad{padding:9px 11px 10px;display:flex;flex-direction:column;gap:3px;flex:1}
.advice-ex{font-size:.76rem;color:var(--muted);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.advice-ex-3{-webkit-line-clamp:3;font-size:.78rem}
.advice-more{display:inline-flex;align-items:center;gap:4px;margin-top:2px;
  font-size:.74rem;font-weight:700;color:var(--blue)}
.advice-chev{display:inline-block;font-size:1rem;line-height:1}
/* The rail is the compact half of the pair — the advice page below keeps the
   larger type, because that is where the patient goes to read.
   The headline is capped at two lines on purpose: the tiles are all as tall as
   the tallest, so ONE long title used to add a line's height to every card in
   the rail. */
.advice-tile .advice-title{font-size:.81rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.advice-tile .advice-ex{font-size:.71rem;line-height:1.5}
/* Every tile in the rail is as tall as the tallest, so a one-line headline
   used to leave its card's "read more" floating above a strip of blank paper.
   The pad grows instead and the link sits on the bottom edge, level across the
   whole rail. */
.advice-tile .advice-more{font-size:.7rem;margin-top:auto;padding-top:3px}
.advice-tile .advice-chev{font-size:.95rem}
/* Full-width card on the advice page */
.advice-item{background:var(--card);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);cursor:pointer;margin-bottom:12px;text-align:start}
.advice-item-cover img{aspect-ratio:16/9}
.advice-item-pad{padding:13px 14px 12px}
.advice-item-head{display:flex;align-items:flex-start;gap:10px}
.advice-item .advice-ex{margin-top:6px}
/* One tip on its own page: nothing is clipped here — the reader came for the
   whole thing, so there is no clamp and no fade. */
.advice-article{background:var(--card);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow)}
.advice-article-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.advice-article-pad{padding:16px 15px 18px}
.advice-article-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.advice-article-ic{font-size:1.55rem;line-height:1.15;flex-shrink:0}
.advice-article-t{font-size:1.05rem;font-weight:700;line-height:1.45;
  color:var(--text);overflow-wrap:anywhere}
/* Staff-authored rich text: keep it readable and inside the card. */
.pp-rich{font-size:.86rem;line-height:1.85;color:var(--text)}
.pp-rich>*:first-child{margin-top:0}
.pp-rich>*:last-child{margin-bottom:0}
.pp-rich p{margin:0 0 .7em}
.pp-rich h1,.pp-rich h2,.pp-rich h3,.pp-rich h4{color:var(--text);font-weight:700;
  line-height:1.4;margin:1em 0 .4em}
.pp-rich h1{font-size:1rem}.pp-rich h2{font-size:.95rem}
.pp-rich h3{font-size:.9rem}.pp-rich h4{font-size:.87rem}
.pp-rich ul,.pp-rich ol{margin:0 0 .7em;padding-inline-start:1.3em}
.pp-rich li{margin-bottom:.25em}
.pp-rich a{color:var(--blue);text-decoration:underline}
.pp-rich strong,.pp-rich b{font-weight:700}
.pp-rich img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:.4em 0}
/* Staff paste links as plain text and the editor writes no soft breaks, so a
   long URL used to run 2700px past the card — which the card then clipped,
   because .advice-article hides its overflow to keep the cover inside the
   rounded corner. Nothing scrolled: the tail was simply unreachable. */
.pp-rich{overflow-wrap:anywhere;word-break:break-word}
/* A table wider than a phone gets its own scroll box rather than losing its
   last columns to that same clip.

   It takes two boxes, not one. display:block is what makes the <table> element
   scrollable at all — but it also takes the table formatting context off that
   box, so `width:max-content` on it resolves against the anonymous table inside
   and shrink-wraps to the column instead of overflowing. A 14-column table came
   out 21px wide per cell and 178px tall: one character per line, no scrollbar,
   the exact squashing this rule was written to prevent.

   So: the <table> is the scroll box, and <tbody>/<thead> carry the table
   formatting context and the natural width. min-width:100% keeps a narrow
   table filling the column rather than hugging its text. */
.pp-rich table{display:block;max-width:100%;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.pp-rich table > thead,
.pp-rich table > tbody,
.pp-rich table > tfoot{display:table;width:max-content;min-width:100%}
/* The cells stop breaking mid-word once they have room; .pp-rich sets
   `word-break:break-word` for prose and that is what made 'column' one letter
   per line in a 21px cell. */
.pp-rich table td,.pp-rich table th{word-break:normal;overflow-wrap:normal;
  padding:4px 8px;vertical-align:top}
.pp-rich pre{overflow-x:auto}
/* A video inside an article. Fixed 16:9 box so the player scales with the column
   instead of keeping the pixel size the editor stored. Black letterbox on
   purpose — that is the player's own ground in every theme. */
.pp-rich .pp-video{position:relative;width:100%;padding-top:56.25%;margin:12px 0;
  border-radius:var(--radius-sm);overflow:hidden;background:#000}
.pp-rich .pp-video iframe{position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block}
@media (min-width:768px){
  /* No percentage to fall back on once the column is wide: the knob is the width. */
  .advice-tile{flex:0 0 var(--advice-tile-w)}
}
/* Sub-view header */
.subview-header{background:var(--card);padding:14px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;flex-shrink:0}
.back-btn{background:none;border:none;color:var(--text);font-size:1.2rem;cursor:pointer;
  padding:4px;margin-inline-end:4px;transition:transform .12s}
.back-btn:active{transform:scale(.8)}
.subview-title{color:var(--text);font-size:1rem;font-weight:700}
/* Coming soon */
.coming-soon{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:48px 24px;text-align:center;gap:12px}
.coming-soon-icon{width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--blue-lt);border-radius:20px}
.coming-soon-icon svg{width:36px;height:36px;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.coming-soon-title{font-size:1.1rem;font-weight:700;color:var(--text)}
.coming-soon-text{font-size:.85rem;color:var(--muted);max-width:260px;line-height:1.5}
/* Appointments */
.appt-tabs{display:flex;gap:8px;padding:14px 16px 6px;flex-shrink:0}
.appt-tab{flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--card);color:var(--muted);font-weight:700;font-size:.85rem;
  cursor:pointer;font-family:inherit;transition:all .15s}
.appt-tab.active{background:var(--blue);border-color:var(--blue);color:#fff}
.appt-card{display:flex;gap:12px;align-items:center;background:var(--card);
  border:1.5px solid var(--border);border-radius:14px;padding:14px;margin:0 16px 10px}
.appt-doc-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;
  background:var(--blue-lt);flex-shrink:0}
.appt-info{flex:1;min-width:0}
.appt-doctor{font-weight:700;color:var(--text);font-size:.92rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.appt-doctor.wrap-text{white-space:normal;overflow:visible;text-overflow:unset;line-height:1.3}
.appt-service-code{font-size:.72rem;color:var(--muted);margin-top:2px}
.appt-specialty{font-size:.78rem;color:var(--muted);margin-top:1px}
.appt-datetime{font-size:.8rem;color:var(--blue);font-weight:700;margin-top:4px}
.appt-empty{padding:48px 24px;text-align:center;color:var(--muted);font-size:.88rem}
.appt-actions{flex-shrink:0;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.appt-cancel-btn{flex-shrink:0;background:var(--red-lt);color:var(--red);
  border:1.5px solid var(--red);border-radius:10px;padding:8px 12px;
  font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;
  transition:all .15s}
.appt-cancel-btn:active{transform:scale(.95)}
.appt-cancel-btn:disabled{opacity:.5;cursor:default}
.appt-pay-btn{flex-shrink:0;background:var(--green);color:#fff;
  border:1.5px solid var(--green);border-radius:10px;padding:8px 12px;
  font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;
  transition:all .15s}
.appt-pay-btn:active{transform:scale(.95)}
.appt-pay-btn:disabled{opacity:.5;cursor:default}
.appt-paid-badge{flex-shrink:0;background:var(--green-lt);color:var(--green);
  border:1.5px solid var(--green);border-radius:10px;padding:8px 12px;
  font-size:.76rem;font-weight:700;text-align:center}
/* Invoices */
.invoice-card{display:flex;gap:12px;align-items:center;background:var(--card);
  border:1.5px solid var(--border);border-radius:14px;padding:14px;margin:0 16px 10px;
  cursor:pointer;transition:all .15s}
.invoice-card:active{transform:scale(.98);border-color:var(--blue)}
.invoice-icon{width:42px;height:42px;border-radius:12px;background:var(--blue-lt);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.invoice-icon svg{width:20px;height:20px;stroke:var(--blue);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.invoice-info{flex:1;min-width:0}
.invoice-no{font-weight:700;color:var(--text);font-size:.9rem}
.invoice-sub{font-size:.78rem;color:var(--muted);margin-top:1px}
.invoice-date{font-size:.78rem;color:var(--blue);font-weight:700;margin-top:4px}
/* A date and a time that wrap as whole units, never mid-value. Wide enough for
   both and they sit on one line; too narrow and the time drops under the date
   instead of the meridiem being left behind on its own. See ppWhen(). */
.pp-when{display:flex;flex-wrap:wrap;column-gap:12px}
.invoice-amount{font-weight:700;color:var(--text);font-size:.92rem;flex-shrink:0;text-align:end}
.invoice-status{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:10px;
  margin-top:4px;display:inline-block}
.invoice-status.paid{background:var(--green-lt);color:var(--green)}
.invoice-status.unpaid{background:var(--amber-lt);color:var(--amber)}
.inv-detail-section{padding:16px}
.inv-detail-summary{padding:14px 16px;background:var(--card);border:1.5px solid var(--border);
  border-radius:14px;margin-bottom:14px}
.inv-detail-summary-row{font-size:.82rem;color:var(--muted);margin-bottom:4px}
.inv-detail-summary-amount{font-size:1rem;font-weight:700;color:var(--blue);margin-top:4px}
.inv-detail-table{width:100%;border-collapse:collapse;font-size:.82rem;margin-bottom:16px}
.inv-detail-table th,.inv-detail-table td{padding:8px 6px;border-bottom:1px solid var(--border);text-align:start}
.inv-detail-table th{color:var(--muted);font-weight:700;font-size:.75rem;text-transform:uppercase}
.inv-detail-table td{color:var(--text)}
.inv-detail-title{font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:8px}
.inv-pdf-wrap{margin-top:8px}
.inv-pdf-frame{width:100%;height:70vh;border:1px solid var(--border);border-radius:12px;display:block;background:#fff}
.inv-pdf-download{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;text-decoration:none}
/* Glasses Prescription */
.gp-visit-card{border:1.5px solid var(--border);border-radius:12px;margin-bottom:14px;overflow:hidden}
.gp-visit-hdr{background:var(--blue);color:#fff;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.gp-visit-meta{font-size:.78rem;opacity:.88}
.gp-visit-badge{background:rgba(255,255,255,.22);border-radius:20px;padding:2px 8px;font-size:.7rem;font-weight:700}
/* direction:ltr on the WRAPPER, not just the table. An RTL scroll container
   starts scrolled to its right edge, and the label column of an LTR table is
   its leftmost — so in Arabic the wrap opened on two columns of numbers with
   Sphere/Cylinder/Axis scrolled out of sight. min-width was 480px for a table
   that only ever has three columns (row() is never called with a fourth, and
   the PD row spans), so it forced that overflow on every phone; at 300px the
   three columns fit and there is nothing to scroll. overflow-x stays as the
   safety net for a long label in a future language. */
.gp-rx-wrap{overflow-x:auto;padding:12px;direction:ltr}
.gp-rx-table{width:100%;border-collapse:collapse;font-size:.8rem;direction:ltr;min-width:300px}
.gp-rx-table th{background:var(--rx-head-bg);color:var(--rx-head-text);font-size:.72rem;font-weight:700;text-transform:uppercase;padding:6px 8px;border-bottom:2px solid var(--rx-border);text-align:center}
.gp-rx-label{background:var(--rx-label-bg);font-weight:700;color:var(--rx-head-text);padding:6px 8px;border-bottom:1px solid var(--border);border-right:2.5px solid var(--rx-accent);text-align:start;white-space:nowrap}
.gp-rx-val{padding:6px 8px;border-bottom:1px solid var(--border);text-align:center;font-weight:600;color:var(--text)}
.gp-rx-val.gp-empty{color:var(--muted);font-weight:400}
.gp-pdf-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 12px 12px;padding:10px;background:var(--blue);color:#fff;border:none;border-radius:10px;font-weight:700;font-size:.9rem;cursor:pointer;text-decoration:none;width:calc(100% - 24px)}
.gp-pdf-btn:active{opacity:.8}
.gp-pdf-frame{width:100%;height:75vh;border:none;border-radius:10px;display:block}
/* Investigations */
/* The empty/unavailable state is a child of the 3-column .tiles-grid, so
   without spanning every column it gets squeezed into a third of the width. */
.tiles-grid .appt-empty{grid-column:1 / -1}
/* The line most patients will ever see on this screen carries the page's own
   text colour — --muted sits at ~4:1 on the lighter themes, which is thin for
   the one sentence that has to be read. The hint below it stays secondary. */
.pinv-empty-title{color:var(--text);font-size:.95rem;font-weight:600}
.pinv-empty-hint{margin-top:8px;font-size:.78rem;line-height:1.7;opacity:.75}
.pinv-cat-tile{position:relative}
.pinv-cat-ic-wrap{position:relative;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.pinv-cat-icon{width:48px;height:48px;border-radius:12px;object-fit:contain;background:var(--brand-lt)}
.pinv-cat-badge{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--red);color:#fff;font-size:.68rem;font-weight:700;
  line-height:18px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pinv-img-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px 14px}
.pinv-img-card{cursor:pointer;text-align:center}
.pinv-img-thumb{width:100%;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.pinv-pdf-icon{width:100%;height:96px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);display:flex;align-items:center;justify-content:center}
.pinv-pdf-icon svg{width:32px;height:32px;stroke:var(--red);stroke-width:1.6;fill:none}
.pinv-img-date{font-size:.68rem;color:var(--muted);display:block;margin-top:3px}
.pinv-lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;z-index:3000}
.pinv-lightbox-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pinv-lightbox-img{max-width:96vw;max-height:90vh;object-fit:contain}
.pinv-lightbox-pdf{width:96vw;height:90vh;border:none;background:#fff}
.pinv-lightbox-close{position:absolute;top:calc(var(--safe-top) + 12px);right:16px;
  width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.15);
  color:#fff;font-size:18px;cursor:pointer;z-index:3001}
/* Insurance Approvals */
.ins-card{background:var(--card);border:1.5px solid var(--border);border-radius:14px;
  padding:14px;margin:0 16px 10px}
.ins-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.ins-doctor{font-weight:700;color:var(--text);font-size:.9rem}
.ins-specialty{font-size:.78rem;color:var(--muted);margin-top:1px}
.ins-date{font-size:.78rem;color:var(--blue);font-weight:700;flex-shrink:0;white-space:nowrap}
.ins-items{display:flex;flex-direction:column}
.ins-item-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;padding-top:10px;border-top:1px solid var(--border)}
.ins-item-row:first-child{margin-top:0;padding-top:0;border-top:none}
.ins-item-row:last-child{margin-bottom:0}
.ins-item-name{font-size:.84rem;color:var(--text);flex:1;min-width:0}
.ins-item-code{font-size:.72rem;color:var(--muted);margin-top:2px}
.ins-badge{font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:10px;flex-shrink:0;white-space:nowrap}
.ins-badge.ins-approved{background:var(--green-lt);color:var(--green)}
.ins-badge.ins-pending{background:var(--amber-lt);color:var(--amber)}
/* "Show older requests" — the list is scanned over a narrow window by default,
   so the footer says what was covered and offers the wider, slower scan. */
.ins-older{padding:6px 16px 22px;text-align:center}
.ins-older-note{font-size:.74rem;color:var(--muted);margin-bottom:10px}
.ins-older-btn{background:var(--brand-lt);color:var(--brand);border:1.5px solid transparent;
  border-radius:12px;padding:11px 20px;font-size:.84rem;font-weight:700;cursor:pointer;
  font-family:inherit;width:100%;max-width:320px}
.ins-older-btn:active{border-color:var(--brand)}
/* Doctors / booking */
.doctors-list{padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.doctor-card{display:flex;gap:14px;align-items:center;background:var(--card);
  border:1.5px solid var(--border);border-radius:16px;padding:14px;cursor:pointer;
  box-shadow:0 2px 10px rgba(5,153,184,.06);transition:all .15s}
.doctor-card:active{transform:scale(.98);border-color:var(--blue)}
.doctor-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;display:block;
  flex-shrink:0;background:var(--blue-lt);border:2px solid var(--blue-lt)}
.doctor-info{flex:1;min-width:0}
.doctor-name{font-weight:700;color:var(--text);font-size:.94rem;line-height:1.3}
.doctor-badges{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.doctor-badge{font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:20px;
  background:var(--blue-lt);color:var(--blue)}
.doctor-about{font-size:.8rem;color:var(--muted);margin-top:8px;line-height:1.55}
.doctor-arrow{color:var(--light);font-size:1.1rem;flex-shrink:0}
/* Doctor info card (on dates screen) */
.doctor-info-card{display:flex;gap:14px;align-items:flex-start;background:var(--card);
  border:1.5px solid var(--border);border-radius:16px;padding:16px;margin-bottom:6px;
  box-shadow:0 2px 10px rgba(5,153,184,.06)}
/* Doctor dates */
.date-card{display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border:1.5px solid var(--border);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:all .15s}
.date-card:active{transform:scale(.98);border-color:var(--blue)}
.date-card-date{font-weight:700;color:var(--text);font-size:.9rem}
.date-card-count{font-size:.78rem;color:var(--blue);font-weight:700;margin-top:2px}
/* Booking calendar — the month grid, and the chosen day's times under it.
   Every colour is a theme token, so the grid follows whichever theme the
   patient is on (Classic through Midnight) without a rule of its own. */
.cal-card{background:var(--card);border:1.5px solid var(--border);border-radius:16px;
  padding:12px 10px 14px;box-shadow:0 2px 10px rgba(5,153,184,.06);
  max-width:420px;margin-left:auto;margin-right:auto}
/* Why the column below is capped: this is a phone-shaped app that desktop
   browsers get unchanged, and .cal-grid is seven `1fr` columns of
   `aspect-ratio:1` cells — so the card's HEIGHT follows the viewport's WIDTH.
   At 1600px each cell measured 217x217px and the six-row card 1568x1419px,
   taller than the window, so a patient booking on a desktop scrolled through
   three rows at a time. The times are capped with it: centring the calendar
   alone left the chips stranded against the far edge.
   No media query on purpose. 452px never binds on a phone, so nothing there
   changes at all, and a `min-width` breakpoint would leave a landscape phone
   or a small tablet on the broken side of the line. */
/* `width:100%` is load-bearing, not belt-and-braces. .pp-view.active is
   `display:flex;flex-direction:column`, so these are flex ITEMS, and a flex
   item whose cross-axis margins are `auto` does not stretch — it shrink-to-fits
   and the auto margins centre it. Drop the width and the cap silently degrades
   to "as wide as the content happens to be": it still measures plausibly, and
   it is wrong. */
#doctor-info-card-wrap,#dates-list,#dates-times{
  width:100%;max-width:452px;margin-left:auto;margin-right:auto}
/* ── The same screen on a desktop ──
   Capping the column stops the grid growing, but on a 1600px monitor it also
   leaves ~570px of empty background down each side. The grid itself cannot be
   the thing that fills it — `aspect-ratio:1` means a wider grid is a taller
   one, which is the bug above. So the TIMES fill it instead: from 900px they
   stand beside the calendar rather than under it, which is where a desktop
   booking screen puts them anyway, and the screen stops scrolling entirely.
   ppShow() clears the inline `display` rather than setting 'block', so this
   `flex` is what actually applies when the screen is revealed — worth knowing
   before "improving" ppShow. */
@media (min-width:900px){
  #doctor-info-card-wrap,#dates-content{
    width:100%;max-width:920px;margin-left:auto;margin-right:auto}
  #dates-content{display:flex;justify-content:center;align-items:flex-start;gap:8px}
  #dates-list{flex:0 0 452px}
  /* Lining the two columns up is a `margin`, not a `padding`, on purpose: the
     template carries an inline `padding:2px 16px 16px` on this div, and an
     inline style beats any selector, so a `padding-top` here is a silent
     no-op that still measures plausibly. Editing the template instead would
     mean upgrading the module on production for the sake of 12px. Margin is
     not in that shorthand, so it wins honestly — 2px padding + 12px margin
     matches #dates-list's 14px. */
  #dates-times{flex:1 1 auto;min-width:0;max-width:none;margin-top:12px}
  /* Wrapped chips leave a ragged last row and a slab of unused pane beside
     them, which is the same dead space in a smaller frame. Equal columns fill
     the width whatever the slot count. Mobile keeps the flex wrap — at 390px a
     grid would stretch three chips right across the screen. */
  #dates-times .slots-grid{display:grid;gap:8px;
    grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  /* No free day at all: ppRenderTimeSlots writes innerHTML = '' and an empty
     flex item would hold half the row open — new dead space, same as the old. */
  #dates-times:empty{display:none}
}
.cal-head{display:flex;align-items:center;gap:8px;margin:0 4px 8px}
.cal-title{flex:1;text-align:center;font-weight:700;color:var(--text);font-size:.95rem}
/* '‹' and '›' are Bidi_Mirrored: the browser turns them round in Arabic, and
   the flex row reverses with it, so previous stays on the side the reader
   expects in both languages. Nothing here may flip them a second time. */
.cal-nav{width:34px;height:34px;flex-shrink:0;border-radius:50%;
  border:1.5px solid var(--border);background:var(--chip-bg);color:var(--blue);
  font-size:1.2rem;line-height:1;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;transition:all .15s}
.cal-nav:active{transform:scale(.94)}
.cal-nav:disabled{opacity:.35;color:var(--light);cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-wd{text-align:center;font-size:.64rem;font-weight:700;color:var(--muted);
  padding:2px 0 6px;overflow:hidden;text-overflow:ellipsis}
.cal-day{aspect-ratio:1;min-height:38px;display:flex;align-items:center;
  justify-content:center;border:1.5px solid transparent;border-radius:12px;
  background:transparent;padding:0;font-family:inherit;font-size:.85rem;
  font-weight:700;color:var(--text);transition:all .15s}
/* A day the doctor is not seeing patients: struck through, and not a button */
.cal-day.off{color:var(--light);text-decoration:line-through}
.cal-day.open{color:var(--blue);background:var(--blue-lt);cursor:pointer}
.cal-day.open:active{transform:scale(.92)}
.cal-day.today{border-color:var(--blue)}
.cal-day.sel{background:var(--blue);border-color:var(--blue);color:#fff}
.cal-empty{visibility:hidden}
/* Days HIS labelled with a word this build does not know. There are none in
   practice — the fallback exists so an unread label costs a row rather than a
   bookable day. */
.cal-loose{margin-top:12px}
.date-card.sel{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-lt)}
/* Section head above the times */
.slots-head{display:flex;align-items:center;gap:8px;margin:16px 2px 10px}
.slots-head svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--blue);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.slots-head-title{font-weight:700;color:var(--text);font-size:.9rem}
.slots-head-sub{flex:1;text-align:end;color:var(--muted);font-size:.74rem;font-weight:700}
/* Doctor time slots */
.slots-grid{display:flex;flex-wrap:wrap;gap:8px}
.slot-chip{padding:9px 14px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--card);color:var(--text);font-size:.82rem;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .15s}
.slot-chip.selected{background:var(--blue);border-color:var(--blue);color:#fff}
.slots-full-text{color:var(--muted);font-size:.8rem}
#slots-confirm-bar{position:sticky;bottom:0;background:var(--card);
  border-top:1px solid var(--border);padding:12px 16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
/* The day is written out in full here ('الإثنين 24 أغسطس'), which is longer
   than the raw 24/08/26 this bar used to carry: the text has to be allowed to
   shrink and the button has to be forbidden from breaking, or 'Confirm
   Booking' folds onto two lines and the meridiem drops below the clock. */
#slots-confirm-bar .slot-bar-when{flex:1;min-width:0;font-size:.85rem;
  color:var(--text);line-height:1.45}
#slots-confirm-bar .slot-bar-btn{width:auto;margin:0;padding:11px 18px;
  flex-shrink:0;white-space:nowrap;font-size:.9rem}
/* Specialties → doctors ─────────────────────────────────────────────────────
   The card is the same object at two sizes: a cover strip on the list, the same
   photo full-bleed on the specialty's own page. A specialty with no photo keeps
   the rhythm with its emoji on the offer gradient, exactly like an advice tile
   with no cover. */
.spec-list{padding:12px 16px;display:flex;flex-direction:column;gap:12px}
.spec-card{display:flex;gap:14px;align-items:center;background:var(--card);
  border:1.5px solid var(--border);border-radius:16px;padding:12px;cursor:pointer;
  box-shadow:0 2px 10px rgba(5,153,184,.06);transition:all .15s;
  touch-action:manipulation;-webkit-user-select:none;user-select:none}
.spec-card:active{transform:scale(.98);border-color:var(--blue)}
.spec-cover{width:74px;height:74px;border-radius:14px;overflow:hidden;flex-shrink:0;
  background:var(--border);line-height:0}
.spec-cover img{width:100%;height:100%;object-fit:cover;display:block}
/* No photo on the specialty: a line icon in the app's own idiom, on the same
   soft brand tint .tile-ic uses. Both colours are theme tokens, so the icons
   follow Classic through Midnight without a rule of their own. */
.spec-cover--none{display:flex;align-items:center;justify-content:center;
  background:var(--brand-lt);line-height:1}
.spec-cover--none svg{width:34px;height:34px;stroke:var(--brand);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.spec-card-body{flex:1;min-width:0}
.spec-card-title{font-weight:700;color:var(--text);font-size:.95rem;line-height:1.35;
  overflow-wrap:anywhere}
/* Specialty page */
.spec-hero{line-height:0;background:var(--border)}
.spec-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.spec-detail-pad{padding:16px}
.spec-detail-title{display:flex;align-items:center;gap:8px;font-size:1.05rem;
  font-weight:800;color:var(--text);line-height:1.35;overflow-wrap:anywhere}
.spec-detail-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:30px;height:30px;border-radius:9px;background:var(--brand-lt);line-height:1}
.spec-detail-icon svg{width:19px;height:19px;stroke:var(--brand);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.spec-detail-desc{margin-top:10px}
.spec-doctors-head{margin:20px 0 10px;font-size:.9rem;font-weight:800;color:var(--text)}
/* The doctor cards reuse .doctors-list, which brings its own 12/16 padding —
   this page already has it from .spec-detail-pad, so take it back off. */
.spec-doctors{padding:0}
.spec-book-link{margin-top:7px;font-size:.76rem;font-weight:700;color:var(--blue)}
/* A doctor the clinic marked not bookable: still listed, but nothing about the
   card may invite a tap that goes nowhere. */
.doctor-card--flat{cursor:default}
.doctor-card--flat:active{transform:none;border-color:var(--border)}
/* Ticket form */
.ticket-form{padding:16px;display:flex;flex-direction:column;gap:14px}
/* The frame takes the space that is actually left, not a slice of 100vh. It
   used to be `calc(100vh - var(--header-h) - var(--safe-top))`, which counted
   the app header and nothing else — not the patient bar, not this view's own
   header, not the bottom nav, not the bottom safe area. That is 182px of chrome
   on an iPhone, so the frame ran 182px past the tab bar. The form then fitted
   inside the over-tall frame, so its own document never scrolled at all, and
   the Submit button sat in the strip below the screen with no way to reach it:
   iOS does not chain a scroll out of an iframe. Letting the flex column do the
   arithmetic keeps the frame's bottom edge on the tab bar and leaves the form's
   own document as the only scroller. */
#view-ticket-form{height:100%;min-height:0;overflow:hidden}
.ticket-form-frame{flex:1 1 auto;min-height:0;height:auto;
  width:100%;border:0;display:block;background:var(--card)}
.ticket-form-list{padding:12px 16px;display:flex;flex-direction:column;gap:12px}
.ticket-form-card{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--radius);padding:15px;
  box-shadow:var(--shadow);cursor:pointer}
.ticket-form-card:active{transform:scale(.98)}
.ticket-form-card .tfc-ic{flex-shrink:0;width:42px;height:42px;border-radius:12px;
  background:var(--brand-lt);display:flex;align-items:center;justify-content:center}
.ticket-form-card .tfc-ic svg{width:22px;height:22px;stroke:var(--brand);
  stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ticket-form-card .tfc-body{flex:1;min-width:0}
.ticket-form-card .tfc-title{font-weight:700;font-size:.95rem;color:var(--text)}
.ticket-form-card .tfc-sub{font-size:.8rem;color:var(--muted);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ticket-form-card .tfc-arrow{color:var(--muted);font-size:1.3rem;flex-shrink:0}
/* The patient's own open requests, shown under the "new request" cards */
.my-ticket-list,.home-booking-list{padding:0 16px;display:flex;flex-direction:column;gap:10px}
/* It is the last block on the requests screen now, so the last card needs its
   own bottom breathing room — the section title used to provide it. Scoped to
   :last-child on purpose: production still serves the older template where this
   section sits ABOVE the form, and there the gap would be wrong. */
#my-tickets-section:last-child{padding-bottom:16px}
.my-ticket-card,.home-booking-card{background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:6px}
.my-ticket-card .mt-head,.home-booking-card .mt-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* min-width:0 + break anywhere: the reference shares a flex row with the status
   chip, and an unbreakable string long enough to fill the row pushed the chip
   outside the card. Inert for the real references, which are short. */
.my-ticket-card .mt-ref,.home-booking-card .mt-ref{font-size:.78rem;font-weight:700;
  color:var(--muted);min-width:0;overflow-wrap:anywhere}
.my-ticket-card .mt-subject,.home-booking-card .mt-subject{font-size:.95rem;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.my-ticket-card .mt-meta,.home-booking-card .mt-meta{font-size:.78rem;color:var(--muted)}
/* Keep DD-MM-YYYY reading in that order inside the RTL layout, which
   otherwise reorders the groups and shows them ISO-style. Ticket cards only:
   their date is the hyphenated numeric form, which needs the forced ltr. */
.my-ticket-card .mt-date{unicode-bidi:isolate;direction:ltr}
/* The booking card's clock is language-aware ('03:30 م' / '03:30 PM'), so the
   isolate must take the PAGE's direction instead of a hardcoded ltr. Forcing
   ltr around Arabic text parked the meridiem to the RIGHT of the digits and
   the card read 'م 03:30' — an Arabic reader hits the 'م' first. Isolated but
   inheriting rtl, the digits stay one glued group and the meridiem follows
   them. See feedback_arabic_bidi_date_time. */
.home-booking-card .mt-date{unicode-bidi:isolate}
.mt-chip{flex-shrink:0;font-size:.72rem;font-weight:700;padding:4px 10px;
  border-radius:999px;white-space:nowrap}
.mt-new{background:var(--blue-lt);color:var(--blue)}
.mt-assigned{background:var(--brand-lt);color:var(--brand)}
.mt-in_progress{background:var(--amber-lt);color:var(--amber)}
.mt-pending{background:var(--red-lt);color:var(--red)}
.mt-resolved{background:var(--green-lt);color:var(--green)}
/* The booking card's ref slot holds a date, so isolate it from the neighbours
   in its flex row. NOT direction:ltr: the server sends a month-name date
   ('30 أغسطس 2026'), and forcing ltr around it printed '30 2026 أغسطس'.
   A month name is strong Arabic and cannot be reordered into another date, so
   the isolate alone — in the page's own direction — is all it needs.
   The ticket card's ref is mixed Arabic+Latin text and is not isolated. */
.home-booking-card .mt-ref{unicode-bidi:isolate}
.home-booking-card{cursor:pointer}
.home-booking-card:active{transform:scale(.98)}
/* Doctor photo + cancel row, mirroring the Appointments screen card so the
   same booking looks the same in both places. */
.home-booking-card .hb-body{display:flex;align-items:center;gap:12px}
.home-booking-card .hb-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;
  background:var(--blue-lt);flex-shrink:0}
.home-booking-card .hb-info{flex:1;min-width:0}
/* The card itself is tappable, so the buttons inside must not scale with it —
   they keep their own press feedback from .appt-cancel-btn / .uber-btn. */
.home-booking-card .hb-actions{flex-shrink:0;align-self:center;
  display:flex;flex-direction:column;gap:6px;align-items:stretch}
.form-label{font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:6px;display:block}
.form-input{width:100%;padding:13px 14px;border-radius:12px;
  border:1.5px solid var(--border);background:var(--card);
  color:var(--text);font-size:.95rem;font-family:inherit;outline:none;transition:border .2s}
.form-input:focus{border-color:var(--blue)}
.form-textarea{resize:vertical;min-height:100px}
.form-btn{width:100%;padding:15px;border-radius:12px;border:none;cursor:pointer;
  font-size:1rem;font-weight:700;font-family:inherit;
  background:var(--blue);color:#fff;transition:all .2s}
.form-btn:hover{background:var(--teal)}
.form-btn:active{transform:scale(.97);background:var(--teal)}
.form-btn:disabled{opacity:.5;cursor:default;transform:none}

/* ── Rate Your Visit ─────────────────────────────────────────────────────────
   The visit list, then the survey. Every offset is a logical property
   (inline-start/end, not left/right) because the page flips to LTR whole with
   the language and these controls sit inside the flipped box. */
.rv-intro{padding:14px 16px 4px;color:var(--muted);font-size:.83rem}
.rv-card{display:flex;gap:12px;align-items:center;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;margin:10px 16px;cursor:pointer;transition:transform .15s,border-color .15s}
.rv-card:active{transform:scale(.98);border-color:var(--blue)}
/* A visit already rated is a record, not a button: no press feedback, no
   pointer, and the whole row dimmed so the eye skips it. */
.rv-card.rated{cursor:default;opacity:.72}
.rv-card.rated:active{transform:none;border-color:var(--border)}
.rv-card-ic{width:42px;height:42px;border-radius:12px;background:var(--blue-lt);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rv-card-ic svg{width:21px;height:21px;stroke:var(--blue);stroke-width:1.7;
  fill:none;stroke-linecap:round}
.rv-card.rated .rv-card-ic{background:var(--green-lt)}
.rv-card.rated .rv-card-ic svg{stroke:var(--green);fill:var(--green)}
.rv-card-info{flex:1;min-width:0}
.rv-card-title{font-size:.92rem;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-card-sub{font-size:.78rem;color:var(--muted);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-card-when{font-size:.78rem;color:var(--blue);font-weight:700;margin-top:4px}
.rv-go{flex-shrink:0;background:var(--blue);color:#fff;border-radius:999px;
  padding:7px 16px;font-size:.8rem;font-weight:700}
.rv-done{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.rv-done-badge{background:var(--green-lt);color:var(--green);border-radius:999px;
  padding:5px 12px;font-size:.75rem;font-weight:700;white-space:nowrap}
.rv-done-on{font-size:.68rem;color:var(--muted)}
.rv-empty{padding:48px 24px;text-align:center}
.rv-empty-title{font-size:.95rem;font-weight:700;color:var(--text)}
.rv-empty-hint{font-size:.82rem;color:var(--muted);margin-top:6px;line-height:1.6}

/* The visit being rated, pinned above the questions so the patient never has to
   remember which one they tapped. */
.rv-visit-strip{background:var(--blue-lt);padding:12px 16px;
  display:flex;flex-direction:column;gap:3px}
.rv-visit-doc{font-size:.9rem;font-weight:700;color:var(--navy)}
.rv-visit-when{font-size:.78rem;color:var(--teal);font-weight:700}
.rv-intro-text{padding:14px 16px 0;color:var(--muted);font-size:.85rem;line-height:1.7}
.rv-questions{padding:8px 16px 4px;display:flex;flex-direction:column;gap:8px}
.rv-q{background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px}
.rv-q-text{font-size:.9rem;font-weight:600;color:var(--text);line-height:1.6;
  margin-bottom:12px}
.rv-q-no{color:var(--muted);font-weight:700}
.rv-req{color:var(--red);margin-inline-start:4px;font-weight:700}
.rv-opt{color:var(--light);font-size:.75rem;margin-inline-start:6px;font-weight:500}

/* Stars fill up to the tap, so the control reads as a rating rather than as
   five separate buttons. 44px keeps every one of them a real touch target. */
.rv-stars{display:flex;gap:4px;justify-content:center}
.rv-star{width:44px;height:44px;border:none;background:transparent;
  font-size:1.9rem;line-height:1;color:var(--border);cursor:pointer;
  padding:0;transition:color .15s,transform .1s}
.rv-star.on{color:#F5A623}
.rv-star:active{transform:scale(1.15)}

.rv-nps{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.rv-nps-b{min-width:40px;height:40px;border-radius:10px;cursor:pointer;
  border:1.5px solid var(--border);background:var(--card);color:var(--text);
  font-size:.9rem;font-weight:700;font-family:inherit}
.rv-nps-b.on{background:var(--blue);border-color:var(--blue);color:#fff}
.rv-likert{display:flex;gap:8px;justify-content:center}
.rv-likert-b{flex:1;max-width:64px;height:44px;border-radius:12px;cursor:pointer;
  border:1.5px solid var(--border);background:var(--card);color:var(--text);
  font-size:.95rem;font-weight:700;font-family:inherit}
.rv-likert-b.on{background:var(--blue);border-color:var(--blue);color:#fff}
/* The ends of a scale, each pinned to its own side of the row. `space-between`
   with two children needs no direction of its own — it follows the page. */
.rv-scale-ends{display:flex;justify-content:space-between;gap:10px;
  margin-top:8px;font-size:.72rem;color:var(--muted)}

.rv-choices{display:flex;flex-direction:column;gap:8px}
.rv-choice{display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 14px;border-radius:12px;cursor:pointer;text-align:start;
  border:1.5px solid var(--border);background:var(--card);color:var(--text);
  font-size:.88rem;font-family:inherit;font-weight:600}
.rv-choice.on{border-color:var(--blue);background:var(--blue-lt)}
.rv-choice-box{width:22px;height:22px;border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;
  border:1.5px solid var(--border);background:var(--card);color:transparent}
.rv-choice.on .rv-choice-box{border-color:var(--blue);background:var(--blue);color:#fff}
.rv-text{min-height:90px}

.rv-submit-wrap{padding:14px 16px 28px}
.rv-thanks-box{padding:48px 24px;text-align:center}
.rv-thanks-ic{font-size:3rem;line-height:1}
.rv-thanks-title{font-size:1.05rem;font-weight:700;color:var(--text);margin-top:12px}
.rv-thanks-body{font-size:.88rem;color:var(--muted);line-height:1.8;margin:10px 0 22px}
.rv-thanks-body h1,.rv-thanks-body h2,.rv-thanks-body h3{font-size:1rem;color:var(--text);margin:0 0 6px}
/* Patient switcher modal */
.pp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:flex;align-items:flex-end;z-index:999;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pp-sheet{background:var(--card);border-radius:24px 24px 0 0;
  padding:20px 16px;width:100%;max-height:70vh;overflow-y:auto}
.pp-sheet-title{font-size:1rem;font-weight:700;color:var(--text);
  text-align:center;margin-bottom:16px}
/* Notification preference toggles */
.notif-row{display:flex;align-items:center;gap:12px;padding:14px;
  border-radius:12px;border:1.5px solid var(--border);margin-bottom:10px;cursor:pointer}
.notif-text{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.notif-label{font-size:.95rem;font-weight:600;color:var(--text)}
.notif-hint{font-size:.78rem;color:var(--muted)}
.notif-switch{appearance:none;-webkit-appearance:none;flex:none;
  width:46px;height:27px;border-radius:14px;background:var(--border);
  position:relative;cursor:pointer;transition:background .2s}
.notif-switch:checked{background:var(--brand)}
.notif-switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;
  width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .2s}
.notif-switch:checked::after{transform:translateX(19px)}
html[dir="rtl"] .notif-switch:checked::after{transform:translateX(-19px)}
.switch-patient-card{display:flex;align-items:center;gap:12px;padding:14px;
  border-radius:12px;cursor:pointer;border:1.5px solid var(--border);
  margin-bottom:8px;transition:all .2s}
.switch-patient-card.current{border-color:var(--blue);background:var(--blue-lt)}
.switch-patient-card:hover{border-color:var(--blue)}
.sw-avatar{width:42px;height:42px;border-radius:50%;
  background:var(--blue-lt);display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0}
.sw-name{font-size:.9rem;font-weight:600;color:var(--text)}
.sw-code{font-size:.78rem;color:var(--muted)}
.sw-star{font-size:1.2rem;cursor:pointer;margin-inline-start:auto;line-height:1;flex-shrink:0}
.sw-star:not(.active){opacity:.55}
.sw-check{color:var(--blue);font-size:1.1rem;margin-inline-start:8px}
/* Notification badge */
.badge{background:var(--red);color:#fff;border-radius:50%;
  width:18px;height:18px;font-size:.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  position:absolute;top:-4px;right:-4px}
/* Toast */
#pp-toast{position:fixed;bottom:calc(var(--bottom-nav-h) + var(--safe-bot) + 12px);
  left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--toast-bg);color:#fff;padding:10px 20px;border-radius:24px;
  font-size:.85rem;opacity:0;transition:all .3s;pointer-events:none;
  white-space:nowrap;z-index:9999;max-width:90vw;text-align:center}
#pp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* LTR overrides */
[dir="ltr"] .patient-card-arrow{transform:rotate(180deg)}
[dir="ltr"] .banner-dot{/* same */}
/* Spinner */
.spinner{width:32px;height:32px;border:3px solid var(--border);
  border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-center{flex:1;display:flex;align-items:center;justify-content:center;padding:48px}
/* Alert */
.pp-alert{padding:12px 14px;border-radius:10px;font-size:.83rem;margin-top:10px}
.pp-alert-error{background:var(--red-lt);color:var(--red)}
.pp-alert-success{background:var(--green-lt);color:var(--green)}
/* More menu */
.more-list{display:flex;flex-direction:column;gap:2px;padding:12px 16px}
.more-item{display:flex;align-items:center;gap:14px;padding:14px 16px;
  background:var(--card);border-radius:12px;cursor:pointer;transition:all .12s;
  border:none;font-family:inherit;width:100%;text-align:start}
.more-item:hover{background:var(--blue-lt)}
.more-item:active{transform:scale(.97);background:var(--blue-lt)}
.more-item-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--blue-lt);border-radius:8px}
.more-item-icon svg{width:18px;height:18px;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.more-item-label{flex:1;font-size:.9rem;font-weight:600;color:var(--text)}
.more-item-arrow{color:var(--light);font-size:.9rem}
.more-divider{height:1px;background:var(--border);margin:8px 0}

/* ── Theme picker sheet ── */
.theme-card{display:flex;align-items:center;gap:14px;padding:12px 14px;
  background:var(--card);border:1.5px solid var(--border);border-radius:14px;
  margin-bottom:10px;cursor:pointer;transition:all .15s}
.theme-card:active{transform:scale(.98)}
.theme-card.current{border-color:var(--blue);background:var(--blue-lt)}
.theme-swatch{width:58px;height:42px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;gap:4px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 2px 8px rgba(0,0,0,.18)}
.theme-swatch .td{width:9px;height:9px;border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.theme-name{flex:1;font-size:.92rem;font-weight:700;color:var(--text)}
.theme-default-tag{font-size:.68rem;font-weight:700;color:var(--muted);
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:2px 8px;flex-shrink:0}

/* Markup that exists for one theme's layout (the Clarity hero card, book tile,
   clinics rail, promo card, wide header lockup, "welcome back" line). Hidden
   here, after every component rule, so a component's own display never wins;
   the theme block re-shows each one with a higher-specificity rule. */
.cl-only{display:none}
/* Count badges on the home tiles — only the Clarity theme draws them */
.tile-badge{display:none}

/* ════════════════════════════════════════════════════════════════
   THEMES — additive overrides; Classic = base :root, no block needed
   ════════════════════════════════════════════════════════════════ */

/* ── Aurora Glass — airy indigo↔cyan glassmorphism ── */
html[data-theme="aurora"]{
  --navy:#1E1B4B;--navy2:#312E81;
  --blue:#0EA5E9;--blue-lt:#E0F2FE;--teal:#0284C7;--teal-lt:#E0F2FE;
  --brand:#6366F1;--brand-lt:#EEF2FF;
  --bg:#EFF4FC;--card:rgba(255,255,255,.82);--border:#DCE6F5;
  --text:#0F172A;--muted:#64748B;--light:#94A3B8;
  --radius:20px;--radius-sm:12px;
  --shadow:0 8px 24px rgba(99,102,241,.10);--shadow-md:0 14px 40px rgba(99,102,241,.16);
  --tile-bg:rgba(255,255,255,.78);--tile-border:rgba(255,255,255,.95);
  --chip-bg:#fff;--tile-label:#334155;--nav-inactive:#94A3B8;--toast-bg:#312E81;
  --grad-hero:linear-gradient(135deg,#6366F1 0%,#0EA5E9 100%);
  --grad-offer:linear-gradient(135deg,#8B5CF6 0%,#0EA5E9 100%);
  --grad-btn:linear-gradient(135deg,#6366F1 0%,#0EA5E9 100%);
}
html[data-theme="aurora"] #pp-root{
  background:radial-gradient(900px 520px at 115% -5%,#DBEAFE 0%,transparent 55%),
             radial-gradient(820px 520px at -15% 110%,#EDE9FE 0%,transparent 55%),
             linear-gradient(180deg,#F4F7FE 0%,#ECF1FB 100%)}
html[data-theme="aurora"] #pp-app,html[data-theme="aurora"] #pp-login{background:transparent}
html[data-theme="aurora"] #pp-header,html[data-theme="aurora"] #pp-bottom-nav{
  background:rgba(255,255,255,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-theme="aurora"] .tile,html[data-theme="aurora"] .login-card{
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(99,102,241,.12)}
html[data-theme="aurora"] .pp-btn-primary,html[data-theme="aurora"] .book-appt-btn,
html[data-theme="aurora"] .form-btn,html[data-theme="aurora"] .gp-pdf-btn,
html[data-theme="aurora"] .appt-tab.active,html[data-theme="aurora"] .slot-chip.selected,
html[data-theme="aurora"] .cal-day.sel,
html[data-theme="aurora"] .gp-visit-hdr{background:var(--grad-btn)}
html[data-theme="aurora"] .pp-btn-primary,html[data-theme="aurora"] .book-appt-btn{
  box-shadow:0 8px 20px rgba(99,102,241,.35)}
html[data-theme="aurora"] .nav-fab,html[data-theme="aurora"] #nav-home.active .nav-fab{
  background:var(--grad-btn);box-shadow:0 6px 18px rgba(99,102,241,.45)}

/* ── Royal Amethyst — deep violet, gradient header ── */
html[data-theme="royal"]{
  --navy:#2E1065;--navy2:#4C1D95;
  --blue:#7C3AED;--blue-lt:#F3E8FF;--teal:#6D28D9;--teal-lt:#F3E8FF;
  --brand:#9333EA;--brand-lt:#F5F0FF;
  --bg:#F7F5FB;--card:#fff;--border:#E9E3F5;
  --text:#1E1B2E;--muted:#6E6790;--light:#A9A3C2;
  --radius:18px;--radius-sm:12px;
  --shadow:0 4px 16px rgba(124,58,237,.10);--shadow-md:0 10px 32px rgba(124,58,237,.18);
  --tile-bg:#fff;--tile-border:#E4D9F7;--chip-bg:#fff;
  --tile-label:#3B3555;--nav-inactive:#A9A3C2;--toast-bg:#2E1065;
  --grad-hero:linear-gradient(135deg,#4C1D95 0%,#9333EA 100%);
  --grad-offer:linear-gradient(135deg,#7C3AED 0%,#C026D3 100%);
  --grad-btn:linear-gradient(135deg,#6D28D9 0%,#A855F7 100%);
  --rx-head-bg:#F5F0FF;--rx-label-bg:#FAF7FF;--rx-head-text:#4C1D95;
  --rx-border:#DDD0F0;--rx-accent:#7C3AED;
}
html[data-theme="royal"] #pp-header{
  background:linear-gradient(120deg,#3B0E7E 0%,#7C3AED 100%);border-bottom:none}
html[data-theme="royal"] .hdr-title{color:#fff}
html[data-theme="royal"] .hdr-sub{color:rgba(255,255,255,.72)}
html[data-theme="royal"] .hdr-lang{background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.45);color:#fff}
html[data-theme="royal"] .hdr-logo{border-color:transparent}
html[data-theme="royal"] #pp-patient-bar{background:#EFE7FB}
html[data-theme="royal"] .pp-btn-primary,html[data-theme="royal"] .book-appt-btn,
html[data-theme="royal"] .form-btn,html[data-theme="royal"] .gp-pdf-btn,
html[data-theme="royal"] .appt-tab.active,html[data-theme="royal"] .slot-chip.selected,
html[data-theme="royal"] .cal-day.sel,
html[data-theme="royal"] .gp-visit-hdr{background:var(--grad-btn)}
html[data-theme="royal"] .pp-btn-primary,html[data-theme="royal"] .book-appt-btn{
  box-shadow:0 8px 20px rgba(124,58,237,.38)}
html[data-theme="royal"] .nav-fab,html[data-theme="royal"] #nav-home.active .nav-fab{
  background:var(--grad-btn);box-shadow:0 6px 18px rgba(124,58,237,.5)}

/* ── Emerald Oasis — fresh teal & emerald ── */
html[data-theme="oasis"]{
  --navy:#134E4A;--navy2:#115E59;
  --blue:#0D9488;--blue-lt:#CCFBF1;--teal:#0F766E;--teal-lt:#CCFBF1;
  --brand:#059669;--brand-lt:#D1FAE5;
  --bg:#F0FAF6;--card:#fff;--border:#D6EBE2;
  --text:#152E2B;--muted:#5F7A73;--light:#9DB8B0;
  --radius:18px;--radius-sm:12px;
  --shadow:0 4px 16px rgba(13,148,136,.10);--shadow-md:0 10px 32px rgba(13,148,136,.18);
  --tile-bg:#fff;--tile-border:#BEE9DC;--chip-bg:#fff;
  --tile-label:#2C4A44;--nav-inactive:#9DB8B0;--toast-bg:#134E4A;
  --grad-hero:linear-gradient(135deg,#0F766E 0%,#10B981 100%);
  --grad-offer:linear-gradient(135deg,#0D9488 0%,#34D399 100%);
  --grad-btn:linear-gradient(135deg,#0F766E 0%,#10B981 100%);
  --rx-head-bg:#ECFDF5;--rx-label-bg:#F6FEF9;--rx-head-text:#115E59;
  --rx-border:#C9EEE0;--rx-accent:#0D9488;
}
html[data-theme="oasis"] #pp-header{
  background:linear-gradient(120deg,#0B4A44 0%,#0D9488 100%);border-bottom:none}
html[data-theme="oasis"] .hdr-title{color:#fff}
html[data-theme="oasis"] .hdr-sub{color:rgba(255,255,255,.72)}
html[data-theme="oasis"] .hdr-lang{background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.45);color:#fff}
html[data-theme="oasis"] .hdr-logo{border-color:transparent}
html[data-theme="oasis"] #pp-patient-bar{background:#DDF5EC}
html[data-theme="oasis"] .pp-btn-primary,html[data-theme="oasis"] .book-appt-btn,
html[data-theme="oasis"] .form-btn,html[data-theme="oasis"] .gp-pdf-btn,
html[data-theme="oasis"] .appt-tab.active,html[data-theme="oasis"] .slot-chip.selected,
html[data-theme="oasis"] .cal-day.sel,
html[data-theme="oasis"] .gp-visit-hdr{background:var(--grad-btn)}
html[data-theme="oasis"] .pp-btn-primary,html[data-theme="oasis"] .book-appt-btn{
  box-shadow:0 8px 20px rgba(13,148,136,.35)}
html[data-theme="oasis"] .nav-fab,html[data-theme="oasis"] #nav-home.active .nav-fab{
  background:var(--grad-btn);box-shadow:0 6px 18px rgba(13,148,136,.45)}

/* ── Midnight — dark mode with cyan accents ── */
html[data-theme="midnight"]{
  --navy:#020617;--navy2:#0B1220;
  --blue:#22D3EE;--blue-lt:rgba(34,211,238,.13);--teal:#67E8F9;--teal-lt:rgba(34,211,238,.13);
  --brand:#38BDF8;--brand-lt:rgba(56,189,248,.15);
  --green:#34D399;--green-lt:rgba(52,211,153,.15);
  --red:#F87171;--red-lt:rgba(248,113,113,.15);
  --amber:#FBBF24;--amber-lt:rgba(251,191,36,.15);
  --bg:#0B1220;--card:#121C31;--border:#243350;
  --text:#E6EDF7;--muted:#8DA1BD;--light:#5D7292;
  --shadow:0 2px 12px rgba(0,0,0,.5);--shadow-md:0 4px 24px rgba(0,0,0,.6);
  --tile-bg:#121C31;--tile-border:#243350;
  --chip-bg:#0B1220;--input-focus-bg:#0B1220;
  --tile-label:#C7D4E8;--nav-inactive:#5D7292;--toast-bg:#324567;
  --grad-hero:linear-gradient(135deg,#0F2A43 0%,#155E75 100%);
  --grad-offer:linear-gradient(135deg,#155E75 0%,#0E7490 100%);
  --grad-btn:linear-gradient(135deg,#0891B2 0%,#2563EB 100%);
  --rx-head-bg:#16233B;--rx-label-bg:#101A2E;--rx-head-text:#93C5FD;
  --rx-border:#243350;--rx-accent:#38BDF8;
}
html[data-theme="midnight"] body{background:#020617}
html[data-theme="midnight"] .pp-btn-primary,html[data-theme="midnight"] .book-appt-btn,
html[data-theme="midnight"] .form-btn,html[data-theme="midnight"] .gp-pdf-btn,
html[data-theme="midnight"] .appt-tab.active,html[data-theme="midnight"] .slot-chip.selected,
html[data-theme="midnight"] .cal-day.sel,
html[data-theme="midnight"] .gp-visit-hdr{background:var(--grad-btn);color:#fff}
html[data-theme="midnight"] .pp-btn-primary,html[data-theme="midnight"] .book-appt-btn{
  box-shadow:0 8px 20px rgba(8,145,178,.4)}
html[data-theme="midnight"] .nav-fab,html[data-theme="midnight"] #nav-home.active .nav-fab{
  background:var(--grad-btn);box-shadow:0 6px 18px rgba(8,145,178,.5)}
html[data-theme="midnight"] .appt-pay-btn{background:#059669;border-color:#059669}
html[data-theme="midnight"] .appt-tab{background:var(--card)}
html[data-theme="midnight"] #pp-bottom-nav{box-shadow:0 -2px 16px rgba(0,0,0,.45)}
html[data-theme="midnight"] .tile{box-shadow:0 4px 14px rgba(0,0,0,.35)}
html[data-theme="midnight"] .login-logo,html[data-theme="midnight"] .hdr-logo{border-color:transparent}
html[data-theme="midnight"] .inv-pdf-frame{background:#fff}

/* ── Noor — modern light medical app. Unlike the four themes above this one
   also reshapes the LAYOUT: floating dock nav (no FAB), app-icon service grid,
   floating patient card with greeting, segmented tabs, frameless cards.
   Everything stays scoped to the attribute so other themes are untouched. ── */

/* Readex Pro (self-hosted; browsers fetch a face only when a rule applies it,
   so these downloads happen exclusively in the Noor theme) */
@font-face{font-family:'Readex Pro';font-weight:300;font-display:swap;
  src:url('../fonts/readex-pro-arabic-300-normal.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Readex Pro';font-weight:400;font-display:swap;
  src:url('../fonts/readex-pro-arabic-400-normal.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Readex Pro';font-weight:500;font-display:swap;
  src:url('../fonts/readex-pro-arabic-500-normal.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Readex Pro';font-weight:600;font-display:swap;
  src:url('../fonts/readex-pro-arabic-600-normal.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Readex Pro';font-weight:700;font-display:swap;
  src:url('../fonts/readex-pro-arabic-700-normal.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Readex Pro';font-weight:300;font-display:swap;
  src:url('../fonts/readex-pro-latin-300-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}
@font-face{font-family:'Readex Pro';font-weight:400;font-display:swap;
  src:url('../fonts/readex-pro-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}
@font-face{font-family:'Readex Pro';font-weight:500;font-display:swap;
  src:url('../fonts/readex-pro-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}
@font-face{font-family:'Readex Pro';font-weight:600;font-display:swap;
  src:url('../fonts/readex-pro-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}
@font-face{font-family:'Readex Pro';font-weight:700;font-display:swap;
  src:url('../fonts/readex-pro-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}
/* The theme's own typeface — instantly a different app */
html:is([data-theme="noor"],[data-theme="saudi"],[data-theme="clarity"]),
html:is([data-theme="noor"],[data-theme="saudi"],[data-theme="clarity"]) body{
  font-family:'Readex Pro','Segoe UI',system-ui,sans-serif}

html:is([data-theme="noor"],[data-theme="saudi"]){
  --navy:#0F2A5C;--navy2:#163C7A;
  --blue:#2563EB;--blue-lt:#EAF1FE;--teal:#1D4ED8;--teal-lt:#EAF1FE;
  --brand:#2563EB;--brand-lt:#EAF1FE;
  --green:#12B76A;--green-lt:#E7F8F0;
  --red:#E11D48;--red-lt:#FDECF0;
  --amber:#D97706;--amber-lt:#FDF1DF;
  --bg:#F5F7FB;--card:#FFFFFF;--border:#EAECF2;
  --text:#101828;--muted:#667085;--light:#98A2B3;
  --radius:20px;--radius-sm:12px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.06);
  --shadow-md:0 12px 32px rgba(16,24,40,.12);
  --header-h:60px;
  --tile-bg:transparent;--tile-border:transparent;
  --chip-bg:#fff;--input-focus-bg:#fff;
  --tile-label:#344054;--nav-inactive:#7E93B8;--toast-bg:#101828;
  --grad-hero:linear-gradient(180deg,#1A47C9 0%,#4D9BF0 100%);
  --grad-offer:linear-gradient(135deg,#0EA5E9 0%,#2563EB 100%);
  --grad-btn:linear-gradient(135deg,#2563EB 0%,#3B82F6 100%);
  --rx-head-bg:#EAF1FE;--rx-label-bg:#F5F8FE;--rx-head-text:#1E40AF;
  --rx-border:#D6E4FA;--rx-accent:#2563EB;
}
html:is([data-theme="noor"],[data-theme="saudi"]) body{background:#F5F7FB}

/* Login — gradient sky band at the top, white sheet card overlapping it */
html:is([data-theme="noor"],[data-theme="saudi"]) #pp-login{position:relative;background:#F5F7FB;
  justify-content:flex-start;padding-top:44px}
html:is([data-theme="noor"],[data-theme="saudi"]) #pp-login::before{content:"";position:absolute;
  top:0;left:0;right:0;height:330px;border-radius:0 0 34px 34px;
  background:var(--grad-hero)}
html:is([data-theme="noor"],[data-theme="saudi"]) #pp-login>*{position:relative}
/* …but the floating language pill must stay fixed (the rule above would
   otherwise pull it into the flow, centred above the logo) */
html:is([data-theme="noor"],[data-theme="saudi"]) #pp-login .login-lang{position:fixed}
html:is([data-theme="noor"],[data-theme="saudi"]) .login-logo{border:none;
  box-shadow:0 12px 30px rgba(9,30,80,.35)}
html:is([data-theme="noor"],[data-theme="saudi"]) .login-title{color:#fff;font-size:1.55rem;font-weight:700;
  letter-spacing:-.01em}
html:is([data-theme="noor"],[data-theme="saudi"]) .login-sub{color:rgba(255,255,255,.82);margin-bottom:26px}
html:is([data-theme="noor"],[data-theme="saudi"]) .login-card{border:none;box-shadow:var(--shadow-md)}
html:is([data-theme="noor"],[data-theme="saudi"]) .pp-input,html:is([data-theme="noor"],[data-theme="saudi"]) .otp-box,
html:is([data-theme="noor"],[data-theme="saudi"]) .reg-choice-btn{background:#F2F4F8;border-color:transparent}
html:is([data-theme="noor"],[data-theme="saudi"]) .pp-input:focus,html:is([data-theme="noor"],[data-theme="saudi"]) .otp-box:focus{
  border-color:var(--blue);box-shadow:0 0 0 4px var(--brand-lt)}
html:is([data-theme="noor"],[data-theme="saudi"]) .pp-btn{border-radius:14px}
html:is([data-theme="noor"],[data-theme="saudi"]) .pp-btn-primary,
html:is([data-theme="noor"],[data-theme="saudi"]) .form-btn,html:is([data-theme="noor"],[data-theme="saudi"]) .gp-pdf-btn,
html:is([data-theme="noor"],[data-theme="saudi"]) .slot-chip.selected,
html:is([data-theme="noor"],[data-theme="saudi"]) .cal-day.sel,
html:is([data-theme="noor"],[data-theme="saudi"]) .gp-visit-hdr{background:var(--grad-btn)}
html:is([data-theme="noor"],[data-theme="saudi"]) .pp-btn-primary{box-shadow:0 10px 22px rgba(37,99,235,.28)}
html:is([data-theme="noor"],[data-theme="saudi"]) .login-lang{background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.4);color:#fff}

/* Header — top of the gradient sky band, white on blue */
html:is([data-theme="noor"],[data-theme="saudi"]) #pp-header{border-bottom:none;padding:4px 18px 0;
  background:linear-gradient(180deg,#1A47C9 0%,#2B62E0 100%)}
html:is([data-theme="noor"],[data-theme="saudi"]) .hdr-logo{height:40px;width:40px;border:none;
  box-shadow:0 4px 14px rgba(9,30,80,.30)}
html:is([data-theme="noor"],[data-theme="saudi"]) .hdr-title{color:#fff;font-size:1.05rem;font-weight:700;
  letter-spacing:-.01em}
html:is([data-theme="noor"],[data-theme="saudi"]) .hdr-sub{color:rgba(255,255,255,.75)}
html:is([data-theme="noor"],[data-theme="saudi"]) .hdr-lang{background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.4);color:#fff;padding:6px 12px}

/* Patient bar — the band continues, curves closed, and the page scrolls
   UNDER its rounded corners (negative bottom margin + raised z-index) */
html:is([data-theme="noor"],[data-theme="saudi"]) #pp-patient-bar{border-bottom:none;
  background:linear-gradient(180deg,#2B62E0 0%,#4D9BF0 100%);
  border-radius:0 0 28px 28px;margin:0 0 -18px;padding:8px 18px 26px;
  position:relative;z-index:2}
html:is([data-theme="noor"],[data-theme="saudi"]) .pbar-hello{display:block;font-size:.68rem;font-weight:700;
  color:#CFE0FF;margin-bottom:2px}
/* …but not Clarity's own greeting line, which also carries .pbar-hello */
html:is([data-theme="noor"],[data-theme="saudi"]) .pbar-hello-back{display:none}
html:is([data-theme="noor"],[data-theme="saudi"]) .pbar-avatar{width:44px;height:44px;font-size:1.2rem;
  background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.45)}
html:is([data-theme="noor"],[data-theme="saudi"]) .pbar-name{color:#fff;font-weight:700}
html:is([data-theme="noor"],[data-theme="saudi"]) .pbar-code{color:rgba(255,255,255,.78)}
html:is([data-theme="noor"],[data-theme="saudi"]) .pbar-switch{background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:999px;
  padding:7px 14px}
/* Room for content to emerge from under the curve on every screen */
html:is([data-theme="noor"],[data-theme="saudi"]) .pp-view{padding-top:26px}

/* Home — inset rounded banner, ticked section titles */
html:is([data-theme="noor"],[data-theme="saudi"]) .banner-wrap{width:auto;margin:0 16px;border-radius:20px;
  background:transparent;box-shadow:var(--shadow)}
html:is([data-theme="noor"],[data-theme="saudi"]) .banner-slide{width:100%}
html:is([data-theme="noor"],[data-theme="saudi"]) .pp-section-title{font-size:1rem;font-weight:700;
  color:var(--text);text-transform:none;letter-spacing:0}
html:is([data-theme="noor"],[data-theme="saudi"]) .pp-section-title::before{content:"";display:inline-block;
  width:18px;height:4px;border-radius:2px;background:var(--grad-btn);
  margin-inline-end:8px;vertical-align:middle}

/* Book appointment — not a button any more: a warm action card with an icon
   chip, start-aligned label and a round arrow. The one warm accent in the app. */
html:is([data-theme="noor"],[data-theme="saudi"]) .book-appt-btn{justify-content:flex-start;gap:12px;
  text-align:start;padding:13px 14px;border-radius:20px;font-weight:700;
  font-size:1rem;background:linear-gradient(120deg,#0D9488 0%,#14B8A6 100%);
  box-shadow:0 12px 26px rgba(13,148,136,.32)}
html:is([data-theme="noor"],[data-theme="saudi"]) .book-appt-btn::before{content:"📅";width:42px;height:42px;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.24);border-radius:14px;font-size:1.15rem}
html:is([data-theme="noor"],[data-theme="saudi"]) .book-appt-btn::after{content:"←";width:34px;height:34px;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  margin-inline-start:auto;background:#fff;color:#0D9488;border-radius:50%;
  font-size:1rem;font-weight:700}
html:is([data-theme="noor"],[data-theme="saudi"])[dir="ltr"] .book-appt-btn::after{content:"→"}

/* Service tiles → 4-across app icons: no card box, round colored icon bubbles */
html:is([data-theme="noor"],[data-theme="saudi"]) .tiles-grid{grid-template-columns:repeat(4,1fr);
  gap:14px 4px;padding:2px 12px 10px}
html:is([data-theme="noor"],[data-theme="saudi"]) .tiles-grid .tile{background:transparent;border:none;
  box-shadow:none;padding:8px 2px;gap:8px}
html:is([data-theme="noor"],[data-theme="saudi"]) .tiles-grid .tile:active{background:transparent;
  border-color:transparent;transform:scale(.92)}
html:is([data-theme="noor"],[data-theme="saudi"]) .tiles-grid .tile-label{font-size:.72rem;font-weight:700}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile-ic{width:56px;height:56px;border-radius:19px;
  background:#fff;box-shadow:0 6px 14px rgba(16,24,40,.08)}
/* Each service gets its own hue — position-based so it also colors the
   Medical-Records / Services row lists and the investigations grid */
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+1) .tile-ic{background:#EAF1FE}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+1) .tile-ic svg{stroke:#2563EB}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+2) .tile-ic{background:#E6F7F5}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+2) .tile-ic svg{stroke:#0D9488}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+3) .tile-ic{background:#F1EBFE}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+3) .tile-ic svg{stroke:#7C3AED}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+4) .tile-ic{background:#FDF1DF}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+4) .tile-ic svg{stroke:#D97706}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+5) .tile-ic{background:#FDEBF3}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+5) .tile-ic svg{stroke:#DB2777}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+6) .tile-ic{background:#E7F8F0}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+6) .tile-ic svg{stroke:#12B76A}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+7) .tile-ic{background:#E5F6FD}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+7) .tile-ic svg{stroke:#0284C7}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+8) .tile-ic{background:#EDEFFD}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+8) .tile-ic svg{stroke:#4F46E5}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+9) .tile-ic{background:#FEEEE6}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile:nth-child(9n+9) .tile-ic svg{stroke:#EA580C}
/* Row-style tiles (Medical Records / Services lists) stay cards, but frameless */
html:is([data-theme="noor"],[data-theme="saudi"]) .tile-row{background:#fff;border:none;border-radius:16px;
  box-shadow:var(--shadow);padding:14px 16px}
html:is([data-theme="noor"],[data-theme="saudi"]) .tile-row .tile-ic{width:46px;height:46px}

/* Sub-view headers — transparent with a floating round back button */
html:is([data-theme="noor"],[data-theme="saudi"]) .subview-header{background:transparent;border-bottom:none;
  padding:14px 16px 8px}
html:is([data-theme="noor"],[data-theme="saudi"]) .back-btn{width:38px;height:38px;padding:0;background:#fff;
  border-radius:50%;box-shadow:var(--shadow);display:flex;align-items:center;
  justify-content:center;font-size:1.05rem}
html:is([data-theme="noor"],[data-theme="saudi"]) .subview-title{font-size:1.1rem;font-weight:800}

/* Tabs → iOS-style segmented control */
html:is([data-theme="noor"],[data-theme="saudi"]) .appt-tabs{background:#ECEFF4;margin:12px 16px 8px;
  padding:4px;border-radius:14px;gap:4px}
html:is([data-theme="noor"],[data-theme="saudi"]) .appt-tab{border:none;background:transparent;
  border-radius:10px;padding:9px}
html:is([data-theme="noor"],[data-theme="saudi"]) .appt-tab.active{background:#fff;border:none;
  color:var(--brand);box-shadow:0 2px 8px rgba(16,24,40,.10)}

/* Cards everywhere: frameless, bigger radius, soft depth */
html:is([data-theme="noor"],[data-theme="saudi"]) .appt-card,html:is([data-theme="noor"],[data-theme="saudi"]) .invoice-card,
html:is([data-theme="noor"],[data-theme="saudi"]) .inv-detail-summary,html:is([data-theme="noor"],[data-theme="saudi"]) .doctor-card,
html:is([data-theme="noor"],[data-theme="saudi"]) .doctor-info-card,html:is([data-theme="noor"],[data-theme="saudi"]) .date-card,
html:is([data-theme="noor"],[data-theme="saudi"]) .cal-card,
html:is([data-theme="noor"],[data-theme="saudi"]) .ticket-form-card,html:is([data-theme="noor"],[data-theme="saudi"]) .my-ticket-card,
html:is([data-theme="noor"],[data-theme="saudi"]) .home-booking-card,html:is([data-theme="noor"],[data-theme="saudi"]) .advice-card,
html:is([data-theme="noor"],[data-theme="saudi"]) .spec-card,
html:is([data-theme="noor"],[data-theme="saudi"]) .rv-card,html:is([data-theme="noor"],[data-theme="saudi"]) .rv-q,
html:is([data-theme="noor"],[data-theme="saudi"]) .gp-visit-card,html:is([data-theme="noor"],[data-theme="saudi"]) .notif-row,
html:is([data-theme="noor"],[data-theme="saudi"]) .theme-card{border:none;border-radius:18px;
  box-shadow:var(--shadow)}
html:is([data-theme="noor"],[data-theme="saudi"]) .queue-card{border-block-color:transparent;
  border-inline-end-color:transparent;box-shadow:var(--shadow)}
html:is([data-theme="noor"],[data-theme="saudi"]) .offer-card{border-radius:18px;box-shadow:var(--shadow)}
html:is([data-theme="noor"],[data-theme="saudi"]) .slot-chip{background:#fff;border-color:transparent;
  box-shadow:var(--shadow)}
html:is([data-theme="noor"],[data-theme="saudi"]) .theme-card.current,html:is([data-theme="noor"],[data-theme="saudi"]) .notif-row{
  box-shadow:var(--shadow)}
html:is([data-theme="noor"],[data-theme="saudi"]) .theme-card.current{box-shadow:0 0 0 2px var(--brand),var(--shadow)}
html:is([data-theme="noor"],[data-theme="saudi"]) .form-input{background:#F2F4F8;border-color:transparent}
html:is([data-theme="noor"],[data-theme="saudi"]) .form-input:focus{border-color:var(--blue);
  box-shadow:0 0 0 4px var(--brand-lt)}
html:is([data-theme="noor"],[data-theme="saudi"]) .form-btn{border-radius:14px}

/* More menu → one grouped white card, round icon chips */
html:is([data-theme="noor"],[data-theme="saudi"]) .more-list{background:#fff;border-radius:20px;
  margin:12px 16px;padding:6px;box-shadow:var(--shadow);gap:0}
html:is([data-theme="noor"],[data-theme="saudi"]) .more-item{background:transparent;border-radius:14px}
html:is([data-theme="noor"],[data-theme="saudi"]) .more-item-icon{width:36px;height:36px;border-radius:50%}
html:is([data-theme="noor"],[data-theme="saudi"]) .more-divider{margin:6px 12px}

/* Bottom sheets: taller radius + grabber handle */
html:is([data-theme="noor"],[data-theme="saudi"]) .pp-sheet{border-radius:28px 28px 0 0;padding-top:12px}
html:is([data-theme="noor"],[data-theme="saudi"]) .pp-sheet::before{content:"";display:block;width:44px;
  height:5px;border-radius:3px;background:#E4E7EC;margin:0 auto 14px}
html:is([data-theme="noor"],[data-theme="saudi"]) #pp-toast{border-radius:999px}

/* Bottom nav → floating rounded dock; the FAB becomes an ordinary tab and the
   active tab sits on a soft pill (the old 4px dot is repurposed as that pill) */
html:is([data-theme="noor"],[data-theme="saudi"]) #pp-bottom-nav{height:62px;margin:6px 14px 12px;
  border-radius:26px;border-top:none;background:#0D1F3C;
  box-shadow:0 14px 32px rgba(13,31,60,.38)}
html:is([data-theme="noor"],[data-theme="saudi"]) .nav-tab{padding:6px 0}
html:is([data-theme="noor"],[data-theme="saudi"]) .nav-tab.active{color:#fff}
html:is([data-theme="noor"],[data-theme="saudi"]) .nav-tab.active svg{stroke:#fff}
html:is([data-theme="noor"],[data-theme="saudi"]) .nav-tab svg,html:is([data-theme="noor"],[data-theme="saudi"]) .nav-tab-label{
  position:relative;z-index:1}
html:is([data-theme="noor"],[data-theme="saudi"]) .nav-active-dot{top:7px;bottom:7px;left:7px;right:7px;
  width:auto;height:auto;transform:none;border-radius:18px;
  background:rgba(77,155,240,.30);z-index:0}
html:is([data-theme="noor"],[data-theme="saudi"]) .nav-fab,html:is([data-theme="noor"],[data-theme="saudi"]) #nav-home.active .nav-fab{
  position:relative;top:auto;left:auto;transform:none;width:auto;height:auto;
  background:transparent;border:none;box-shadow:none;z-index:1}
html:is([data-theme="noor"],[data-theme="saudi"]) #nav-home:active .nav-fab{transform:none}
html:is([data-theme="noor"],[data-theme="saudi"]) #nav-home .nav-fab svg,
html:is([data-theme="noor"],[data-theme="saudi"]) #nav-home.active .nav-fab svg{width:22px;height:22px;
  stroke:currentColor}
html:is([data-theme="noor"],[data-theme="saudi"]) #nav-home{justify-content:center;padding:6px 0;
  color:var(--nav-inactive)}
html:is([data-theme="noor"],[data-theme="saudi"]) #nav-home.active{color:#fff}

/* ── Saudi National Day 🇸🇦 — seasonal theme. Shares Noor's redesigned layout
   (the :is() selectors above) and re-dresses it in the national identity:
   flag-green band with a Sadu/bunting triangle fringe, "دام عزك يا وطن" banner,
   palm watermark, desert-gold booking card, deep-green dock. These rules sit
   AFTER the shared block on purpose — equal specificity, later wins. ── */
html[data-theme="saudi"]{
  --navy:#0A3D22;--navy2:#0E5530;
  --blue:#0E6B37;--blue-lt:#E7F4EC;--teal:#0A5A2C;--teal-lt:#E7F4EC;
  --brand:#0E6B37;--brand-lt:#E7F4EC;
  --green:#12B76A;--green-lt:#E7F8F0;
  --red:#E11D48;--red-lt:#FDECF0;
  --amber:#B8860B;--amber-lt:#F8F0D9;
  --bg:#F4F8F4;--card:#FFFFFF;--border:#E6EDE6;
  --text:#122117;--muted:#5F7367;--light:#93A79A;
  --radius:20px;--radius-sm:12px;
  --shadow:0 1px 2px rgba(10,61,34,.05),0 6px 20px rgba(10,61,34,.07);
  --shadow-md:0 12px 32px rgba(10,61,34,.14);
  --header-h:60px;
  --tile-bg:transparent;--tile-border:transparent;
  --chip-bg:#fff;--input-focus-bg:#fff;
  --tile-label:#2E4437;--nav-inactive:#7FA98F;--toast-bg:#0A3D22;
  --grad-hero:linear-gradient(180deg,#084F28 0%,#17954E 100%);
  --grad-offer:linear-gradient(135deg,#0E6B37 0%,#C9A227 100%);
  --grad-btn:linear-gradient(135deg,#0E6B37 0%,#17954E 100%);
  --rx-head-bg:#E7F4EC;--rx-label-bg:#F3FAF5;--rx-head-text:#0A4A26;
  --rx-border:#CFE6D6;--rx-accent:#0E6B37;
}
html[data-theme="saudi"] body{background:#F4F8F4}

/* The band turns flag green; a bunting fringe of little triangles hangs above
   the curve (conic-gradient row — the National Day street decoration) */
html[data-theme="saudi"] #pp-header{
  background:linear-gradient(180deg,#084F28 0%,#0B6534 100%)}
html[data-theme="saudi"] #pp-patient-bar{
  background:
    conic-gradient(from 135deg at 50% 0,rgba(255,255,255,.20) 0 90deg,transparent 0 360deg)
      0 calc(100% - 12px)/16px 8px repeat-x,
    linear-gradient(180deg,#0B6534 0%,#17954E 100%)}
/* Palm watermark behind the identity row */
html[data-theme="saudi"] #pp-patient-bar::before{content:"🌴";position:absolute;
  inset-inline-end:74px;top:-8px;font-size:62px;line-height:1;opacity:.16;
  pointer-events:none}
/* National Day banner — its own row inside the green band */
html[data-theme="saudi"] #pp-patient-bar{flex-wrap:wrap}
html[data-theme="saudi"] #pp-patient-bar::after{content:"🇸🇦 دام عزك يا وطن";
  width:100%;text-align:center;margin-top:10px;padding:6px 12px;
  background:rgba(255,255,255,.14);border:1px dashed rgba(255,255,255,.4);
  border-radius:999px;color:#fff;font-size:.78rem;font-weight:700;
  letter-spacing:.02em}

/* Login: the shared band already follows --grad-hero (green); add the
   National Day badge under the subtitle */
html[data-theme="saudi"] .login-sub::after{content:"🇸🇦 اليوم الوطني السعودي";
  display:block;width:fit-content;margin:12px auto 0;padding:6px 14px;
  background:rgba(255,255,255,.16);border:1px dashed rgba(255,255,255,.45);
  border-radius:999px;color:#fff;font-size:.8rem;font-weight:700}

/* Booking card: desert gold — the green/gold National Day pairing */
html[data-theme="saudi"] .book-appt-btn{
  background:linear-gradient(120deg,#B8860B 0%,#D4A93C 100%);
  box-shadow:0 12px 26px rgba(184,134,11,.32)}
html[data-theme="saudi"] .book-appt-btn::after{color:#A87B12}

/* Dock: deep palm green with a glowing green pill */
html[data-theme="saudi"] #pp-bottom-nav{background:#06301B;
  box-shadow:0 14px 32px rgba(6,48,27,.40)}
html[data-theme="saudi"] .nav-active-dot{background:rgba(23,149,78,.42)}

/* Service icons re-tinted to the national palette: greens, golds, sands */
html[data-theme="saudi"] .tile:nth-child(9n+1) .tile-ic{background:#E7F4EC}
html[data-theme="saudi"] .tile:nth-child(9n+1) .tile-ic svg{stroke:#0E6B37}
html[data-theme="saudi"] .tile:nth-child(9n+2) .tile-ic{background:#F8F0D9}
html[data-theme="saudi"] .tile:nth-child(9n+2) .tile-ic svg{stroke:#A87B12}
html[data-theme="saudi"] .tile:nth-child(9n+3) .tile-ic{background:#E2F5EA}
html[data-theme="saudi"] .tile:nth-child(9n+3) .tile-ic svg{stroke:#0F8C4F}
html[data-theme="saudi"] .tile:nth-child(9n+4) .tile-ic{background:#F6EFE3}
html[data-theme="saudi"] .tile:nth-child(9n+4) .tile-ic svg{stroke:#8A6D2F}
html[data-theme="saudi"] .tile:nth-child(9n+5) .tile-ic{background:#EDF3E0}
html[data-theme="saudi"] .tile:nth-child(9n+5) .tile-ic svg{stroke:#5F7A2E}
html[data-theme="saudi"] .tile:nth-child(9n+6) .tile-ic{background:#E0F2EA}
html[data-theme="saudi"] .tile:nth-child(9n+6) .tile-ic svg{stroke:#0C7A55}
html[data-theme="saudi"] .tile:nth-child(9n+7) .tile-ic{background:#EAF6E2}
html[data-theme="saudi"] .tile:nth-child(9n+7) .tile-ic svg{stroke:#3E8E2E}
html[data-theme="saudi"] .tile:nth-child(9n+8) .tile-ic{background:#E3EFE7}
html[data-theme="saudi"] .tile:nth-child(9n+8) .tile-ic svg{stroke:#14603A}
html[data-theme="saudi"] .tile:nth-child(9n+9) .tile-ic{background:#F4EAD8}
html[data-theme="saudi"] .tile:nth-child(9n+9) .tile-ic svg{stroke:#9C7C24}

/* ── Noor, header as in Classic (2026-09-07, user request) ─────────────────
   Noor alone — Saudi keeps the green band. The shared block above turned the
   header + patient bar into the blue sky band; these rules hand both bars back
   to the base (Classic) rules and feed them Classic's palette, since Noor
   redefines --blue. The login band is untouched. The booking card keeps
   Noor's shape but takes Classic's book-button colour. ── */
html[data-theme="noor"] #pp-header,html[data-theme="noor"] #pp-patient-bar{
  --blue:#0599B8;--blue-lt:#DEF3FA;--chip-bg:#fff;--card:#fff;
  --text:#1A2535;--muted:#6B7A8D;--border:#E2E8F0}
html[data-theme="noor"] #pp-header{background:var(--card);border-bottom:1px solid var(--border);
  height:56px;padding:0 16px}
html[data-theme="noor"] .hdr-logo{height:36px;width:36px;border:1px solid var(--border);box-shadow:none}
html[data-theme="noor"] .hdr-title{color:var(--text);font-size:1rem;letter-spacing:0}
html[data-theme="noor"] .hdr-sub{color:var(--muted)}
html[data-theme="noor"] .hdr-lang{background:var(--blue-lt);border:1px solid var(--blue);
  color:var(--blue);padding:4px 10px}
html[data-theme="noor"] #pp-patient-bar{background:var(--blue-lt);border-bottom:1px solid var(--border);
  border-radius:0;margin:0;padding:10px 16px;position:static;z-index:auto}
html[data-theme="noor"] .pbar-hello{display:none}
html[data-theme="noor"] .pbar-avatar{width:38px;height:38px;font-size:1.1rem;
  background:var(--chip-bg);border:1px solid var(--blue)}
html[data-theme="noor"] .pbar-name{color:var(--text);font-weight:600}
html[data-theme="noor"] .pbar-code{color:var(--muted)}
html[data-theme="noor"] .pbar-switch{background:var(--chip-bg);border:1px solid var(--blue);
  color:var(--blue);border-radius:12px;padding:5px 12px}
/* No curve to emerge from under any more */
html[data-theme="noor"] .pp-view{padding-top:0}
html[data-theme="noor"] .book-appt-btn{background:#0599B8;box-shadow:0 12px 26px rgba(5,153,184,.35)}
html[data-theme="noor"] .book-appt-btn::after{color:#0599B8}
/* Dock in the same colour as the booking card (2026-09-07, Noor only): white
   icons and labels on the teal-blue, inactive ones translucent, the active
   pill a light glass instead of the blue glow */
/* A shade under the button's #0599B8: on the phone the flat bar read lighter
   than the shadowed card, so the dock is pulled down to match by eye */
html[data-theme="noor"] #pp-bottom-nav{background:#0489A6;box-shadow:0 14px 32px rgba(4,137,166,.40)}

html[data-theme="noor"] .nav-tab,html[data-theme="noor"] #nav-home{color:rgba(255,255,255,.72)}
html[data-theme="noor"] .nav-tab.active,html[data-theme="noor"] #nav-home.active{color:#fff}
html[data-theme="noor"] .nav-active-dot{background:rgba(255,255,255,.22)}

/* Noor's More rows: the same icon treatment as its home tiles (2026-09-07,
   user request, Noor only) — a pastel squircle with its own hue per row, in
   the home grid's 9-hue cycle, instead of the shared small round chip.
   nth-of-type, not nth-child: the dividers and the version line are divs.
   The red sign-out / delete rows carry inline colours and keep them. */
html[data-theme="noor"] .more-item-icon{width:46px;height:46px;border-radius:15px;
  background:#EAF1FE;box-shadow:0 6px 14px rgba(16,24,40,.06)}
html[data-theme="noor"] .more-item-icon svg{width:22px;height:22px;stroke:#2563EB}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+2) .more-item-icon{background:#E6F7F5}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+2) .more-item-icon svg{stroke:#0D9488}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+3) .more-item-icon{background:#F1EBFE}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+3) .more-item-icon svg{stroke:#7C3AED}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+4) .more-item-icon{background:#FDF1DF}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+4) .more-item-icon svg{stroke:#D97706}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+5) .more-item-icon{background:#FDEBF3}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+5) .more-item-icon svg{stroke:#DB2777}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+6) .more-item-icon{background:#E7F8F0}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+6) .more-item-icon svg{stroke:#12B76A}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+7) .more-item-icon{background:#E5F6FD}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+7) .more-item-icon svg{stroke:#0284C7}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+8) .more-item-icon{background:#EDEFFD}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+8) .more-item-icon svg{stroke:#4F46E5}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+9) .more-item-icon{background:#FEEEE6}
html[data-theme="noor"] .more-list .more-item:nth-of-type(9n+9) .more-item-icon svg{stroke:#EA580C}

/* ── Uber ────────────────────────────────────────────────────────────────────
   Uber's own mark: the wordmark on black, which is what a patient scanning the
   card recognises. Smaller than the buttons it sits under and centred rather
   than stretched, so it reads as a mark and not a third decision to make.
   Inverted on the dark theme — black on near-black is not a logo, it is a
   hole in the card. */
/* Deliberately the same box as .appt-cancel-btn — same padding, same radius,
   same line height — so the two sit in the actions column as a matched pair
   rather than a button and an afterthought. Only the weight is heavier, because
   the wordmark is a logo and not a sentence. */
.uber-btn{flex-shrink:0;background:#000;color:#fff;
  border:1.5px solid #000;border-radius:10px;padding:8px 12px;
  font-size:.76rem;font-weight:800;letter-spacing:.2px;
  cursor:pointer;font-family:inherit;transition:all .15s;text-align:center;
  touch-action:manipulation;-webkit-user-select:none;user-select:none}
.uber-btn:active{transform:scale(.93)}
html[data-theme="midnight"] .uber-btn{background:#fff;color:#000;border-color:#fff}

/* ── AI Assistant ─────────────────────────────────────────────────────────
   A chat screen, so the message list is the only scroller and the composer
   sits on the tab bar. The view therefore takes the height that is actually
   left (see #view-ticket-form for why a slice of 100vh is not that) and the
   list gets min-height:0 so it can shrink inside the flex column instead of
   pushing the composer off the bottom.
   Everything here is direction-agnostic: bubbles align to the flex cross-axis
   end, which is the right in English and the left in Arabic — the same way
   every phone messenger mirrors — and paddings use logical properties. */
#view-ai-assistant{height:100%;min-height:0;overflow:hidden}
.ai-new-btn{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:var(--chip-bg);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ai-new-btn svg{width:17px;height:17px;stroke:var(--blue);stroke-width:2;fill:none;stroke-linecap:round}
.ai-new-btn:active{transform:scale(.9)}
.ai-msgs{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 14px;display:flex;flex-direction:column;gap:12px}
.ai-row{display:flex;align-items:flex-end;gap:8px;max-width:92%}
.ai-row-bot{align-self:flex-start}
.ai-row-user{align-self:flex-end}
.ai-av{flex-shrink:0;width:30px;height:30px;border-radius:50%;object-fit:cover;
  background:var(--blue-lt);border:1px solid var(--border)}
.ai-bubble{padding:11px 14px;border-radius:16px;font-size:.88rem;line-height:1.7;
  /* The answer arrives as plain text with real newlines; pre-wrap is what keeps
     the model's paragraphs and lists readable without turning its output into
     markup. `anywhere` stops a long file/invoice number widening the screen. */
  white-space:pre-wrap;overflow-wrap:anywhere;text-align:start}
.ai-bubble-user{background:var(--blue);color:#fff;border-end-end-radius:5px}
.ai-bubble-bot{background:var(--card);color:var(--text);border:1px solid var(--border);
  border-end-start-radius:5px;box-shadow:var(--shadow)}
.ai-bubble-bot a{color:var(--blue);font-weight:600;text-decoration:underline}
.ai-bubble-bot b{font-weight:700}
.ai-bubble-err{background:var(--red-lt);color:var(--red);border-color:var(--red)}
/* Typing indicator — three dots in the assistant's own bubble, so the patient
   can see the question was received while a tool call runs against HIS. */
.ai-typing{display:flex;gap:4px;align-items:center;padding:14px}
.ai-typing i{width:6px;height:6px;border-radius:50%;background:var(--light);
  animation:ppAiDot 1.2s infinite ease-in-out}
.ai-typing i:nth-child(2){animation-delay:.18s}
.ai-typing i:nth-child(3){animation-delay:.36s}
@keyframes ppAiDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* Opening screen: avatar + greeting, above the suggestion chips */
/* margin-block:auto centres it in the flex column while the list is empty,
   and collapses to nothing the moment a message pushes it out of the way. */
.ai-intro{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-block:auto;padding:26px 20px;text-align:center}
.ai-intro-av{width:64px;height:64px;border-radius:50%;object-fit:cover;
  background:var(--blue-lt);border:1px solid var(--border)}
.ai-intro-title{font-size:1.02rem;font-weight:700;color:var(--text)}
.ai-intro-text{font-size:.85rem;color:var(--muted);line-height:1.6;max-width:280px}
.ai-chips{flex-shrink:0;display:flex;gap:8px;overflow-x:auto;padding:8px 14px 4px;
  scrollbar-width:none}
.ai-chips::-webkit-scrollbar{display:none}
.ai-chip{flex:0 0 auto;background:var(--chip-bg);border:1.5px solid var(--tile-border);
  border-radius:999px;padding:8px 14px;font-family:inherit;font-size:.78rem;font-weight:600;
  color:var(--blue);cursor:pointer;white-space:nowrap}
.ai-chip:active{transform:scale(.96)}
.ai-composer{flex-shrink:0;display:flex;gap:8px;align-items:flex-end;
  padding:4px 12px 10px;background:var(--card)}
.ai-input{flex:1;min-width:0;resize:none;max-height:120px;padding:11px 14px;
  border-radius:18px;border:1.5px solid var(--border);background:var(--bg);
  color:var(--text);font-family:inherit;font-size:.9rem;line-height:1.5;outline:none;
  transition:border .2s}
.ai-input:focus{border-color:var(--blue);background:var(--input-focus-bg)}
.ai-input::placeholder{color:var(--light)}
.ai-send{flex-shrink:0;width:42px;height:42px;border-radius:50%;border:none;
  background:var(--grad-btn);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ai-send svg{width:19px;height:19px;fill:#fff;stroke:none}
/* The paper-plane points along the reading direction. Unlike ‹ › it is not a
   Bidi_Mirrored glyph, so nothing flips it for us — this is the flip. */
[dir="rtl"] .ai-send svg{transform:scaleX(-1)}
.ai-send:active{transform:scale(.92)}
.ai-send:disabled{opacity:.45;cursor:default;transform:none}
/* Sits ABOVE the composer, not under it: the bottom strip of the content area
   is covered by the floating Home button, which would sit on top of a centred
   line parked there. Shares the composer's card background and carries the
   separator, so the two read as one block on the tab bar. */
.ai-disclaimer{flex-shrink:0;background:var(--card);color:var(--muted);
  font-size:.66rem;line-height:1.4;text-align:center;padding:7px 14px 3px;
  border-top:1px solid var(--border)}

/* Zoom, both kinds -- the pair also fixed in eye_care_pharmacy/static/src/css/pharmacy.css.
   A phone reads a quick second tap as double-tap-to-zoom, so tapping a control
   twice blew the page up around that corner. `manipulation` on the root removes
   the gesture for the whole page: touch-action accumulates down the ancestor
   chain, so this covers the gaps between controls, not only the controls
   themselves. Pinch-to-zoom deliberately survives -- that is the gesture a
   low-vision patient actually needs. */
/* `*` and not only the root: Chromium stops walking the ancestor chain at a
   scroll container, so a rule on html/body alone does not govern a touch that
   lands inside the app's own scrolling list -- which is where most taps land.
   Proven by experiment: touch-action:none on html, body, or any wrapper above a
   scroller leaves that scroller unrestricted; only its own value counts. `*` is
   safe because `manipulation` still allows pan and pinch, and any component
   needing `none` sets it on a class, which outranks `*`. */
*, html, body { touch-action: manipulation; }

/* The other zoom: iOS enlarges the page when a field under 16px takes focus,
   and never shrinks back. Touch pointers only, so the desktop layout keeps the
   sizes it was designed with. */
@media (pointer: coarse), (hover: none) {
  input, textarea, select { font-size: 16px; }   /* the unclassed, and anything added later */
  .reg-dob-sel { font-size: 16px; }
  .form-input { font-size: 16px; }
  .ai-input { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════
   Clarity — the Theme-ref.jpeg layout (2026-09-06): white ground, deep navy
   as the one ink colour, pale blue-grey squircle tiles with line icons, a
   filled navy "book" tile, a teal floating book/home button, peach section
   marks, hero card + "our clinics" rail on Home, white rounded
   dock. Structure first (see feedback_redesign_means_structure), palette
   second. Scoped to the attribute; other themes untouched. The Clarity-only
   markup is .cl-only in the template and is re-shown here.
   Sits at the very end of the file on purpose so it wins by order over the
   component rules above (same specificity where a theme block re-styles
   .ai-*, .uber-btn, the zoom rules…).
   ════════════════════════════════════════════════════════════════ */
html[data-theme="clarity"]{
  --navy:#16375C;--navy2:#1F4A78;
  --blue:#16375C;--blue-lt:#EAF0F6;--teal:#1F4A78;--teal-lt:#EAF0F6;
  --brand:#16375C;--brand-lt:#EAF0F6;
  --green:#12B76A;--green-lt:#E7F8F0;
  --red:#E11D48;--red-lt:#FDECF0;
  --amber:#D97706;--amber-lt:#FDF1DF;
  --bg:#FFFFFF;--card:#FFFFFF;--border:#E3EAF1;
  --text:#14213A;--muted:#6A7A90;--light:#A3AFC0;
  --radius:18px;--radius-sm:12px;
  --shadow:0 1px 2px rgba(22,55,92,.04),0 6px 18px rgba(22,55,92,.07);
  --shadow-md:0 12px 30px rgba(22,55,92,.14);
  --header-h:64px;--bottom-nav-h:70px;
  --tile-bg:#EAF0F6;--tile-border:transparent;
  --chip-bg:#fff;--input-focus-bg:#fff;
  --tile-label:#16375C;--nav-inactive:#8A98AB;--toast-bg:#16375C;
  --grad-hero:linear-gradient(135deg,#F1F7FC 0%,#D9E8F5 100%);
  --grad-offer:linear-gradient(135deg,#1F4A78 0%,#4F8FC9 100%);
  --grad-btn:#16375C;
  --rx-head-bg:#EAF0F6;--rx-label-bg:#F5F8FB;--rx-head-text:#16375C;
  --rx-border:#D5E0EB;--rx-accent:#16375C;
  /* the theme's own accents */
  --cl-teal:#22A79A;--cl-peach:#F2A66B;--cl-sky:#4F8FC9;--cl-field:#F3F6FA;
}
html[data-theme="clarity"] body{background:#FFFFFF}
html[data-theme="clarity"] #pp-root,html[data-theme="clarity"] #pp-app,
html[data-theme="clarity"] #pp-login{background:#FFFFFF}

/* ── Login: white sheet, the lockup as it is, navy button ── */
html[data-theme="clarity"] .login-logo{width:132px;height:132px;border-radius:26px;border:none;
  box-shadow:none;background:transparent;padding:0}
html[data-theme="clarity"] .login-title{color:var(--navy);font-weight:800;letter-spacing:-.01em}
html[data-theme="clarity"] .login-sub{color:var(--muted);margin-bottom:26px}
html[data-theme="clarity"] .login-card{border:1px solid var(--border);border-radius:22px;
  box-shadow:var(--shadow)}
html[data-theme="clarity"] .login-card h2{color:var(--navy);font-weight:700}
html[data-theme="clarity"] .pp-input,html[data-theme="clarity"] .otp-box,
html[data-theme="clarity"] .reg-choice-btn,html[data-theme="clarity"] .form-input,
html[data-theme="clarity"] .ai-input{background:var(--cl-field);border-color:transparent}
html[data-theme="clarity"] .pp-input:focus,html[data-theme="clarity"] .otp-box:focus,
html[data-theme="clarity"] .form-input:focus,html[data-theme="clarity"] .ai-input:focus{
  border-color:var(--navy);background:#fff;box-shadow:0 0 0 4px var(--blue-lt)}
html[data-theme="clarity"] .pp-btn{border-radius:14px}
html[data-theme="clarity"] .pp-btn-primary,html[data-theme="clarity"] .form-btn,
html[data-theme="clarity"] .gp-pdf-btn,html[data-theme="clarity"] .slot-chip.selected,
html[data-theme="clarity"] .cal-day.sel,html[data-theme="clarity"] .gp-visit-hdr,
html[data-theme="clarity"] .ai-send,html[data-theme="clarity"] .ai-bubble-user{
  background:var(--navy);color:#fff}
html[data-theme="clarity"] .pp-btn-primary{box-shadow:0 10px 22px rgba(22,55,92,.26)}
html[data-theme="clarity"] .pp-btn-primary:hover{background:var(--navy2)}
html[data-theme="clarity"] .pp-btn-ghost{border-color:var(--navy);color:var(--navy)}
html[data-theme="clarity"] .form-btn{border-radius:14px}
html[data-theme="clarity"] .login-lang{background:var(--tile-bg);border:none;color:var(--navy)}
html[data-theme="clarity"] .patient-card{background:#fff;border-color:var(--border);border-radius:16px}
html[data-theme="clarity"] .patient-avatar{background:var(--tile-bg)}

/* ── Header: the wide lockup at the END of the row (the reference has it on
   the far side from the greeting), language pill at the start ── */
html[data-theme="clarity"] #pp-header{background:#fff;border-bottom:none;height:var(--header-h);
  padding:8px 18px 0;gap:10px}
html[data-theme="clarity"] .hdr-logo,html[data-theme="clarity"] .hdr-title,
html[data-theme="clarity"] .hdr-sub{display:none}
html[data-theme="clarity"] .hdr-lockup{display:block;height:40px;width:auto;order:2}
html[data-theme="clarity"] .hdr-lang{order:0;background:var(--tile-bg);border:none;
  color:var(--navy);padding:7px 13px;border-radius:999px;font-size:.74rem}
html[data-theme="clarity"] #pp-header>div{order:1}

/* ── Patient bar: navy initial disc + "welcome back" + name, white ── */
html[data-theme="clarity"] #pp-patient-bar{background:#fff;border-bottom:none;
  padding:6px 18px 8px;gap:12px}
html[data-theme="clarity"] .pbar-avatar{width:46px;height:46px;background:var(--navy);
  border:none;color:#fff;font-size:0;box-shadow:0 6px 14px rgba(22,55,92,.28)}
html[data-theme="clarity"] .pbar-avatar::after{content:attr(data-initial);font-size:1.1rem;
  font-weight:700;color:#fff;line-height:1}
html[data-theme="clarity"] .pbar-avatar:not([data-initial])::after{content:"👤";font-size:1.2rem}
html[data-theme="clarity"] .pbar-hello{display:none}
html[data-theme="clarity"] .pbar-hello-back{display:block;font-size:.72rem;font-weight:600;
  color:var(--muted);margin-bottom:1px}
html[data-theme="clarity"] .pbar-name{color:var(--navy);font-size:1rem;font-weight:800}
html[data-theme="clarity"] .pbar-code{color:var(--muted);font-size:.7rem}
html[data-theme="clarity"] .pbar-switch{background:#fff;border:1.5px solid var(--navy);
  color:var(--navy);border-radius:999px;padding:6px 14px}

/* ── Sub-view headers: white, round pale back button, navy title ── */
html[data-theme="clarity"] .subview-header{background:#fff;border-bottom:none;padding:10px 16px 8px}
html[data-theme="clarity"] .back-btn{width:38px;height:38px;padding:0;border-radius:50%;
  background:var(--tile-bg);color:var(--navy);display:flex;align-items:center;
  justify-content:center;font-size:1.1rem}
html[data-theme="clarity"] .subview-title{font-size:1.08rem;font-weight:800;color:var(--navy)}

/* ── Section titles: navy with the peach mark under the first word ── */
html[data-theme="clarity"] .pp-section{padding:14px 16px 6px}
html[data-theme="clarity"] .pp-section-title{font-size:1.02rem;font-weight:800;color:var(--navy);
  text-transform:none;letter-spacing:0;margin-bottom:10px;position:relative;
  padding-bottom:8px;width:fit-content}
html[data-theme="clarity"] .pp-section-title::after{content:"";position:absolute;bottom:0;
  inset-inline-start:0;width:30px;height:3px;border-radius:2px;background:var(--cl-peach)}
html[data-theme="clarity"] .cl-section-row{display:flex;align-items:center;
  justify-content:space-between;gap:10px}
html[data-theme="clarity"] .cl-section-row .pp-section-title{margin-bottom:0}
html[data-theme="clarity"] .cl-link{background:none;border:none;font-family:inherit;
  font-size:.76rem;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;
  gap:2px;cursor:pointer;padding:6px 0}
html[data-theme="clarity"] .cl-chev{font-size:1.05em;line-height:1}

/* ── Home composition: hero → live queue → next visit → tiles → clinics →
   banners → offers → advice. Only the banner moves; everything else
   is already in this order in the template. ── */
html[data-theme="clarity"] #view-home{padding-top:2px}
html[data-theme="clarity"] #view-home>.banner-wrap{order:6}
html[data-theme="clarity"] #view-home>#offers-section{order:8}
html[data-theme="clarity"] #view-home>#advice-section{order:9}
html[data-theme="clarity"] #view-home>div:last-child{order:10}
/* Booking lives in the grid here, and the tiles need no caption */
html[data-theme="clarity"] #view-home>.book-appt-btn,
html[data-theme="clarity"] #view-home>.pp-section{display:none}

/* Hero card */
html[data-theme="clarity"] .cl-hero{display:flex;align-items:center;gap:12px;
  margin:6px 16px 6px;padding:18px 18px 18px 14px;border-radius:22px;
  background:var(--grad-hero);position:relative;overflow:hidden;
  box-shadow:0 10px 26px rgba(22,55,92,.10)}
html[data-theme="clarity"] .cl-hero::before{content:"";position:absolute;width:210px;height:210px;
  border-radius:50%;background:rgba(255,255,255,.45);inset-inline-end:-70px;top:-90px}
html[data-theme="clarity"] .cl-hero-text{flex:1;min-width:0;position:relative}
html[data-theme="clarity"] .cl-hero-title{font-size:1.14rem;font-weight:800;color:var(--navy);
  line-height:1.35;letter-spacing:-.01em}
html[data-theme="clarity"] .cl-hero-sub{font-size:.78rem;color:var(--muted);margin-top:6px;line-height:1.65}
html[data-theme="clarity"] .cl-hero-btn{margin-top:12px;background:var(--navy);color:#fff;border:none;
  border-radius:999px;padding:9px 16px;font-family:inherit;font-size:.8rem;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  box-shadow:0 8px 18px rgba(22,55,92,.28);transition:transform .12s}
html[data-theme="clarity"] .cl-hero-btn:active{transform:scale(.96)}
html[data-theme="clarity"] .cl-hero-art{flex:0 0 112px;width:112px;height:112px;position:relative;
  filter:drop-shadow(0 10px 18px rgba(22,55,92,.25))}
html[data-theme="clarity"] .cl-hero-art svg{width:100%;height:100%;display:block}
html[data-theme="clarity"] .cl-iris-fibers{transform-origin:60px 60px;animation:clIrisDrift 40s linear infinite}
@keyframes clIrisDrift{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html[data-theme="clarity"] .cl-iris-fibers{animation:none}}

/* Tiles: 4-across pale squircles, navy line icons, no bubble; booking filled */
html[data-theme="clarity"] .tiles-grid{grid-template-columns:repeat(4,1fr);gap:10px;padding:6px 16px 4px}
html[data-theme="clarity"] .tiles-grid .tile{background:var(--tile-bg);border:none;box-shadow:none;
  border-radius:18px;padding:14px 4px 11px;gap:9px;min-height:98px;justify-content:center}
html[data-theme="clarity"] .tiles-grid .tile:active{transform:scale(.95);background:#DCE6F0;border-color:transparent}
html[data-theme="clarity"] .tiles-grid .tile-ic{width:auto;height:auto;background:transparent;border-radius:0}
html[data-theme="clarity"] .tiles-grid .tile-ic svg{width:28px;height:28px;stroke:var(--navy);
  stroke-width:1.6;color:var(--navy)}
html[data-theme="clarity"] .tiles-grid .tile-label{font-size:.68rem;font-weight:700;color:var(--navy);line-height:1.3}
/* Count badge in the tile's outer top corner: pending approvals on Insurance,
   new records on Medical. Shown only once a real count arrived (.on). */
html[data-theme="clarity"] .tiles-grid .tile{position:relative}
html[data-theme="clarity"] .tile-badge.on{display:flex;position:absolute;top:-6px;inset-inline-end:-4px;
  min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--navy);
  color:#fff;font-size:.7rem;font-weight:800;line-height:1;align-items:center;
  justify-content:center;border:2px solid #fff;box-shadow:0 4px 10px rgba(22,55,92,.3);
  direction:ltr;z-index:1}
/* The reference order: book, insurance, medical record, appointments /
   doctors, glasses Rx, service request, due orders / the rest */
html[data-theme="clarity"] .tiles-grid .tile[data-tab="insurance"]{order:2}
html[data-theme="clarity"] .tiles-grid .tile[data-tab="medical"]{order:3}
html[data-theme="clarity"] .tiles-grid .tile[data-tab="appointments"]{order:4}
html[data-theme="clarity"] .tiles-grid .tile[data-tab="specialties"]{order:5}
html[data-theme="clarity"] .tiles-grid .tile[data-tab="glasses"]{order:6}
html[data-theme="clarity"] .tiles-grid .tile[data-tab="tickets"]{order:7}
html[data-theme="clarity"] .tiles-grid .tile[data-tab="pending-orders"]{order:8}
html[data-theme="clarity"] .tiles-grid .tile[data-tab="invoices"]{order:9}
html[data-theme="clarity"] .tiles-grid .tile[data-tab="sick-leave"]{order:10}
html[data-theme="clarity"] .tiles-grid .tile[data-tab="rate-visit"]{order:11}
html[data-theme="clarity"] .tiles-grid .tile[data-tab="ai-assistant"]{order:12}
html[data-theme="clarity"] .tiles-grid .tile.tile-book{display:flex;order:1;background:var(--navy);
  box-shadow:0 10px 22px rgba(22,55,92,.30)}
html[data-theme="clarity"] .tiles-grid .tile.tile-book:active{background:var(--navy2)}
html[data-theme="clarity"] .tiles-grid .tile.tile-book .tile-ic svg{stroke:#fff;color:#fff}
html[data-theme="clarity"] .tiles-grid .tile.tile-book .tile-label{color:#fff}
/* Row tiles (Medical Records / Services menus): white cards, pale icon box */
html[data-theme="clarity"] .tile-row{background:#fff;border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);padding:14px 16px}
html[data-theme="clarity"] .tile-row .tile-ic{width:44px;height:44px;border-radius:12px;background:var(--tile-bg)}
html[data-theme="clarity"] .tile-row .tile-ic svg{stroke:var(--navy);color:var(--navy)}
html[data-theme="clarity"] .tile-row .tile-label{color:var(--navy);font-weight:700}

/* "Our clinics" rail */
html[data-theme="clarity"] .cl-clinics.has-items{display:block}
html[data-theme="clarity"] .cl-clinics-rail{gap:10px;padding:2px 16px 10px}
html[data-theme="clarity"] .cl-clinic{flex:0 0 auto;width:98px;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;
  gap:8px;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s;
  touch-action:manipulation;-webkit-user-select:none;user-select:none}
html[data-theme="clarity"] .cl-clinic:active{transform:scale(.95)}
html[data-theme="clarity"] .cl-clinic-ic{width:42px;height:42px;border-radius:50%;background:var(--tile-bg);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
html[data-theme="clarity"] .cl-clinic-ic svg{width:22px;height:22px;stroke:var(--navy);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
html[data-theme="clarity"] .cl-clinic-name{font-size:.66rem;font-weight:700;color:var(--navy);text-align:center;
  line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere}

/* Banners: an inset rounded card; a page with no banner shows nothing here
   rather than the placeholder eye (the hero above already carries one) */
html[data-theme="clarity"] .banner-wrap{width:auto;margin:6px 16px;border-radius:20px;
  background:transparent;box-shadow:var(--shadow)}
html[data-theme="clarity"] .banner-slide{width:100%}
html[data-theme="clarity"] .banner-wrap:has(.banner-slide-placeholder){display:none}

/* Tabs → segmented control, navy active */
html[data-theme="clarity"] .appt-tabs{background:var(--tile-bg);margin:12px 16px 8px;padding:4px;
  border-radius:14px;gap:4px}
html[data-theme="clarity"] .appt-tab{border:none;background:transparent;border-radius:10px;padding:9px;color:var(--muted)}
html[data-theme="clarity"] .appt-tab.active{background:var(--navy);border:none;color:#fff;
  box-shadow:0 4px 10px rgba(22,55,92,.22)}

/* Cards everywhere: white, hairline border, soft depth, 18px radius */
html[data-theme="clarity"] .appt-card,html[data-theme="clarity"] .invoice-card,
html[data-theme="clarity"] .inv-detail-summary,html[data-theme="clarity"] .doctor-card,
html[data-theme="clarity"] .doctor-info-card,html[data-theme="clarity"] .date-card,
html[data-theme="clarity"] .cal-card,html[data-theme="clarity"] .ins-card,
html[data-theme="clarity"] .ticket-form-card,html[data-theme="clarity"] .my-ticket-card,
html[data-theme="clarity"] .home-booking-card,html[data-theme="clarity"] .advice-card,
html[data-theme="clarity"] .advice-tile,html[data-theme="clarity"] .advice-item,
html[data-theme="clarity"] .spec-card,html[data-theme="clarity"] .offer-card,
html[data-theme="clarity"] .rv-card,html[data-theme="clarity"] .rv-q,
html[data-theme="clarity"] .gp-visit-card,html[data-theme="clarity"] .notif-row,
html[data-theme="clarity"] .theme-card,html[data-theme="clarity"] .pinv-cat-tile,
html[data-theme="clarity"] .pinv-img-card{border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow)}
html[data-theme="clarity"] .queue-card{border-block-color:var(--border);
  border-inline-end-color:var(--border);box-shadow:var(--shadow)}
html[data-theme="clarity"] .slot-chip{background:#fff;border-color:var(--border)}
html[data-theme="clarity"] .theme-card.current{border-color:var(--navy);
  box-shadow:0 0 0 2px var(--navy),var(--shadow)}
html[data-theme="clarity"] .spec-cover--none{background:var(--tile-bg)}
html[data-theme="clarity"] .doctor-badge,html[data-theme="clarity"] .mt-new{background:var(--tile-bg);color:var(--navy)}
html[data-theme="clarity"] .ai-bubble-bot{border-color:var(--border)}
html[data-theme="clarity"] .ai-chip{border-color:var(--border);color:var(--navy);background:var(--tile-bg)}
html[data-theme="clarity"] .coming-soon-icon{background:var(--tile-bg)}

/* More menu → one grouped white card, pale square icon chips */
html[data-theme="clarity"] .more-list{background:#fff;border:1px solid var(--border);border-radius:20px;
  margin:12px 16px;padding:6px;box-shadow:var(--shadow);gap:0}
html[data-theme="clarity"] .more-item{background:transparent;border-radius:14px}
html[data-theme="clarity"] .more-item:hover,html[data-theme="clarity"] .more-item:active{background:var(--tile-bg)}
html[data-theme="clarity"] .more-item-icon{width:36px;height:36px;border-radius:12px;background:var(--tile-bg)}
html[data-theme="clarity"] .more-item-icon svg{stroke:var(--navy)}
html[data-theme="clarity"] .more-item-label{color:var(--navy)}
html[data-theme="clarity"] .more-divider{margin:6px 12px}

/* Sheets: taller radius + grabber; toast pill */
html[data-theme="clarity"] .pp-sheet{border-radius:28px 28px 0 0;padding-top:12px}
html[data-theme="clarity"] .pp-sheet::before{content:"";display:block;width:44px;height:5px;
  border-radius:3px;background:#E3EAF1;margin:0 auto 14px}
html[data-theme="clarity"] .pp-sheet-title{color:var(--navy);font-weight:800}
html[data-theme="clarity"] #pp-toast{border-radius:999px}

/* Bottom nav → white bar with rounded top corners, navy active tab with a
   teal dot under the label, the centre button a raised teal disc */
html[data-theme="clarity"] #pp-bottom-nav{height:var(--bottom-nav-h);background:#fff;border-top:none;
  border-radius:26px 26px 0 0;box-shadow:0 -8px 26px rgba(22,55,92,.12);padding:0 6px}
html[data-theme="clarity"] .nav-tab{padding:12px 0 10px;gap:4px}
html[data-theme="clarity"] .nav-tab.active{color:var(--navy)}
html[data-theme="clarity"] .nav-tab.active svg{stroke:var(--navy)}
html[data-theme="clarity"] .nav-tab-label{font-size:.72rem;font-weight:700}
html[data-theme="clarity"] .nav-active-dot{top:auto;bottom:5px;width:5px;height:5px;background:var(--cl-teal)}
html[data-theme="clarity"] #nav-home{padding-bottom:10px}
html[data-theme="clarity"] .nav-fab,html[data-theme="clarity"] #nav-home.active .nav-fab{
  top:-26px;width:58px;height:58px;background:var(--cl-teal);border:4px solid #fff;
  box-shadow:0 10px 22px rgba(34,167,154,.45)}
html[data-theme="clarity"] .nav-fab svg{width:26px;height:26px}

/* ── Desktop: the phone composition, centred and widened, not stretched ── */
@media (min-width:900px){
  html[data-theme="clarity"] #pp-header,html[data-theme="clarity"] #pp-patient-bar,
  html[data-theme="clarity"] #pp-content>.pp-view{width:100%;max-width:1080px;margin-left:auto;margin-right:auto}
  html[data-theme="clarity"] .tiles-grid{grid-template-columns:repeat(6,1fr);gap:12px}
  html[data-theme="clarity"] .tiles-grid .tile-label{font-size:.76rem}
  html[data-theme="clarity"] .cl-hero{padding:28px 30px}
  html[data-theme="clarity"] .cl-hero-title{font-size:1.5rem}
  html[data-theme="clarity"] .cl-hero-sub{font-size:.9rem}
  html[data-theme="clarity"] .cl-hero-art{flex-basis:160px;width:160px;height:160px}
  html[data-theme="clarity"] .cl-clinic{width:124px}
  html[data-theme="clarity"] #pp-bottom-nav{width:100%;max-width:640px;margin:0 auto 12px;
    border-radius:26px;box-shadow:0 12px 30px rgba(22,55,92,.16)}
}

/* ── Arabic takes no letter-spacing ─────────────────────────────────────────
   ⚠️ Safari APPLIES `letter-spacing` to Arabic; Chromium quietly ignores it for
   cursive scripts. So every tracked or tightened label in this file pulled its
   letters apart (or squeezed them together) on an iPhone, breaking the joins
   so the words look spaced out and the font looks wrong, while every Chromium
   check and every Android phone drew it perfectly. Tracking is a Latin device;
   Arabic words are joined and must stay joined. Same fix as staff_portal's
   staff.css, reported 2026-09-25 from an iPhone.
   `!important` because the tracking is set per component (and inline in a few
   server-built pages), and this has to beat all of them, including any added
   later. The exceptions below hold DIGITS, codes or symbols, never Arabic
   words, and keep the spacing they were given. */
:root[lang="ar"] body,
:root[lang="ar"] body *,
/* ::before / ::after are not matched by `*` and can carry their own tracking and
   Arabic `content` (the Saudi theme's «دام عزك يا وطن» banner did). */
:root[lang="ar"] body *::before,
:root[lang="ar"] body *::after { letter-spacing: 0 !important; }
/* the queue ticket code (A012). NOT .more-version: it reads «الإصدار 1.18.0» */
:root[lang="ar"] .queue-ticket { letter-spacing: .02em !important; }

/* ── Patient-experience fixes (2026-10-16) ─────────────────────────────── */
/* An error is read, not flashed: it wraps, stays, and closes on a tap. */
/* At the TOP: at the bottom it sat over the confirm bar and the time slots, so
   the patient's next tap closed the message instead of confirming. */
#pp-toast.err{top:calc(var(--safe-top) + 10px);bottom:auto;
  white-space:normal;pointer-events:auto;cursor:pointer;
  background:var(--red);border-radius:14px;padding:12px 44px 12px 16px;
  font-size:.9rem;line-height:1.55;text-align:start;width:max-content;max-width:min(92vw,460px)}
[dir="rtl"] #pp-toast.err{padding:12px 16px 12px 44px}
html[data-theme] #pp-toast.err{border-radius:14px}
#pp-toast .pp-toast-x{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:6px;
  width:36px;height:36px;border:none;background:transparent;color:#fff;font-size:1rem;cursor:pointer}

/* Change time: the same box as Cancel, in the calm colour. */
.appt-change-btn{flex-shrink:0;background:var(--blue-lt);color:var(--text);
  border:1.5px solid var(--blue);border-radius:10px;padding:8px 12px;
  font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit}
.appt-change-btn:active{transform:scale(.95)}
.appt-change-btn:disabled{opacity:.5;cursor:default}
.pp-resched-banner{margin:12px 16px 0;padding:12px 14px;border-radius:12px;
  background:var(--blue-lt);color:var(--text);border:1.5px solid var(--blue);font-size:.88rem;line-height:1.6;font-weight:600}

/* Scoped to #pp-sheet: the template's own panels (switcher, theme picker,
   notifications…) share the .pp-sheet class and must look as they always did. */
/* The sheet: cancel question and booking confirmation. */
.pp-sheet-wrap{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-end;justify-content:center}
.pp-sheet-back{position:absolute;inset:0;background:rgba(6,20,30,.5)}
#pp-sheet .pp-sheet{position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;
  background:var(--card);color:var(--text);border-radius:20px 20px 0 0;
  padding:22px 18px calc(18px + var(--safe-bot, 0px));display:flex;flex-direction:column;gap:12px;
  box-shadow:0 -10px 30px rgba(0,0,0,.18)}
#pp-sheet .pp-sheet.pp-sheet-full{min-height:70vh}
html.pp-sheet-open{overflow:hidden}
#pp-sheet .pp-sheet-title{font-size:1.15rem;font-weight:800;text-align:center;line-height:1.5;margin:0}
.pp-sheet-appt{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:14px;text-align:center}
.pp-sheet-doc{font-weight:800;font-size:1rem}
.pp-sheet-sub{color:var(--muted);font-size:.85rem;margin-top:2px}
.pp-sheet-when{font-weight:700;font-size:.95rem;margin-top:8px}
.pp-sheet-note{color:var(--text);font-size:.85rem;text-align:center}
#pp-sheet .form-btn{min-height:48px;font-size:1rem}
.pp-sheet-danger,.pp-sheet-secondary{width:100%;min-height:48px;border-radius:12px;font-family:inherit;
  font-size:.95rem;font-weight:700;cursor:pointer;padding:12px}
.pp-sheet-danger{background:transparent;color:var(--red);border:1.5px solid var(--red)}
.pp-sheet-secondary{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.pp-sheet-danger:disabled{opacity:.5}
.pp-booked-tick{width:64px;height:64px;margin:4px auto 0;border-radius:50%;background:var(--green);
  color:#fff;font-size:2rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.pp-booked-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:6px 14px}
.pp-booked-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--border);font-size:.95rem}
.pp-booked-row:last-child{border-bottom:none}
.pp-booked-row span{color:var(--text);opacity:.82}
.pp-booked-row b{text-align:end}
.pp-booked-row i{color:var(--muted);font-style:normal;font-size:.85rem;text-align:end;flex:1}
.pp-booked-old{text-align:center;color:var(--muted);font-size:.88rem}
.pp-booked-warn{background:var(--card);color:var(--red);border:1.5px solid var(--red);border-radius:12px;padding:12px 14px;
  font-size:.9rem;line-height:1.6;font-weight:600}
.pp-booked-tips{border:1px solid var(--border);border-radius:14px;padding:12px 14px;font-size:.9rem;line-height:1.7}
.pp-booked-tips-title{font-weight:800;margin-bottom:4px}
.pp-booked-tips ul{margin:0;padding-inline-start:18px}
/* "Could not be shown" is not "no appointments": the reason, then Retry. */
.appt-failed{display:flex;flex-direction:column;align-items:center;gap:14px;line-height:1.6}
.appt-failed .appt-retry-btn{width:auto;min-width:160px;min-height:44px;padding:10px 22px}
/* Item 12: where an amount due can be paid while online payment is off. */
.pp-pay-note{margin:0 16px 12px;padding:12px 14px;border-radius:12px;background:var(--card);
  border:1.5px solid var(--blue);color:var(--text);font-size:.9rem;line-height:1.6;font-weight:600}
/* Item 10: a full doctor offers the same specialty's doctors who have room. */
.pp-full{font-weight:700;color:var(--text)}
#pp-full-alts{display:flex;flex-direction:column;gap:10px;padding:0 16px 16px}
.pp-full-title{font-weight:800;font-size:.95rem;color:var(--text);margin-top:4px}
.pp-full-looking{color:var(--text);font-size:.9rem;text-align:center;padding:8px 0}
.pp-full-first{color:var(--text);font-size:.85rem;margin-top:4px;font-weight:600}
.pp-full-contact{margin-top:4px}
/* Item 9: our own question before the phone's one-shot notification prompt. */
#pp-sheet .pp-notif-bell{background:var(--blue-lt);font-size:1.8rem}
#pp-sheet .pp-notif-body{font-size:.95rem;line-height:1.7}
#pp-notif-off-hint{margin-bottom:12px}
/* Item 7: a file under another number. */
.reg-offer-other{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.reg-offer-other .reg-note{color:var(--text)}
/* The returning patient's door sits above "Register now" now: a rule under it, not over it. */
.reg-offer-other.reg-offer-first{margin:4px 0 14px;padding:0 0 12px;border-top:0;border-bottom:1px solid var(--border)}
.pp-del-fix{margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--border)}
.pp-del-fix .reg-note{color:var(--text);margin:0 0 8px}
#pp-sheet .pp-input{width:100%;box-sizing:border-box}
.pp-link-contact{display:flex;gap:10px}
.pp-link-contact .pp-sheet-secondary{flex:1}
/* Item 8: readable by default, and a text-size choice. The smallest labels
   (10–11px) are raised to ~12px; faint grey text that carries meaning uses the
   muted colour instead; the appointment buttons become finger-sized. */
.cal-wd{font-size:.72rem}
.queue-updated{font-size:.74rem;color:var(--muted)}
.pinv-img-date,.rv-done-on,.theme-default-tag{font-size:.74rem}
.ai-disclaimer{font-size:.72rem}
.more-version{color:var(--muted)}
html[data-theme="clarity"] .tiles-grid .tile-label{font-size:.74rem}
html[data-theme="clarity"] .cl-clinic-name{font-size:.72rem}
.appt-cancel-btn,.appt-change-btn,.appt-pay-btn{min-height:44px;font-size:.8rem}
.pp-ts-row{display:flex;gap:10px}
.pp-ts-opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:84px;
  border:2px solid var(--border);border-radius:14px;background:var(--card);color:var(--text);
  font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;padding:10px 6px}
.pp-ts-opt.on{border-color:var(--blue);background:var(--blue-lt)}
.pp-ts-a{font-weight:800;line-height:1}
.pp-ts-sample{border:1px dashed var(--border);border-radius:12px;padding:12px;text-align:center;
  color:var(--text);line-height:1.6}
/* Larger text: names wrap instead of being cut to "…" — a larger font that
   hides the doctor's name defeats the point. */
html:is([data-text-size="large"],[data-text-size="xl"]) :is(.appt-doctor,.doctor-name,.pbar-name){
  white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
/* Item 12 (review): the note on the first screen, the total, a call button; the
   visit total says it is before VAT; the fee on the appointment day. */
.pp-pay-note{display:flex;flex-direction:column;gap:8px}
.pp-pay-total{font-weight:800;font-size:1rem}
.pp-pay-call{align-self:flex-start;width:auto;min-height:44px;padding:8px 16px}
.pp-before-vat{font-size:.72rem;font-weight:600;color:var(--muted);text-align:end}
.pp-fee-note{display:block;max-width:120px;font-size:.78rem;font-weight:700;color:var(--text);
  line-height:1.4;text-align:center}

/* Review of item 8 (2026-10-17). .mt-subject keeps its two-line clamp (letting it
   overflow drew a third line over the specialty). The bottom navigation does not
   grow with the text size: at Large/Extra large "More" ran off the screen in
   English and "Medical Record" wrapped inside the fixed 64px bar. */
.nav-tab-label{max-width:100%;line-height:1.15;text-align:center}
/* The bar has a fifth of the phone per tab: its labels keep their normal size at
   Large / Extra large (the icons carry the meaning) — grown, "Appointments" broke
   inside the word. Normal sizes, in px so the root size does not move them. */
html:is([data-text-size="large"],[data-text-size="xl"]) .nav-tab-label{font-size:13.1px}
html[data-theme="clarity"]:is([data-text-size="large"],[data-text-size="xl"]) .nav-tab-label{font-size:11.5px}
/* Contrast: text that carried meaning sat at 2.4–3.4:1. */
.cal-day.open{color:var(--text)}
.doctor-badge,.ins-badge{font-size:.78rem}
.ins-badge.ins-approved,.ins-badge.ins-pending{color:var(--text)}
.hdr-lang,.login-lang{color:var(--text)}
.login-legal-link{color:var(--text);text-decoration:underline}
html[data-theme="classic"] :is(.form-btn,.pp-btn-primary,.book-appt-btn){background:#047A93}
html[data-theme="classic"]{--nav-inactive:#6B7280}
/* Finger-sized targets (44px): back, calendar arrows, language and size pills,
   time chips, appointment tabs. */
.back-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.cal-nav{width:44px;height:44px}
.hdr-lang,.login-lang{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.slot-chip,.appt-tab{min-height:44px}
.login-legal-link{padding:12px 4px}
.login-ts{left:auto;right:16px;font-weight:800}
/* Item 9 (review): the weekly card on Home, and "turn on" in Notifications. */
.pp-notif-nudge{margin:12px 16px 0;padding:12px 14px;border-radius:12px;background:var(--card);
  border:1.5px solid var(--red);color:var(--text);font-size:.88rem;line-height:1.6;display:flex;flex-direction:column;gap:8px}
.pp-notif-nudge .pp-sheet-secondary{align-self:flex-end;width:auto;min-height:40px;padding:6px 16px}
.pp-notif-turn-on{margin-bottom:12px}
.pp-full-looking{display:flex;align-items:center;justify-content:center;gap:10px}
.pp-full-spin{width:20px;height:20px;border-width:2px}
/* A weekday name has a seventh of the phone: at Extra large it keeps a size
   that fits ("خميس" was cut at 320px); the days themselves still grow. */
html[data-text-size="xl"] .cal-wd{font-size:11.5px}

/* Check-in from the app (2026-10-21): a full-width row under today's paid appointment. */
.appt-card.has-checkin{flex-wrap:wrap}
.appt-card.has-checkin .pp-ci-slot{flex-basis:100%}
.pp-ci-slot:empty{display:none}
.pp-checkin{border-radius:12px;padding:10px 12px;font-size:.84rem;line-height:1.55;
  border:1.5px solid var(--border);background:var(--blue-lt);color:var(--text)}
.home-booking-card .pp-checkin{margin-top:10px}
.pp-checkin .pp-ci-main{font-weight:700}
.pp-checkin .pp-ci-sub{margin-top:2px;color:var(--text);opacity:.85}
.pp-ci-early{background:var(--blue-lt);border-color:var(--blue)}
.pp-ci-open{background:var(--green-lt);border-color:var(--green)}
.pp-ci-working,.pp-ci-wait{background:var(--card)}
.pp-ci-queued{background:var(--green-lt);border-color:var(--green);color:var(--text)}
.pp-ci-reception{background:var(--amber-lt);border-color:var(--amber)}
/* A fixed dark green, not var(--green): white on the lighter greens of the noor/saudi/clarity/midnight
   themes reads at 1.9–2.6:1. #15803D is 5:1 with white in every theme. */
.pp-ci-btn{display:block;width:100%;margin-top:8px;background:#15803D;color:#fff;
  border:1.5px solid #15803D;border-radius:10px;padding:11px 12px;font-size:.92rem;
  font-weight:800;cursor:pointer;font-family:inherit;min-height:44px}
.pp-ci-btn:active{transform:scale(.97)}
.pp-ci-btn:disabled{opacity:.6;cursor:default}
.pp-ci-compact{font-size:.8rem;padding:8px 10px}
.pp-ci-done{background:var(--card)}