/* ═══════════════════════════════════════════════════════
   Apple ID Top-Up — Telegram Mini App Styles
   ═══════════════════════════════════════════════════════ */

@font-face {
    font-family: 'BBH Bartle';
    src: url('/webapp/fonts/BBHBartle-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg: var(--tg-theme-bg-color, #ffffff);
    --text: var(--tg-theme-text-color, #1c1c1e);
    --hint: var(--tg-theme-hint-color, #8e8e93);
    --link: var(--tg-theme-link-color, #007aff);
    --btn-bg: var(--tg-theme-button-color, #007aff);
    --btn-text: var(--tg-theme-button-text-color, #ffffff);
    --secondary-bg: var(--tg-theme-secondary-bg-color, #f2f2f7);
    --section-bg: var(--tg-theme-section-bg-color, #ffffff);
    --separator: var(--tg-theme-section-separator-color, #e5e5ea);
    --danger: #ff3b30;
    --success: #34c759;
    --warning: #ff9500;
    --radius: 14px;
    --radius-sm: 10px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.47;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ── Screens ──────────────────────────────────────────── */

.screen {
    display: none;
    min-height: 100vh;
    animation: fadeIn 0.2s ease;
}

.screen.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.screen-content {
    padding: 16px 16px 32px;
    max-width: 480px;
    margin: 0 auto;
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    text-align: center;
}

/* ── Screen Header ────────────────────────────────────── */

.screen-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--separator);
}

.screen-header h2 {
    font-size: 20px;
    font-weight: 700;
}

.btn-back {
    background: var(--secondary-bg);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    flex-shrink: 0;
    transition: background 0.15s;
}

.btn-back:active {
    background: var(--separator);
}

/* ── Home Layout ───────────────────────────────────────── */

#screen-home.active {
    display: flex;
}

.home-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}

/* ── Hero ──────────────────────────────────────────────── */

.home-hero {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 32px;
    text-align: center;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.12) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hero-logo {
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.hero-logo svg {
    width: 52px;
    height: 52px;
}

.hero-title {
    font-family: 'BBH Bartle', sans-serif;
    font-size: 48px;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 1.1;
    margin-bottom: 10px;
}

.hero-sub {
    color: var(--hint);
    font-size: 14px;
    line-height: 1.5;
}

/* ── Home Actions ─────────────────────────────────────── */

.home-actions {
    padding: 0 16px 12px;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}

.btn-cta {
    position: relative;
    justify-content: center;
    margin-bottom: 10px;
}

.btn-arrow {
    position: absolute;
    right: 20px;
    font-size: 20px;
    opacity: 0.7;
    transition: transform 0.2s;
}

.btn-cta:active .btn-arrow {
    transform: translateX(3px);
}

.home-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn-glass {
    background: var(--secondary-bg);
    color: var(--text);
    border: none;
    padding: 14px 12px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.btn-glass:active {
    background: var(--separator);
}

.glass-label {
    position: relative;
    z-index: 1;
}

/* ── Home Footer ──────────────────────────────────────── */

.home-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.footer-link {
    background: none;
    border: none;
    color: var(--hint);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    font-family: inherit;
    transition: color 0.15s;
}

.footer-link:active {
    color: var(--text);
}

.footer-dot {
    color: var(--separator);
    font-size: 16px;
    user-select: none;
}

/* ── Buttons ──────────────────────────────────────────── */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    text-decoration: none;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--btn-bg);
    color: var(--btn-text);
}

.btn-primary:active {
    filter: brightness(0.9);
}

.btn-secondary {
    background: var(--secondary-bg);
    color: var(--text);
}

.btn-secondary:active {
    background: var(--separator);
}

.btn-large {
    padding: 16px 24px;
    font-size: 17px;
    border-radius: 16px;
}

.btn-small {
    flex: 1;
    padding: 12px 10px;
    font-size: 13px;
    font-weight: 500;
    background: var(--secondary-bg);
    color: var(--hint);
    border-radius: var(--radius-sm);
}

.btn-small:active {
    background: var(--separator);
}

.btn-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-link {
    background: none;
    color: var(--link);
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    width: auto;
    display: inline-flex;
}

.btn-icon {
    font-size: 18px;
}

.lock-badge {
    position: absolute;
    right: 12px;
    font-size: 10px;
    font-weight: 500;
    color: var(--hint);
    opacity: 0.7;
}

/* (home-actions replaces main-buttons + bottom-row) */

/* ── Cards ────────────────────────────────────────────── */

.card {
    background: var(--section-bg);
    border: 1.5px solid var(--separator);
    border-radius: var(--radius);
    padding: 20px;
    position: relative;
    margin-bottom: 16px;
}

.card-featured {
    border-color: var(--btn-bg);
    box-shadow: 0 0 0 1px var(--btn-bg), 0 4px 24px rgba(0, 122, 255, 0.12);
}

.card h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 8px;
}

.card-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--secondary-bg);
    color: var(--hint);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-popular {
    background: var(--btn-bg);
    color: var(--btn-text);
}

.savings-tag {
    display: inline-block;
    background: #c8e6c9;
    color: #1b5e20;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.card-desc {
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.card-minus {
    background: #fff3e0;
    color: #e65100;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.card-hint {
    background: var(--secondary-bg);
    padding: 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.card-hint p {
    margin-bottom: 8px;
}

.card-details {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.card-details p {
    margin-bottom: 10px;
}

.bonus-note {
    background: #c8e6c9;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: #1b5e20;
}

@media (prefers-color-scheme: dark) {
    .bonus-note {
        background: rgba(46, 125, 50, 0.25);
        color: #81c784;
    }
    .savings-tag {
        background: rgba(46, 125, 50, 0.2);
        color: #81c784;
    }
    .success-note {
        background: rgba(46, 125, 50, 0.25) !important;
        color: #81c784 !important;
    }
    .card-minus {
        background: rgba(230, 81, 0, 0.15);
        color: #ffb74d;
    }
}

/* Telegram dark theme via color-scheme attribute */
html.dark .bonus-note,
body.dark .bonus-note {
    background: rgba(46, 125, 50, 0.25);
    color: #81c784;
}
html.dark .savings-tag,
body.dark .savings-tag {
    background: rgba(46, 125, 50, 0.2);
    color: #81c784;
}
html.dark .success-note,
body.dark .success-note {
    background: rgba(46, 125, 50, 0.25);
    color: #81c784;
}
html.dark .card-minus,
body.dark .card-minus {
    background: rgba(230, 81, 0, 0.15);
    color: #ffb74d;
}

.btn-choose {
    margin-top: 4px;
}

/* ── Amount Grid ──────────────────────────────────────── */

.amount-type-label {
    text-align: center;
    font-size: 14px;
    color: var(--hint);
    margin-bottom: 16px;
    font-weight: 500;
}

.amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.amount-btn {
    background: var(--section-bg);
    border: 2px solid var(--separator);
    border-radius: var(--radius);
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}

.amount-btn:active {
    transform: scale(0.96);
}

.amount-btn.selected {
    border-color: var(--btn-bg);
    background: rgba(0, 122, 255, 0.06);
    box-shadow: 0 0 0 1px var(--btn-bg);
}

.amount-value {
    font-size: 18px;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.amount-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--btn-bg);
    display: block;
}

.amount-approx {
    font-size: 11px;
    color: var(--hint);
    display: block;
    margin-top: 2px;
}

.amount-icloud {
    font-size: 11px;
    font-weight: 600;
    color: #007aff;
    display: block;
    margin-top: 3px;
    letter-spacing: -0.1px;
}

/* ── Order Summary ────────────────────────────────────── */

.order-summary {
    background: var(--secondary-bg);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}

/* ── Promo code input ─────────────────────────────────── */

.promo-input-row {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 4px;
    overflow: hidden;
}

.promo-code-input {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    border: 1.5px solid var(--separator);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 10px;
    outline: none;
}

.promo-code-input:focus { border-color: var(--btn-bg); }

.btn-apply-promo {
    background: var(--btn-bg);
    color: var(--btn-text, #fff);
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.promo-status {
    font-size: 13px;
    margin-bottom: 8px;
    min-height: 18px;
}

.promo-status.ok  { color: #34c759; }
.promo-status.err { color: #ff453a; }

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.summary-total {
    border-top: 1px solid var(--separator);
    margin-top: 6px;
    padding-top: 10px;
    font-size: 17px;
    font-weight: 700;
}

.discount-text {
    color: #248a3d;
    font-weight: 600;
}

/* ── Payment Block ────────────────────────────────────── */

.payment-block {
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.terms-check {
    margin-bottom: 12px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--separator);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    margin-top: 1px;
}

.checkbox-label input:checked + .checkmark {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
}

.checkbox-label input:checked + .checkmark::after {
    content: '✓';
    color: var(--btn-text);
    font-size: 14px;
    font-weight: 700;
}

.checkbox-label a {
    color: var(--link);
    text-decoration: underline;
}

.btn-pay:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Success Screen ───────────────────────────────────── */

.success-icon {
    font-size: 72px;
    margin-bottom: 20px;
}

#screen-success h2 {
    font-size: 24px;
    margin-bottom: 12px;
}

#screen-success p {
    color: var(--hint);
    font-size: 15px;
    margin-bottom: 28px;
}

/* ── Instruction Flow ─────────────────────────────────── */

.ins-screen .screen-content { padding-bottom: 40px; }

.ins-step { animation: fadeIn 0.25s ease; }

.ins-num {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--btn-bg);
    margin-bottom: 4px;
    opacity: 0.7;
}
.ins-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin-bottom: 14px;
}
.ins-desc {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 14px;
}
.ins-sub {
    font-size: 13px;
    font-weight: 700;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 18px 0 8px;
}

/* Card — основной контейнер шагов */
.ins-card {
    border-radius: var(--radius);
    border: 1.5px solid var(--separator);
    overflow: hidden;
    margin-bottom: 14px;
}
.ins-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    border-bottom: 1px solid var(--separator);
}
.ins-row:last-child,
.ins-expand-body + .ins-row { /* no double border after expand */ }
.ins-card > :last-child { border-bottom: none; }

.ins-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--btn-bg);
    flex-shrink: 0;
    margin-top: 6px;
}
.ins-dot-warn { background: #ff9500; }

/* Expandable rows */
.ins-row-expand {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.ins-expand-icon {
    margin-left: auto;
    font-size: 20px;
    font-weight: 300;
    color: var(--hint);
    transition: transform 0.3s, color 0.2s;
    flex-shrink: 0;
    line-height: 1;
}
.ins-row-expand.open + .ins-expand-body { max-height: 4000px; padding: 12px 16px; }
.ins-row-expand.open .ins-expand-icon { transform: rotate(45deg); color: var(--btn-bg); }

.ins-expand-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    transition: max-height 0.4s cubic-bezier(.4,0,.2,1), padding 0.3s;
    border-bottom: 1px solid var(--separator);
}
.ins-expand-text {
    font-size: 13px;
    color: var(--hint);
    margin-bottom: 10px;
    line-height: 1.5;
}
.ins-expand-caption {
    font-size: 12px;
    color: var(--hint);
    margin: 6px 0 12px;
}

/* Screenshot images */
.ins-screenshot {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 8px auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--separator);
}

/* Notes & warnings */
.ins-note {
    font-size: 13px;
    color: var(--hint);
    line-height: 1.5;
    padding: 12px 14px;
    background: var(--secondary-bg);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
}
.ins-note-ok {
    background: rgba(52,199,89,0.08);
    color: #28a745;
    font-weight: 600;
}
.ins-warn {
    font-size: 13px;
    line-height: 1.5;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    background: rgba(255,59,48,0.06);
    border-left: 3px solid #ff3b30;
    color: var(--text);
}
.ins-warn-safe {
    background: rgba(0,122,255,0.06);
    border-left-color: var(--btn-bg);
}

/* Choice buttons */
.ins-choice {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

/* Address card */
.ins-address-card { padding: 0; }
.ins-address {
    padding: 14px 16px;
}
.ins-addr-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--separator);
}
.ins-addr-row:last-child { border-bottom: none; }
.ins-addr-label {
    font-weight: 700;
    color: var(--hint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ins-addr-val { font-weight: 600; }
.ins-addr-btn {
    width: 100%;
    border: none;
    border-top: 1.5px solid var(--separator);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 13px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    color: var(--btn-bg);
    cursor: pointer;
    letter-spacing: 0.2px;
}
.ins-addr-btn:active { opacity: 0.55; }

/* Ссылки в инструкции */
.ins-link {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--hint);
}

/* Мини-галерея внутри аккордеона */
.ins-gallery {
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin: 8px 0 12px;
    position: relative;
}
.ins-gallery-track {
    display: flex;
    transition: transform 0.35s ease;
}
.ins-gallery-track .ins-screenshot {
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 0;
}
.ins-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 2px;
}
.ins-gallery-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--separator);
    transition: background 0.2s;
}
.ins-gallery-dots span.active {
    background: var(--btn-bg);
}

/* Копируемое сообщение для поддержки Apple */
.ins-copy-msg {
    background: var(--secondary-bg);
    border-left: 3px solid var(--btn-bg);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 6px 0 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    cursor: pointer;
    user-select: all;
    word-break: break-word;
    position: relative;
}
.ins-copy-msg::after {
    content: 'Тап — скопировать';
    position: absolute;
    bottom: -18px;
    right: 4px;
    font-size: 10px;
    color: var(--hint);
    opacity: 0.6;
}
.ins-copy-msg:active { opacity: 0.7; }
.ins-guide-support-btn {
    width: 100%;
    margin-top: 4px;
    font-size: 13px;
}

/* ── Terms Screen ─────────────────────────────────────── */

.terms-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}

.terms-content p {
    margin-bottom: 12px;
}

.terms-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 24px 0 12px;
}

.terms-content h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 18px 0 8px;
}

.terms-content ul {
    margin: 0 0 12px 18px;
}

.terms-content ul li {
    margin-bottom: 4px;
}

.terms-divider {
    height: 1px;
    background: var(--separator);
    margin: 28px 0;
}

/* ── How It Works Screen ─────────────────────────────── */

.info-article {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text);
}

.info-article h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 24px 0 10px;
}

.info-article h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 16px 0 8px;
}

.info-article p {
    margin-bottom: 10px;
}

.info-intro {
    font-size: 15px;
    color: var(--hint);
    margin-bottom: 16px !important;
}

.info-article ul {
    margin: 0 0 14px 18px;
}

.info-article ul li {
    margin-bottom: 6px;
}

.info-table-wrap {
    overflow-x: auto;
    margin: 14px 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--separator);
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.4;
}

.info-table th,
.info-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--separator);
    vertical-align: top;
}

.info-table th {
    background: var(--secondary-bg);
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
}

.info-table td:first-child {
    font-weight: 600;
    white-space: nowrap;
    color: var(--hint);
}

.info-table tr:last-child td {
    border-bottom: none;
}

.info-advice {
    background: rgba(0, 122, 255, 0.08);
    color: var(--text);
    padding: 14px;
    border-radius: var(--radius-sm);
    margin: 14px 0;
    font-size: 13px;
    line-height: 1.5;
    border-left: 3px solid var(--btn-bg);
}

.info-steps {
    margin: 0 0 16px 18px;
}

.info-steps li {
    margin-bottom: 8px;
}

.info-tip {
    background: var(--secondary-bg);
    padding: 14px;
    border-radius: var(--radius-sm);
    margin: 14px 0;
    font-size: 13px;
    line-height: 1.5;
}

/* ── How It Works ───────────────────────────────────────── */

.hiw-screen .screen-content { padding-bottom: 40px; }

/* Блоки */
.hiw-block {
    padding: 24px 0;
    border-bottom: 1px solid var(--separator);
}
.hiw-block:last-of-type { border-bottom: none; }

.hiw-blk-num {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--btn-bg);
    margin-bottom: 4px;
    opacity: 0.7;
}
.hiw-blk-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin-bottom: 16px;
}

/* ── Блок 1: Сравнение (одна карточка за раз) ─── */
.hiw-compare {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hiw-cards-viewport {
    overflow: hidden;
    border-radius: var(--radius);
}
.hiw-cards-slide {
    display: flex;
    width: 200%;
    transition: transform 0.45s cubic-bezier(.4,0,.2,1);
}
.hiw-screen.kz-active .hiw-cards-slide {
    transform: translateX(-50%);
}
.hiw-opt {
    width: 50%;
    flex-shrink: 0;
    padding: 16px;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    box-sizing: border-box;
}
.hiw-opt-ru {
    background: rgba(255,59,48,0.05);
    border-color: rgba(255,59,48,0.2);
}
.hiw-opt-kz {
    background: rgba(52,199,89,0.05);
    border-color: rgba(52,199,89,0.2);
}
.hiw-screen.kz-active .hiw-opt-kz {
    background: rgba(0,122,255,0.08);
    border-color: rgba(0,122,255,0.35);
}
.hiw-slide-labels {
    display: flex;
    justify-content: space-between;
    padding: 10px 2px 6px;
}
.hiw-sl-lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--hint);
    transition: color 0.3s, opacity 0.3s;
}
#hiw-sl-ru { color: var(--text); }
.hiw-screen.kz-active #hiw-sl-ru { color: var(--hint); opacity: 0.5; }
.hiw-screen.kz-active #hiw-sl-kz { color: var(--btn-bg); }
.hiw-opt-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.hiw-flag { font-size: 32px; line-height: 1; flex-shrink: 0; }
.hiw-opt-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}
.hiw-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hiw-badge-red   { background: rgba(255,59,48,0.15); color: #ff3b30; }
.hiw-badge-green { background: rgba(52,199,89,0.15); color: #28a745; }
.hiw-opt p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--hint);
    margin: 0;
}

/* Slider */
.hiw-slider-wrap { display: flex; justify-content: center; padding: 2px 0; }
.hiw-slider-track {
    position: relative;
    width: 100%;
    height: 44px;
    background: var(--secondary-bg);
    border-radius: 22px;
    border: 1.5px solid var(--separator);
    overflow: hidden;
    touch-action: none;
}
.hiw-slider-fill {
    position: absolute;
    inset: 0;
    width: 0;
    background: linear-gradient(90deg, rgba(0,122,255,0.05), rgba(0,122,255,0.18));
    pointer-events: none;
    transition: width 0.1s linear;
}
.hiw-slider-thumb {
    position: absolute;
    top: 4px; left: 4px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--btn-bg);
    color: var(--btn-text);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700;
    cursor: grab;
    user-select: none;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0,122,255,0.35);
    transition: left 0.1s linear, transform 0.15s;
}
.hiw-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.hiw-slider-hint {
    position: absolute;
    top: 50%; right: 16px;
    transform: translateY(-50%);
    font-size: 12px; font-weight: 600;
    color: var(--hint); opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* KZ-активирован */
.hiw-screen.kz-active { background: rgba(0,122,255,0.04); transition: background 0.5s; }
.hiw-screen.kz-active .hiw-slider-hint { opacity: 0; }

/* ── Блок 2-3: QA аккордеон ─────────────────── */
.hiw-qa {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    border: 1.5px solid var(--separator);
    overflow: hidden;
}
.hiw-qa-item {
    border-bottom: 1px solid var(--separator);
}
.hiw-qa-item:last-child { border-bottom: none; }
.hiw-qa-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.hiw-qa-icon {
    font-size: 20px;
    font-weight: 300;
    color: var(--hint);
    transition: transform 0.3s, color 0.2s;
    flex-shrink: 0;
    line-height: 1;
}
.hiw-qa-item.open .hiw-qa-icon { transform: rotate(45deg); color: var(--btn-bg); }
.hiw-qa-a {
    max-height: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.6;
    color: var(--hint);
    padding: 0 16px;
    transition: max-height 0.38s cubic-bezier(.4,0,.2,1), padding 0.3s;
}
.hiw-qa-item.open .hiw-qa-a {
    max-height: 160px;
    padding: 0 16px 14px;
}
.hiw-no  { color: #ff3b30; font-weight: 700; }
.hiw-yes { color: #34c759; font-weight: 700; }

/* ── Блок 4: Journey timeline ────────────────── */
.hiw-journey {
    position: relative;
    padding-left: 52px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.hiw-journey-rail {
    position: absolute;
    left: 24px;
    top: 18px;
    bottom: 18px;
    width: 3px;
    background: var(--separator);
    border-radius: 2px;
    overflow: hidden;
}
.hiw-journey-pulse {
    position: absolute;
    left: 0; top: -80px;
    width: 100%;
    height: 80px;
    background: linear-gradient(180deg, transparent 0%, var(--btn-bg) 50%, transparent 100%);
    animation: journeyPulse 2.2s ease-in-out infinite;
    opacity: 0.8;
}
@keyframes journeyPulse {
    0%   { top: -80px; }
    100% { top: calc(100% + 80px); }
}
.hiw-journey-step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    position: relative;
}
.hiw-journey-dot {
    position: absolute;
    left: -41px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--secondary-bg);
    border: 2px solid var(--separator);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    color: var(--hint);
    transition: all 0.4s;
    z-index: 1;
    flex-shrink: 0;
}
.hiw-journey-dot.active {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: #fff;
    box-shadow: 0 0 14px rgba(0,122,255,0.4);
}
.hiw-journey-info strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}
.hiw-journey-info span { font-size: 13px; color: var(--hint); }

/* CTA + footnote */
.hiw-footnote {
    font-size: 11px;
    color: var(--hint);
    margin-top: 10px;
    line-height: 1.4;
    opacity: 0.7;
}

/* ── Loading ──────────────────────────────────────────── */

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.spinner {
    width: 42px;
    height: 42px;
    border: 4px solid var(--separator);
    border-top-color: var(--btn-bg);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Utilities ────────────────────────────────────────── */

.hidden {
    display: none !important;
}

/* ── btn-outline ────────────────────────────────────────── */

.btn-outline {
    background: transparent;
    color: var(--btn-bg);
    border: 2px solid var(--btn-bg);
}

.btn-outline:active {
    background: rgba(0, 122, 255, 0.08);
}

/* ── Custom Amount Block ─────────────────────────────────── */

.custom-amount-block {
    margin-bottom: 20px;
}

.custom-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--hint);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-divider::before,
.custom-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--separator);
}

.custom-amount-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--section-bg);
    border: 2px solid var(--separator);
    border-radius: var(--radius);
    padding: 4px 14px 4px 4px;
    transition: border-color 0.15s;
}

.custom-amount-row:focus-within {
    border-color: var(--btn-bg);
    box-shadow: 0 0 0 1px var(--btn-bg);
}

.custom-amount-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    padding: 12px 10px;
    outline: none;
    min-width: 0;
    font-family: inherit;
    -moz-appearance: textfield;
}

.custom-amount-input::-webkit-outer-spin-button,
.custom-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.custom-amount-input::placeholder {
    color: var(--hint);
    font-weight: 400;
    font-size: 16px;
}

.custom-amount-currency {
    font-size: 22px;
    font-weight: 700;
    color: var(--hint);
    flex-shrink: 0;
}

.custom-amount-hint {
    font-size: 12px;
    color: var(--hint);
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

/* ── Request Block ───────────────────────────────────────── */

.request-block {
    flex-direction: column;
    gap: 8px;
    animation: slideUp 0.3s ease;
}

.request-note {
    font-size: 12px;
    color: var(--hint);
    text-align: center;
    line-height: 1.4;
    margin: 0;
}

/* ── Request Sent Screen ─────────────────────────────────── */

#screen-request-sent .success-icon {
    font-size: 64px;
    color: var(--success);
    margin-bottom: 20px;
}

#screen-request-sent h2 {
    font-size: 24px;
    margin-bottom: 12px;
}

#screen-request-sent p {
    color: var(--hint);
    font-size: 15px;
    margin-bottom: 28px;
    line-height: 1.5;
}

/* ── Promo disabled state ──────────────────────────────── */

.promo-code-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-apply-promo.cancel {
    background: rgba(120,120,128,.14);
    color: var(--hint);
}

/* ── Amount btn: only face-value + price ──────────────── */

.amount-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* ── Amount: OOS card style ──────────────────────────── */

.amount-btn.out-of-stock {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Which to choose screen ──────────────────────────── */

.wtc-intro {
    font-size: 14px;
    color: var(--hint);
    line-height: 1.6;
    margin-bottom: 20px;
}

.wtc-section {
    background: var(--section-bg);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
}

.wtc-section-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}

.wtc-section-sub {
    font-size: 13px;
    color: var(--hint);
    line-height: 1.5;
    margin-bottom: 12px;
}

.wtc-table { display: flex; flex-direction: column; gap: 8px; }

.wtc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 2px 0;
}

.wtc-row:has(.wtc-note),
.wtc-row:not(:has(.wtc-note)) {
    /* reset — handled by flex above */
}

.wtc-tier { font-weight: 600; flex: 1; }

.wtc-price {
    font-weight: 700;
    color: var(--btn-bg);
    flex-shrink: 0;
}

.wtc-note { color: var(--hint); }

.wtc-link {
    color: var(--btn-bg);
    text-decoration: none;
}
.wtc-link:active { opacity: 0.7; }

.wtc-tip {
    background: rgba(255,214,10,.07);
    border: 1px solid rgba(255,214,10,.2);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
}

.wtc-tip-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}

.wtc-tip p {
    font-size: 13px;
    color: var(--hint);
    line-height: 1.55;
    margin: 0;
}

.wtc-cta {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--section-bg);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 8px;
}

.wtc-cta-icon { font-size: 28px; flex-shrink: 0; }

.wtc-cta-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}

.wtc-cta-text {
    font-size: 13px;
    color: var(--hint);
    line-height: 1.55;
    margin: 0;
}