/* ============================================================
   Витрина eSIM /esim/ — редизайн в стиле OTP-магазина (otp.css).
   Переиспользует классы .otp-* / .mini-* максимально; здесь только eSIM-специфика:
   дисклеймер, бейдж объёма/чипы у оффера, глобус у регионов, статус-плашки заказа.
   Образец подхода — email_otp.css (дельта поверх otp.css).
   ============================================================ */

/* Дисклеймер non-refundable — амбер-тон на токенах OTP (перенесён из старого grid.html) */
.esim-disclaimer {
    display: flex; align-items: flex-start; gap: 0.6rem;
    background: var(--ds-otp-sub); color: var(--ds-otp-light);
    border: 1px solid var(--ds-otp-border); border-radius: var(--ds-radius-lg);
    padding: 0.85rem 1.1rem; font-size: 0.82rem; line-height: 1.5;
    margin-bottom: 1.25rem;
}
.esim-disclaimer .esim-disclaimer-icon { flex-shrink: 0; font-size: 1rem; line-height: 1.4; }

.esim-my-link { text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }

/* Глобус вместо флага у регионов (в плитке .otp-flag и в карточке .mini-flag) */
.otp-flag.esim-globe,
.mini-flag.esim-globe { background: var(--ds-accent-sub); color: var(--ds-accent-light); }

/* Бейдж «Native» в углу плитки страны */
.otp-tile .esim-tile-native {
    position: absolute; top: 5px; right: 6px;
    background: var(--ds-green-sub, rgba(52,211,153,0.15)); color: var(--ds-green);
    border: 1px solid var(--ds-green-border, rgba(52,211,153,0.3)); border-radius: 999px;
    padding: 0.05rem 0.4rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em;
}

/* Строка оффера eSIM: слева бейдж объёма, в центре тайтл + чипы (перенос), цена зелёная */
.esim-offer .esim-data-badge {
    width: 52px; min-width: 52px; height: 44px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1; border-radius: var(--ds-radius, 8px); background: var(--ds-accent-sub);
}
.esim-offer .esim-data-badge b { font-size: 0.95rem; color: var(--ds-accent-light); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.esim-offer .esim-data-badge span { font-size: 0.56rem; color: var(--ds-text-muted); margin-top: 0.12rem; text-transform: uppercase; letter-spacing: 0.03em; }
.esim-offer-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
.esim-offer-title { font-weight: 600; color: var(--ds-text); font-size: 0.9rem; }
.esim-offer-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.esim-chip { font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--ds-raised); color: var(--ds-text-sub); white-space: nowrap; }
.esim-chip.speed { background: var(--ds-accent-sub); color: var(--ds-accent-light); }
.esim-chip.native { background: var(--ds-green-sub, rgba(52,211,153,0.15)); color: var(--ds-green); }
.esim-offer-price { color: var(--ds-green); }

/* Чекбокс «Только нативный IP» в тулбаре каталога */
.esim-native-check {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
    font-size: 0.8rem; color: var(--ds-text-sub); cursor: pointer; white-space: nowrap;
    padding: 0 0.25rem; user-select: none;
}
.esim-native-check input {
    width: 15px; height: 15px; cursor: pointer; accent-color: var(--ds-green);
}
.esim-native-check:hover { color: var(--ds-text); }

/* Подпись правила отбора под заголовком «Мои eSIM» */
.esim-orders-note {
    margin: -0.35rem 0 0.7rem; font-size: 0.78rem; line-height: 1.45;
    color: var(--ds-text-muted);
}
.esim-orders-note a { color: var(--ds-accent-light); text-decoration: none; }
.esim-orders-note a:hover { text-decoration: underline; }

/* Живые карточки «Мои eSIM»: у заказа нет флаг+аватар-комбо и поля кода — один флаг */
.esim-order-mini .mini-ids { align-items: center; }

/* Статус-плашки заказа на месте .mini-timer (тот же размер/форма) */
.mini-timer.status-ready { background: rgba(52,211,153,0.12); color: var(--ds-green); border-color: var(--ds-green); }
.mini-timer.status-provisioning { background: rgba(251,191,36,0.13); color: var(--ds-otp, #d97706); border-color: rgba(251,191,36,0.35); }
.mini-timer.status-error { background: rgba(248,113,113,0.15); color: var(--ds-red); border-color: var(--ds-red); }
.mini-timer.status-expired { background: var(--ds-raised); color: var(--ds-text-muted); border-color: var(--ds-border-soft); }

/* Спиннер внутри provisioning-плашки (крутится через otp-spin из otp.css) */
.esim-spin {
    display: inline-block; width: 11px; height: 11px; flex-shrink: 0;
    border: 2px solid rgba(251,191,36,0.3); border-top-color: var(--ds-otp, #d97706);
    border-radius: 50%; animation: otp-spin 0.8s linear infinite;
}

/* Пустое состояние каталога */
.esim-catalog-empty { padding: 2rem 1rem; text-align: center; color: var(--ds-text-muted); }

/* Мобильный оверрайд: своя строка оффера названа .esim-offer-main, поэтому правило
   `.otp-offer-main { flex: 1 1 100% }` из otp.css на неё НЕ распространяется. Без этого
   на 360px бейдж+цена+кнопка съедают ~205px и тайтл с чипами сжимается в кашу. */
@media (max-width: 767.98px) {
    .esim-offer-main { flex: 1 1 100%; }
    .esim-offer .esim-offer-price { margin-left: 0; text-align: left; flex: 1 1 auto; }
}