/* Ввод кода подарочного сертификата — один вид на всех экранах портала.

   Блок стоит и на витрине записи (тёмный фон), и в «Моих записях» (светлая
   карточка оплаты), поэтому цвета вынесены в переменные, а модификатор
   `--dark` их переопределяет. Размеры общие: это один и тот же орган
   управления, и выглядеть он обязан одинаково.

   ⚠️ РАЗМЕР ШРИФТА 16px — НЕ ВКУСОВЩИНА. Поле меньше шестнадцати пикселей
   Safari на iPhone при фокусе ЗУМИТ, и в приложении-обёртке вернуть масштаб
   обратно человеку нечем: жеста «отменить зум» там нет, а страница остаётся
   увеличенной до перезагрузки. Тем же правилом живут остальные поля портала.

   Высота 48px — цель касания: экран открывают одной рукой, большим пальцем. */

.cert-code {
    --cc-field-bg: #fff;
    --cc-field-border: #cbd5e1;
    --cc-field-text: #0f172a;
    --cc-placeholder: #94a3b8;
    --cc-accent: #4d7c0f;
    --cc-muted: #64748b;
    --cc-panel-bg: rgba(148, 163, 184, 0.10);
    --cc-panel-border: #cbd5e1;
}

.cert-code--dark {
    --cc-field-bg: rgba(15, 23, 42, 0.60);
    --cc-field-border: #334155;
    --cc-field-text: #f8fafc;
    --cc-placeholder: #64748b;
    --cc-accent: var(--bp-green-on-dark, #92c43a);
    --cc-muted: #94a3b8;
    --cc-panel-bg: rgba(146, 196, 58, 0.10);
    --cc-panel-border: rgba(146, 196, 58, 0.35);
}

/* Поле и кнопка — одной строкой, кнопка не сжимается. */
.cert-code__row {
    display: flex;
    gap: var(--bp-space-2, 8px);
    align-items: stretch;
}

.cert-code__input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--cc-field-border);
    background: var(--cc-field-bg);
    color: var(--cc-field-text);
    font-size: var(--bp-fs-body);
    /* Код читают с бумажного бланка по одному знаку — разрядка помогает
       не потерять место при наборе. */
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cert-code__input::placeholder {
    color: var(--cc-placeholder);
    letter-spacing: normal;
    text-transform: none;
}

.cert-code__input:focus {
    outline: none;
    border-color: var(--cc-accent);
}

.cert-code__btn {
    flex-shrink: 0;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid var(--cc-accent);
    background: transparent;
    color: var(--cc-accent);
    font-size: var(--bp-fs-body);
    font-weight: 600;
}

.cert-code__btn:disabled {
    opacity: 0.45;
}

/* Принятый код: сколько закроет, что останется, до какого числа годен. */
.cert-code__applied {
    display: flex;
    gap: var(--bp-space-2, 8px);
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--cc-panel-bg);
    border: 1px solid var(--cc-panel-border);
}

.cert-code__sum {
    font-size: var(--bp-fs-body);
    font-weight: 600;
    color: var(--cc-field-text);
}

.cert-code__note {
    display: block;
    margin-top: var(--bp-space-1, 4px);
    font-size: var(--bp-fs-secondary);
    line-height: 1.35;
    color: var(--cc-muted);
}

.cert-code__drop {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 6px;
    border: none;
    background: none;
    color: var(--cc-muted);
    font-size: var(--bp-fs-secondary);
    text-decoration: underline;
}

.cert-code__pay {
    margin-top: var(--bp-space-3, 12px);
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid var(--cc-accent);
    background: var(--cc-accent);
    color: #0f172a;
    font-size: var(--bp-fs-body);
    font-weight: 700;
}

.cert-code__pay:disabled {
    opacity: 0.5;
}

.cert-code__msg {
    margin-top: var(--bp-space-2, 8px);
    font-size: var(--bp-fs-secondary);
    line-height: 1.35;
    color: var(--cc-muted);
}