/* ═══════════════════════════════════════════════
   فونت وزیرمتن — local
   ═══════════════════════════════════════════════ */
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ═══════════════════════════════════════════════
   متغیرها
   ═══════════════════════════════════════════════ */
:root {
    --font-base: 'Vazirmatn', Tahoma, sans-serif;

    --clr-bg-start:   #e0e7ff;
    --clr-bg-end:     #f0fdf4;
    --clr-primary:    #6366f1;
    --clr-primary-dk: #4338ca;
    --clr-success:    #22c55e;
    --clr-success-dk: #16a34a;
    --clr-danger:     #ef4444;
    --clr-danger-dk:  #b91c1c;
    --clr-warning-bg: #fff7ed;
    --clr-warning-bd: #fed7aa;
    --clr-warning-tx: #92400e;
    --clr-muted:      #6b7280;
    --clr-white:      #ffffff;

    --clr-indigo-50:  #eef2ff;
    --clr-indigo-100: #e0e7ff;
    --clr-indigo-200: #c7d2fe;
    --clr-indigo-300: #a5b4fc;

    --clr-sky-100:    #e0f2fe;
    --clr-sky-200:    #bae6fd;
    --clr-sky-300:    #7dd3fc;
    --clr-sky-700:    #0369a1;
    --clr-sky-900:    #0c4a6e;

    --clr-green-50:   #f0fdf4;
    --clr-green-200:  #bbf7d0;
    --clr-green-300:  #86efac;
    --clr-green-700:  #15803d;
    --clr-green-800:  #166534;

    --clr-red-50:     #fef2f2;
    --clr-red-200:    #fca5a5;
    --clr-red-800:    #991b1b;

    --clr-yellow-50:  #fefce8;
    --clr-yellow-100: #fef9c3;
    --clr-yellow-200: #fde68a;
    --clr-yellow-300: #fcd34d;
    --clr-yellow-800: #92400e;

    --clr-blue-50:    #eff6ff;
    --clr-blue-100:   #dbeafe;
    --clr-blue-200:   #bfdbfe;
    --clr-blue-700:   #1d4ed8;
    --clr-blue-800:   #1e40af;
    --clr-blue-900:   #1e3a5f;

    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --radius-full: 9999px;

    --shadow-card: 0 4px 24px rgba(0,0,0,.06);
    --shadow-sm:   0 1px 4px  rgba(0,0,0,.06);
    --shadow-lg:   0 20px 60px rgba(0,0,0,.18);

    --transition: .15s ease;
}

/* ═══════════════════════════════════════════════
   ریست و پایه
   ═══════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.7;
    background: linear-gradient(135deg, var(--clr-bg-start), var(--clr-bg-end));
    min-height: 100vh;
    color: #1f2937;
}

/* ═══════════════════════════════════════════════
   ناوبار
   ═══════════════════════════════════════════════ */
.nav {
    background: var(--clr-white);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;        /* مهم: تب‌ها به خط دوم نروند */
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;           /* برند نباید کوچک شود */
}
.nav__brand:hover { opacity: .8; }
.nav__brand span {
    font-weight: 700;
    font-size: 17px;
    color: var(--clr-primary-dk);
}
.nav__logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.nav__tabs {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;             /* اجازه کوچک شدن */
}

.nav__tab {
    padding: 8px 14px;
    font-size: 13px;
    color: #475569;
    text-decoration: none;
    border-radius: 10px;
    transition: all .2s ease;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
}
.nav__tab:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.nav__tab--active {
    background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    color: #fff !important;
    box-shadow: 0 3px 10px -3px rgba(99,102,241,.6);
}

/* متن کوتاه برای موبایل (پیش‌فرض مخفی) */
.nav__tab__short { display: none; }

/* ─── تبلت و موبایل بزرگ ─── */
@media (max-width: 640px) {
    .nav {
        padding: 9px 14px;
        gap: 8px;
    }
    .nav__brand { gap: 8px; }
    .nav__brand span {
        font-size: 15px;
    }
    .nav__logo {
        width: 30px;
        height: 30px;
    }
    .nav__tabs { gap: 4px; }
    .nav__tab {
        padding: 7px 11px;
        font-size: 12px;
        border-radius: 8px;
    }
}

/* ─── موبایل کوچک: متن برند مخفی + متن تب کوتاه ─── */
@media (max-width: 440px) {
    .nav__brand span {
        display: none;        /* فقط لوگو می‌ماند */
    }
    .nav__tab {
        padding: 7px 10px;
        font-size: 12px;
    }
    .nav__tab__long  { display: none; }
    .nav__tab__short { display: inline; }
}

/* ═══════════════════════════════════════════════
   دکمه‌ها
   ═══════════════════════════════════════════════ */
.btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    border: none;
    font-family: var(--font-base);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition), transform var(--transition);
    white-space: nowrap;
}
.btn:hover  { opacity: .88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary  { background: var(--clr-primary);  color: var(--clr-white); }
.btn--success  { background: var(--clr-success);  color: var(--clr-white); }

/* ═══════════════════════════════════════════════
   چیدمان
   ═══════════════════════════════════════════════ */
.container {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 16px;
}

/* ═══════════════════════════════════════════════
   کارت
   ═══════════════════════════════════════════════ */
.card {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    box-shadow: var(--shadow-card);
}

/* ═══════════════════════════════════════════════
   تایپوگرافی
   ═══════════════════════════════════════════════ */
.page-title {
    color: var(--clr-primary-dk);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
}

.page-subtitle {
    color: var(--clr-muted);
    text-align: center;
    margin-bottom: 26px;
    font-size: 14px;
}

/* ═══════════════════════════════════════════════
   فرم
   ═══════════════════════════════════════════════ */
.form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.input {
    width: 100%;
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--clr-indigo-200);
    font-family: var(--font-base);
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition);
    background: var(--clr-white);
    color: #1f2937;
}
.input:focus { border-color: var(--clr-primary); }

/* ═══════════════════════════════════════════════
   کپچا
   ═══════════════════════════════════════════════ */
.captcha {
    background: #fffbeb;
    border: 2px solid var(--clr-yellow-200);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 14px;
}

.captcha__code {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 12px;
    color: var(--clr-blue-800);
    text-align: center;
    padding: 10px;
    background: var(--clr-indigo-100);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    font-family: monospace;
    user-select: none;
}

.captcha__input {
    text-align: center;
    letter-spacing: 6px;
    font-size: 18px;
}

.captcha__error {
    color: var(--clr-danger-dk);
    font-size: 13px;
    margin-top: 8px;
    text-align: center;
}

/* ═══════════════════════════════════════════════
   هشدارها
   ═══════════════════════════════════════════════ */
.alert {
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 14px;
}

.alert--success {
    background: var(--clr-green-50);
    border: 2px solid var(--clr-green-300);
    color: var(--clr-green-800);
}

.alert--error {
    background: var(--clr-red-50);
    border: 2px solid var(--clr-red-200);
    color: var(--clr-red-800);
}

/* ═══════════════════════════════════════════════
   نمایش نتیجه
   ═══════════════════════════════════════════════ */
.email-tag {
    display: inline-block;
    font-size: 12px;
    background: var(--clr-blue-50);
    color: var(--clr-blue-700);
    border: 1px solid var(--clr-blue-200);
    border-radius: 6px;
    padding: 3px 10px;
    direction: ltr;
    margin-bottom: 10px;
}

.uri-box {
    background: var(--clr-white);
    border: 1px solid var(--clr-green-200);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    word-break: break-all;
    font-size: 13px;
    color: var(--clr-blue-700);
    direction: ltr;
    text-align: left;
    margin: 10px 0;
    font-family: monospace;
    line-height: 1.6;
}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fdIn .18s ease}
@keyframes fdIn{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--color-bg,#fff);border-radius:16px;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;padding:24px 20px 20px;position:relative;animation:slUp .22s cubic-bezier(.4,0,.2,1)}
@keyframes slUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-close{position:sticky;top:0;float:left;width:32px;height:32px;border-radius:50%;border:none;background:rgba(0,0,0,.07);cursor:pointer;font-size:16px;line-height:32px;text-align:center;transition:background .15s}
.modal-close:hover{background:rgba(0,0,0,.15)}
@media(max-width:480px){.modal-box{padding:18px 14px 16px;border-radius:12px 12px 0 0;max-height:95vh;align-self:flex-end;margin-bottom:0}.modal-overlay{align-items:flex-end;padding:0}}
/* ═══════════════════════════════════════════════
   کارت مصرف
   ═══════════════════════════════════════════════ */
.usage-card {
    border-radius: 14px;
    padding: 20px;
    margin-top: 18px;
    background: linear-gradient(135deg, #f0f9ff, var(--clr-sky-100));
    border: 2px solid var(--clr-sky-300);
}

.usage-card__title {
    font-weight: 700;
    color: var(--clr-sky-700);
    font-size: 15px;
    margin-bottom: 14px;
}

.usage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.usage-item {
    background: var(--clr-white);
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.usage-item__val {
    font-size: 18px;
    font-weight: 700;
    color: var(--clr-sky-900);
    margin-bottom: 2px;
}

.usage-item__val--ok     { color: #059669; }
.usage-item__val--danger { color: var(--clr-danger); }

.usage-item__lbl {
    font-size: 11px;
    color: var(--clr-muted);
}

/* نوار پیشرفت */
.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--clr-muted);
    margin-bottom: 5px;
}

.progress-bar {
    height: 10px;
    background: var(--clr-sky-100);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, #38bdf8, var(--clr-primary));
    transition: width .4s ease;
}

.progress-fill--danger {
    background: linear-gradient(90deg, #f97316, var(--clr-danger));
}

/* بج وضعیت */
.status-badge {
    display: inline-block;
    padding: 5px 16px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    margin-top: 12px;
}

.status-badge--on  { background: #dcfce7; color: #16a34a; }
.status-badge--off { background: #fee2e2; color: var(--clr-danger-dk); }

/* هشدار API */
.api-warn {
    background: var(--clr-warning-bg);
    border: 1px solid var(--clr-warning-bd);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--clr-warning-tx);
    margin-top: 14px;
}

/* ═══════════════════════════════════════════════
   پاپ‌آپ نگهداری
   ═══════════════════════════════════════════════ */
.maint-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}

.maint-box {
    background: var(--clr-white);
    border-radius: var(--radius-xl);
    padding: 44px 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: popIn .35s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes popIn {
    from { transform: scale(.7); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.maint-box__icon   { font-size: 58px; margin-bottom: 16px; }
.maint-box__title  { font-size: 21px; font-weight: 700; color: #b45309; margin-bottom: 14px; }
.maint-box__msg    { font-size: 15px; color: #374151; line-height: 1.9; }
.maint-box__msg strong { display: block; margin-top: 12px; color: #1e40af; font-size: 16px; }
.maint-box__footer { margin-top: 24px; font-size: 12px; color: var(--clr-muted); }


.nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.nav__logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;       /* گوشه‌های نرم — مثل آیکون اپ */
    object-fit: cover;
    flex-shrink: 0;
}

.nav__brand:hover{opacity:.8}
.updown-note{display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,.04);border:1px solid #e5e7eb;border-radius:10px;padding:10px 14px;margin:12px 0 4px;font-size:12px;color:#4b5563;line-height:1.6}
.updown-note span{display:flex;align-items:flex-start;gap:6px}
.updown-note em{color:#6b7280;font-style:normal}

/* ─── محدوده راهنما (خارج از card اصلی) ─── */
.guide-container{
    max-width:700px;
    margin:0 auto 40px;
    padding:0 16px;
}

/* ─── اطلاعیه مصرف حجم ─── */
.notice-alert{
    background:linear-gradient(135deg,#fff7ed,#fef3c7);
    border:2px solid #f59e0b;
    border-radius:16px;
    padding:18px 16px;
    margin-bottom:12px;
}
.notice-alert__header{
    display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;
}
.notice-alert__icon{font-size:26px;line-height:1;flex-shrink:0;margin-top:2px}
.notice-alert__title{font-weight:700;font-size:14px;color:#92400e;margin-bottom:3px;line-height:1.4}
.notice-alert__sub{font-size:11px;color:#b45309}
.notice-alert__body{font-size:13px;color:#78350f;line-height:1.75;margin-bottom:14px}
.notice-alert__toggle{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    background:linear-gradient(135deg,#f59e0b,#d97706);
    color:#fff;border:none;border-radius:10px;
    padding:12px 16px;font-size:13px;font-weight:700;
    cursor:pointer;font-family:inherit;
    transition:all .2s;-webkit-tap-highlight-color:transparent;
}
.notice-alert__toggle:hover{opacity:.9}

/* ─── راهنمای کاهش مصرف داده ─── */
.data-guide{
    background:#fff;
    border:1.5px solid #e2e8f0;
    border-radius:16px;
    padding:0;
    margin-top:12px;
    overflow:hidden;
    animation:fadeIn .3s ease;
}
.dg-tabs{
    display:flex;
    border-bottom:2px solid #e2e8f0;
    background:#f8fafc;
}
.dg-tab{
    flex:1;padding:13px 8px;
    font-size:14px;font-weight:700;
    border:none;background:transparent;
    cursor:pointer;font-family:inherit;
    color:#64748b;transition:all .15s;
    border-bottom:3px solid transparent;
    margin-bottom:-2px;
}
.dg-tab:hover{color:#6366f1;background:#f0f4ff}
.dg-tab.active{color:#6366f1;border-bottom-color:#6366f1;background:#fff}

.dg-warning{
    background:#fef2f2;border-bottom:1px solid #fecaca;
    padding:12px 18px;font-size:13px;color:#991b1b;
    line-height:1.6;
}
.dg-section{
    padding:16px 18px;
    border-bottom:1px solid #f1f5f9;
}
.dg-section:last-child{border-bottom:none}
.dg-section--highlight{background:linear-gradient(135deg,#f0fdf4,#ecfdf5)}
.dg-section__title{
    display:flex;align-items:center;gap:10px;
    font-size:14px;font-weight:700;color:#1e293b;
    margin-bottom:12px;
}
.dg-num{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:26px;height:26px;
    background:linear-gradient(135deg,#6366f1,#4338ca);
    color:#fff;border-radius:50%;font-size:12px;font-weight:700;
    flex-shrink:0;
}
.dg-section--highlight .dg-num{background:linear-gradient(135deg,#22c55e,#16a34a)}
.dg-steps{display:flex;flex-direction:column;gap:8px}
.dg-step{
    display:flex;align-items:flex-start;gap:10px;
    font-size:13px;color:#374151;line-height:1.6;
    padding:7px 10px;background:#f8fafc;
    border-radius:8px;border:1px solid #e2e8f0;
}
.dg-step--action{
    background:linear-gradient(135deg,#ecfdf5,#d1fae5);
    border-color:#86efac;color:#065f46;font-weight:600;
}
.dg-step__icon{
    font-size:12px;color:#6366f1;flex-shrink:0;
    margin-top:3px;font-weight:700;
}
.dg-step--action .dg-step__icon{color:#16a34a}
.dg-note{
    margin-top:10px;padding:8px 12px;
    background:#fffbeb;border:1px solid #fde68a;
    border-radius:8px;font-size:12px;color:#92400e;line-height:1.6;
}
.dg-summary{
    background:linear-gradient(135deg,#1e293b,#0f172a);
    padding:20px 18px;
}
.dg-summary__title{
    font-size:15px;font-weight:700;color:#fff;margin-bottom:14px;
}
.dg-summary__grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:10px;
}
.dg-summary__item{
    display:flex;align-items:flex-start;gap:8px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;padding:10px 12px;
    font-size:12px;color:#cbd5e1;line-height:1.7;
}
.dg-summary__item strong{color:#fff}
@media(max-width:480px){
    .dg-summary__grid{grid-template-columns:1fr}
}

/* ─── بنر تغییر آدرس ─── */
.domain-banner{
    position:fixed;top:0;left:0;right:0;z-index:9999;
    background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%);
    color:#e2e8f0;
    box-shadow:0 4px 24px rgba(0,0,0,.3);
    animation:bannerSlide .5s cubic-bezier(.4,0,.2,1);
    font-family:inherit;
}
@keyframes bannerSlide{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}

.domain-banner__inner{
    max-width:720px;margin:0 auto;
    padding:16px 20px;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    text-align:center;
}
.domain-banner__icon{
    font-size:28px;line-height:1;
    animation:bellShake 2s ease-in-out infinite;
}
@keyframes bellShake{
    0%,100%{transform:rotate(0)}
    10%{transform:rotate(12deg)}
    20%{transform:rotate(-10deg)}
    30%{transform:rotate(6deg)}
    40%{transform:rotate(-4deg)}
    50%{transform:rotate(0)}
}
.domain-banner__text{
    font-size:13px;line-height:1.8;color:#cbd5e1;
}
.domain-banner__text strong{color:#fff;font-weight:700}
.domain-banner__url{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(56,152,255,.15);
    border:1px solid rgba(56,152,255,.3);
    color:#7dd3fc;font-weight:700;font-size:15px;
    padding:6px 18px;border-radius:10px;
    text-decoration:none;direction:ltr;
    transition:all .2s;
}
.domain-banner__url:hover{
    background:rgba(56,152,255,.25);
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(56,152,255,.2);
}
.domain-banner__actions{
    display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;
}
.domain-banner__close{
    position:absolute;top:8px;left:12px;
    background:rgba(255,255,255,.08);border:none;
    color:#94a3b8;font-size:18px;cursor:pointer;
    width:30px;height:30px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    transition:all .15s;line-height:1;
}
.domain-banner__close:hover{background:rgba(255,255,255,.15);color:#fff}

/* فاصله body وقتی بنر فعاله */
body.has-banner{padding-top:0}
.banner-spacer{height:170px;transition:height .3s}
@media(min-width:600px){.banner-spacer{height:120px}}

/* ─── بخش Add to Home Screen ─── */
.a2hs-card{
    background:linear-gradient(135deg,#f0fdf4,#ecfdf5);
    border:1px solid #bbf7d0;
    border-radius:14px;
    padding:18px 20px;
    margin-top:16px;
    text-align:center;
    animation:fadeIn .4s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.a2hs-card__icon{
    width:44px;height:44px;
    background:rgba(34,197,94,.1);border-radius:12px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:22px;margin-bottom:10px;
}
.a2hs-card__title{
    font-size:14px;font-weight:700;color:#166534;margin-bottom:4px;
}
.a2hs-card__desc{
    font-size:12px;color:#4b5563;line-height:1.7;margin-bottom:12px;
}
.btn-a2hs{
    display:inline-flex;align-items:center;gap:6px;
    background:#22c55e;color:#fff;
    border:none;border-radius:10px;
    padding:10px 22px;font-size:13px;font-weight:600;
    cursor:pointer;transition:all .2s;
    font-family:inherit;
}
.btn-a2hs:hover{background:#16a34a;transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,197,94,.3)}

/* مودال راهنمای iOS */
.ios-modal-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
    z-index:10000;display:none;
    align-items:center;justify-content:center;padding:20px;
}
.ios-modal-overlay.show{display:flex}
.ios-modal{
    background:#fff;border-radius:18px;
    padding:28px 24px;max-width:360px;width:100%;
    text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.2);
    animation:fadeIn .3s ease;
}
.ios-modal h3{font-size:16px;color:#1e293b;margin-bottom:18px}
.ios-modal__step{
    display:flex;align-items:center;gap:12px;
    text-align:right;padding:10px 0;
    border-bottom:1px solid #f1f5f9;
}
.ios-modal__step:last-of-type{border-bottom:none}
.ios-modal__num{
    width:30px;height:30px;min-width:30px;
    background:#eff6ff;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;color:#3b82f6;
}
.ios-modal__text{font-size:12px;color:#64748b;line-height:1.6}
.ios-modal__text b{color:#1e293b}
.ios-modal__close{
    margin-top:16px;width:100%;
    background:#f1f5f9;border:none;border-radius:10px;
    padding:10px;font-size:13px;color:#475569;
    cursor:pointer;font-family:inherit;
    transition:background .15s;
}
.ios-modal__close:hover{background:#e2e8f0}

تمدید (Renewal)
═══════════════════════════════════════════════ */
.renew-card {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 16px;
    box-shadow: 0 4px 16px rgba(245, 158, 11, .15);
    animation: renewSlideIn .5s cubic-bezier(.4, 0, .2, 1);
}
@keyframes renewSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.renew-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(180, 83, 9, .35);
}
.renew-card__icon {
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    flex-shrink: 0;
}
.renew-card__title {
    font-weight: 800;
    font-size: 17px;
    color: #78350f;
    margin-bottom: 4px;
}
.renew-card__subtitle {
    font-size: 12px;
    color: #92400e;
    line-height: 1.6;
}
.renew-card__body { display: flex; flex-direction: column; gap: 12px; }
.renew-card__price {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.renew-card__price-label { font-size: 13px; color: #6b7280; font-weight: 600; }
.renew-card__price-value {
    font-size: 22px;
    font-weight: 800;
    color: #b91c1c;
    direction: ltr;
}
.renew-card__price-value small {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-right: 4px;
}
.renew-card__btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 4px 12px rgba(22, 163, 74, .3);
}
.renew-card__btn:hover { transform: translateY(-1px); }
.renew-card__note {
    font-size: 11px;
    color: #78350f;
    background: rgba(255, 255, 255, .5);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    line-height: 1.7;
}

/* Banner (callback result) */
.renew-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    border: 1px solid;
    animation: renewSlideIn .4s ease;
}
.renew-banner__icon { font-size: 22px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.renew-banner__text { flex: 1; font-size: 13px; line-height: 1.7; font-weight: 600; }
.renew-banner__close {
    text-decoration: none;
    color: inherit;
    opacity: .6;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
}
.renew-banner__close:hover { opacity: 1; }
.renew-banner--ok   { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.renew-banner--warn { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.renew-banner--err  { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }