/* ============================================================
   Dr Ershadi — Maxillofacial Surgery
   Design System · GLOSSY · cool periwinkle glass + navy ink + vivid green
   RTL Persian · luxury editorial · glassmorphism
   (shared with the maxillo-clinic theme — keep in sync)
   ============================================================ */

@import url('https://v1.fontapi.ir/css/YekanBakh');
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --cream:      #EEF3FB;
  --cream-deep: #D9E5F4;
  --cream-2:    #C8D9EE;
  --paper:      rgba(255,255,255,.58);
  --paper-edge: rgba(255,255,255,.92);

  --ink:   #16335E;
  --ink-2: #45618B;
  --ink-3: #8295B5;
  --ink-4: #AEBED5;

  --line:      rgba(22,51,94,0.16);
  --line-soft: rgba(22,51,94,0.08);

  --tan:   #34C45B;
  --tan-2: #A9ECB8;
  --green:  #34C45B;
  --green-d:#23A847;

  --radius:   22px;
  --radius-l: 34px;
  --radius-s: 13px;

  --shadow-card: 0 1px 2px rgba(22,51,94,.05), 0 22px 50px -30px rgba(22,51,94,.40);
  --shadow-pop:  0 10px 24px rgba(22,51,94,.14), 0 44px 90px -44px rgba(22,51,94,.55);
  --glossy: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -14px 30px -18px rgba(22,51,94,.08);

  --font-display: 'Yekan Bakh','Vazirmatn',sans-serif;
  --font-body:    'Yekan Bakh','Vazirmatn',sans-serif;
  --font-mono:    'IBM Plex Mono',ui-monospace,monospace;

  --maxw: 1400px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body.woopatient-portal-page{
  margin:0;
  font-family:var(--font-body);
  background:
    radial-gradient(1100px 720px at 82% -8%, rgba(118,196,255,.42), transparent 58%),
    radial-gradient(900px 620px at 4% 4%, rgba(176,166,255,.32), transparent 56%),
    radial-gradient(1000px 900px at 55% 112%, rgba(110,224,160,.20), transparent 60%),
    linear-gradient(168deg, #D7E5F5 0%, #E5ECF7 42%, #EEF1FA 72%, #E8EEF8 100%);
  background-attachment:fixed;
  color:var(--ink);
  direction:rtl;
  text-align:right;
  font-weight:400;
  line-height:1.6;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.woopatient-portal-page img{ display:block; max-width:100%; }
.woopatient-portal-page a{ color:inherit; text-decoration:none; }
.woopatient-portal-page button{ font-family:inherit; cursor:pointer; }

/* layout helpers (scoped) */
.woopatient-portal-page .kicker{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); display:inline-flex; align-items:center; gap:.6em; direction:ltr; font-weight:500;
}
.woopatient-portal-page .num{ font-family:var(--font-mono); font-weight:500; }

/* ---- buttons ---- */
.woopatient-portal-page .btn{
  display:inline-flex; align-items:center; gap:.7em;
  padding:.86em 1.5em; border-radius:999px; font-weight:700; font-size:1rem;
  border:1px solid transparent;
  transition:transform .4s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
  white-space:nowrap;
}
.woopatient-portal-page .btn .arr{
  width:1.85em;height:1.85em;border-radius:50%; display:grid;place-items:center; flex:none;
  transition:transform .45s var(--ease), background .3s;
}
.woopatient-portal-page .btn svg{ width:.95em;height:.95em; }
.woopatient-portal-page .btn-primary{ background:var(--ink); color:#fff; box-shadow:0 10px 26px -12px rgba(22,51,94,.55); }
.woopatient-portal-page .btn-primary .arr{ background:var(--green); color:#fff; box-shadow:0 4px 10px -2px rgba(52,196,91,.6); }
.woopatient-portal-page .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(22,51,94,.6); }
.woopatient-portal-page .btn-primary:hover .arr{ transform:rotate(-45deg); }
.woopatient-portal-page .btn-ghost{
  background:rgba(255,255,255,.55); backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4);
  color:var(--ink); border-color:rgba(255,255,255,.85);
  box-shadow:var(--glossy), 0 8px 22px -14px rgba(22,51,94,.4);
}
.woopatient-portal-page .btn-ghost .arr{ background:var(--green); color:#fff; }
.woopatient-portal-page .btn-ghost:hover{ background:#fff; transform:translateY(-2px); }
.woopatient-portal-page .btn-ghost:hover .arr{ transform:rotate(-45deg); }
.woopatient-portal-page .btn-sm{ padding:.5em 1.1em; font-size:.86rem; }

.woopatient-portal-page .tlink{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); direction:ltr; border-bottom:1px solid var(--line); padding-bottom:3px;
  transition:gap .3s, border-color .3s, color .3s;
}
.woopatient-portal-page .tlink:hover{ gap:.9em; border-color:var(--green); color:var(--green-d); }

.woopatient-portal-page .chip{
  display:inline-flex; align-items:center; gap:.5em; padding:.5em 1em; border-radius:999px;
  background:rgba(255,255,255,.6); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--glossy); font-size:.82rem; font-weight:500; color:var(--ink-2);
}
.woopatient-portal-page .chip--green{ background:rgba(52,196,91,.14); border-color:rgba(52,196,91,.35); color:var(--green-d); }

/* image placeholder */
.woopatient-portal-page .ph{
  position:relative;
  background:repeating-linear-gradient(135deg, var(--cream-deep), var(--cream-deep) 12px, var(--cream-2) 12px, var(--cream-2) 24px);
  display:grid; place-items:center; color:var(--ink-3); overflow:hidden;
}
.woopatient-portal-page .ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.35), transparent 55%); pointer-events:none; }
.woopatient-portal-page .ph span{
  position:relative; z-index:1; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  background:rgba(255,255,255,.78); backdrop-filter:blur(6px); padding:.5em 1em; border-radius:999px;
  border:1px solid rgba(255,255,255,.8); direction:ltr; color:var(--ink-2);
}

@media (prefers-reduced-motion:reduce){
  .woopatient-portal-page *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}