/*
 * BookingCar — личный кабинет.
 * Фирменные цвета поверх Tabler. Подключается после tabler.min.css.
 *
 * Основной цвет — как на bookingcar.ru: #fec416 с тёмным текстом #222
 * (белый текст на жёлтом нечитаем: контраст 1.6).
 */

:root {
    --tblr-brand: #fec416;

    --tblr-primary: #fec416;
    --tblr-primary-rgb: 254, 196, 22;
    --tblr-primary-fg: #222222;
    --tblr-primary-darken: #eab414;
    --tblr-primary-lt: #fff9e8;
    --tblr-primary-lt-rgb: 255, 249, 232;
    --tblr-primary-text-emphasis: #664e09;
    --tblr-primary-bg-subtle: #fff3d0;
    --tblr-primary-border-subtle: #ffe7a2;

    /* Жёлтые ссылки на белом фоне не читаются — ссылки в тёмном фирменном цвете сайта */
    --tblr-link-color: #2f4858;
    --tblr-link-color-rgb: 47, 72, 88;
    --tblr-link-hover-color: #21323e;
    --tblr-link-hover-color-rgb: 33, 50, 62;
}

:root[data-bs-theme="dark"],
[data-bs-theme="dark"] {
    --tblr-primary-text-emphasis: #fedc73;
    --tblr-primary-bg-subtle: #332704;
    --tblr-primary-border-subtle: #664e09;

    --tblr-link-color: #fec416;
    --tblr-link-color-rgb: 254, 196, 22;
    --tblr-link-hover-color: #fedc73;
    --tblr-link-hover-color-rgb: 254, 220, 115;
}

/* Кнопки-контуры и «призрачные» в основном цвете: жёлтый текст на белом не читается —
   текст тёмно-янтарный, при наведении жёлтый фон с тёмным текстом */
:root:not([data-bs-theme="dark"]) .btn-outline-primary,
:root:not([data-bs-theme="dark"]) .btn-ghost-primary {
    --tblr-btn-color: #7a5a00;
}

:root:not([data-bs-theme="dark"]) .btn-outline-primary:hover,
:root:not([data-bs-theme="dark"]) .btn-ghost-primary:hover,
:root:not([data-bs-theme="dark"]) .btn-outline-primary:active,
:root:not([data-bs-theme="dark"]) .btn-ghost-primary:active {
    --tblr-btn-hover-color: #222222;
    --tblr-btn-active-color: #222222;
}

/* Логотип: иконка с сайта */
.brand-logo {
    display: inline-flex;
    align-items: center;
}

.brand-logo__img {
    width: 2rem;
    height: 2rem;
}

.brand-logo--lg .brand-logo__img {
    width: 3rem;
    height: 3rem;
}

/* Надпись рядом с иконкой — в кабинете (боковое меню на тёмном фоне) */
.brand-logo__text {
    margin-inline-start: .625rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--tblr-body-color);
}

.lk-sidebar .brand-logo,
.lk-sidebar .brand-logo:hover {
    text-decoration: none;
}

.lk-sidebar .brand-logo__text {
    color: #fff;
}

/* ---------- Страницы входа ---------- */

/*
 * Tabler центрирует форму через justify-content: center, а .page сжимается до высоты окна.
 * Если форма выше окна (регистрация на ноутбуке), её верх уезжает за экран без прокрутки.
 * margin: auto центрирует только когда есть место — иначе форма просто прокручивается.
 */
body > .page.page-center {
    flex: 1 0 auto;
    justify-content: flex-start;
}

.page-center > .container-tight {
    margin-block: auto;
}

/* Выбранный вариант в переключателях: жёлтый текст на белом не читается */
.form-selectgroup-input:checked + .form-selectgroup-label {
    color: var(--tblr-body-color);
    background-color: var(--tblr-primary-bg-subtle);
    border-color: var(--tblr-primary);
}

/* ---------- Документы из старой системы (оферта): многоуровневая нумерация пунктов ---------- */
.lk-document ol {
    list-style-type: none;
    counter-reset: item;
    padding-left: 20px;
}

.lk-document li:not(.not-in) {
    display: block;
    counter-increment: item;
    margin-bottom: 5px;
}

.lk-document li:not(.not-in)::before {
    content: counters(item, ".") " ";
    font-weight: bold;
}

/* ---------- Кабинет: тёмное боковое меню ---------- */

.lk-sidebar {
    --tblr-navbar-bg: #2b303b;
    --tblr-navbar-border-color: rgba(255, 255, 255, .06);
    --tblr-navbar-color: rgba(255, 255, 255, .72);
    --tblr-navbar-hover-color: #fff;
    --tblr-navbar-active-color: #fff;
}

.lk-sidebar__brand {
    padding-block: .75rem;
}

.lk-sidebar__heading {
    list-style: none;
    padding: 1.25rem 1.5rem .375rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

.navbar-vertical.lk-sidebar .navbar-nav .nav-link {
    margin: 1px .75rem;
    padding: .5rem .75rem;
    border-radius: var(--tblr-border-radius);
    align-items: flex-start;
}

/* Длинные пункты («Мгновенные уведомления о заявках в Telegram») переносим, а не обрезаем */
.navbar-vertical.lk-sidebar .navbar-nav .nav-link-title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.35;
}

.lk-sidebar .nav-link-icon {
    color: rgba(255, 255, 255, .55);
}

.navbar-vertical.lk-sidebar .navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .05);
}

/* Активный пункт — как на макете: жёлтая подложка и иконка */
.navbar-vertical.lk-sidebar .nav-item.active > .nav-link {
    background: rgba(254, 196, 22, .16);
    color: #fff;
    font-weight: 600;
}

.lk-sidebar .nav-item.active > .nav-link .nav-link-icon {
    color: var(--tblr-primary);
}

.lk-sidebar .nav-item.active::after {
    display: none;
}

.lk-sidebar__status {
    margin: .75rem .75rem 0;
    padding: .75rem;
    border-radius: var(--tblr-border-radius);
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .8);
    font-size: .875rem;
}

.lk-sidebar__status-label {
    margin-bottom: .25rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

/* Длинные статусы («Партнер, ведущий календарь занятости») переносятся */
.lk-sidebar__status-badge {
    max-width: 100%;
    white-space: normal;
    text-align: start;
    line-height: 1.3;
}

.lk-sidebar__status-extra {
    margin-top: .375rem;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .7);
}

.lk-sidebar__balance {
    display: block;
    margin-top: .5rem;
    color: rgba(255, 255, 255, .8);
}

.lk-sidebar__balance:hover {
    color: var(--tblr-primary);
}

.lk-sidebar__support {
    margin: 1.5rem 1.5rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.lk-sidebar__support a {
    color: rgba(255, 255, 255, .8);
}

.lk-sidebar__support a:hover {
    color: var(--tblr-primary);
}

.lk-sidebar__phone {
    font-weight: 600;
    white-space: nowrap;
}

.lk-topbar {
    border-bottom: 1px solid var(--tblr-border-color);
}

/* Ограничение ширины поясняющего текста */
.lk-text-limit {
    max-width: 48rem;
}

/* Города базирования: группы мест выдачи */
.lk-base-group {
    margin-bottom: 1.25rem;
}

.lk-base-group-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .375rem;
}

.lk-base-group-head .btn {
    margin-left: auto;
}

.lk-base-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem 0;
    border-bottom: 1px solid var(--tblr-border-color-translucent);
}

.lk-base-item > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.lk-base-actions {
    display: inline-flex;
    flex-shrink: 0;
    gap: .25rem;
}

.lk-base-empty {
    color: var(--tblr-secondary);
    font-size: .875rem;
}

.lk-base-table td,
.lk-base-table th {
    padding-left: .5rem;
    padding-right: .5rem;
}

/* Выбор городов */
.lk-city-picker summary {
    cursor: pointer;
    padding: .375rem 0;
}

.lk-city-country {
    font-weight: 600;
    font-size: 1rem;
}

.lk-city-region {
    margin-left: 1.25rem;
}

.lk-city-list {
    columns: 3 14rem;
    column-gap: 1.5rem;
    margin: .25rem 0 .75rem 1.25rem;
}

.lk-city-list .form-check {
    break-inside: avoid;
}

.lk-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--tblr-bg-surface);
}

/* Каталог скидок */
.lk-discount-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--tblr-bg-surface-secondary);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* Логотипы разных пропорций: вписываем целиком, не обрезая. Белая подложка — логотипы
   рисуют под белый фон (и в тёмной теме тоже), с прозрачными PNG иначе сливается */
.lk-discount-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    object-fit: contain;
    background: #fff;
    border-bottom: 1px solid var(--tblr-border-color);
}

.lk-discount-image .ti {
    font-size: 2.5rem;
    color: var(--tblr-secondary);
}

/* Есть логотип — значок-заглушка не нужен. Не загрузился — onerror удаляет img, значок вернётся */
.lk-discount-image img ~ .ti {
    display: none;
}

.lk-discount-text img {
    max-width: 100%;
    height: auto;
}

.lk-promo-code {
    padding: .375rem .75rem;
    font-family: var(--tblr-font-monospace);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .08em;
    background: var(--tblr-bg-surface);
    border: 1px dashed var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}

.border-dashed {
    border-style: dashed;
}

/* FAQ и видео-инструкция */
.lk-faq-steps .avatar {
    background: var(--tblr-primary-lt);
}

.lk-video {
    width: 100%;
    max-width: 960px;
    border-radius: var(--tblr-border-radius);
    background: #000;
}

/* Каско: сервис оформления полиса в модальном окне */
.lk-kasko-frame {
    display: block;
    width: 100%;
    height: min(80vh, 760px);
    border: 0;
}

/* Telegram: цвет бренда — по образцу кнопок соцсетей Tabler (.btn-facebook и др.).
   Фирменный #229ed9 с белым текстом даёт контраст 3:1 — берём более тёмный оттенок (4.9:1). */
:root {
    --tblr-telegram: #1877b0;
    --tblr-telegram-fg: #ffffff;
    --tblr-telegram-darken: #146597;
}

.bg-telegram {
    background-color: var(--tblr-telegram) !important;
    color: var(--tblr-telegram-fg) !important;
}

.btn-telegram {
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-border-color: transparent;
    --tblr-btn-color: var(--tblr-telegram-fg);
    --tblr-btn-bg: var(--tblr-telegram);
    --tblr-btn-hover-color: var(--tblr-telegram-fg);
    --tblr-btn-hover-bg: var(--tblr-telegram-darken);
    --tblr-btn-active-color: var(--tblr-telegram-fg);
    --tblr-btn-active-bg: var(--tblr-telegram-darken);
    --tblr-btn-box-shadow: var(--tblr-shadow-input);
}

.lk-tg-hero-icon {
    font-size: 2.5rem;
}

.lk-tg-command {
    max-width: 26rem;
}