/* Тема VexPay: токены и базовые компоненты. */

:root {
    --vx-bg:          #F7F8FB;
    --vx-surface:     #FFFFFF;
    --vx-ink:         #141B33;
    --vx-muted:       #5B6478;
    --vx-faint:       #8B93A8;
    --vx-border:      #E7E9F1;
    --vx-divider:     #EFF1F7;
    --vx-line:        #D6D9E4;
    --vx-hover:       #EFF1F7;
    --vx-navy:        #1E2A5A;
    --vx-red:         #C21F26;
    --vx-red-bright:  #E3242B;
    --vx-red-dark:    #8E161B;

    --vx-grad:        linear-gradient(135deg, #2E3F82, #1B2650);
    --vx-tint:        #F4F6FB;
    --vx-tint-border: #DDE3F2;

    --vx-ok:          #2EAE6C;
    --vx-ok-bg:       #EDF7F1;
    --vx-ok-border:   #D5EDDF;
    --vx-warn:        #C47F17;
    --vx-warn-bg:     #FAF3DF;
    --vx-warn-border: #F0E4C0;
    --vx-warn-row:    #FDFAF3;

    --vx-r-field:     10px;
    --vx-r-btn:       12px;
    --vx-r-card:      16px;
    --vx-r-inner:     12px;
    --vx-r-modal:     20px;
    --vx-r-pill:      99px;

    --vx-shadow-btn:  0 2px 8px rgba(30, 42, 90, .35);
    --vx-shadow-card: 0 8px 20px rgba(20, 27, 51, .1);
    --vx-shadow-modal:0 24px 60px rgba(20, 27, 51, .28);

    --vx-font:        Manrope, system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--vx-bg);
    color: var(--vx-ink);
    font-family: var(--vx-font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--vx-red); text-decoration: none; }
a:hover { color: var(--vx-red-dark); }

/* Анимации из макета */
@keyframes vxFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes vxIn    { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes vxToast { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes vxSheet { from { transform: translateY(100%); } to { transform: none; } }

/* Кнопки: единая шкала скруглений, капсула только у статусов */
.vx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-r-btn);
    background: var(--vx-surface);
    color: var(--vx-ink);
    font: 700 13.5px var(--vx-font);
    cursor: pointer;
    transition: transform .15s, background .15s, box-shadow .15s, border-color .15s;
}

.vx-btn:hover { transform: translateY(-2px); background: var(--vx-hover); }
.vx-btn:active { transform: none; }
.vx-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.vx-btn--primary {
    background: var(--vx-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--vx-shadow-btn);
}
.vx-btn--primary:hover { background: var(--vx-grad); }

.vx-btn--dark {
    background: var(--vx-ink);
    border-color: transparent;
    color: #fff;
}
.vx-btn--dark:hover { background: var(--vx-ink); }

.vx-btn--block { width: 100%; padding: 13px; font-size: 14px; }
.vx-btn--sm { padding: 7px 14px; font-size: 12.5px; }

/* Поля ввода */
.vx-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--vx-muted);
    margin-bottom: 6px;
}

.vx-field {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-r-field);
    background: var(--vx-surface);
    color: var(--vx-ink);
    font: 600 13.5px var(--vx-font);
    transition: border-color .15s, box-shadow .15s;
}

.vx-field:focus {
    outline: none;
    border-color: var(--vx-navy);
    box-shadow: 0 0 0 3px rgba(30, 42, 90, .12);
}

.vx-field::placeholder { color: var(--vx-faint); font-weight: 600; }
.vx-field--amount { font-size: 16px; font-weight: 800; }

.vx-field-group { position: relative; }
.vx-field-suffix {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 800;
    color: var(--vx-muted);
    pointer-events: none;
}

/* Карточки */
.vx-card {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-r-card);
    padding: 20px 22px;
}

.vx-card--tap {
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.vx-card--tap:hover { transform: translateY(-3px); box-shadow: var(--vx-shadow-card); }

.vx-card--add {
    border-style: dashed;
    border-color: #C6CBDC;
    display: grid;
    place-items: center;
    color: var(--vx-muted);
    font-weight: 700;
    font-size: 13px;
}
.vx-card--add:hover { border-color: var(--vx-navy); color: var(--vx-red); background: var(--vx-tint); }

.vx-card__title { font-weight: 800; font-size: 15px; }

/* Статусы: капсула по смыслу */
.vx-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--vx-r-pill);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.vx-badge--ok    { color: var(--vx-ok);   background: var(--vx-ok-bg);   }
.vx-badge--warn  { color: var(--vx-warn); background: var(--vx-warn-bg); }
.vx-badge--alert { color: var(--vx-red);  background: #F9E7E8;           }
.vx-badge--info  { color: var(--vx-navy); background: var(--vx-tint);    }
.vx-badge--mute  { color: var(--vx-muted); background: var(--vx-divider); }

.vx-badge svg { flex: none; }

/* Чипы-фильтры */
.vx-chip {
    padding: 6px 14px;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-r-pill);
    background: var(--vx-surface);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vx-muted);
    cursor: pointer;
    transition: all .15s;
}
.vx-chip:hover { border-color: var(--vx-navy); color: var(--vx-ink); }
.vx-chip--on { background: var(--vx-ink); border-color: var(--vx-ink); color: #fff; }

/* Переключатель языка */
.vx-lang {
    display: inline-flex;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-r-pill);
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
}
.vx-lang a { padding: 4px 11px; color: var(--vx-muted); }
.vx-lang a.on { background: var(--vx-ink); color: #fff; }

/* Модалка */
/* Скрытие должно побеждать display, иначе окно остаётся открытым */
.vx-overlay[hidden] { display: none; }

.vx-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 27, 51, .5);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 50;
    animation: vxFade .2s;
    padding: 20px;
}

.vx-modal {
    width: 430px;
    max-width: 100%;
    max-height: 90vh;
    overflow: auto;
    background: var(--vx-surface);
    border-radius: var(--vx-r-modal);
    padding: 24px 26px;
    box-shadow: var(--vx-shadow-modal);
    animation: vxIn .28s cubic-bezier(.2, .8, .2, 1);
}

.vx-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.vx-modal__title { font-weight: 800; font-size: 17px; }
.vx-modal__hint { font-size: 12.5px; color: var(--vx-muted); margin-bottom: 16px; }

.vx-modal__close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--vx-muted);
    cursor: pointer;
}
.vx-modal__close:hover { background: var(--vx-hover); }

/* Тост */
.vx-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--vx-r-pill);
    background: var(--vx-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    z-index: 60;
    animation: vxToast .25s;
}
.vx-toast svg { color: #F2545B; }

/* Плашка с пояснением */
.vx-note {
    padding: 12px 14px;
    border: 1px solid var(--vx-tint-border);
    border-radius: var(--vx-r-inner);
    background: var(--vx-tint);
    font-size: 12px;
    line-height: 1.55;
    color: var(--vx-muted);
    font-weight: 600;
}

.vx-error {
    padding: 11px 14px;
    border: 1px solid #F1C9CB;
    border-radius: var(--vx-r-inner);
    background: #F9E7E8;
    color: var(--vx-red);
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 14px;
}

/* Вспомогательное */
.vx-muted { color: var(--vx-muted); }
.vx-faint { color: var(--vx-faint); }
.vx-stack { display: flex; flex-direction: column; }
.vx-row   { display: flex; align-items: center; }
.vx-gap-8 { gap: 8px; }
.vx-gap-10 { gap: 10px; }
.vx-gap-14 { gap: 14px; }