/* ============================================================
   module_page_voucher — кнопка в шапке + попап активации.
   Грузится на всех страницах (css_always), поэтому файл маленький
   и всё заскоплено в .vch-* / #popupVoucher.

   Палитра — переменные темы NEO: --card #1f1f28, --button #363753,
   --money #f4ca80 (+ --money-bg), --input-form #272936,
   --text-secondary #9fa2b9, --text-default-invert #1b1c24,
   --green, --red + --red-10, --transparent-*-w. Переменной
   --transparent-15 в теме НЕТ.

   ⚠ Глобальное правило темы svg{width:1rem;height:1rem} — размеры
   иконок задаём явно, а <use> в flex схлопывается без flex-shrink:0.
   ============================================================ */

/* ---------- кнопка в шапке (рядом с колокольчиком) ---------- */

.vch-button {
    background: var(--money-bg) !important;
}

.vch-button svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    fill: var(--money, #f4ca80) !important;
}

/* ---------- попап ---------- */

/*
 * hidden обязан выигрывать у наших display-правил: у [hidden] из браузерных
 * стилей специфичность ниже любого класса, поэтому .vch-result--success с
 * display:flex показывал блок «Ваучер активирован» ещё до ввода кода.
 */
.vch-modal [hidden],
.vch-adm [hidden] {
    display: none !important;
}

.vch-modal__content {
    width: min(440px, calc(100vw - 32px));
    max-width: 440px;
}

.vch-modal .vch-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

.vch-modal svg {
    flex-shrink: 0;
}

.vch-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vch-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-s, 12px);
    font-weight: var(--font-weight-6, 600);
    color: var(--text-secondary, #9fa2b9);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vch-label svg {
    width: 16px;
    height: 16px;
    fill: var(--money, #f4ca80);
}

.vch-input {
    width: 100%;
    height: var(--input-height, 41px);
    padding: 0 14px;
    border: 1px solid var(--transparent-10-w, rgba(255, 255, 255, .1));
    border-radius: var(--br-10, 10px);
    background: var(--input-form, #272936);
    color: var(--text-default, #fff);
    font-family: monospace;
    font-size: var(--font-size-l, 18px);
    font-weight: var(--font-weight-7, 700);
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}

.vch-input:focus {
    outline: none;
    border-color: var(--money, #f4ca80);
}

.vch-input::placeholder {
    color: var(--text-secondary, #9fa2b9);
    font-family: inherit;
    font-weight: var(--font-weight-5, 500);
    font-size: var(--font-size-m, 14px);
    letter-spacing: normal;
    text-transform: none;
}

.vch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--input-height, 41px);
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--br-10, 10px);
    background: var(--button, #363753);
    color: var(--text-default, #fff);
    font-family: inherit;
    font-size: var(--font-size-m, 14px);
    font-weight: var(--font-weight-6, 600);
    cursor: pointer;
    transition: var(--transition-ease-2, .2s ease);
}

.vch-btn:hover:not(:disabled) {
    background: var(--button-hover, #424367);
}

.vch-btn:disabled {
    background: var(--btn-disabled, #2a2b3d);
    color: var(--text-secondary, #9fa2b9);
    cursor: default;
}

/* Светлая кнопка требует тёмного текста — иначе «серая кнопка с чёрным текстом». */
.vch-btn--main {
    background: var(--money, #f4ca80);
    color: var(--text-default-invert, #1b1c24);
}

.vch-btn--main:hover:not(:disabled) {
    background: var(--money, #f4ca80);
    filter: brightness(1.08);
}

.vch-btn--ghost {
    background: transparent;
    border-color: var(--transparent-10-w, rgba(255, 255, 255, .1));
}

.vch-result {
    padding: 12px 14px;
    border-radius: var(--br-10, 10px);
    font-size: var(--font-size-m, 14px);
    line-height: 1.45;
}

.vch-result--error {
    background: var(--red-10, rgba(255, 73, 64, .1));
    border: 1px solid var(--red-20, rgba(255, 73, 64, .2));
    color: var(--red, #ff4940);
}

.vch-result--success {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--span-10, rgba(118, 171, 41, .1));
    border: 1px solid var(--transparent-10-w, rgba(255, 255, 255, .1));
    color: var(--text-default, #fff);
}

.vch-result__icon {
    width: 22px;
    height: 22px;
    fill: var(--green, #64ce82);
}

.vch-result__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 180px;
}

.vch-result__balance {
    font-size: var(--font-size-s, 12px);
    color: var(--text-secondary, #9fa2b9);
}

.vch-result__balance b {
    color: var(--money, #f4ca80);
}

.vch-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--transparent-5-w, rgba(255, 255, 255, .05));
}

.vch-hint {
    flex: 1 1 200px;
    font-size: var(--font-size-xs, 11px);
    color: var(--text-secondary, #9fa2b9);
    line-height: 1.4;
}

.vch-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--money, #f4ca80);
    font-family: inherit;
    font-size: var(--font-size-s, 12px);
    font-weight: var(--font-weight-6, 600);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}