/* ============================================================
   WooPatient — Patient Portal (re-skinned to maxillo design)
   builds on system.css · glossy glass · RTL
   CANONICAL FILE — assets/css/patient-portal.css
   Do NOT build with Tailwind. Restore from doki/woopatient if broken.
   ============================================================ */

/* full-page wrappers should not constrain the grid */
.woopatient-portal-shell,
.woopatient-portal{ width:100%; max-width:none; margin:0; padding:0; }

/* ---------- PORTAL SHELL ---------- */
.portal{ display:grid; grid-template-columns:276px 1fr; min-height:100vh; }

/* ---------- SIDEBAR ---------- */
.sidebar{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:24px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34));
  backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-inline-start:1px solid rgba(255,255,255,.7); box-shadow:var(--glossy);
}
.side-brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 22px; font-family:var(--font-display); font-weight:900; font-size:1.18rem; }
.side-brand .mark{ width:34px;height:34px;border-radius:10px; background:var(--ink); color:#fff; display:grid;place-items:center; font-weight:900; box-shadow:0 6px 14px -6px rgba(22,51,94,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.side-brand small{ display:block; font-family:var(--font-mono); font-weight:400; font-size:.56rem; letter-spacing:.12em; color:var(--ink-3); direction:ltr; margin-top:2px; }
.side-label{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); padding:14px 12px 8px; direction:ltr; }
.side-nav{ display:flex; flex-direction:column; gap:4px; }
.side-nav a{ display:flex; align-items:center; gap:13px; padding:11px 13px; border-radius:13px; color:var(--ink-2); font-weight:600; font-size:.95rem; transition:background .25s, color .25s, transform .25s var(--ease); }
.side-nav a svg{ width:20px;height:20px; flex:none; stroke-width:1.9; }
.side-nav a .badge{ margin-inline-start:auto; background:var(--green); color:#fff; font-family:var(--font-mono); font-size:.66rem; min-width:20px; height:20px; border-radius:999px; display:grid; place-items:center; padding:0 6px; }
.side-nav a:hover{ background:rgba(255,255,255,.55); color:var(--ink); }
.side-nav a.active{ background:var(--ink); color:#fff; box-shadow:0 10px 22px -12px rgba(22,51,94,.6); }
.side-nav a.active .badge{ background:var(--green); }
.side-foot{ margin-top:auto; }
.side-card{ border-radius:16px; padding:14px; background:rgba(52,196,91,.1); border:1px solid rgba(52,196,91,.28); }
.side-card p{ margin:0; font-size:.82rem; color:var(--ink-2); line-height:1.55; }
.side-card .btn{ margin-top:12px; width:100%; justify-content:center; }
.side-user{ display:flex; align-items:center; gap:11px; margin-top:16px; padding:10px; border-radius:14px; transition:background .25s; border:0; background:transparent; width:100%; text-align:start; }
.side-user:hover{ background:rgba(255,255,255,.5); }
.side-user .av{ width:40px;height:40px;border-radius:50%; background:linear-gradient(135deg,#cfe0f5,#a9c6ea); display:grid;place-items:center; font-weight:800; color:var(--ink); flex:none; }
.side-user .nm{ font-weight:700; font-size:.9rem; display:block; }
.side-user .rl{ font-size:.74rem; color:var(--ink-3); display:block; }
.side-user .out{ margin-inline-start:auto; color:var(--ink-3); display:flex; }
.side-user:hover .out{ color:var(--green-d); }

/* ---------- MAIN ---------- */
.main{ display:flex; flex-direction:column; min-width:0; }
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:20px;
  padding:18px clamp(20px,3.5vw,46px); min-height:80px;
  background:rgba(255,255,255,.5); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.6);
}
.topbar h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(1.3rem,2.4vw,1.85rem); margin:0; letter-spacing:-.02em; }
.topbar .crumb{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; direction:ltr; margin-bottom:4px; }
.topbar__right{ margin-inline-start:auto; display:flex; align-items:center; gap:12px; }
.topbar__right form{ margin:0; }
.icon-btn{
  width:44px;height:44px;border-radius:13px; border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.55); backdrop-filter:blur(8px);
  display:grid;place-items:center; color:var(--ink); position:relative; box-shadow:var(--glossy); transition:all .25s var(--ease);
}
.icon-btn:hover{ background:#fff; transform:translateY(-2px); }
.icon-btn .ndot{ position:absolute; top:9px; left:11px; width:9px;height:9px;border-radius:50%; background:var(--green); border:2px solid #fff; }
.content{ padding:clamp(20px,3.2vw,40px); flex:1; }
.content > * + *{ margin-top:20px; }

/* ---------- PORTAL CARDS ---------- */
.pcard{
  position:relative;
  background:linear-gradient(155deg, rgba(255,255,255,.74), rgba(255,255,255,.4));
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.8); border-radius:var(--radius);
  box-shadow:var(--glossy), 0 16px 40px -30px rgba(22,51,94,.4); padding:22px 24px;
}
.pcard--navy{ background:linear-gradient(150deg,#1c3e6e,#122c52); color:var(--cream); border-color:rgba(255,255,255,.1); overflow:hidden; }
.pcard--navy::before{ content:""; position:absolute; inset:0; background:radial-gradient(500px 320px at 88% -30%, rgba(52,196,91,.32), transparent 60%); pointer-events:none; }
.pcard--navy > *{ position:relative; z-index:1; }
.pcard__head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.pcard__title{ font-family:var(--font-display); font-weight:800; font-size:1.12rem; display:flex; align-items:center; gap:9px; }
.pcard__title .ti{ width:30px;height:30px;border-radius:9px; background:rgba(52,196,91,.16); color:var(--green-d); display:grid;place-items:center; }
.pcard--navy .pcard__title .ti{ background:rgba(255,255,255,.12); color:var(--green); }
.label-mono{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); direction:ltr; }

/* mini stat */
.kpi{ display:flex; flex-direction:column; gap:6px; }
.kpi .v{ font-family:var(--font-display); font-weight:900; font-size:2rem; line-height:1; letter-spacing:-.02em; }
.kpi .v .u{ color:var(--green); font-size:.6em; }
.kpi .k{ font-size:.84rem; color:var(--ink-3); }

/* progress bar */
.bar{ height:8px; border-radius:999px; background:rgba(22,51,94,.1); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--green),#5fd884); }

/* pill status */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:.32em .8em; border-radius:999px; font-size:.76rem; font-weight:600; }
.pill.ok{ background:rgba(52,196,91,.15); color:var(--green-d); }
.pill.wait{ background:rgba(214,158,46,.15); color:#9a6b12; }
.pill.done{ background:rgba(22,51,94,.1); color:var(--ink-2); }
.pill::before{ content:""; width:6px;height:6px;border-radius:50%; background:currentColor; }

/* ---------- RECOVERY TIMELINE ---------- */
.timeline{ display:flex; gap:0; position:relative; }
.tl-step{ flex:1; position:relative; padding-top:34px; text-align:center; }
.tl-step::before{ content:""; position:absolute; top:11px; right:50%; left:-50%; height:3px; background:rgba(22,51,94,.12); }
.tl-step:first-child::before{ display:none; }
.tl-step .dot{ position:absolute; top:3px; right:50%; transform:translateX(50%); width:18px;height:18px;border-radius:50%; background:#fff; border:3px solid rgba(22,51,94,.18); z-index:2; }
.tl-step.done .dot{ background:var(--green); border-color:var(--green); }
.tl-step.done::before{ background:var(--green); }
.tl-step.now .dot{ background:#fff; border-color:var(--green); box-shadow:0 0 0 5px rgba(52,196,91,.2); }
.tl-step.now::before{ background:linear-gradient(90deg,rgba(22,51,94,.12),var(--green)); }
.tl-step .tt{ font-weight:700; font-size:.82rem; }
.tl-step .ts{ font-size:.7rem; color:var(--ink-3); margin-top:3px; }
@media(max-width:640px){ .timeline{ flex-direction:column; gap:18px; } .tl-step{ padding:0 0 0 32px; text-align:right; } .tl-step::before{ top:-18px; right:auto; left:auto; width:3px; height:36px; inset-inline-start:8px; } .tl-step .dot{ top:0; right:auto; inset-inline-start:0; transform:none; } }

/* ---------- LIST ROWS ---------- */
.rows{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; gap:16px; padding:16px 6px; border-bottom:1px solid var(--line-soft); transition:background .2s; }
.row:last-child{ border-bottom:0; }
.row:hover{ background:rgba(255,255,255,.4); border-radius:12px; }
.row__ic{ width:46px;height:46px;border-radius:13px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.8); display:grid;place-items:center; color:var(--ink); flex:none; }
.row__main{ min-width:0; flex:1; }
.row__t{ font-weight:700; font-size:.98rem; }
.row__s{ font-size:.82rem; color:var(--ink-3); margin-top:2px; }
.row__meta{ text-align:left; font-size:.82rem; color:var(--ink-2); direction:ltr; }
.row__go{ width:38px;height:38px;border-radius:50%; border:1px solid var(--line); display:grid;place-items:center; color:var(--ink); flex:none; transition:all .25s var(--ease); }
.row__go:hover{ background:var(--green); color:#fff; border-color:var(--green); transform:rotate(-45deg); }

/* ---------- VIDEO CARD ---------- */
.vid{ border-radius:16px; overflow:hidden; position:relative; aspect-ratio:16/10; cursor:pointer; display:block; }
.vid .ph{ position:absolute; inset:0; }
.vid .play{ position:absolute; inset:0; margin:auto; width:54px;height:54px;border-radius:50%; background:rgba(255,255,255,.85); backdrop-filter:blur(6px); display:grid;place-items:center; color:var(--ink); box-shadow:var(--shadow-pop); transition:transform .3s var(--ease); }
.vid:hover .play{ transform:scale(1.12); }
.vid .vlab{ position:absolute; inset-inline:12px; bottom:12px; z-index:2; color:#fff; font-weight:700; font-size:.92rem; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.vid .vtime{ position:absolute; top:12px; inset-inline-start:12px; z-index:2; background:rgba(0,0,0,.5); color:#fff; font-family:var(--font-mono); font-size:.68rem; padding:.2em .6em; border-radius:999px; direction:ltr; }

/* ---------- CHAT / TICKETS ---------- */
.chat-wrap{ display:grid; grid-template-columns:320px 1fr; gap:20px; }
@media(max-width:880px){ .chat-wrap{ grid-template-columns:1fr; } }
.ticket-list{ overflow:auto; display:flex; flex-direction:column; gap:8px; padding:8px; }
.ticket{ display:flex; gap:12px; padding:14px; border-radius:14px; cursor:pointer; transition:background .2s; border:1px solid transparent; text-align:start; }
.ticket:hover{ background:rgba(255,255,255,.5); }
.ticket.active{ background:rgba(255,255,255,.7); border-color:rgba(255,255,255,.9); box-shadow:var(--glossy); }
.ticket .tav{ width:42px;height:42px;border-radius:12px; flex:none; display:grid;place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,#1c3e6e,#2c5896); }
.ticket__t{ font-weight:700; font-size:.92rem; }
.ticket__p{ font-size:.8rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.ticket__time{ margin-inline-start:auto; font-size:.68rem; color:var(--ink-3); font-family:var(--font-mono); direction:ltr; }
.thread{ display:flex; flex-direction:column; min-height:0; }
.thread__head{ display:flex; align-items:center; gap:13px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); margin-bottom:10px; }
.thread__head .av{ width:46px;height:46px;border-radius:13px; background:linear-gradient(135deg,#1c3e6e,#2c5896); color:#fff; display:grid;place-items:center; font-weight:800; flex:none; }
.thread__body{ flex:1; overflow:auto; display:flex; flex-direction:column; gap:14px; padding:14px 4px; }
.msg{ max-width:74%; padding:13px 16px; border-radius:18px; font-size:.92rem; line-height:1.6; }
.msg .mt{ font-size:.66rem; opacity:.6; margin-top:6px; font-family:var(--font-mono); direction:ltr; }
.msg.them{ align-self:flex-start; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.85); border-bottom-right-radius:6px; }
.msg.me{ align-self:flex-end; background:var(--ink); color:var(--cream); border-bottom-left-radius:6px; }
.daystamp{ align-self:center; font-family:var(--font-mono); font-size:.66rem; color:var(--ink-3); background:rgba(255,255,255,.5); padding:.3em .8em; border-radius:999px; direction:ltr; }
.online{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; color:var(--green-d); }
.online::before{ content:""; width:7px;height:7px;border-radius:50%; background:var(--green); }
.composer{ display:flex; gap:10px; align-items:center; padding-top:14px; border-top:1px solid var(--line-soft); }
.composer textarea, .composer input{ flex:1; border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.6); border-radius:20px; padding:13px 18px; font-family:inherit; font-size:.95rem; color:var(--ink); outline:none; resize:none; }
.composer textarea:focus, .composer input:focus{ border-color:var(--green); box-shadow:0 0 0 4px rgba(52,196,91,.15); }
.composer .send{ width:48px;height:48px;border-radius:50%; background:var(--ink); color:#fff; border:0; display:grid;place-items:center; flex:none; box-shadow:0 10px 22px -10px rgba(22,51,94,.6); transition:transform .25s var(--ease); }
.composer .send:hover{ transform:scale(1.06) rotate(-8deg); }

/* responsive sidebar -> icon rail */
@media(max-width:980px){
  .portal{ grid-template-columns:78px 1fr; }
  .sidebar{ padding:18px 10px; }
  .side-brand span:not(.mark), .side-brand small, .side-nav a span:not(.badge), .side-label, .side-card, .side-user .nm, .side-user .rl{ display:none; }
  .side-brand{ justify-content:center; }
  .side-nav a{ justify-content:center; padding:13px; position:relative; }
  .side-nav a .badge{ position:absolute; margin:0; transform:translate(-10px,-12px); }
  .side-user{ justify-content:center; }
  .side-user .out{ display:none; }
}
@media(max-width:560px){
  .portal{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; bottom:0; top:auto; left:0; right:0; height:auto; width:100%; flex-direction:row; align-items:center; padding:8px; z-index:80; border:0; border-top:1px solid rgba(255,255,255,.7); }
  .side-brand, .side-label, .side-foot{ display:none; }
  .side-nav{ flex-direction:row; flex:1; justify-content:space-around; }
  .main{ padding-bottom:80px; }
}

/* ======================= DASHBOARD ======================= */
.dash{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.dash > *{ margin-top:0; }
.dash .span2{ grid-column:span 2; } .dash .span3{ grid-column:span 3; }
@media(max-width:980px){ .dash{ grid-template-columns:repeat(2,1fr); } .dash .span2,.dash .span3{ grid-column:span 2; } }
@media(max-width:620px){ .dash{ grid-template-columns:1fr; } .dash .span2,.dash .span3{ grid-column:span 1; } }
.welcome{ display:flex; flex-direction:column; gap:18px; min-height:210px; }
.welcome .big{ font-family:var(--font-display); font-weight:900; font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:1.1; letter-spacing:-.02em; }
.welcome .meta{ display:flex; gap:8px; flex-wrap:wrap; }
.welcome .prog{ margin-top:auto; }
.welcome .prog .lab{ display:flex; justify-content:space-between; font-size:.84rem; color:rgba(238,243,251,.8); margin-bottom:9px; }
.kstack{ display:flex; flex-direction:column; gap:14px; }
.kstack .kpi{ padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.kstack .kpi:last-child{ border:0; padding-bottom:0; }
.vids{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:780px){ .vids{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .vids{ grid-template-columns:1fr; } }
.nutri ul{ list-style:none; margin:0; padding:0; }
.nutri li{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:.94rem; }
.nutri li:last-child{ border:0; }
.nutri .ck{ width:22px;height:22px;border-radius:7px; flex:none; display:grid;place-items:center; background:rgba(52,196,91,.16); color:var(--green-d); }
.nutri .no{ background:rgba(192,57,43,.12); color:#c0392b; }
.appt{ display:flex; flex-direction:column; gap:14px; }
.appt .when{ display:flex; align-items:center; gap:14px; }
.appt .cal{ width:58px;height:62px;border-radius:14px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.85); display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; box-shadow:var(--glossy); }
.appt .cal .d{ font-family:var(--font-display); font-weight:900; font-size:1.5rem; line-height:1; }
.appt .cal .mo{ font-size:.7rem; color:var(--ink-3); }
.msg-prev{ display:flex; gap:13px; align-items:flex-start; padding:14px; border-radius:14px; background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.7); }
.msg-prev .av{ width:42px;height:42px;border-radius:50%; background:linear-gradient(135deg,#1c3e6e,#2c5896); color:#fff; display:grid;place-items:center; font-weight:800; flex:none; }
.aftercare-cta{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.aftercare-cta .big-ic{ width:64px;height:64px;border-radius:18px; background:rgba(52,196,91,.16); color:var(--green-d); display:grid;place-items:center; flex:none; }

/* ======================= RECORD ======================= */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px; }
@media(max-width:860px){ .kpis{ grid-template-columns:1fr 1fr; } }
.tabs{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.tab{ padding:.55em 1.1em; border-radius:999px; border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.5); backdrop-filter:blur(8px); box-shadow:var(--glossy); font-weight:600; font-size:.9rem; color:var(--ink-2); transition:all .25s var(--ease); }
.tab[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.tab .c{ font-family:var(--font-mono); font-size:.72rem; margin-inline-start:6px; color:var(--ink-3); direction:ltr; }
.tab[aria-pressed="true"] .c{ color:var(--tan-2); }
.row.hide{ display:none; }
.docs{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:860px){ .docs{ grid-template-columns:1fr 1fr; } }
.doc{ display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:16px; background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.8); box-shadow:var(--glossy); transition:transform .25s var(--ease); }
.doc:hover{ transform:translateY(-3px); }
.doc .di{ width:44px;height:44px;border-radius:12px; background:rgba(52,196,91,.14); color:var(--green-d); display:grid;place-items:center; }
.doc .dt{ font-weight:700; font-size:.92rem; }
.doc .dm{ font-size:.76rem; color:var(--ink-3); font-family:var(--font-mono); direction:ltr; }
.doc .dl{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; color:var(--green-d); font-weight:700; font-size:.84rem; }
.amount{ font-family:var(--font-display); font-weight:800; }
.two{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start; }
.two > *{ margin-top:0; }
@media(max-width:980px){ .two{ grid-template-columns:1fr; } }

/* ======================= AFTERCARE (CARE) ======================= */
.care{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; }
.care > *{ margin-top:0; }
@media(max-width:980px){ .care{ grid-template-columns:1fr; } }
.stack{ display:flex; flex-direction:column; gap:20px; }
.task{ display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--line-soft); cursor:pointer; position:relative; }
.task:last-child{ border:0; }
.task .box{ width:26px;height:26px;border-radius:9px; border:2px solid var(--line); display:grid;place-items:center; color:transparent; flex:none; transition:all .25s var(--ease); }
.task .tx{ font-size:.96rem; font-weight:500; transition:color .25s, opacity .25s; }
.task .tx small{ display:block; font-weight:400; font-size:.8rem; color:var(--ink-3); }
.task .tm{ margin-inline-start:auto; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-3); direction:ltr; }
.task .toggle{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.task.done .box{ background:var(--green); border-color:var(--green); color:#fff; }
.task.done .tx{ text-decoration:line-through; opacity:.5; }
details.phase{ border:1px solid var(--line-soft); border-radius:16px; margin-bottom:12px; background:rgba(255,255,255,.4); overflow:hidden; }
details.phase[open]{ background:rgba(255,255,255,.6); box-shadow:var(--glossy); }
details.phase summary{ list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:14px; font-weight:700; }
details.phase summary::-webkit-details-marker{ display:none; }
.phase .pn{ width:34px;height:34px;border-radius:10px; background:rgba(22,51,94,.08); display:grid;place-items:center; font-family:var(--font-display); font-weight:900; flex:none; }
.phase.now .pn{ background:var(--green); color:#fff; }
.phase .ps{ font-size:.78rem; color:var(--ink-3); font-weight:500; margin-inline-start:auto; }
.phase .chev{ transition:transform .3s var(--ease); color:var(--ink-3); }
details.phase[open] .chev{ transform:rotate(180deg); }
.phase__body{ padding:0 18px 18px 18px; }
.phase__body ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.phase__body li{ display:flex; gap:10px; font-size:.92rem; color:var(--ink-2); line-height:1.55; }
.phase__body li svg{ flex:none; margin-top:3px; color:var(--green-d); }
.med{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.med:last-child{ border:0; }
.med .mi{ width:42px;height:42px;border-radius:12px; background:rgba(52,196,91,.14); color:var(--green-d); display:grid;place-items:center; flex:none; }
.med .mn{ font-weight:700; font-size:.94rem; } .med .md{ font-size:.8rem; color:var(--ink-3); }
.med .times{ margin-inline-start:auto; display:flex; gap:6px; flex-wrap:wrap; }
.med .times span{ font-family:var(--font-mono); font-size:.68rem; background:rgba(255,255,255,.7); border:1px solid var(--line); padding:.3em .55em; border-radius:8px; direction:ltr; }
.dd{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dd .col h4{ display:flex; align-items:center; gap:8px; font-size:.86rem; margin:0 0 10px; }
.dd .ok-h{ color:var(--green-d); } .dd .no-h{ color:#c0392b; }
.dd ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.dd li{ font-size:.86rem; color:var(--ink-2); display:flex; gap:7px; line-height:1.5; }
.dd li svg{ flex:none; margin-top:2px; }
.warn{ border:1px solid rgba(192,57,43,.3); background:linear-gradient(150deg, rgba(255,240,238,.8), rgba(255,247,246,.6)); }
.warn .pcard__title .ti{ background:rgba(192,57,43,.14); color:#c0392b; }
.warn ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.warn li{ display:flex; gap:10px; font-size:.9rem; color:var(--ink-2); }
.warn li svg{ flex:none; color:#c0392b; margin-top:2px; }
.emerg{ display:flex; align-items:center; gap:14px; margin-top:16px; padding:14px; border-radius:14px; background:#c0392b; color:#fff; }
.emerg .ph-ic{ width:44px;height:44px;border-radius:12px; background:rgba(255,255,255,.18); display:grid;place-items:center; flex:none; }
.emerg b{ direction:ltr; font-family:var(--font-mono); }

/* ======================= TICKETS PAGE ======================= */
.tk-grid{ display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start; }
.tk-grid > *{ margin-top:0; }
@media(max-width:880px){ .tk-grid{ grid-template-columns:1fr; } }
.tk-new{ width:100%; justify-content:center; margin-bottom:14px; }
.list-card{ display:flex; flex-direction:column; }
.attach{ display:flex; gap:10px; margin:4px 0 0; }
.attach .ph{ width:120px; aspect-ratio:4/3; border-radius:12px; }

/* ======================= AUTH (LOGIN / OTP) ======================= */
.auth{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
@media(max-width:860px){ .auth{ grid-template-columns:1fr; } .auth__aside{ display:none; } }
.auth__aside{ position:relative; overflow:hidden; background:linear-gradient(160deg,#1c3e6e,#102a4f); color:var(--cream); padding:clamp(34px,5vw,66px); display:flex; flex-direction:column; }
.auth__aside::before{ content:""; position:absolute; inset:0; background:radial-gradient(640px 420px at 18% -10%, rgba(52,196,91,.32), transparent 60%), radial-gradient(560px 460px at 110% 110%, rgba(118,196,255,.3), transparent 60%); }
.auth__aside > *{ position:relative; z-index:1; }
.auth__ghost{ position:absolute; bottom:-6%; left:-4%; z-index:0; font-family:var(--font-display); font-weight:900; font-size:clamp(8rem,20vw,17rem); color:rgba(255,255,255,.05); letter-spacing:-.04em; line-height:.8; }
.abrand{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:900; font-size:1.25rem; }
.abrand .mark{ width:36px;height:36px;border-radius:10px; background:rgba(255,255,255,.14); display:grid;place-items:center; border:1px solid rgba(255,255,255,.2); }
.aside-mid{ margin-top:auto; }
.aside-mid h2{ font-family:var(--font-display); font-weight:900; font-size:clamp(2rem,3.6vw,3.2rem); line-height:1.04; margin:0; letter-spacing:-.02em; }
.aside-mid h2 .dot{ color:var(--green); }
.aside-mid p{ color:rgba(238,243,251,.72); max-width:38ch; margin:20px 0 0; line-height:1.7; }
.afeat{ display:flex; flex-direction:column; gap:14px; margin-top:34px; }
.afeat div{ display:flex; align-items:center; gap:12px; font-size:.96rem; color:rgba(238,243,251,.92); }
.afeat .fi{ width:34px;height:34px;border-radius:10px; background:rgba(52,196,91,.2); color:var(--green); display:grid;place-items:center; flex:none; }
.aside-quote{ margin-top:auto; padding-top:34px; font-size:.86rem; color:rgba(238,243,251,.6); border-top:1px solid rgba(255,255,255,.12); }
.auth__form{ display:flex; align-items:center; justify-content:center; padding:clamp(28px,5vw,60px); min-height:100vh; }
.formbox{ width:100%; max-width:430px; }
.formbox .kicker{ margin-bottom:16px; }
.formbox h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(1.8rem,3.4vw,2.6rem); margin:0; letter-spacing:-.02em; }
.formbox .sub{ color:var(--ink-2); margin:12px 0 30px; line-height:1.7; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.86rem; font-weight:600; color:var(--ink-2); margin-bottom:9px; }
.phone-in{ direction:ltr; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.85); border-radius:14px; padding:4px 16px 4px 6px; box-shadow:var(--glossy); transition:border-color .25s, box-shadow .25s; }
.phone-in:focus-within{ border-color:var(--green); box-shadow:0 0 0 4px rgba(52,196,91,.15); }
.phone-in .cc{ font-family:inherit; font-weight:600; color:var(--ink-2); padding:12px; border-inline-end:1px solid var(--line); direction:ltr; }
.phone-in input{ flex:1; border:0; background:transparent; font-family:inherit; font-size:1.15rem; font-weight:600; color:var(--ink); outline:none; padding:12px 6px; letter-spacing:.04em; direction:ltr; text-align:left; }
.phone-in input::placeholder{ color:var(--ink-4); font-weight:400; }
.hint{ font-size:.8rem; color:var(--ink-3); }
.err{ font-size:.82rem; color:#c0392b; margin-top:8px; min-height:1em; }
.btn-block{ width:100%; justify-content:center; margin-top:8px; padding-block:1.05em; }
.otp{ display:flex; gap:10px; direction:ltr; justify-content:space-between; margin-bottom:8px; }
.otp input{ width:100%; aspect-ratio:1; max-width:62px; text-align:center; border:1px solid rgba(255,255,255,.85); background:rgba(255,255,255,.6); border-radius:14px; font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:var(--ink); outline:none; box-shadow:var(--glossy); transition:border-color .2s, box-shadow .2s, transform .15s; }
.otp input:focus{ border-color:var(--green); box-shadow:0 0 0 4px rgba(52,196,91,.15); transform:translateY(-2px); }
.otp input.filled{ border-color:var(--ink); }
.resend{ display:flex; align-items:center; justify-content:space-between; margin:18px 0 6px; font-size:.88rem; }
.resend .timer{ font-family:var(--font-mono); color:var(--ink-3); direction:ltr; }
.resend button{ background:none; border:0; color:var(--green-d); font-weight:700; font-family:inherit; font-size:.9rem; }
.resend button:disabled{ color:var(--ink-4); cursor:not-allowed; }
.edit-phone{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.8); border-radius:12px; padding:11px 14px; margin-bottom:24px; font-size:.9rem; }
.edit-phone b{ direction:ltr; font-family:var(--font-mono); font-weight:600; }
.back-home{ display:inline-flex; align-items:center; gap:7px; margin-top:30px; color:var(--ink-3); font-size:.86rem; }
.back-home:hover{ color:var(--ink); }
.trust{ display:flex; align-items:center; gap:8px; margin-top:26px; font-size:.8rem; color:var(--ink-3); }
.otp-single{ width:100%; text-align:center; letter-spacing:.55em; font-family:var(--font-display); font-weight:800; font-size:1.8rem; padding:16px; border:1px solid rgba(255,255,255,.85); background:rgba(255,255,255,.6); border-radius:14px; color:var(--ink); outline:none; box-shadow:var(--glossy); direction:ltr; }
.otp-single::placeholder{ color:var(--ink-4); letter-spacing:.3em; }
.otp-single:focus{ border-color:var(--green); box-shadow:0 0 0 4px rgba(52,196,91,.15); }
.otp-timer{ font-family:var(--font-mono); color:var(--ink-3); direction:ltr; font-size:.86rem; margin:16px 0 6px; }

/* ======================= NOTICES / EMPTY ======================= */
.woopatient-notice{ border-radius:14px; padding:13px 16px; font-size:.92rem; margin-bottom:16px; border:1px solid transparent; }
.woopatient-notice--success{ background:rgba(52,196,91,.14); border-color:rgba(52,196,91,.35); color:var(--green-d); }
.woopatient-notice--error{ background:rgba(192,57,43,.1); border-color:rgba(192,57,43,.3); color:#c0392b; }
.woopatient-notice--info{ background:rgba(255,255,255,.55); border-color:rgba(255,255,255,.8); color:var(--ink-2); box-shadow:var(--glossy); }
.woopatient-empty{ text-align:center; padding:48px 18px; color:var(--ink-3); }
.woopatient-empty p{ margin:0 0 14px; }
.woopatient-back{ margin:0 0 18px; }
.woopatient-back a{ color:var(--ink-2); font-weight:600; }
.woopatient-back a:hover{ color:var(--ink); }

/* ======================= FORMS ======================= */
.wform .field{ margin-bottom:16px; }
.wform label{ display:block; font-size:.86rem; font-weight:600; color:var(--ink-2); margin-bottom:8px; }
.wform input[type="text"], .wform input[type="tel"], .wform input[type="file"], .wform textarea, .wform select{
  width:100%; border:1px solid rgba(255,255,255,.85); background:rgba(255,255,255,.6); border-radius:14px;
  padding:12px 14px; font-family:inherit; font-size:1rem; color:var(--ink); outline:none; box-shadow:var(--glossy);
  transition:border-color .2s, box-shadow .2s;
}
.wform input:focus, .wform textarea:focus, .wform select:focus{ border-color:var(--green); box-shadow:0 0 0 4px rgba(52,196,91,.15); }
.wform textarea{ resize:vertical; min-height:110px; }
.wform .hint{ font-size:.8rem; color:var(--ink-3); margin-top:6px; }
.wform .btn{ margin-top:6px; }
.form-desc{ color:var(--ink-2); margin:0 0 18px; font-size:.94rem; line-height:1.7; }

/* ======================= SERVICE DETAIL / GUIDES ======================= */
.svc-detail__thumb{ width:100%; max-height:280px; object-fit:cover; border-radius:var(--radius); margin-bottom:18px; }
.svc-detail__content{ color:var(--ink-2); line-height:1.85; }
.svc-detail__content p{ margin:0 0 1em; }
.guide-step{ display:flex; flex-wrap:wrap; align-items:center; gap:13px; padding:14px 6px; border-bottom:1px solid var(--line-soft); }
.guide-step:last-child{ border:0; }
.guide-step .gn{ width:34px;height:34px;border-radius:10px; background:var(--ink); color:#fff; display:grid;place-items:center; font-family:var(--font-display); font-weight:900; flex:none; }
.guide-step .gi{ flex:1; min-width:140px; }
.guide-step .gname{ font-weight:700; font-size:.92rem; }
.guide-step .gsize{ font-size:.74rem; color:var(--ink-3); font-family:var(--font-mono); direction:ltr; }
.guide-step .gact{ display:flex; gap:8px; flex-wrap:wrap; }
.woopatient-guide-step__viewer{ flex-basis:100%; padding-top:10px; }
.woopatient-guide-step__viewer[hidden]{ display:none !important; }
.woopatient-guide-media{ max-width:100%; border-radius:14px; box-shadow:var(--shadow-card); }
.woopatient-guide-iframe{ width:100%; height:480px; border:1px solid var(--line); border-radius:14px; }
.woopatient-guide-fallback{ font-size:.88rem; color:var(--ink-2); }