@import url('../lib/vazirmatn/Vazirmatn-font-face.css');

:root {
  --brand-50:  #eefbf7;
  --brand-100: #d3f5ea;
  --brand-500: #12b886;
  --brand-600: #0ca678;
  --brand-700: #099268;
  --ink-900: #101828;
  --ink-700: #344054;
  --ink-500: #667085;
  --ink-300: #d0d5dd;
  --ink-100: #f2f4f7;
  --surface: #ffffff;
  --bg: #f7f9fb;
  --danger: #e03131;
  --warning: #f08c00;
  --info: #1c7ed6;
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 6px 20px rgba(16,24,40,.08);
}

* { box-sizing: border-box; }

body {
  font-family: 'Vazirmatn', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink-900);
  direction: rtl;
}

a { text-decoration: none; }

/* ---------- Landing ---------- */
.hero {
  background: radial-gradient(1200px 500px at 20% -10%, var(--brand-100), transparent),
              linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  padding: 96px 0 64px;
}

.hero h1 {
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.3;
}

.brand-gradient {
  background: linear-gradient(90deg, var(--brand-600), #0b7285);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-brand {
  background: var(--brand-600);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: .75rem 1.6rem;
  border-radius: var(--radius-md);
  transition: transform .15s ease, background .15s ease;
}
.btn-brand:hover { background: var(--brand-700); color: #fff; transform: translateY(-1px); }

.btn-outline-brand {
  border: 1.5px solid var(--brand-600);
  color: var(--brand-700);
  font-weight: 600;
  padding: .75rem 1.6rem;
  border-radius: var(--radius-md);
  background: #fff;
}
.btn-outline-brand:hover { background: var(--brand-50); color: var(--brand-700); }

/* ---------- سبک یکپارچه‌ی دکمه‌ها در کل برنامه ----------
   باگ: سبک بصری دکمه‌ها بین صفحات مختلف یکسان نبود - برخی صفحات (مثل دکمه‌های brand بالا) گرد و
   شیک بودند و بقیه (btn-outline-danger/btn-outline-secondary/btn-success و مشابه پیش‌فرض
   بوت‌استرپ که در اکثر Viewها برای عملیات حذف/لغو/تغییر وضعیت استفاده شده‌اند) با شعاع گوشه، ضخامت
   حاشیه و وزن فونت پیش‌فرض بوت‌استرپ رندر می‌شدند. به‌جای بازنویسی تک‌تک صفحات (که دوباره احتمال
   فراموش‌شدن در صفحه‌ی بعدی را دارد)، این‌جا یک قانون سراسری روی خودِ کلاس‌های استاندارد بوت‌استرپ
   (.btn*) گذاشته شده تا هر دکمه‌ای، در هر صفحه‌ای از برنامه، از همین یک منبع سبک بگیرد. رنگ‌های
   معنایی خودِ بوت‌استرپ (danger/success/secondary/warning/...) دست‌نخورده مانده‌اند - فقط شکل
   (گردی گوشه، ضخامت حاشیه، وزن فونت، انیمیشن Hover) یکدست شده. */
.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn.btn-sm { border-radius: 10px; padding: .4rem 1rem; font-size: .82rem; }
.btn[class*="btn-outline-"] { border-width: 1.5px; }
.btn:not(:disabled):not(.disabled):hover { transform: translateY(-1px); }
.btn:disabled, .btn.disabled { transform: none; opacity: .55; }
.btn-success, .btn-outline-success { --bs-btn-hover-color: #fff; }
.btn-check:checked + .btn, .btn:active, .btn.active { transform: none; }

.feature-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--ink-100);
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.feature-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 22px;
  margin-bottom: 14px;
}

.panel-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink-700);
  box-shadow: var(--shadow-sm);
}

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--brand-700), #0b7285);
  padding: 24px;
}
.auth-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px;
  width: 100%;
  max-width: 440px;
}
.form-control, .form-select {
  border-radius: 10px;
  border: 1.5px solid var(--ink-300);
  padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.form-label { font-weight: 600; color: var(--ink-700); font-size: .9rem; }

/* ---------- Patient landing (three-domain entry point) ---------- */
.patient-landing {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 8%, rgba(18,184,134,.14), transparent 28rem),
    linear-gradient(145deg, #f7fcfb 0%, #f5f8fb 55%, #eef5f8 100%);
}
.patient-landing__container {
  position: relative;
  z-index: 1;
  padding: 52px 18px 34px;
}
.patient-landing__glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.patient-landing__glow--one {
  width: 460px; height: 460px;
  top: -250px; left: -180px;
  background: rgba(11,114,133,.08);
}
.patient-landing__glow--two {
  width: 300px; height: 300px;
  bottom: -190px; right: -100px;
  background: rgba(18,184,134,.09);
}
.patient-landing__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--brand-700);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.patient-landing__eyebrow-icon {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  color: #fff;
  background: var(--brand-600);
  border-radius: 11px;
  box-shadow: 0 8px 18px rgba(12,166,120,.2);
}
.patient-landing__copy {
  max-width: 680px;
  margin: 26px 0 34px;
}
.patient-landing__copy h1 {
  margin: 0;
  color: var(--ink-900);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 850;
  line-height: 1.22;
  letter-spacing: -.04em;
}
.patient-landing__copy h1 span {
  color: var(--brand-700);
}
.patient-landing__copy p {
  max-width: 590px;
  margin: 18px 0 0;
  color: var(--ink-700);
  font-size: clamp(1rem, 1.8vw, 1.16rem);
  line-height: 1.9;
}
.patient-landing__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
  gap: 18px;
  max-width: 980px;
}
.access-card {
  display: flex;
  gap: 18px;
  min-height: 238px;
  padding: 25px;
  border: 1px solid rgba(16,24,40,.09);
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 45px rgba(16,24,40,.08);
  backdrop-filter: blur(14px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.access-card:hover {
  transform: translateY(-3px);
  border-color: rgba(12,166,120,.3);
  box-shadow: 0 22px 52px rgba(16,24,40,.12);
}
.access-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: 15px;
  font-size: 1.35rem;
}
.access-card--clinic .access-card__icon {
  color: #0b7285;
  background: #e8f5f7;
}
.access-card__content { min-width: 0; }
.access-card__kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--brand-700);
  font-size: .78rem;
  font-weight: 800;
}
.access-card--clinic .access-card__kicker { color: #0b7285; }
.access-card h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.access-card p {
  min-height: 52px;
  margin: 9px 0 20px;
  color: var(--ink-500);
  font-size: .91rem;
  line-height: 1.8;
}
.access-card__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.access-card .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-clinic {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  background: #0b7285;
  border: 1px solid #0b7285;
}
.btn-clinic:hover, .btn-clinic:focus-visible {
  color: #fff;
  background: #095c6b;
  border-color: #095c6b;
}
.patient-landing__assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 24px;
  color: var(--ink-500);
  font-size: .8rem;
}
.patient-landing__assurance span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.patient-landing__assurance i { color: var(--brand-600); font-size: 1rem; }
.access-card a:focus-visible,
.patient-landing a:focus-visible {
  outline: 3px solid rgba(28,126,214,.42);
  outline-offset: 3px;
}
.center-access { background: linear-gradient(145deg, #eefbf7, #edf5f8); }
.center-access__card {
  width: min(100%, 520px);
  padding: 30px;
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 50px rgba(16,24,40,.1);
}
.center-access__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-500);
  font-size: .85rem;
}
.center-access__mark {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin: 0 auto;
  color: #fff;
  background: #0b7285;
  border-radius: 18px;
  font-size: 1.6rem;
  box-shadow: 0 10px 24px rgba(11,114,133,.22);
}
.center-access__options { display: grid; gap: 12px; }
.center-access__option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  min-height: 78px;
  padding: 13px 15px;
  color: var(--ink-900);
  border: 1px solid var(--ink-100);
  border-radius: 15px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.center-access__option:hover {
  color: var(--ink-900);
  border-color: rgba(11,114,133,.35);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.center-access__option-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  color: #0b7285;
  background: #e8f5f7;
  border-radius: 12px;
  font-size: 1.2rem;
}
.center-access__option strong,
.center-access__option small { display: block; }
.center-access__option strong { font-size: .94rem; }
.center-access__option small { margin-top: 4px; color: var(--ink-500); font-size: .78rem; }
.center-access__option > i { color: var(--ink-300); }

@media (max-width: 760px) {
  .patient-landing__container { padding-top: 32px; }
  .patient-landing__copy { margin: 22px 0 26px; }
  .patient-landing__copy h1 { font-size: clamp(2.1rem, 11vw, 3.2rem); }
  .patient-landing__actions { grid-template-columns: 1fr; }
  .access-card { min-height: 0; padding: 20px; }
  .access-card p { min-height: 0; }
  .patient-landing__assurance { gap: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .access-card, .center-access__option, .btn { transition: none !important; }
  .access-card:hover, .center-access__option:hover, .btn:not(:disabled):not(.disabled):hover { transform: none; }
}

.homepage-section{margin-top:3.5rem;position:relative;z-index:1}
.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:1.25rem}
.section-heading h2{margin:.2rem 0 0;font-size:clamp(1.35rem,2.5vw,2rem);color:#12343b}
.section-heading>i{font-size:1.8rem;color:#0ca678}
.section-kicker{font-size:.76rem;font-weight:800;color:#0ca678;letter-spacing:.04em}
.homepage-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1.1rem;border:1px solid rgba(12,166,120,.15);border-radius:1.25rem;background:rgba(255,255,255,.72);box-shadow:0 16px 42px rgba(21,74,77,.08)}
.homepage-stat{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.7rem;border-left:1px solid rgba(20,70,76,.1)}
.homepage-stat:last-child{border-left:0}.homepage-stat strong{font-size:1.7rem;color:#12343b}.homepage-stat span{font-size:.85rem;color:#60777b}
.directory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.vip-pill{display:inline-flex;padding:.18rem .5rem;border-radius:999px;background:#fff1bf;color:#9a6b00;font-size:.7rem;font-weight:800}
.rating{color:#b57b00;font-size:.82rem}.rating i{font-size:.7rem}.rating small{color:#89999b}
.directory-group{margin-top:1.5rem}.directory-group>h3{font-size:1rem;color:#31565b;margin-bottom:.75rem}

/* ===== Unified clinic / center card ============================================
   Shared component used by the homepage "VIP centers" grid and the patient
   booking search results, so both surfaces present clinics identically. */
.clinic-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1.5px solid var(--ink-100);
  border-radius:1.1rem;
  padding:1.1rem;
  box-shadow:0 8px 22px rgba(21,74,77,.06);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.clinic-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(21,74,77,.13);border-color:rgba(18,184,134,.3)}
.clinic-card--vip{border-color:#f3d78e;background:linear-gradient(180deg,#fffdf6,#ffffff 40%)}
.clinic-card--vip:hover{box-shadow:0 18px 38px rgba(191,142,20,.2);border-color:#e8bf5a}

.clinic-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;margin-bottom:.75rem}
.clinic-card__badge{
  display:inline-flex;align-items:center;gap:.28rem;
  padding:.26rem .6rem;
  border-radius:999px;
  font-size:.7rem;font-weight:800;
  white-space:nowrap;
}
.clinic-card__badge--vip{background:linear-gradient(135deg,#fff2c6,#ffdc84);color:#8a5a00;border:1px solid rgba(191,142,20,.3)}
.clinic-card__badge--featured{background:#eef2ff;color:#4338ca}
.clinic-card__badge--people{background:var(--brand-50);color:var(--brand-700)}
.clinic-card__badge--open{background:#e7f5ff;color:#1c7ed6}
.clinic-card__badges{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.clinic-card__logo{
  flex:none;
  width:46px;height:46px;border-radius:13px;
  background:linear-gradient(135deg,#eafaf3,#f3fbfa);
  display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--ink-100);
}
.clinic-card__logo img{width:100%;height:100%;object-fit:cover}
.clinic-card__logo i{color:var(--brand-600);font-size:1.25rem}

.clinic-card__body{display:flex;flex-direction:column;gap:.35rem;flex:1}
.clinic-card__title{font-size:1rem;font-weight:800;color:var(--ink-900);margin:0;line-height:1.4}
.clinic-card__meta{display:flex;align-items:center;gap:.3rem;color:var(--ink-500);font-size:.8rem;margin:0}
.clinic-card__meta i{color:var(--brand-600)}
.clinic-card__rating{display:flex;align-items:center;gap:.3rem;color:#b57b00;font-size:.8rem;font-weight:700;margin:0}
.clinic-card__rating i{font-size:.72rem}
.clinic-card__rating small{color:var(--ink-500);font-weight:500}
.clinic-card__desc{color:var(--ink-500);font-size:.8rem;margin:0;flex:1}
.clinic-card__socials{display:flex;gap:.4rem;margin-top:.1rem}
.clinic-card__socials a{
  width:29px;height:29px;border-radius:999px;background:var(--ink-100);
  display:grid;place-items:center;color:var(--ink-700);font-size:.85rem;
  transition:background .2s,color .2s;
}
.clinic-card__socials a:hover{background:var(--brand-50);color:var(--brand-700)}
.clinic-card__cta{
  margin-top:.7rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.62rem 1rem;
  border-radius:999px;
  border:1.5px solid var(--brand-600);
  background:transparent;
  color:var(--brand-700);
  font-weight:700;font-size:.85rem;
  text-decoration:none;
  transition:background .2s,color .2s,transform .2s;
}
.clinic-card__cta:hover{background:var(--brand-600);color:#fff;transform:translateY(-1px)}
.clinic-card--compact{padding:.85rem}
.doctor-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.doctor-list__item{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:1rem;background:#fff;border:1px solid rgba(19,70,77,.1)}.doctor-list__item>div:nth-child(2){display:flex;flex-direction:column;flex:1}.doctor-list__item span{font-size:.8rem;color:#6d8083;margin-top:.2rem}
.doctor-avatar{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#e8faf4;color:#0ca678}.doctor-avatar img{width:100%;height:100%;object-fit:cover}
.certificate-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.certificate-card{display:flex;flex-direction:column;gap:.6rem;align-items:center;padding:1rem;border:1px solid rgba(19,70,77,.1);border-radius:1rem;background:#fff}.certificate-card img{width:100%;height:110px;object-fit:contain}.certificate-card span{font-size:.85rem;color:#31565b;text-align:center}
@media (max-width:900px){.directory-grid,.certificate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.homepage-stats{grid-template-columns:1fr}.homepage-stat{border-left:0;border-bottom:1px solid rgba(20,70,76,.1)}.homepage-stat:last-child{border-bottom:0}.directory-grid,.doctor-list,.certificate-grid{grid-template-columns:1fr}.homepage-section{margin-top:2.5rem}}

/* asp-validation-summary همیشه یک div رندر می‌کند، حتی وقتی خطایی نیست - فقط کلاس زیر را اضافه
   می‌کند (بدون حذف alert/alert-danger که خودمان گذاشته‌ایم). بدون این قانون، یک باکس قرمز خالی
   همیشه بالای فرم‌ها دیده می‌شود. وقتی خطا واقعی وجود دارد، این کلاس با validation-summary-errors
   جایگزین می‌شود و باکس دوباره نمایش داده خواهد شد. */
.validation-summary-valid {
  display: none;
}

/* ---------- Dashboard shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 264px;
  flex-shrink: 0;
  background: #0f2027;
  background: linear-gradient(195deg, #10222a 0%, #0b1b21 100%);
  color: #e6f2f0;
  padding: 20px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-close {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  z-index: 2;
}
.sidebar-backdrop { display: none; }
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.1rem;
  color: #fff;
  padding: 8px 10px 20px;
}
.sidebar-badge {
  font-size: .7rem;
  font-weight: 600;
  color: var(--brand-100);
  background: rgba(18,184,134,.18);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 18px;
  display: inline-block;
}
.nav-section-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7d99a0;
  margin: 18px 10px 8px;
  font-weight: 700;
}
.sidebar .nav-link {
  color: #cfe3e0;
  border-radius: 10px;
  padding: .6rem .8rem;
  margin-bottom: 2px;
  font-weight: 500;
  font-size: .92rem;
  display: flex; align-items: center; gap: 10px;
}
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link.active {
  background: var(--brand-600);
  color: #fff;
  font-weight: 700;
}
.transfer-slot { cursor: pointer; min-width: 64px; transition: transform .15s ease, box-shadow .15s ease; }
.transfer-slot.selected { background: var(--brand-600) !important; border-color: var(--brand-600) !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(12,166,120,.18); transform: translateY(-1px); }

.main-col { flex: 1; min-width: 0; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--ink-100);
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}

.content-area { padding: 28px; }

.stat-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-100);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.stat-card .stat-value { font-size: 1.8rem; font-weight: 800; color: var(--ink-900); }
.stat-card .stat-label { color: var(--ink-500); font-size: .85rem; font-weight: 600; }
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}

.panel-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}
.panel-card .panel-card-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--ink-100);
  font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.panel-card .panel-card-body { padding: 22px; }

.badge-status-pending  { background: #fff4e0; color: var(--warning); }
.badge-status-confirmed{ background: #e7f5ff; color: var(--info); }
.badge-status-checkedin{ background: #eef2ff; color: #4338ca; }
.badge-status-completed{ background: var(--brand-50); color: var(--brand-700); }
.badge-status-cancelled{ background: #fff0f0; color: var(--danger); }
.badge-status-noshow   { background: var(--ink-100); color: var(--ink-500); }
.badge-status-active        { background: var(--brand-50); color: var(--brand-700); }
.badge-status-pendingapproval { background: #fff4e0; color: var(--warning); }
.badge-status-suspended     { background: #fff0f0; color: var(--danger); }
.badge-status-rejected      { background: var(--ink-100); color: var(--ink-500); }
.badge-status-expired       { background: #fff0f0; color: var(--danger); }
.status-badge {
  font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 4px 12px;
  display: inline-block;
}

.table-modern thead th {
  border: none; color: var(--ink-500); font-size: .8rem; text-transform: uppercase;
  letter-spacing: .03em; font-weight: 700; padding-bottom: 12px;
}
.table-modern tbody td { padding: 14px 10px; border-color: var(--ink-100); vertical-align: middle; }
.table-modern tbody tr:hover { background: var(--ink-100); }

@media (max-width: 900px) {
  .sidebar { position: fixed; right: -280px; z-index: 40; transition: right .2s ease; box-shadow: -12px 0 32px rgba(0,0,0,.18); }
  .sidebar.open { right: 0; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(15,32,39,.38); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 35; }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  body.sidebar-open { overflow: hidden; }
  .content-area { padding: 16px; }
}

/* ---------- Ticket chat thread ---------- */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 520px;
  overflow-y: auto;
  padding: 6px 2px;
}
.chat-bubble-row { display: flex; }
.chat-bubble-row.mine { justify-content: flex-start; }
.chat-bubble-row.theirs { justify-content: flex-end; }
.chat-bubble {
  max-width: 72%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: .9rem;
  line-height: 1.6;
}
.chat-bubble.mine {
  background: var(--brand-600);
  color: #fff;
  border-bottom-left-radius: 4px;
}
.chat-bubble.theirs {
  background: var(--ink-100);
  color: var(--ink-900);
  border-bottom-right-radius: 4px;
}
.chat-bubble .chat-meta {
  font-size: .72rem;
  opacity: .75;
  margin-top: 6px;
  display: block;
}

/* ---------- کارت‌های پلن (سفارش خودسرویس لایسنس/VIP توسط مدیر مرکز) ----------
   هر کارت با --accent/--accent-dark (ست‌شده inline از سمت View) رنگ‌بندی می‌شود تا
   پلن‌های مختلف به‌سادگی از هم تفکیک بصری شوند - مشابه صفحات قیمت‌گذاری معمول. */
.plan-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.plan-card {
  --accent: var(--brand-600);
  --accent-dark: var(--brand-700);
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.plan-card.is-disabled { cursor: not-allowed; opacity: .55; filter: grayscale(.35); }
.plan-card.is-disabled:hover { transform: none; box-shadow: none; }
.plan-card-top {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  padding: 18px 20px 14px;
  color: #fff;
}
.plan-card-top .plan-card-name { font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; }
.plan-card-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 700;
  font-size: .8rem;
}
.plan-card-body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; }
.plan-card-price { font-size: 1.45rem; font-weight: 800; color: var(--ink-900); }
.plan-card-price small { font-size: .76rem; font-weight: 600; color: var(--ink-500); }
.plan-card-features { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.plan-card-features li { display: flex; align-items: flex-start; gap: 8px; font-size: .83rem; color: var(--ink-700); line-height: 1.5; }
.plan-card-features li i { color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.plan-card-footer { padding: 14px 20px; border-top: 1px solid var(--ink-100); }
.plan-card-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 0;
  font-weight: 700;
  font-size: .87rem;
}
.plan-card.is-disabled .plan-card-cta { background: var(--ink-300); color: var(--ink-700); }
.plan-card-current-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  color: var(--accent-dark);
  font-size: .72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

/* ---------- دکمه/کارت پرداخت آنلاین با زرین‌پال ----------
   رنگ‌بندی زرد/نارنجی برند زرین‌پال، عمداً متفاوت از --brand سبز سامانه تا کاربر بلافاصله
   دکمه‌ی «پرداخت واقعی و آنی» را از «ثبت سفارش/بررسی دستی» تشخیص دهد. */
.btn-zarinpal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, #ffc233, #ff8f1f);
  border: none;
  color: #402400;
  font-weight: 800;
  font-size: .92rem;
  padding: 11px 0;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(255, 143, 31, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-zarinpal:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 143, 31, .45);
  color: #402400;
}
.btn-zarinpal:disabled, .btn-zarinpal.disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}
.btn-zarinpal i { font-size: 1.05rem; }

.payment-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--ink-500);
  font-size: .78rem;
}
.payment-divider::before, .payment-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink-100);
}

.zarinpal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff4e0;
  color: #b25b00;
  border: 1px solid #ffdca6;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 700;
}

/* ---------- صفحه‌بندی سراسری (برند‌شده روی همان کلاس استاندارد بوت‌استرپ) ---------- */
.pagination .page-link {
  border: 1.5px solid var(--ink-100);
  color: var(--ink-700);
  font-weight: 600;
  margin: 0 2px;
  border-radius: 8px !important;
}
.pagination .page-link:hover { background: var(--brand-50); color: var(--brand-700); }
.pagination .page-item.active .page-link { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.pagination .page-item.disabled .page-link { color: var(--ink-300); background: transparent; }

/* ---------- کارت‌های آماری کوچک (بالای صفحه‌ی مدارک/تصاویر) ---------- */
.mini-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.mini-stat {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-sm);
}
.mini-stat .mini-stat-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--brand-50); color: var(--brand-600);
}
.mini-stat .mini-stat-value { font-size: 1.35rem; font-weight: 800; color: var(--ink-900); line-height: 1.1; }
.mini-stat .mini-stat-label { font-size: .78rem; color: var(--ink-500); font-weight: 600; margin-top: 2px; }

/* ---------- نوار جستجو/فیلتر مینیمال داخل هر کارت (اسناد/تصاویر/دسترسی مراکز) ---------- */
.section-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.section-toolbar .search-box { position: relative; flex: 1; min-width: 160px; }
.section-toolbar .search-box i {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  color: var(--ink-500); font-size: .85rem; pointer-events: none;
}
.section-toolbar .search-box input {
  padding-right: 34px; font-size: .85rem;
}

/* ---------- منطقه‌ی آپلود کشیدن‌وانداختن ---------- */
.upload-dropzone {
  border: 1.5px dashed var(--ink-300);
  border-radius: var(--radius-md);
  background: var(--bg);
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
  transition: border-color .15s ease, background .15s ease;
  cursor: pointer;
}
.upload-dropzone:hover, .upload-dropzone.is-dragover { border-color: var(--brand-500); background: var(--brand-50); }
.upload-dropzone .upload-dropzone-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--ink-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-600); font-size: 17px;
}
.upload-dropzone .upload-dropzone-title { font-weight: 700; font-size: .85rem; color: var(--ink-700); }
.upload-dropzone .upload-dropzone-hint { font-size: .74rem; color: var(--ink-500); }
.upload-dropzone input[type=file] { display: none; }
.upload-filename-chip {
  display: none;
  align-items: center; gap: 6px;
  background: var(--brand-50); color: var(--brand-700);
  border-radius: 8px; padding: 4px 10px; font-size: .78rem; font-weight: 600;
  margin-top: 8px;
}
.upload-filename-chip.show { display: inline-flex; }

/* ---------- گرید گالری تصاویر درمانی ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.media-tile {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--ink-100);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}
.media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-tile .media-tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,24,40,0) 40%, rgba(16,24,40,.82) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px;
  opacity: 0; transition: opacity .15s ease;
}
.media-tile:hover .media-tile-overlay { opacity: 1; }
.media-tile .media-tile-name {
  color: #fff; font-size: .72rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 6px;
}
.media-tile .media-tile-actions { display: flex; gap: 6px; }
.media-tile .media-tile-actions .btn {
  padding: .25rem .5rem; font-size: .72rem; border-radius: 7px; flex: 1;
}
.media-tile .media-tile-date {
  position: absolute; top: 6px; right: 6px;
  background: rgba(16,24,40,.55); color: #fff;
  font-size: .64rem; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
}

/* ---------- ردیف اسناد (لیست با آیکون نوع فایل) ---------- */
.doc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--ink-100);
}
.doc-row:last-child { border-bottom: none; }
.doc-row .doc-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: var(--ink-100); color: var(--ink-500);
}
.doc-row .doc-icon.is-pdf { background: #fdecec; color: var(--danger); }
.doc-row .doc-icon.is-image { background: var(--brand-50); color: var(--brand-600); }
.doc-row .doc-meta { flex: 1; min-width: 0; }
.doc-row .doc-name {
  font-weight: 600; font-size: .87rem; color: var(--ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.doc-row .doc-date { font-size: .74rem; color: var(--ink-500); }
.doc-row .doc-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---------- ردیف/جدول دسترسی مراکز به پرونده ---------- */
.clinic-access-row { display: flex; align-items: center; gap: 10px; }
.clinic-avatar {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-600); font-size: 16px;
}
.empty-state {
  text-align: center; padding: 36px 16px; color: var(--ink-500);
}
.empty-state i { font-size: 1.8rem; color: var(--ink-300); margin-bottom: 10px; display: block; }
.empty-state .empty-state-text { font-size: .85rem; font-weight: 600; }

/* ---------- پوسته یکپارچه ورود و ثبت‌نام ---------- */
.auth-page{min-height:100vh;background:linear-gradient(135deg,#f4fbf9 0%,#eef7ff 52%,#fdf9f2 100%);color:var(--ink-900);overflow-x:hidden}
.auth-frame{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:28px 16px 20px}
.auth-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink-900);text-decoration:none;margin-bottom:24px}
.auth-brand__mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--brand-600);color:#fff;box-shadow:0 10px 22px rgba(12,166,120,.22)}
.auth-brand strong{display:block;font-size:1rem;line-height:1.2}.auth-brand small{display:block;color:var(--ink-500);font-size:.72rem;margin-top:3px}
.auth-orb{position:fixed;width:300px;height:300px;border-radius:50%;filter:blur(2px);opacity:.34;pointer-events:none}.auth-orb--one{top:-130px;right:-100px;background:#b8f2dc}.auth-orb--two{bottom:-150px;left:-100px;background:#c8defc}
.auth-panel{width:min(100%,620px);background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.8);border-radius:24px;padding:clamp(24px,5vw,42px);box-shadow:0 24px 70px rgba(22,67,78,.13);backdrop-filter:blur(14px)}
.auth-panel--wide{width:min(100%,820px)}.auth-panel__head{text-align:center;margin-bottom:26px}.auth-panel__icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:18px;background:var(--brand-50);color:var(--brand-700);font-size:1.6rem}.auth-panel__head h1{font-size:clamp(1.35rem,4vw,1.75rem);font-weight:850;margin:0;color:var(--ink-900)}.auth-panel__head p{color:var(--ink-500);font-size:.86rem;line-height:1.9;margin:8px 0 0}
.auth-form .form-label{font-size:.8rem;font-weight:750;color:var(--ink-700);margin-bottom:7px}.auth-form .form-control,.auth-form .form-select{min-height:48px;border:1px solid var(--ink-100);border-radius:12px;background:#fbfdfd;padding:.7rem .85rem}.auth-form .form-control:focus,.auth-form .form-select:focus{border-color:var(--brand-500);box-shadow:0 0 0 4px rgba(12,166,120,.12)}.auth-form .btn{min-height:48px;border-radius:12px;font-weight:800}
.auth-alert{border:0;border-radius:12px;font-size:.8rem;line-height:1.8}.auth-alert:empty{display:none}
.auth-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px;color:var(--ink-500);font-size:.78rem}.auth-links a{color:var(--brand-700);font-weight:800;text-decoration:none}.auth-links a:hover{text-decoration:underline}
.auth-back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-500);text-decoration:none;font-size:.78rem;margin-bottom:18px}.auth-back:hover{color:var(--brand-700)}
.auth-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.auth-choice{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--ink-100);border-radius:16px;color:var(--ink-900);text-decoration:none;transition:.2s ease}.auth-choice:hover{border-color:var(--brand-400);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.auth-choice__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--brand-50);color:var(--brand-700);font-size:1.1rem}.auth-choice strong{display:block;font-size:.84rem}.auth-choice small{display:block;color:var(--ink-500);font-size:.72rem;line-height:1.7;margin-top:3px}.auth-choice>i{margin-right:auto;color:var(--ink-300)}
.auth-tabs{display:flex;gap:6px;padding:5px;background:var(--bg);border-radius:13px;margin-bottom:20px}.auth-tabs .nav-link{flex:1;border:0;border-radius:9px;color:var(--ink-500);font-size:.78rem;font-weight:750;padding:10px 8px}.auth-tabs .nav-link.active{background:#fff;color:var(--brand-700);box-shadow:var(--shadow-sm)}
.auth-code{font-size:1.5rem!important;letter-spacing:.45em;text-align:center;direction:ltr}.auth-footer{margin-top:auto;padding-top:22px;color:var(--ink-400);font-size:.7rem;text-align:center}
@media (max-width:600px){.auth-frame{padding:20px 12px 16px}.auth-panel{border-radius:20px;padding:24px 18px}.auth-choice-grid{grid-template-columns:1fr}.auth-brand{margin-bottom:18px}}

/* -----------------------------------------------------------------------
   فیکس باگ مودال بوت‌استرپ ۵: در چیدمان RTL این پروژه (سایدبار sticky/fixed
   داخل .app-shell که display:flex است)، محاسبه‌ی داخلی بوت‌استرپ از عرض
   اسکرول‌بار (برای جبران‌سازی موقع باز شدن مودال) گاهی عدد غلط و بزرگ
   می‌دهد و این عدد مستقیماً به‌صورت padding-left روی خود .modal تزریق
   می‌شود؛ نتیجه‌اش این است که کل دیالوگ چند صد پیکسل از حالت وسط‌چین به
   راست هول داده می‌شود (قابل مشاهده وقتی پنجره‌ی مرورگر تغییر سایز
   می‌دهد). چون این جبران‌سازی صرفاً برای جلوگیری از پرشِ ~۱۵px موقع
   حذف اسکرول‌بار است، امن‌تر است کامل خنثی‌اش کنیم؛ پرش جزئیِ باقی‌مانده
   (در بدترین حالت) قابل چشم‌پوشی است و مودال همیشه واقعاً وسط‌چین می‌ماند.
   ----------------------------------------------------------------------- */
.modal {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.modal-open {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- Searchable select (offline, dependency-free combobox) ---------- */
/* پیشرفت تدریجی: select اصلی همیشه در فرم می‌ماند (فقط بصری پنهان می‌شود) تا
   بدون جاوااسکریپت هم فرم به‌درستی کار کند - این wwwroot/js/searchable-select.js
   را ببینید. */
.ss-wrap { position: relative; }
.ss-native {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.ss-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  text-align: start;
  background: #fff;
  cursor: pointer;
}
.ss-toggle::after {
  content: "";
  flex: none;
  width: .55em;
  height: .55em;
  border-inline-start: 2px solid var(--ink-500, #6d8083);
  border-bottom: 2px solid var(--ink-500, #6d8083);
  transform: rotate(-45deg);
  margin-top: -.2em;
}
.ss-toggle-label.ss-placeholder { color: var(--ink-500, #8a9a9c); }
.ss-toggle[aria-expanded="true"] {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.ss-toggle.is-invalid { border-color: #dc3545; }
.ss-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  inset-inline: 0;
  background: #fff;
  border: 1.5px solid var(--ink-300, #d7e2e2);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 32px rgba(16,24,40,.14);
  overflow: hidden;
}
.ss-search-wrap { position: relative; border-bottom: 1px solid var(--ink-100, #eef2f2); }
.ss-search-icon {
  position: absolute;
  top: 50%; inset-inline-start: .75rem;
  transform: translateY(-50%);
  color: var(--ink-500, #8a9a9c);
  font-size: .85rem;
  pointer-events: none;
}
.ss-search {
  width: 100%;
  border: 0;
  outline: none;
  padding: .65rem .9rem .65rem 2.1rem;
  font: inherit;
}
.ss-options {
  list-style: none;
  margin: 0;
  padding: .35rem;
  max-height: 240px;
  overflow-y: auto;
}
.ss-option {
  padding: .5rem .7rem;
  border-radius: 8px;
  font-size: .9rem;
  color: var(--ink-800, #12343b);
  cursor: pointer;
}
.ss-option:hover, .ss-option:focus { background: var(--brand-50); outline: none; }
.ss-option.is-selected { background: var(--brand-100); color: var(--brand-700); font-weight: 700; }
.ss-empty { padding: .8rem; text-align: center; color: var(--ink-500, #8a9a9c); font-size: .85rem; }