/* =====================================================================
   IFP Frontend — پوسته ۲ «شیشه‌ای» (Liquid Glass)
   ---------------------------------------------------------------------
   همان زبان بصریِ داشبورد مدیریت روی سطوح فرانت‌اندِ افزونه:
   فرم درخواست/محاسبه‌گر، ویجت صفحه‌ی محصول، داشبورد مشتری،
   درخواست‌ها و اقساط، و ویجت‌های المنتور (همه‌ی آن‌ها همین DOM را دارند).

   بر اساس معیارهای روز (Apple Liquid Glass + NN/g):
   • شیشه فقط روی لایه‌ی بزرگ (پنل بیرونی) — نه روی کارت‌های داخلی
     («Never stack glass on glass»: لایه‌ی داخلی فقط fill، بدون backdrop-filter)
   • بلورِ پله‌ای (tiered blur): بیرون regular، درون بدون blur
   • خوانایی (WCAG AA): لایه‌های پرتراکمِ متن، مات‌تر
   • دسترس‌پذیری: prefers-reduced-transparency و @supports fallback

   فقط وقتی لود می‌شود که تنظیم ui_theme = glass باشد.
   ===================================================================== */

/* ==================== Design Tokens — مقیاس استاندارد ==================== */
:root {
    --g-blur: 14px;          /* regular — صحنه‌های بزرگ (فقط ریشه‌ی صحنه) */
    --g-blur-soft: 10px;     /* کنترل‌های کوچک */
    --g-saturate: 180%;
    --g-tint: 255 255 255;
    --g-tint-a: .62;
    --g-tint-a-strong: .82;  /* پنل‌های پرتراکم متن */
    --g-tint-a-soft: .42;
    --g-rim: rgb(255 255 255 / .80);
    --g-rim-soft: rgb(255 255 255 / .46);
    --g-spec: rgb(255 255 255 / .92);
    --g-inner: rgb(15 23 42 / .16);
    --g-shadow: 0 2px 6px rgb(15 23 42 / .05), 0 22px 48px -26px rgb(15 23 42 / .34);
    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #59657a;
    --muted-2: #94a3b8;
    --r-lg: 20px;
    --r-md: 16px;
    --r-sm: 12px;
    --r-pill: 999px;
    --s-1: 6px; --s-2: 10px; --s-3: 14px; --s-4: 18px; --s-5: 24px; --s-6: 32px;
}

/* =====================================================================
   پنل اصلی فرم درخواست / محاسبه‌گر — تنها سطحِ «شیشه‌ایِ واقعی»
   (نکته: کارت‌های داخلی زیرِ آن بدون backdrop-filter؛ فقط fill)
   ===================================================================== */
#ifp-calculator {
    padding:36px 32px 40px;
    background:
        radial-gradient(760px 420px at 96% -10%, rgba(96, 165, 250, .30), transparent 60%),
        radial-gradient(620px 400px at -10% 8%, rgba(167, 139, 250, .26), transparent 62%),
        radial-gradient(520px 340px at 76% 108%, rgba(244, 114, 182, .18), transparent 62%),
        radial-gradient(420px 300px at 30% 110%, rgba(251, 191, 36, .12), transparent 60%),
        linear-gradient(168deg, rgb(var(--g-tint) / .88), rgb(var(--g-tint) / .62));
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
    backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
}

/* در دسکتاپ داخلِ پنلِ کاربر، محاسبه‌گر توسطِ .ifp-panel-content (padding:24px)
   احاطه شده؛ paddingِ خودِ محاسبه‌گر را کم می‌کنیم تا پدینگِ تو در تو انباشته نشود. */
.ifp-user-panel #ifp-calculator {
    padding:20px;
}

/* سطوح داخلی فرم — هم‌اندازه و یک‌دست، اما FILL مات‌تر (بدون شیشه روی شیشه).
   فقط fill و لبه؛ بدون backdrop-filter تا والدِ شیشه‌ای دوباره blur نشود.
   لایه‌ی روییِ rim-gradient + inner-rim طبق الگوی GlassCard در Ein UI. */
#ifp-calculator .ifp-calculation-box {
    padding:28px;
    position: relative;
    background: rgb(var(--g-tint) / .86);
    border: 1px solid rgb(148 163 184 / .35);
    border-radius: var(--r-lg);
    box-shadow:
        0 10px 26px -18px rgb(15 23 42 / .30),
        inset 0 1px 0 rgb(255 255 255 / .9);
    overflow: hidden;
}
/* result-card و فرم درخواست داخلِ calculation-box هستند؛ پس دیگر باکسِ
   تودرتو با حاشیه/سایهی جدا نیستند — زیربخشِ تختِ همان کارت. */
#ifp-calculator .ifp-result-card,
#ifp-calculator #ifp-request-real-form {
    padding:24px;
    background: rgb(var(--g-tint) / .55);
    border: 1px solid rgb(148 163 184 / .25);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .7);
    overflow: hidden;
}
/* rim-gradient: نورِ ملایم از لبه‌ی بالا می‌تابد (حسبِ GlassCard) */
#ifp-calculator .ifp-calculation-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent);
    pointer-events: none;
}

/* داخلِ پنل — کارت‌های داخلی هم کوتاه‌تر تا جمعِ نهایی معقول بماند */
.ifp-user-panel #ifp-calculator .ifp-calculation-box,
.ifp-user-panel #ifp-calculator .ifp-result-card,
.ifp-user-panel #ifp-calculator #ifp-request-real-form {
    padding:20px;
    margin:0 0 16px;
}

/* فاصله‌ی عمودی میان بخش‌های فرم — یک‌دست */
#ifp-calculator .ifp-calculation-box,
#ifp-calculator .ifp-result-card,
#ifp-calculator #ifp-request-real-form {
    margin:var(--s-5);
}

/* =====================================================================
   ویجت صفحه‌ی محصول (ifp-product-plans / ifp-pp-*)
   ===================================================================== */
#ifp-calculator .ifp-product-plans { padding:0; }

/* هدر محاسبه‌گر — خوانایی روی شیشه (WCAG AA) */
#ifp-calculator .ifp-header h2 {
    color: #0f172a;
    letter-spacing: 0;
}
#ifp-calculator .ifp-header p {
    color: #64748b;
}

/* نوار گام‌ها — دایره‌ها شیشه‌ایِ عمیق، خطوط ملایم‌تر */
#ifp-calculator .ifp-step-circle {
    background: rgb(255 255 255 / .65);
    border: 1.5px solid rgb(148 163 184 / .45);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 2px 8px -4px rgb(15 23 42 / .20);
}
#ifp-calculator .ifp-step-ind:not(:last-child)::after {
    background: rgb(148 163 184 / .45);
}
#ifp-calculator .ifp-step-ind.active:not(:last-child)::after {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

/* کارت‌های محصول روی بدنه‌ی سایت هم «شیشه» می‌مانند (لایه‌ی بالای محتوا) */
/* صحنه‌ی ویجت محصول — تنها بزرگ‌نماییِ شیشه‌ایِ آن صفحه، روی ظرفِ ویجت (یک‌جا).
   کارت/نتیجه/مِنا زیرِ آن سطوحِ مات می‌مانند (بدون blurِ تودرتو). */
.ifp-product-plans .ifp-pp-card {
    background: linear-gradient(147deg, rgb(var(--g-tint) / .92), rgb(var(--g-tint) / .78));
    border: 1px solid rgb(148 163 184 / .35);
    border-radius: var(--r-lg);
    box-shadow:
        var(--g-shadow),
        inset 0 1px 0 var(--g-spec),
        inset 0 -14px 30px -22px var(--g-inner);
}

/* کارت‌های طرح مالی در محاسبه‌گر — حضورِ واضح (حاشیه/رنگِ داخلی که با
   سفیدشدنِ توکن‌ها گم می‌شد) + رنگِ پلنِ داینامیک روی hover/active */
#ifp-calculator .ifp-term-card {
    background: rgb(var(--g-tint) / .9);
    border: 1.5px solid rgb(148 163 184 / .28);
    box-shadow: 0 8px 22px -16px rgb(15 23 42 / .28), inset 0 1px 0 rgb(255 255 255 / .85);
}
#ifp-calculator .ifp-term-card:hover {
    border-color: color-mix(in srgb, var(--plan-color, #6366f1) 55%, rgb(148 163 184 / .3));
    box-shadow: 0 10px 26px -14px rgb(15 23 42 / .30);
}
#ifp-calculator .ifp-term-card h3 {
    color: var(--plan-color, #1e293b);
}
/* ریزمربع‌های مشخصات طرح — خوانا با لبه‌ی روشن */
#ifp-calculator .ifp-term-spec {
    background: rgb(var(--g-tint) / .72);
    border: 1px solid rgb(148 163 184 / .18);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .6);
}
#ifp-calculator .ifp-term-spec.highlight {
    background: linear-gradient(135deg, rgb(238 242 255 / .9), rgb(224 231 255 / .7));
    border-color: rgb(199 210 254 / .5);
}
#ifp-calculator .ifp-term-spec.highlight .ifp-spec-value {
    color: var(--ifp-tx-6366f1, #4338ca);
}

/* نتیجه‌ی محاسبه — آیتم‌ها تخت اما با جداسازیِ ملایم؛ ردیف کل برجسته */
#ifp-calculator .ifp-result-item {
    background: rgb(var(--g-tint) / .7);
    border: 1px solid rgb(148 163 184 / .18);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .55);
}
#ifp-calculator .ifp-result-item.total {
    background: linear-gradient(135deg, rgb(238 242 255 / .95), rgb(224 231 255 / .78));
    border-color: rgb(199 210 254 / .55);
}

/* وضعیت‌های زنده (پیش‌پرداخت/سقف) — تینت سبز/قرمز حفظ شود */
#ifp-calculator .ifp-live-status.ifp-ok {
    background: rgb(236 253 245 / .75);
    border: 1px solid rgb(167 243 208 / .9);
    color: var(--ifp-tx-065f46, #065f46);
}
#ifp-calculator .ifp-live-status.ifp-nok {
    background: rgb(254 242 242 / .78);
    border: 1px solid rgb(254 202 202 / .9);
    color: var(--ifp-tx-991b1b, #991b1b);
}

/* لیستِ نتیجه داخل کارت — بی‌قاب (فقط جداکننده‌ی ردیف‌ها)، تا کادرِ دوم نداشته باشد */
.ifp-product-plans .ifp-pp-result {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ریزمربع‌های داخل کارت — fillِ مات‌تر + لبه و سایه‌ی واضح */
.ifp-product-plans .ifp-pp-meta-item,
.ifp-product-plans .ifp-pp-dp-section {
    background: rgb(var(--g-tint) / .92) !important;
    border: 1px solid rgb(203 213 225 / .6);
    border-radius: var(--r-md);
    padding:12px 12px;
    box-shadow:
        0 6px 14px -10px rgb(15 23 42 / .18),
        inset 0 1px 0 rgb(255 255 255 / .85);
}
.ifp-product-plans .ifp-pp-meta {
    gap:12px;
}

/* ردیف‌های نتیجه‌ی محاسبه — فاصله‌ی درونی و جداکننده‌ی خط‌چین */
.ifp-product-plans .ifp-pp-result {
    padding:8px;
}
.ifp-product-plans .ifp-pp-result-row {
    padding:12px 8px;
    border-bottom: 1px dashed rgb(148 163 184 / .30);
}
.ifp-product-plans .ifp-pp-result-row:last-child {
    border-bottom: none;
}
.ifp-product-plans .ifp-pp-result-row-fee {
    margin:2px;
    background: rgb(255 255 255 / .35) !important;
    border-radius: 12px;
    padding:8px 12px;
}

/* فاصله‌گذاری ویجت روی بدنه‌ی سایت — یک‌دست با دیگر سطوح */
.ifp-product-plans { margin:36px 0; }
.ifp-product-plans .ifp-pp-scroll { gap:24px; }

/* شیشه‌ی واقعی فقط روی ظرفِ ویجت (۱ بار در صفحه) — همین کافی است */
.ifp-product-plans {
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
    backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
}

/* هدر کارت: جداکننده‌ی ملایم شیشه‌ای (به‌جای خطِ خاکستریِ تخت) */
.ifp-product-plans .ifp-pp-card-head {
    border-bottom-color: rgb(15 23 42 / .06);
}

/* تایپوگرافیِ برچسب‌ها در ویجت محصول — فارسی‌دوست */
.ifp-product-plans .ifp-pp-meta-label {
    text-transform: none;
    letter-spacing: 0;
}
.ifp-product-plans .ifp-pp-dp-label { letter-spacing: 0; }

/* نشانِ (badge) شیشه‌ای — لبه‌ی روشن + عمقِ ملایم، رنگِ معنایی حفظ می‌شود */
.ifp-product-plans .ifp-pp-badge {
    border: 1px solid rgb(255 255 255 / .65);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 2px 8px -4px rgb(15 23 42 / .28);
}

/* اعلانِ متغیر/رنگ — شیشه‌ی کهربایی به‌جای پس‌زمینه‌ی تخت */
.ifp-product-plans .ifp-pp-var-notice {
    background: linear-gradient(147deg, rgb(254 243 199 / .85), rgb(255 251 235 / .6));
    border-color: rgb(253 230 138 / .9);
    box-shadow:
        0 6px 20px -10px rgb(146 64 14 / .25),
        inset 0 1px 0 rgb(255 255 255 / .7);
    border-radius: var(--r-md);
}

/* پیام «عدم امکان خرید» — شیشه‌ی قرمز ملایم */
.ifp-product-plans .ifp-pp-infeasible {
    background: linear-gradient(147deg, rgb(254 226 226 / .85), rgb(255 241 241 / .6));
    border-color: rgb(254 202 202 / .9);
    box-shadow:
        0 6px 20px -10px rgb(153 27 27 / .22),
        inset 0 1px 0 rgb(255 255 255 / .7);
    border-radius: var(--r-md);
}

/* اسکرول‌بارِ شیشه‌یی‌تر */
.ifp-product-plans .ifp-pp-scroll::-webkit-scrollbar-track {
    background: rgb(15 23 42 / .05);
    border-radius: 4px;
}
.ifp-product-plans .ifp-pp-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgb(99 102 241 / .55), rgb(124 58 237 / .5));
    border-radius: 4px;
}

/* =====================================================================
   انتخاب طرح (دکمه‌های پلن) در محاسبه‌گر — شیشه‌ای، ماهواره‌ی هماهنگ
   ===================================================================== */
#ifp-calculator .ifp-plan-btn {
    background: rgb(255 255 255 / .72);
    border: 1.5px solid var(--g-rim-soft) !important;
    box-shadow:
        var(--g-shadow),
        inset 0 1px 0 rgb(255 255 255 / .8);
}
#ifp-calculator .ifp-plan-btn:hover {
    background: rgb(255 255 255 / .92);
    border-color: rgb(99 102 241 / .6) !important;
    box-shadow:
        0 10px 26px -12px rgb(99 102 241 / .35),
        inset 0 1px 0 rgb(255 255 255 / .9);
}
#ifp-calculator .ifp-plan-btn.ifp-active {
    background: linear-gradient(135deg, var(--plan-color, #6366f1), color-mix(in srgb, var(--plan-color, #8b5cf6) 80%, #000));
    border-color: transparent !important;
    box-shadow:
        0 10px 30px -10px color-mix(in srgb, var(--plan-color, #6366f1) 55%, transparent),
        inset 0 1px 0 rgb(255 255 255 / .35);
}
#ifp-calculator .ifp-plan-btn.ifp-active:hover {
    border-color: transparent !important;
}

/* =====================================================================
   داشبورد مشتری / درخواست‌ها / اقساط / پنل کاربر
   ===================================================================== */
.ifp-user-panel {
    background:
        radial-gradient(600px 360px at 100% -12%, rgba(96, 165, 250, .28), transparent 60%),
        radial-gradient(520px 320px at -6% 20%, rgba(167, 139, 250, .24), transparent 62%),
        radial-gradient(420px 300px at 80% 110%, rgba(251, 191, 36, .12), transparent 60%),
        linear-gradient(168deg, rgb(var(--g-tint) / .62), rgb(var(--g-tint) / .40));
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
    backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
}

/* کارت‌های داخلی پنل — فقط FILL مات‌تر، بدون backdrop-filter داخلی
   (اسکوپ‌شده زیر ریشه‌های مشتری؛ از نشت به ادمین/پنل کارشناس جلوگیری می‌کند) */
.ifp-user-panel .ifp-panel-nav,
.ifp-user-dashboard .ifp-dash-section,
.ifp-user-dashboard .ifp-stat-card,
.ifp-user-installments .ifp-installment-group,
.ifp-my-requests .ifp-req-card,
.ifp-my-requests .ifp-guarantee-box,
.ifp-user-dashboard .ifp-trans-table {
    background: rgb(var(--g-tint) / .86) !important;
    border-color: rgb(203 213 225 / .6) !important;
    box-shadow:
        0 2px 5px rgb(15 23 42 / .05),
        0 20px 44px -26px rgb(15 23 42 / .30),
        inset 0 1px 0 rgb(255 255 255 / .9) !important;
}

/* هماهنگی زاویه‌ها: کارت‌های مشتری هم‌نقشِ داشبورد → ۱۸px */
.ifp-user-dashboard .ifp-stat-card {
    border-radius: 18px !important;
}

/* بخش‌های داشبورد — جداسازی واضح: header با خط، empty-state با کادر */
.ifp-user-dashboard .ifp-section-header {
    border-bottom-color: rgb(15 23 42 / .08);
}
.ifp-user-dashboard .ifp-empty-state {
    background: rgb(var(--g-tint) / .42) !important;
    border: 1px dashed rgb(148 163 184 / .6);
    border-radius: var(--r-md);
    padding:32px 20px;
}

/* ریزمربع‌های داخلی کارت‌های مشتری */
.ifp-user-installments .ifp-installment-group .ifp-summary-item,
.ifp-my-requests .ifp-req-card .ifp-req-meta-item,
.ifp-my-requests .ifp-request-item {
    background: rgb(255 255 255 / .55) !important;
    border-color: var(--g-rim-soft) !important;
}

/* جدول شفاف — الگوی zebra؛ وضوح خطوطِ جداکننده برای خوانایی */
.ifp-user-dashboard .ifp-trans-table thead th {
    background: rgb(255 255 255 / .55) !important;
    color: var(--muted) !important;
    border-bottom-color: rgb(15 23 42 / .08) !important;
}
.ifp-user-dashboard .ifp-trans-table tbody td {
    background: transparent !important;
    border-bottom-color: rgb(15 23 42 / .05) !important;
}
.ifp-user-dashboard .ifp-trans-table tbody tr:nth-child(even) td {
    background: rgb(255 255 255 / .32) !important;
}
.ifp-user-dashboard .ifp-trans-table tbody tr:hover td {
    background: rgb(99 102 241 / .08) !important;
}

/* =====================================================================
   ورودی‌ها — کنترل‌های شیشه‌ایِ خوانا
   ---------------------------------------------------------------------
   طبق پژوهش: ورودی‌های گلس در دنیای واقعی شکست می‌خورند چون کاربر
   متنِ تایپ‌شده‌ی خودش را روی پس‌زمینه‌ی blur دیده‌شونده نمی‌بیند.
   راه‌حلِ استانداردِ روز (CodeFronts/TypeUI): ورودی = «صفحه‌ی پایدار»
   با fillِ مات‌تر از کارت، داخلسایه برای عمق، فوکوس با حلقه‌ی واضح،
   و پدینگ/ابعاد لمسی استاندارد (min-height 2.75rem، padding .75rem .9rem).
   ===================================================================== */
/* ---------------------------------------------------------------------
   ورودی‌های فرم درخواست توسط frontend.js ساخته می‌شوند و بیشترِ آن‌ها
   فقط `type` دارند (بدون کلاس) و یک `style` inline حمل می‌کنند. برای
   آنکه پوسته‌ی شیشه رویِ همه‌ی آن‌ها یک‌دست و خوانا اعمال شود (و inline
   برد نکند) همه‌ی انواع را پوشش می‌دهیم و با !important ابعاد/رنگ/حاشیه
   را یکنواخت می‌کنیم.
   --------------------------------------------------------------------- */
#ifp-calculator input[type="text"],
#ifp-calculator input[type="search"],
#ifp-calculator input[type="url"],
#ifp-calculator input[type="email"],
#ifp-calculator input[type="number"],
#ifp-calculator input[type="date"],
#ifp-calculator input[type="tel"],
#ifp-calculator input[type="file"],
#ifp-calculator select,
#ifp-calculator textarea,
.ifp-user-panel input[type="text"],
.ifp-user-panel input[type="search"],
.ifp-user-panel input[type="number"],
.ifp-user-panel input[type="date"],
.ifp-user-panel select,
.ifp-user-panel textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 3rem;
    padding:.75rem 1rem !important;
    border-radius: var(--r-sm) !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: var(--ink) !important;
    background: rgb(255 255 255 / .95) !important;
    border: 1.5px solid rgb(100 116 139 / .50) !important;
    box-shadow:
        inset 0 2px 5px rgb(15 23 42 / .08),
        inset 0 -1px 0 rgb(255 255 255 / .95),
        0 1px 3px rgb(15 23 42 / .10) !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

/* فوکوس — حلقه‌ی واضح + روشن‌ترشدن شیشه (بجای پرکردن سفید مات) */
#ifp-calculator input:focus,
#ifp-calculator select:focus,
#ifp-calculator textarea:focus,
.ifp-user-panel input:focus,
.ifp-user-panel select:focus,
.ifp-user-panel textarea:focus {
    outline: 2px solid rgb(99 102 241 / .55) !important;
    outline-offset: 1px !important;
    border-color: rgb(255 255 255 / .55) !important;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .55),
        0 6px 20px rgb(15 23 42 / .22) !important;
    background: rgb(255 255 255 / .22) !important;
}

/* placeholder — ملایم‌تر مطابق glass-input (روی شیشه‌ی نیمه‌شفاف) */
#ifp-calculator input::placeholder,
#ifp-calculator textarea::placeholder,
.ifp-user-panel input::placeholder,
.ifp-user-panel textarea::placeholder {
    color: rgb(15 23 42 / .45) !important;
    opacity: 1;
}

/* ورودی‌های با کلاس مشخص (amount/phone/date/job) — هم‌ریخت با بقیه */
#ifp-calculator .ifp-number-input,
#ifp-calculator .ifp-phone-input,
#ifp-calculator .ifp-jdate,
#ifp-calculator .ifp-job-position-input,
#ifp-calculator .ifp-select-field {
    min-height: 3rem !important;
    line-height: 1.5 !important;
    font-size: 1rem !important;
    padding:.75rem 1rem !important;
    border-radius: var(--r-sm) !important;
    color: var(--ink) !important;
    background: rgb(255 255 255 / .12) !important;
    -webkit-backdrop-filter: blur(var(--g-blur-soft)) saturate(var(--g-saturate)) !important;
    backdrop-filter: blur(var(--g-blur-soft)) saturate(var(--g-saturate)) !important;
    border: 1px solid rgb(255 255 255 / .28) !important;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .45),
        0 4px 16px rgb(15 23 42 / .18) !important;
}

/* کادر فایل‌آپلود در فرم درخواست — شیشه‌ایِ خط‌چین خوانا */
#ifp-calculator input[type="file"] {
    padding:1rem;
    border-style: dashed;
    border-color: rgb(99 102 241 / .45) !important;
    background: rgb(255 255 255 / .14) !important;
    -webkit-backdrop-filter: blur(var(--g-blur-soft)) saturate(var(--g-saturate)) !important;
    backdrop-filter: blur(var(--g-blur-soft)) saturate(var(--g-saturate)) !important;
    cursor: pointer;
}
#ifp-calculator input[type="file"]:hover {
    border-color: rgb(99 102 241 / .7) !important;
    background: rgb(255 255 255 / .9) !important;
}

/* دکمه‌ی «ارسال درخواست» (در frontend.js بدون کلاس ساخته می‌شود) */
#ifp-calculator #ifp-request-real-form button[type="submit"] {
    min-height: 3rem;
    border-radius: var(--r-md) !important;
    font-size: 1rem;
    margin: 0 !important;
}
#ifp-calculator #ifp-request-real-form button[type="submit"]:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* دکمه‌های عمومی — حلقه فوکوس کیبورد */
.ifp-btn:focus-visible,
.ifp-btn-outline:focus-visible {
    outline: 2px solid rgb(99 102 241 / .55);
    outline-offset: 2px;
}

/* کادر تلفن (موبایل/ثابت) — هم‌قد ورودی‌ها + حلقه‌ی فوکوس روی کل کادر */
#ifp-calculator #ifp-request-real-form .ifp-phone-wrapper {
    border-radius: 12px !important;
    border-color: rgb(100 116 139 / .5) !important;
    border-width: 1.5px !important;
}
#ifp-calculator #ifp-request-real-form .ifp-phone-wrapper .ifp-phone-prefix {
    padding: 0 12px !important;
    background: rgb(15 23 42 / .06) !important;
    border-inline-end-color: rgb(100 116 139 / .5) !important;
}
#ifp-calculator #ifp-request-real-form .ifp-phone-wrapper:focus-within {
    border-color: #6366f1 !important;
    outline: 2px solid rgb(99 102 241 / .55);
    outline-offset: 1px;
}

/* فیلدهای الزامی — نشانگر «*» قرمز + تراز جلوی لبل */
#ifp-calculator #ifp-request-real-form .ifp-row:has(> input[required]) > label::after,
#ifp-calculator #ifp-request-real-form .ifp-row:has(> select[required]) > label::after,
#ifp-calculator #ifp-request-real-form .ifp-row:has(> .ifp-phone-wrapper input[required]) > label::after {
    content: ' *';
    color: #dc2626;
    font-weight: 700;
}

/* =====================================================================
   دکمه‌ها — شیشه‌ای (اسکوپِ ریشه‌های مشتری؛ بدون نشت به پنل کارشناس)
   ===================================================================== */
#ifp-calculator .ifp-btn-outline,
#ifp-calculator .ifp-btn-ghost,
.ifp-product-plans .ifp-btn-outline,
.ifp-product-plans .ifp-btn-ghost,
.ifp-user-panel .ifp-btn-outline,
.ifp-user-panel .ifp-btn-ghost,
.ifp-user-dashboard .ifp-btn-outline,
.ifp-user-dashboard .ifp-btn-ghost,
.ifp-user-installments .ifp-btn-outline,
.ifp-user-installments .ifp-btn-ghost,
.ifp-my-requests .ifp-btn-outline,
.ifp-my-requests .ifp-btn-ghost {
    background: rgb(255 255 255 / .7);
    border: 1px solid var(--g-rim) !important;
    color: var(--ink-2);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .75);
}
#ifp-calculator .ifp-btn-outline:hover,
#ifp-calculator .ifp-btn-ghost:hover,
.ifp-product-plans .ifp-btn-outline:hover,
.ifp-product-plans .ifp-btn-ghost:hover,
.ifp-user-panel .ifp-btn-outline:hover,
.ifp-user-panel .ifp-btn-ghost:hover,
.ifp-user-dashboard .ifp-btn-outline:hover,
.ifp-user-dashboard .ifp-btn-ghost:hover,
.ifp-user-installments .ifp-btn-outline:hover,
.ifp-user-installments .ifp-btn-ghost:hover,
.ifp-my-requests .ifp-btn-outline:hover,
.ifp-my-requests .ifp-btn-ghost:hover {
    background: rgb(255 255 255 / .9);
    border-color: rgb(99 102 241 / .7) !important;
    color: #4f46e5;
}

#ifp-calculator .ifp-btn-primary,
#ifp-calculator button[type="submit"],
#ifp-calculator .ifp-btn-request,
.ifp-user-panel .ifp-btn-primary,
.ifp-user-panel .ifp-btn-request,
.ifp-product-plans .ifp-btn-primary,
.ifp-product-plans .ifp-btn-request {
    border: 1px solid rgb(255 255 255 / .30) !important;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .45),
        0 14px 30px -14px rgb(15 23 42 / .45) !important;
}

#ifp-calculator .ifp-btn-danger,
.ifp-user-panel .ifp-btn-danger,
.ifp-user-dashboard .ifp-btn-danger,
.ifp-user-installments .ifp-btn-danger,
.ifp-my-requests .ifp-btn-danger {
    background: linear-gradient(135deg, rgb(254 226 226 / .88), rgb(var(--g-tint) / .7)) !important;
    border: 1px solid rgb(254 202 202 / .85) !important;
    color: #991b1b !important;
}

/* =====================================================================
   تایپوگرافی و فاصله‌گذاری — فرم‌ها (سمت مشتری)
   لابل‌ها / هدر فرم‌ها / هوای بین ردیف‌ها
   ===================================================================== */
#ifp-calculator .ifp-row label,
#ifp-calculator #ifp-request-real-form label,
#ifp-calculator .ifp-calculation-box label,
.ifp-user-panel label,
.ifp-user-panel .ifp-profile-form label {
    display: block;
    margin:0 0 6px;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #334155;
}

#ifp-calculator .ifp-row {
    margin: 20px 0;
}
#ifp-calculator .ifp-row:first-child {
    margin: 0 0 20px;
}
#ifp-calculator #ifp-request-real-form .ifp-row {
    margin: 0 0 16px;
}
#ifp-calculator #ifp-request-real-form .ifp-row-duo { row-gap: 0; }

/* ردیف‌های دوتایی (استان/شهر و...) — فاصله‌ی بین دو ستونِ کنارِ هم */
#ifp-calculator #ifp-request-real-form .ifp-row-duo .ifp-row {
    margin: 0;
}

/* متن‌های راهنما زیر ورودی‌ها (کارشناس، کمکی) */
#ifp-calculator #ifp-request-real-form .ifp-hint,
#ifp-calculator #ifp-request-real-form div[style*="font-size:12px"] {
    font-size: .75rem !important;
    color: #64748b !important;
    margin: 6px 0 0;
    line-height: 1.6;
}

/* جداکننده‌های بین بخش‌های مدارک در فرم درخواست */
#ifp-calculator #ifp-request-real-form div[style*="margin:20px 0"] {
    margin: 24px 0 12px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: 0;
}

/* =====================================================================
   تایپوگرافی/چیدمان — پولیش نهایی
   اصل موثق (W3C css-text §7.2.1): ترکینگ (letter-spacing) روی خطِ پیوسته‌ی
   فارسی/عربی یا صفر می‌شود یا پیوستگیِ حروف را می‌شکند؛ پس همه‌جا 0 است.
   + ارقام جدولی تا در جدول‌ها/کارت‌ها اعدادِ هم‌عرض و ستون‌های منظم
   داشته باشیم.
   ===================================================================== */
.ifp-dash-greeting h1,
.ifp-page-header h1 { letter-spacing: 0; }

.ifp-stat-number,
.ifp-wallet-value,
.ifp-trans-table th,
.ifp-trans-table td,
.ifp-pp-meta-value,
.ifp-req-tracking,
.ifp-tracking-code,
.ifp-stat-card .stat-value,
.ifp-installment-table th,
.ifp-installment-table td {
    font-variant-numeric: tabular-nums;
}

/* سایه‌های مهارشده (M3: سلسله‌مراتب با سطح، نه سایه‌های بلند/نامرتب) */
#ifp-calculator {
    box-shadow: 0 20px 48px rgba(0, 0, 0, .07), 0 2px 6px rgba(0, 0, 0, .03);
}
.ifp-btn-request {
    box-shadow: 0 8px 24px rgba(22, 163, 74, .24);
}
.ifp-btn-request:hover {
    box-shadow: 0 10px 26px rgba(22, 163, 74, .30);
}
.ifp-btn-primary:hover {
    box-shadow: 0 8px 22px rgba(22, 163, 74, .28);
}
.ifp-stat-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
}
.ifp-dash-wallet-card {
    box-shadow: 0 6px 24px rgba(99, 102, 241, .28);
}

/* =====================================================================
   دقت نهایی — کنتراست AA + فوکوس کیبورد برای کارت‌ها/کلیدهای کلیک‌پذیر
   ===================================================================== */
.ifp-stat-label,
.ifp-req-plan,
.ifp-pay-date,
.ifp-dash-greeting p,
#ifp-calculator .ifp-header p,
#ifp-calculator .ifp-term-spec .ifp-spec-label {
    color: #64748b;
}

/* چیدمان — گام پد کارت‌ها و هم‌راستایی داخلی */
.ifp-stat-card {
    border-radius: var(--r-md);
}
.ifp-dash-wallet-card {
    padding: 20px 24px;
}
.ifp-summary-item {
    padding: 16px;
}

a.ifp-pp-term-card:focus-visible,
a.ifp-pp-plan-btn:focus-visible,
.ifp-dash-theme-toggle:focus-visible,
.ifp-dash-filter-toggle:focus-visible,
.ifp-pp-nav:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* فوکوس زیر نوار چسبان ادمین (داخل ورود کاربر) پنهان نماند — WCAG 2.2 SC 2.4.11 / تکنیک C43 */
html {
    scroll-padding:56px;
}

/* =====================================================================
   دسترس‌پذیری — fallback برای مرورگرهای بدون backdrop-filter
   ===================================================================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #ifp-calculator,
    .ifp-product-plans .ifp-pp-card,
    .ifp-user-panel {
        background: linear-gradient(168deg, #ffffff 0%, #f1f5fd 52%, #e7edfd 100%) !important;
    }
    #ifp-calculator .ifp-plan-btn {
        background: #ffffff !important;
    }
    .ifp-product-plans .ifp-pp-var-notice {
        background: #fffbeb !important;
    }
    .ifp-product-plans .ifp-pp-infeasible {
        background: #fef2f2 !important;
    }
}

/* =====================================================================
   دسترس‌پذیری — کاهش‌شفافیت (شیشه → ماتِ جامد) و کاهش‌حرکت
   ===================================================================== */
@media (prefers-reduced-transparency: reduce) {
    #ifp-calculator,
    .ifp-product-plans .ifp-pp-card,
    .ifp-user-panel {
        background: linear-gradient(168deg, #ffffff 0%, #f1f5fd 52%, #e7edfd 100%) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    #ifp-calculator .ifp-calculation-box,
    #ifp-calculator .ifp-result-card,
    #ifp-calculator #ifp-request-real-form,
    #ifp-calculator .ifp-plan-btn,
    .ifp-user-panel .ifp-panel-nav,
    .ifp-user-dashboard .ifp-dash-section,
    .ifp-user-dashboard .ifp-stat-card,
    .ifp-user-installments .ifp-installment-group,
    .ifp-my-requests .ifp-req-card,
    .ifp-my-requests .ifp-guarantee-box,
    .ifp-user-dashboard .ifp-trans-table {
        background: #ffffff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .ifp-product-plans .ifp-pp-meta-item,
    .ifp-product-plans .ifp-pp-dp-section {
        background: #f8fafc !important;
    }
    .ifp-product-plans .ifp-pp-var-notice {
        background: #fffbeb !important;
    }
    .ifp-product-plans .ifp-pp-infeasible {
        background: #fef2f2 !important;
    }
}

@media (prefers-contrast: more) {
    #ifp-calculator,
    .ifp-user-panel { border-color: rgb(15 23 42 / .35) !important; }
}

@media (prefers-reduced-motion: reduce) {
    #ifp-calculator *,
    .ifp-user-panel *,
    .ifp-user-dashboard *,
    .ifp-user-installments *,
    .ifp-my-requests *,
    .ifp-product-plans * { transition: none !important; }
}

/* =====================================================================
   ریسپانسیو — سمت مشتری (زیر دسکتاپ)
   این لایه بعد از frontend.css لود می‌شود و تداخلِ دو بلاکِ 640px قبلی را
   که «کارت‌ها را دو ستونه‌ی باریک» می‌کرد، رفع می‌کند.
   اهداف (با تأیید: هر سه تایل موبایل/تبلت) — بدونِ سرریز افقی، کارت‌ها
   تک‌ستونه یا منظم، دکمه‌ها تمام‌عرضِ لمسی، فرمِ درخواستِ هم‌تراز.
   ===================================================================== */

/* حفاظت از سرریز افقی — کل محتوای مشتری نباید از viewport بیرون بزند */
#ifp-calculator,
.ifp-user-panel,
.ifp-user-dashboard,
.ifp-user-installments,
.ifp-my-requests,
.ifp-product-plans {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    /* ویجت محصول/المنتور باید اسلایدرِ افقی بماند (نه wrap زیرِ هم)؛
       فقط مطمئن می‌شویم کارت‌ها کوچک‌شونده‌اند و داخلِ ریل بی‌نقص می‌چرخند. */
    .ifp-pp-scroll,
    .elementor-widget-container .ifp-pp-scroll,
    .elementor-widget-wrap .ifp-pp-scroll {
        flex-wrap: nowrap !important;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px; /* جلوگیری از بُرِشِ سایه در مرورگرهای macOS */
    }
    .ifp-product-plans .ifp-pp-card,
    .elementor-widget-container .ifp-pp-card,
    .elementor-widget-wrap .ifp-pp-card {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
    }
    /* تبلت/لپ‌تاپ کوچک — فرم دو ستونِ جفتیِ باریک نشود */
    #ifp-calculator #ifp-request-real-form .ifp-row-duo {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px;
    }
    #ifp-calculator .ifp-result-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
}

/* موبایل — همه‌چیز تک‌ستونه، فواصل منظم، دکمه‌های لمسی */
@media (max-width: 768px) {
    /* محاسبه‌گر و فرم درخواست — حاشیه/پدینگِ درست + بدون سرریز */
    .ifp-panel-content { padding:12px !important; }
    .ifp-panel-loading { padding:24px 12px !important; }
    #ifp-calculator {
        max-width: 100% !important;
        padding: 16px 12px !important;
    }
    /* کارت‌های طرحِ محصول — هم‌عرضِ ریلِ اسلایدرِ افقی می‌مانند (~78% اسکرین)
       و با لمس می‌چرخند؛ فقط دکمه‌های طرحِ محاسبه‌گر تمام‌عرض. */
    .ifp-pp-card,
    .elementor-widget-container .ifp-pp-card,
    .elementor-widget-wrap .ifp-pp-card {
        flex: 0 0 78% !important;
        max-width: 78% !important;
        min-width: 0 !important;
    }
    #ifp-calculator .ifp-plans .ifp-plan-btn {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    /* فرم درخواست — تک‌ستونه، بدون چسبیدگی، پدینگِ کم تا تو در تو انباشته نشود */
    #ifp-calculator #ifp-request-real-form {
        padding: 12px;
    }
    /* wrapperِ فرم — در موبایل هیچ حاشیه‌ی افقیِ اضافه‌ای نمی‌خواهیم */
    #ifp-calculator #ifp-request-form {
        margin: 12px 0 0 !important;
    }
    #ifp-calculator #ifp-request-real-form .ifp-row-duo {
        grid-template-columns: 1fr !important;
        gap: 16px;
        row-gap: 16px !important;
        margin: 16px 0;
    }
    #ifp-calculator #ifp-request-real-form .ifp-row-duo .ifp-row,
    #ifp-calculator #ifp-request-real-form .ifp-row {
        margin: 16px 0;
        min-width: 0;
    }
    #ifp-calculator #ifp-request-real-form input,
    #ifp-calculator #ifp-request-real-form select,
    #ifp-calculator #ifp-request-real-form textarea,
    #ifp-calculator #ifp-request-real-form .ifp-phone-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        min-height: 3rem !important;
        line-height: 1.5 !important;
        font-size: 1rem !important;
    }
    /* کادر تلفن — پیش‌شماره و ورودی در یک خط، فیلد انعطاف‌پذیر */
    #ifp-calculator #ifp-request-real-form .ifp-phone-wrapper {
        flex-wrap: nowrap;
    }
    #ifp-calculator #ifp-request-real-form .ifp-phone-input {
        min-width: 0;
        flex: 1 1 auto;
    }
    #ifp-calculator #ifp-request-real-form .ifp-phone-prefix {
        flex: 0 0 auto;
    }

    /* کارت‌های پلن و نتایج — تک‌ستونه (نه دوستونه‌ی فشرده) */
    #ifp-calculator .ifp-plans,
    #ifp-calculator .ifp-term-specs,
    #ifp-calculator .ifp-result-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    #ifp-calculator .ifp-plan-btn {
        padding: 18px 16px;
        font-size: 14px;
    }
    #ifp-calculator .ifp-result-item {
        padding: 16px;
    }

    /* گام‌ها — چینش افقی با دایره‌های لمس‌پذیر */
    #ifp-calculator .ifp-steps {
        margin: 16px 0;
        padding: 0;
    }
    #ifp-calculator .ifp-step-circle {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    /* دکمه‌های عمومی و ارسال — تمام‌عرضِ لمسی */
    #ifp-calculator .ifp-btn,
    #ifp-calculator button[type="submit"],
    .ifp-user-panel .ifp-btn {
        width: 100% !important;
        min-height: 48px;
        justify-content: center;
    }

    /* پرداخت حوزه‌ی کاربر — حاشیه‌ی درست و کارت‌ها بدونِ سرریز */
    .ifp-user-panel,
    .ifp-user-dashboard,
    .ifp-user-installments,
    .ifp-my-requests {
        padding: 16px !important;
    }
    .ifp-dash-section {
        padding: 16px !important;
    }

    /* جداولِ داده — در موبایل داخلِ کارتِ خود اسکرول‌پذیر شوند، نه سرریزِ کل صفحه */
    .ifp-dash-section,
    .ifp-user-installments .ifp-dash-section,
    .ifp-req-card,
    .ifp-term-card {
        overflow-x: auto;
    }
    .ifp-installment-summary {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* دکمه‌های داخلِ کارت‌ها — تمام‌عرضِ لمسی */
    .ifp-req-card .ifp-btn,
    .ifp-term-card .ifp-btn {
        width: 100% !important;
        min-height: 44px;
        justify-content: center;
        margin-top: 8px;
    }
}

/* موبایلِ باریک — ضمانتِ تک‌ستونه، فول‌سایز کانتینر و رفعِ سرریزِ کارت‌ها */
@media (max-width: 480px) {
    /* کانتینر محاسبه‌گر — تمام‌عرضِ موبایل (رفعِ حدِ 1100px دهانه) */
    #ifp-calculator {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 16px 12px !important;
    }
    #ifp-calculator .ifp-plans,
    #ifp-calculator .ifp-term-specs,
    #ifp-calculator .ifp-result-grid {
        grid-template-columns: 1fr !important;
    }
    /* کارت‌های طرحِ محصول — هم‌عرضِ ریلِ اسلایدرِ افقی (رفعِ سرریزِ 380px) */
    .ifp-pp-card,
    .elementor-widget-container .ifp-pp-card,
    .elementor-widget-wrap .ifp-pp-card {
        flex: 0 0 82% !important;
        max-width: 82% !important;
        min-width: 0 !important;
    }
    #ifp-calculator .ifp-plans .ifp-plan-btn {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    #ifp-calculator .ifp-phone-prefix {
        padding: 0 10px !important;
    }
    #ifp-calculator #ifp-request-real-form button[type="submit"] {
        font-size: 15px;
    }
    /* پدینگِ تو در تو در باریک‌ترین موبایل — یک لایه‌ی نازک برای هر سطح */
    #ifp-calculator {
        padding: 12px 8px !important;
    }
    #ifp-calculator #ifp-request-real-form,
    #ifp-calculator .ifp-calculation-box,
    #ifp-calculator .ifp-result-card {
        padding: 10px 8px !important;
    }
}