/* ==========================================================================
   یک فایل CSS واحد برای کل سایت (صفحه اصلی + پروفایل/ورود/ثبت‌نام/رزرو)
   نکته فنی: چند جا که دو طراحی (هدر با عکس در صفحه اصلی، و هدر ساده در
   صفحات دیگر) با هم قاطی می‌شدند با ':has()' از هم جدا شده‌اند تا هیچ
   کلاسی نیاز به تغییر در HTML نداشته باشد. ':has()' در همه مرورگرهای
   امروزی (کروم/edge/سافاری/فایرفاکس نسخه‌های اخیر) پشتیبانی می‌شود.
   ========================================================================== */

:root{
  --blue:#0067a5;
  --blue-dark:#005286;
  --blue-deep:#013a5c;
  --blue-pale:#eaf4fb;
  --blue-pale-2:#dceefa;
  --white:#ffffff;
  --ink:#0f2b3e;
  --ink-soft:#4c6577;
  --line:#d3e6f2;
  --green:#2fbf71;
  --red:#e0563f;
  --amber:#b5720c;
  --wrap-pad:18px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  font-family:'Vazirmatn', sans-serif;
  background:var(--blue-pale);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}
a{color:inherit;}

.wrap{
  width:100%;
  max-width:680px;
  margin:0 auto;
  margin-top: 20px;
  padding:0 10px;
}

/* ============================== HEADER ============================== */
header{padding:18px 0 10px;}
.header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:800;
  font-size:15.5px;
  color:var(--blue-deep);
  white-space:nowrap;
  flex:0 0 auto;
}
.brand a{text-decoration:none;}
.brand-mark{
  width:38px;height:38px;
  border-radius:12px;
  background:linear-gradient(155deg,var(--blue),var(--blue-deep));
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  box-shadow:0 8px 16px -6px rgba(0,103,165,.55);
}
.brand-mark svg{width:20px;height:20px;stroke:#fff;}

/* دکمه ورود / ثبت‌نام آبی تیره در هدر */
.btn-login{
  background:var(--blue);
  color:var(--blue-deep);
  border:none;
  padding:8px 16px;
  border-radius:999px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  box-shadow:0 6px 16px -4px rgba(1,58,92,.4);
  transition:background .2s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-login:hover{
  background:var(--red);
  color:var(--white);
  transform:translateY(-1px);
  box-shadow:0 8px 20px -4px rgba(1,58,92,.5);
}
.btn-login svg{width:15px;height:15px;stroke:var(--blue-deep);flex:0 0 auto;}

nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  flex:0 0 auto;
}
nav a, nav button{
  font-family:inherit;
  background:none;
  border:none;
  text-decoration:none;
  color:var(--ink-soft);
  font-weight:600;
  font-size:12.5px;
  padding:7px 11px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
nav a.active, nav a:hover, nav button:hover{
  background:var(--blue-pale-2);
  color:var(--blue-deep);
}
nav button.costs-btn{color:var(--ink-soft);display:inline-flex;align-items:center;gap:4px;}
nav button.costs-btn svg{width:13px;height:13px;stroke:currentColor;}

/* ---------- بسته‌بندی آیکون + برچسب هر آیتم منو (دسکتاپ: کنار هم / موبایل: زیر هم) ---------- */
.nav-icon-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.nav-label{display:inline-block;}

/* ---------- Badge نوتیفیکیشن نوبت‌های رزروشده (کنار «پروفایل» در منو) ---------- */
.profile-nav-btn{position:relative;}
.notif-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  margin-right:2px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-size:9.5px;
  font-weight:800;
  line-height:1;
  box-shadow:0 0 0 2px var(--white);
  animation:notifBadgePulse 1.8s ease-in-out infinite;
}
@keyframes notifBadgePulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.18);}
}

/* ================================ HERO ================================
   یک ساختار مشترک برای همه صفحات. صفحه اصلی چون علاوه‌بر متن، عکس دکتر و
   دکمه‌های CTA هم دارد از طریق ':has(.photo-wrap)' حالت پیشرفته‌تر (چیدمان
   گرید و فاصله بیشتر) می‌گیرد. صفحات ساده (رزرو/ورود/ثبت‌نام/پروفایل) که
   فقط آیکون + عنوان + توضیح دارند، حالت ساده و جمع‌وجورتر می‌گیرند. */
.hero{
  background:linear-gradient(165deg,var(--blue) 0%,var(--blue-dark) 55%,var(--blue-deep) 100%);
  border-radius:0 0 34px 34px;
  padding:26px 0 40px;
  position:relative;
  overflow:hidden;
  
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(420px 220px at 50% -10%, rgba(255,255,255,.16), transparent 60%);
  pointer-events:none;
}
.hero:has(.photo-wrap){
  padding:22px 0 40px;
  margin-bottom:100px; /* فضای هم‌پوشانی عکس/دکمه‌ها با بخش بعدی، فقط در صفحه اصلی */
}

.hero .wrap{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "text"
    "cta"
    "photo"
    "license";
  justify-items:center;
  row-gap:16px;
}
/* در صفحات ساده که فقط hero-icon/h1/subtitle دارند، همین گرید یک‌ستونه
   کافیست و ظاهرش عملاً معادل چیدمان وسط‌چین است؛ نیازی به override نیست. */
.hero .wrap:not(:has(.photo-wrap)){text-align:center;}

.hero-text{
  grid-area:text;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}

/* آیکون دایره‌ای برای هیروی صفحات ساده (رزرو/ورود/ثبت‌نام/پروفایل) */
.hero-icon{
  width:56px;height:56px;
  margin:0 auto;
  border-radius:16px;
  background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
}
.hero-icon svg{width:26px;height:26px;stroke:#fff;}

h1{
  font-size:26px;
  line-height:1.45;
  font-weight:800;
  color:#fff;
  max-width:320px;
}
h1 em{
  font-style:normal;
  background:rgba(255,255,255,.16);
  padding:1px 10px;
  border-radius:8px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
/* عنوان کوچک‌تر، مخصوص هیروی ساده (وقتی h1 مستقیماً زیر .wrap باشد، نه
   زیر .hero-text مثل صفحه اصلی) — بدون نیاز به کلاس اضافه در HTML */
.hero > .wrap > h1{
  font-size:21px;
  max-width:none;
  margin-bottom:2px;
}

.subtitle{
  color:rgba(255,255,255,.86);
  font-size:15px;
  line-height:1.8;
  font-weight:400;
  max-width:320px;
  margin:0 auto;
}

/* ---------- اعتماد الکترونیک + پرداخت (فقط صفحه اصلی) ---------- */
.trust-badge{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:30px auto;
  gap:10px;
}
.trust-badge a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:130px;
  height:130px;
  padding:12px;
  background:rgba(255,255,255,.08);
  border:2px solid #0067a5;
  border-radius:22px;
  box-shadow:
    0 10px 30px rgba(0,103,165,.25),
    inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  transition:all .35s ease;
  overflow:hidden;
}
.trust-badge a:hover{
  transform:translateY(-6px) scale(1.04);
  border-color:#2ca9ff;
  box-shadow:
    0 18px 40px rgba(0,103,165,.45),
    0 0 20px rgba(0,103,165,.35);
}
.trust-badge img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease;}
.trust-badge a:hover img{transform:scale(1.06);}

/* ---------- CTA + بابل خدمات آنلاین (فقط صفحه اصلی) ---------- */
.cta{
  grid-area:cta;
  width:100%;
  display:flex;
  justify-content:center;
}
.cta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 10px;
  width:100%;
  max-width:300px;
}
/* دکمه‌های هیروی صفحه اصلی (ویزیت آنلاین/حضوری). نسخه‌ی دیگر دکمه‌ها
   («ذخیره»، «تایید» و...) داخل .card تعریف شده و با این تداخل ندارد،
   چون هیچ‌وقت هم‌زمان در یک عنصر قرار نمی‌گیرند. */
.btn{
  grid-row:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:14px 12px;
  border-radius:14px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg{width:18px;height:18px;flex:0 0 auto;}
.btn-online{grid-column:1;}
.btn-inperson{grid-column:2;}

.btn-fill{
  background:#fff;
  color:var(--blue-deep);
  box-shadow:0 12px 22px -10px rgba(1,20,32,.5);
}

.btn-fill:active{transform:scale(.97);}
.btn-outline{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(255,255,255,.55);
}
.btn-outline:active{transform:scale(.97);}
.bubble-wrap{
  grid-column:1;
  grid-row:2;
  display:flex;
  justify-content:center;
  position:relative;
}
.bubble{
  background:var(--white);
  border-radius:16px;
  padding:14px 12px 12px;
  box-shadow:0 16px 30px -16px rgba(1,20,32,.5);
  width:100%;
  position:relative;
  margin-top:14px;
}
.bubble::before{
  content:"";
  position:absolute;
  top:-7px;
  right:50%;
  transform:translateX(50%) rotate(45deg);
  width:14px;height:14px;
  background:var(--white);
  border-radius:2px;
}
.bubble h3{
  font-size:11px;
  font-weight:700;
  color:var(--blue-deep);
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
}
.bubble h3 svg{width:13px;height:13px;stroke:var(--blue);flex:0 0 auto;}


/* ---------- FIX: نقطه‌ی کلاس جا افتاده بود؛ همین باعث می‌شد این بلوک
   اصلاً به‌عنوان سلکتور کلاس شناخته نشود و باکس «ویزیت در منزل» در گرید
   جای درستش قرار نگیرد و متن‌هایش به‌هم بریزد. ---------- */
.bubble-wrap2{
  grid-column:2;
  grid-row:2;
  display:flex;
  justify-content:center;
  position:relative;
}
.bubble2{
  background:var(--white);
  border-radius:16px;
  padding:14px 12px 12px;
  box-shadow:0 16px 30px -16px rgba(1,20,32,.5);
  width:100%;
  position:relative;
  margin-top:14px;
}
.bubble2::before{
  content:"";
  position:absolute;
  top:-7px;
  right:50%;
  transform:translateX(50%) rotate(45deg);
  width:14px;height:14px;
  background:var(--white);
  border-radius:2px;
}
.bubble2 h3{
  font-size:11px;
  font-weight:700;
  color:var(--blue-deep);
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
}
.bubble2 h3 svg{width:13px;height:13px;stroke:var(--blue);flex:0 0 auto;}

.bubble h3 svg{width:13px;height:13px;stroke:var(--blue);flex:0 0 auto;}


.service-grid{display:grid;grid-template-columns:1fr;gap:6px;}
.service-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--ink);
  font-weight:500;
  background:var(--blue-pale);
  border-radius:8px;
  padding:8px 9px;
}
.service-item svg{width:13px;height:13px;flex:0 0 auto;stroke:var(--blue);}

/* ---------- عکس پزشک (فقط صفحه اصلی) ---------- */
.photo-wrap{
  grid-area: photo;
  position: relative;
  width: 180px;
  aspect-ratio: 3/4;
  margin-top: 30px;
}

/* فقط در موبایل نمایش داده می‌شود (نگاه کنید به @media max-width:899.98px) */
.mobile-hero-header{display:none;}

.photo-frame{
  width: 100%;
  height: 100%;
  border-radius: 130px 130px 22px 22px;
  overflow: hidden; /* برای مرورگرهای دیگر هم نگه می‌داریم */
  clip-path: inset(0 round 130px 130px 22px 22px); /* 👈 فیکس اصلی برای فایرفاکس */
  border: 5px solid rgba(255,255,255,.9);
  box-shadow: 0 20px 34px -14px rgba(1,20,32,.55);
  background: var(--blue-pale-2);
  isolation: isolate; /* یک لایه‌ی رندر مستقل می‌سازد، به ثبات کلیپ کمک می‌کند */
}

.photo-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.photo-ring{
  position: absolute;
  inset: -10px;
  border-radius: 140px 140px 30px 30px;
  border: 1.5px dashed rgba(255,255,255,.4);
}
.badge-live{
  position:absolute;
  bottom:6px;
  left:-14px;
  background:#fff;
  border-radius:12px;
  padding:6px 11px;
  display:flex;
  align-items:center;
  gap:6px;
  box-shadow:0 12px 22px -10px rgba(1,20,32,.4);
  font-size:10.5px;
  font-weight:700;
  color:var(--blue-deep);
}
.badge-live .dot{
  width:7px;height:7px;border-radius:50%;
  background:#2fbf71;
  box-shadow:0 0 0 3px rgba(47,191,113,.25);
}

.license{
  grid-area:license;
  color:rgba(255,255,255,.92);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
}
.license svg{width:13px;height:13px;stroke:#fff;opacity:.85;flex:0 0 auto;}
.license b{font-weight:700;letter-spacing:.5px;}

/* ---------- ویدیوی معرفی (زیر بلاک آبی، فقط صفحه اصلی) ---------- */
.video-card .card-head{margin-bottom:14px;}
.video-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:#000;
  box-shadow:0 10px 24px -12px rgba(1,20,32,.35);
}
.video-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* ============================ MAIN / CARDS ============================
   ساختار کارت‌های عمومی برای صفحات پروفایل/ورود/ثبت‌نام/رزرو */
main{
  margin-top:-26px;
  position:relative;
  z-index:2;
  padding-bottom:30px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.card{
  background:var(--white);
  border-radius:20px;
  padding:18px 16px;
  box-shadow:0 18px 34px -18px rgba(1,20,32,.4);
  margin-top: 20px;
  margin-bottom: 20px;
}
.card-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:14px;}
.card-head svg{width:17px;height:17px;stroke:var(--blue);flex:0 0 auto;margin-top:2px;}
.card-head h2{font-size:14px;font-weight:800;color:var(--blue-deep);}
.card-head p{font-size:11px;color:var(--ink-soft);margin-top:2px;}

/* ---------- دکمه‌های داخل کارت (ذخیره/تایید/انصراف و ...) ----------
   عمداً با پیشوند «.card» نوشته شده تا با «.btn» هیروی صفحه اصلی
   (ویزیت آنلاین/حضوری) که specificity کمتری دارد تداخل پیدا نکند. */
.card .btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:13px 16px;
  border-radius:13px;
  font-weight:700;
  font-size:13.5px;
  border:none;
  cursor:pointer;
  font-family:inherit;
  margin-top:14px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.card .btn-primary{
  background:var(--blue);
  color:#fff;
  box-shadow:0 14px 26px -12px rgba(0,103,165,.55);
}
.card .btn-primary:active:not(:disabled){transform:scale(.97);}
.card .btn-primary:disabled{
  background:#c9d8e2;
  color:#fff;
  box-shadow:none;
  cursor:not-allowed;
  opacity:.8;
}
.card .btn-ghost{
  background:var(--blue-pale);
  color:var(--blue-deep);
  box-shadow:none;
}
.card .btn-ghost:active{transform:scale(.97);}

/* ---------- فیلدهای فرم عمومی ---------- */
.field{margin-bottom:14px;}
.field label{display:block;font-size:11.5px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.field .hint{font-size:10px;color:var(--ink-soft);font-weight:400;margin-right:4px;}
.field input, .field textarea{
  width:100%;
  font-family:inherit;
  font-size:13px;
  color:var(--ink);
  background:var(--blue-pale);
  border:1.5px solid transparent;
  border-radius:12px;
  padding:11px 13px;
  outline:none;
  transition:border-color .18s ease, background .18s ease;
}
.field input:focus, .field textarea:focus{border-color:var(--blue);background:var(--white);}
.field textarea{resize:vertical;min-height:90px;line-height:1.8;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.field.error input{border-color:var(--red);background:#fdf0ed;}
.error-msg{display:none;font-size:10.5px;color:var(--red);font-weight:600;margin-top:5px;}
.field.error .error-msg{display:block;}

/* ---------- مشترک بین صفحات ورود/ثبت‌نام (قبلاً در هر دو فایل جدا تکرار شده بود) ---------- */
.pw-toggle-wrap{position:relative;}
.pw-toggle{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--ink-soft);font-size:10.5px;font-weight:700;font-family:inherit;
}
.divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--ink-soft);font-size:11px;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);}
.btn-resend{background:#e9eaec;color:#6b7280;font-size:12px;padding:6px 14px;box-shadow:none;}
.btn-resend:disabled{opacity:.65;cursor:not-allowed;}

.field select{
  width:100%;
  height:48px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--blue-pale);
  color:var(--ink);
  font:inherit;
  outline:none;
  transition:.2s;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
}

.field select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,103,165,.12);
}

/* فلش دراپ‌دان */
.field{
  position:relative;
}

.field:has(select)::after{
  content:"▾";
  position:absolute;
  left:16px;
  top:43px;
  pointer-events:none;
  color:#777;
  font-size:14px;
}
/* ---------- پیام موفقیت (ذخیره/ارسال) ---------- */
.save-toast, .signup-toast, .login-toast, .book-toast{
  display:none;
  align-items:center;
  gap:8px;
  background:#eafaf1;
  border:1px solid #bfe9d3;
  color:#1c8a4f;
  font-size:12px;
  font-weight:700;
  border-radius:12px;
  padding:11px 13px;
  margin-top:12px;
  line-height:1.8;
}
.save-toast svg, .signup-toast svg, .login-toast svg, .book-toast svg{
  width:14px;height:14px;stroke:#1c8a4f;flex:0 0 auto;margin-top:1px;
}
.save-toast.show, .signup-toast.show, .login-toast.show, .book-toast.show{display:flex;}

/* ============================== CALENDAR ============================== */
.calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-nav-btn{
  width:32px;height:32px;
  border-radius:10px;
  border:none;
  background:var(--blue-pale);
  color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .18s ease;
}
.cal-nav-btn svg{width:15px;height:15px;}
.cal-nav-btn:hover{background:var(--blue-pale-2);}
.cal-month-label{font-size:13.5px;font-weight:800;color:var(--blue-deep);}

.weekday-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;}
.weekday-cell{text-align:center;font-size:10.5px;font-weight:700;color:var(--ink-soft);padding:4px 0;}

.day-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.day-cell{
  aspect-ratio:1/1;
  border-radius:11px;
  border:none;
  background:var(--blue-pale);
  color:var(--ink);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .16s ease, color .16s ease, transform .12s ease;
}
.day-cell:hover:not(:disabled):not(.selected){background:var(--blue-pale-2);}
.day-cell:active:not(:disabled){transform:scale(.94);}
.day-cell.empty{background:transparent;cursor:default;}
.day-cell.past{color:#b7c7d1;background:transparent;cursor:not-allowed;}
.day-cell.today{box-shadow:inset 0 0 0 1.5px var(--blue);font-weight:800;}
.day-cell.selected{background:var(--blue);color:#fff;font-weight:800;box-shadow:0 8px 16px -8px rgba(0,103,165,.6);}

.legend-row, .slot-legend{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
}
.legend-item{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-soft);font-weight:600;}
.legend-item .dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto;}
.dot.today{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--blue);}
.dot.selected{background:var(--blue);}
.dot.past{background:#dfe9ee;}
.dot.avail{background:var(--blue-pale-2);box-shadow:inset 0 0 0 1.5px var(--line);}
.dot.busy{background:#f3dcd6;}

/* ============================== TIME SLOTS ============================== */
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.slot-empty{
  grid-column:1/-1;
  text-align:center;
  font-size:12px;
  color:var(--ink-soft);
  background:var(--blue-pale);
  border-radius:12px;
  padding:20px 10px;
}
.slot-btn{
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
  background:var(--blue-pale);
  border:1.5px solid transparent;
  border-radius:11px;
  padding:10px 6px;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.slot-btn:hover:not(:disabled):not(.selected){border-color:var(--blue);}
.slot-btn:active:not(:disabled){transform:scale(.95);}
.slot-btn.selected{background:var(--blue);color:#fff;box-shadow:0 8px 16px -8px rgba(0,103,165,.6);}
.slot-btn.busy{background:#fdf0ed;color:#c98670;text-decoration:line-through;cursor:not-allowed;}

/* ============================== SUMMARY ============================== */
.summary-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 2px;border-bottom:1px solid var(--line);font-size:12.5px;
}
.summary-row:last-of-type{border-bottom:none;}
.summary-k{color:var(--ink-soft);font-weight:600;}
.summary-v{color:var(--ink);font-weight:700;}
.summary-v.amount{color:var(--blue-deep);font-weight:800;}

/* ============================== FOOTER (بازطراحی حرفه‌ای) ============================== */
footer{
  margin-top:auto;
  background:var(--blue-deep);
  padding-top:30px;
  position:relative;
}
footer::before{
  content:"";
  position:absolute;
  top:0;right:0;left:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
}
footer .wrap{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:center;
  gap:18px;
}
footer p{font-size:12px;color:rgba(255,255,255,.72);}

/* ---------- ردیف بالا: برند + شبکه‌های اجتماعی ---------- */
.footer-top{
  align-items:center;
  padding-bottom:24px;
  gap:20px;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.footer-brand .brand-mark{width:42px;height:42px;border-radius:13px;}
.footer-brand .brand-mark svg{width:21px;height:21px;stroke:#fff;}
.footer-brand-name{font-size:15px;font-weight:800;color:#fff;}
.footer-brand-tag{font-size:11.5px;color:rgba(255,255,255,.62);margin-top:3px;font-weight:400;}

/* ---------- نوار «طرف قرارداد بیمه» ---------- */
.footer-insurance{
  display:flex;align-items:center;justify-content:center;gap:8px;
  text-align:center;
  font-size:12.5px;font-weight:600;
  color:var(--blue-pale-2);
  background:rgba(255,255,255,.06);
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:13px 18px;
}
.footer-insurance svg{width:16px;height:16px;stroke:currentColor;flex:0 0 auto;}

/* ---------- ردیف مستقل شبکه‌های اجتماعی (زیر نوار «طرف قرارداد بیمه») ---------- */
.footer-social-wrap{
  display:flex;
  justify-content:center;
  padding:22px 0 4px;
}

/* ---------- ردیف پایین: آدرس + نمادهای اعتماد ---------- */
.footer-bottom{padding:18px 0 8px;gap:22px;}

.address-block{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  justify-self:start;text-align:right;
}
.address p{
  display:flex;align-items:flex-start;justify-content:center;gap:6px;
  font-size:12.5px;color:rgba(255,255,255,.82);font-weight:400;line-height:1.9;max-width:280px;
}
.address svg{width:15px;height:15px;stroke:#fff;flex:0 0 auto;margin-top:2px;}

.route-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;color:var(--blue-deep);text-decoration:none;
  padding:9px 17px;border-radius:999px;background:#fff;
}
.route-link svg{width:14px;height:14px;stroke:var(--blue-deep);}

.trust{
  display:flex;align-items:center;gap:10px;
  padding:16px;
  border-radius:18px;
  width:100%;justify-content:center;
}
.enamad-slot{
  width:50px;height:50px;border-radius:11px;
  border:1.5px dashed rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  font-size:8.5px;color:rgba(255,255,255,.75);text-align:center;line-height:1.3;font-weight:600;
}

/* ---------- نوار پایین: کپی‌رایت ---------- */
.footer-legal{
  text-align:center;
  padding:16px 0 22px;
  font-size:11px;
  color:rgba(255,255,255,.45);
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:4px;
}
.footer-legal p{font-size:inherit;color:inherit;}

/* ============================== MODAL (هزینه‌ها) ============================== */
.overlay{
  position:fixed;inset:0;
  background:rgba(1,20,32,.55);
  backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
  z-index:300;
}
.overlay.open{opacity:1;pointer-events:auto;}
.modal{
  background:#fff;
  border-radius:22px;
  width:100%;max-width:380px;max-height:82dvh;
  overflow-y:auto;
  padding:22px 20px 20px;
  transform:translateY(14px) scale(.98);
  transition:transform .22s ease;
  box-shadow:0 30px 60px -20px rgba(1,20,32,.5);
}
.overlay.open .modal{transform:translateY(0) scale(1);}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.modal-head h2{font-size:15.5px;font-weight:800;color:var(--blue-deep);display:flex;align-items:center;gap:7px;}
.modal-head h2 svg{width:17px;height:17px;stroke:var(--blue);}
.modal-close{
  width:30px;height:30px;border-radius:50%;border:none;
  background:var(--blue-pale);color:var(--blue-deep);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.modal-sub{font-size:11.5px;color:var(--ink-soft);margin-bottom:16px;line-height:1.8;}
.price-list{list-style:none;display:flex;flex-direction:column;gap:8px;}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--blue-pale);border-radius:12px;padding:11px 13px;}
.price-row .label{font-size:12.5px;font-weight:600;color:var(--ink);}
.price-row .amount{font-size:12.5px;font-weight:800;color:var(--blue-deep);white-space:nowrap;}
.price-note{margin-top:14px;font-size:10.5px;color:var(--ink-soft);background:var(--blue-pale-2);border-radius:10px;padding:9px 11px;line-height:1.8;}

/* ============================ TABLET (>=640px) ============================ */
@media (min-width:640px){
  .wrap{max-width:600px;padding:0 32px;}
  :root{--wrap-pad:32px;}
  h1{font-size:28px;max-width:420px;}
  .subtitle{font-size:14.5px;max-width:380px;}
  .photo-wrap{width:210px;}
  .cta-grid{max-width:340px;}
  .service-item{font-size:11.5px;}
  .slot-grid{grid-template-columns:repeat(4,1fr);}

  .footer-top{flex-direction:row;justify-content:space-between;text-align:right;}
  .footer-brand{flex-direction:row;text-align:right;}
}

/* ============================ DESKTOP (>=900px) ============================ */
@media (min-width:900px){
  /* پیش‌فرض: صفحات ساده (پروفایل/ورود/ثبت‌نام/رزرو) — ستون باریک وسط‌چین */
  .wrap{max-width:60%;padding:0 24px;}

  .header-inner{
    flex-direction:row;
    justify-content:center;
    align-items:center;
    display:flex;
    gap:20px;
  }

  /* ---------- نوار منوی دسکتاپ: شیشه‌ای هماهنگ با نسخه موبایل، با متن خوانا و پررنگ ----------
     همان دستور شیشه‌ای خاکستری چندلایه‌ی نسخه موبایل، اما به‌صورت یک کپسول
     افقی در ردیف هدر؛ رنگ و وزن متن طوری تنظیم شده که روی زمینه‌ی شیشه‌ای
     همیشه خوانا بماند. دکمه‌ی ورود/خروج از این استایل مستثنی است و آبی و
     متمایز باقی می‌ماند.
     FIX (لود کند منو موقع برگشت از موبایل به دسکتاپ): backdrop-filter
     سنگین روی nav باعث می‌شد مرورگر لایه‌ی کامپوزیت را در هر resize/تغییر
     breakpoint دوباره بسازد؛ will-change به مرورگر می‌گوید این لایه را از
     قبل آماده نگه دارد تا گذار سریع‌تر انجام شود. */
  nav{
    border-radius:999px;
    background:linear-gradient(165deg, rgba(255,255,255,.68) 0%, rgba(228,231,236,.5) 55%, rgba(212,216,222,.46) 100%);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:
      0 14px 32px -16px rgba(20,26,33,.25),
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 -1px 0 rgba(90,98,108,.1);
    padding:5px 8px;
    will-change: transform, backdrop-filter;
  }
  nav ul{gap:2px;}
  nav a, nav button.costs-btn{
    color:var(--ink);
    font-size:13px;
    font-weight:700;
  }
  nav a.active, nav a:hover, nav button:hover{
    background:rgba(0,103,165,.13);
    color:var(--blue-deep);
  }

  /* صفحه اصلی: چیدمان پهن دوستونه، فقط وقتی عکس دکتر وجود دارد */
  body:has(.photo-wrap) .wrap{max-width:920px;padding:0 40px;}

  .hero:has(.photo-wrap){padding:34px 0 46px;border-radius:0 0 44px 44px;}
  .hero:has(.photo-wrap) .wrap{
    grid-template-columns:1.1fr .9fr;
    grid-template-areas:
      "text   photo"
      "cta    photo"
      "..     license";
    justify-items:stretch;
    align-items:center;
    column-gap:48px;
    row-gap:18px;
  }

  .hero-text{align-items:flex-end;text-align:right;max-width:440px;justify-self:end;}
  h1{max-width:440px;}
  .subtitle{max-width:400px;}

  .cta{justify-content:flex-end;}
  .cta-grid{max-width:360px;}

  .photo-wrap{width:250px;justify-self:center;align-self:center;}
  .license{justify-self:center;}

  /* فوتر صفحه اصلی: آدرس و اعتماد الکترونیک کنار هم */
  footer:has(.address-block) .wrap{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    text-align:right;
  }
  .address-block{align-items:flex-end;}
  .address p{justify-content:space-between;text-align:right;}
  footer:has(.address-block) .trust{width:auto;border-top:none;padding-top:0;}
}

/* ============================================================================
   بازطراحی حالت موبایل/تبلت (زیر 900px): هدر بالا باریک و چسبان + نویگیشن
   به‌صورت نوار تب ثابت پایین صفحه شبیه اپ‌های iOS + هیروی صفحه‌ی اصلی با
   عکس تمام‌عرض بالای صفحه، طوری که عنوان و دکمه‌های ویزیت بدون اسکرول دیده
   شوند و توضیحات/فوتر با اسکرول قابل مشاهده باشند.
   ============================================================================ */
@media (max-width:899.98px){

  /* ---------- آرم/برند در موبایل حذف شد ----------
     نویگیشن اصلی (nav) با position:fixed به پایین صفحه منتقل شده و در همان
     المان header قرار دارد؛ پس خودِ header نباید مخفی شود (وگرنه nav هم با
     آن مخفی می‌شد)، فقط ظاهر بصری نوار بالا (پس‌زمینه/حاشیه/پدینگ) و آرم را
     حذف می‌کنیم تا هیچ نواری بالای صفحه دیده نشود. */
  header{
    padding:0;
    background:none;
    border-bottom:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .header-inner{
    flex-direction:row;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    padding:0;
    margin-top:0;
  }
  .brand{display:none;}

  /* ---------- نوار تب پایین: شیشه‌ی خاکستری حرفه‌ای به سبک iOS 27 (کپسول شناور) ----------
     یک کپسول شناور با فاصله از لبه‌ها، چند لایه گلس خاکستری/بی‌رنگ (blur + saturate)،
     یک درخشش نرم بالای شیشه (specular highlight)، ضخامت شیشه‌ای در لبه‌ی پایین
     (inner shadow) و سایه‌ی معلق زیرش برای عمق بیشتر. */
  nav{
    position:fixed;
    right:14px;left:14px;
    bottom:calc(14px + env(safe-area-inset-bottom,0));
    z-index:80;
    border-radius:26px;
    background:linear-gradient(165deg, rgba(255,255,255,.62) 0%, rgba(226,229,234,.5) 55%, rgba(210,214,220,.46) 100%);
    backdrop-filter:blur(30px) saturate(160%);
    -webkit-backdrop-filter:blur(30px) saturate(160%);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:
      0 20px 46px -16px rgba(20,26,33,.4),
      0 2px 10px -3px rgba(20,26,33,.14),
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 -1px 0 rgba(90,98,108,.14);
    overflow:hidden;
    isolation:isolate;
    will-change: transform, backdrop-filter;
  }
  /* درخشش شیشه‌ای بالای کپسول، مثل انعکاس نور روی گلس */
  nav::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%);
    pointer-events:none;
    z-index:0;
  }
  /* ضخامت/عمق شیشه در لبه‌ی پایینی کپسول */
  nav::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 -12px 20px -16px rgba(20,26,33,.22);
    pointer-events:none;
    z-index:0;
  }
  nav ul{
    position:relative;
    z-index:1;
    list-style:none;
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:2px;
    max-width:680px;
    margin:0 auto;
    padding:8px 8px;
  }
  nav ul li{
    flex:1 1 0;
    min-width:0;
    display:flex;
  }
  nav ul li > *{width:100%;}
  nav ul li form{display:flex;width:100%;}
  nav a, nav button{
    position:relative;
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:7px 4px 8px;
    border-radius:18px;
    font-size:10px;
    line-height:1.2;
    font-weight:700;
    color:var(--ink-soft);
    white-space:normal;
    text-align:center;
    background:none;
    box-shadow:none;
    transition:background .25s ease, color .25s ease;
  }
  nav a svg, nav button svg{width:22px;height:22px;stroke:currentColor;flex:0 0 auto;transition:transform .25s ease;}
  nav button.costs-btn svg{width:22px;height:22px;stroke:currentColor;}
  nav .nav-label{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  nav a.active, nav a[aria-current="page"], nav button.active{
    background:rgba(0,103,165,.13);
    color:var(--blue-deep);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px -5px rgba(0,103,165,.35);
  }
  nav a.active svg, nav a[aria-current="page"] svg, nav button.active svg{
    transform:translateY(-1px) scale(1.06);
  }
  nav a:hover, nav button:hover{
    background:rgba(20,26,33,.06);
    color:var(--blue-deep);
  }
  /* دکمه‌ی ورود/خروج هم باید مثل بقیه‌ی تب‌ها ستونی و هم‌شکل باشد، نه یک
     کپسول آبی جدا از بقیه */
  nav .btn-login{
    background:none;
    box-shadow:none;
    transform:none;
  }
  nav .btn-login:hover{
    background:rgba(20,26,33,.06);
    color:var(--blue-deep);
    transform:none;
    box-shadow:none;
  }

  /* ---------- Badge تعداد نوبت‌ها: حالا دقیقاً روی گوشه‌ی آیکون پروفایل و داخل دکمه ---------- */
  .profile-nav-btn .nav-icon-wrap{overflow:visible;}
  .profile-nav-btn .notif-badge{
    position:absolute;
    top:-5px;
    left:-7px;
    margin:0;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background:linear-gradient(135deg,#ff7a63,var(--red));
    color:#fff;
    font-size:9px;
    font-weight:800;
    line-height:16px;
    text-align:center;
    box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 3px 8px -2px rgba(224,86,63,.55);
  }

  /* فضای کافی زیر فوتر تا محتوای آن پشت کپسول شناور مخفی نشود — این فاصله
     عمداً روی خودِ فوتر گذاشته شده (نه body) تا با رنگ آبی تیره‌ی فوتر یکی
     شود و به‌جای یک گپ خالی و بی‌دلیل، ادامه‌ی طبیعی فوتر دیده شود.
     مقدار با ارتفاع کپسول شناور + فاصله‌اش از پایین صفحه (14px) هماهنگ است */
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0));}

  /* ---------- هیروی صفحه اصلی: عکس تمام‌عرض/تمام‌بلوک بالای صفحه ----------
     عکس اول از همه دیده می‌شود (بلوک کامل، لبه‌به‌لبه)، بلافاصله بعدش عنوان
     و دو دکمه‌ی ویزیت در همان صفحه‌ی اول (بدون نیاز به اسکرول) قرار می‌گیرند؛
     توضیحات خدمات و فوتر با اسکرول رو به پایین دیده می‌شوند. */
  .hero:has(.photo-wrap){
    padding:0 0 30px;
    margin-bottom:0;
    border-radius:0 0 32px 32px;
    background:linear-gradient(180deg,var(--blue) 0%,var(--blue-dark) 45%,var(--blue-deep) 100%);
  }
  .hero:has(.photo-wrap)::before{
    display:block;
    background:radial-gradient(480px 260px at 50% -10%, rgba(255,255,255,.18), transparent 60%);
  }
  .hero:has(.photo-wrap) .wrap{
    row-gap:14px;
    grid-template-areas:
      "photohead"
      "photo"
      "license"
      "text"
      "cta";
  }
  /* رنگ متن‌ها دوباره سفید، چون تمِ کل هیرو (نه فقط عکس) کاملاً آبی شد */
  .hero:has(.photo-wrap) h1{color:#fff;}
  .hero:has(.photo-wrap) .subtitle{color:rgba(255,255,255,.86);}
  .hero:has(.photo-wrap) .license{color:rgba(255,255,255,.9);}
  .hero:has(.photo-wrap) .license svg{stroke:#fff;opacity:.85;}

  /* ---------- هدر آبی بالای عکس (فقط موبایل، فقط صفحه اصلی) ----------
     یک نوار آبی تمام‌عرض دقیقاً هم‌رنگ پس‌زمینه‌ی عکس، با آرم و اسم برند
     مثل تم خود قالب؛ با margin-bottom منفی به‌اندازه‌ی row-gap، بدون فاصله
     به عکس زیرش می‌چسبد و یک بلوک آبی یکپارچه می‌سازد. */
  .mobile-hero-header{
    display:flex;
    grid-area:photohead;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:calc(100% + (2 * var(--wrap-pad)));
    margin:0 calc(-1 * var(--wrap-pad)) -14px;
    padding:9px 9px 9px ;
    position:relative;
    z-index:1;
  }
  .mobile-hero-header::after{
    content:"";
    position:absolute;
    right:22%;left:22%;bottom:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  }
  .mobile-hero-header .brand-mark{
    width:34px;height:34px;
    border-radius:11px;
    background:linear-gradient(150deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
    border:1.5px solid rgba(255,255,255,.5);
    box-shadow:0 6px 16px -6px rgba(0,10,20,.4), inset 0 1px 0 rgba(255,255,255,.45);
  }
  .mobile-hero-header .brand-mark svg{width:18px;height:18px;stroke:#fff;}
  .mobile-hero-header-link{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:inherit;
  }
  .mobile-hero-header-link:active{opacity:.8;}
  .mobile-hero-header-name{
    font-size:15px;
    font-weight:800;
    color:#fff;
    letter-spacing:.2px;
    white-space:nowrap;
    text-shadow:0 1px 10px rgba(0,10,20,.2);
  }

  .photo-wrap{
    width:calc(100% + (2 * var(--wrap-pad)));
    margin:0 calc(-1 * var(--wrap-pad));
    aspect-ratio:auto;/
    height: clamp(420px, 70dvh, 600px);
    position:relative;
  }
  .photo-frame{
    border-radius:0 0 30px 30px;
    clip-path:inset(0 round 0 0 30px 30px);
    border:none;
    box-shadow:0 18px 32px -18px rgba(1,20,32,.45);
    background:linear-gradient(165deg,var(--blue) 0%,var(--blue-dark) 100%); /* بکگراند آبی پشت عکس */
    position:relative;
  }
  /* قاب شیشه‌ای دور عکس: بوردر نیمه‌شفاف + یک انعکاس نرم نور در بالای عکس،
     برای یک حس مدرن و «گلس» به‌جای یک عکس ساده‌ی بی‌قاب */
  .photo-frame::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    border-radius:inherit;
    border:1.5px solid rgba(255,255,255,.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 26%);
    pointer-events:none;
  }
  /* فید شدن پایین عکس به رنگ آبیِ خودِ هیرو، برای یک گذار نرم و بدون لبه */
  .photo-frame::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    border-radius:inherit;
    background:linear-gradient(180deg, transparent 55%, rgba(0,58,92,.55) 82%, var(--blue-deep) 100%);
    pointer-events:none;
  }
  .photo-ring{display:none;}
  .badge-live{left:16px;bottom:16px;}

  /* دکمه‌های ویزیت: بزرگ‌تر و واضح‌تر برای لمس آسان */
  .cta-grid{max-width:440px;gap:10px;}

  /* FIX (بهم‌ریختگی متن باکس‌های «شامل چیست»): قبلاً دو باکس کنار هم در دو
     ستون گرید قرار می‌گرفتند و هرکدام فقط نصف عرض صفحه‌ی باریک موبایل را
     داشتند؛ همین باعث می‌شد متن‌های داخل‌شان بشکنند و بهم بریزند. حالا هر دو
     باکس تمام‌عرض و زیر هم (اول آنلاین، بعد در منزل) نمایش داده می‌شوند. */
  .bubble-wrap{grid-column:1 / -1;grid-row:2;}
  .bubble-wrap2{grid-column:1 / -1;grid-row:3;}
  .bubble, .bubble2{margin-top:10px;}

  .service-grid{grid-template-columns:1fr 1fr;gap:8px;}

  .trust-badge a{width:104px;height:104px;}

  /* فاصله‌ی بیشتر بین محتوای صفحه (باکس‌های توضیحات) و فوتر */
  main{padding-bottom:46px;}

  /* دکمه‌های ویزیت: کمی بزرگ‌تر برای لمس آسان‌تر + یک افکت شیشه‌ای/درخشان
     ظریف برای حس مدرن‌تر (چون زمینه‌ی هیرو دوباره آبی تیره شده) */
  .btn{padding:15px 12px;border-radius:16px;}
  .btn-fill{
    background:linear-gradient(180deg,#ffffff,#eef6fc);
    box-shadow:0 14px 26px -12px rgba(0,10,20,.55), inset 0 1px 0 #fff;
  }
  .btn-outline{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-color:rgba(255,255,255,.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  }
  .btn-outline:active{background:rgba(255,255,255,.2);}

  /* باکس‌های «شامل چیست»: طراحی جذاب‌تر — هدر آیکون‌دار با چیپ گرادیانی
     و آیتم‌های سرویس با آیکون‌دایره‌ای، به‌جای متن ساده‌ی قبلی
     FIX (بهم‌ریختگی متن باکس‌ها): align-items:flex-start اضافه شد تا وقتی
     عنوان دو خطی می‌شود، آیکون گرد بالا بچسبد و با متن هم‌ترازی درستی داشته
     باشد؛ قبلاً با align-items پیش‌فرض (stretch/center) آیکون و متن روی هم
     می‌افتادند و ظاهر بهم‌ریخته می‌شد. */
  .bubble, .bubble2{
    border-radius:20px;
    padding:18px 16px 16px;
    box-shadow:0 20px 40px -22px rgba(0,60,100,.35), 0 2px 8px -2px rgba(0,60,100,.08);
    border:1px solid var(--line);
  }
  .bubble h3, .bubble2 h3{
    justify-content:flex-start;
    align-items:flex-start;
    font-size:14.5px;
    gap:10px;
    margin-bottom:12px;
    line-height:1.5;
  }
  .bubble h3 svg, .bubble2 h3 svg{
    width:32px;height:32px;
    padding:7px;
    border-radius:12px;
    background:linear-gradient(150deg,var(--blue),var(--blue-dark));
    stroke:#fff;
    box-shadow:0 8px 16px -8px rgba(0,103,165,.55);
    flex:0 0 auto;
  }
  .service-item{
    background:var(--blue-pale);
    border-radius:12px;
    padding:10px 11px;
    gap:8px;
    box-shadow:inset 0 0 0 1px rgba(0,103,165,.08);
  }
  .service-item svg{
    width:20px;height:20px;
    padding:4px;
    border-radius:8px;
    background:linear-gradient(150deg,var(--green),#1f9c58);
    stroke:#fff;
    flex:0 0 auto;
  }

  /* عنوان اصلی صفحه اول: کوچک‌تر و یکدست، با یک چیپ شیشه‌ای جذاب‌تر دور
     بخش تاکیدی («هر زمان و هر مکان») */
  .hero-text h1{
    font-size:20px;
    line-height:1.65;
    max-width:280px;
  }
  .hero-text h1 em{
    background:linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.12));
    padding:2px 12px;
    border-radius:10px;
    box-shadow:0 6px 16px -8px rgba(0,10,20,.4), inset 0 1px 0 rgba(255,255,255,.5);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }

  /* ---------- ویدیوی معرفی در موبایل: هدر آیکون‌دار هم‌شکل با باکس‌های
     «شامل چیست» ---------- */
  .video-card .card-head svg{
    width:32px;height:32px;padding:1px;border-radius:12px;
    background:linear-gradient(150deg,var(--blue),var(--blue-dark));
    stroke:#fff;box-shadow:0 8px 16px -8px rgba(0,103,165,.55);
    margin-top:0;
    flex:0 0 auto;
  }
  .video-card .card-head h2{font-size:14.5px;}
}

/* ============================== CONTACT PAGE ============================== */
.contact-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.contact-info{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.info-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12.5px;
  color:var(--ink);
  font-weight:500;
  line-height:1.9;
}
.info-row svg{width:16px;height:16px;stroke:var(--blue);flex:0 0 auto;margin-top:2px;}
.map-frame{
  width:100%;
  aspect-ratio:16/10;
  border:none;
  border-radius:16px;
  overflow:hidden;
}
/* ---------- باکس شیشه‌ای واحد برای شبکه‌های اجتماعی (فوتر) ----------
   یک ردیف تک‌خطی و تمام‌عرض (به اندازه‌ی کل صفحه/کانتینر)، به‌جای یک
   کپسول کوچک وسط‌چین؛ هر آیکون فضای مساوی از عرض را می‌گیرد. */
.social-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap;
    width:100%;
    margin:0 auto;
    padding:8px;
}

.social-link{
    display:flex;
    justify-content:center;
    align-items:center;
    flex:1 1 0;
    min-width:0;
    height:44px;
    border-radius:13px;
    background:transparent;
    text-decoration:none;
    transition:background .2s ease, transform .2s ease, color .2s ease;
}

.social-link svg{
    width:20px;
    height:20px;
    display:block;
    pointer-events:none;
    color:var(--blue-pale-2);
    stroke:currentColor;
}
.social-link:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);}

/* هر آیکون سر رنگ خودِ همان شبکه می‌رود */
.social-link.ig:hover{color:#e1306c;}
.social-link.yt:hover{color:#ff0000;}
.social-link.tg:hover{color:#26a5e4;}
.social-link.ap:hover{color:#ff7a00;}

.captcha-input-row{display:flex;gap:8px;align-items:center;}
.captcha-refresh-btn{
  width:42px;height:42px;
  border-radius:10px;
  border:none;
  background:var(--blue-pale);
  color:var(--blue-deep);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  transition:background .18s ease;
}
.captcha-refresh-btn svg{width:16px;height:16px;stroke:var(--blue-deep);}
.captcha-refresh-btn:hover{background:var(--blue-pale-2);}
.timeline-tag.status-pending{background:#fdf0ed;color:#c98670;}
.timeline-tag.status-reviewed{background:#eaf4fb;color:#0067a5;}
.timeline-tag.status-answered{background:#eafaf1;color:#1c8a4f;}

 /* ---------- دو باکس شیشه‌ای اینستاگرام / یوتیوب ---------- */
  .social-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 480px;
    margin: 0 auto 22px;
  }
  .social-glass {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px;
    border-radius: 18px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .social-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .92;
    z-index: 0;
  }
  .social-glass::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -20%;
    width: 60%;
    height: 180%;
    background: rgba(255,255,255,.18);
    transform: rotate(20deg);
    z-index: 1;
  }
  .social-glass svg, .social-glass span {
    position: relative;
    z-index: 2;
  }
  .social-glass svg { width: 24px; height: 24px; }
  .social-glass:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 30px rgba(0,0,0,.28);
  }
  .social-glass.ig::before {
    background: linear-gradient(135deg, #fdf497 0%, #fd5949 40%, #d6249f 70%, #285AEB 100%);
  }
  .social-glass.yt::before {
    background: linear-gradient(135deg, #ff4d4d 0%, #ff0000 55%, #b30000 100%);
  }

  /* ---------- باکس عکس شیشه‌ای ---------- */
  .avatar-glass-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
  }
  .avatar-glass {
    position: relative;
    width: 400px;
    height: 500px;
    border-radius: 28px;
    background: rgba(255,255,255,.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 10px 30px rgba(37,99,235,.18), inset 0 1px 1px rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .avatar-glass img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
  }
  .avatar-glass .avatar-placeholder {
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 11px;
  }
  .avatar-glass .avatar-placeholder svg { width: 34px; height: 34px; }
  .avatar-ring {
    position: absolute;
    inset: -6px;
    border-radius: 32px;
    background: linear-gradient(135deg, #fd5949, #d6249f, #285AEB, #ff0000);
    z-index: -1;
    opacity: .35;
    filter: blur(10px);
  }

  /* ---------- شعار ---------- */
  .tagline-box {
    text-align: center;
    margin-bottom: 26px;
  }
  .tagline-en {
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
    font-weight: 800;
    font-size: 20px;
    background: linear-gradient(90deg, #2563eb, #d6249f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 8px;
  }
  .tagline-quote {
    display: block;
    color: #6b7280;
    font-size: 13.5px;
    border-right: 3px solid #2563eb;
    padding-right: 10px;
    margin: 0 auto;
    max-width: 420px;
    line-height: 1.9;
  }

  .about-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(59, 130, 246, .08);
    color: #2563eb;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    margin-bottom: 14px;
  }
  .about-badge svg { width: 15px; height: 15px; }

  .about-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 18px;
  }
  .about-highlight {
    background: #f8f9fb;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
  }
  .about-highlight svg { width: 26px; height: 26px; margin-bottom: 8px; color: #2563eb; }
  .about-highlight .h-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
  .about-highlight .h-desc { font-size: 12.5px; color: #6b7280; }

  /* ---------- آمار ---------- */
  .stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 26px;
  }
  .stat-glass {
    text-align: center;
    padding: 20px 10px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(37,99,235,.07), rgba(214,36,159,.07));
    border: 1px solid rgba(37,99,235,.12);
  }
  .stat-glass .num {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(90deg, #2563eb, #d6249f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .stat-glass .lbl {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
  }

  /* ---------- گالری قبل/بعد ---------- */
  .gallery-card { margin-top: 22px; }
  .ba-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 18px;
  }
  .ba-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
    transition: transform .3s ease;
  }
  .ba-item:hover { transform: translateY(-6px); }
  .ba-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ba-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
  }
  .ba-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 12px 10px;
    background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
    color: #fff;
    font-size: 12.5px;
    text-align: center;
  }
  .gallery-cta {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(253,89,73,.08), rgba(214,36,159,.08));
  }
  .gallery-cta p {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 10px;
  }
  .gallery-cta a.ig-follow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    background: linear-gradient(135deg, #fdf497 0%, #fd5949 40%, #d6249f 70%, #285AEB 100%);
    box-shadow: 0 8px 20px rgba(214,36,159,.25);
  }
  .gallery-cta a.ig-follow svg { width: 18px; height: 18px; }


@media (min-width:900px){
  .contact-layout{
    grid-template-columns:1fr 1.15fr;
    align-items:start;
    gap:24px;
  }
  .video-wrap{
    max-width:50%;
    margin:0 auto;
  }
}


@media (prefers-reduced-motion:reduce){
  *{
    transition:none !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  
}
/* ---------- تبلت (640px تا 899.98px): چون عرض full-bleed در این بازه
   بزرگ‌تره ولی سقف ارتفاع قبلی برای موبایل تنظیم شده بود، عکس کوتاه و
   افقی دیده می‌شد؛ اینجا سقف ارتفاع را افزایش می‌دهیم تا نسبت پرتره حفظ شود. ---------- */
@media (min-width:420px) and (max-width:899.98px){
  .photo-wrap {
    height: clamp(420px, 75dvh, 760px);
  }
}