/* V157 — لایهٔ حرکت و جزئیات طراحی سایت دکتر پریسا ابراهیمی
   اصول: فقط transform و opacity متحرک می‌شوند؛ ورودها ease-out و کوتاه؛ هاور فقط روی دستگاه‌های دارای ماوس؛
   هیچ محتوایی بدون جاوااسکریپت پنهان نمی‌ماند؛ با «کاهش حرکت» سیستم‌عامل همه چیز بی‌حرکت نمایش داده می‌شود. */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
}

/* ── تایپوگرافی: شکست متوازن تیترها ── */
h1,h2,h3{text-wrap:balance}
.post-body p,.section-head p{text-wrap:pretty}

/* ── اسکرول نرم و فاصلهٔ لنگرها از هدر ثابت ── */
html{scroll-padding-top:calc(var(--header-h,76px) + 14px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ── ۱) گذار نرم بین صفحه‌ها (View Transitions) — مرورگرهای جدید؛ بقیه بدون تغییر ── */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
#siteHeader{view-transition-name:site-header}
.mobile-cta{view-transition-name:mobile-cta}
::view-transition-old(root){animation:v157-page-out 170ms var(--ease-out) both}
::view-transition-new(root){animation:v157-page-in 320ms var(--ease-out) both}
::view-transition-group(site-header),::view-transition-group(mobile-cta){animation-duration:240ms;animation-timing-function:var(--ease-out)}
@keyframes v157-page-out{to{opacity:0}}
@keyframes v157-page-in{from{opacity:0;transform:translateY(12px)}}

/* ── ۲) نمایش تدریجی بخش‌ها هنگام اسکرول (کوتاه‌تر و نرم‌تر) ── */
html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
html.js [data-reveal].in{opacity:1;transform:none}
/* کارت‌ها پشت سر هم (۶۰ میلی‌ثانیه فاصله) وارد می‌شوند */
html.js .v157-stagger>*{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
html.js .v157-stagger.in>*{opacity:1;transform:none}
html.js .v157-stagger.v157-now>*{transition:none}
/* خط کوچک کنار برچسب بخش، هنگام ورود کشیده می‌شود */
html.js [data-reveal] .eyebrow::before{transform:scaleX(0);transform-origin:100% 50%;transition:transform .8s var(--ease-out) .15s}
html.js [data-reveal].in .eyebrow::before{transform:scaleX(1)}

/* ── ۳) آشکار شدن تصاویر پایین صفحه (clip-path) ── */
html.js img.v157-img{clip-path:inset(0 0 100% 0);transform:scale(1.04);transition:clip-path .95s var(--ease-in-out),transform 1.3s var(--ease-out)}
html.js img.v157-img.in{clip-path:inset(0 0 0 0);transform:none}

/* ── ۴) هدر صفحهٔ اول: ورود سریع‌تر و پیوسته (کمتر از ۱٫۳ ثانیه به‌جای ۲٫۲ ثانیه) ── */
@keyframes v157-rise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes v157-settle{from{scale:1.07}to{scale:1}}
.hero#top .hero-kicker-v31{animation:v157-rise .7s var(--ease-out) .05s both}
.hero#top .hero-slogan-line{animation:v157-rise .8s var(--ease-out) .12s both}
.hero#top .hero-seo-title{animation:v157-rise .7s var(--ease-out) .22s both}
.hero#top .hero-sub{animation:v157-rise .7s var(--ease-out) .3s both}
.hero#top .hero-service-links{animation:v157-rise .7s var(--ease-out) .36s both}
.hero#top .hero-trust-row{animation:v157-rise .7s var(--ease-out) .4s both}
.hero#top .hero-ctas-min{animation:v157-rise .7s var(--ease-out) .48s both}
.hero#top .hero-phone{animation:v157-rise .7s var(--ease-out) .56s both}
.hero#top .hero-bg{animation:v157-settle 1.8s var(--ease-out) both}
/* دکمه‌های هدر: متن دقیقاً وسط دکمه */
.hero#top .hero-ctas-min a{display:inline-flex!important;align-items:center;justify-content:center;text-align:center}

/* ── ۵) هدر صفحهٔ اول در دسکتاپ: پرترهٔ قوسی واضح کنار متن؛ چهرهٔ پزشک دیگر زیر کادر شیشه‌ای مات نمی‌شود ── */
.hero-portrait{display:none}
@media (min-width:1024px){
  .hero#top .hero-bg{filter:blur(26px) saturate(.9) brightness(.62)!important}
  .hero#top .hero-overlay{background:linear-gradient(90deg,rgba(24,18,19,.55) 0%,rgba(24,18,19,.30) 55%,rgba(24,18,19,.12) 100%)!important}
  .hero-portrait{
    display:block;position:absolute;z-index:2;
    top:calc(var(--header-h,76px) + 46px);bottom:54px;right:6%;
    width:min(34vw,460px);
    border-radius:999px 999px 18px 18px;overflow:hidden;
    background:#2a2022;
    box-shadow:0 30px 80px rgba(12,8,9,.45);
    outline:1px solid rgba(229,201,137,.42);outline-offset:12px;
    animation:v157-frame 1.1s var(--ease-out) .1s both;
  }
  .hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block;animation:v157-settle 1.8s var(--ease-out) both}
  .hero#top .hero-content-v31{
    width:min(620px,calc(88% - min(34vw,460px) - 4vw))!important;
    margin-left:6%!important;margin-right:auto!important;
    position:relative;z-index:3;
    background:linear-gradient(135deg,rgba(32,24,26,.52),rgba(54,33,39,.30))!important;
  }
  .hero#top .hero-clinic-top{z-index:3}
}
@keyframes v157-frame{from{outline-offset:26px;outline-color:rgba(229,201,137,0)}to{outline-offset:12px;outline-color:rgba(229,201,137,.42)}}

/* ── ۶) دکمه‌ها: بازخورد فشردن و براقیت ملایم روی دسکتاپ ── */
.btn-primary,.btn-ghost,.nav-cta,.cta-primary,.cta-secondary,.cta-link,.back-home-btn,.map-chip,.mobile-cta a,.pager a{
  transition:transform .16s var(--ease-out),background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .25s ease!important;
}
.btn-primary:active,.btn-ghost:active,.nav-cta:active,.cta-primary:active,.cta-secondary:active,.cta-link:active,.back-home-btn:active,.map-chip:active,.mobile-cta a:active,.pager a:active{transform:scale(.97)!important}
@media (hover:hover) and (pointer:fine){
  .btn-primary,.cta-primary{position:relative;overflow:hidden;isolation:isolate}
  .btn-primary::after,.cta-primary::after{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.26) 50%,transparent 65%);
    transform:translateX(120%);transition:transform .75s var(--ease-out);
  }
  .btn-primary:hover::after,.cta-primary:hover::after{transform:translateX(-120%)}
  .btn-primary:hover,.btn-ghost:hover,.cta-primary:hover,.cta-secondary:hover{transform:translateY(-2px)}
}

/* ── ۷) کارت‌ها: بلند شدن ملایم فقط با ماوس؛ روی لمسی حالت هاور گیر نمی‌کند ── */
.service-card,.result-card,.article-full,.faq-item,.home-svc,.related-box,.reviewer-card,.value-item{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .25s ease,background-color .25s ease}
.result-card img,.article-img-wrap img{transition:transform .7s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .service-card:hover,.result-card:hover,.article-full:hover,.home-svc:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(74,56,40,.13)}
  .result-card:hover img,.article-full:hover .article-img-wrap img{transform:scale(1.04)}
}
@media (hover:none){
  .service-card:hover,.result-card:hover,.article-full:hover,.faq-item:hover,.home-svc:hover,.result-card:hover img{transform:none!important}
}

/* ── ۸) صفحهٔ اول: کارت‌های خدمات شماره‌دار با خط رنگی بالا ── */
.home-svc-grid{counter-reset:svc}
.home-svc{position:relative;overflow:hidden;counter-increment:svc;border-radius:6px!important;padding:24px 22px 22px!important}
.home-svc::before{content:"";position:absolute;top:0;right:0;left:0;height:3px;background:linear-gradient(270deg,var(--wine),var(--brass));transform:scaleX(.18);transform-origin:100% 50%;transition:transform .5s var(--ease-out)}
.home-svc::after{content:counter(svc,persian);position:absolute;top:14px;left:18px;font-size:1.6rem;font-weight:300;line-height:1;color:var(--brass);opacity:.35}
.home-svc h3{padding-left:34px}
@media (hover:hover) and (pointer:fine){.home-svc:hover::before{transform:scaleX(1)}}
html.js .v157-stagger.in>.home-svc::before{transform:scaleX(1);transition-delay:calc(var(--i,0) * 60ms + .3s)}

/* ── ۹) صفحهٔ اول: پرسش‌های پرتکرار به‌صورت آکاردئونی با باز شدن نرم ── */
.home-faq details{border:1px solid var(--line);border-radius:8px;background:var(--surface);margin:0 0 10px;overflow:hidden}
.home-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:14px 18px;font-weight:700;font-size:1rem;color:var(--body)}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary::after{content:"";flex:none;width:10px;height:10px;border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(-45deg) translateY(-2px);transition:transform .25s var(--ease-out)}
.home-faq details[open] summary::after{transform:rotate(135deg) translateY(-2px)}
.home-faq details p{margin:0;padding:0 18px 16px;line-height:2.05}
.home-faq details[open]{border-color:var(--line-strong);box-shadow:0 10px 26px rgba(74,56,40,.07)}
@supports (interpolate-size:allow-keywords){
  .home-faq{interpolate-size:allow-keywords}
  .home-faq details::details-content{block-size:0;overflow:clip;transition:block-size .3s var(--ease-out),content-visibility .3s allow-discrete}
  .home-faq details[open]::details-content{block-size:auto}
}

/* ── ۱۰) صفحهٔ اول: دکمهٔ اصلی رزرو در بخش پایانی پررنگ و اول ── */
.home-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.home-cta-actions .btn-primary{order:-1}
@media (max-width:640px){
  .home-cta-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .home-cta-actions .btn-primary{grid-column:1/-1;min-height:52px}
  .home-cta-actions a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:10px 8px!important;font-size:.85rem}
}

/* ── ۱۱) نوار پیشرفت مطالعه در مقاله‌ها ── */
.v157-progress{position:fixed;top:0;right:0;left:0;height:3px;z-index:1200;pointer-events:none;background:linear-gradient(270deg,var(--wine),var(--brass));transform:scaleX(0);transform-origin:100% 50%}
@supports (animation-timeline:scroll()){
  .v157-progress{animation:v157-progress linear both;animation-timeline:scroll(root)}
}
@keyframes v157-progress{to{transform:scaleX(1)}}

/* ── V158: نوار «بازگشت به خانه / مقالات» فقط بالای صفحه است و هنگام اسکرول همراه صفحه نمی‌آید ── */
.back-home-bar{position:relative!important;top:auto!important}

/* ── ۱۲) موبایل: هدر هنگام اسکرول به پایین کنار می‌رود و با اسکرول به بالا برمی‌گردد ── */
@media (max-width:900px){
  #siteHeader{transition:transform .34s var(--ease-drawer),background-color .35s ease,box-shadow .35s ease,border-color .35s ease!important}
  #siteHeader.v157-hide{transform:translateY(-110%)}
}

/* ── ۱۳) نوار ثابت رزرو و تماس در موبایل ── */
@media (max-width:768px){
  /* V158: قاب دکمهٔ «تماس» از هر چهار طرف کامل است (قبلاً خط پایین حذف می‌شد) */
  .mobile-cta .mc-call{border:2px solid var(--wine)!important;box-sizing:border-box}
  .mobile-cta .mc-book{border:2px solid var(--wine)!important;box-sizing:border-box}
  .mobile-cta svg{width:20px;height:20px}
  .v157-first .mobile-cta{animation:v157-cta-in .55s var(--ease-drawer) .45s both}
  .mobile-cta .mc-call svg{transform-origin:50% 55%}
  .mobile-cta .mc-call.v157-ring svg{animation:v157-ring 1s var(--ease-in-out) 1}
}
@keyframes v157-cta-in{from{transform:translateY(110%)}}
@keyframes v157-ring{0%,100%{transform:rotate(0)}12%{transform:rotate(-16deg)}26%{transform:rotate(14deg)}40%{transform:rotate(-10deg)}54%{transform:rotate(7deg)}68%{transform:rotate(-3deg)}}

/* ── کاهش حرکت: نمایش فوری و ثابت همه چیز ── */
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal],html.js .v157-stagger>*,html.js img.v157-img{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero#top .hero-bg,.hero-portrait,.hero-portrait img,.hero#top .hero-content-v31 *{animation:none!important}
  .hero#top .hero-kicker-v31,.hero#top .hero-slogan-line,.hero#top .hero-seo-title,.hero#top .hero-sub,.hero#top .hero-service-links,.hero#top .hero-trust-row,.hero#top .hero-ctas-min,.hero#top .hero-phone{opacity:1!important;transform:none!important;filter:none!important}
  #siteHeader.v157-hide{transform:none}
  .v157-progress{animation:none}
}
@media print{.v157-progress{display:none}html.js [data-reveal],html.js .v157-stagger>*,html.js img.v157-img{opacity:1!important;transform:none!important;clip-path:none!important}}

/* ═════════ V159 — اصلاحات بررسی زنده در Chrome و Firefox ═════════ */

/* ۱) هدر در لپ‌تاپ‌ها (۹۸۱ تا ۱۳۹۹ پیکسل؛ مثلاً ویندوز با بزرگ‌نمایی ۱۲۵٪ یا ۱۵۰٪):
      منو دیگر دو ردیف نمی‌شود و نام پزشک نمی‌شکند */
@media (min-width:981px) and (max-width:1399px){
  #siteHeader{padding-inline:3%!important}
  #siteHeader .brand{white-space:nowrap}
  #siteHeader nav ul{gap:2px!important;flex-wrap:nowrap!important}
  #siteHeader nav ul a:not(.nav-cta){padding:8px 9px!important}
  #siteHeader nav ul a.nav-cta{padding:10px 16px!important;white-space:nowrap}
}
/* زیر ۱۲۰۰ پیکسل همهٔ پیوندها جا نمی‌شوند: دکمهٔ رزرو در هدر می‌ماند و بقیه در منوی کشویی هستند */
@media (min-width:981px) and (max-width:1199px){
  #siteHeader nav ul:not(.mobile-open)>li:not(:last-child){display:none}
  #siteHeader nav{margin-inline-start:auto}
  #siteHeader .menu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-inline-start:12px}
  #siteHeader nav ul.mobile-open{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;position:fixed;top:var(--header-h,72px);right:0;left:0;padding:14px 3% 22px!important;z-index:120;background:#FAF7F3!important;box-shadow:0 18px 40px rgba(74,56,40,.16)!important;border-top:1px solid var(--line);max-height:calc(100vh - var(--header-h,64px));overflow-y:auto}
  #siteHeader nav ul.mobile-open>li{width:100%!important;display:block!important}
  #siteHeader nav ul.mobile-open a{display:block!important;width:100%;padding:13px 14px!important;font-size:.98rem!important;border-bottom:1px solid var(--line)!important;border-radius:10px;box-shadow:none}
  #siteHeader nav ul.mobile-open a.nav-cta{text-align:center;margin-top:10px;border-bottom:0!important}
}

/* ۲) نوار تماس پایین فوتر: جداکنندهٔ «|» آویزان در انتهای خط حذف شد */
.footer-contact-strip{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:22px;row-gap:8px}
.footer-contact-strip .sep{display:none!important}

/* ۳) فهرست مقاله‌ها در دسکتاپ: دو ستونه با تصویر هم‌اندازه به‌جای ستون باریک و تصاویر خیلی بلند */
@media (min-width:900px){
  .embedded-articles{max-width:1180px!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:stretch}
  .embedded-articles>.article-full{margin:0!important;display:flex;flex-direction:column}
  .embedded-articles>.article-full>.article-img-wrap{aspect-ratio:16/10!important;height:auto!important;background:#efe8de!important}
  .embedded-articles>.article-full>.article-img-wrap picture{height:100%!important}
  .embedded-articles>.article-full>.article-img-wrap img{height:100%!important;object-fit:cover!important}
  .embedded-articles>.article-full>.article-img-wrap img[src*="ghabl-baad"]{object-fit:contain!important}
  .embedded-articles>.article-full>a:last-child{margin-top:auto!important;align-self:flex-start}
  .embedded-articles>.article-full:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 13px);justify-self:center}
}

/* ۴) صفحهٔ تماس و دلیجان: ستون اطلاعات وسط صفحه، ردیف‌ها به شکل کارت و آیکون‌های یکدست به‌جای ایموجی */
.contact:not(:has(>:nth-child(2))){grid-template-columns:minmax(0,1fr)!important;max-width:980px;margin-inline:auto}
.info-row .ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(154,116,52,.12);color:var(--wine);flex:none}
.info-row .ic svg{width:21px;height:21px}
@media (min-width:768px){
  .contact:not(:has(>:nth-child(2))) .contact-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-content:start}
  .contact:not(:has(>:nth-child(2))) .contact-info>*:not(.info-row){grid-column:1/-1}
  .contact:not(:has(>:nth-child(2))) .contact-info>.info-row{margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);align-items:center}
}

/* ۵) پرسش‌ها، بخش پرسش در دلیجان و نظرات: ستون محتوا وسط صفحه، نه چسبیده به راست با فضای خالی بزرگ در چپ */
.faq>.section-head,.faq>.faq-list,.faq>.blog-cta,.reviews>.section-head{max-width:880px;margin-inline:auto!important}
.faq>.blog-cta{display:block;width:fit-content}