/* هاست‌سنج — استایل سایت (RTL، بدون وابستگی) */
@font-face{font-family:Vazirmatn;src:url(../fonts/Vazirmatn-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/Vazirmatn-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/Vazirmatn-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/Vazirmatn-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* کاغذ گرم به‌جای خاکستری آبی — تمایز اصلی از ظاهر قالبی */
  --bg:#f8f7f4;--surface:#ffffff;--surface-2:#f6f5f1;--text:#161d26;--muted:#616b78;--line:#e0ded8;--line-2:#eceae5;
  /* سرمه‌ای عمیق: رسمی، و عمداً آبیِ پیش‌فرض فریم‌ورک‌ها نیست */
  --primary:#17456b;--primary-h:#0f3252;--primary-soft:#e9eef3;--primary-text:#17456b;
  --accent:#0e6b57;--accent-soft:#e8f1ee;--success:#136b4c;--success-soft:#e9f2ee;--warn:#8a5a12;--warn-soft:#f7f0e3;--danger:#9b2c2c;--danger-soft:#f8eded;
  --star:#b0810f;--radius:10px;--radius-sm:7px;
  /* مرز مویی کار سایه را می‌کند؛ سایهٔ سنگین نشانهٔ قالب آماده است */
  --shadow:0 1px 1px rgba(22,29,38,.03);--shadow-lift:0 1px 2px rgba(22,29,38,.05),0 8px 20px -12px rgba(22,29,38,.22);
  --font:Vazirmatn,"Segoe UI",Tahoma,"Iranian Sans",Arial,sans-serif;--header-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#12161c;--surface:#181d25;--surface-2:#1e242e;--text:#e6e8ec;--muted:#9aa3b0;--line:#2c333e;--line-2:#242a34;--primary:#2a6d9e;--primary-h:#327ba8;--primary-soft:#1d2a37;--primary-text:#8fbce4;--accent:#4fc3a1;--accent-soft:#122b25;--success:#5cbf94;--success-soft:#132a20;--warn:#d9a441;--warn-soft:#2f2513;--danger:#e08585;--danger-soft:#2f1b1b;--star:#d4af37;--shadow:0 1px 1px rgba(0,0,0,.25);--shadow-lift:0 1px 2px rgba(0,0,0,.3),0 8px 20px -12px rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme=dark]{--bg:#12161c;--surface:#181d25;--surface-2:#1e242e;--text:#e6e8ec;--muted:#9aa3b0;--line:#2c333e;--line-2:#242a34;--primary:#2a6d9e;--primary-h:#327ba8;--primary-soft:#1d2a37;--primary-text:#8fbce4;--accent:#4fc3a1;--accent-soft:#122b25;--success:#5cbf94;--success-soft:#132a20;--warn:#d9a441;--warn-soft:#2f2513;--danger:#e08585;--danger-soft:#2f1b1b;--star:#d4af37;--shadow:0 1px 1px rgba(0,0,0,.25);--shadow-lift:0 1px 2px rgba(0,0,0,.3),0 8px 20px -12px rgba(0,0,0,.6);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15.5px;line-height:1.8;font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-underline-offset:3px}
/* ارقام هم‌عرض: قیمت‌ها و اعداد ستون‌ها زیر هم قفل می‌شوند — مهم‌ترین نشانهٔ صفحهٔ حرفه‌ای */
.num,td,th,.price-main,.hero-stats b,.stars-num,.vscore b,.rs-num,.reco-score b,.pcard-price b,.hub-links small,.chip small,.facts-grid b{font-variant-numeric:tabular-nums;font-feature-settings:"ss01","tnum"}
img,svg{max-width:100%;vertical-align:middle}
a{color:var(--primary-text);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{line-height:1.55;margin:0 0 .5em;font-weight:700;letter-spacing:0}
h1{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.1rem);line-height:1.45}h2{font-size:1.22rem}h3{font-size:1.02rem}h4{font-size:.94rem;margin-bottom:.35em}
p{margin:0 0 1em}ul,ol{margin:0 0 1em;padding-inline-start:1.4em}
b,strong{font-weight:700}small,.small{font-size:.86em}.muted{color:var(--muted)}
/* نام‌های لاتین بلند (MihanWebHost، نام دامنه، کد پلن) در متن فارسی نباید کادر را پهن کنند */
h1,h2,h3,h4,p,li,dd,dt,td,th,figcaption{overflow-wrap:break-word}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* الگوی استاندارد: تا وقتی فوکوس نشده کاملاً بی‌ابعاد است.
   نسخهٔ قبلی با top منفی جابه‌جا می‌شد و در عرض‌های خیلی کم از لبه بیرون می‌زد و اسکرول افقی می‌ساخت. */
.skip-link{position:fixed;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;background:var(--primary);color:#fff;border-radius:8px;z-index:100}
.skip-link:focus{width:auto;height:auto;padding:8px 14px;overflow:visible;clip:auto;clip-path:none;inset-inline-start:8px;top:8px}
.container{max-width:1440px;margin:0 auto;padding:0 16px}
.ic{flex:none;vertical-align:-.2em}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:14px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.15rem;color:var(--text);white-space:nowrap}
.brand-mark{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--primary);color:#fff}
/* چک‌باکس با display:none از ترتیب تب و درخت دسترس‌پذیری بیرون می‌افتد؛ آن‌وقت زیر ۱۱۵۰px
   منو هیچ راهِ بازشدن با کیبورد ندارد (WCAG 2.1.1 سطح A). پس پنهانش می‌کنیم بدون حذف از ترتیب تب. */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-burger{display:none;cursor:pointer;padding:8px;border-radius:8px}
.nav-toggle:focus-visible~.nav-burger{outline:2px solid var(--focus,var(--primary));outline-offset:2px}
.nav{flex:1}.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:2px}
/* برچسب‌های ردیف اول نباید وسط کلمه بشکنند: تا ۱۲۸۰px جا هست، ولی نزدیک ۱۱۵۱px «گواهی SSL» و
   «سرور مجازی» دو خط می‌شدند و نوار بالا بلند می‌شد. با nowrap به‌جای منو، کادر جستجو کمی جمع
   می‌شود (min-width:0 دارد) و هدر روی یک خط می‌ماند. */
.nav-item>a{display:flex;align-items:center;gap:4px;padding:10px 12px;border-radius:9px;color:var(--text);font-weight:500;white-space:nowrap}
.nav-item>a:hover,.nav-item:focus-within>a{background:var(--primary-soft);color:var(--primary-text);text-decoration:none}
.has-sub{position:relative}
/* پنل باید هم‌اندازهٔ محتوایش باز شود. نسخهٔ قبلی فقط min-width داشت و چون ستون‌ها minmax(0,1fr)
   بودند، پنل دقیقاً روی همان ۲۶۰px قفل می‌شد و هر ستون ۱۲۰px می‌ماند؛ برچسب‌های nowrap (تا ۱۹۶px)
   بیرون از کادرِ خودشان رسم می‌شدند و روی ستون کناری و روی متن صفحه می‌افتادند.
   width:max-content ستون‌ها را تا پهن‌ترین برچسب باز می‌کند و max-width نمی‌گذارد پنل از قاب بزند بیرون. */
.sub{display:none;position:absolute;top:calc(100% + 10px);inset-inline-start:0;width:max-content;max-width:min(520px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lift);padding:8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px;z-index:60}
/* پلِ نامرئی روی فاصلهٔ ۱۰px تا نوار بالا: بدون آن ماوس وسط راه از hover بیرون می‌افتد و منو بسته می‌شود */
.sub::before{content:"";position:absolute;inset-inline:0;bottom:100%;height:10px}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:grid}
/* nowrap برداشته شد: با width:max-content برچسب‌ها به‌طور طبیعی یک‌خطی می‌مانند و فقط اگر پنل به
   max-width بخورد می‌شکنند — یعنی دیگر هیچ‌وقت از ستون بیرون نمی‌زنند. */
.sub-link{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:var(--text);line-height:1.65;overflow-wrap:break-word}
.sub-link:hover{background:var(--surface-2);text-decoration:none;color:var(--primary-text)}
.search{display:flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:0 4px 0 10px;flex:0 1 240px;min-width:0}
.search input{border:0;background:transparent;padding:8px 6px;width:100%;outline:0}
/* outline صفر شده تا قاب دوتایی نشود؛ نشانهٔ فوکوس روی خودِ قاب بیرونی می‌نشیند */
.search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft),0 0 0 1px var(--primary),0 0 0 1px var(--primary)}.search input::placeholder{color:var(--muted)}
.search button{border:0;background:transparent;padding:6px;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.theme-toggle{border:1px solid var(--line);background:var(--surface);border-radius:10px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
@media (max-width:1150px){
  .nav-burger{display:grid;place-items:center;order:3}
  .nav{position:absolute;top:100%;inset-inline:0;background:var(--surface);border-bottom:1px solid var(--line);display:none;max-height:calc(100vh - var(--header-h));overflow:auto;box-shadow:var(--shadow)}
  .nav-toggle:checked~.nav{display:block}
  .nav-list{flex-direction:column;padding:8px 16px 16px}.nav-item>a{font-size:1.05rem}
  /* در منوی برگری پنل شناور نیست. repeat(2,1fr) قبلی همان تلهٔ min-content بود: 1fr کفِ auto دارد،
     پس ستون زیر عرض برچسب جمع نمی‌شد و منو در گوشی افقی اسکرول می‌خورد. auto-fill خودش تصمیم
     می‌گیرد چند ستون جا می‌شود و در باریک‌ترین حالت به یک ستون می‌رسد. */
  .sub{display:grid;position:static;width:auto;max-width:none;box-shadow:none;border:0;border-radius:0;padding:0 8px 8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
  .sub::before{display:none}
  .search{order:4;flex:1 1 100%;min-width:0}.theme-toggle{order:2;margin-inline-start:auto}
  .header-inner{flex-wrap:wrap;row-gap:8px;padding-bottom:8px}
}

/* نمایشگرهای خیلی باریک (مثل صفحهٔ جلویی گوشی‌های تاشو، ~۲۸۰px):
   نام سایت و حاشیه‌ها کوچک می‌شوند تا نوار بالا سرریز نکند. */
@media (max-width:359px){
  .container{padding:0 12px}
  main{padding:16px 12px 40px}
  .header-inner{gap:8px}
  .brand{font-size:1rem;gap:6px}
  .brand-mark{width:30px;height:30px;border-radius:8px}
  .theme-toggle{width:34px;height:34px}
  .nav-burger{padding:5px}
  .hero h1{font-size:1.35rem}
}

/* ---------- Layout ---------- */
main{padding:20px 16px 48px}
/* minmax(0,…) لازم است وگرنه ستون گرید زیر عرضِ min-content جدول جمع نمی‌شود و صفحه در موبایل افقی اسکرول می‌خورد */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.layout>.main,.layout>.sidebar{min-width:0}
.sidebar{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:16px}
/* زیر ۱۲۴۰px ستون کناری پایین می‌رود: در بازهٔ ۱۰۰۰ تا ۱۲۴۰ ستونِ اصلی برای جدول هفت‌ستونی کم می‌آورد
   و جدول اسکرول افقی می‌خورد. ستون اصلی در ۱۲۴۰ دقیقاً ۸۸۰px می‌شود که جدول در آن جا می‌گیرد. */
@media (max-width:1279px){.layout{grid-template-columns:minmax(0,1fr)}.sidebar{position:static}}
.section{margin:34px 0}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.section-head h2{margin:0;display:flex;align-items:center;gap:8px}.section-head p{margin:0;max-width:70ch}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}@media (max-width:800px){.two-col{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.link{display:inline-flex;align-items:center;gap:4px;font-weight:500;min-height:24px}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 14px;font-size:.86rem;color:var(--muted)}
.breadcrumbs li+li::before{content:"›";margin-inline-end:6px;color:var(--muted)}
.breadcrumbs a{color:var(--muted);display:inline-block;padding:2px 4px;margin-inline:-4px;min-width:24px;min-height:24px;text-align:center}.breadcrumbs a:hover{color:var(--primary-text)}
.page-head{margin-bottom:18px}.answer{font-size:1.02rem;max-width:80ch;background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--primary);padding:14px 18px;border-radius:12px}
.keyfacts{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px}.keyfacts li{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.86rem}
.ph-inline{display:flex;align-items:center;gap:12px}.ph-inline h1{margin:0}

/* ---------- Buttons / chips / badges ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:8px;border:1px solid transparent;font-weight:600;cursor:pointer;white-space:nowrap;line-height:1.4;transition:.15s;max-width:100%}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-h)}
.btn-soft{background:var(--primary-soft);color:var(--primary-text)}.btn-soft:hover{background:var(--primary);color:#fff}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:6px 10px;font-size:.86rem;border-radius:8px}.btn-lg{padding:12px 22px;font-size:1.05rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:.82rem;color:var(--text);white-space:nowrap;max-width:100%}
.chip-soft{background:transparent}.chip-lg{padding:7px 14px;font-size:.92rem}.chip:hover{border-color:var(--primary);color:var(--primary-text);text-decoration:none}.chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.chip small{color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:.74rem;font-weight:600;line-height:1.6;white-space:nowrap}
.badge-ok{background:var(--success-soft);color:var(--success)}.badge-warn{background:var(--warn-soft);color:var(--warn)}.badge-primary{background:var(--primary-soft);color:var(--primary-text)}
.alert{padding:12px 16px;border-radius:10px;margin:14px 0;border:1px solid}.alert-ok{background:var(--success-soft);color:var(--success);border-color:transparent}.alert-err{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.empty{text-align:center;padding:40px 16px;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius)}

/* ---------- Stars ---------- */
.stars{position:relative;display:inline-block;font-size:.95rem;line-height:1;letter-spacing:1px;color:var(--line);direction:ltr;white-space:nowrap}
.stars-bg{color:color-mix(in srgb,var(--muted) 40%,transparent)}.stars-fg{position:absolute;left:0;top:0;overflow:hidden;color:var(--star);white-space:nowrap}
.stars-num{font-weight:700;font-size:.9rem}.stars-count{color:var(--muted);font-size:.8rem}.stars-empty{font-size:.8rem;color:var(--muted);letter-spacing:0}

/* ---------- Hero (home) ---------- */
.hero{text-align:center;padding:34px 0 22px;max-width:900px;margin-inline:auto}
@media (max-width:600px){.hero{padding:22px 0 16px}.hero-chips{gap:6px;margin-bottom:18px}}
.hero h1{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.6rem);margin-bottom:8px}.hero-sub{color:var(--muted);font-size:1.05rem;max-width:60ch;margin:0 auto 22px}
.hero-search{display:flex;gap:8px;max-width:680px;margin:0 auto 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:var(--shadow)}
.hero-search input{flex:1;border:0;background:transparent;padding:10px 12px;outline:0;min-width:0;font-size:1rem}
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:22px}
.hero-stats{list-style:none;padding:0;margin:0 auto;display:flex;justify-content:center;gap:0 28px;flex-wrap:wrap}
.hero-stats li{display:flex;flex-direction:column;padding:0 14px}
.hero-stats b{font-size:1.38rem;font-weight:700;color:var(--primary-text);line-height:1.4}.hero-stats span{color:var(--muted);font-size:.84rem}
/* خط جداکنندهٔ مویی فقط وقتی همه در یک سطرند؛ در موبایل که می‌شکنند حذف می‌شود */
@media (min-width:760px){.hero-stats li+li{border-inline-start:1px solid var(--line)}}

/* ---------- Grids ---------- */
/* تابلوی راهنما: یک قاب با خطوط مویی به‌جای چند جعبهٔ جدا با ارتفاع نابرابر.
   منفی‌حاشیه + overflow:hidden مرزهای بیرونی را می‌بُرد، پس در هر تعداد ستون و هر شکستی درست می‌ماند. */
.hub-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.hub-col{padding:15px 17px 14px;border-inline-start:1px solid var(--line);border-block-start:1px solid var(--line);margin-inline-start:-1px;margin-block-start:-1px;min-width:0}
.hub-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.99rem;color:var(--text);padding-bottom:9px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.hub-title .ic{color:var(--primary-text)}
.hub-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-title:hover{text-decoration:none;color:var(--primary-text)}
.hub-links{list-style:none;padding:0;margin:0}
.hub-links li+li{border-top:1px solid var(--line-2)}
.hub-links a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;color:var(--text);font-size:.88rem}
.hub-links a:hover{color:var(--primary-text);text-decoration:none}
.hub-links a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-links small{flex:none;color:var(--muted);font-size:.77rem}
.hub-empty{margin:6px 0 0;font-size:.88rem}
.hub-empty a{display:inline-block;min-height:24px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:14px}
.cat-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;color:var(--text);box-shadow:var(--shadow);transition:.15s}.cat-card:hover{text-decoration:none;border-color:var(--primary);box-shadow:var(--shadow-lift)}
.cat-card h2,.cat-card h3{font-size:1rem;margin:10px 0 2px}.cat-card p{margin:0}.cat-icon{width:42px;height:42px;border-radius:11px;background:var(--primary-soft);color:var(--primary-text);display:grid;place-items:center}
.cat-from{font-size:.92rem;color:var(--success)}.cat-desc{font-size:.84rem;color:var(--muted);margin-top:6px!important}
.pcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr));gap:14px}.pcard-grid.wide{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px 16px;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.pcard:hover{border-color:#c8c5bd;box-shadow:var(--shadow-lift)}
.pcard.is-featured{border-top:2px solid var(--primary);padding-top:16px}
.pcard-flag{position:absolute;top:14px;inset-inline-end:16px;font-size:.72rem;font-weight:600;color:var(--primary-text);background:var(--primary-soft);border-radius:4px;padding:2px 7px;line-height:1.7}
/* جای برچسب رزرو می‌شود تا نام شرکت هرگز زیرش نرود */
.pcard-head{display:flex;gap:11px;align-items:center;color:var(--text);min-width:0}
.pcard.is-featured .pcard-head{padding-inline-end:62px}
.pcard-head:hover{text-decoration:none}.pcard-head:hover .pcard-name{color:var(--primary-text)}
.pcard-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.pcard-name{font-size:1.02rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-rating{font-size:.8rem}
/* دقیقاً دو خط: ارتفاع کارت‌ها را قفل می‌کند */
.pcard-desc{margin:11px 0 0;color:var(--muted);font-size:.86rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.92em}
.pcard-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line-2)}
.pcard-price span{font-size:.78rem;color:var(--muted)}
.pcard-price b{font-size:1.16rem;font-weight:700}
.pcard-price i{font-style:normal;font-size:.76rem;color:var(--muted)}
.pcard-price .pcard-na{color:var(--muted);font-weight:500}
/* سه سطر ثابت با خط مویی — همهٔ کارت‌ها روی یک شبکه می‌نشینند */
.pcard-meta{display:grid;grid-template-columns:auto minmax(0,1fr);margin:12px 0 0;font-size:.85rem}
.pcard-meta dt{color:var(--muted);font-size:.79rem;padding:5px 0;border-bottom:1px solid var(--line-2)}
.pcard-meta dd{margin:0;padding:5px 0;text-align:end;font-weight:500;border-bottom:1px solid var(--line-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-meta dt:nth-last-of-type(1),.pcard-meta dd:nth-last-of-type(1){border-bottom:0}
/* گرید به‌جای flex:1 — عرض دکمه‌ها دقیقاً برابر می‌شود */
.pcard-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:14px}
@media (max-width:400px){.pcard-actions{grid-template-columns:minmax(0,1fr)}}
.pcard-actions .btn{width:100%;padding-inline:8px;font-size:.86rem}
.plogo{--logo:44px;width:var(--logo);height:var(--logo);border-radius:9px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}
/* لوگوی بنریِ عریض داخل کادر مربع به نوار نازک و ناخوانا تبدیل می‌شود؛
   ارتفاع ثابت می‌ماند و عرض تا ۱٫۸ برابر اجازهٔ رشد دارد. مونوگرام (span) مربع می‌ماند. */
img.plogo{width:auto;min-width:var(--logo);max-width:calc(var(--logo) * 1.8);padding:3px}
/* تک‌رنگِ محدود به طیف سرمه‌ای: تمایز بدون رنگین‌کمانِ تصادفی */
.plogo-text{display:inline-grid;place-items:center;font-weight:600;font-size:.92rem;color:hsl(var(--h) 34% 32%);background:hsl(var(--h) 26% 95%);border:1px solid hsl(var(--h) 24% 87%)}
:root[data-theme=dark] .plogo-text{color:hsl(var(--h) 40% 78%);background:hsl(var(--h) 24% 20%);border-color:hsl(var(--h) 20% 28%)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .plogo-text{color:hsl(var(--h) 40% 78%);background:hsl(var(--h) 24% 20%);border-color:hsl(var(--h) 20% 28%)}}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px}.post-grid.wide{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.post-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;color:var(--text);box-shadow:var(--shadow)}.post-card:hover{text-decoration:none;border-color:var(--primary)}.post-card h2,.post-card h3{font-size:1rem;margin-bottom:6px}.post-card p{color:var(--muted);font-size:.88rem;margin:0 0 6px}.post-card img{border-radius:10px;margin-bottom:10px;aspect-ratio:16/9;object-fit:cover;width:100%}
.changes,.mini-reviews{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.changes li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:.9rem}.changes li a{color:var(--text);flex:1 1 200px}
.change{font-weight:600}.change.up{color:var(--danger)}.change.down{color:var(--success)}
.mini-reviews a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:var(--text)}.mini-reviews a:hover{border-color:var(--primary);text-decoration:none}.mini-reviews p{margin:4px 0;color:var(--muted);font-size:.88rem}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;counter-reset:s}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.steps li>span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;margin-bottom:8px}.steps h3{margin-bottom:4px}.steps p{margin:0;color:var(--muted);font-size:.9rem}

/* ---------- Providers strip + filters ---------- */
.providers-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.strip-card{flex:none;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px;color:var(--text);min-width:200px}.strip-card:hover,.strip-card.active{border-color:var(--primary);text-decoration:none}.strip-card div{display:flex;flex-direction:column;line-height:1.4}
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;padding:14px 16px;margin:8px 0 10px}
.filters label{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--muted);flex:1 1 min(100%,140px);min-width:0}
.filters select{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:7px 10px;color:var(--text);width:100%;min-width:0}
.filters-actions{display:flex;gap:6px}.filters [data-autosubmit] button[type=submit]{display:none}
.cycle-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;margin-inline-start:auto}
.cycle-toggle.standalone{margin:0 0 10px}
.cycle-toggle button{border:0;background:transparent;padding:6px 14px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:600}.cycle-toggle button.active{background:var(--surface);color:var(--primary-text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.results-count{margin:0 0 8px}

/* ---------- Plans table ---------- */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
table.plans th,table.plans td,table.simple th,table.simple td,table.compare-table th,table.compare-table td{padding:11px 11px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line-2)}
table.plans thead th,table.simple thead th,table.compare-table thead th{background:var(--surface-2);color:var(--muted);font-size:.8rem;font-weight:600;position:sticky;top:0;z-index:1;white-space:nowrap}
table.plans tbody tr.plan-row:hover{background:color-mix(in srgb,var(--primary-soft) 40%,transparent)}
.prov{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:700;line-height:1.5}.prov-name{min-width:0;overflow-wrap:break-word}.prov:hover{color:var(--primary-text);text-decoration:none}.prov .plogo{--logo:32px;border-radius:8px}
.prov-rating{margin:2px 0 4px}.plan-name{font-weight:600;margin:5px 0 5px;font-size:.94rem;line-height:1.6}
.c-provider{min-width:176px}
.c-res{min-width:165px}.res{display:block;font-size:.88rem;line-height:1.7}.res b{font-weight:600}.res small{color:var(--muted)}
.c-meta{min-width:132px;font-size:.88rem}.dc{display:inline-flex;gap:4px;align-items:center;margin-top:4px}
.c-price{min-width:138px;white-space:nowrap}
.c-price .badge{margin-top:6px}.price-main{font-size:1.15rem;font-weight:700;color:var(--success)}.price-unit{font-size:.8rem;color:var(--muted)}
.price-sub{display:block;font-size:.78rem;color:var(--muted);white-space:normal}.price-setup{color:var(--warn)}
.c-cta{white-space:nowrap;text-align:end;min-width:98px}
.c-cta .btn{display:flex;width:100%;justify-content:center;margin:0 0 5px}
.c-cta .btn:last-child{margin-bottom:0}
.plan-details td{background:var(--surface-2);padding:14px 18px 18px}
.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px;font-size:.9rem}
.checks{list-style:none;padding:0;margin:0}.checks li{display:flex;gap:6px;align-items:flex-start;padding:2px 0}.checks .ic{color:var(--success);margin-top:5px}.checks.cons .ic{color:var(--danger)}
.kv{list-style:none;padding:0;margin:0}.kv li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed var(--line-2)}.kv li span{color:var(--muted)}
.ad-row td{padding:8px;background:transparent}
/* تبلت هم کارت می‌گیرد: بین ۷۶۰ تا ۹۲۰ جدول هفت‌ستونی اسکرول افقی می‌خورد که بدتر از کارت است */
@media (max-width:920px){
  /* فقط ظرفِ جدولِ پلن‌ها؛ جدول‌های ساده (صفحهٔ هاب) کارت نمی‌شوند و باید اسکرول خودشان را نگه دارند
     وگرنه کل صفحه در موبایل افقی سرریز می‌کند. */
  .table-wrap.tw-cards{background:transparent;border:0;box-shadow:none;overflow:visible}
  table.plans,table.plans tbody,table.plans tr,table.plans td{display:block}table.plans thead{display:none}
  table.plans tr.plan-row{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px;box-shadow:var(--shadow)}
  /* چک‌باکس مقایسه در گوشهٔ کارت می‌نشیند؛ به‌صورت ردیف مستقل ۴۲ پیکسل فضای خالی می‌گرفت */
  .c-pick{position:absolute;top:12px;inset-inline-end:12px;width:auto;padding:0!important;z-index:1}
  .c-provider{padding-inline-end:40px!important}
  .res{line-height:1.65}
  table.plans td{border:0;padding:6px 0;overflow-wrap:break-word}
  table.plans td[data-label]::before{content:attr(data-label);display:block;font-size:.74rem;color:var(--muted);margin-bottom:2px}
  table.plans td.c-provider::before{display:none}
  .c-cta{display:flex!important;gap:8px;text-align:start;padding-top:10px!important}.c-cta .btn{flex:1}
  table.plans tr.plan-details{display:block;margin:-8px 0 12px;background:var(--surface-2);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);padding:8px 14px}
  table.plans tr.plan-details[hidden]{display:none}
  .ad-row{display:block;margin-bottom:12px}
}

/* ---------- Provider page ---------- */
.provider-head{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.ph-main{display:flex;gap:16px;align-items:center;flex:1 1 min(100%,380px);min-width:0}.ph-main>div{min-width:0}.ph-main .plogo{--logo:72px;border-radius:14px;font-size:1.6rem}.ph-main h1{margin-bottom:4px}.ph-desc{margin:6px 0 0;color:var(--muted);max-width:70ch}
.ph-cta{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:0;max-width:100%}
.ph-cta .btn{white-space:normal;text-align:center}
/* همان قابِ خط‌کشی‌شدهٔ تابلوی راهنما — زبان طراحی یکدست می‌ماند */
.facts-grid{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.facts-grid li{padding:11px 15px;display:flex;flex-direction:column;gap:1px;min-width:0;border-inline-start:1px solid var(--line);border-block-start:1px solid var(--line);margin-inline-start:-1px;margin-block-start:-1px}
.facts-grid span{font-size:.76rem;color:var(--muted)}.facts-grid b{font-size:.92rem;font-weight:600}
.proscons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}@media (max-width:700px){.proscons{grid-template-columns:minmax(0,1fr)}}
.proscons h2{font-size:1.05rem;display:flex;align-items:center;gap:6px}.pros h2 .ic{color:var(--success)}.cons h2 .ic{color:var(--danger)}.proscons ul{margin:0;padding-inline-start:1.2em}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 16px;position:sticky;top:var(--header-h);background:var(--bg);padding:8px 0;z-index:5}.tabs a{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:.88rem}.tabs a:hover{border-color:var(--primary);text-decoration:none}.tabs small{color:var(--muted)}

/* ---------- Reviews ---------- */
.reviews-summary{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px}@media (max-width:600px){.reviews-summary{grid-template-columns:minmax(0,1fr)}}
.rs-score{text-align:center;border-inline-end:1px solid var(--line)}@media (max-width:600px){.rs-score{border:0}}.rs-num{font-size:2.6rem;font-weight:700;line-height:1;color:var(--primary-text)}
.rs-bars{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}.rs-bars li{display:grid;grid-template-columns:44px minmax(0,1fr) 30px;gap:8px;align-items:center;font-size:.84rem}.rs-bar{height:8px;background:var(--line-2);border-radius:99px;overflow:hidden}.rs-bar span{display:block;height:100%;background:var(--star)}.rs-n{color:var(--muted)}
.review-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:12px}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px}.review-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}.review-stars{margin-inline-start:auto}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-soft);color:var(--primary-text);display:grid;place-items:center;font-weight:700}
.review-title{font-size:1rem;margin:4px 0}.review-body{margin:0 0 6px}.review-pc{display:grid;gap:4px;font-size:.88rem}.pc-pros{color:var(--success)}.pc-cons{color:var(--danger)}
.review-reply{margin-top:8px;background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:.9rem}
.review-list.compact .review{padding:10px 14px}
.review-form h3{margin-bottom:4px}.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px;margin:12px 0}.form-grid label{display:flex;flex-direction:column;gap:4px;font-size:.88rem;min-width:0}.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.form-grid input,.form-grid select,.form-grid textarea{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:9px 12px;outline:0;width:100%;min-width:0}.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft),0 0 0 1px var(--primary)}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.rating-input{border:0;padding:0;margin:0;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;align-items:center}.rating-input legend{font-size:.88rem;margin-bottom:2px;width:100%}
.rating-input input{position:absolute;opacity:0;width:0;height:0}.rating-input label{font-size:1.7rem;color:#948f85;cursor:pointer;line-height:1;transition:.1s;padding:3px 4px;min-width:24px;text-align:center}
.rating-input label:hover,.rating-input label:hover~label,.rating-input input:checked~label{color:var(--star)}
/* ورودی‌ها نامرئی‌اند، پس نشانهٔ فوکوس باید روی برچسبِ متناظر بیفتد */
.rating-input input:focus-visible+label{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}

/* ---------- Sidebar / misc ---------- */
.side-card h3{font-size:.98rem;margin-bottom:8px}.side-links{list-style:none;padding:0;margin:0}.side-links li{padding:5px 0;border-bottom:1px dashed var(--line-2)}.side-links li:last-child{border:0}.side-links a{display:flex;align-items:center;gap:8px;color:var(--text);min-height:24px}.side-links a:hover{color:var(--primary-text)}
.side-prices{list-style:none;padding:0;margin:0}.side-prices li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--line-2);font-size:.9rem}.side-prices li:last-child{border:0}
.ad{position:relative;text-align:center}.ad-label{position:absolute;top:4px;inset-inline-start:6px;font-size:.66rem;color:var(--muted);background:var(--surface);padding:0 5px;border-radius:4px;opacity:.8}.ad img{max-width:100%;height:auto;border-radius:10px}.ad-pixel{position:absolute;width:1px;height:1px;opacity:0}
.ad-header{margin:12px auto 0}.ad-block{margin:20px 0}.ad-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px}.ad-inline{padding:6px}
.prose{max-width:80ch}.prose.narrow{margin:0 auto}.prose h2{margin-top:1.6em}.prose h3{margin-top:1.3em}.prose img{border-radius:12px}.prose .cover{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:16px}.prose table{margin:1em 0}.prose td,.prose th{border:1px solid var(--line);padding:8px 10px}.prose blockquote{border-inline-start:4px solid var(--primary);margin:1em 0;padding:4px 16px;color:var(--muted)}.prose code{background:var(--surface-2);padding:1px 6px;border-radius:5px;direction:ltr;display:inline-block;font-size:.9em}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:8px;padding:0 16px}.faq-item summary{cursor:pointer;padding:12px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}.faq-item summary::-webkit-details-marker{display:none}.faq-item[open] summary .ic{transform:rotate(180deg)}.faq-a{padding:0 0 14px;color:var(--muted)}
.cta-box{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--primary-soft);border-radius:var(--radius);padding:16px 20px;margin:24px 0}
.compare-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}.compare-form label{display:flex;flex-direction:column;gap:4px;flex:1 1 min(100%,200px);font-size:.88rem;min-width:0}.compare-form select{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:9px 12px;width:100%;min-width:0}.vs{font-weight:700;color:var(--muted);align-self:center}
.pair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px}.pair-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:var(--text);min-width:0}.pair-card:hover{border-color:var(--primary);text-decoration:none}.pair-card span{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0;overflow-wrap:break-word}.pair-card em{color:var(--muted);font-style:normal;font-size:.8rem}.pair-card .plogo{--logo:32px;border-radius:8px}
.compare-heads{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center;margin-bottom:16px}.ch{display:flex;align-items:center;gap:12px;color:var(--text);min-width:0}.ch:hover{text-decoration:none;border-color:var(--primary)}.ch .plogo{--logo:56px;border-radius:12px}
table.compare-table th[scope=row]{background:var(--surface-2);font-weight:600;width:22%}table.compare-table td.win{background:var(--success-soft)}
@media (max-width:640px){.compare-heads{grid-template-columns:minmax(0,1fr);text-align:center}.compare-heads .vs{display:none}}
.pagination{display:flex;gap:6px;justify-content:center;margin:24px 0}.pagination a{padding:6px 12px;border:1px solid var(--line);border-radius:8px;color:var(--text)}.pagination a.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.error-page{text-align:center;padding:40px 0;max-width:640px;margin:0 auto}.error-code{font-size:4.6rem;font-weight:700;color:var(--muted);line-height:1;letter-spacing:.02em}.error-page .chips{justify-content:center;margin:16px 0}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface);border-top:1px solid var(--line);margin-top:30px;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(min(100%,150px),1fr));gap:28px;padding:34px 16px 20px}
.footer-about p{color:var(--muted);font-size:.86rem}.brand-footer{margin-bottom:8px}
.footer-col h3{font-size:.95rem;margin-bottom:8px}.footer-col ul{list-style:none;padding:0;margin:0}.footer-col li{padding:0}.footer-col a{color:var(--muted);display:inline-block;padding:4px 0;min-height:24px}.footer-col a:hover{color:var(--primary-text)}
.socials a{margin-inline-end:10px}
.footer-bottom{border-top:1px solid var(--line);padding:14px 16px 20px;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.8rem}
@media (max-width:800px){.footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media (max-width:500px){.footer-grid{grid-template-columns:minmax(0,1fr)}}
@media print{.site-header,.site-footer,.sidebar,.ad,.c-cta,.filters{display:none!important}.layout{grid-template-columns:1fr}}

/* ============ لایهٔ ۲: نشان‌ها، امتیاز ارزش، سبد مقایسه ============ */
.badge-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}
.badge-value{background:#f6efdd;color:#7a5a10}
.badge-cheap{background:var(--success-soft);color:var(--success)}
.badge-editor{background:var(--primary-soft);color:var(--primary-text)}
.badge-disk,.badge-rated,.badge-popular{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
:root[data-theme=dark] .badge-value{background:#332a15;color:#d9b968}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .badge-value{background:#332a15;color:#d9b968}}

.c-value{min-width:104px}
.vscore{display:flex;align-items:center;gap:7px}
.vbar{flex:1;height:7px;min-width:44px;background:var(--line-2);border-radius:99px;overflow:hidden}
.vbar>span{display:block;height:100%;border-radius:99px;background:var(--primary)}
.vscore b{font-size:.95rem;min-width:22px;text-align:center}
/* ۲۴×۲۴ کف اندازهٔ هدف در WCAG 2.2؛ دایرهٔ دیداری با پدینگ کوچک‌تر به نظر می‌رسد */
.info-btn{border:1px solid var(--line);background:var(--surface);color:var(--muted);width:24px;height:24px;border-radius:50%;font-size:.72rem;line-height:1;cursor:help;padding:0;margin-inline-start:4px;display:inline-grid;place-items:center;vertical-align:middle;outline-offset:2px}
.info-btn:hover{border-color:var(--primary);color:var(--primary-text)}

.c-pick{width:34px;padding-inline:8px!important}
.pick{display:inline-flex;cursor:pointer;position:relative;padding:9px;margin:-9px;align-items:center;justify-content:center}
.pick input{position:absolute;opacity:0;width:0;height:0}
/* قابِ کنترل تنها نشانهٔ دیداری آن است، پس باید ۳:۱ باشد؛ var(--line) فقط ۱٫۳۵:۱ بود */
.pick span{width:19px;height:19px;border:2px solid var(--muted);border-radius:5px;display:block;transition:.12s}
.pick:hover span{border-color:var(--primary)}
.pick input:checked+span{background:var(--primary);border-color:var(--primary);position:relative}
.pick input:checked+span::after{content:"";position:absolute;inset-inline-start:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pick input:focus-visible+span{box-shadow:0 0 0 3px var(--primary-soft),0 0 0 1px var(--primary)}

.plan-row.is-extra,.plan-details.is-extra{display:none}
.plans.show-all .plan-row.is-extra{display:table-row}
@media (max-width:920px){.plans.show-all .plan-row.is-extra{display:block}}
.show-more{text-align:center;margin:14px 0}
.show-more p{margin:6px 0 0}

/* نوار شناور مقایسه */
.cmp-bar{position:fixed;inset-inline:0;bottom:0;z-index:60;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 24px -12px rgba(0,0,0,.28);transform:translateY(110%);transition:.22s;padding:10px 0}
.cmp-bar.open{transform:none}
.cmp-inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cmp-items{display:flex;gap:8px;flex:1;flex-wrap:wrap;min-width:0}
.cmp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px;font-size:.85rem;max-width:230px}
.cmp-chip b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-chip button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:1.05rem;line-height:1;padding:0 2px}
.cmp-chip button:hover{color:var(--danger)}
.cmp-actions{display:flex;gap:8px;align-items:center}
@media (max-width:600px){.cmp-inner{gap:8px}.cmp-chip{max-width:150px}.cmp-actions{width:100%}.cmp-actions .btn{flex:1}}

/* ============ یابندهٔ هوشمند ============ */
.finder-head{max-width:760px}
.finder-form{margin-bottom:26px}
.finder-steps{list-style:none;padding:0;margin:0}
.fstep{margin-bottom:22px}
.fstep h2{font-size:1.05rem;display:flex;align-items:center;gap:9px;margin-bottom:10px}
.fnum{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-size:.85rem;flex:none}
.fopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:9px}
.fopts-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr))}
.fopt{position:relative;margin:0;cursor:pointer}
.fopt input{position:absolute;opacity:0;width:0;height:0}
.fopt-body{display:flex;flex-direction:column;gap:3px;height:100%;padding:13px 15px;border:1px solid var(--line);border-radius:9px;background:var(--surface);transition:.14s}
.fopt-body .ic{color:var(--primary-text)}
.fopt-body b{font-size:.95rem}
.fopt-body small{color:var(--muted);font-size:.8rem;line-height:1.6}
.fopt:hover .fopt-body{border-color:var(--primary)}
.fopt input:checked+.fopt-body{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);background:var(--primary-soft)}
.fopt input:focus-visible+.fopt-body{box-shadow:0 0 0 3px var(--primary-soft),0 0 0 1px var(--primary)}

.reco-list{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:13px;counter-reset:r}
.reco{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:16px;box-shadow:var(--shadow);position:relative}
.reco-top{border-color:var(--primary);border-width:2px}
.reco-flag{position:absolute;top:-11px;inset-inline-start:18px;background:var(--primary);color:#fff;font-size:.75rem;font-weight:600;padding:2px 11px;border-radius:999px;display:flex;align-items:center;gap:4px}
.reco-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:9px}
.reco-name{font-weight:700;color:var(--text);font-size:1.02rem;display:inline-block;min-height:24px}
.reco-plan{color:var(--muted);font-size:.9rem}
.reco-score{margin-inline-start:auto;text-align:center;background:var(--surface-2);border-radius:10px;padding:6px 12px;cursor:help;flex:none}
.reco-score b{display:block;font-size:1.35rem;color:var(--success);line-height:1.1}
.reco-score small{font-size:.68rem;color:var(--muted)}
.reco-why{background:var(--success-soft);color:var(--success);border-radius:9px;padding:8px 12px;margin:0 0 9px;font-size:.9rem;display:flex;gap:7px;align-items:flex-start}
.reco-why .ic{flex:none;margin-top:3px}
.reco-specs{display:flex;flex-wrap:wrap;gap:5px 16px;font-size:.88rem}
.reco-buy{display:flex;flex-direction:column;gap:8px;justify-content:center;border-inline-start:1px solid var(--line-2);padding-inline-start:16px}
.reco-buy .btn{width:100%}
@media (max-width:720px){.reco{grid-template-columns:1fr}.reco-buy{border:0;border-top:1px solid var(--line-2);padding:12px 0 0}}
.finder-more{text-align:center}
.finder-why .steps li>span{background:var(--primary-soft);color:var(--primary-text)}
/* تیک با CSS به‌جای آیکون SVG تکراری (صرفه‌جویی چشمگیر در حجم HTML) */
.checks-css li{position:relative;padding-inline-start:19px}
.checks-css li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--success);font-weight:700}
.checks-css .ic{display:none}

/* ============ کد تخفیف ============ */
.coupon-list{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:12px}
.coupon{display:grid;grid-template-columns:150px minmax(0,1fr) 190px;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 18px;box-shadow:var(--shadow)}
.coupon.is-verified{border-inline-start:4px solid var(--success)}
.coupon-left{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.coupon-badge{background:var(--primary-soft);color:var(--primary-text);font-weight:700;font-size:.95rem;padding:5px 12px;border-radius:9px;white-space:nowrap}
.coupon-title{font-size:1.02rem;margin:0 0 4px}
.coupon-meta{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--muted)}
.coupon-meta li{display:inline-flex;align-items:center;gap:4px}
.coupon-meta .ok{color:var(--success)}.coupon-meta .warn{color:var(--warn)}
.coupon-right{display:flex;flex-direction:column;gap:8px}
.coupon-code{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;cursor:pointer;background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 8px,transparent 8px,transparent 16px);border:2px dashed var(--primary);border-radius:10px;padding:9px 12px;font-family:inherit;transition:.14s}
.coupon-code:hover{background:var(--primary-soft);border-style:solid}
.code-text{font-weight:700;font-size:1.02rem;letter-spacing:.5px;direction:ltr;color:var(--text)}
.code-hint{font-size:.75rem;color:var(--primary-text);white-space:nowrap}
.coupon-code.copied{border-color:var(--success);background:var(--success-soft)}
.coupon-code.copied .code-hint{color:var(--success)}
@media (max-width:760px){.coupon{grid-template-columns:1fr;gap:10px}.coupon-left{flex-direction:row;align-items:center;justify-content:space-between}}
.coupon-prov-card{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;color:var(--text);box-shadow:var(--shadow)}
.coupon-prov-card:hover{border-color:var(--primary);text-decoration:none}
.coupon-prov-card div{display:flex;flex-direction:column;line-height:1.5;min-width:0}
.side-steps{margin:0;padding-inline-start:1.2em;font-size:.88rem}.side-steps li{margin-bottom:6px}
.coupon-inline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--success-soft);border:1px dashed var(--success);border-radius:12px;padding:11px 15px;margin:14px 0}
.coupon-inline b{color:var(--success)}

/* ---------- مقاله: امضا، فهرست مطالب، جدول دادهٔ زنده ---------- */
.post-meta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:.85rem;color:var(--muted);margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.post-meta span{display:inline-flex;align-items:center;gap:5px}
.post-meta b{color:var(--text);font-weight:600}
.post-meta .pm-updated{color:var(--success)}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:0 0 24px}
.toc h2{font-size:.95rem;margin:0 0 8px}
.toc ol{margin:0;padding-inline-start:1.3em;columns:2;column-gap:28px}
.toc li{break-inside:avoid}
.toc a{color:var(--text);display:inline-block;padding:3px 0;min-height:24px}
.toc a:hover{color:var(--primary-text)}
@media (max-width:620px){.toc ol{columns:1}}
/* عنوان‌ها لنگر دارند؛ فاصله می‌گیرند تا زیر هدر چسبان پنهان نشوند */
.prose h2[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
/* جدولِ داخل متنِ مقاله ظرف اسکرول ندارد و در موبایل کل صفحه را پهن می‌کرد.
   display:block آن را به یک جعبهٔ اسکرول‌دار تبدیل می‌کند و ساختار سطر/ستون حفظ می‌شود.
   یک قانون، همهٔ متن‌های .prose را می‌پوشاند: مقاله، مقدمهٔ دسته و صفحه‌های ثابت. */
.prose table{display:block;max-width:100%;overflow-x:auto}
.sc-table{margin:20px 0;overflow-x:auto}
.sc-table table{margin:0}
.sc-table figcaption{font-size:.82rem;color:var(--muted);margin-top:8px}
/* لینک در سلول جدولِ داده یک هدف مستقل است، نه لینک درون‌جمله — پس استثنای WCAG شاملش نمی‌شود */
.sc-table td a,.prose table td a{display:inline-block;min-height:24px}

/* فهرست تعریف (واژه‌نامه). بدون این، dt و dd هم‌وزن دیده می‌شوند و ۵۲ اصطلاح
   به یک دیوار متن تبدیل می‌شود. تورفتگیِ پیش‌فرضِ dd صفر می‌شود و ریتم را
   خطِ جداکننده می‌سازد — هم در چپ‌چین و هم در راست‌چین درست می‌نشیند. */
.prose dl{margin:1.2em 0;border-top:1px solid var(--line)}
.prose dt{font-weight:600;color:var(--text);margin-top:14px}
.prose dd{margin:4px 0 0;margin-inline-start:0;padding-bottom:14px;border-bottom:1px solid var(--line);color:var(--muted)}

/* ---------- سوئیچ نما + جدول بازهٔ شرکت‌ها ---------- */
.view-switch{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;margin:0 0 12px;gap:2px}
.view-switch a{padding:7px 15px;border-radius:7px;color:var(--muted);font-weight:600;font-size:.88rem;white-space:nowrap}
.view-switch a:hover{color:var(--primary-text);text-decoration:none}
.view-switch a.active{background:var(--surface);color:var(--primary-text);box-shadow:0 1px 3px rgba(22,29,38,.08)}
table.ranges .c-provider{min-width:190px}
table.ranges .c-range{min-width:170px}
table.ranges .c-res{min-width:130px}
.rg-price{font-size:1.05rem;font-weight:700;color:var(--success);line-height:1.6}
.rg-sep{font-weight:400;font-size:.82rem;color:var(--muted);margin:0 2px}
.rg-count{font-size:.8rem;color:var(--muted);margin-top:4px}
table.ranges .c-cta .btn{margin-bottom:5px}
@media (max-width:520px){.view-switch{display:flex;width:100%}.view-switch a{flex:1;text-align:center;padding:8px 6px}}

/* سلب مسئولیت خرید — باید دیده شود، پس کم‌رنگ‌تر از متن عادی نیست */
.footer-disclaimer{display:flex;align-items:flex-start;gap:6px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-top:6px;font-size:.82rem;line-height:1.75}
.footer-disclaimer .ic{flex:none;margin-top:4px;color:var(--muted)}

/* ---------- لوکیشن دیتاسنتر: بلوک صفحهٔ شرکت + ردیف کارت فهرست ----------
   پرچم‌ها SVG محلی‌اند و از همان اسپرایت icon_sprite() می‌آیند (symbol با شناسهٔ fl-xx).
   ایموجی پرچم عمداً کنار گذاشته شد: ویندوز گلیف ندارد و «🇩🇪» را عیناً «DE» رسم می‌کند،
   که وسط یک سطر فارسی هم بی‌معناست هم جهت متن را می‌شکند.

   قاب نازک دور پرچم داخل خود symbol کشیده شده، نه اینجا؛ پس پرچم‌های سفید (لهستان،
   فنلاند) حتی بدون این بلوک هم روی زمینهٔ روشن گم نمی‌شوند.

   هیچ گریدی اینجا نیست و همه چیز flex-wrap است، پس تلهٔ minmax(Npx,1fr) پیش نمی‌آید
   و در ۳۹۰px چیزی از قاب بیرون نمی‌زند. */

.flag{flex:none;border-radius:2px;vertical-align:middle}

/* بلوک صفحهٔ شرکت: روی .card + .chips + .chip سوار است، پس این لایه فقط تنظیم است */
.locs h2{font-size:1.05rem;display:flex;align-items:center;gap:8px;margin:0 0 4px}
.locs h2 .ic{color:var(--muted)}
.locs-head{margin-bottom:12px}
.locs-note{margin:0;max-width:70ch}
.locs-list{gap:7px}
/* قرص لوکیشن کلیک‌پذیر نیست، پس اندازهٔ هدف لمسی موضوعیت ندارد؛ فاصله فقط برای خوانایی است */
.loc{padding-block:4px;gap:6px}
.loc .loc-name{font-weight:500}
.loc small{color:var(--muted)}

/* کارت فهرست: همان ردیف «دیتاسنتر» که تا حالا برای بیشتر شرکت‌ها «—» بود.
   عمداً inline ساده است و نه inline-flex: inline-flex ارتفاع همان یک ردیف را ۴px
   بلندتر می‌کرد و کارت‌های پرچم‌دار از بقیه بلندتر می‌شدند — دقیقاً همان هم‌ترازی
   که کامنت بالای provider_card.php نگهش داشته. */
.loc-mini{white-space:nowrap}
.loc-more{color:var(--muted)}