/* ============================================================
   صفحه‌ی «پنل اس ام اس رایگان» — /free/
   روی متغیرهای خودِ قالب سوار است: --color1..6، --main-font.
   هیچ رنگ تازه‌ای تعریف نمی‌شود مگر جایی که کنتراست AA لازمش کند.
   ============================================================ */

.free_hero { padding: 40px 0 10px; }
.free_hero h1 { line-height: 1.7; }

.free_pills { list-style: none; padding: 0; margin: 18px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.free_pills li { font-size: 12px; font-weight: bold; border-radius: 30px; padding: 6px 13px;
                 display: inline-flex; align-items: center; gap: 6px; }
.free_pills svg.ic { font-size: 15px; }
.free_pills .is-ok { color: #06795a; background: #e6faf3; border: 1px solid #b8ecda; }
.free_pills .is-brand { color: var(--color2); background: #f0edff; border: 1px solid #d8d5e6; }

/* ستون بصری هیرو: خودِ فرمِ ماژول ثبت‌نام ([farazsms_signup])
   ⚠️ قاب دور فرم نگذارید. ماژول خودش کارت است — .wsu حاشیه و گردی و
   پدینگ و پس‌زمینه دارد. قابِ دوم، جعبه‌تودرجعبه می‌سازد؛ روی صفحه
   دیده شد. این بلوک فقط عرض و جای فرم را تعیین می‌کند و ظاهرِ کارت را
   روی خودِ .wsu تقویت می‌کند تا در هیرو دیده شود. */
.free_formcard { max-width: 460px; margin-inline-start: auto; }
.free_formcard .wsu {
    max-width: none;
    background: #fff;
    border: 2px solid var(--color2);
    box-shadow: 0 10px 30px rgba(64, 42, 169, .09);
}

.free_nextstep {
    margin: 14px 0 0; padding: 11px 13px; background: #f7f6fc; border-radius: 10px;
    font-size: 11.5px; color: #5c6370; line-height: 1.95;
}
.free_nextstep b { color: var(--color2); }


/* ── ست آیکن ─────────────────────────────────────────────
   یک قاعده برای همه: اندازه از font-sizeِ والد، رنگ از currentColor.
   هیچ آیکنی رنگِ خودش را ندارد، پس صفحه رنگین‌کمانی نمی‌شود. */
.free_landing svg.ic {
    width: 1em; height: 1em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -.15em;
}
/* قاب گردِ آیکن — همان زبانِ بصریِ کارت‌های قالب */
.free_ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px;
    background: #f0edff; color: var(--color2); font-size: 24px;
    margin-bottom: 11px;
}

/* نوار اعداد */
.free_numbers { background: var(--color2); padding: 26px 0; margin: 34px 0; }
.free_number { text-align: center; color: #fff; }
.free_number b { display: block; font-size: 26px; line-height: 1.5; }
.free_number span { font-size: 12px; opacity: .85; }

/* قدم‌ها */
.free_steps { padding: 10px 0 30px; }
.free_cycle { list-style: none; padding: 0; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.free_cycle li {
    flex: 1 1 240px; background: #faf9ff; border: 1px solid #eae7f5;
    border-radius: 12px; padding: 18px;
}
.free_stephead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.free_stephead svg.ic { font-size: 26px; color: var(--color4); }
.free_num {
    display: inline-flex; width: 30px; height: 30px; border-radius: 50%;
    background: var(--color2); color: #fff; align-items: center; justify-content: center;
    font-weight: bold; font-size: 14px;
}
.free_cycle h3 { font-size: 15px; margin: 0 0 4px; }
.free_cycle p { font-size: 12.5px; color: #5c6370; margin: 0; line-height: 1.9; }

/* ── چرا min(Xpx, 100%) و نه Xpx خالی ───────────────────────────
   minmax با پیکسلِ ثابت، وقتی ظرف از آن باریک‌تر شود ریل را کوچک
   نمی‌کند: ردیف از ظرف می‌زند بیرون و کلِ صفحه اسکرول افقی می‌گیرد.
   روی آیفون SE (۳۲۰px منهای پدینگ ≈ ۲۹۰px) سه شبکه‌ی این صفحه
   سرریز می‌کردند. min(...,100%) کفِ ریل را به عرض ظرف می‌چسباند. */
/* کارت امکانات */
.free_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.free_card { background: #faf9ff; border: 1px solid #eae7f5; border-radius: 12px; padding: 15px; }
.free_card .free_ico { width: 40px; height: 40px; font-size: 21px; border-radius: 12px; margin-bottom: 9px; }
.free_card b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.free_card p { font-size: 12px; color: #5c6370; margin: 0; line-height: 1.85; }
.free_openall {
    margin-top: 14px; text-align: center; font-size: 13px; font-weight: bold;
    color: #06795a; background: #e9fbf4; border: 1px solid #b8ecda;
    border-radius: 12px; padding: 14px; line-height: 2;
}

/* جدول‌ها */
.free_tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.free_table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
.free_table th, .free_table td { padding: 12px 10px; border-bottom: 1px solid #eae7f5; text-align: right; }
.free_table thead th { color: #5c6370; font-size: 12px; font-weight: bold; }
.free_table tbody th { font-weight: bold; }
.free_table .is-win { color: #06795a; font-weight: bold; }
/* ⚠️ #9aa0a6 روی سفید ۲٫۶۴:۱ بود — زیر کفِ AA (۴٫۵). ستون «الگوی رایج»
   نیمی از جدول مقایسه است، پس متنِ کم‌رنگ آنجا واقعاً خوانده نمی‌شد. */
.free_table .is-lose { color: #626973; }
.free_table .free_col_us { background: #f3fdf8; }
.free_table thead .free_col_us { color: #06795a; }
.free_tblnote { font-size: 11.5px; color: #6c757d; margin: 10px 0 0; line-height: 1.9; }

/* افزونه‌ی اختصاصی — دلیل انتخاب ما */
.free_plugin { padding: 10px 0 34px; }
.free_anchor {
    background: linear-gradient(135deg, #f3f0ff, #e9fbf4);
    border: 1px solid #d8d5e6; border-radius: 16px;
    padding: 22px 24px; margin-bottom: 22px; text-align: center;
}
.free_anchor b { display: block; font-size: 26px; color: var(--color2); line-height: 1.6; }
.free_anchor s { color: #5c6370; font-size: 15px; }
.free_anchor p { font-size: 13.5px; color: #444; margin: 8px 0 0; line-height: 2.1; }
.free_anchor .free_zero { color: #06795a; }

.free_packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 14px; }
.free_pack { border: 1px solid #eae7f5; border-radius: 14px; padding: 18px; background: #fff; }
.free_pack h3 { font-size: 15px; margin: 0 0 10px; color: var(--color2);
                display: flex; align-items: center; gap: 9px; }
.free_pack h3 svg.ic { font-size: 22px; color: var(--color4); }
.free_pack ul { list-style: none; padding: 0; margin: 0; }
.free_pack li { font-size: 12.5px; color: #444; line-height: 1.95; padding: 4px 0; }
.free_pack li::before { content: "◂"; color: var(--color1); font-weight: bold; margin-left: 7px; }

.free_compat { margin-top: 22px; background: #faf9ff; border: 1px solid #eae7f5; border-radius: 14px; padding: 20px; }
.free_compat h3 { font-size: 15px; margin: 0 0 4px; }
.free_compat > p { font-size: 12.5px; color: #5c6370; margin: 0 0 14px; line-height: 2; }
.free_chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.free_chips li {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: bold; color: var(--color2);
    background: #fff; border: 1px solid #d8d5e6; border-radius: 30px; padding: 6px 13px;
}
.free_chips li.is-star { color: #06795a; background: #e9fbf4; border-color: #b8ecda; }

/* رفع اعتراض */
.free_obj { padding: 10px 0 30px; }
.free_objgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.free_objbox { border: 1px solid #eae7f5; border-radius: 14px; padding: 18px; background: #fff; }
.free_objbox .free_ico { width: 38px; height: 38px; font-size: 20px; border-radius: 11px; margin-bottom: 10px; }
.free_objbox h3 { font-size: 14.5px; margin: 0 0 8px; color: var(--color2); line-height: 1.9; }
.free_objbox h3::before { content: "«"; } .free_objbox h3::after { content: "»"; }
.free_objbox p { font-size: 13px; color: #444; margin: 0; line-height: 2.1; }

/* اثبات */
.free_quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.free_quote { background: #faf9ff; border: 1px solid #eae7f5; border-radius: 14px; padding: 18px; }
.free_quote p { font-size: 13px; margin: 0 0 12px; line-height: 2.1; }
.free_quote footer { font-size: 12px; color: #5c6370; }
.free_quote footer b { display: block; color: #212529; font-size: 12.5px; }
.free_stars { color: #f0a500; font-size: 15px; margin-bottom: 8px; }

/* نوار CTA پایانی */
.free_cta {
    background: linear-gradient(135deg, var(--color3), var(--color4));
    padding: 40px 0; margin: 34px 0 0; color: #fff;
}
.free_cta h2 { color: #fff; font-size: 24px; margin: 0 0 8px; line-height: 1.8; }
.free_cta p { opacity: .9; font-size: 14px; margin: 0 0 20px; line-height: 2; }

/* سوالات */
.free_faq { padding: 30px 0; }
.free_faq_item { border-bottom: 1px solid #eae7f5; }
/* ⚠️ display:flex نشانگر پیش‌فرضِ مرورگر را حذف می‌کند.
   بدون جایگزین، دوازده پرسش فقط متنِ درشت‌اند و هیچ نشانی ندارند که
   باز می‌شوند — فقط اولی open است. */
/* ⚠️ نشانگرِ بومی باید صریح برداشته شود.
   display:flex روی summary نشانگرِ ::marker را حذف می‌کند، ولی وب‌کیت
   نشانگرش را به‌صورت شبه‌عنصرِ جدا (::-webkit-details-marker) می‌کشد که
   flex کاری به کارش ندارد. بدون این دو خط، سافاری هم مثلثِ بومی را
   نشان می‌دهد هم فلشِ ما را. */
.free_faq_item summary::-webkit-details-marker { display: none }
.free_faq_item summary::marker { content: '' }

/* ⚠️ حاشیه‌ها فیزیکی‌اند، نه منطقی — عمدی.
   نسخه‌ی اول border-inline-end داشت که در RTL به حاشیه‌ی *چپ* می‌خورد،
   ولی rotate فیزیکی است. نتیجه: فلش بسته به چپ و باز به راست اشاره
   می‌کرد و هیچ‌وقت «باز/بسته» خوانده نمی‌شد. */
.free_faq_item summary::after {
  content: ''; inline-size: 9px; block-size: 9px; flex: 0 0 auto;
  margin-inline-start: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease; opacity: .55;
}
.free_faq_item[open] summary::after { transform: rotate(-135deg) }

/* تنها عنصر تعاملیِ صفحه که نشانِ فوکوس نداشت */
.free_faq_item summary:focus-visible {
  outline: 2px solid var(--color2, #402aa9); outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .free_faq_item summary::after { transition: none }
}

.free_faq_item summary {
    cursor: pointer; font-weight: bold; font-size: 14px; padding: 15px 0;
    min-height: 44px; display: flex; align-items: center; line-height: 1.9;
}
.free_faq_item > div { color: #5c6370; padding-bottom: 15px; font-size: 13px; line-height: 2.1; }

/* متن سئو */
.free_seo { padding: 20px 0 40px; }
.free_seo h2 { font-size: 19px; margin: 28px 0 8px; line-height: 1.9; }
.free_seo h3 { font-size: 15px; margin: 18px 0 6px; }
.free_seo p, .free_seo li { font-size: 13.5px; color: #444; line-height: 2.2; }

/* عنوان بخش */
.free_title { text-align: center; max-width: 800px; margin: 0 auto 26px; }
.free_title h2 { font-size: 23px; line-height: 1.8; margin: 0 0 8px; }
.free_title p { font-size: 13.5px; color: #5c6370; margin: 0; line-height: 2.1; }


@media (max-width: 991px) { .free_formcard { margin: 26px auto 0; } }
@media (max-width: 767px) {
    .free_hero { padding-top: 24px; }
    .free_number b { font-size: 20px; }
    .free_cta h2 { font-size: 20px; }
    .free_title h2 { font-size: 19px; }
}

/* نوار پایانی — جعبه‌ی وسط‌چین (در ماکت درون‌خطی بود) */
.free_ctabox { text-align: center; max-width: 720px; margin: 0 auto; }
.free_cta .button_green { display: inline-block; }
.free_ctatel { margin: 18px 0 0; font-size: 12.5px; }
.free_ctatel a { color: #fff; text-decoration: underline; }

/* نظرات — <blockquote> است، پس حاشیه‌ی پیش‌فرض مرورگر باید صفر شود */
.free_quote { margin: 0; }

/* ── نوار اعداد وقتی مستقیم زیر هیرو می‌نشیند ──────────────────────
   بخش «چه چیزی رایگان است» که حذف شد، فاصله‌ی بین نوار بنفشِ هیرو و
   نوار اعداد را پر می‌کرد. حالا دو بلوکِ بنفش با ۳۴ پیکسل سفیدِ باریک
   بینشان می‌مانند که مثل اشتباه دیده می‌شود، نه مثل فاصله‌ی عمدی.

   ⚠️ رنگ از خودِ تصویر نمونه‌برداری شده، نه حدس: ردیف آخرِ new-min.png
   سرتاسر #432bb3 است — کمی روشن‌تر از --color2 (#402aa9). اگر با همان
   --color2 پر می‌شد، یک درزِ باریک روی کل عرض دیده می‌شد.
   اگر روزی تصویر نوار عوض شد (فیلتر farazsms_free_band)، این رنگ را
   هم به‌روز کنید. */
.free_hero + .free_numbers {
    margin-top: 0;
    background: #432bb3;
}