/*
 * صفحه‌ی «قیمت خطوط اختصاصی».
 *
 * فقط روی templates/template-dedicated-lines.php صف می‌شود
 * (inc/line-price.php). توکن‌ها از style.css می‌آیند.
 */

.lp{--lp-line:#e8e7f0; --lp-soft:#6b6885; --lp-bg:#f7f7fb; --lp-ink:#1d1d28}


/* ═══ سه قدم ═══ */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px}
.lp-step{background:var(--lp-bg);border:1px solid var(--lp-line);border-radius:16px;padding:20px;position:relative;overflow:hidden}
/* آیکن واترمارک — تمپلیت این عنصر را چاپ می‌کند؛ بدون این قاعده به یک
 * گلیفِ تمام‌کدر بالای شماره‌ی قدم تبدیل می‌شد */
.lp-step__ic{position:absolute;inset-block-start:-8px;inset-inline-start:-8px;font-size:74px;
  line-height:1;color:var(--color2);opacity:.07;pointer-events:none}
.lp-step h3,.lp-step p,.lp-step__n{position:relative}
.lp-step__n{width:30px;height:30px;border-radius:50%;background:var(--color2);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--bold-font);font-size:14px;margin-bottom:10px}
.lp-step h3{font-size:15.5px;margin:0 0 4px}
.lp-step p{margin:0;color:var(--lp-soft);font-size:13.5px;line-height:2}



/* ═══ جدول مقایسه ═══ */
.lp-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin-bottom:10px}
.lp-cmp{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--lp-line);border-radius:16px;overflow:hidden;font-size:14px}
.lp-cmp caption{caption-side:top;text-align:start;padding:0 0 10px;color:var(--lp-soft);font-size:13px}
.lp-cmp th{background:#f2f1f9;font-size:12.5px;color:var(--lp-soft);font-family:var(--bold-font);
  padding:13px 12px;text-align:start;white-space:nowrap}
.lp-cmp td,.lp-cmp tbody th{padding:14px 12px;border-top:1px solid var(--lp-line);vertical-align:middle;text-align:start;background:transparent}
.lp-cmp tbody tr:hover{background:#f6f4ff}
.lp-op{display:flex;align-items:center;gap:10px}
.lp-op__num{width:52px;height:36px;flex:0 0 52px;border-radius:9px;background:linear-gradient(135deg,#efedff,#e6f9f2);
  display:flex;align-items:center;justify-content:center;font-family:var(--bold-font);font-size:13px;
  color:var(--color2);letter-spacing:.5px;direction:ltr}
.lp-op__t b{display:block;font-size:14px}
.lp-op__t small{color:var(--lp-soft);font-size:11.5px}
.lp-tag{display:inline-block;border-radius:100px;padding:3px 10px;font-size:11.5px;font-family:var(--bold-font);white-space:nowrap}
.lp-tag--ad{background:#eef7ff;color:#1b6fb8}
.lp-tag--sv{background:#eefdf7;color:#0a7d55}
.lp-tag--rec{background:linear-gradient(135deg,#fff4cc,#ffe9a8);color:#7a5b00;box-shadow:inset 0 0 0 1px #f0dfa0}
.lp-from b{font-size:15px;color:var(--color2);font-variant-numeric:tabular-nums}
.lp-from small{display:block;color:var(--lp-soft);font-size:11.5px;line-height:1.6}
.lp-svc{display:flex;align-items:center;gap:7px;font-size:13px}
.lp-svc i{flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-style:normal;font-size:12px;font-family:var(--bold-font)}
.lp-svc--y i{background:#d9f7ea;color:#0a7d55}
.lp-svc--n i{background:#f1f0f6;color:#9d9ab3}
.lp-svc--y b{color:#0a7d55}
.lp-svc--n span{color:var(--lp-soft)}
.lp-num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* دکمه‌ی درونِ جدولِ کارتی و پاورقیِ بلوک.
   ⚠️ .button در style.css:692 مقادیر height:37px و white-space:nowrap و
   overflow:hidden دارد. با width:100% روی ستونِ باریک، متنی مثل
   «تعرفه‌ی کامل اپراتور ۵۰۰۰۲ و ۵۰۰۰۵» از دو طرف قیچی می‌شد. */
.lp-cmp .button,.lp-block__foot .button{width:auto;max-width:100%;height:auto;min-height:37px;
  padding-block:8px;white-space:normal;line-height:1.8}

.lp-cta__op{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}

/* ═══ نوار پرش ═══ */
.lp-nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-block:1px solid var(--lp-line);padding:10px 0;margin:0 0 30px}
.lp-nav__in{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.lp-nav__in::-webkit-scrollbar{display:none}
.lp-nav a{flex:0 0 auto;border:1px solid var(--lp-line);border-radius:100px;padding:7px 15px;font-size:13px;
  font-family:var(--bold-font);color:var(--lp-soft);background:#fff;direction:ltr}
.lp-nav a.on,.lp-nav a:hover{border-color:var(--color2);color:var(--color2);background:#f6f4ff}
/* ⚠️ کاربرِ کیبورد هم باید ببیند کجاست.
   نوارِ پرش افقی است و JS خودش جابه‌جایش می‌کند؛ بدونِ نشانه‌ی فوکوس،
   کسی که با Tab حرکت می‌کند هیچ بازخوردی ندارد و نوار زیرِ دستش
   می‌لغزد. outline، نه تغییرِ رنگ — چون رنگ با حالتِ .on قاطی می‌شود. */
.lp-nav a:focus-visible{outline:2px solid var(--color2);outline-offset:2px}
.lp-logos img:focus-visible{outline:2px solid var(--color2);outline-offset:3px}

/* ═══ بلوک تعرفه‌ی هر اپراتور ═══ */
.lp-block{background:#fff;border:1px solid var(--lp-line);border-radius:20px;padding:24px;margin-bottom:20px;scroll-margin-top:70px}
.lp-block__head{border-bottom:1px solid var(--lp-line);padding-bottom:16px;margin-bottom:18px}
/* عنوان بلوک h3 است (زیرِ h2 بخش)، پس سلکتور باید هر دو را بگیرد —
 * وگرنه نشانِ سرشماره از عنوان جدا می‌افتد و به خط بعد می‌رود. */
.lp-block h2,.lp-block h3{font-size:20px;display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0}
.lp-block__desc{color:var(--lp-soft);font-size:13.5px;margin:8px 0 0;max-width:760px;line-height:2}
.lp-facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.lp-fact{background:var(--lp-bg);border:1px solid var(--lp-line);border-radius:10px;padding:5px 12px;font-size:12.5px;color:var(--lp-soft)}
.lp-fact b{color:var(--lp-ink)}
.lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* ⚠️ جدول تک‌تایی کل عرض باکس را می‌گیرد.
 * سقف ۷۲۰ پیکسلی، جدول را وسط یک باکسِ ۱۱۰۰ پیکسلی رها می‌کرد و نیمی از
 * جعبه خالی می‌ماند — همان «جدول‌ها تمام باکس نیستند». */
.lp-grid--one{grid-template-columns:1fr}
/* ⚠️ بدون این، ظرف اسکرول کار نمی‌کند: خانه‌ی گرید پیش‌فرض min-width:auto
 * دارد و به‌جای اسکرول تا عرض min-content محتوایش کش می‌آید. */
.lp-grid > *{min-width:0}
.lp-tbl__name{font-family:var(--bold-font);font-size:14px;margin-bottom:9px;display:flex;align-items:center;gap:8px}
.lp-tbl__name i{width:8px;height:8px;border-radius:50%;background:var(--color1);font-style:normal;flex:0 0 8px}
.lp-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.lp-tbl{width:100%;min-width:288px;border-collapse:separate;border-spacing:0;border:1px solid var(--lp-line);
  border-radius:14px;overflow:hidden;font-size:14px}
.lp-tbl caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.lp-tbl th{background:#f2f1f9;color:var(--lp-soft);font-size:12.5px;font-family:var(--bold-font);padding:11px 14px;text-align:start}
.lp-tbl td,.lp-tbl tbody th{padding:11px 14px;border-top:1px solid var(--lp-line);font-variant-numeric:tabular-nums;text-align:start;background:transparent}
.lp-tbl tbody th{font-family:var(--main-font);color:var(--lp-ink);white-space:nowrap}
.lp-tbl td{font-family:var(--bold-font)}
.lp-tbl td:first-of-type{color:var(--color2)}
.lp-tbl tr.is-best{background:#f4fffa}
.lp-tbl .lp-best{background:var(--color1);color:#06301f;font-size:10.5px;font-family:var(--bold-font);
  border-radius:100px;padding:2px 8px;margin-inline-start:8px}
.lp-ask{color:var(--lp-soft);font-family:var(--main-font);font-size:13px}
.lp-block__foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--lp-line);font-size:13px;color:var(--lp-soft)}

/* نوار لوگوی مشتریان — مارک‌آپ در تمپلیت مانده بود ولی قاعده‌هایش حذف شده
 * بود، پس لوگوها ستونی و تمام‌رنگ و تا ۳۰۰ پیکسل رندر می‌شدند */
.lp-logos{border-block:1px solid var(--lp-line);padding:22px 0;margin:0 0 30px}
.lp-logos__t{text-align:center;color:var(--lp-soft);font-size:13px;margin-bottom:14px}
.lp-logos__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px}
.lp-logos img{max-block-size:38px;inline-size:auto;filter:grayscale(1);opacity:.55;transition:filter .25s,opacity .25s}
.lp-logos img:hover,.lp-logos img:focus-visible{filter:none;opacity:1}

.lp-empty{background:#fff8e6;border:1px solid #f0e0b0;color:#7a5b00;border-radius:16px;padding:18px 20px;line-height:2}



/* ═══ رفع‌های بازبینی ═══ */

/*
 * ⚠️ قالب .screen-reader-text را فقط زیر .woocommerce / .wc-wrap / .quantity
 * تعریف کرده (woocommerce.css:65) و آن فایل هم روی این صفحه صف نمی‌شود.
 * بدون این، لیبلِ «پنهان» ستون آخر جدول، متنِ دیده‌شدنی می‌شد.
 */
.lp .screen-reader-text{
  position:absolute !important;inline-size:1px;block-size:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* آمار اعتمادساز با رنگ برند، نه گرادیانِ نامرئی‌شونده در کنتراست بالا */
.lp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:0 0 30px}
.lp-stat{background:#fff;border:1px solid var(--lp-line);border-radius:16px;padding:20px 18px;text-align:center}
.lp-stat b{display:block;font-family:var(--bold-font);font-size:28px;line-height:1.5;color:var(--color2)}
.lp-stat span{color:var(--lp-soft);font-size:13px}

/* نشانه‌ی حالت فعال برای صفحه‌خوان و حالت کنتراست بالا */
.lp-nav a[aria-current="true"]{border-color:var(--color2);color:var(--color2);background:#f6f4ff}

/* کارت موبایل: زوج برچسب/مقدار معنایی */

/* ⚠️ مدیا-کوئری‌ها **انتهای فایل**.
   قبلاً بالاتر از قواعدِ پایه‌ی .lp-stats و .lp-stat b بودند و چون
   اختصاصی‌بودنشان یکی است، قاعده‌ی پایینی برنده می‌شد — یعنی چیدمانِ
   دوستونیِ موبایل و فونتِ ۲۲ پیکسلی هرگز اعمال نمی‌شدند. */
@media screen and (max-width:991px){
  .lp-grid{grid-template-columns:1fr}
  .lp-steps{grid-template-columns:1fr}
}
@media screen and (max-width:767px){
  .lp-stats{grid-template-columns:repeat(2,1fr)}
  .lp-stat b{font-size:22px}
  /* ═══ جدول ⇒ کارت، بدونِ DOM دوم ═══
     ⚠️ تا امروز همان داده دو بار در HTML بود (جدول + کارت) و یکی
     همیشه display:none. اندازه‌گیری با ۱۰ اپراتور: ۱۳٬۴۴۵ بایت،
     یعنی ۱۸٪ صفحه، همیشه پنهان. حالا خودِ جدول تغییرِ شکل می‌دهد و
     `data-label` نقشِ ستون را می‌گیرد. */
  .lp-cmp-wrap{overflow-x:visible}
  .lp-cmp{min-width:0;border:0;background:transparent;box-shadow:none}
  .lp-cmp caption{padding-bottom:12px}
  /* سرستون‌ها در حالتِ کارتی معنا ندارند — data-label جایشان است.
     clip به‌جای display:none تا از درختِ دسترس‌پذیری حذف نشوند. */
  .lp-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .lp-cmp tbody tr{display:block;background:#fff;border:1px solid var(--lp-line);
    border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:0 2px 10px rgba(20,20,40,.07)}
  .lp-cmp tbody tr:hover{background:#fff}
  .lp-cmp tbody th{display:block;border:0;padding:0 0 12px}
  .lp-cmp tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
    border:0;border-top:1px dashed var(--lp-line);padding:8px 0;font-size:13px}
  .lp-cmp tbody td::before{content:attr(data-label);color:var(--lp-soft);font-size:12px;flex:0 0 auto}
  .lp-cmp tbody td.lp-cta{display:block;border-top:0;padding-top:13px}
  .lp-cmp tbody td.lp-cta::before{content:none}
  .lp-cmp tbody td.lp-cta .button{width:100%}
  /* .lp-cta__op بالاتر و سراسری تعریف شده — تکرارش اینجا بی‌اثر بود */
  .lp-block{padding:16px}
  .lp-block h2,.lp-block h3{font-size:17px}
  }