/* ВАУЧЕРНОЕ ОКНО, ВЫБОР УСЛУГИ И ИСТОРИЯ — ОДИН ВИД НА ПРОДУКТ.
   Кусок 148, 23.10. СЛОВО КОСТИ: «своди, мы же сводили QR профиль игрока».

   ЧТО БЫЛО ЗАМЕРЕНО. Этот вид был описан ТРИЖДЫ:
     · `css/coaches.css` — 42 правила с приставкой `co-`;
     · `css/courts.css`  — те же 42 правила с приставкой `ct-`;
       СОВПАЛИ ТЕЛОМ 40 ИЗ 42, а два расходились ТОЛЬКО именем анимации
       (`coModalFadeIn` против `ctModalFadeIn`) — то есть и анимация была
       написана дважды;
     · `js/dashboard.js` — окно кабинета целиком на ИНЛАЙН-СТИЛЯХ, со
       своей парой `@keyframes`, вписанной в разметку через `<style>`.
   Итого один вид, три описания и четыре копии одной анимации.

   ПРИСТАВКА СНЯТА СОВСЕМ, А НЕ ПЕРЕНЕСЕНА. Пока классы звались `co-` и
   `ct-`, «один вид» держался на том, что две копии не разошлись. Теперь
   имя одно — `kslt-`, — и расходиться нечему.

   ЗНАЧЕНИЯ НЕ ВЫДУМАНЫ: взяты ЗАМЕРЕННЫМИ у `coaches.css`, побайтово
   равными `courts.css`. Вид не менялся — менялось число его описаний.
*/

/* ПОДЛОЖКА — ОДНА НА ВСЕ ТРИ ОКНА (ваучер, выбор услуги, лимит).
   До этого куска она была описана дважды знак в знак: ОДНО ОПРЕДЕЛЕНИЕ НА
   ОДНО ПОНЯТИЕ.

   ОКНО ПРОКРУЧИВАЕТСЯ, А НЕ ОБРЕЗАЕТСЯ. Замер 23.10 на телефоне в
   горизонтали (844x390): окно ваучера высотой 586 при экране 390,
   `align-items: center` ставило его верх на -98, подложка `fixed` с
   `overflow: visible` не прокручивалась — КРЕСТИК И ЗАГОЛОВОК БЫЛИ ЗА
   ЭКРАНОМ И НЕ ДОСТАВАЛИСЬ НИКАК. Беда приехала вместе с видом из
   `coaches.css` и `courts.css`, где жила в обеих копиях.

   Починка без новых чисел: `flex-start` + `overflow-y: auto` на подложке
   и `margin: auto` на окне. Влезает — стоит по центру (авто-поля делят
   остаток), не влезает — прижимается к верху и подложка прокручивается с
   отступом 20 сверху и снизу. */
.kslt-voucher-overlay,
.kslt-picker-overlay {
    position: fixed;
    inset: 0;
    background: var(--alpha-black-60);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    z-index: 9999;
    padding: 20px;
    opacity: 0;
    animation: kslt-modal-fade-in 0.25s ease forwards;
}
@keyframes kslt-modal-fade-in { to { opacity: 1; } }

/* Voucher Modal */
.kslt-voucher-modal {
    background: rgba(26,26,30,0.95);
    border: var(--bw-hair) solid var(--alpha-white-08);
    border-radius: 16px;
    padding: 32px;
    margin: auto;
    max-width: 400px;
    width: 100%;
    position: relative;
    text-align: center;
    transform: translateY(20px) scale(0.95);
    animation: kslt-modal-slide-in 0.25s ease forwards;
}
@keyframes kslt-modal-slide-in { to { transform: translateY(0) scale(1); } }
.kslt-voucher-close {
    position: absolute;
    top: 12px; right: 16px;
    background: none;
    border: none;
    color: var(--alpha-white-50);
    font-size: var(--fs-xl);
    cursor: pointer;
}
.kslt-voucher-title {
    font-size: var(--fs-md);
    color: var(--accent);
    margin-bottom: 20px;
}
.kslt-voucher-qr {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    background: var(--neutral-white);
    border-radius: 12px;
    padding: 16px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.kslt-voucher-details {
    text-align: left;
    margin-bottom: 20px;
}
.kslt-voucher-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: var(--fs-sm);
    color: var(--alpha-white-72);
    border-bottom: var(--bw-hair) solid var(--alpha-white-08);
}
.kslt-voucher-row:last-child { border-bottom: none; }
.kslt-voucher-percent {
    color: var(--accent);
    font-weight: 700;
}
.kslt-voucher-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.kslt-voucher-download {
    background: var(--accent);
    color: var(--neutral-black);
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: opacity 0.2s;
}
.kslt-voucher-download:hover { opacity: 0.85; }

/* Voucher History */
.kslt-voucher-history {
    margin-top: 24px;
    padding-top: 20px;
    border-top: var(--bw-hair) solid var(--alpha-white-08);
}
.kslt-voucher-history h4 {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--alpha-white-72);
    margin-bottom: 12px;
}
.kslt-vh-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kslt-vh-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--alpha-white-04);
    border-radius: 10px;
    border: var(--bw-hair) solid var(--alpha-white-04);
    font-size: var(--fs-sm);
}
.kslt-vh-date {
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 50px;
}
.kslt-vh-service {
    color: var(--alpha-white-72);
    flex: 1;
}
.kslt-vh-discount {
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}
.kslt-vh-status {
    padding: 2px 10px;
    border-radius: 100px;
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}
.kslt-vh-status-active {
    background: var(--accent-subtle);
    color: var(--accent);
}
.kslt-vh-status-used {
    background: var(--alpha-white-08);
    color: var(--alpha-white-35);
}
.kslt-vh-status-expired {
    background: rgba(255,100,100,0.1);
    color: rgba(255,100,100,0.6);
}
.kslt-vh-qr-btn {
    background: none;
    border: var(--bw-hair) solid var(--accent-glow);
    color: var(--accent);
    padding: 2px 10px;
    border-radius: 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.kslt-vh-qr-btn:hover {
    background: var(--alpha-lime-12);
}
.kslt-vh-empty {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    padding: 8px 0;
}

/* Service Picker Modal — подложка описана выше, одна на три окна */
.kslt-picker-modal {
    background: rgba(26,26,30,0.95);
    border: var(--bw-hair) solid var(--alpha-white-08);
    border-radius: 16px;
    padding: 28px;
    margin: auto;
    max-width: 380px;
    width: 100%;
    position: relative;
    transform: translateY(20px) scale(0.95);
    animation: kslt-modal-slide-in 0.25s ease forwards;
}
.kslt-picker-close {
    position: absolute;
    top: 10px; right: 14px;
    background: none;
    border: none;
    color: var(--alpha-white-50);
    font-size: var(--fs-lg);
    cursor: pointer;
}
.kslt-picker-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    text-align: center;
}
.kslt-picker-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.kslt-picker-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--alpha-white-04);
    border: var(--bw-hair) solid rgba(255,255,255,0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.kslt-picker-option:hover {
    border-color: var(--alpha-lime-20);
}
.kslt-picker-option.selected {
    border-color: var(--accent);
    background: var(--alpha-lime-06);
}
.kslt-picker-radio {
    width: 18px; height: 18px;
    /* ЗНАЧЕНИЕ НЕ МЕНЯЕТСЯ, меняется запись: ступень --alpha-white-20
       завелась кругом B3. Граница элемента управления в лестницу B3 не
       входит — её планка WCAG 1.4.11 (3:1), и 0.20 даёт 1.7: это находка
       следующего круга, а не правка этого */
    border: var(--bw-thick) solid var(--alpha-white-20);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
.kslt-picker-option.selected .kslt-picker-radio {
    border-color: var(--accent);
}
.kslt-picker-option.selected .kslt-picker-radio::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
}
.kslt-picker-label {
    flex: 1;
    font-size: var(--fs-sm);
    color: var(--alpha-white-72);
}
.kslt-picker-percent {
    color: var(--accent);
    font-weight: 700;
    font-size: var(--fs-base);
}
.kslt-picker-submit {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: var(--neutral-black);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: opacity 0.2s;
}
.kslt-picker-submit:hover { opacity: 0.85; }
.kslt-picker-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* УЗКИЙ ВИД — те же три правила, что стояли в @media каждого раздела.
   Ширины в медиа только 640 и 992 (шкала проекта). */
@media (max-width: 640px) {
    .kslt-voucher-modal {
        padding: 24px 20px;
    }
    .kslt-vh-item {
        flex-wrap: wrap;
        gap: 6px;
    }
    .kslt-picker-modal {
        padding: 20px 16px;
    }
}