/*
 * FarazSMS — لایه‌ی مدرن (فاز ۱: بردهای سریع)
 * افزایشی و برگشت‌پذیر؛ فقط بهبودِ ظاهر/حس. متاهای سئو دست‌نخورده می‌مانند.
 */

:root {
    /* Design tokens — پایه‌ی سیستم طراحی مشترک سایت/پنل */
    --fz-accent:        #6c5ce7;   /* رنگ اصلی/CTA (در صورت نیاز با رنگ برند جایگزین شود) */
    --fz-accent-strong: #5b4bd6;
    --fz-live:          #10b981;   /* سبزِ «زنده/فعال» */
    --fz-ink:           #1d1d28;
    --fz-radius:        12px;
    --fz-radius-pill:   999px;
    --fz-shadow:        0 8px 30px rgba(20, 20, 40, .12);
    --fz-shadow-sm:     0 2px 10px rgba(20, 20, 40, .08);
    --fz-transition:    .22s cubic-bezier(.4, 0, .2, 1);
}

/* اسکرول نرم + فوکوسِ دسترس‌پذیرِ زیبا (a11y) */
html { scroll-behavior: smooth; }
:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--fz-accent) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============ مدرن‌سازیِ دکمه‌های کلِّ سایت (و پکیج‌ها) ============ */
.button, .gform_button, .wp-block-button__link, #cancel-comment-reply-link {
    transition: transform var(--fz-transition), box-shadow var(--fz-transition), background var(--fz-transition), filter var(--fz-transition) !important;
    will-change: transform;
    font-weight: 700;
    letter-spacing: .2px;
}
/* دکمه‌ی پیش‌فرض (بنفش) — گرادیانِ زاویه‌دار + سایه‌ی هم‌رنگِ نرم */
.button:not(.button_green):not(.button_border):not(.button_border_white),
.gform_button, .form_newsl input[type=submit] {
    background-image: linear-gradient(135deg, var(--color4), var(--color2)) !important;
    box-shadow: 0 12px 26px -10px rgba(64, 42, 169, .55) !important;
}
/* دکمه‌ی سبز (CTA اصلی) — قبلاً سایه‌ی بنفش داشت، حالا سبزِ هم‌رنگ */
.button_green {
    background-image: linear-gradient(135deg, #12d894, var(--color1)) !important;
    box-shadow: 0 12px 26px -10px rgba(10, 206, 140, .6) !important;
}
/* دکمه‌ی خطی (ثانویه) — حاشیه‌ی ضخیم‌تر و تمیزتر */
.button_border, .button_border_white {
    border-width: 2px !important;
}
/* هاورِ یکپارچه: بالا آمدنِ نرم */
.button:hover, .gform_button:hover, .wp-block-button__link:hover, #cancel-comment-reply-link:hover {
    transform: translateY(-3px);
    filter: saturate(1.06);
}
.button_green:hover { box-shadow: 0 18px 34px -12px rgba(10, 206, 140, .7) !important; }
.button:active, .gform_button:active { transform: translateY(-1px); }

/* دکمه‌های شاخص (هیرو و پکیج‌ها): بزرگ‌تر، با فضای نفس‌کشیدن */
.buttons_hero .button,
.buy_plan_btn .button,
.cta-btns .button,
.cta-content .button {
    height: auto;
    min-height: 48px;
    padding-block: 8px;
    padding-inline: 28px;
    font-size: 14px;
}
.buy_plan_btn .button { width: auto !important; min-width: 150px; }

/* نوار پیشرفتِ اسکرول (بالای صفحه) */
#fz-scroll-progress {
    position: fixed; inset-block-start: 0; inset-inline-start: 0;
    block-size: 3px; inline-size: 0%;
    background: linear-gradient(90deg, var(--fz-accent), var(--fz-live));
    z-index: 99999; transition: width .1s linear; pointer-events: none;
}

/* ظاهرشدنِ نرمِ بخش‌ها هنگام اسکرول */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].fz-in { opacity: 1; transform: none; }

/* CTA چسبانِ ثبت‌نام (هدفِ تبدیل — North-Star) */
#fz-sticky-cta {
    /* موقعیت به #fz-sticky-cta-wrap منتقل شد تا ضربدر بیرون از ناحیه‌ی
       کلیکِ لینک بنشیند — قبلاً داخلش بود و فلش به آن اشاره می‌کرد. */
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--fz-accent); color: #fff; text-decoration: none;
    font-weight: 700; font-size: 15px;
    padding: 12px 22px; border-radius: var(--fz-radius-pill);
    box-shadow: var(--fz-shadow);
    transition: background var(--fz-transition);
}
#fz-sticky-cta:hover { background: var(--fz-accent-strong); }

/* پیلِ وضعیتِ «سرویس فعال» (نمایش حیات) */

/* روی موبایل: فقط CTA */
@media (max-width: 600px) {
    #fz-sticky-cta { inset-inline-end: 18px; justify-content: center; }
}

/* ============================================================
 *  هیروِ مدرنِ صفحه‌ی اصلی — کارتِ چتِ شیشه‌ای + موشکِ تمام‌صفحه
 *  همه‌ی سلکتورها زیرِ .fz-hero اسکوپ شده‌اند تا جای دیگری اثر نگذارند.
 * ============================================================ */
.hero_site.fz-hero { position: relative; overflow: hidden; padding-bottom: clamp(56px, 8vw, 110px); }
.hero_site.fz-hero .container { position: relative; z-index: 2; }

/* لکّه‌های گرادیانِ نرم برای عمق */
.fz-hero .fz-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 0; pointer-events: none; }
.fz-hero .fz-blob-g { inline-size: 460px; block-size: 460px; background: #bff3df; inset-inline-start: -120px; inset-block-start: 20px; }
.fz-hero .fz-blob-p { inline-size: 520px; block-size: 520px; background: #d8d2ff; inset-inline-end: -140px; inset-block-end: -160px; }

/* مسیرِ پروازِ تمام‌صفحه */
/*
 * هواپیمای کاغذی هیرو.
 *
 * عمداً کم‌رنگ و خطی است: نقشش دکور است نه جلب توجه. نسخه‌ی قبلی بدنه‌ی
 * پُر + سایه‌ی سبز پررنگ + دنباله‌ی دنباله‌دار داشت و روی متن هیرو غالب
 * می‌شد.
 */
.fz-hero .fz-flight { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 1; pointer-events: none; }
.fz-hero .fz-guide { fill: none; stroke: none; }
.fz-hero .fz-plane { opacity: .55; transition: opacity .25s ease, transform .25s ease; }
.fz-hero .fz-pbody,
.fz-hero .fz-pfold { fill: none; stroke: #b9c2cc; stroke-width: 1.6; stroke-linejoin: round; }
.fz-hero .fz-pfold { stroke-width: 1.2; opacity: .7; }

/* فقط وقتی جایزه‌ای هست، قابل کلیک می‌شود */
.fz-hero .fz-flight.is-clickable .fz-plane { pointer-events: auto; cursor: pointer; }
.fz-hero .fz-flight.is-clickable .fz-plane:hover,
.fz-hero .fz-flight.is-clickable .fz-plane:focus-visible { opacity: 1; }
.fz-hero .fz-flight.is-clickable .fz-plane:hover .fz-pbody,
.fz-hero .fz-flight.is-clickable .fz-plane:focus-visible .fz-pbody { stroke: var(--fz-live); }
.fz-hero .fz-flight.is-clickable .fz-plane:focus-visible { outline: none; }

/* ═══ مودال جایزه‌ی هواپیما ═══ */
#fz-plane-prize { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; }
#fz-plane-prize.is-open { display: flex; }
#fz-plane-prize .fz-prize-back { position: absolute; inset: 0; background: rgba(20,20,40,.45); backdrop-filter: blur(3px); }
#fz-plane-prize .fz-prize-card { position: relative; background: #fff; border-radius: 22px; max-inline-size: 420px; inline-size: 100%; padding: 34px 28px 28px; text-align: center; box-shadow: 0 30px 70px -20px rgba(20,20,40,.45); animation: fz-prize-in .3s ease both; }
@keyframes fz-prize-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
#fz-plane-prize .fz-prize-close { position: absolute; inset-block-start: 14px; inset-inline-start: 16px; inline-size: 32px; block-size: 32px; border: 0; background: transparent; font-size: 24px; line-height: 1; color: #9aa3ad; cursor: pointer; border-radius: 50%; }
#fz-plane-prize .fz-prize-close:hover { background: #f2f4f7; color: var(--fz-ink); }
#fz-plane-prize .fz-prize-plane { inline-size: 76px; block-size: auto; margin: 0 auto 16px; display: block; }
#fz-plane-prize .fz-prize-plane path { fill: none; stroke: var(--fz-live); stroke-width: 1.6; stroke-linejoin: round; }
#fz-plane-prize h3 { font-size: 20px; font-weight: 800; margin: 0 0 10px; color: var(--fz-ink); }
#fz-plane-prize p { font-size: 14px; line-height: 2.1; color: #5b6472; margin: 0 0 20px; }
#fz-plane-prize .fz-prize-code { display: block; inline-size: 100%; font-size: 26px; font-weight: 800; letter-spacing: 3px; color: #fff; background: var(--fz-accent); border: 0; border-radius: 14px; padding: 16px; cursor: pointer; font-family: inherit; }
#fz-plane-prize .fz-prize-code:hover { filter: brightness(1.06); }
#fz-plane-prize .fz-prize-hint { font-size: 12.5px; color: #9aa3ad; margin: 10px 0 18px; }
#fz-plane-prize .fz-prize-go { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 170px; block-size: 46px; border-radius: var(--fz-radius-pill); background: var(--fz-live); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; }
#fz-plane-prize .fz-prize-go:hover { filter: brightness(1.06); color: #fff; }

@media (max-width: 600px) {
    .fz-hero .fz-flight { display: none; }
}

/* کارتِ چتِ شیشه‌ای */
.fz-hero .fz-visual { position: relative; display: flex; justify-content: center; }
.fz-hero .fz-glass {
    position: relative; inline-size: min(360px, 92%); border-radius: 22px; padding: 18px;
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 24px 60px -22px rgba(46,40,90,.30), 0 6px 18px -10px rgba(46,40,90,.14);
    animation: fz-floaty 6s ease-in-out infinite;
}
@keyframes fz-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.fz-hero .fz-glass-top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,.06); }
.fz-hero .fz-ava { inline-size: 38px; block-size: 38px; border-radius: 50%; background: linear-gradient(150deg,#3ad99b,var(--fz-live)); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 13px; flex: none; }
.fz-hero .fz-meta { line-height: 1.5; }
.fz-hero .fz-meta b { font-size: 14px; display: block; }
.fz-hero .fz-meta small { color: var(--fz-live); font-size: 11px; display: inline-flex; align-items: center; }
/*
 * fz-pulse — نقطه‌ی «آنلاین» داخل کارت شیشه‌ای هیرو (hero.php خط ۸۷).
 * پیشتر این keyframes کنار پیل وضعیت تعریف شده بود؛ با حذف پیل اینجا
 * منتقل شد تا وابستگی‌اش گم نشود.
 */
@keyframes fz-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.fz-hero .fz-live-dot { display: inline-block; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--fz-live); margin-inline-start: 5px; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: fz-pulse 1.8s infinite; }

.fz-hero .fz-bub { max-inline-size: 80%; padding: 11px 14px; border-radius: 16px; font-size: 13px; line-height: 1.9; margin-bottom: 10px; }
.fz-hero .fz-bub.fz-in { background: #fff; color: var(--fz-ink); border: 0; border-start-start-radius: 6px; box-shadow: 0 8px 22px -10px rgba(20,20,40,.20); }
.fz-hero .fz-bub.fz-in small { display: block; color: #999; margin-top: 4px; font-size: 11px; }
.fz-hero .fz-bub.fz-out { margin-inline-start: auto; background: linear-gradient(150deg, var(--fz-accent), var(--fz-accent-strong)); color: #fff; border-start-end-radius: 5px; inline-size: max-content; max-inline-size: 80%; }
.fz-hero .fz-bub-typing { margin-bottom: 0; }
.fz-hero .fz-typing { display: inline-flex; gap: 4px; padding: 12px 16px; background: #fff; border: 1px solid #eee; border-radius: 16px; border-start-start-radius: 5px; }
.fz-hero .fz-typing i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: #bbb; animation: fz-td 1.2s infinite; }
.fz-hero .fz-typing i:nth-child(2) { animation-delay: .2s; }
.fz-hero .fz-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes fz-td { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

@media (max-width: 880px) {
    .fz-hero .fz-visual { margin-top: 34px; }
}

/* ============================================================
 *  کارت پکیجِ شیشه‌ای — صفحه‌ی اصلی (.plans_part) و صفحه‌ی خرید (.buy-packages-page)
 *  تأییدشده توسط کاربر. هم‌خانواده با هیروِ شیشه‌ای.
 * ============================================================ */
/* پس‌زمینه‌ی نرم تا شیشه خوانده شود */
.plans_part { background: linear-gradient(180deg, #f5f7ff, #eefbf5); }
.buy-packages-page { position: relative; }

/* کارت (روی .box_plan_parent سوار می‌شود) */
.plans_part .box_plan_parent,
.buy-packages-page .box_plan_parent {
    width: auto !important; max-width: 100%; margin: 0 0 30px !important; top: 0;
    border-radius: 24px;
    background: rgba(255,255,255,.58) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: 0 24px 56px -26px rgba(40,30,90,.34), inset 0 1px 0 rgba(255,255,255,.7) !important;
    padding-bottom: 22px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.plans_part .box_plan_parent:hover,
.buy-packages-page .box_plan_parent:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 64px -28px rgba(40,30,90,.42) !important;
}
/* کارتِ پرفروش: حلقه‌ی سبز + برجسته */
.plans_part .box_plan_parent.is-popular,
.buy-packages-page .box_plan_parent.is-popular,
.buy-packages-page .vip-package .box_plan_parent {
    border-color: rgba(10,206,140,.6);
    box-shadow: 0 28px 60px -24px rgba(10,206,140,.5), inset 0 1px 0 rgba(255,255,255,.7) !important;
    transform: scale(1.03);
}
.plans_part .box_plan_parent.is-popular:hover,
.buy-packages-page .box_plan_parent.is-popular:hover { transform: scale(1.03) translateY(-6px); }

/* کارتِ داخلی: شفاف + حذفِ لایه‌های تصویریِ هدرِ قدیمی */
.plans_part .box_plan, .buy-packages-page .box_plan {
    background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
    overflow: visible !important; padding-bottom: 6px !important; top: 0 !important; margin-top: 0 !important;
}
.plans_part .box_plan:before, .plans_part .box_plan:after,
.buy-packages-page .box_plan:before, .buy-packages-page .box_plan:after { display: none !important; }
.plans_part .box_plan_parent:hover .box_plan,
.buy-packages-page .box_plan_parent:hover .box_plan { top: 0 !important; box-shadow: none !important; }

/* هدر: تینتِ شیشه‌ایِ سبز */
.plans_part .title_box_plan, .buy-packages-page .title_box_plan {
    background: linear-gradient(160deg, rgba(10,206,140,.20), rgba(10,206,140,.03)) !important;
    color: var(--fz-ink) !important; min-height: 0 !important; padding: 24px 22px 18px !important;
    border-radius: 24px 24px 0 0; border-bottom: 1px solid rgba(255,255,255,.6); text-align: center;
}
.plans_part .title_box_plan .titlebp, .buy-packages-page .title_box_plan .titlebp {
    color: #0a9c6b !important; text-shadow: none !important; font-size: 15px !important; margin-bottom: 8px !important;
}
.plans_part .title_box_plan b, .buy-packages-page .title_box_plan b {
    color: var(--fz-ink) !important; text-shadow: none !important; font-size: 26px !important; font-weight: 900;
}
.plans_part .title_box_plan small, .buy-packages-page .title_box_plan small {
    position: static !important; display: block; color: #8a8aa0 !important; font-size: 13px !important;
    top: auto !important; margin-bottom: 2px;
}
.plans_part .br-price-wrapper, .buy-packages-page .br-price-wrapper { padding-top: 6px !important; }

/* بَج‌ها: پیلِ شیشه‌ای (تخفیف روشن، پرفروش/کاملترین صورتی) */
.plans_part .badge-wrapper, .buy-packages-page .badge-wrapper {
    top: 14px !important; left: 14px !important; right: auto !important;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.plans_part .discountbp, .buy-packages-page .discountbp {
    transform: none !important; width: auto !important; height: auto !important; line-height: 1.7 !important;
    padding: 3px 11px !important; margin: 0 !important; border-radius: 999px !important;
    font-size: 11px !important; font-weight: 800;
    background: rgba(255,255,255,.82) !important; color: #0a9c6b !important; border: 1px solid rgba(255,255,255,.9);
}
.plans_part .discountbp:not(.panel-sale), .buy-packages-page .discountbp:not(.panel-sale) {
    background: var(--color6, #e60c63) !important; color: #fff !important; border-color: transparent;
}

/* لیستِ ویژگی‌ها: آیکنِ چیپ‌دار ✓/✗ */
.plans_part .main_box_plan, .buy-packages-page .main_box_plan {
    margin-top: 0 !important; padding: 16px 22px 6px !important; line-height: 1.9 !important;
}
.plans_part .main_box_plan li, .buy-packages-page .main_box_plan li {
    color: #3f3f52 !important; display: flex; align-items: flex-start; gap: 9px;
    padding: 7px 0; border-bottom: 1px solid rgba(120,120,150,.10);
}
.plans_part .main_box_plan li:last-child, .buy-packages-page .main_box_plan li:last-child { border-bottom: 0; }
.plans_part .main_box_plan li:before, .buy-packages-page .main_box_plan li:before {
    width: 20px !important; height: 20px; min-width: 20px; border-radius: 7px;
    display: grid !important; place-items: center; font-size: 11px !important; right: 0 !important;
    margin-top: 2px; color: #b6bac6 !important; background: rgba(120,120,150,.10);
}
.plans_part .main_box_plan .has_attr:before, .buy-packages-page .main_box_plan .has_attr:before {
    color: #0a9c6b !important; background: rgba(10,206,140,.16) !important;
}
.plans_part .main_box_plan li:not(.has_attr), .buy-packages-page .main_box_plan li:not(.has_attr) { color: #a7abb7 !important; }

/* لیستِ ویژگی‌های مقدار-دار (فقط صفحه‌ی خرید) */
.buy-packages-page .main_box_desc_txt { list-style: none; margin: 0; padding: 14px 22px 2px !important; }
.buy-packages-page .main_box_desc_txt li {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 8px 0; border-bottom: 1px solid rgba(120,120,150,.10); font-size: 13.5px; color: #3f3f52;
}
.buy-packages-page .main_box_desc_txt li .value { font-weight: 800; color: #0a9c6b; }

/* دکمه‌ی تأییدشده: تمام‌عرض، فلش + شاین */
.plans_part .buy_plan_btn, .buy-packages-page .buy_plan_btn {
    margin: 14px 22px 0 !important; padding: 0 !important; top: 0 !important; text-align: center;
}
.plans_part .box_plan_parent:hover .buy_plan_btn,
.buy-packages-page .box_plan_parent:hover .buy_plan_btn { top: 0 !important; }
.plans_part .buy_plan_btn .button, .buy-packages-page .buy_plan_btn .button {
    width: 100% !important; min-width: 0 !important; height: 52px !important; border-radius: 15px !important;
    position: relative; overflow: hidden; gap: 8px; font-size: 15px !important; font-weight: 800;
    background-image: linear-gradient(135deg, var(--color4), var(--color2)) !important;
    box-shadow: 0 14px 26px -12px rgba(64,42,169,.6) !important;
}
.plans_part .is-popular .buy_plan_btn .button,
.buy-packages-page .is-popular .buy_plan_btn .button,
.buy-packages-page .vip-package .buy_plan_btn .button {
    background-image: linear-gradient(135deg, #12d894, var(--color1)) !important;
    box-shadow: 0 14px 26px -12px rgba(10,206,140,.6) !important;
}
.plans_part .buy_plan_btn .button:after, .buy-packages-page .buy_plan_btn .button:after {
    content: "\2190"; font-size: 17px; display: inline-block; transition: transform .25s ease;
}
.plans_part .buy_plan_btn .button:hover:after, .buy-packages-page .buy_plan_btn .button:hover:after { transform: translateX(-6px); }
.plans_part .buy_plan_btn .button:before, .buy-packages-page .buy_plan_btn .button:before {
    content: ""; position: absolute; top: 0; inset-inline-start: -60%; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
    transform: skewX(-20deg); transition: inset-inline-start .6s ease; pointer-events: none;
}
.plans_part .buy_plan_btn .button:hover:before, .buy-packages-page .buy_plan_btn .button:hover:before { inset-inline-start: 120%; }

/* لینکِ «جزئیات بیشتر» */
.plans_part .box_plan_parent .plan_detail, .buy-packages-page .box_plan_parent .plan_detail {
    display: block; text-align: center; margin: 12px 22px 0 !important; padding-top: 12px !important;
    border-top: 1px solid rgba(120,120,150,.14) !important; color: var(--color2) !important;
    font-weight: 700; font-size: 13px;
}

/* ============================================================
 *  صفحه‌ی مقایسه‌ی پکیج‌ها (/price · قالبِ Panels) — تأییدشده
 *  CSS-only؛ رفتارِ آکاردئون (JS) دست‌نخورده می‌ماند.
 * ============================================================ */
.page-template-template-panels #main_wrap { background: linear-gradient(180deg, #f8f9fc, #f5f6fa); }

/* --- کارت‌های بالای صفحه (#features_bar) → مینی‌کارتِ شیشه‌ای --- */
#features_bar { margin-bottom: 22px; align-items: stretch; }
#features_bar .box_plan_parent {
    width: auto !important; max-width: 100%; margin: 0 !important; height: 100%; top: 0;
    background: rgba(255,255,255,.6) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255,255,255,.78); border-radius: 18px;
    box-shadow: 0 18px 44px -24px rgba(40,30,90,.4) !important; padding-bottom: 14px;
    transition: transform .25s ease, box-shadow .25s ease;
}
#features_bar .box_plan_parent:hover { transform: translateY(-5px); }
#features_bar .box_plan_parent.is-popular { border-color: rgba(10,206,140,.6); box-shadow: 0 22px 50px -22px rgba(10,206,140,.55) !important; transform: translateY(-4px); }
#features_bar .box_plan { background: transparent !important; box-shadow: none !important; overflow: visible !important; padding-bottom: 0 !important; border-radius: 0 !important; top: 0 !important; }
#features_bar .box_plan:before, #features_bar .box_plan:after { display: none !important; }
#features_bar .title_box_plan { background: transparent !important; color: var(--fz-ink) !important; min-height: 0 !important; padding: 16px 12px 4px !important; text-align: center; }
#features_bar .title_box_plan .titlebp { color: #0a9c6b !important; text-align: center !important; text-shadow: none !important; font-size: 14px !important; margin: 0 !important; }
#features_bar .price_box_plan { margin: 8px 0 12px !important; text-align: center; position: static !important; }
#features_bar .price_box_plan small { position: static !important; transform: none !important; left: auto !important; top: auto !important; display: block; color: #8a8aa0 !important; font-size: 11.5px !important; text-decoration: line-through; }
#features_bar .price_box_plan b { color: var(--fz-ink) !important; font-size: 17px !important; text-shadow: none !important; }
#features_bar .badge-wrapper { top: 10px !important; left: 10px !important; right: auto !important; flex-direction: column; gap: 5px; align-items: flex-start; }
#features_bar .discountbp { transform: none !important; width: auto !important; height: auto !important; line-height: 1.7 !important; padding: 2px 9px !important; margin: 0 !important; border-radius: 999px !important; font-size: 10.5px !important; font-weight: 800; background: rgba(255,255,255,.82) !important; color: #0a9c6b !important; border: 1px solid rgba(255,255,255,.9); }
#features_bar .discountbp:not(.panel-sale) { background: var(--color6, #e60c63) !important; color: #fff !important; border-color: transparent; }
#features_bar .buy_plan_btn { margin: 0 12px !important; padding: 0 !important; top: 0 !important; }
#features_bar .buy_plan_btn .button { width: 100% !important; min-width: 0 !important; height: 40px !important; border-radius: 11px !important; font-size: 13px !important; font-weight: 800; background-image: linear-gradient(135deg, var(--color4), var(--color2)) !important; box-shadow: 0 10px 20px -9px rgba(64,42,169,.6) !important; }
#features_bar .is-popular .buy_plan_btn .button { background-image: linear-gradient(135deg, #12d894, var(--color1)) !important; box-shadow: 0 10px 20px -9px rgba(10,206,140,.6) !important; }
#features_bar #logo_panel .box_plan_intro { background: rgba(255,255,255,.5) !important; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; min-height: 0 !important; height: 100%; display: flex; align-items: center; justify-content: center; }
#features_bar #logo_panel .box_plan_intro img { position: static !important; }

/* --- هدرِ چسبانِ نام پکیج‌ها (.sticky_features) → شیشه‌ای --- */
.sticky_features { background: rgba(255,255,255,.88) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 8px 24px -14px rgba(40,30,90,.3); border-radius: 15px; }
.sticky_features span { color: var(--fz-ink) !important; font-size: 14px !important; text-shadow: none !important; }
.sticky_features .pop-col span { color: var(--fz-ink) !important; }
.sticky_features .logo_sticky { background: transparent !important; }
.sticky_features .logo_sticky img { filter: none !important; }

/* --- آکاردئونِ جدولِ مقایسه (.features_panel) --- */
.features_panel .accardion_box { margin-bottom: 14px; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 16px 40px -26px rgba(40,30,90,.35); }
.features_panel .accardion_title { background: #f7f8fc !important; min-height: 0 !important; padding: 14px 18px !important; border-radius: 0 !important; }
.features_panel .accardion_subject { font-size: 14px !important; }
.features_panel .accardion_main.accardion_feature { background: transparent !important; top: 0 !important; padding: 6px 18px 14px !important; border-radius: 0 !important; }
.features_panel .accardion_main:before { display: none !important; }
.features_panel .accardion_feature .row { padding: 9px 0 !important; border-bottom: 1px solid rgba(120,120,150,.10); }
.features_panel .accardion_feature .row:last-child { border-bottom: 0; }
.features_panel .title_feature_aca { font-size: 13px !important; color: #3f3f52 !important; text-align: right; }
.features_panel .accardion_feature .icon-tick,
.features_panel .accardion_feature .icon-cancel { width: 22px !important; height: 22px !important; border-radius: 7px; display: inline-grid !important; place-items: center; margin: 0 auto; font-size: 11px !important; }
.features_panel .accardion_feature .icon-tick { color: #2f9e7e !important; background: rgba(10,206,140,.10); }
.features_panel .accardion_feature .icon-cancel { color: #c2c6d0 !important; background: rgba(120,120,150,.10); }
.features_panel .accardion_feature .col i:not(.icon-tick):not(.icon-cancel) { font-style: normal; font-weight: 800; font-size: 12.5px; color: var(--fz-ink); display: block; }
/* ستونِ پرفروش: تینتِ خنثیِ خیلی ملایم (نه سبز) */
.features_panel .accardion_feature .row .pop-col { background: rgba(99,102,140,.05); border-radius: 8px; }

/* --- ردیفِ دکمه‌های خرید پایین (.buypack_buy) --- */
.buypack.buypack_buy { margin-top: 8px; padding: 16px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.7); border-radius: 16px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.buypack.buypack_buy .row { align-items: center; }
.buypack.buypack_buy span { font-size: 14px !important; font-weight: 800; color: var(--fz-ink) !important; }
.buypack.buypack_buy .button { width: 100% !important; padding: 0 12px !important; height: 46px !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 800; background-image: linear-gradient(135deg, var(--color4), var(--color2)) !important; box-shadow: 0 12px 24px -12px rgba(64,42,169,.6) !important; }
.buypack.buypack_buy .pop-col .button { background-image: linear-gradient(135deg, #12d894, var(--color1)) !important; box-shadow: 0 12px 24px -12px rgba(10,206,140,.6) !important; }

/* احترام به prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .button:hover, .gform_button:hover { transform: none; }
    .fz-hero .fz-glass, .fz-hero .fz-plane,
    .fz-hero .fz-live-dot, .fz-hero .fz-typing i { animation: none !important; }
    #fz-plane-prize .fz-prize-card { animation: none; }
}

/* ═══ نوار پایین موبایل ═══
 * سه اقدام اصلی با متن صریح. آیکن تنها (آدمک) به کاربر نمی‌گفت «ورود».
 */
#fz-mobile-bar{display:none}
@media (max-width: 900px){
    #fz-mobile-bar{
        display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px;
        position:fixed; inset-inline:0; inset-block-end:0; z-index:99996;
        padding:8px 10px calc(8px + env(safe-area-inset-bottom));
        background:rgba(255,255,255,.96);
        -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
        border-block-start:1px solid rgba(20,20,40,.08);
        box-shadow:0 -6px 20px -12px rgba(20,20,40,.35);
    }
    #fz-mobile-bar .fz-mb-item{
        display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
        min-block-size:46px; border-radius:12px; font-size:12.5px; font-weight:700;
        color:var(--fz-ink); text-decoration:none; background:#f4f5f9;
    }
    #fz-mobile-bar .fz-mb-item i{font-size:17px;line-height:1}
    #fz-mobile-bar .fz-mb-item--cta{
        background:var(--fz-live); color:#fff; font-size:14px;
        box-shadow:0 8px 18px -10px rgba(16,185,129,.8);
    }
    /* «پیشنهاد ویژه» دکمه است نه لینک — ریست تا با بقیه یکسان دیده شود */
    #fz-mobile-bar button.fz-mb-item{border:0;font-family:inherit;cursor:pointer;appearance:none}
    /* با چهار خانه، ستون‌ها باریک می‌شوند و «ثبت‌نام رایگان» می‌شکست */
    #fz-mobile-bar.fz-mb--4 .fz-mb-item{font-size:11.5px}
    #fz-mobile-bar.fz-mb--4 .fz-mb-item--cta{font-size:12.5px}
    #fz-mobile-bar.fz-mb--4 .fz-mb-item i{font-size:15px}
    /* فضا فقط روی صفحه‌هایی که نوار دارند (کلاس از farazsms_mobile_bar_visible) */
    body.fz-has-mobile-bar{padding-block-end:70px}

    /*
     * پاپ‌آپ چسبان (پیشنهاد ویژه) زیر نوار پایین گم شده بود.
     *
     * .sticky-popup روی bottom:0 با z-index 9991 است و نوار (99996) کاملاً
     * رویش می‌افتاد — هم خودش، هم دکمه‌ی گردِ بازکردنش که ۲۳ پیکسل بالاتر
     * می‌نشیند. حالا به اندازه‌ی ارتفاع نوار بالا می‌آید تا سرش پیدا باشد.
     */
    body.fz-has-mobile-bar .sticky-popup{bottom:70px}

    /*
     * ⚠️ فلش پیش‌فرض رو به بالا.
     * قبلاً بسته = فلش رو به پایین بود، که یعنی «مرا ببند» در حالی که بسته
     * است. رو به بالا یعنی «مرا باز کن» — همان چیزی که کاربر انتظار دارد.
     */
    .open-st-popup{transform:rotate(180deg)}
    .open-st-popup.active{transform:rotate(0deg)}
}

/* ضربدر بیرون از دکمه — قبلاً داخلش بود و فلش به آن اشاره می‌کرد */
#fz-sticky-cta-wrap{
    position:fixed; inset-block-end:18px; inset-inline-start:18px; z-index:99998;
    display:flex; align-items:center; gap:6px;
    /* visibility لازم است: opacity:0 تنها، دکمه را همچنان قابل تب و
     * قابل کلیک نگه می‌داشت و صفحه‌خوان هم می‌خواندش */
    transform:translateY(140%); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .35s ease, opacity .35s ease, visibility 0s linear .35s;
}
#fz-sticky-cta-wrap.fz-show{
    transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto;
    transition:transform .35s ease, opacity .35s ease, visibility 0s;
}
#fz-sticky-cta-wrap .fz-cta-close{
    inline-size:30px; block-size:30px; border-radius:50%; border:1px solid rgba(20,20,40,.12);
    background:#fff; color:#6b6885; font-size:18px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0;
}
#fz-sticky-cta-wrap .fz-cta-close:hover{color:var(--fz-ink);border-color:rgba(20,20,40,.25)}

/*
 * ⚠️ این بلوک باید *بعد* از قاعده‌ی پایه بیاید.
 *
 * قبلاً `#fz-sticky-cta-wrap{display:none}` داخل همان @media بالا بود، ولی
 * قاعده‌ی پایه (display:flex) پایین‌تر می‌آمد و خاصیت هر دو برابر است —
 * مدیا-کوئری خاصیت اضافه نمی‌کند. نتیجه: CTA شناور روی موبایل هرگز پنهان
 * نمی‌شد و همراه نوار پایین دیده می‌شد. اندازه‌گیری در ۳۷۵px: display:flex.
 */
@media (max-width: 900px){
    /* نوار پایین جای CTA شناور را می‌گیرد */
    #fz-sticky-cta-wrap{display:none}
}

/*
 * ⚠️ ادامه‌ی رفع ترتیب هدر.
 * با برداشتن flex-direction:row-reverse از .head_site .row، خودِ
 * .mobile_part هنوز row-reverse + justify-content:flex-end !important
 * داشت (style.css:311) و آیکن‌ها به لبه‌ی راستِ ستونِ چپ می‌چسبیدند —
 * یعنی وسط صفحه. اندازه‌گیری ۳۷۵px: نوار L5..R188 ولی همبرگر L143..R178.
 */
@media (max-width: 1199px){
    .mobile_part{
        /*
         * ⚠️ کاری که واقعاً انجام می‌شود، برداشتن `row-reverse` است.
         *
         * `justify-content: flex-end !important` را style.css:318 از قبل
         * دارد؛ ولی با row-reverse همان flex-end به لبه‌ی *راست* می‌رفت —
         * یعنی وسط صفحه، کنار لوگو. در RTL و با جهت طبیعی، flex-end یعنی
         * لبه‌ی چپ.
         *
         * اندازه‌گیری ۳۷۵px پس از اصلاح: همبرگر L15..R50، لوگو L188..R360.
         * ⚠️ این قاعده تا ۱۱۹۹px فعال است ولی فقط روی ۳۷۵px اندازه‌گیری شده.
         */
        flex-direction:row !important;
        justify-content:flex-end !important;
        gap:10px;
    }
}

/* ═══ منوی موبایل: از بنفش توپر به سطح روشن ═══
 * بازخورد هیئت مدیره: بنفش توپر چشم را اذیت می‌کند. الگوی مرجع sms.ir
 * حس وب‌اپلیکیشن دارد — سطح روشن، متن تیره، جداکننده‌های نازک.
 * رنگ برند در حاشیه و حالت فعال می‌ماند، نه در کل پس‌زمینه.
 */
#menumobile{
    /* ⚠️ بالاتر از #fz-mobile-bar (99996). با ۹۹۹۹۱ قدیمی، نوار پایین
     * روی پنل باز می‌افتاد و آخرین آیتم‌های منو را می‌پوشاند. */
    z-index:99997 !important;
    background:#fff !important;
    width:min(86vw, 320px) !important;
    right:calc(-1 * min(86vw, 320px)) !important;
    border-inline-start:1px solid rgba(20,20,40,.06);
}
#menumobile.come-menumobile{right:0 !important}
#menumobile a{color:var(--fz-ink, #1b1830) !important}
#menumobile li{border-block-end:1px solid rgba(20,20,40,.06)}
#menumobile li:last-child{border-block-end:0}
#menumobile li > a{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; font-size:14.5px; font-weight:600;
}
#menumobile li > a:hover,
#menumobile li.current-menu-item > a{background:#f4f5f9; color:var(--color2) !important}
#menumobile li.current-menu-item > a{box-shadow:inset -3px 0 0 var(--color2)}
#menumobile .sub-menu{background:#fafbfc}
#menumobile .sub-menu a{font-weight:500; font-size:13.5px; padding-inline-start:30px}

/*
 * ⚠️ سه بازمانده‌ی چیدمان قدیمیِ پنل بنفش.
 *
 * پنل به min(86vw,320px) رفت ولی زیرمنو در style.css:592 روی
 * width:250px / right:-250px ماند — روی گوشی ۳۷۵px یک نوار ۷۰ پیکسلی از
 * پنل سفید لخت می‌ماند. لیبل «بازگشت» هم var(--color1) سبز بود که روی
 * پس‌زمینه‌ی #fafbfc تازه، کنتراستی حدود ۱.۹:۱ می‌دهد. و
 * `.main-mm ul li a{width:80%}` باعث می‌شد هایلایت و نوار تأکیدِ تازه فقط
 * ۸۰٪ ردیف را بگیرد در حالی که جداکننده‌ی li کل عرض را دارد.
 */
/* ⚠️ ویژگی فیزیکی، نه منطقی: پنل و style.css:594 هر دو از `right` استفاده
 * می‌کنند و در RTL، inset-inline-end به `left` نگاشت می‌شود — یعنی به محور
 * اشتباه. کلاس بازشدن (.come-submenu، style.css:632) هم right:0 !important
 * دارد و همان کافی است. */
#menumobile .sub-menu{
    width:min(86vw, 320px);
    right:calc(-1 * min(86vw, 320px));
}
#menumobile .main-mm ul li a{width:100%}
/*
 * ⚠️ با عرض ۱۰۰٪، مقدار `left:-25%` در style.css:630 معادل ۷۰- پیکسل
 * می‌شود و فلش باز کردن زیرمنو کاملاً بیرون از #menumobile می‌افتد که
 * overflow:hidden است — یعنی نه دیده می‌شود و نه کلیک‌پذیر است. قبلاً لینک
 * ۸۰٪ بود و ۲۵٪- از آن، درست لبه‌ی محتوا می‌نشست.
 */
#menumobile .main-mm ul li .childer{left:8px; right:auto}
#menumobile .main-mm ul li .childer i{left:6px}
#menumobile .title-subcome{color:var(--fz-ink, #1b1830); font-weight:700}

/* سربرگ پنل هم باید روشن شود؛ وگرنه نوار بنفش بالای پنل سفید می‌ماند.
 * و چون سربرگ روشن شد، فیلتر invert لوگو (style.css:542) آن را سفیدِ
 * نامرئی می‌کرد — پس همان‌جا خنثی می‌شود. این دو با هم درست‌اند. */
#menumobile .title-mm{
    background:#fff; border-block-end:1px solid rgba(20,20,40,.08); padding:14px 18px;
}
#menumobile .title-mm img{filter:none}
#menumobile #nomenumobile{
    background:#f2f3f7; color:#5b5878; border-radius:50%;
    width:32px; height:32px; line-height:32px; font-size:11px; top:0;
}
#menumobile #nomenumobile:hover{background:#e7e8f0; color:var(--fz-ink)}

/* ═══ باکس پایان نوشته (ماژول CTA) — روشن‌تر و خواناتر ═══ */
.websima-cta, .websima-cta-box, .cta-content, .cta_box{
    background:#f7f8fb !important;
    color:var(--fz-ink, #1b1830) !important;
    border:1px solid rgba(20,20,40,.07);
    border-inline-start:4px solid var(--color1);
    border-radius:16px;
}
.websima-cta *, .websima-cta-box *, .cta-content *, .cta_box *{color:inherit !important}
/* ⚠️ استثنای لینک: با color:inherit، لینک متنی از متن اطرافش قابل تفکیک
 * نبود — تنها نشانه رنگ بود و آن هم برداشته شده بود (WCAG 1.4.1). */
.websima-cta a:not(.button), .websima-cta-box a:not(.button),
.cta-content a:not(.button), .cta_box a:not(.button){
    color:var(--color2) !important; text-decoration:underline;
}
.websima-cta .button, .websima-cta-box .button, .cta-content .button, .cta_box .button{color:#fff !important}
