/* mod_tb_certificate_issue_slider — форма выдачи сертификата с бегунком суммы.
 * Базовые классы (.tbc-form__*, .tbc-msg, .tbc-call и т.д.) — 1:1 копия
 * mod_tb_certificate_issue/assets/css/issue.css (физически отдельный файл,
 * не общий импорт — чтобы правки здесь не могли задеть уже рабочую форму
 * со списком номиналов). Уникальное — блок .tbc-slider-*. */

.tbc {
    --tbc-radius: 8px;
    --tbc-gap: 1rem;
    --tbc-accent: var(--uk-primary, var(--bs-primary, #c9a25e));
    --tbc-error: var(--bs-danger, #f0506e);
    --tbc-success: var(--bs-success, #32d296);
    max-width: 480px;
    margin: 0 auto;
    color: inherit;
}

.tbc-cover {
    width: 100%;
    border-radius: 14px;
    display: block;
    margin-bottom: 16px;
    object-fit: cover;
    max-height: 220px;
}

.tbc-title { margin: 0 0 0.5rem; font-size: 1.4rem; }
.tbc-desc { margin: 0 0 1.25rem; opacity: 0.75; line-height: 1.4; }

.tbc-msg { border-radius: var(--tbc-radius); padding: 0.9rem 1rem; margin-bottom: var(--tbc-gap); font-size: 0.95rem; }
.tbc-msg--info { background: rgba(0, 0, 0, 0.04); text-align: center; }
.tbc-msg--success { background: rgba(50, 210, 150, 0.12); border: 1px solid var(--tbc-success); }
.tbc-msg--error { background: rgba(240, 80, 110, 0.12); color: var(--tbc-error); }

.tbc-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

.tbc-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: var(--tbc-gap);
}

.tbc-form__label { font-size: 0.85rem; opacity: 0.8; }
.tbc-form__input { width: 100%; }

.tbc-form__row--sms {
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: end;
    gap: var(--tbc-gap);
    margin-bottom: var(--tbc-gap);
}
.tbc-form__row--sms .tbc-form__field { margin-bottom: 0; }
.tbc-form__row--sms .tbc-form__verify { width: auto; align-self: end; }
.tbc-verify-status {
    grid-column: 1 / -1;
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    opacity: 0.85;
}
.tbc-verify-status--ok  { color: var(--tbc-success); opacity: 1; }
.tbc-verify-status--err { color: var(--tbc-error); opacity: 1; }

@media (max-width: 640px) {
    .tbc-form__row--sms { grid-template-columns: 1fr; }
    .tbc-form__row--sms .tbc-form__verify { width: 100%; }
}

.tbc-call {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding: 0.9rem 1rem;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--tbc-radius);
    text-align: center;
}
.tbc-call__prompt { margin: 0 0 0.2rem; font-size: 0.95rem; opacity: 0.85; }
.tbc-call__number {
    display: inline-block;
    margin: 0.1rem 0 0.4rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--tbc-accent);
}
.tbc-call__number:hover { text-decoration: underline; }
.tbc-call__waiting { margin: 0; font-size: 0.9rem; opacity: 0.75; }

.tbc-form__consent {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: var(--tbc-gap);
    font-size: 0.9rem;
    line-height: 1.4;
}
.tbc-form__consent input { margin-top: 0.25em; }

.tbc-form__submit.is-loading,
.tbc-form__submit:disabled { opacity: 0.55; pointer-events: none; }

.tbc-form__hint { margin: 0.4rem 0 0; font-size: 0.85rem; opacity: 0.7; text-align: center; }

/* --- Бегунок суммы (уникально для этого модуля) --- */

.tbc-slider-wrap {
    text-align: center;
    padding: 0.6rem 0 0.2rem;
}

.tbc-slider-readout {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--tbc-accent);
    line-height: 1.1;
    margin-bottom: 0.6rem;
}

/* Базовая геометрия — общая для ВСЕХ фреймворков (не зависит от цвета). */
.tbc-slider-input {
    width: 100%;
    height: 26px;
    cursor: pointer;
}

/* Свой полный стиль трека/бегунка — ТОЛЬКО когда framework=none (у UIkit/
 * Bootstrap есть собственный тема-осознанный range-компонент, см. $rangeCls
 * в default.php — им мы не мешаем, иначе рисовался бы конфликт стилей
 * с не факт какой очерёдностью загрузки CSS, что и дало «бегунок без
 * полосы» — Борис: «не очень хорошо отображается, без полосы, видимо он
 * не из uikit»). Цвет трека — НЕ фиксированный белый/чёрный (форма может
 * стоять на светлой ИЛИ тёмной секции сайта, .tbc сама цвет фона не
 * знает) — берём из currentColor, чтобы контраст автоматически совпадал
 * с тем, что уже выбрал автор страницы для текста. */
.tbc-slider-input--custom {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.35);
    outline: none;
}
@supports (background: color-mix(in srgb, red, blue)) {
    .tbc-slider-input--custom {
        background: color-mix(in srgb, currentColor 22%, transparent);
    }
}
.tbc-slider-input--custom::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tbc-accent);
    border: 3px solid rgba(0, 0, 0, 0.25);
    cursor: pointer;
    margin-top: -10px;
}
.tbc-slider-input--custom::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--tbc-accent);
    border: 3px solid rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
.tbc-slider-input--custom::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.35);
}
@supports (background: color-mix(in srgb, red, blue)) {
    .tbc-slider-input--custom::-webkit-slider-runnable-track {
        background: color-mix(in srgb, currentColor 22%, transparent);
    }
}
.tbc-slider-input--custom::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.35);
}
@supports (background: color-mix(in srgb, red, blue)) {
    .tbc-slider-input--custom::-moz-range-track {
        background: color-mix(in srgb, currentColor 22%, transparent);
    }
}

.tbc-slider-bounds {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    opacity: 0.65;
    margin-top: 0.4rem;
}
.tbc-slider-amount-label { white-space: nowrap; }

/* Бегунок/сумма на цветной секции builder'а (Борис: «если выбираю primary
 * фон, бегунок и сумма не перекрашивается автоматически»). --tbc-accent
 * зафиксирован на primary синий (см. комментарий у .tbc-slider-input.uk-range
 * ниже) — на ОБЫЧНОЙ (светлой) секции это и нужно, но если сам контейнер тоже
 * primary-цвета, бегунок/сумма того же синего сливаются с фоном. YOOtheme/
 * UIkit сами помечают такие контейнеры (Card/Section/Tile со style=Primary/
 * Secondary, либо явный toggle «тёмный фон») классами `.uk-card-primary`/
 * `.uk-section-primary`/`.uk-tile-primary`/`.uk-light` и т.п. (см.
 * скомпилированный theme.css — именно эти селекторы переключают текст на
 * белый) — переопределяем переменную ТАМ ЖЕ, тогда и readout, и бегунок
 * (оба читают var(--tbc-accent)) сами подхватят белый без дублирования
 * !important-правил ниже. Первая попытка (2026-09-10, утро) целилась только
 * в `.uk-section-primary` — не сработала, т.к. у Бориса контейнер был
 * `.uk-card-primary` (Card-элемент, не Section) — добавлен и он.
 * `:not(.uk-preserve-color)` у section/tile зеркалит эскейп-хетч самого
 * UIkit; у card в компилированном CSS такого эскейп-хетча нет вообще
 * (сверено по theme.css), поэтому для card-селекторов не добавлял. */
.uk-light .tbc,
.uk-offcanvas-bar .tbc,
.uk-overlay-primary .tbc,
.uk-card-primary .tbc,
.uk-card-secondary .tbc,
.uk-section-primary:not(.uk-preserve-color) .tbc,
.uk-section-secondary:not(.uk-preserve-color) .tbc,
.uk-tile-primary:not(.uk-preserve-color) .tbc,
.uk-tile-secondary:not(.uk-preserve-color) .tbc {
    --tbc-accent: #fff;
}

/* Крупнее полоса/кружок для uk-range/form-range (Борис: «можно сделать
 * полосу и круги больше по UIkit?») — ТОЛЬКО размер (height/width/
 * margin-top), border-radius/курсор остаются те, что уже задаёт сам
 * фреймворк (см. скомпилированный theme.css: трек 1px #e5e5e7, кружок
 * 11px #242427 — увеличено до 8px/26px). Цвет кружка + активного/
 * сфокусированного трека — на фирменный primary (Борис: «бегунок пусть
 * будет primary цвета») — `--tbc-accent` уже определён выше как
 * `var(--uk-primary, var(--bs-primary, #c9a25e))`; на этом сайте
 * `--uk-primary` не существует (сверено по реальному theme.css), так
 * что реально резолвится в `--bs-primary` (#193A66) — тот же primary,
 * что уже красит кнопки сайта. Обычный (не активный) трек оставлен
 * серым — фирменным цветом красится именно «бегунок», не вся дорожка.
 * !important — оправданно: у UIkit в этом же файле есть контекстные
 * варианты с БОЛЬШЕЙ специфичностью (.uk-card-primary .uk-range,
 * .uk-section-primary .uk-range и т.д. — 3 класса против наших 2),
 * без !important и размер, и цвет слетели бы, если элемент когда-нибудь
 * окажется внутри цветной секции/карточки. */
.tbc-slider-input.uk-range::-webkit-slider-runnable-track,
.tbc-slider-input.form-range::-webkit-slider-runnable-track {
    height: 8px !important;
}
.tbc-slider-input.uk-range::-moz-range-track,
.tbc-slider-input.form-range::-moz-range-track {
    height: 8px !important;
}
.tbc-slider-input.uk-range:active::-webkit-slider-runnable-track,
.tbc-slider-input.uk-range:focus::-webkit-slider-runnable-track,
.tbc-slider-input.form-range:active::-webkit-slider-runnable-track,
.tbc-slider-input.form-range:focus::-webkit-slider-runnable-track {
    background: var(--tbc-accent) !important;
}
.tbc-slider-input.uk-range:focus::-moz-range-track,
.tbc-slider-input.form-range:focus::-moz-range-track {
    background: var(--tbc-accent) !important;
}
.tbc-slider-input.uk-range::-webkit-slider-thumb,
.tbc-slider-input.form-range::-webkit-slider-thumb {
    height: 26px !important;
    width: 26px !important;
    margin-top: -9px !important;
    background: var(--tbc-accent) !important;
}
.tbc-slider-input.uk-range::-moz-range-thumb,
.tbc-slider-input.form-range::-moz-range-thumb {
    height: 26px !important;
    width: 26px !important;
    margin-top: -9px !important;
    background: var(--tbc-accent) !important;
}