/* Базовые стили (reboot, grid, утилиты, btn, custom-select, card, accordion) подключаются из /local/assets/css/base.css */

/* TABS */
.nav-tabs {
    --bs-nav-tabs-border-width: var(--bs-border-width);
    --bs-nav-tabs-border-color: var(--bs-border-color);
    --bs-nav-tabs-border-radius: var(--bs-border-radius);
    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
    --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
    --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}

.nav-tabs .nav-link {
    margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
    border: var(--bs-nav-tabs-border-width) solid transparent;
    border-top-left-radius: var(--bs-nav-tabs-border-radius);
    border-top-right-radius: var(--bs-nav-tabs-border-radius);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    isolation: isolate;
    border-color: var(--bs-nav-tabs-link-hover-border-color);
}

.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link:disabled {
    color: var(--bs-nav-link-disabled-color);
    background-color: transparent;
    border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--bs-nav-tabs-link-active-color);
    background-color: var(--bs-nav-tabs-link-active-bg);
    border-color: var(--bs-nav-tabs-link-active-border-color);
}

.nav-tabs .dropdown-menu {
    margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #0d6efd;
}

.nav-pills .nav-link {
    border-radius: var(--bs-nav-pills-border-radius);
}

.nav-pills .nav-link:disabled {
    color: var(--bs-nav-link-disabled-color);
    background-color: transparent;
    border-color: transparent;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: var(--bs-nav-pills-link-active-bg);
}

.tab-content>.tab-pane {
    display: none;
}

.tab-content>.active {
    display: block;
}


/* SLIDERS */
.container {
    position: relative;
}

.swiper-button-next,
.swiper-button-prev {
    width: 70px !important;
    height: 70px !important;
    flex-shrink: 0;
    background-color: #FB6411;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: background-color .3s ease;
    position: absolute !important;
}

.swiper-button-prev {
    left: -35px !important;
}

.swiper-button-next {
    right: -35px !important;
}

.swiper-button-next::after,
.swiper-button-prev::after,
.swiper-navigation-icon {
    content: "";
    display: none;
}

.swiper-button-prev img,
.swiper-button-next img {
    width: 18px;
    height: 24px;
    display: block;
}
.swiper-button-next img {
    transform: scaleX(-1);
}

@media (max-width: 1199.98px) {
    .recommendation-btn-prev,
    .viewed-btn-prev {
        left: 8px !important;
    }
    .recommendation-btn-next,
    .viewed-btn-next {
        right: 8px !important;
    }
    .recommendation-btn-prev,
    .recommendation-btn-next,
    .viewed-btn-prev,
    .viewed-btn-next {
        width: 50px !important;
        height: 50px !important;
        /* стрелки по центру фото карточки, а не контейнера (иначе висят на тексте) */
        top: 140px !important;
        margin-top: 0 !important;
        transform: none;
        opacity: 0.9;
    }
}

/*FORM*/
textarea {
    padding: 16px 20px;
    width: 100%;
    background-color: transparent;
    border-radius: 20px;
    border: 1px solid #4F4C48;
    outline: none;
    resize: none;
    height: 100px;
    color: #4F4C48;
}

/* MODAL */

.modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 560px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-bg: #fff;
    --bs-modal-border-width: 0;
    --bs-modal-border-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-modal-zindex);
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: var(--bs-modal-margin);
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none;
    }
}

.modal.show .modal-dialog {
    transform: none;
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02);
}

.modal-dialog-scrollable {
    height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--bs-modal-width);
    margin: 0 auto;
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    border: none;
    border-radius: 40px;
    padding: 42px 60px;
    outline: 0;
}

.modal-backdrop {
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--bs-backdrop-bg);
}

.modal-backdrop.fade {
    opacity: 0;
}

.modal-backdrop.show {
    opacity: var(--bs-backdrop-opacity);
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: var(--bs-modal-header-padding);
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.modal-header .btn-close {
    padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
    margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
}

.modal-title {
    margin-bottom: 0;
    line-height: var(--bs-modal-title-line-height);
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 40px 30px;
}

@media (max-width: 767px) {
    .modal-body {
        padding: 20px 20px 30px 20px;
    }
}

.modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
    background-color: var(--bs-modal-footer-bg);
    border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}

.modal-footer>* {
    margin: calc(var(--bs-modal-footer-gap) * 0.5);
}

@media (min-width: 576px) {
    .modal {
        --bs-modal-margin: 1.75rem;
        --bs-modal-box-shadow: var(--bs-box-shadow);
    }

    .modal-dialog {
        max-width: var(--bs-modal-width);
        margin-right: auto;
        margin-left: auto;
    }

    .modal-sm {
        --bs-modal-width: 300px;
    }
}

@media (min-width: 992px) {

    .modal-lg,
    .modal-xl {
        --bs-modal-width: 800px;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 1140px;
    }
}

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}

.modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}

.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
    border-radius: 0;
}

.modal-fullscreen .modal-body {
    overflow-y: auto;
}

@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-sm-down .modal-header,
    .modal-fullscreen-sm-down .modal-footer {
        border-radius: 0;
    }

    .modal-fullscreen-sm-down .modal-body {
        overflow-y: auto;
    }
}

@media (max-width: 767.98px) {
    .modal-fullscreen-md-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-md-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-md-down .modal-header,
    .modal-fullscreen-md-down .modal-footer {
        border-radius: 0;
    }

    .modal-fullscreen-md-down .modal-body {
        overflow-y: auto;
    }
}

@media (max-width: 991.98px) {
    .modal-fullscreen-lg-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-lg-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-lg-down .modal-header,
    .modal-fullscreen-lg-down .modal-footer {
        border-radius: 0;
    }

    .modal-fullscreen-lg-down .modal-body {
        overflow-y: auto;
    }
}

@media (max-width: 1199.98px) {
    .modal-fullscreen-xl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-xl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-xl-down .modal-header,
    .modal-fullscreen-xl-down .modal-footer {
        border-radius: 0;
    }

    .modal-fullscreen-xl-down .modal-body {
        overflow-y: auto;
    }
}

@media (max-width: 1399.98px) {
    .modal-fullscreen-xxl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-xxl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-xxl-down .modal-header,
    .modal-fullscreen-xxl-down .modal-footer {
        border-radius: 0;
    }

    .modal-fullscreen-xxl-down .modal-body {
        overflow-y: auto;
    }
}










/* HEADER */
.header {
    position: relative;
    z-index: 100;
}

.header-container {
    padding: 18px 24px 32px 24px;
    gap: 30px;
    border-radius: 0 0 30px 30px;
    background: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07);
}

.header-top {
    gap: 40px;
    align-items: end;
}

.header-logo {
    width: clamp(89px, 7.083vw, 136px);
    height: clamp(41px, 3.281vw, 63px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.header-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.header-wrapper {
    display: flex;
}

.header-catalog.btn-primary {
    height: 48px;
    padding: 0 24px;
    width: max-content;
    margin: 0 12px 0 40px;
}

.header-chat.btn-primary {
    height: 48px;
    padding: 0 24px;
    width: max-content;
}

.header-filter {
    border-radius: 30px;
    padding: 0 24px;
    height: 48px;
    gap: 26px;
    background: #ececec;
    align-items: center;
}

.header .custom-select {
    position: relative;
}

.header .custom-select__trigger {
    gap: 12px;
    font-weight: 700;
}

.header .custom-select__arrow {
    width: 14px;
    height: 14px;
    border-right: 2px solid #FB6411;
    border-bottom: 2px solid #FB6411;
}

.header .custom-select__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    margin: 8px 0 0;
    padding: 8px 0;
    list-style: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: 0.2s ease;
    z-index: 1051;
}

.header .custom-select {
    position: relative;
    z-index: 1050;
}

.header .custom-select.is-open .custom-select__list {
    opacity: 1;
    visibility: visible;
    /* translate3d вместо translateY: выносит список в композитный слой.
       Safari рисует слайдеры (Swiper двигает слайды translate3d) поверх
       обычного контента, игнорируя z-index, - список городов уходил под баннер */
    transform: translate3d(0, 0, 0);
}

.header .custom-select__option {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
}

.header-search button {
    background: none;
    appearance: none;
}

.header-search input {
    background: none;
    border: none;
    outline: none;
}

.header-search input::placeholder {
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
}

/* Иконка поиска на планшете — по умолчанию скрыта, видна < 1200px */
.header-search-btn {
    display: none !important;
    flex-shrink: 0;
}

/* Кнопки в хедере — ширина по контенту, высота 48px */
.header-top .btn:not(.btn-icon) {
    width: auto;
    flex: 0 0 auto;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.header-top .btn.btn-icon {
    flex: 0 0 auto;
}

/* Оранжевая кнопка телефона — только <1200 */
.header-phone.btn.btn-icon {
    background: #fb6411;
    width: 48px;
    height: 48px;
    display: none;
}
@media (max-width: 1199.98px) {
    .header-phone.btn.btn-icon {
        display: inline-flex;
    }
}
.header-phone.btn.btn-icon img {
    filter: brightness(0) invert(1);
}
/* Десктоп: кнопка чата на светлом фоне → тёмная иконка (как поиск).
   Мобильный (≤768): кнопка оранжевая → иконка остаётся белой (правило .header-chat img). */
@media (min-width: 769px) {
    .header-chat.btn-icon img {
        filter: brightness(0);
    }
}
@media (max-width: 1199.98px) {
    .header-wrapper .header-filter {
        display: none !important;
    }
    .header-search-btn {
        display: inline-flex !important;
    }
}

/* Модалка поиска — активируется при клике на иконку */
.search-modal {
    position: fixed;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.35);
}
.search-modal.active {
    opacity: 1;
    visibility: visible;
}
.search-modal__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    background: #fff;
    padding: 20px 24px 28px;
    max-height: 70vh;
    overflow-y: auto;
}
.search-modal__row {
    gap: 12px;
}
.search-modal__city {
    flex-shrink: 0;
    min-width: 160px;
    padding: 10px 16px;
    border-radius: 30px;
    background: #f3f3f3;
    position: relative;
}
.search-modal__input {
    border-radius: 30px;
    padding: 12px 24px;
    gap: 12px;
    background: #f3f3f3;
}
.search-modal__input input {
    outline: none;
    font-size: 16px;
}
.search-modal__close {
    font-size: 28px;
    line-height: 1;
    color: #999;
    padding: 0 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.search-modal__close:hover {
    color: #252525;
}
.search-modal__results {
    padding-top: 20px;
    gap: 12px;
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    /* Выше баннеров акций: слайдер двигает слайды через translate3d и рисует их
       в своём слое, из-за чего подсказки поиска уходили под баннер, как когда-то
       список городов. Тот же приём: большой слой плюс свой композитный слой. */
    z-index: 1200;
    transform: translate3d(0, 0, 0);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    overflow: hidden;
}

.search-dropdown.is-visible {
    opacity: 1;
    visibility: visible;
}

.search-dropdown__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.search-dropdown__item:hover {
    background: #f5f5f5;
}

.search-dropdown__item img {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.search-dropdown__noimg {
    width: 60px;
    height: 40px;
    background: #ececec;
    border-radius: 6px;
    flex-shrink: 0;
}

.search-dropdown__item span {
    font-size: 14px;
    flex-grow: 1;
}

.search-dropdown__item mark {
    background: none;
    font-weight: 700;
}

.search-dropdown__item .search-dropdown__price {
    font-weight: 600;
    font-size: 13px;
    color: #fb6411;
    white-space: nowrap;
    flex-grow: 0;
}

.search-dropdown__all {
    display: block;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #fb6411;
    text-decoration: none;
    border-top: 1px solid #ececec;
}

.search-dropdown__all:hover {
    background: #f5f5f5;
}

.search-dropdown__empty {
    padding: 16px;
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}

.header-actions {
    gap: 6px;
}

.header-notification {
    top: -2px;
    right: -2px;
    height: 20px;
    min-width: 20px;
    border-radius: 20px;
    padding: 0 5px;
    background-color: #fb6411;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-profile {
    border: 1px solid #FB6411;
    padding: 2px;
    border-radius: 50%;
    overflow: hidden;
}

.header-profile img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.header-profile--empty {
    background-color: #E8E8E8;
}

.header-up,
.header-action__text {
    display: none;
}

.header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

.header.is-sticky .header-container {
    padding: 24px;
    gap: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.header.is-sticky .header-wrapper,
.header.is-sticky .navbar {
    display: none;
}

.header.is-sticky .header-top {
    align-items: center;
}

.header.is-sticky .header-up {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 500;
}

.header.is-sticky .header-actions {
    gap: 30px;
}

.header.is-sticky .header-action {
    gap: 10px;
}

.header.is-sticky .header-action:nth-child(3) {
    order: 1;
}

.header.is-sticky .header-action:nth-child(2),
.header.is-sticky .header-action:nth-child(4) {
    order: 2;
}

.header.is-sticky .header-action__text {
    display: block;
}

.navbar-nav a {
    gap: 10px;
    font-weight: 500;
    font-size: 14px;
    color: #252525;
    text-decoration: none;
    transition: text-decoration 0.3s ease, color 0.3s ease;
}

.navbar-nav a:hover,
.navbar-nav a:focus,
.navbar-nav a:active,
.navbar-nav a.active {
    color: #fb6411;
    text-decoration: underline;
}

.catalog-wrapper {
    gap: 16px;
}
.catalog-content {
    flex: 1;
    min-width: 0;
}

/* ФИЛЬТР */

.filter-sidebar {
    flex-shrink: 0;
    border-radius: 30px;
    background-color: #fff;
    width: 260px;
    height: min-content;
}

.filter-section {
    padding: 16px 24px;
    border-bottom: 1px solid #ececec;
}

.filter-section:last-child {
    border-bottom: none;
}

.filter-section:first-child {
    padding-top: 24px;
}

.filter-categories {
    margin-top: 12px;
    gap: 6px;
}

.form-checks,
.form-check {
    gap: 12px;
}

.form-check {
    cursor: pointer;
    user-select: none;
}

.form-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-check__custom {
    width: 20px;
    height: 20px;
    border: 1px solid #252525;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.form-check__custom::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #ececec;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.form-check input:checked+.form-check__custom::after {
    background: #FB6411;
}

.filter-label {
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 14px;
}

.form-controls {
    gap: 8px;
}

.filter__form-control {
    padding: 10px 24px;
    border: none;
    border-radius: 20px;
    background: #ececec;
}

.filter__form-control::placeholder {
    font-weight: 500;
    color: #252525;
}


/* КАРТОЧКИ ТОВАРОВ */
.car-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    height: min-content;
}

/* Смена страницы каталога: старый список приглушается, новый проявляется */
.catalog-section {
    transition: opacity .18s ease;
}
.catalog-section.catalog-list-fading {
    opacity: .35;
}
.catalog-section.catalog-list-appearing {
    animation: catalogListIn .3s ease;
}
@keyframes catalogListIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


.car-card {
    display: flex;
    flex-direction: column;
}

.car-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.car-card .card-body .btn {
    margin-top: auto;
}

a.car-card,
.car-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.car-card__img {
    height: 198px;
    overflow: hidden;
    border-radius: 20px;
}

.card-img {
    height: 198px;
    border-radius: 20px;
    object-fit: cover;
}

.card-img--placeholder {
    height: 198px;
    background: #ececec;
    border-radius: 20px;
    object-fit: none;
    padding: 40px;
    opacity: 0.5;
}

.car-price,
.car-title {
    font-weight: 700;
    font-size: 20px;
}

.car-price {
    margin-bottom: 10px;
}

.car-details {
    margin: 12px 0;
    line-height: 120%;
}

.car-like {
    top: 16px;
    right: 24px;
    border: none;
}

.car-like:hover svg path,
.car-like:focus svg path,
.car-like.active svg path {
    fill: #fb6411;
}


.tab-buttons {
    background-color: #fff;
    border-radius: 30px;
    width: max-content;
    margin: 42px auto;
}

.tab-buttons .btn {
    padding: 14px 24px;
    display: flex;
    gap: 10px;
    white-space: nowrap;
}

.tab-buttons .custom-select {
    position: relative;
}

.tab-buttons .custom-select__list {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 10;
    min-width: 220px;
}

.tab-buttons .custom-select.is-open .custom-select__list {
    padding: 12px 24px;
}

.tab-buttons .custom-select__option {
    padding: 6px 0;
    font-size: 14px;
}

.catalog-search-info {
    gap: 8px;
    margin-bottom: 20px;
    font-size: 15px;
    color: #333;
}

.catalog-search-info a {
    color: #F26B23;
    text-decoration: none;
    margin-left: 8px;
}

.catalog-search-info a:hover {
    text-decoration: underline;
}


/* FOOTER */
footer {
    margin-top: 92px;
    padding: 85px 0 94px 0;
    border-radius: 30px 30px 0 0;
    background: #d9d9d9;
    font-weight: 400;
}

.footer-address {
    padding: 24px 0;
}

.footer-apps {
    gap: 10px;
}

.footer-apps img {
    width: 157px;
    height: 46px;
}

.footer-nav {
    gap: 12px;
}

.footer-nav a {
    font-weight: 400;
    color: #252525;
    text-decoration: none;
}

.footer-nav a:hover,
.footer-phones a:hover {
    text-decoration: underline;
}

.footer-phones {
    gap: 24px;
}

.footer-phones a {
    gap: 10px;
    font-weight: 400;
    font-size: 20px;
    line-height: 121%;
    color: #252525;
    text-decoration: none;
}

.footer-socials {
    margin-top: 24px;
    gap: 10px;
}

.social {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fb6411;
    overflow: hidden;
}

.social img {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 2;
}

.footer-insta::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 3;
}

.footer-bottom {
    margin-top: 44px;
    font-size: 12px;
}

.footer-data {
    display: flex;
    gap: 45px;
}

.footer-bottom a {
    font-weight: 400;
    text-decoration: none;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

.section {
    margin-bottom: 92px;
}

/* hero-стили вынесены в компонент promo_slider */

.brands-cards {
    grid-template-columns: repeat(6, 1fr);
    gap: 40px;
}

.brands-card {
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #D9D9D9;
    border-radius: 30px;
    aspect-ratio: 1/1;
}

.options-cards {
    gap: 40px;
}

.options-card {
    width: calc((100% - 40px) / 2);
    padding: 42px 40px;
    border-radius: 30px;
    height: 280px;
    background: linear-gradient(227deg, #d8d8d8 0%, #b2b2b2 100%);
}

.options-card__title {
    max-width: 300px;
    font-weight: 700;
    color: #fff;
}

.options-card .btn-primary {
    width: max-content;
}

/* Главная: блок "О компании" перед подвалом (local/include/home_about.php).
   Панели .about-section, пункты .bonus-info-*, картинка .how-it-works-img - готовые;
   здесь только размеры и отступы под главную. */
.home-about {
    margin-top: 40px;
}

.home-about__panel {
    margin-bottom: 24px;
}

.home-about .about-title {
    margin-bottom: 20px;
    font-size: 24px;
}

.home-about__grid {
    row-gap: 24px;
}

.home-about .policy-text p {
    font-size: 15px;
}

.home-about__item {
    gap: 16px;
}

.home-about .bonus-info-item > .bonus-info-icon {
    width: 32px;
    height: 32px;
}

.home-about__item .bonus-info-text h3 {
    margin-bottom: 4px;
    font-size: 16px;
}

.home-about .bonus-info-text p:last-child {
    margin-bottom: 0;
}

.home-about__list {
    margin-top: 16px;
    gap: 12px;
}

.home-about__list .bonus-info-text p {
    line-height: 32px;
}

.home-about__bonus-img {
    margin-bottom: 20px;
    width: 200px;
}

.home-about__bonus .bonus-info-text h3 {
    color: #fb6411;
    font-size: 20px;
}

.options-card__bg {
    width: clamp(78px, 12.083vw, 232px);
    height: clamp(65px, 7.292vw, 140px);
    right: 40px;
    bottom: 40px;
}

.options-card__bg-2 {
    width: clamp(92px, 11.25vw, 216px);
    height: clamp(78px, 10.938vw, 210px);
    right: 40px;
    bottom: 30px;
}

.options-card__bg-3 {
    width: clamp(100px, 15.625vw, 300px);
    height: clamp(80px, 14.583vw, 280px);
    right: 40px;
    bottom: 0;
}

.options-socials {
    gap: 14px;
}

.options-socials .social {
    width: 70px;
    height: 70px;
}



/* ПРОФИЛЬ */
.profile-wrapper {
    margin-top: 24px;
    margin-bottom: 83px;
    gap: 40px;
}

/* Контентная область ЛК — не даём выходить за границы */
.profile-wrapper .feedback {
    min-width: 0;
    overflow: hidden;
}

/* Колонка кабинета - flex-элемент: без min-width:0 её минимум равен содержимому, а лента
   слайдов "Вы смотрели" сама считается от ширины колонки - колонка росла без остановки */
.profile-lk {
    min-width: 0;
}

/* Карточка соцсетей одна на всю колонку: с высотой 280px, как у плиток главной, она пустая */
.profile-lk .options-card {
    height: auto;
    padding: 32px 40px;
    gap: 24px;
}
.profile-lk .options-card__title {
    max-width: none;
}

/* Детальная страница инструкций и справочника: контент в белой карточке */
.news-detail {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
}

.news-detail__img {
    margin-bottom: 24px;
    border-radius: 20px;
    overflow: hidden;
}

.news-detail__img img {
    width: 100%;
    height: auto;
    display: block;
}

.news-detail__content {
    line-height: 1.6;
}

/* Breadcrumb */
.breadcrumb-custom {
    margin-bottom: 24px;
    line-height: 1.6;
}

.breadcrumb-custom a {
    text-decoration: none;
    font-weight: 500;
}

/* Sidebar */
.sidebar-divider {
    border-bottom: 2px solid #ececec;
    margin: 16px 0;
}

.sidebar-title {
    margin: 16px 24px 12px 24px;
}

.bonus-card {
    margin: 12px;
    padding: 20px 15px;
    border-radius: 20px;
    border: 2px solid #fff;
    outline: 1px solid #FB6411;
    border-radius: 20px;
    width: 234px;
    height: 78px;
    background: linear-gradient(180deg, #a1a1a1 0%, #616161 100%);
    position: relative;
    overflow: hidden;
}

.bonus-title,
.bonus-amount {
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    background: linear-gradient(163deg, #fff 0%, #dfdfdf 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bonus-card__img {
    right: 16px;
    top: 5px;
    width: 58px;
    height: 74px;
}

.menu-item {
    background: transparent;
    border: none;
    padding: 16px 24px;
    border-bottom: 1px solid #ececec;
    width: 100%;
    text-align: left;
    transition: all 0.3s;
    cursor: pointer;
    font-weight: 500;
}

.menu-item:has(+ .sidebar-divider) {
    border-bottom: none;
}

.menu-item img {
    margin-left: 10px;
}

.menu-item:hover,
.menu-item:focus,
.menu-item.active,
.login-options .login-option.active {
    font-weight: 700;
    color: #FB6411;
}

.menu-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #fb6411;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.menu-btns {
    margin: 16px 12px;
    gap: 6px;
}

.menu-btn {
    border-radius: 20px;
    padding: 0 16px;
    border: 2px solid transparent;
    outline: 1px solid transparent;
    background: linear-gradient(90deg, #b1b1b1 0%, #d8d8d8 100%);
    background-clip: padding-box;
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 14px;
    color: #fff;
}

.menu-btn img {
    width: 52px;
    height: 52px;
}

.menu-btn,
.menu-btn:hover,
.menu-btn:focus,
.menu-btn.active {
    text-decoration: none;
}

.menu-btn:hover,
.menu-btn:focus,
.menu-btn.active {
    background: linear-gradient(220deg, #ffca43 0%, #fb6411 100%);
    background-clip: border-box;
    border: 2px solid #fff;
    outline: 1px solid #FB6411;
    color: #fff;
}


/* Profile Section */
.profile-header {
    margin-bottom: 42px;
}

.profile-info {
    gap: 24px;
}

.profile-info h2 {
    font-size: 24px;
}

.profile-avatar {
    padding: 4px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #FB6411;
}

.profile-avatar--empty {
    background: #f5f5f5;
    border-color: #e0e0e0;
}

.profile-avatar--empty img {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(85%) brightness(95%) contrast(90%);
}

/* ЗАГРУЗКА АВАТАРКИ (настройки) */
.profile-settings {
    max-width: 800px;
}

.profile-avatar-label {
    cursor: pointer;
    display: inline-block;
}

.profile-avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #FB6411;
    padding: 4px;
    position: relative;
    overflow: hidden;
}

.profile-avatar-preview > img:first-child {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.profile-avatar-preview--empty {
    background: #f5f5f5;
    overflow: visible;
}

.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.profile-avatar-overlay img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.profile-avatar-preview--empty .profile-avatar-overlay {
    opacity: 1;
    background: transparent;
}

.profile-avatar-preview--empty .profile-avatar-overlay img {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(85%) brightness(95%) contrast(90%);
}

.profile-avatar-label:hover .profile-avatar-overlay {
    opacity: 1;
}

.profile-settings .form-control::placeholder {
    font-weight: 400;
    color: #c0c0c0;
}

.profile-settings .form-control.form-control--empty-date {
    font-weight: 400;
    color: #c0c0c0;
}

.profile-save-btn {
    margin-top: 32px;
    padding: 21px 24px;
    font-size: 16px;
    line-height: normal;
}

.profile-error {
    padding: 12px 24px;
    background: #ffe0e0;
    border-radius: 12px;
    color: #c00;
    margin-bottom: 24px;
}

.profile-success {
    padding: 12px 24px;
    background: #e0ffe0;
    border-radius: 12px;
    color: #060;
    margin-bottom: 24px;
}

.verification-badge {
    margin-top: 16px;
    margin-bottom: 12px;
    gap: 12px;
    font-weight: 700;
    font-size: 16px;
}

.verification-badge__check {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #fb6411;
}

.profile-level {
    gap: 25px;
}

.profile-level__wrapper {
    gap: 12px;
}

.level-value {
    border-radius: 30px;
    padding: 10px 24px;
    background: #fff;
}

.level-link {
    font-weight: 500;
    font-size: 14px;
    color: #fb6411;
    transition: color 0.3s ease;
}

.level-link:hover {
    color: #252525;
}

/* Orders Section */
.orders-title {
    margin-bottom: 24px;
    gap: 18px;
}

/* Заголовок страницы стал H1 вместо H2. Браузер рисует H1 крупнее (2em против
   1.5em), поэтому размер задаём явно - вид страниц не меняется. Правило только
   для тега: класс .orders-title висит ещё и на ссылках в кабинете, им 1.5em
   не нужен. */
h1.orders-title {
    font-size: 1.5em;
}

.orders-title img {
    width: 42px;
    height: 20px;
}

.orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 40px;
}

.order-card {
    border-radius: 30px;
    padding: 24px;
    flex: 1;
}

.order-card .btn-primary {
    margin-top: auto;
}

.order-type {
    margin-bottom: 14px;
    font-weight: 700;
}

.order-car {
    margin-bottom: 14px;
    gap: 11px;
    border-radius: 30px;
    padding: 0 16px;
    background: #ececec;
    overflow: hidden;
}

.order-car-icon {
    width: 63px;
    height: 51px;
}

.order-car-info {
    font-weight: 700;
    font-size: 14px;
}

.order-car-info span {
    font-weight: 500;
}

.order-time {
    gap: 6px;
    margin-bottom: 14px;
    font-size: 12px;
}

.order-number {
    font-weight: 700;
    margin-bottom: 12px;
}

.order-status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 6px;
    font-size: 12px;
    align-self: flex-start;
    font-weight: 600;
    margin-bottom: 12px;
}

.order-status-badge--new { background: var(--status-new-bg); color: var(--status-new-color); }
.order-status-badge--booked { background: var(--status-booked-bg); color: var(--status-booked-color); }
.order-status-badge--handover { background: var(--status-handover-bg); color: var(--status-handover-color); }
.order-status-badge--rent { background: var(--status-rent-bg); color: var(--status-rent-color); }
.order-status-badge--completed { background: var(--status-completed-bg); color: var(--status-completed-color); }
.order-status-badge--finishing { background: var(--status-finishing-bg); color: var(--status-finishing-color); }
.order-status-badge--finished { background: var(--status-finished-bg); color: var(--status-finished-color); }
.order-status-badge--debt { background: var(--status-debt-bg); color: var(--status-debt-color); }
.order-status-badge--canceled { background: #2d2d2d; color: #fff; }


.viewed-swiper .swiper-wrapper,
.recommendation-swiper .swiper-wrapper {
    align-items: stretch;
}

.viewed-swiper .swiper-slide,
.recommendation-swiper .swiper-slide {
    height: auto;
}

.swiper-button-lock {
    display: none !important;
}

.order-bonuses {
    font-weight: 700;
    margin-bottom: 12px;
}

.order-status {
    margin-bottom: 14px;
    font-weight: 700;
    font-size: 14px;
}


/* БОНУСНАЯ КАРТА */
.bonus-card-title {
    margin-bottom: 42px;
}

.bonus-card__container {
    gap: 40px;
}

.bonus-card__wrapper {
    gap: 12px;
    max-width: 360px;
}

.bonus-card-large {
    position: relative;
    padding: 24px;
    height: 215px;
    border: 4px solid #fff;
    outline: 1px solid #FB6411;
    border-radius: 20px;
    background: linear-gradient(180deg, #a1a1a1 0%, #616161 100%);
    overflow: hidden;
}

.bonus-card-number {
    margin-bottom: 6px;
    line-height: 120%;
    background: linear-gradient(163deg, #fff 0%, #dfdfdf 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bonus-card-balance {
    font-size: 32px;
    line-height: 120%;
    background: linear-gradient(163deg, #fff 0%, #dfdfdf 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bonus-card-large__img {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 242px;
    height: 117px;
}

/* How it works section */
.how-it-works {
    padding: 10px 24px;
    border-radius: 20px;
    background: linear-gradient(225deg, #cecece 0%, #fff 100%);
    gap: 24px;
}

.how-it-works-text {
    gap: 12px;
    line-height: 120%;
}

.how-it-works-img {
    width: 111px;
}

/* Transaction history */
.transaction-history h3 {
    margin-bottom: 42px;
    font-size: 24px;
}

.transaction-info {
    gap: 6px;
}

.transaction-title {
    font-weight: 700;
}

.transaction-expires {
    font-size: 12px;
    color: #999;
}

.transaction-amount {
    font-size: 32px;
}

.transaction-amount.positive {
    color: #4CAF50;
}

.transaction-amount.negative {
    color: #F44336;
}

.transaction-history .btn-primary {
    margin-top: 24px;
    max-width: 260px;
}

.transaction-history hr {
    max-width: 260px;
}

/* МОИ ЗАКАЗЫ */

.orders-title {
    margin-bottom: 32px;
}

.orders-tabs {
    margin-bottom: 32px;
}

.tab {
    width: 200px;
    font-weight: 500;
    font-size: 20px;
    border: none;
    background: none;
}

.tab.active {
    padding-bottom: 11px;
    border-bottom: 2px solid #fb6411;
    font-weight: 700;
}

.orders-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 42px 0 32px;
    border-radius: 30px;
    background: linear-gradient(154deg, #fbbd1e 0%, #fc8c18 100%);
}

.notification-card {
    padding: 20px 24px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ececec;
    gap: 6px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.notification-card + .notification-card {
    margin-top: 12px;
}
.notification-card:hover {
    border-color: #fb6411;
    box-shadow: 0 4px 16px rgba(251, 100, 17, 0.08);
}
.notification-card--unread {
    border-color: #fb6411;
    background: #fff8f3;
}
.notification-card--unread .notification-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #fb6411;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.notification-date {
    font-size: 13px;
    color: #999;
}
.notification-title {
    font-weight: 700;
    font-size: 16px;
    color: #252525;
}
.notification-text {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

/* Список акций */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    align-items: start;
}
/* Карточка акции - цельный баннер: весь текст нарисован на картинке,
   поэтому карточка состоит только из неё. Пропорции 7:5 совпадают с форматом
   макетов (1680x1200), картинка ложится без кадрирования */
.promo-card {
    display: block;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    aspect-ratio: 7 / 5;
    transition: box-shadow 0.2s, transform 0.2s;
}
.promo-card:hover {
    box-shadow: 0 10px 30px rgba(251, 100, 17, 0.12);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}
.promo-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Бейдж выделенного текста - на детальной странице акции */
.promo-card__badge {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 20px;
    background: linear-gradient(154deg, #fbbd1e 0%, #fc8c18 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Детальная акции */
.promo-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.promo-detail__back {
    align-self: flex-start;
    color: #fb6411;
    font-weight: 500;
    text-decoration: none;
}
.promo-detail__back:hover {
    color: #fc8c18;
}
.promo-detail__card {
    border-radius: 30px;
}
.promo-detail__image {
    aspect-ratio: 16 / 6;
    overflow: hidden;
}
.promo-detail__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.promo-detail__body {
    padding: 32px 48px 40px;
    gap: 16px;
}
.promo-detail__title {
    font-size: 32px;
    font-weight: 700;
    color: #252525;
    margin: 0;
    line-height: 1.2;
}
.promo-detail__date {
    font-size: 14px;
    color: #999;
}
.promo-detail__text {
    font-size: 16px;
    color: #252525;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .promo-detail__body { padding: 24px; }
    .promo-detail__title { font-size: 24px; }
}

.orders-text {
    margin-bottom: 25px;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    color: #fff;
}

.orders-img {
    width: 430px;
    height: 236px;
    margin-bottom: 20px;
}

.reward-cards {
    gap: 20px;
    margin-bottom: 32px;
}

.reward-balance-card {
    background: linear-gradient(154deg, #fbbd1e 0%, #fc8c18 100%);
    border-radius: 20px;
    padding: 32px;
    color: #fff;
    flex: 1;
}

.reward-accruals-card {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    flex: 1;
}

.expense-toggle-icon {
    transition: transform 0.2s;
}

.expense-month-toggle.collapsed .expense-toggle-icon {
    transform: rotate(-90deg);
}

.reward-accruals-title {
    font-size: 16px;
    margin-bottom: 8px;
    color: #666;
}

.reward-accruals-sum {
    font-size: 32px;
    font-weight: 700;
}

.reward-accruals-count {
    font-size: 14px;
    color: #999;
    margin-top: 4px;
}

.reward-payments {
    margin-bottom: 32px;
}

.reward-section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.reward-payment-item {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.reward-payment-date {
    color: #666;
}

.reward-payment-amount {
    font-weight: 700;
}

.reward-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
}

.reward-table th {
    text-align: left;
    padding: 16px 24px;
    font-weight: 700;
    font-size: 14px;
    color: #666;
    border-bottom: 2px solid #ddd;
}

.reward-table td {
    padding: 16px 24px;
    border-bottom: 1px solid #ddd;
}

.reward-table tbody tr:hover {
    background: #f5f5f5;
}

.reward-table tfoot td {
    font-weight: 700;
    border-bottom: none;
    border-top: 2px solid #ddd;
}

.reward-chart {
    margin-top: 32px;
}

.reward-chart-header {
    margin-bottom: 16px;
}

.reward-chart-nav {
    gap: 12px;
}

.reward-chart-nav__year {
    font-weight: 700;
    font-size: 16px;
    min-width: 50px;
    text-align: center;
}

.reward-chart-nav__btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #ddd;
    cursor: default;
    padding: 0 4px;
    line-height: 1;
}

.reward-chart-nav__btn.active {
    color: #fb6411;
    cursor: pointer;
}

.reward-balance-title {
    font-size: 16px;
    margin-bottom: 8px;
}

.reward-balance-details {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reward-balance-row {
    font-size: 14px;
    opacity: 0.9;
}

.reward-balance-sum {
    font-size: 32px;
    font-weight: 700;
}

.cal-card__reward {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: #252525;
}

.cal-card__reward-sum {
    font-weight: 700;
    color: #fb6411;
}

.orders-content .btn {
    max-width: 240px;
    font-weight: 700;
}

.orders-bg {
    bottom: 0;
    left: 0;
    right: 0;
}

.orders-content::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 398px;
    width: 860px;
    background: url('./assets/images/line.svg') center / contain no-repeat;
    z-index: 1;
    pointer-events: none;
}

.orders-content>* {
    position: relative;
    z-index: 2;
}

.tab-wrapper {
    display: none;
}

.tab-wrapper.active {
    display: flex;
}

.orders-cards {
    gap: 12px;
}

.orders-card__img {
    width: 300px;
}

.orders-card__body {
    padding: 24px 60px;
}

.orders-card__title {
    margin-bottom: 16px;
    border-radius: 30px;
    padding: 12px;
    background: #ececec;
}

.orders-card__title span {
    font-weight: 700;
}

.orders-card .transaction-info {
    margin-bottom: 24px;
}

.orders-card .btn-primary {
    font-size: 14px;
    max-width: 240px;
}

.orders-card__actions .btn {
    flex: 1 1 0;
    max-width: none;
}

/* ЛИЧНЫЕ ДАННЫЕ */
.form-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    row-gap: 24px;
    column-gap: 40px;
}

.form-group {
    gap: 12px;
}

.form-group label {
    font-weight: 700;
}

.form-control {
    height: 48px;
    border-radius: 30px;
    border: 1px solid #ececec;
    padding: 12px 24px;
    background: #fff;
    font-weight: 400;
    outline: none;
}

textarea.form-control {
    height: auto;
}

.form-control::placeholder {
    font-weight: 500;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: inherit;
    transition: background-color 5000s ease-in-out 0s;
}

.documents {
    margin-top: 0;
}

.documents h3 {
    margin-bottom: 32px;
}

.document-item__wrapper,
.document-item {
    gap: 12px;
}

.document-item__action {
    width: fit-content;
}

.document-item__action.btn-primary:disabled {
    background: #bbb;
    color: #fff;
}

.document-status {
    width: 30px;
    height: 30px;
    background: #fb6411;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.document-status:disabled {
    background: #bbb;
}

.document-link {
    font-size: 14px;
    text-decoration: underline;
    color: #fb6411;
}

.document-link:hover {
    color: #252525;
}

.document-item__wrapper[data-status="verified"] .document-status {
    background-color: #fb6411;
    background-image: url("./assets/icons/check.svg");
}

.document-item__wrapper[data-status="pending"] .document-status {
    background-color: #fb6411;
}

.document-item__wrapper[data-status="not_uploaded"] .document-status,
.document-item__wrapper[data-status="disabled"] .document-status {
    background-color: #bbb;
}

.document-item__wrapper[data-status="rejected"] .document-status {
    background-color: #c00;
    background-image: url("./assets/icons/cross.svg");
}

.document-item__wrapper[data-status="verified"] .document-item__action {
    background: #bbb;
    cursor: not-allowed;
}

.documents-hint {
    margin-bottom: 24px;
    font-size: 13px;
    font-style: italic;
    color: #999;
}

.document-messages {
    margin-bottom: 16px;
}

.document-upload-error,
.document-upload-success {
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 6px;
    transition: opacity 0.3s;
}

.document-upload-error {
    color: #b71c1c;
    background: #ffebee;
}

.document-upload-success {
    color: #1b5e20;
    background: #e8f5e9;
}

.document-status-label {
    color: #e67e22;
}

.client-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.client-form-grid .form-group--wide {
    grid-column: 1 / -1;
}

.client-form-grid .form-group,
#personalFieldsForm .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.client-form-grid .form-control,
#personalFieldsForm .form-control {
    max-width: none;
    width: 100%;
}

#docFieldsForm .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#docFieldsForm .form-control {
    max-width: none;
    width: 100%;
}

#personalFieldsForm textarea.form-control,
#docFieldsForm textarea.form-control {
    max-width: none;
    width: 100%;
    min-height: 108px;
    resize: vertical;
    border-radius: 20px;
}

.client-form-address {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ddd;
}

.client-form-full {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .client-form-grid {
        grid-template-columns: 1fr;
    }
}

.client-verified-row {
    margin: 12px 0 0 44px;
    gap: 10px;
}

.client-verified-label {
    color: #fb6411;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    margin: 0;
}

.client-verified-hint {
    display: block;
    margin: 2px 0 0 80px;
    font-size: 12px;
    color: #999;
}

.client-actions {
    gap: 12px;
}

.client-action-btn.btn-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fb6411;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.client-action-btn.btn-icon:hover {
    background: #e55a0e;
}

.client-action-btn--disabled {
    opacity: 0.3;
    pointer-events: none;
}

.doc-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    margin-bottom: 16px;
    padding: 8px 20px 20px;
}

.tab-wrapper[data-content="documents"] .client-documents {
    margin-top: 32px;
}

.doc-validity {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
}

.doc-validity--ok {
    color: #1b5e20;
    background: #e8f5e9;
}

.doc-validity--warning {
    color: #e65100;
    background: #fff3e0;
}

.doc-validity--expired {
    color: #b71c1c;
    background: #ffebee;
}

.doc-save-message {
    margin-left: 16px;
    font-size: 14px;
}

.doc-save-message--ok {
    color: #1b5e20;
}

.doc-save-message--error {
    color: #b71c1c;
}

.doc-validity--unknown {
    color: #666;
    background: #f5f5f5;
}

.client-documents__title {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 600;
}

.client-doc-links {
    gap: 6px;
    padding-left: 42px;
}

.document-link--empty {
    font-size: 14px;
    color: #999;
}

.doc-check,
.check-toggle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #252525;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
}

.doc-check::after,
.check-toggle::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #ececec;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.doc-check--verify {
    background-image: url("./assets/icons/check-light.svg");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.doc-check--reject {
    background-image: url("./assets/icons/cross-light.svg");
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}

.doc-check:disabled {
    opacity: 0.5;
    cursor: wait;
}

.doc-check--verify.active {
    background-image: url("./assets/icons/check.svg");
    background-size: 12px;
}

.doc-check--verify.active::after {
    background: #fb6411;
}

.doc-check--reject.active {
    background-image: url("./assets/icons/cross.svg");
    background-size: 10px;
}

.doc-check--reject.active::after {
    background: #c00;
}

.doc-check:hover::after,
.check-toggle:hover::after {
    background: #fda97a;
}

.check-toggle.active::after {
    background: #fb6411;
}

.client-doc-row {
    gap: 8px;
    flex-wrap: wrap;
}

.doc-check--verify:not(.active):hover {
    background-color: #fda97a;
}

.doc-check--reject:not(.active):hover {
    background-color: #e88;
}

.document-upload-group {
    gap: 8px;
}

.document-upload-row {
    gap: 12px;
}

.document-upload-hint {
    font-size: 13px;
    color: #999;
}

/* Файлы клиента */
.client-files__messages {
    margin-bottom: 12px;
}

.client-files__messages.is-error,
.client-file-modal__messages.is-error {
    color: #c00;
}

.client-files__messages.is-success,
.client-file-modal__messages.is-success {
    color: #4caf50;
}

.client-files__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 1199.98px) {
    .client-files__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
    .client-files__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .client-files__list { grid-template-columns: 1fr; }
}

.client-files__list--narrow {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 575.98px) {
    .client-files__list--narrow { grid-template-columns: 1fr; }
}

.client-file-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 12px;
    position: relative;
}

.client-file-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 140px;
    border-radius: 12px;
    background: #f4f4f4;
    overflow: hidden;
    text-decoration: none;
}

.client-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-file-ext {
    font-weight: 700;
    font-size: 18px;
    color: #fb6411;
}

.client-file-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.client-file-name {
    font-size: 14px;
    font-weight: 600;
    color: #fb6411;
    text-decoration: none;
    word-break: break-word;
}

.client-file-name:hover {
    text-decoration: underline;
}

.client-file-comment {
    font-size: 12px;
    color: #777;
    word-break: break-word;
}

.client-file-date {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}

.client-file-delete {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #fb6411;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .1s ease;
}

.client-file-delete:hover {
    color: #ffffff;
    background: #fb6411;
}

.client-file-delete:active {
    transform: scale(.88);
}

.client-file-delete:disabled {
    opacity: .4;
    cursor: default;
}

/* Кнопка «Скачать оригинал» на карточке файла (кабинеты менеджеров) */
.client-file-download {
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    color: #fb6411;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .1s ease;
}

.client-file-download:hover {
    color: #ffffff;
    background: #fb6411;
}

.client-file-download:active {
    transform: scale(.88);
}

.client-files__empty {
    font-size: 14px;
    color: #999;
    margin-bottom: 16px;
}

.client-files__add {
    margin-top: 40px;
}

.client-files__hint {
    width: 240px;
    margin-top: 25px;
    margin-bottom: 0;
}

.moe-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fb6411;
    color: #fff;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s;
}

.moe-modal-close:hover {
    background: #e35a0e;
}

.client-file-modal__pick {
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.client-file-modal__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.client-file-modal__field label {
    font-weight: 700;
}

.client-file-modal__field .form-control {
    max-width: none;
    width: 100%;
}

.client-file-modal__field textarea.form-control {
    height: auto;
    min-height: 72px;
}

/* История заказов в карточке клиента - без панели поиска/фильтра и ссылки на самого клиента.
   Кнопка "Подробнее" (cal-card__action--detail) остаётся, остальные действия скрываем. */
.tab-wrapper[data-content="orders"] .cal-filter,
.tab-wrapper[data-content="orders"] .cal-card__client-link,
.tab-wrapper[data-content="orders"] .cal-card__action:not(.cal-card__action--detail) {
    display: none;
}

/* Документы паспорта/ВУ — карточки */
.doc-section .moe-section__summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #252525;
    user-select: none;
}

.doc-section .moe-section__toggle {
    margin-left: auto;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.doc-section.is-open .moe-section__toggle {
    background: #f0f1f3;
    color: #252525;
}

.doc-section.is-open .moe-section__toggle:hover {
    background: #e5e7eb;
}

.doc-section:not(.is-open) .moe-section__toggle {
    background: #fb6411;
    color: #fff;
}

.doc-section:not(.is-open) .moe-section__toggle:hover {
    background: #e35a0e;
}

.doc-section .moe-section__arrow {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transition: transform .2s ease;
}

.doc-section.is-open .moe-section__arrow {
    transform: rotate(-135deg);
    margin-top: 3px;
}

.doc-section:not(.is-open) .moe-section__arrow {
    transform: rotate(45deg);
    margin-bottom: 3px;
}

/* Потолок высоты у раскрытой секции не ставим. Он стоял в 4000px и на телефоне
   резал содержимое наглухо: сводка проверки в Репутации с делами и выводами
   выходит за него, а overflow: hidden не даёт даже прокрутить. Анимации
   раскрытия здесь нет, max-height работает выключателем - значение none
   ничего не ломает */
.doc-section .moe-section__body {
    overflow: hidden;
    max-height: none;
}

.doc-section:not(.is-open) .moe-section__body {
    max-height: 0;
}

.doc-section:not(.is-open) {
    padding-top: 0;
    padding-bottom: 0;
}

.doc-section:not(.is-open) .moe-section__summary {
    padding: 11px 0;
}

.document-status-field__label {
    gap: 6px;
}

.form-group--check-row {
    flex-direction: row;
    gap: 16px;
}

.form-group--check-row > .form-group {
    flex: 1;
}

.check-options {
    gap: 20px;
}

.moe-client-line {
    display: flex;
    gap: 16px;
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.moe-client-line__empty {
    color: rgba(29, 29, 29, 0.5);
    font-style: italic;
}

.moe-client-line .form-group {
    flex: 1;
}

.moe-client-line .form-control {
    max-width: none;
}

.profile-top-row {
    gap: 8px;
    align-items: stretch;
}

.profile-avatar-block {
    flex-shrink: 0;
}

.moe-client-line--col {
    flex-direction: column;
    flex: 1;
}

.moe-client-line--col .form-group {
    flex: 0 0 auto;
}

.moe-line-row {
    display: flex;
    gap: 16px;
}

.moe-client-line--col .moe-line-row .form-group {
    flex: 1;
}

@media (max-width: 768px) {
    .profile-top-row {
        flex-direction: column;
    }
    .profile-avatar-block {
        align-self: center;
    }
    .moe-client-line {
        flex-wrap: wrap;
    }
    .moe-client-line > .form-group {
        flex: 1 1 100%;
    }
    .moe-line-row {
        flex-direction: column;
        gap: 8px;
    }
}

.profile-back-link {
    margin-top: 32px;
    margin-bottom: 32px;
}

.profile-back-link .cooperation-title {
    margin-bottom: 0;
}

.profile-page-title {
    margin: 0 0 24px;
}

.form-label-icon {
    gap: 6px;
}

.document-status-field,
.doc-section .client-form-grid {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 8px;
}

.document-status-select {
    width: 100%;
    max-width: none;
}

.document-status-select .custom-select__trigger {
    max-width: none;
}

.doc-cards {
    margin-top: 16px;
}

.client-doc-card__upload {
    margin-top: auto;
}

.client-file-preview--empty {
    color: #bbb;
    font-size: 13px;
}

.client-file-name--empty {
    color: #999;
}

.client-files__stage-file {
    font-size: 13px;
    color: #999;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-file-modal__messages {
    margin-top: 8px;
}

/* НАСТРОЙКИ */
.settings-content {
    gap: 40px;
}

.settings-section {
    gap: 12px;
}

.settings-item {
    border-radius: 30px;
    padding: 16px 16px 16px 24px;
    width: 360px;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 50px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ECECEC;
    transition: .4s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.06), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
    transition: .4s;
    border-radius: 50%;
}

input:checked+.toggle-slider {
    background-color: #fb6411;
}

input:checked+.toggle-slider:before {
    transform: translateX(20px);
}

/* Login Section */
.login-section {
    border-radius: 30px;
    padding: 24px;
    gap: 12px;
}

.login-section h3 {
    font-weight: 500;
    color: rgba(37, 37, 37, 0.5);
}

.login-options,
.login-option-content {
    gap: 12px;
}

.delete-profile {
    margin-top: 32px;
    font-weight: 500;
    color: #fe4100;
    gap: 12px;
    transition: color 0.3s ease;
}

.delete-profile:hover {
    color: #252525;
}


/* ПОМОЩЬ */
.help-cards {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 40px;
}

.help-card {
    padding: 24px;
    gap: 23px;
    background: linear-gradient(90deg, #b1b1b1 0%, #d8d8d8 100%);
    border-radius: 30px;
    transition: all 0.3s ease;
}

.help-card:hover,
.help-card:focus,
.help-card.active {
    background: linear-gradient(90deg, #fb6411 0%, #fbbd1e 100%);
}

.help-card:first-child {
    background: linear-gradient(220deg, #ffca43 0%, #fb6411 100%);
    border: 2px solid #fff;
    outline: 1px solid #FB6411;
}

.help-card__img {
    width: 126px;
    height: 126px;
}

.help-card h3 {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}

.reviews .tab {
    width: 260px;
}

.tab-icon {
    display: none;
}

@media (max-width: 1199px) {
    .tab-icon {
        display: block;
        width: 28px;
        height: 28px;
        margin: 0 auto;
    }
    .tab-text {
        display: none;
    }
    .tab {
        width: auto !important;
        padding: 8px 16px;
    }
    .orders-tabs {
        gap: 16px;
    }
}

.reviews-stars {
    gap: 10px;
    margin: 16px 0;
}

.order-published {
    padding: 24px;
}

.order-published .orders-card__title {
    padding: 12px 50px;
}

.order-published__user {
    margin: 12px 0;
    gap: 12px;
}

.order-published__user-photo {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    border: 1px solid #FB6411;
    padding: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.order-published__user-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.order-published__user-photo--initial {
    background: #fb6411;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.order-published__user-data {
    font-size: 14px;
}

.order-published__user-data span {
    font-weight: 700;
}

.order-published__photos {
    margin-bottom: 24px;
    gap: 12px;
}

.order-published__photo {
    border-radius: 20px;
    width: 160px;
    height: 108px;
}

.favorites-swiper {
    width: 860px;
}

.favorites .swiper-button-prev {
    display: none !important;
}

/* КАРТОЧКА АВТО */
.auto .breadcrumb-custom {
    margin-top: 24px;
}

.auto-title {
    margin-bottom: 32px;
}

/* Название авто стало H1 - размер сохраняем прежний, как у H2. */
h1.auto-title {
    font-size: 1.5em;
}

/* Заголовок каталога стоит под списком, за ним SEO-текст посадочной. */
.catalog-title {
    margin: 48px 0 16px;
    font-size: 1.5em;
    font-weight: 700;
}

.auto-rating__wrapper {
    margin-bottom: 42px;
    gap: 20px;
}

.auto-rating {
    gap: 12px;
}

.auto-rating__badge,
.auto-rating__like.btn-white {
    gap: 10px;
}

.auto-rating__like.btn-white {
    padding: 11px 24px;
    font-weight: 700;
    width: fit-content;
}

.auto-rating__badge {
    padding: 9px 24px;
    border-radius: 30px;
}

.auto-details {
    margin-top: 92px;
    gap: 60px;
}

.auto-wrapper {
    gap: 40px;
}

.auto-gallery,
.auto-info {
    width: calc((100% - 40px) / 2);
}

.auto-main-image {
    border-radius: 20px;
    margin-bottom: 12px;
}

.auto-main-image--placeholder {
    height: 400px;
    background: #ececec;
    object-fit: none;
    padding: 80px;
    opacity: 0.5;
}

.auto-thumbnails {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.auto-thumbnail {
    border: 2px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: border 0.3s;
}

.auto-thumbnail:hover,
.auto-thumbnail:focus,
.auto-thumbnail.active {
    border: 2px solid #fb6411;
}

.auto-price {
    margin-bottom: 24px;
    font-weight: 700;
    font-size: 32px;
}

.auto-actions {
    gap: 12px;
    margin-bottom: 24px;
    max-width: 360px;
}

.auto-actions__btns {
    gap: 12px;
}

.promo-card.swiper-slide {
    padding: 8px 12px;
    border-radius: 20px;
    width: 160px;
    height: 117px;
    background: linear-gradient(180deg, #fbbd1e 0%, #fe4100 100%);
    color: #fff;
}

.promo-card .hero-slide__title {
    font-size: 12px;
}

.promo-card .hero-slide__title span {
    font-size: 16px;
}

.promo-card .hero-slide__subtitle {
    font-size: 40px;
}

.promo-card .hero-slide__text {
    font-size: 10px;
}

.promo-card .hero-slide__bg-2 {
    width: 80px;
    height: 74px;
}

.promo-card .hero-slide__bg-3 {
    width: 120px;
    height: 52px;
}

.promo-card .hero-slide__bg-4 {
    width: 99px;
    height: 83px;
    bottom: 0;
    right: 0;
}

.auto-specs {
    margin-top: 24px;
    grid-template-columns: max-content 1fr;
    row-gap: 9px;
    column-gap: 36px;
}

.auto-specs .spec-item {
    font-size: 14px;
}

.spec-item {
    display: contents;
}

.spec-label {
    color: rgba(37, 37, 37, 0.5);
    white-space: nowrap;
}

.specs-grid {
    max-width: 860px;
    grid-template-columns: repeat(2, 1fr);
}

.spec-group {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 28px;
    row-gap: 12px;
}

/* ЖАЛОБЫ И ПРЕДЛОЖЕНИЯ */
.feedback-form {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 40px;
}

.feedback-left {
    gap: 24px;
}

.file-btn {
    height: 48px;
    padding: 12px 20px;
    gap: 12px;
    border: 1px solid #ececec;
    border-radius: 30px;
    background: transparent;
    cursor: pointer;
}

.file-icon {
    width: 21px;
    height: 19px;
}

textarea {
    resize: none;
    border: 1px solid #ececec;
    background: #fff;
    border-radius: 30px;
    padding: 24px;
    min-height: 260px;
}

.feedback-right {
    gap: 24px;
}

.feedback-hint {
    max-width: 400px;
}

.feedback-submit.btn-primary {
    padding: 22px 40px;
    width: fit-content;
}

/* ВАКАНСИИ */
.vacancies {
    gap: 12px;
}

.vacancies-card {
    gap: 12px;
    border-radius: 30px;
    padding: 24px;
}

.vacancies-card__title {
    font-weight: 500;
    font-size: 24px;
}
.vacancies-card__body {
    max-height: 200px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
}
.vacancies-card__body.is-expanded {
    overflow: visible;
}
.vacancies-card__body:not(.is-expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
}
.vacancies-card__section {
    margin-bottom: 12px;
}
.vacancies-card__section > strong {
    color: #fb6411;
}
.vacancies-card__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.vacancies-card__actions .btn,
.vacancies-card__actions .vacancies-card__toggle {
    width: auto;
    flex: 0 0 auto;
}
@media (min-width: 992px) {
    .vacancies-card__actions {
        flex-wrap: nowrap;
    }
}

.vacancies .btn.btn-primary {
    max-width: 252px;
}

.vacancy-subtitle {
    margin-bottom: 20px;
    font-size: 20px;
}

.vacancy-form__text {
    margin-bottom: 32px;
    font-size: 14px;
}

.vacancy-form__inputs {
    margin-bottom: 12px;
    gap: 16px;
    flex-wrap: wrap;
}

.vacancy-form__inputs input {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 360px;
}

.vacancy-form {
    max-width: 100%;
    box-sizing: border-box;
}

.vacancy-form__inputs input::placeholder {
    font-weight: 500;
    color: rgba(37, 37, 37, 0.5);
}

.contract-fields {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.contract-fields .form-control {
    max-width: none;
    width: 100%;
}

.contract-fields select.form-control {
    font-weight: 500;
    color: rgba(37, 37, 37, 0.5);
}

@media (max-width: 991px) {
    .contract-fields {
        grid-template-columns: 1fr;
    }
}

.about-section {
    border-radius: 30px;
    padding: 24px;
}

.about-title {
    margin-bottom: 12px;
    font-weight: 700;
}

.about-list {
    margin-bottom: 24px;
    padding-left: 12px;
    list-style: none;
}

.about-list li {
    position: relative;
}

.about-list li::before {
    content: "•";
    margin-right: 8px;
    color: #252525;
}

.vacancy-textarea {
    margin-bottom: 24px;
    border: 1px solid #ececec;
    border-radius: 30px;
    padding: 16px 24px;
    width: 100%;
    min-height: 130px;
}

.vacancy-textarea::placeholder {
    font-weight: 500;
    color: rgba(37, 37, 37, 0.5);
}

.vacancy-form .btn.btn-primary,
.response-sending .btn.btn-primary {
    padding: 21px;
}

.response-sending__card {
    margin-bottom: 24px;
    border-radius: 30px;
    padding: 24px;
    gap: 12px;
}

.response-sending__img {
    width: 78px;
    height: 65px;
}

.response-sending__body {
    gap: 12px;
}

.response-sending__btns {
    gap: 40px;
}

/* СОТРУДНИЧЕСТВО */
.cooperation {
    gap: 60px;
}

.cooperation-wrapper {
    width: calc((100% - 60px) / 2);
    gap: 24px;
}

.cooperation h3 {
    font-weight: 500;
    font-size: 24px;
}

.cooperation-card {
    border-radius: 30px;
    padding: 24px;
    gap: 24px;
}

.cooperation-card img {
    width: 98px;
    height: 46px;
}

.cooperation-card .btn-primary,
.partners-card .btn-primary {
    padding: 22px;
    max-width: 280px;
}

.cooperation-title {
    margin-bottom: 32px;
    gap: 20px;
}

.partners {
    gap: 24px;
}

.partners-card {
    border-radius: 30px;
    padding: 24px 50px;
    gap: 24px;
}

.partners-card:nth-child(2) {
    padding: 24px 32px;
}

.partners-card__inputs {
    gap: 40px;
}

.partners-card__inputs .form-group {
    gap: 12px;
}

.partners-card__inputs input {
    border: 1px solid rgba(0, 0, 0, 0.5);
    width: 360px;
}

.partners-card__inputs input::placeholder {
    font-weight: 500;
    color: rgba(37, 37, 37, 0.5);
}

.partners-card__inputs span,
.partners-card__inputs a {
    font-size: 14px;
}

.providers-title {
    margin-bottom: 24px;
}

.providers-text {
    margin-bottom: 20px;
    font-size: 20px;
}

.providers-left {
    gap: 12px;
}

.providers-form input::placeholder {
    font-weight: 500;
    color: rgba(37, 37, 37, 0.5);
}

.providers-right {
    border-radius: 30px;
    padding: 24px;
}

.providers-hint {
    font-size: 20px;
}

.providers-right textarea {
    min-height: 175px;
}

.feedback-form .form-control {
    height: 48px;
    padding: 12px 24px;
}

.feedback-form .file-btn {
    height: 48px;
    padding: 12px 20px;
}

.feedback-form .feedback-submit.btn-primary {
    height: 48px;
    padding: 12px 40px;
}

.login-header .header-top {
    gap: 22px;
}

.login-header .header-btns {
    gap: 12px;
}

.login-bg {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #fbbd1e 0%, #fb6411 61.91%);
}

.car-left,
.car-right {
    position: absolute;
    bottom: 15%;
    width: 35%;
    max-width: 700px;
}

.car-left {
    left: 10%;
}

.car-right {
    right: 10%;
}

.login {
    margin-top: 20px;
    margin-bottom: 156px;
}

.login-card {
    border-radius: 40px;
    padding: 42px 60px;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.login-logo {
    width: 64px;
    height: auto;
    margin-bottom: 20px;
}

.login-title {
    margin-bottom: 24px;
    font-weight: 700;
}

.login-inputs {
    gap: 16px;
}

.login-inputs .form-control {
    border: 1px solid rgba(0, 0, 0, 0.5);
    max-width: 100%;
    height: 48px;
    padding: 0 24px;
}

.login-inputs .form-control::placeholder {
    font-weight: 500;
    color: rgba(37, 37, 37, 0.5);
}

.login-inputs .form-error {
    font-size: 13px;
    color: #dc3545;
    margin-top: 4px;
    min-height: 18px;
}

.login-inputs .form-control.is-invalid {
    border-color: #dc3545;
}

.login-btns {
    margin-top: 24px;
    gap: 16px;
    flex-direction: row !important;
}

.login-btns .btn {
    height: 48px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 370px) {
    .login-btns {
        flex-direction: column !important;
    }
    .login-btns .btn {
        width: 100%;
    }
}

.btn-register {
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.btn-register:hover {
    border: 1px solid #fb6411;
}

/* РЕГИСТРАЦИЯ */
.registration-section {
    padding-top: 62px;
}

.registration-errors {
    max-width: 960px;
    margin: 0 auto 24px;
    padding: 16px;
    border-radius: 12px;
    background: #f8d7da;
    color: #842029;
}

.registration-login-link {
    margin-top: 24px;
}

.registration-form {
    max-width: 960px;
    margin: 0 auto;
}

.registration-form__inputs {
    margin-bottom: 8px;
    gap: 24px 40px;
}

.registration-form__inputs .form-group {
    width: calc((100% - 40px) / 2);
}

.registration-form__inputs .form-control {
    max-width: 100%;
}

.registration-form .required {
    color: #fb6411;
}

.registration-form .form-error {
    font-size: 13px;
    color: #dc3545;
    margin-top: 4px;
    min-height: 18px;
}

.registration-form .form-control.is-invalid {
    border-color: #dc3545;
}

.registration-form .form-control.is-valid {
    border-color: #28a745;
}

.registration-form__inputs .form-control::placeholder {
    font-weight: 500;
    color: rgba(37, 37, 37, 0.5);
}

.upload-section {
    margin-bottom: 16px;
    padding: 42px 100px;
    border-radius: 40px;
    gap: 40px;
}

.upload-block {
    width: calc((100% - 40px) / 2);
}

.upload-title {
    margin-bottom: 12px;
}

.upload-description {
    margin-bottom: 24px;
}

.upload-items {
    gap: 12px;
}

.upload-item {
    gap: 40px;
}

.upload-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #ececec;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-circle:hover {
    background: #ececec;
}

.upload-circle.has-image {
    background-size: cover;
    background-position: center;
}

.upload-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    z-index: 2;
    width: 23px;
    height: 23px;
    background: #FB6411;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.upload-circle.has-image .upload-badge {
    display: none;
}

.upload-input {
    display: none;
}

.upload-notice {
    margin-bottom: 16px;
    font-size: 14px;
    opacity: 0.7;
}

.agreement-text {
    margin-bottom: 32px;
    font-size: 14px;
}

.btn-submit-registration.btn-primary {
    margin: 0 auto;
    padding: 22px;
    max-width: 360px;
}

.upload-skip-link {
    margin-top: 16px;
}

/* ПАРОЛЬ */
.password-title.h3 {
    margin: auto;
    margin-bottom: 32px;
    max-width: 420px;
}

.password-text {
    margin-bottom: 42px;
}

/* ЛК МЕНЕДЖЕР */
.manager .sidebar-title {
    margin: 24px 12px 18px 12px;
}

.manager .sidebar {
    padding-bottom: 24px;
}


.manager-header {
    margin-bottom: 32px;
}

.manager-menu.btn.btn-icon {
    background: #B1B1B1;
}

.verification-status {
    margin-bottom: 32px;
}

.verification-label {
    font-size: 24px;
}

.btn-blue {
    background: #006086;
    padding: 10px 52px;
    width: fit-content;
    font-weight: 500;
    color: #fff;
    transition: all 0.3s ease;
}

.btn-blue:hover {
    background: #176d87;
}

.manager-form {
    gap: 16px;
}

.form-label-client {
    padding-left: 24px;
    margin-bottom: 12px;
    display: block;
    font-weight: 500;
    font-size: 16px;
}

.form-control-client {
    border-radius: 30px;
    padding: 11px 24px;
    width: 100%;
    background: #fff;
    outline: none;
    border: none;
}

.form-control-client::placeholder,
.form-control-client:disabled,
.form-control-client[readonly] {
    color: rgba(0, 0, 0, 0.5);
}

textarea.form-control-client {
    min-height: 108px;
    resize: vertical;
}

.toggle-group {
    display: flex;
    gap: 60px;
}

.toggle-btn {
    padding: 10px 24px;
    background: #fff;
    font-weight: 500;
    transition: all 0.3s ease;
}

.toggle-btn:hover,
.toggle-btn.active {
    border: 1px solid #fb6411;
}

/* Search and Sort */
.search-sort-section {
    margin-bottom: 24px;
    gap: 12px;
}

.search-input {
    outline: none;
    border-radius: 30px;
    padding: 14px 24px;
    background: #fff;
}

.search-input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.search-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
}

.sort-box {
    gap: 12px;
    flex: 1;
}

.search-box {
    flex: 1;
}

.sort-btn.btn-icon {
    background: #fff;
}

.sort-select {
    flex: 1;
    border: none;
    outline: none;
    border-radius: 20px;
    padding: 14px 24px;
    width: 100%;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23252525' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    color: rgba(0, 0, 0, 0.5);
}

/* Client List */
.client-list {
    gap: 12px;
}

.client-item {
    padding: 4px 4px 4px 24px;
    border-radius: 30px;
}

.client-link {
    gap: 25px;
}

.client-id {
    font-weight: 700;
    min-width: 70px;
}

.client-name {
    flex: 1;
}

.client-phone {
    min-width: 150px;
}

.client-status {
    min-width: 200px;
}

.status-dropdown {
    border: 1px solid #fb6411;
    outline: none;
    border-radius: 20px;
    padding: 10px 24px;
    width: 100%;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23252525' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    transition: all 0.3s ease;
}

.status-dropdown.status-reject {
    border-color: #ec2c2b;
    background: #ec2c2b;
    color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
}

.client-status-label {
    border: 1px solid #fb6411;
    border-radius: 20px;
    padding: 10px 24px;
    max-width: 220px;
    width: 100%;
}

.client-status-label.status-reject {
    border-color: #ec2c2b;
    background: #ec2c2b;
    color: #fff;
}

.btn-edit {
    max-width: 200px;
}

.feedback {
    min-width: 0;
}

.contract-slide textarea {
    min-height: 450px;
    padding: 24px;
}

.form-btn {
    max-width: 260px;
}

.contract-form {
    gap: 24px;
}


.rental-form__section,
.schedule,
.calendar__section {
    margin-bottom: 42px;
}

.rental-title {
    margin-bottom: 20px;
    font-size: 24px;
}

.rental-form .form-group-client {
    margin-bottom: 12px;
}

.info-row {
    grid-template-columns: repeat(4, 1fr);
    border-radius: 30px;
    background: #fff;
}

.info-item {
    padding: 14px 24px;
    gap: 12px;
}

.info-label {
    color: rgba(29, 29, 29, 0.5);
}

.rental-dates {
    margin: 62px 0;
    gap: 60px;
}

/* МЕНЮ */
.manager-modal {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    z-index: 10;
}

.manager-modal.active {
    display: block;
}

.manager-modal__content {
    padding: 62px 32px;
    border-radius: 30px;
    width: 293px;
    background: #fb6411;
}

.manager-modal__close {
    top: 12px;
    right: 12px;
    padding: 15px;
    cursor: pointer;
}

.manager-modal__menu {
    gap: 12px;
}

.manager-modal__menu a {
    text-decoration: none;
}

/* Calendar */
.calendar {
    max-width: 100%;
}

.calendar-wrapper {
    margin-bottom: 16px;
    padding: 30px 35px;
    border-radius: 20px;
    max-width: 300px;
    flex-shrink: 0;
}

.calendar-legend {
    margin-bottom: 0;
}

.calendar-title {
    font-weight: 700;
}

.calendar-grid {
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day-header {
    width: 32px;
    height: 32px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day {
    width: 32px;
    height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
    gap: 2px;
}

.calendar-dots {
    display: flex;
    gap: 2px;
    line-height: 1;
}

.calendar-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: block;
}

.calendar-dots .dot-booked { background: #2da9e0; }
.calendar-dots .dot-rent { background: #1eb007; }
.calendar-dots .dot-stop { background: #ef4444; }
.calendar-dots .dot-last { background: #8b5cf6; }

.calendar-day.empty {
    font-weight: 500;
    color: #aaa;
}

.calendar-day.booked {
    color: #2da9e0;
}

.calendar-day.last {
    color: #8b5cf6;
}

.calendar-day.rent {
    color: #1eb007;
}

.calendar-day.stop {
    color: #ef4444;
}

.calendar-day.selected {
    background: #fb6411;
    color: #fff;
}

a.calendar-day {
    text-decoration: none;
    cursor: pointer;
}

a.calendar-day:hover {
    background: rgba(251, 100, 17, 0.15);
    border-radius: 4px;
}

.calendar-legend {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    justify-items: start;
}

.legend-item {
    gap: 12px;
    font-size: 14px;
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-dot.booked {
    background: #2da9e0;
}

.legend-dot.stop {
    background: #ef4444;
}

.legend-dot.last {
    background: #8b5cf6;
}

.legend-dot.rent {
    background: #1eb007;
}

/* Payment Section */
.payment-section {
    margin-top: 42px;
}

.payment-section .rental-title {
    margin-bottom: 12px;
}

.payment-section__wrapper {
    gap: 40px;
}

.btn-next {
    max-width: 260px;
}

/* Rental Sections */
.rental-data {
    gap: 42px;
}

.rental-section__title {
    margin-bottom: 32px;
    font-weight: 700;
    font-size: 16px;
    color: #1d1d1d;
}

.form-row-calendar {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px;
    row-gap: 16px;
}

.form-row-calendar + .form-row-calendar {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
}

.form-row-calendar>.form-group-client:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.client-date {
    min-width: 100px;
}

.client-time {
    min-width: 80px;
}

.status-dropdown.open-dialog__btn {
    background-image: none;
}

.btn-create.btn-primary {
    padding: 20px;
    max-width: 260px;
    border-radius: 50px;
}

.btn-new.btn-primary {
    max-width: 160px;
}

.verification-client__status {
    margin-top: 16px;
}

.verification-client__status .verification-label {
    font-size: 16px;
}

.btn-confirm.btn-primary {
    padding: 20px;
    max-width: 360px;
    border-radius: 50px;
}

/* Schedule */
.schedule-day {
    margin-bottom: 24px;
}

.schedule-day-title {
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 20px;
}

.schedule-item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 16px 0;
    border-bottom: 1px solid #252525;
    font-weight: 500;
    font-size: 14px;
}

.schedule-time {
    min-width: 160px;
    font-weight: 600;
    font-size: 16px;
}

.btn-show-all {
    max-width: 260px;
}

.schedule-day--hidden {
    display: none;
}

.schedule-empty {
    color: #999;
    font-size: 14px;
    padding: 16px 0;
}

.form-group-client {
    position: relative;
}

.car-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.car-search-item {
    display: block;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.car-search-item:hover {
    background: #f5f5f5;
    color: #333;
}


/* Планшет + мобильный <1200: единый layout — лого слева, всё остальное справа в одну линию.
   Используем display:contents, чтобы вложенные flex-контейнеры стали прозрачными. */
@media (max-width: 1199.98px) {
    .header-top {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start !important;
        gap: 12px;
        width: 100%;
    }
    .header-wrapper,
    .header-wrapper > .d-flex.flex-grow-1,
    .header-actions,
    .header-actions > div.d-flex,
    .header-actions .header-btns {
        display: contents !important;
    }
    .header-logo {
        flex-shrink: 0;
        flex-grow: 0;
    }
    /* Каталог растягивается на 992-1199, отжимая правые кнопки к правому краю */
    .header-catalog.btn.btn-primary {
        flex: 1 1 auto !important;
        min-width: 0;
        justify-content: center;
    }
    .header-wrapper .header-filter {
        display: none !important;
    }
    .header-search-btn {
        display: inline-flex !important;
    }
    .header-up {
        display: none !important;
    }
    /* Родные мобильные дубли — селект города блоком + text-buttons снизу */
    .header .custom-select.d-md-none,
    .header-btns__mobile {
        display: none !important;
    }
    /* Кнопка телефона — оранжевый круг, видна на планшете/мобильном */
    .header-phone.btn.btn-icon {
        display: inline-flex !important;
        background: #fb6411;
        margin: 0;
    }
    /* Скрытые элементы action-блока (избранное, колокольчик, профиль-текст) — остаются как есть */
    .header-action__text {
        display: none;
    }

    /* Единый размер всех кнопок в хедере: высота 48px, ширина по контенту */
    .header-top .btn {
        width: auto !important;
        flex: 0 0 auto;
    }
    .header-top .btn.btn-primary,
    .header-top .btn.btn-gray {
        height: 48px;
        min-height: 48px;
        padding: 0 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        line-height: 1;
    }
    .header-top .btn.btn-icon {
        height: 48px;
        width: 48px !important;
        padding: 0;
        flex-shrink: 0;
    }

    .header.is-sticky .header-top {
        flex-direction: row !important;
    }
}

/* На совсем узких экранах (<420) — разрешаем wrap: Каталог+иконка поиска уходят на новую строку */
@media (max-width: 419.98px) {
    .header-top {
        flex-wrap: wrap !important;
        row-gap: 12px;
    }
    .header-logo { order: 1; }
    .header-phone.btn.btn-icon { order: 2; margin-left: auto !important; }
    .header-top .btn.btn-gray { order: 3; }
    .header-top .btn.btn-primary.header-chat { order: 5; }
    .header-catalog.btn.btn-primary {
        order: 10;
        flex: 1 1 auto !important;
        margin-left: 0 !important;
    }
    .header-search-btn { order: 11; }
}


@media (max-width: 991px) {

    /* HEADER */
    .header.is-sticky .header-action__text {
        display: none;
    }

    /* FOOTER */
    .footer-top {
        margin-bottom: 44px;
    }

    .footer-bottom {
        gap: 12px;
    }

    /* MAIN PAGE */
    .brands-cards {
        gap: 20px;
    }

    .brands-card {
        border-radius: 20px;
    }

    .options-cards {
        gap: 20px;
    }

    .options-card {
        width: calc((100% - 20px) / 2);
    }

    .options-socials {
        gap: 10px;
    }

    .options-socials .social {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 767px) {

    /* HEADER */
    .header .container {
        padding: 0;
    }

    .header-container {
        padding: 16px;
        gap: 0;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07);
    }

    .header-top {
        gap: 0;
    }

    .header-wrapper {
        display: none;
    }

    .header-catalog.btn-primary {
        padding: 10px;
        margin: 0;
    }

    .header .custom-select {
        margin: 16px 0;
        border-radius: 30px;
        padding: 12px 24px;
        background: #ececec;
    }

    .header-btns__mobile {
        gap: 10px;
    }

    .header-actions {
        justify-content: space-between;
        width: 100%;
    }

    .header-phone.btn.btn-icon {
        background: #fb6411;
        margin-right: 6px;
    }

    .header-chat.btn.btn-primary {
        padding: 8px 16px;
        width: max-content;
    }

    .header.is-sticky .header-container {
        padding: 16px;
    }

    .header.is-sticky .header-top {
        flex-direction: column;
    }

    .header.is-sticky .header-wrapper,
    .header.is-sticky .navbar,
    .header.is-sticky .header-up {
        display: none;
    }

    .header.is-sticky .header-actions {
        gap: 30px;
    }

    .header.is-sticky .header-action:nth-child(2) {
        order: 0;
    }

    .header-action__wrapper {
        gap: 6px;
    }

    .catalog-wrapper {
        gap: 40px;
    }

    /* КАРТОЧКИ ТОВАРОВ */
    .car-details {
        margin: 17px 0;
    }

    /* FOOTER */
    footer {
        margin-top: 42px;
        padding: 42px 0 22px 0;
    }

    .footer-apps img {
        border-radius: 7px;
        width: 139px;
        height: 40px;
    }

    .footer-nav a {
        font-weight: 500;
    }

    .footer-phones {
        gap: 14px;
    }

    .footer-phones a {
        gap: 6px;
        font-weight: 600;
        font-size: 13px;
    }

    .footer-phones img {
        width: 15px;
        height: 15px;
    }

    .footer-socials {
        margin: 32px 0;
    }

    .footer-apps {
        margin-bottom: 32px;
    }

    .footer-bottom {
        margin-top: 52px;
    }

    .footer-data {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .footer-list__rent {
        margin-top: 32px;
        margin-bottom: 12px;
    }

    /* MAIN PAGE */
    .section {
        margin-bottom: 42px;
    }

    /* hero-responsive стили вынесены в компонент promo_slider */

    .recommendation-swiper .car-card,
    .viewed-swiper .car-card {
        max-width: 238px;
    }

    .brands-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .brands-card {
        padding: 18px;
        border-radius: 20px;
    }

    .options-cards {
        gap: 10px;
    }

    .options-card {
        width: 100%;
        padding: 24px;
        height: auto;
        background: linear-gradient(315deg, #d9d9d9 0%, #acacac 100%);
    }

    .options-card__title {
        max-width: 150px;
        font-size: 14px;
    }

    .options-card:nth-child(2) .options-card__title {
        max-width: 100%;
    }

    .options-card__bg {
        width: 78px;
        height: 65px;
        right: 14px;
        top: 0;
        bottom: 0;
    }

    .options-card__bg-2 {
        width: 92px;
        height: 78px;
        right: 14px;
        top: 0;
        bottom: 0;
    }

    .options-socials {
        margin-top: 16px;
    }

    /* МЕНЮ */
    .footer__mobile--menu {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 2;
        padding: 16px;
        width: 100%;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.25);
    }

    .footer__mobile--menu--button {
        gap: 6px;
        font-weight: 500;
        font-size: 12px;
        color: #252525;
    }

    .footer__mobile--menu--button img {
        height: 22px;
    }
}

/* Custom select в формах */
.form-group .custom-select {
    position: relative;
    max-width: 360px;
}

.form-group .custom-select__trigger {
    width: 100%;
    text-align: left;
    gap: 12px;
}

.form-group .custom-select__arrow {
    width: 12px;
    height: 12px;
    border-right: 2px solid #fb6411;
    border-bottom: 2px solid #fb6411;
    flex-shrink: 0;
}

.form-group .custom-select__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    border-radius: 20px;
    margin-top: 4px;
    padding: 0;
    box-shadow: none;
}

.form-group .custom-select.is-open .custom-select__list {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.form-group .custom-select__option {
    padding: 12px 24px;
    transition: background 0.2s;
    list-style: none;
}

.form-group .custom-select__option:hover {
    background: #f5f5f5;
}

.form-group .custom-select__option.active {
    font-weight: 700;
}

.custom-select__search {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    padding: 4px 12px 8px;
    list-style: none;
}

.custom-select__search .form-control {
    max-width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 16px;
    background: #f5f5f5;
}

.bonus-result {
    padding: 12px 24px;
    border-radius: 20px;
    margin-bottom: 16px;
    font-weight: 500;
}

.bonus-result--success {
    background: #e8f5e9;
    color: #2e7d32;
}

.bonus-result--error {
    background: #fbe9e7;
    color: #c62828;
}

/* Страница «Как работает бонусная карта?» */
.bonus-info-page {
    max-width: 700px;
}

/* Условия аренды: длинный текст на всю ширину контента, а не в колонку бонусов */
.bonus-info-page--wide {
    max-width: none;
}

.bonus-info-section {
    margin-bottom: 32px;
}

.bonus-info-item {
    gap: 20px;
    align-items: flex-start !important;
}

.bonus-info-item > img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.bonus-info-item > .bonus-info-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    color: #fb6411;
}

.bonus-info-text h3 {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 12px;
}

.bonus-info-text p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 8px;
}

.bonus-info-text ul {
    padding-left: 20px;
    margin-bottom: 0;
}

.bonus-info-text li {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 4px;
}

/* Скидки за длительную аренду — настройки менеджера */
.doc-section.discount-tiers {
    max-width: 720px;
    padding: 24px;
}
.discount-tiers__hint {
    line-height: 1.6;
    color: #333;
    margin-bottom: 24px;
}
.discount-tiers__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    cursor: pointer;
    font-weight: 500;
}
.discount-tiers__toggle input {
    width: 18px;
    height: 18px;
    accent-color: #fb6411;
    cursor: pointer;
}
.discount-tiers__row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.discount-tiers__row .form-control {
    width: 100px;
    flex: 0 0 auto;
    text-align: center;
}
.discount-tiers__label--sep {
    margin-left: 14px;
}
.discount-tiers__remove {
    background: none;
    border: 0;
    cursor: pointer;
    color: #252525;
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
}
.discount-tiers__remove:hover {
    color: #d33;
}
.discount-tiers__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}
.discount-tiers__msg {
    margin-top: 16px;
}
@media (max-width: 768px) {
    .discount-tiers__row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .discount-tiers__row .form-control {
        width: 84px;
    }
    .discount-tiers__label--sep {
        margin-left: 0;
    }
    .discount-tiers__actions {
        flex-wrap: wrap;
    }
}

/* Авто на ТО — карточки */
.auto-to-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.auto-to-card {
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
}
.auto-to-card__img {
    width: 280px;
    height: 200px;
    object-fit: cover;
    flex-shrink: 0;
}
.auto-to-card__body {
    padding: 24px;
    flex: 1;
}
.auto-to-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.auto-to-card__name {
    background: #f5f5f5;
    border-radius: 20px;
    padding: 10px 20px;
    display: inline-block;
    font-weight: 700;
}
.auto-to-card__dates {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.auto-to-card__details {
    border-top: 1px solid #f3f4f6;
    padding-top: 12px;
    margin-top: 12px;
}
.auto-to-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 16px;
}
.auto-to-card__stat-label {
    color: rgba(0,0,0,0.5);
    font-size: 13px;
}
.auto-to-card__comment-label,
.auto-to-card__docs-label {
    color: #fb6411;
    font-weight: 700;
}
.auto-to-card__comment-text {
    margin: 8px 0 0;
}
.auto-to-card__docs {
    margin-top: 16px;
}
.auto-to-card__doc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
    margin-top: 8px;
    font-weight: 400;
}
.auto-to-card__doc-icon {
    width: 16px;
}
.auto-to-card__actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.auto-to-card__collapse {
    max-height: 100px;
}
.auto-to-card__edit-btn {
    max-width: 200px;
    margin-top: 12px;
}

/* Менеджер — общие элементы форм */
.manager-subtitle {
    color: #fb6411;
    font-weight: 500;
}
.manager-block {
    margin-bottom: 42px;
}
.manager-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 8px;
}
.manager-info-item {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.manager-info-value {
    font-size: 14px;
}
.manager-form-control--full {
    max-width: none;
}
.manager-select {
    max-width: none;
    appearance: none;
    background-image: url('data:image/svg+xml,%3Csvg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L6 6L11 1" stroke="%23252525" stroke-width="2" stroke-linecap="round"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 24px center;
}
.manager-grid--single {
    grid-template-columns: 1fr;
    margin-top: 0;
}
.manager-file-group {
    gap: 0;
    margin-bottom: 24px;
}
.manager-file-group label {
    font-weight: 700;
}
.manager-file-hint {
    margin-bottom: 8px;
}
.manager-file-list {
    margin-bottom: 8px;
}
.manager-back-link {
    color: #252525;
    margin-top: 32px;
}
.manager-back-link img {
    margin-right: 8px;
}
.manager-form-group--flex1 {
    flex: 1;
}
.manager-form-control--date {
    width: 100%;
}
.manager-grid--no-mt {
    margin-top: 0;
}
.auto-to-card__actions .card-btn {
    flex: 1;
}


/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (v1-responsive sprint, 2026-05-24)
   Импорт из phoenix_mobile/template_styles.css
   Применяется только на экранах <= 768px
   ============================================================ */
@media (max-width: 768px) {
/* Базовые стили (reboot, grid, утилиты, btn, custom-select, card, accordion) подключаются из /local/assets/css/base.css */

h1 { font-size: 1.5rem; }

/* Кнопки модерации отзыва — в столбец на моб */
.review-actions { flex-direction: column; align-items: stretch; gap: 8px !important; margin-top: 0 !important; }
.review-actions .card-btn { width: 100%; }
.review-actions .review-collapse__toggle {
    background: transparent !important;
    border: none !important;
    color: #fb6411 !important;
    padding: 0 !important;
    width: auto !important;
    align-self: flex-start;
    text-decoration: underline;
    font-weight: 500;
    margin-bottom: 1rem;
}
.review-collapse { margin-top: 8px; }
.review-collapse__body { margin-bottom: 0; }
.review-photos { margin-top: 5px; }

.login-option__badge { color: #fb6411; font-weight: 700; margin-left: 6px; }

.manager-dashboard { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.manager-back-link { gap: 8px; margin-top: 16px; color: inherit; }
.manager-back-link img { width: 16px; height: 16px; flex-shrink: 0; }

/* Handover/Return — отступ под карточкой авто и единая высота кнопок 48 */
.manager-block { margin-bottom: 20px; }
.file-btn,
.doc-upload-btn,
.custom-select__trigger.form-control { min-height: 48px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex; align-items: center; }

/* Кастомный селект: открытый список — белый блок поверх контента */
.custom-select { position: relative; }
.custom-select__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    transition: none !important;
}
.custom-select.is-open .custom-select__list {
    background: #fff;
    border-radius: 20px;
    padding: 12px 24px;
    margin-top: 8px;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.custom-select__list .custom-select__search { list-style: none; padding: 0; margin-bottom: 8px; }
.custom-select__list .custom-select__search .form-control { background: #ececec !important; border: none; border-radius: 30px; }

/* Селект «Клиент» — список в потоке (раздвигает страницу), макс 6 пунктов + скролл */
#client-select .custom-select__list { position: static !important; }
#client-select.is-open .custom-select__list {
    max-height: calc(48px * 6 + 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#client-select .custom-select__option { padding: 10px 0; }

/* Глобально: кнопки и инпуты 48px на мобайле */
.btn.btn-primary,
.btn.btn-white,
.btn.btn-outline-primary,
.btn.btn-register { min-height: 48px !important; padding: 0 24px !important; display: inline-flex; align-items: center; justify-content: center; }
input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select.form-control { min-height: 48px !important; padding: 0 16px !important; }

/* ========== МОБИЛЬНЫЕ КОМПОНЕНТЫ ========== */

    /* Стили для мобильного приложения */

    /* Header */
    .header .container {
        padding: 0;
    }

    .header-container {
        padding: 16px;
        gap: 0;
        border-radius: 0 0 30px 30px;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07);
    }

    .header-top {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .header-row-1 {
        gap: 8px;
    }

    .header-row-2 {
        gap: 8px;
        max-height: 60px;
        opacity: 1;
        overflow: visible;
        transition: max-height 0.25s ease, opacity 0.25s ease;
    }
    .header-row-2.header-row-2--hidden {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
    }

    .header-actions {
        gap: 6px;
    }

    .header-notification {
        top: -2px;
        right: -2px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fb6411;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0;
    }

    .header-phone.btn.btn-icon {
        background: #fb6411;
        margin-right: 6px;
    }

    .header-chat.btn.btn-primary {
        padding: 8px 16px;
        width: max-content;
    }

    .header-btns {
        gap: 8px;
    }

    .header-mobile {
        padding: 20px 16px;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07);
    }

    /* Chat */
    .chat-container {
        padding: 16px;
        gap: 12px;
        height: calc(100vh - 140px);
        overflow-y: auto;
    }

    .message {
        gap: 10px;
        max-width: 85%;
    }

    .message.outgoing {
        align-self: flex-end;
        max-width: 85%;
    }

    .message-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: radial-gradient(50% 50% at 50% 50%, rgb(251, 189, 30) 61.547476053237915%, rgb(251, 189, 30) 100%);
    }

    .message-content {
        gap: 3px;
    }

    .message-bubble {
        padding: 8px 12px;
        border-radius: 7px;
        font-size: 12px;
    }

    .message-time {
        font-size: 12px;
        color: rgba(37, 37, 37, 0.3);
    }

    /* Input Area — в потоке (не fixed): иначе перекрывает контент под чатом и
       накладывается при скролле. Высоту блока .phoenix-chat задаёт JS. */
    .chat-input-area {
        flex-shrink: 0;
        padding: 12px 0 0;
        gap: 8px;
    }
    .chat-container { padding-bottom: 12px; }
    .profile-lk:has(.phoenix-chat) > .orders-title,
    .profile-lk:has(.chat-list) > .orders-title { display: none; }

    .chat-input {
        margin-left: 8px;
        padding: 13px 24px;
        outline: none;
        border-radius: 30px;
        /* 16px обязательно: iOS Safari зумит всю страницу при фокусе на input с font-size < 16px */
        font-size: 16px;
    }

    .send-btn {
        width: 42px;
        height: 42px;
    }

    .chat-attach-btn {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        align-self: center;
        border-radius: 50%;
        border: 1px solid #ececec;
        background: #fff;
    }

    /* Tabs */
    .tabs-container {
        padding-bottom: 32px;
        margin-right: -16px;
        gap: 10px;
        overflow-x: auto;
    }

    .tabs-container::-webkit-scrollbar {
        height: 0;
    }

    .tab-btn.btn-white {
        padding: 12px 24px;
        font-weight: 700;
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .tab-btn.active.btn-white,
    .tab-btn.active {
        background: #fb6411 !important;
        color: #fff !important;
        border-color: #fb6411 !important;
    }
    .tabs-container { padding-right: 16px; }

    /* Notifications List */
    .notifications-list {
        gap: 10px;
    }

    .notification-card {
        border-radius: 20px;
        padding: 16px 24px;
        gap: 6px;
    }

    .notification-title {
        font-weight: 700;
        font-size: 16px;
    }

    .main-mobile {
        padding-top: 24px;
        padding-bottom: 80px;
    }

    /* Image Slider */
    .auto-swiper.swiper {
        margin-top: 12px;
        position: relative;
    }

    .auto-swiper__img.swiper-slide {
        height: 225px;
    }

    .auto-swiper__img.swiper-slide img {
        border-radius: 20px;
    }

    .auto-pagination {
        bottom: 16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        display: flex;
        gap: 10px;
    }

    .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        background: transparent !important;
        border: 1px solid #fff;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .swiper-pagination-bullet-active {
        background: #fff !important;
    }

    /* Tags */
    .car-tags {
        margin: 6px 0;
        gap: 12px;
        border-radius: 20px;
        padding: 6px 12px;
    }

    .tag {
        border-radius: 20px;
        padding: 6px 10px;
        background: #ececec;
    }

    /* Info Card */
    .car-info {
        border-radius: 20px;
        padding: 24px 16px;
    }

    .car-price {
        margin-bottom: 16px;
        font-weight: 700;
        font-size: 20px;
    }

    .car-title {
        margin-bottom: 6px;
        font-weight: 500;
        font-size: 16px;
    }

    .car-subtitle {
        margin-bottom: 16px;
        font-size: 14px;
    }

    .car-rating {
        gap: 11px;
        margin-bottom: 16px;
        font-size: 14px;
    }

    .rating-score {
        gap: 6px;
        border-radius: 20px;
        padding: 6px 10px;
        background: #ececec;
    }

    .rating-star {
        color: #FB6411;
    }

    /* Buttons */
    .btn-primary-custom.btn-primary {
        margin-bottom: 12px;
        padding: 12px 5px;
    }

    .btn-actions {
        gap: 9px;
    }

    /* Настройки */
    .settings-content {
        gap: 24px;
    }

    .settings-section {
        gap: 10px;
    }

    .settings-item {
        border-radius: 20px;
        padding: 6px 6px 6px 24px;
        width: 100%;
    }

    /* Login Section */
    .login-section {
        border-radius: 0;
        padding: 24px 16px;
    }

    .login-section h3 {
        font-size: 14px;
    }

    .login-option-content img,
    .delete-profile img {
        width: 21px;
        height: 21px;
    }

    .delete-profile {
        margin-top: 24px;
    }


    /* Аренда */
    .rent-container {
        margin-top: 24px;
        gap: 24px;
    }

    .rent-wrapper {
        gap: 12px;
    }

    .rent-wrapper__title {
        font-family: var(--font-family);
        font-weight: 700;
        font-size: 16px;
        color: #252525;
    }

    .rent-card {
        border-radius: 20px;
        padding: 24px 16px;
        gap: 6px;
    }

    .rent-card__row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

    .rent-wrapper:first-child .rent-card__label {
        min-width: 180px;
    }

    .rent-card:nth-child(2) {
        gap: 12px;
    }

    .promo-card {
        border-radius: 20px;
        padding: 24px 16px;
        gap: 6px;
        font-size: 16px;
    }

    .description {
        border-radius: 20px;
        padding: 24px 16px;
        font-size: 16px;
    }

    .action-buttons {
        gap: 12px;
    }

    /* Каталог */

    .katalog-filter {
        padding-bottom: 24px;
        gap: 12px;
    }

    .katalog-filter .custom-select {
        border-radius: 30px;
        padding: 12px 24px;
    }

    .katalog-filter .custom-select__value {
        font-weight: 700;
        color: #fb6411;
    }

    .katalog-filter .custom-select__arrow {
        border-right: 1px solid #fb6411;
        border-bottom: 1px solid #fb6411;
    }

    .katalog-filter__btns {
        gap: 20px;
    }

    .katalog-filter__search {
        border-radius: 30px;
        padding: 10px 24px;
        gap: 10px;
    }

    .katalog-filter__search input {
        outline: none;
    }

    .katalog-sections {
        gap: 12px;
    }

    .login-option__items {
        gap: 6px;
    }

    .katalog-sections .login-section:nth-child(2) h3 {
        font-weight: 700;
        color: #252525;
    }

    /* Filter buttons */
    .filter-buttons {
        margin-right: -16px;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .filter-buttons::-webkit-scrollbar {
        display: none;
    }

    .filter-btn.btn-white {
        height: 42px;
        padding: 10px 24px;
        font-size: 14px;
        white-space: nowrap;
        gap: 10px;
        transition: all 0.3s ease;
    }

    .filter-btn.active svg {
        fill: #fff;
    }


    /* Car cards grid */
    .katalog-car {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .katalog-car__card {
        border-radius: 10px;
    }

    .katalog-car .auto-swiper__img.swiper-slide {
        height: 116px;
    }

    .katalog-car .auto-swiper__img.swiper-slide img {
        border-radius: 10px;
    }

    .like-btn {
        top: 12px;
        right: 12px;
    }

    .like-btn.active svg {
        fill: #FB6411;
    }

    .katalog-car .auto-pagination {
        bottom: 7px !important;
        gap: 0;
    }

    .katalog-car .swiper-pagination-bullet {
        width: 6px !important;
        height: 6px !important;
    }

    .katalog-car__info {
        padding: 12px;
        gap: 6px;
    }

    .katalog-car__price {
        font-weight: 700;
    }

    .katalog-car__feature {
        font-weight: 700;
    }

    .katalog-car__status {
        font-weight: 700;
        color: #fb6411;
    }

    .btn-rent {
        padding: 8px;
        font-weight: 700;
        font-size: 12px;
        color: #fff;
        background: #fb6411;
    }

    .katalog-car__card:has(.katalog-car__status.occupied) .btn-rent {
        background: #ececec;
        color: #252525;
    }

    .filter-tabs {
        border-radius: 30px;
        padding: 4px;
    }

    .filter-tab {
        border-radius: 30px;
        padding: 12px;
        background: #f3f3f3;
        font-weight: 500;
        font-size: 14px;
    }

    .filter-tab.active {
        background: #fb6411;
        color: #ffffff;
    }

    /* Sort modal */
    .sort-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
        align-items: flex-end;
        z-index: 1;
        width: 100%;
        margin: 0 auto;
    }

    .sort-modal.active {
        display: flex;
    }

    .sort-content {
        border-radius: 20px 20px 0 0;
        padding: 32px 16px;
        width: 100%;
        animation: slideUp 0.3s ease;
        height: 365px;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    .sort-header {
        margin-bottom: 20px;
    }

    .sort-options {
        gap: 12px;
    }

    .sort-option {
        gap: 12px;
    }

    .sort-option input[type="radio"],
    .sort-option input[type="checkbox"] {
        display: none;
    }

    .radio-custom,
    .checkbox-custom {
        width: 14px;
        height: 14px;
        border: 1px solid #252525;
        border-radius: 50%;
        position: relative;
        flex-shrink: 0;
    }

    .radio-custom::after,
    .checkbox-custom::after {
        content: '';
        position: absolute;
        inset: 1px;
        background: #ececec;
        border-radius: 50%;
        transition: background-color 0.2s ease;
    }

    .sort-option input[type="radio"]:checked+.radio-custom::after,
    .sort-option input[type="checkbox"]:checked+.checkbox-custom::after {
        background: #FB6411;
    }

    /* Search modal */
    .search-modal {
        position: fixed;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        z-index: 1000;
    }

    .search-modal.active {
        opacity: 1;
        visibility: visible;
    }

    .search-modal__content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        border-radius: 0 0 30px 30px;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07);
        background: #fff;
        padding: 16px 16px 24px 16px;
        max-height: 262px;
        overflow-y: auto;
    }

    .search-modal__input {
        border-radius: 30px;
        padding: 10px 24px;
        gap: 10px;
        background: #f3f3f3;
    }

    .search-modal__input input {
        outline: none;
    }

    .search-modal__results {
        padding-top: 22px;
        padding-bottom: 32px;
        gap: 12px;
    }

    .search-result-item {
        gap: 10px;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
    }

    .search-result-item img {
        width: 40px;
        height: 30px;
        object-fit: cover;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .search-dropdown__price {
        margin-left: auto;
        font-size: 12px;
        color: #fb6411;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .search-dropdown__all {
        display: block;
        text-align: center;
        padding: 12px 0 0;
        color: #fb6411;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    .search-dropdown__empty {
        padding: 12px 0;
        text-align: center;
        color: #999;
        font-size: 14px;
    }

    .header-btns__mobile {
        gap: 10px;
        margin-top: 12px;
    }

    .header-btns__mobile .btn {
        padding: 10px;
        font-size: 14px;
        font-weight: 700;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .header-btns__mobile .btn-primary {
        background: #fb6411;
        color: #fff;
        border: none;
    }

    .header-btns__mobile .btn-secondary {
        background: #ececec;
        color: #252525;
        border: none;
    }

    .header-btns__mobile .btn img {
        width: 16px;
        height: 16px;
    }

    /* Фильтры */
    .header-mobile:has(.reset-btn) {
        padding: 9px 16px;
    }

    .header-mobile__left {
        gap: 30px;
    }

    .reset-btn {
        padding: 12px 24px;
        max-width: 119px;
        background: #ececec;
        font-weight: 500;
        font-size: 14px;
    }

    .filter-body {
        margin-top: 24px;
        gap: 24px;
        padding-bottom: 165px;
    }

    .filter-section {
        padding: 0;
        border-bottom: 0;
    }

    .filter-section:last-child {
        border-bottom: 0;
    }

    .filter-section:first-child {
        padding-top: 0;
    }

    .filter-driver__toggles {
        gap: 10px;
    }

    .filter-driver__toggle.btn-white {
        padding: 13px;
        font-weight: 700;
        font-size: 14px;
    }

    .filter-section-title {
        margin-bottom: 12px;
        font-weight: 700;
        font-size: 16px;
    }

    .radio-group-inline {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .select-dropdown {
        border-radius: 20px;
        padding: 14px 24px;
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        outline: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23252525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 24px center;
    }

    .input-range {
        gap: 10px;
    }

    .input-range input {
        width: calc((100% - 10px) / 2);
        border-radius: 20px;
        padding: 13px 24px;
        background: #fff;
        border: none;
        outline: none;
    }

    .show-cars-btn {
        position: fixed;
        bottom: 100px;
        left: 16px;
        right: 16px;
        width: calc(100% - 32px);
        font-weight: 500;
    }

    /* Отзывы */
    .orders-tabs {
        margin-bottom: 24px;
        gap: 10px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .orders-tabs::-webkit-scrollbar { height: 0; }

    .tab {
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .orders-card {
        padding: 20px;
    }

    .orders-card__text {
        font-size: 12px;
    }

    .reviews-stars {
        gap: 7px;
    }

    .order-published {
        padding: 16px;
    }

    .order-published__photo {
        border-radius: 10px;
        width: 90px;
        height: 89px;
    }

    .feedback-modal {
        position: fixed;
        inset: 0;
        display: flex;
    }

    .feedback-modal.hidden {
        display: none;
    }

    .feedback-modal__content {
        padding: 16px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .feedback-modal__close {
        margin-bottom: 20px;
    }

    .feedback-modal__form {
        margin-top: 24px;
        gap: 24px;
    }

    .feedback-modal__form input,
    .feedback-modal__form .file-btn {
        border: 1px solid #ececec;
        border-radius: 20px;
        padding: 16px;
        max-width: 100%;
    }

    .feedback-modal__form span {
        font-size: 12px;
    }

    .feedback-modal__form input::placeholder {
        font-weight: 500;
    }

    /* Заказы */
    .orders-content {
        padding: 24px 24px 16px 24px;
        margin-bottom: 42px;
    }

    .orders-text {
        margin-bottom: 18px;
        font-size: 14px;
    }

    .orders-img {
        margin-bottom: 18px;
        width: 246px;
        height: 135px;
    }

    .orders-content .btn {
        padding: 12px;
    }

    .orders-content::before {
        height: 241px;
        width: 288px;
        background: url("./assets/images/line-mobile.svg") center / contain no-repeat;
    }

    .orders-card__header {
        gap: 12px;
    }

    .orders-card__header h3 {
        font-size: 16px;
    }

    .orders-card__header .transaction-date {
        font-size: 12px;
    }

    /* ПОМОЩЬ */
    .help-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .help-card {
        padding: 20px;
        gap: 12px;
        background: linear-gradient(90deg, #b1b1b1 0%, #d8d8d8 100%);
        border-radius: 20px;
        text-decoration: none !important;
        color: #fff;
    }

    .help-card:hover,
    .help-card.active {
        background: linear-gradient(90deg, #fb6411 0%, #fbbd1e 100%);
    }

    .help-card:first-child {
        background: linear-gradient(220deg, #ffca43 0%, #fb6411 100%);
        border: 2px solid #fff;
        outline: 1px solid #FB6411;
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 0;
    }

    .help-card__img {
        width: 64px;
        height: 64px;
    }

    .help-card:first-child h3 {
        font-weight: 700;
        font-size: 18px;
        line-height: 120%;
    }

    .help-card h3 {
        font-size: 18px;
        font-weight: 700;
    }

    /* Иконки на внутренних страницах помощи */
    .bonus-info-item img {
        width: 64px;
        height: 64px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .bonus-info-item .bonus-info-icon {
        width: 64px;
        height: 64px;
    }
    .bonus-info-item {
        gap: 16px;
    }
    .bonus-info-section {
        margin-bottom: 24px;
    }

    /* ЛИЧНЫЕ ДАННЫЕ */
    .form-grid {
        grid-template-columns: 1fr;
        margin-bottom: 24px;
    }

    .form-group label {
        font-size: 16px;
    }

    .form-control {
        max-width: 100%;
        border-radius: 20px;
        padding: 0 24px;
        height: 48px;
    }
    textarea.form-control { height: auto; padding: 12px 24px; }

    h3.login-section__title {
        font-weight: 700;
    }


    /* ПРОФИЛЬ */
    /* БОНУСНАЯ КАРТА */
    .main-mobile.bonus-mobile {
        padding-top: 16px;
    }

    .bonus-info {
        margin-bottom: 16px;
    }

    .bonus-mobile .btn-icon.sort-btn {
        background: #FB6411;
        width: 42px;
        height: 42px;
    }

    .bonus-mobile .bonus-card {
        padding: 18px 24px;
        gap: 27px;
    }

    .bonus-mobile .bonus-card__img {
        width: 239px;
        height: 115px;
    }

    .bonus-sum {
        margin: 24px 0;
        font-size: 16px;
    }

    .bonus-mobile .help-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bonus-mobile .help-card {
        border-radius: 30px;
        padding: 7px 24px;
        background: linear-gradient(90deg, #b1b1b1 0%, #d8d8d8 100%);
        outline: none;
        border: none;
    }

    .bonus-mobile .help-card h3 {
        font-weight: 700;
        font-size: 14px;
    }

    .bonus-mobile .help-card__img {
        width: 51px;
        height: 51px;
    }

    .bonus-modal__content {
        height: 250px;
    }

    .bonus-modal_items,
    .bonus-modal_item {
        gap: 12px;
    }

    .bonus-modal_item {
        max-width: 208px;
    }

    /* ВАКАНСИИ */

    .vacancies-card {
        gap: 6px;
        border-radius: 20px;
        padding: 16px 24px;
    }

    .vacancies-card__title {
        font-weight: 700;
        font-size: 16px;
    }

    .vacancies .btn.btn-primary {
        max-width: 100%;
    }

    .vacancy-subtitle {
        margin-bottom: 24px;
        font-size: 16px;
    }

    .vacancy-form__text {
        margin-bottom: 24px;
        font-size: 12px;
    }

    .vacancy-form__inputs {
        gap: 12px;
    }

    .vacancy-form__inputs input {
        width: 100%;
    }

    .about-section {
        border-radius: 20px;
        padding: 16px;
    }

    .about-list {
        margin-bottom: 12px;
    }

    .vacancy-textarea {
        margin-bottom: 16px;
        border-radius: 20px;
    }

    .vacancy-form .btn.btn-primary,
    .response-sending .btn.btn-primary {
        max-width: 100%;
        padding: 13px 21px;
    }

    .vacancy-form .file-btn {
        margin-bottom: 16px;
        padding: 14px;
        border-radius: 20px;
    }

    .response-sending__card {
        margin-bottom: 12px;
        border-radius: 20px;
        padding: 16px;
        background: #ececec;
    }

    .response-sending__body {
        gap: 7px;
    }

    .response-sending__btns {
        gap: 12px;
    }

    .response-sending__header {
        margin-bottom: 20px;
    }

    /* АКЦИИ */
    .promo-mobile .promo-cards {
        gap: 24px;
    }

    .promo-mobile .promo-card {
        padding: 24px 16px;
        width: 100%;
        height: 200px;
    }

    .promo-card__wrapper {
        gap: 6px;
    }

    .promo-mobile .promo-card .hero-slide__title {
        font-size: 20px;
    }

    .promo-mobile .promo-card .hero-slide__title span {
        font-size: 24px;
    }

    .promo-mobile .promo-card .hero-slide__subtitle {
        font-size: 64px;
    }

    .promo-mobile .promo-card .hero-slide__text {
        font-size: 16px;
    }

    .promo-mobile .hero-slide__bg {
        width: 274px;
        left: 50%;
        transform: translateX(-50%);
    }

    .promo-mobile .promo-card .hero-slide__bg-2 {
        width: 134px;
        height: 134px;
    }

    .promo-mobile .promo-card .hero-slide__bg-3 {
        width: 201px;
        height: 92px;
        right: 50%;
        transform: translateX(50%);
    }

    .promo-mobile .promo-card .hero-slide__bg-4 {
        width: 180px;
        height: 150px;
    }

    .promo-card__container {
        gap: 12px;
    }

    .promo-card__descr {
        padding: 16px;
        gap: 16px;
    }

    .promo-card__descr-text {
        font-size: 12px;
    }

    /* СОТРУДНИЧЕСТВО */
    .about-section .vacancy-form__text {
        margin-bottom: 12px;
    }

    .cooperation {
        gap: 24px;
    }

    .cooperation-wrapper {
        width: 100%;
        gap: 12px;
    }

    .cooperation h3 {
        font-weight: 700;
        font-size: 16px;
    }

    .cooperation-card {
        border-radius: 20px;
        padding: 16px 24px;
        gap: 16px;
    }

    .cooperation-card img {
        width: 60px;
        height: 28px;
    }

    .cooperation-card .btn-primary,
    .partners-card .btn-primary {
        height: 48px !important;
        padding: 0 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 100%;
    }

    .cooperation-title {
        margin-bottom: 28px;
        font-size: 16px;
    }

    .partners-card:nth-child(2) {
        padding: 16px 24px;
        gap: 16px;
        border-radius: 20px;
    }

    /* КАЛЕНДАРЬ БРОНИ */
    .header-mobile__title.dates {
        text-wrap: nowrap;
    }

    /* Calendar */
    .calendar-wrapper {
        padding: 10px 29px;
        margin-bottom: 16px;
    }

    .calendar-day.range-start,
    .calendar-day.range-end {
        background: #fb6411 !important;
        color: #fff !important;
        border-radius: 4px;
    }

    .calendar-day.in-range {
        background: rgba(251, 100, 17, 0.15) !important;
        color: #1d1d1d !important;
        border-radius: 4px;
    }

    .calendar-legend {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 16px !important;
        margin-top: 12px;
    }
    .calendar-legend .legend-item { flex-direction: row; }

    .rental-auto-card { width: fit-content !important; max-width: 100%; }

    .ac-selected { align-items: flex-start !important; }
    .ac-selected__time { align-items: flex-start !important; padding-top: 0; }
    .ac-selected__time svg { vertical-align: top; }
    .ac-selected__dates {
        position: relative;
        padding-left: 24px;
    }
    .ac-selected__dates::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 16px;
        height: 16px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fb6411' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>") no-repeat center / contain;
    }

    .status-message {
        margin-bottom: 25px;
    }

    /* Date inputs */
    .date-section {
        margin-bottom: 24px;
    }

    .date-label {
        margin-bottom: 12px;
        font-weight: 700;
        font-size: 15px;
    }

    .date-input-wrapper {
        border-radius: 20px;
        padding: 15px;
        gap: 8px;
    }

    .date-input {
        border: none;
        outline: none;
        font-size: 15px;
        background: transparent;
        flex: 1;
    }

    /* ДЕТАЛИ БРОНИ */
    .booking-card {
        padding: 24px;
        gap: 16px;
        margin-bottom: 24px;
    }

    .booking-card__info {
        background: #ececec;
        padding: 0 16px;
        gap: 11px;
    }

    .booking-card__img {
        width: 63px;
        height: 51px;
    }

    .booking-card__details {
        flex: 1;
    }

    .booking-card__rent {
        font-size: 16px;
    }

    .info-section {
        margin-bottom: 24px;
        gap: 12px;
    }

    .booking-card__disclaimer {
        margin-top: 12px;
        font-size: 12px;
        color: rgba(51, 51, 51, 0.5);
    }

    /* ЛК ПАРТНЕРА */
    .profile-mobile.lk .profile-info {
        padding: 5px;
        gap: 10px;
    }

    .profile-mobile.lk .profile-avatar {
        width: 32px;
        height: 32px;
    }

    /* МОИ АВТО */
    .filter-btn__search {
        width: fit-content;
    }

    .btn-dots.btn-icon {
        top: 6px;
        right: 6px;
        width: 22px;
        height: 22px;
    }

    .my-auto__btns {
        margin-top: 12px;
        gap: 12px;
    }

    .my-auto__info,
    .my-auto__info-item {
        gap: 12px;
    }

    .my-auto__info h3 {
        font-size: 16px;
    }

    .my-auto__info-card {
        padding: 16px 24px;
    }

    /* СТАТИСТИКА */
    .status-section,
    .calendar-section,
    .rewards-section,
    .expenses-section {
        margin-bottom: 24px;
    }

    .status-label {
        margin-bottom: 12px;
        font-weight: 700;
        font-size: 16px;
    }

    .status-buttons {
        margin-bottom: 12px;
        gap: 10px;
    }

    .status-btn.btn-white {
        padding: 12px;
    }

    .contract-info {
        margin-bottom: 6px;
        font-size: 16px;
    }

    .paid-info__text {
        font-size: 16px;
    }

    .paid-info__date {
        padding: 13px 30px;
    }

    .section-header {
        margin-bottom: 12px;
        cursor: pointer;
    }

    .section-toggle {
        transition: transform 0.3s;
    }

    .section-toggle.collapsed {
        transform: rotate(180deg);
    }

    .section-content {
        overflow: hidden;
        transition: max-height 0.3s ease;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .section-content.collapsed {
        max-height: 0;
    }

    .month-row {
        display: grid;
        grid-template-columns: 2fr 1fr;
        padding: 13px 16px;
    }

    .month-row.active {
        font-weight: 700;
    }

    .chart-container {
        height: 239px;
    }

    .chart-legend-bottom {
        margin-top: 12px;
        grid-template-columns: repeat(2, 1fr);
    }

    /* ВОЗНАГРАЖДЕНИЕ */
    .reward-list {
        gap: 6px;
    }

    .reward-month-header {
        padding: 13px 16px;
        background: #fb6411;
        color: #fff;
        transition: all 0.3s ease;
    }

    .reward-month.collapsed .reward-month-header {
        background: #fff;
        color: #252525;
    }

    .reward-month-info {
        gap: 10px;
    }

    .toggle-icon {
        transition: transform 0.3s ease;
    }

    .toggle-icon.rotated {
        transform: rotate(180deg);
    }

    .toggle-icon.rotated svg path {
        stroke: #fff;
    }

    .reward-details {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .reward-details.expanded {
        max-height: 2000px;
    }

    .reward-details__card {
        background: #fff;
        border-radius: 20px;
        padding: 24px 16px;
        margin-top: 12px;
        gap: 12px;
    }

    .reward-details__card:last-child {
        margin-bottom: 18px;
    }

    .reward-details__label {
        font-size: 16px;
    }

    .expenses .reward-details__row,
    .drop-off .reward-details__row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .employment .calendar {
        margin: 6px 0 24px 0;
    }

    .drop-off .reward-details__card:first-child {
        margin-top: 0;
    }

    /* ДОГОВОР */
    .agreement-items {
        gap: 6px;
        margin-bottom: 12px;
    }

    .agreement-item {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding: 4px 4px 4px 12px;
    }

    .agreement-item__left {
        gap: 17px;
    }

    .item-dropdown {
        padding: 7px 12px;
        border: none;
        outline: none;
        cursor: pointer;
    }

    .checklist-item {
        padding: 12px;
        gap: 6px;
    }

    .checklist-item__wrapper {
        gap: 17px;
    }

    .photo-button {
        padding: 14px;
        gap: 12px;
        border: 1px solid #ececec;
    }

    /* Dropdown Menu */
    .dropdown-menu {
        display: none;
        position: absolute;
        right: 0;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        margin-top: 6px;
        z-index: 2;
        min-width: 150px;
    }

    .dropdown-menu.active {
        display: block;
    }

    .dropdown-option {
        padding: 12px 16px;
    }

    .additional-services {
        margin: 6px 0;
    }

    .schedule .reward-details__row {
        grid-template-columns: 0.75fr 2fr;
        gap: 10px;
    }

    .schedule-title {
        font-weight: 600;
        font-size: 16px;
    }

    .schedule .reward-details__card {
        margin: 0;
    }

    .schedule-cards {
        margin-top: 12px;
        gap: 6px;
    }

    /* ВХОД */
    .header-simple {
        padding: 20px 16px 8px 16px;
    }

    .login-title {
        margin-bottom: 32px;
    }

    .required-note {
        margin-bottom: 12px;
        font-size: 12px;
    }

    .forgot-password {
        margin-bottom: 12px;
        font-size: 12px;
        justify-content: center !important;
        gap: 8px;
    }

    .btn-login {
        margin-bottom: 12px;
    }

    .btn-registration.btn-white {
        font-weight: 700;
    }

    body:has(.login-container) {
        min-height: 100vh;
        background-image:
            url("./assets/images/line-mobile-2.svg"),
            linear-gradient(180deg, #fbbd1e 0%, #fb6411 100%);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    /* ПРОВЕРОЧНЫЙ КОД */
    .main-mobile:has(.verification-container) {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 100px;
    }

    .verification-container {
        max-width: 400px;
    }

    .verification-message {
        margin: auto;
        margin-bottom: 32px;
        max-width: 254px;
        font-weight: 700;
        font-size: 16px;
    }

    .verification-password {
        margin-bottom: 16px;
    }

    .verification-reset {
        margin-bottom: 24px;
    }

    .code-inputs {
        gap: 6px;
        margin-bottom: 24px;
    }

    .code-input {
        width: 44px;
        height: 44px;
        font-size: 20px;
        outline: none;
    }

    /* ПРОФИЛЬ НА РАССМОТРЕНИИ */
    .profile-status {
        margin-top: 12px;
        margin-bottom: 24px;
        font-size: 16px;
    }

    /* РЕГИСТРАЦИЯ */
    .upload-section {
        margin-bottom: 16px;
        padding: 24px 16px;
        border-radius: 20px;
        gap: 24px;
        background: #f5f5f5;
    }

    .upload-block {
        width: 100%;
    }

    .upload-title {
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 8px;
    }

    .upload-description {
        margin-bottom: 16px;
        font-size: 14px;
    }

    .upload-items {
        gap: 12px;
    }

    .upload-item {
        gap: 24px;
        align-items: center;
    }

    .upload-circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #ececec;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        flex-shrink: 0;
    }

    .upload-circle:hover {
        background: #ececec;
    }

    .upload-badge {
        width: 24px;
        height: 24px;
        position: absolute;
        bottom: -2px;
        right: -2px;
        background: #fb6411;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .upload-badge svg,
    .upload-badge img {
        width: 12px;
        height: 12px;
        filter: brightness(0) invert(1);
    }

    .upload-label {
        font-weight: 500;
        font-size: 16px;
    }

    .upload-input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    .upload-text {
        font-size: 16px;
        font-weight: 500;
    }

    .upload-skip-link {
        margin-top: 16px;
        text-align: center;
    }

    .btn-submit-registration {
        height: 48px !important;
        padding: 0 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        margin-top: 24px;
    }

    .agreement-text {
        margin-top: 18px;
        font-size: 12px;
    }

    /* БРЕНДЫ */
    .section {
        margin-bottom: 21px;
    }

    .brands-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .brands-card {
        padding: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #D9D9D9;
        border-radius: 20px;
        aspect-ratio: 1/1;
    }

    /* Главная: блок "О компании" */
    .home-about {
        margin-top: 21px;
    }

    .home-about__panel {
        margin-bottom: 12px;
    }

    .home-about .about-title {
        margin-bottom: 16px;
        font-size: 20px;
    }

    .home-about__grid {
        row-gap: 12px;
    }

    .home-about .bonus-info-item > .bonus-info-icon {
        width: 28px;
        height: 28px;
    }

    .home-about__bonus-img {
        margin-bottom: 16px;
        width: 160px;
    }

    /* OPTIONS */
    .options-cards {
        gap: 12px;
    }

    .options-card {
        width: 100%;
        padding: 24px;
        border-radius: 20px;
        min-height: 140px;
        background: linear-gradient(227deg, #d8d8d8 0%, #b2b2b2 100%);
        text-decoration: none !important;
        overflow: hidden;
    }

    .options-card__title {
        max-width: 200px;
        font-weight: 700;
        font-size: 18px;
        color: #fff;
        text-decoration: none;
    }

    .options-card:nth-child(2) .options-card__title {
        max-width: 100%;
    }

    .options-card .btn-primary {
        display: inline-flex !important;
        width: max-content;
        height: 48px !important;
        padding: 0 24px !important;
        font-size: 14px;
    }

    .options-card__bg {
        width: 100px;
        height: 84px;
        right: 16px;
        bottom: 16px;
    }

    .options-card__bg-2 {
        width: 110px;
        height: 92px;
        right: 16px;
        bottom: 16px;
    }

    .options-socials {
        gap: 12px;
        margin-top: 16px;
    }

    .social {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #fb6411;
        overflow: hidden;
    }

    .social img {
        width: 24px;
        height: 24px;
    }

    .footer-insta {
        position: relative;
        overflow: visible;
    }
    .footer-insta::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 3;
    }

    /* КАЛЕНДАРЬ МЕНЕДЖЕРА */
    .manager-calendar .schedule-cards {
        margin-bottom: 24px;
    }

    .schedule-day--hidden {
        display: none;
    }

    .schedule-empty {
        color: #999;
        font-size: 14px;
        padding: 16px 0;
    }

    .rental-form__section {
        margin-bottom: 24px;
    }

    .rental-title {
        margin-bottom: 16px;
        font-size: 20px;
        font-weight: 700;
    }

    .form-group-client {
        position: relative;
    }

    .form-label-client {
        padding-left: 16px;
        margin-bottom: 8px;
        display: block;
        font-weight: 600;
        font-size: 14px;
    }

    .form-control-client {
        border-radius: 30px;
        padding: 10px 16px;
        width: 100%;
        background: #f0f0f0;
        font-size: 14px;
        border: none;
    }

    .form-control-client::placeholder,
    .form-control-client:disabled,
    .form-control-client[readonly] {
        color: rgba(0, 0, 0, 0.5);
    }

    .car-search-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 12px;
        max-height: 200px;
        overflow-y: auto;
        z-index: 100;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .car-search-item {
        display: block;
        padding: 10px 16px;
        color: #333;
        cursor: pointer;
        font-size: 14px;
    }

    .car-search-item:hover,
    .car-search-item:active {
        background: #f5f5f5;
    }

    .calendar-wrapper {
        border-radius: 16px;
    }

    .calendar-header {
        margin-bottom: 12px;
    }

    .calendar-title {
        font-weight: 700;
        font-size: 16px;
    }

    .calendar-nav {
        padding: 4px;
    }

    .calendar-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 0 !important;
    }

    .calendar-day-header {
        width: 32px;
        height: 32px;
        font-weight: 700;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .calendar-day {
        width: 32px;
        height: 38px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 13px;
        gap: 2px;
        cursor: pointer;
    }

    .calendar-dots {
        display: flex;
        gap: 2px;
        line-height: 1;
    }

    .calendar-dots i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        display: block;
    }

    .calendar-dots .dot-booked { background: #2da9e0; }
    .calendar-dots .dot-rent { background: #1eb007; }
    .calendar-dots .dot-stop { background: #ef4444; }
    .calendar-dots .dot-last { background: #8b5cf6; }

    .calendar-day.empty {
        font-weight: 500;
        color: #aaa;
    }

    .calendar-day.booked { color: #2da9e0; }
    .calendar-day.last { color: #8b5cf6; }
    .calendar-day.rent { color: #1eb007; }
    .calendar-day.stop { color: #ef4444; }

    .calendar-day.selected {
        background: #fb6411;
        color: #fff;
        border-radius: 4px;
    }

    .calendar-legend {
        gap: 8px;
        margin-top: 16px;
    }

    .legend-item {
        gap: 8px;
        font-size: 13px;
    }

    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .legend-dot.booked { background: #2da9e0; }
    .legend-dot.stop { background: #ef4444; }
    .legend-dot.last { background: #8b5cf6; }
    .legend-dot.rent { background: #1eb007; }

    .schedule-day-title {
        margin-bottom: 8px;
        font-weight: 700;
        font-size: 16px;
    }

    .rental-data {
        gap: 24px;
    }

    .rental-section__title {
        margin-bottom: 16px;
        font-weight: 700;
        font-size: 16px;
        color: #1d1d1d;
    }

    .form-row-calendar {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    .form-row-calendar + .form-row-calendar {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #e5e5e5;
    }

/* ========== ПОРТИРОВАННЫЕ СТИЛИ ИЗ V1 (мобильная адаптация) ========== */

/* --- HEADER дополнения --- */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
}

.header-logo {
    width: 100px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.header-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.header-up {
    display: none;
}

/* Отключаем десктопный sticky-режим на мобайле */
.header.is-sticky {
    position: sticky !important;
}
.header.is-sticky .header-container {
    padding: 16px !important;
    gap: 12px !important;
}
.header.is-sticky .header-row-1,
.header.is-sticky .header-actions {
    display: flex !important;
}
.header.is-sticky .header-up,
.header.is-sticky .header-action__text {
    display: none !important;
}

.header-profile {
    border: 1px solid #FB6411;
    padding: 2px;
    border-radius: 50%;
    overflow: hidden;
    width: 36px;
    height: 36px;
}

.header-profile img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.header-profile--empty {
    background-color: #E8E8E8;
}

/* Все кнопки хедера — 48px */
.header-row-1 .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-row-1 .header-actions .btn {
    width: auto !important;
    height: 48px !important;
    flex: 0 0 auto;
    padding: 0 !important;
}
.header-row-1 .header-actions .btn.btn-icon {
    width: 48px !important;
    height: 48px !important;
}
.header-row-1 .btn.btn-gray {
    padding: 0 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-chat {
    background: #fb6411 !important;
}
.header-chat img {
    width: 26px !important;
    height: 26px !important;
    filter: brightness(0) invert(1);
}

/* Каталог и поиск — строка 2, высота 48px */
.header-row-2 .btn.btn-primary {
    height: 48px !important;
    padding: 0 24px !important;
}
.header-row-2 .header-search-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
}

/* Кнопка поиска в header-row-2 */
.header-row-2 .header-search-btn {
    display: flex !important;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: #ececec;
    border-radius: 30px;
    padding: 0;
}
.header-row-2 .header-search-btn img {
    width: 20px;
    height: 20px;
}

.header-btns__mobile .btn {
    padding: 12px;
    font-size: 14px;
    border-radius: 30px;
}

/* --- Search modal (мобильный) --- */
.search-modal {
    position: fixed;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.35);
}
.search-modal.active {
    opacity: 1;
    visibility: visible;
}
.search-modal__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    background: #fff;
    padding: 45px 16px 16px;
    max-height: 80vh;
    overflow: visible;
}
.search-modal__row {
    gap: 8px;
    flex-wrap: wrap;
}
.search-modal__city {
    width: 100%;
    padding: 0 16px;
    height: 48px;
    border-radius: 30px;
    background: #f3f3f3;
    position: relative;
    display: flex;
    align-items: center;
}
.search-modal__city .custom-select__trigger {
    height: 48px;
    width: 100%;
    gap: 12px;
    font-weight: 700;
    color: #252525;
}
.search-modal__city .custom-select__arrow {
    width: 14px;
    height: 14px;
    border-right: 2px solid #FB6411;
    border-bottom: 2px solid #FB6411;
}
.search-modal__city {
    z-index: 11;
}
.search-modal__city .custom-select__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    margin: 4px 0 0;
    padding: 8px 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    z-index: 12;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
}
.search-modal__city.is-open .custom-select__list {
    opacity: 1;
    visibility: visible;
}
.search-modal__city .custom-select__option {
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
}
.search-modal__city .custom-select__option:hover {
    background: #f5f5f5;
}
.search-modal__city .custom-select__option.active {
    color: #fb6411;
    font-weight: 700;
}
.search-modal__input {
    width: 100%;
    border-radius: 30px;
    padding: 0 16px;
    height: 48px;
    gap: 8px;
    background: #f3f3f3;
}
.search-modal__input input {
    outline: none;
    font-size: 14px;
    height: 100%;
}
.search-modal__close {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 28px;
    line-height: 1;
    color: #999;
    padding: 0;
    cursor: pointer;
    z-index: 1;
}
.search-modal__results {
    gap: 8px;
    padding: 0 !important;
}
.search-modal__results:not(:has(*)) {
    display: none !important;
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    /* Выше баннеров акций: слайдер двигает слайды через translate3d и рисует их
       в своём слое, из-за чего подсказки поиска уходили под баннер, как когда-то
       список городов. Тот же приём: большой слой плюс свой композитный слой. */
    z-index: 1200;
    transform: translate3d(0, 0, 0);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    overflow: hidden;
}
.search-dropdown.is-visible {
    opacity: 1;
    visibility: visible;
}
.search-dropdown__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
}
.search-dropdown__item img {
    width: 80px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.search-dropdown__noimg {
    width: 80px;
    height: 52px;
    background: #ececec;
    border-radius: 6px;
    flex-shrink: 0;
}
.search-dropdown__item span {
    font-size: 13px;
    flex-grow: 1;
}
.search-dropdown__item mark {
    background: none;
    font-weight: 700;
}
.search-dropdown__item .search-dropdown__price {
    font-weight: 600;
    font-size: 12px;
    color: #fb6411;
    white-space: nowrap;
    flex-grow: 0;
}
.search-dropdown__all {
    display: block;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #fb6411;
    text-decoration: none;
    border-top: 1px solid #ececec;
}
.search-dropdown__empty {
    padding: 16px;
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}

/* --- Navbar (скрыта на мобайле, видна на планшете lg+) --- */
.navbar-nav a {
    gap: 10px;
    font-weight: 500;
    font-size: 14px;
    color: #252525;
    text-decoration: none;
}
.navbar-nav a:hover,
.navbar-nav a.active {
    color: #fb6411;
    text-decoration: underline;
}

/* --- PROFILE / ЛК --- */
.profile {
    padding-bottom: 40px;
}

.profile-wrapper {
    margin-top: 16px;
    margin-bottom: 0; /* десктопные 83px на телефоне давали пустоту перед подвалом */
    flex-direction: column;
    gap: 0;
}

.profile-wrapper .feedback {
    min-width: 0;
    overflow: hidden;
}

/* Секции со своим .container (например "Вы смотрели") внутри колонки кабинета получали
   двойные поля: внешний контейнер уже даёт 16px */
.profile-lk .section > .container {
    padding-left: 0;
    padding-right: 0;
}

/* --- Breadcrumb --- */
.breadcrumb-custom {
    margin-bottom: 16px;
    line-height: 1.6;
    font-size: 13px;
}
.breadcrumb-custom a {
    text-decoration: none;
    font-weight: 500;
    color: #fb6411;
}

/* --- Sidebar / Фильтр (мобильный — offcanvas слева) --- */
.filter-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    width: 85%;
    max-width: 320px;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}
.filter-sidebar * {
    max-width: 100%;
    box-sizing: border-box;
}
.filter-sidebar .filter__form-control {
    width: 100%;
}
.filter-sidebar:not(.lk-sidebar)::before {
    content: 'Фильтр';
    display: block;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 16px;
    text-align: center;
}
.filter-sidebar::-webkit-scrollbar {
    display: none;
}
.filter-sidebar--open {
    transform: translateX(0);
}
.filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.35);
}
.filter-overlay.active {
    display: block;
}
body.filter-open {
    overflow: hidden;
}
body.filter-open .header {
    z-index: 1 !important;
}
body.filter-open .footer__mobile--menu {
    z-index: 1 !important;
}

.sidebar-divider {
    border-bottom: 2px solid #ececec;
    margin: 16px 0;
}

.sidebar-title {
    margin: 16px 16px 12px 16px;
    font-size: 16px;
}

.menu-item {
    background: transparent;
    border: none;
    padding: 14px 16px;
    border-bottom: 1px solid #ececec;
    width: 100%;
    text-align: left;
    font-weight: 500;
    font-size: 14px;
}
.menu-item:hover,
.menu-item:focus,
.menu-item.active {
    font-weight: 700;
    color: #FB6411;
    text-decoration: none;
}

.menu-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #fb6411;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.menu-btns {
    margin: 16px 12px;
    gap: 6px;
}

.menu-btn {
    border-radius: 20px;
    padding: 0 16px;
    border: 2px solid transparent;
    outline: 1px solid transparent;
    background: linear-gradient(90deg, #b1b1b1 0%, #d8d8d8 100%);
    background-clip: padding-box;
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}
.menu-btn img {
    width: 48px;
    height: 48px;
}
.menu-btn:hover,
.menu-btn:focus,
.menu-btn.active {
    background: linear-gradient(220deg, #ffca43 0%, #fb6411 100%);
    background-clip: border-box;
    border: 2px solid #fff;
    outline: 1px solid #FB6411;
    color: #fff;
    text-decoration: none;
}

/* Bonus card (базовый стиль из верстки) */
.bonus-card {
    margin: 12px;
    padding: 20px 15px;
    border-radius: 20px;
    border: 2px solid #fff;
    outline: 1px solid #FB6411;
    width: 234px;
    height: 78px;
    background: linear-gradient(180deg, #a1a1a1 0%, #616161 100%);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
a.bonus-card,
a.bonus-card:hover,
a.bonus-card:focus { text-decoration: none; }
.bonus-title,
.bonus-amount {
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    background: linear-gradient(163deg, #fff 0%, #dfdfdf 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bonus-card__img {
    right: 16px;
    top: 5px;
    width: 58px;
    height: 74px;
}
/* Sidebar bonus card overrides */
.filter-sidebar .bonus-card {
    padding: 16px 12px;
    width: auto;
}

/* Logout link */
.filter-sidebar .menu-item:last-child {
    border-bottom: none;
}

/* --- Catalog wrapper (фильтр + контент) --- */
.catalog-wrapper {
    flex-direction: column;
    gap: 16px;
}
.catalog-content {
    flex: 1;
    min-width: 0;
}

/* --- News detail (инструкции) --- */
.news-detail__img {
    margin-bottom: 16px;
    border-radius: 16px;
    overflow: hidden;
}
.news-detail__img img {
    width: 100%;
    height: auto;
    display: block;
}
.news-detail__content {
    line-height: 1.6;
    font-size: 14px;
}

/* --- КАТАЛОГ (v1-классы) --- */

/* Табы сортировки/фильтра */
.tab-buttons {
    background-color: #fff;
    border-radius: 30px;
    width: 100%;
    margin: 0 0 16px;
    padding: 4px;
    overflow: visible;
}
.tab-buttons::-webkit-scrollbar {
    display: none;
}
.tab-buttons .btn {
    padding: 10px 20px;
    display: flex;
    gap: 8px;
    white-space: nowrap;
    font-size: 13px;
}
.tab-buttons .btn.btn-white {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.tab-buttons .btn.btn-white.active {
    background: #ececec !important;
    color: #252525 !important;
    font-weight: 700;
}
.catalog-sort-select {
    position: relative;
}
.catalog-sort-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: #ececec;
    border: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.catalog-sort-btn svg {
    flex-shrink: 0;
}
.catalog-sort-select .custom-select__list {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    min-width: 200px;
    margin-top: 4px;
    display: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 12px 16px !important;
}
.catalog-sort-select.is-open .custom-select__list {
    display: flex !important;
    flex-direction: column;
}
.tab-buttons .custom-select__option {
    padding: 6px 0;
    font-size: 14px;
}

.catalog-search-info {
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #333;
}
.catalog-search-info a {
    color: #F26B23;
    text-decoration: none;
}

.catalog-empty-city {
    padding: 16px;
    text-align: center;
    color: #666;
}

/* Карточки авто (grid) */
.car-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    height: min-content;
}

.car-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
}

.car-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 10px 12px 12px;
}

.car-card .card-body .btn.btn-primary {
    margin-top: auto;
    height: 48px !important;
    padding: 0 16px !important;
    font-size: 14px;
}

a.car-card,
.car-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card-img {
    height: 120px;
    border-radius: 16px 16px 0 0;
    object-fit: cover;
}

.card-img--placeholder {
    height: 120px;
    background: #ececec;
    border-radius: 16px 16px 0 0;
    object-fit: none;
    padding: 24px;
    opacity: 0.5;
}

.car-price {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

.car-title {
    font-weight: 700;
    font-size: 13px;
}

.car-details {
    margin: 6px 0;
    font-size: 11px;
    line-height: 120%;
    color: #666;
}

.car-like {
    top: 8px;
    right: 12px;
    border: none;
}
.car-like svg {
    width: 20px;
    height: 18px;
}
.car-like:hover svg path,
.car-like:focus svg path,
.car-like.active svg path {
    fill: #fb6411;
}

.badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 4px 8px;
    border-radius: 12px;
    background: #fb6411;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    height: fit-content !important;
}
.badge + .badge {
    top: 40px;
}

/* --- ФИЛЬТР (мобильный) --- */
.filter-section {
    padding: 12px 16px;
    border-bottom: 1px solid #ececec;
}
.filter-section:last-child {
    border-bottom: none;
}
.filter-section:first-child {
    padding-top: 16px;
}
.filter-categories {
    margin-top: 8px;
    gap: 6px;
}
.form-checks,
.form-check {
    gap: 10px;
}
.form-check {
    cursor: pointer;
    user-select: none;
}
.form-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.form-check__custom {
    width: 20px;
    height: 20px;
    border: 1px solid #252525;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}
.form-check__custom::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #ececec;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}
.form-check input:checked + .form-check__custom::after {
    background: #FB6411;
}
.filter-section--categories .form-check {
    gap: 0;
}
.filter-section--categories .form-check input:checked ~ .form-check__label {
    display: inline-block;
    width: auto;
    text-align: center;
    padding: 10px 15px;
    border-radius: 30px;
    background: #ececec;
    color: #444;
    font-weight: 700;
}
.filter-section--categories .form-check__custom {
    display: none;
}
.filter-label {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 14px;
}
.form-controls {
    gap: 8px;
}
.filter__form-control {
    padding: 10px 16px;
    border: none;
    border-radius: 20px;
    background: #ececec;
    width: 100%;
}
.filter__form-control::placeholder {
    font-weight: 500;
    color: #252525;
}

/* --- КАРТОЧКА АВТО (детальная) --- */
.auto .breadcrumb-custom {
    margin-top: 16px;
}
.auto-title,
h1.auto-title {
    margin-bottom: 16px;
    font-size: 20px;
}
.auto-rating__wrapper {
    margin-bottom: 20px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
}
.auto-rating {
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
}
.auto-rating__badge,
.auto-rating__like.btn-white {
    gap: 8px;
}
.auto-rating__like.btn-white {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.auto-rating__like.btn-white svg {
    width: 24px;
    height: 24px;
}
.auto-rating__badge {
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 13px;
}
.auto-details {
    margin-top: 24px;
    gap: 24px;
}
.auto-wrapper {
    flex-direction: column;
    gap: 20px;
}
.auto-gallery,
.auto-info {
    width: 100%;
}
.auto-main-image {
    border-radius: 16px;
    margin-bottom: 8px;
}
.auto-main-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}
.auto-gallery__main .swiper-button-prev,
.auto-gallery__main .swiper-button-next {
    display: none !important;
}
.auto-main-image--placeholder {
    height: 200px;
    background: #ececec;
    object-fit: none;
    padding: 40px;
    opacity: 0.5;
    border-radius: 16px;
}
.auto-thumbnails {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.auto-thumbnail {
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
}
.auto-thumbnail img {
    width: 100%;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
}
.auto-thumbnail:hover,
.auto-thumbnail.active {
    border: 2px solid #fb6411;
}
.auto-price {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 24px;
}
.auto-actions {
    gap: 8px;
    margin-bottom: 16px;
}
.auto-actions__btns {
    gap: 8px;
}
.auto-specs {
    margin-top: 16px;
    grid-template-columns: max-content 1fr;
    row-gap: 8px;
    column-gap: 16px;
    font-size: 13px;
}
.spec-item {
    display: contents;
}
.spec-label {
    color: rgba(37, 37, 37, 0.5);
    white-space: nowrap;
}
.specs-grid {
    grid-template-columns: 1fr;
    gap: 24px;
}
.spec-group {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 12px;
}

/* Промо-карточки на детальной */
.promo-card.swiper-slide {
    padding: 8px 10px;
    border-radius: 16px;
    width: 140px;
    height: 100px;
    background: linear-gradient(180deg, #fbbd1e 0%, #fe4100 100%);
    color: #fff;
}
.promo-card .hero-slide__title { font-size: 10px; }
.promo-card .hero-slide__title span { font-size: 14px; }
.promo-card .hero-slide__subtitle { font-size: 32px; }
.promo-card .hero-slide__text { font-size: 9px; }

/* --- ПРОФИЛЬ ЛК --- */
.profile-header {
    margin-bottom: 20px;
    flex-direction: column;
    align-items: stretch !important;
    gap: 20px;
}
.profile-header .orders-tabs {
    margin-left: 0 !important;
    width: 100%;
}
.documents .document-items { row-gap: 24px; }
.documents .document-items > .document-item__wrapper { flex: 0 0 100%; max-width: 100%; }
.documents > h3 { display: none; }
.documents .client-doc-row { gap: 12px; justify-content: space-between; min-height: 48px; }
.documents .client-doc-row .doc-upload-label { margin-left: auto; }
.profile-info {
    gap: 16px;
}
.profile-info h2 {
    font-size: 18px;
}
.profile-avatar {
    padding: 3px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid #FB6411;
}
.profile-avatar--empty {
    background: #f5f5f5;
    border-color: #e0e0e0;
}

/* Загрузка аватарки (настройки) */
.profile-settings {
    max-width: 100%;
}
.profile-avatar-upload {
}
.profile-avatar-label {
    cursor: pointer;
    display: inline-block;
}
.profile-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid #FB6411;
    padding: 3px;
    position: relative;
    overflow: hidden;
}
.profile-avatar-preview > img:first-child {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.profile-avatar-preview--empty {
    background: #f5f5f5;
    overflow: visible;
}
.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.profile-avatar-overlay img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}
.profile-avatar-preview--empty .profile-avatar-overlay {
    opacity: 1;
    background: transparent;
}
.profile-avatar-preview--empty .profile-avatar-overlay img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(85%) brightness(95%) contrast(90%);
}
.profile-settings .form-control::placeholder {
    font-weight: 400;
    color: #c0c0c0;
}
.profile-settings .form-control.form-control--empty-date {
    font-weight: 400;
    color: #c0c0c0;
}
.profile-save-btn {
    margin-top: 24px;
    padding: 14px 24px;
    font-size: 14px;
}
.profile-error {
    padding: 12px 16px;
    background: #ffe0e0;
    border-radius: 12px;
    color: #c00;
    margin-bottom: 16px;
}
.profile-success {
    padding: 12px 16px;
    background: #e0ffe0;
    border-radius: 12px;
    color: #060;
    margin-bottom: 16px;
}
.verification-badge {
    margin-top: 12px;
    margin-bottom: 8px;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
}
.verification-badge__check {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background: #fb6411;
}
.profile-level {
    gap: 16px;
    flex-direction: column;
}
.profile-level__wrapper {
    gap: 8px;
}
.level-value {
    border-radius: 30px;
    padding: 8px 16px;
    background: #fff;
}
.level-link {
    font-weight: 500;
    font-size: 14px;
    color: #fb6411;
}

/* --- ЗАКАЗЫ --- */
.orders-title,
h1.orders-title {
    margin-bottom: 20px;
    font-size: 1.5rem;
}
.catalog-title {
    margin: 32px 0 12px;
    font-size: 1.25rem;
}
.orders-title img {
    width: 32px;
    height: 16px;
}
.partner-cars-block {
    margin-top: 24px;
}
.orders-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
/* removed nested: @media (min-width: 576px) {
    .orders-grid {
        grid-template-columns: repeat(2, 1fr);
    }
} */
/* removed nested: @media (min-width: 992px) {
    .orders-grid {
        grid-template-columns: repeat(3, 1fr);
    }
} */
.order-card {
    border-radius: 20px;
    padding: 16px;
    flex: 1;
}
.order-card .btn-primary {
    margin-top: auto;
}
.order-type {
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 14px;
}
.order-car {
    margin-bottom: 10px;
    gap: 8px;
    border-radius: 20px;
    padding: 0 12px;
    background: #ececec;
    overflow: hidden;
}
.order-car-icon {
    width: 50px;
    height: 40px;
}
.order-car-info {
    font-weight: 700;
    font-size: 12px;
}
.order-car-info span {
    font-weight: 500;
}
.order-time {
    gap: 4px;
    margin-bottom: 10px;
    font-size: 11px;
}
.order-number {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
}
.order-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
}
.order-status-badge--new { background: var(--status-new-bg); color: var(--status-new-color); }
.order-status-badge--booked { background: var(--status-booked-bg); color: var(--status-booked-color); }
.order-status-badge--handover { background: var(--status-handover-bg); color: var(--status-handover-color); }
.order-status-badge--rent { background: var(--status-rent-bg); color: var(--status-rent-color); }
.order-status-badge--completed { background: var(--status-completed-bg); color: var(--status-completed-color); }
.order-status-badge--finishing { background: var(--status-finishing-bg); color: var(--status-finishing-color); }
.order-status-badge--finished { background: var(--status-finished-bg); color: var(--status-finished-color); }
.order-status-badge--debt { background: var(--status-debt-bg); color: var(--status-debt-color); }
.order-status-badge--canceled { background: #2d2d2d; color: #fff; }
.order-bonuses {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 13px;
}
.order-status {
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 13px;
}
.orders-tabs {
    margin-bottom: 20px;
}
.tab {
    font-weight: 500;
    font-size: 16px;
    border: none;
    background: none;
    padding: 8px 16px;
}
.tab.active {
    padding-bottom: 8px;
    border-bottom: 2px solid #fb6411;
    font-weight: 700;
}
.tab-wrapper {
    display: none;
}
.tab-wrapper.active {
    display: flex;
}
.orders-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0 20px;
    border-radius: 20px;
    background: linear-gradient(154deg, #fbbd1e 0%, #fc8c18 100%);
}
.orders-text {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    color: #fff;
}
.orders-img {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin-bottom: 16px;
}
.orders-content .btn {
    max-width: 200px;
    font-weight: 700;
}
.orders-cards {
    gap: 10px;
}

/* Swipers */
.recommendation {
    padding: 24px 0;
}
.recommendation h2,
.recommendation h1.recommendation-title {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}
.recommendation-swiper .swiper-slide {
    height: auto;
    width: 85%;
}

/* Ширину слайда акции задаёт стиль компонента promo_slider: там же лежат
   пропорции баннера, поэтому переопределять её здесь нельзя */
.recommendation-swiper .car-card {
    border-radius: 16px;
    overflow: hidden;
}
.recommendation-swiper .card-img {
    height: 160px;
}
.recommendation-swiper .card-img--placeholder {
    height: 160px;
}
.viewed-swiper .swiper-wrapper {
    align-items: stretch;
}
.viewed-swiper .swiper-slide {
    height: auto;
    width: 85%;
}
/* Слайды выходят за края экрана, как в макете: обёртка вытянута на поля контейнера с обеих
   сторон, а видимая область swiper получает те же 16px внутрь - первая карточка стоит с
   отступом, при листании карточки уходят под левый и правый край */
.viewed-slider {
    margin-left: -16px;
    margin-right: -16px;
}
.viewed-swiper {
    padding-left: 16px;
    padding-right: 16px;
}
.viewed-swiper .car-card {
    border-radius: 16px;
    overflow: hidden;
}
.viewed-swiper .card-img,
.viewed-swiper .card-img--placeholder {
    height: 160px;
}
.swiper-button-lock {
    display: none !important;
}

/* --- БОНУСНАЯ КАРТА --- */
.bonus-card-title {
    margin-bottom: 20px;
    font-size: 20px;
}
.bonus-card__container {
    flex-direction: column;
    gap: 24px;
}
.bonus-card__wrapper {
    gap: 12px;
    max-width: 100%;
}
.bonus-card-large {
    position: relative;
    padding: 20px;
    height: 160px;
    border: 3px solid #fff;
    outline: 1px solid #FB6411;
    border-radius: 20px;
    background: linear-gradient(180deg, #a1a1a1 0%, #616161 100%);
    overflow: hidden;
}
.bonus-card-number {
    margin-bottom: 4px;
    line-height: 120%;
    background: linear-gradient(163deg, #fff 0%, #dfdfdf 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bonus-card-balance {
    font-size: 24px;
    line-height: 120%;
    background: linear-gradient(163deg, #fff 0%, #dfdfdf 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bonus-card-large__img {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 160px;
    height: 80px;
}
.how-it-works {
    padding: 10px 16px;
    border-radius: 16px;
    background: linear-gradient(225deg, #cecece 0%, #fff 100%);
    gap: 16px;
}
.how-it-works-text {
    gap: 8px;
    line-height: 120%;
    font-size: 14px;
}
.how-it-works-img {
    width: 80px;
}

/* Транзакции */
.transaction-history h3 {
    margin-bottom: 20px;
    font-size: 18px;
}
.transaction-info {
    gap: 4px;
}
.transaction-title {
    font-weight: 700;
    font-size: 14px;
}
.transaction-expires {
    font-size: 11px;
    color: #999;
}
.transaction-amount {
    font-size: 24px;
}
.transaction-amount.positive { color: #4CAF50; }
.transaction-amount.negative { color: #F44336; }
.transaction-history .btn-primary {
    margin-top: 16px;
    max-width: 100%;
}
.transaction-history hr {
    max-width: 100%;
}

/* --- УВЕДОМЛЕНИЯ --- */
.notification-card {
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #ececec;
    gap: 4px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.notification-card + .notification-card {
    margin-top: 10px;
}
.notification-card--unread {
    border-color: #fb6411;
    background: #fff8f3;
}
.notification-card--unread .notification-title::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #fb6411;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.notification-date {
    font-size: 12px;
    color: #999;
}
.notification-title {
    font-weight: 700;
    font-size: 14px;
    color: #252525;
}
.notification-text {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}
.notifications-read-all {
    font-size: 14px;
    color: #fb6411;
    text-decoration: none;
}

/* --- АКЦИИ список --- */
.promo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.promo-card {
    border-radius: 20px;
}
/* Бейдж выделенного текста остался на детальной странице акции */
.promo-card__badge {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 20px;
    background: linear-gradient(154deg, #fbbd1e 0%, #fc8c18 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* Детальная акции */
.promo-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.promo-detail__back {
    align-self: flex-start;
    color: #fb6411;
    font-weight: 500;
    text-decoration: none;
}
.promo-detail__card {
    border-radius: 20px;
}
.promo-detail__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.promo-detail__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.promo-detail__body {
    padding: 20px 16px;
    gap: 12px;
}
.promo-detail__title {
    font-size: 22px;
    font-weight: 700;
    color: #252525;
    margin: 0;
    line-height: 1.2;
}
.promo-detail__date {
    font-size: 13px;
    color: #999;
}
.promo-detail__text {
    font-size: 14px;
    color: #252525;
    line-height: 1.6;
}

/* --- Пагинация --- */
.bx-pagination {
    margin: 20px 0;
}
.bx-pagination-container {
    padding: 16px;
    background: #f5f5f5;
    border-radius: 20px;
}
.bx-pagination-container ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.bx-pagination .bx-pagination-container ul li a,
.bx-pagination .bx-pagination-container ul li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #252525 !important;
    background: #fff !important;
    border: none !important;
}
.bx-pagination .bx-pagination-container ul li.bx-pag-prev a,
.bx-pagination .bx-pagination-container ul li.bx-pag-prev span,
.bx-pagination .bx-pagination-container ul li.bx-pag-next a,
.bx-pagination .bx-pagination-container ul li.bx-pag-next span {
    border-radius: 30px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
}
.bx-pagination .bx-pagination-container ul li.bx-pag-prev span {
    color: #ccc !important;
}
.bx-pagination-container div[style] {
    display: none;
}

/* --- ЛИЧНЫЕ ДАННЫЕ (мобильная адаптация) --- */
.form-grid {
    grid-template-columns: 1fr;
    row-gap: 16px;
}
.form-group {
    gap: 8px;
}
.form-group label {
    font-weight: 700;
    font-size: 14px;
}
.form-control {
    border-radius: 30px;
    padding: 14px 16px;
    max-width: 100%;
    background: #fff;
    font-weight: 400;
    outline: none;
    font-size: 14px;
}
.form-control::placeholder {
    font-weight: 500;
}
.form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.documents { margin-top: 0; }
.documents h3 { margin-bottom: 20px; }
.document-item__wrapper,
.document-item { gap: 10px; }
.document-item__action { width: fit-content; }
.document-item__action.btn-primary:disabled { background: #bbb; color: #fff; }
.document-status {
    width: 28px;
    height: 28px;
    background: #fb6411;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
}
.document-status:disabled { background: #bbb; }
.document-link { font-size: 13px; text-decoration: underline; color: #fb6411; }
.document-item__wrapper[data-status="verified"] .document-status { background-color: #fb6411; background-image: url("./assets/icons/check.svg"); }
.document-item__wrapper[data-status="pending"] .document-status { background-color: #fb6411; }
.document-item__wrapper[data-status="not_uploaded"] .document-status,
.document-item__wrapper[data-status="disabled"] .document-status { background-color: #bbb; }
.document-item__wrapper[data-status="rejected"] .document-status { background-color: #c00; background-image: url("./assets/icons/cross.svg"); }
.document-item__wrapper[data-status="verified"] .document-item__action { background: #bbb; cursor: not-allowed; }
.documents-hint { margin-bottom: 16px; font-size: 12px; font-style: italic; color: #999; }
.document-upload-error { font-size: 12px; padding: 8px 12px; border-radius: 6px; margin-bottom: 4px; color: #b71c1c; background: #ffebee; }
.document-upload-success { font-size: 12px; padding: 8px 12px; border-radius: 6px; margin-bottom: 4px; color: #1b5e20; background: #e8f5e9; }
/* .client-form-grid здесь не переопределяется: базовое правило выше (display/gap),
   одна колонка на узких экранах - в @media выше по файлу. Дубль убран 08.09.2026 */
.client-form-grid .form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group--check-row { gap: 24px !important; flex-direction: row !important; }
.form-group--check-row > .form-group { width: auto; min-width: 140px; flex: 0 0 auto; }
.client-documents .document-items > .document-item__wrapper { flex: 0 0 100%; max-width: 100%; }
.client-documents .document-items { row-gap: 24px; }

/* Чекбокс-кружок (общие стили для check-toggle и doc-check) */
.doc-check,
.check-toggle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #252525;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
}
.doc-check::after,
.check-toggle::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #ececec;
    border-radius: 50%;
    transition: background-color 0.2s;
}
.doc-check--verify { background-image: url("/local/templates/phoenix_v1/assets/icons/check-light.svg"); background-size: 12px; }
.doc-check--reject { background-image: url("/local/templates/phoenix_v1/assets/icons/cross-light.svg"); background-size: 10px; }
.doc-check:disabled { opacity: 0.5; cursor: wait; }
.doc-check--verify.active { background-image: url("/local/templates/phoenix_v1/assets/icons/check.svg"); }
.doc-check--verify.active::after { background: #fb6411; }
.doc-check--reject.active { background-image: url("/local/templates/phoenix_v1/assets/icons/cross.svg"); }
.doc-check--reject.active::after { background: #c00; }
.doc-check:hover::after,
.check-toggle:hover::after { background: #fda97a; }
.check-toggle.active::after { background: #fb6411; }
.check-toggle-label { font-size: 14px; }
.client-form-grid .form-control,
#personalFieldsForm .form-control,
#docFieldsForm .form-control { max-width: none; width: 100%; }
#personalFieldsForm textarea.form-control,
#docFieldsForm textarea.form-control { max-width: none; width: 100%; min-height: 90px; resize: vertical; border-radius: 20px; }
.client-form-full { grid-column: 1 / -1; }

/* --- НАСТРОЙКИ --- */
.settings-content { gap: 24px; }
.settings-section { gap: 10px; }
.settings-item { border-radius: 30px; padding: 12px 16px; width: 100%; }

/* Toggle Switch */
.toggle-switch { position: relative; width: 50px; height: 30px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ECECEC; transition: .4s; border-radius: 34px;
}
.toggle-slider:before {
    position: absolute; content: ""; height: 26px; width: 26px; left: 2px; bottom: 2px;
    background-color: #fff; box-shadow: 0 3px 1px 0 rgba(0,0,0,0.06), 0 3px 8px 0 rgba(0,0,0,0.15);
    transition: .4s; border-radius: 50%;
}
input:checked + .toggle-slider { background-color: #fb6411; }
input:checked + .toggle-slider:before { transform: translateX(20px); }

/* Login Section (профиль мобильный) */
.login-section { border-radius: 20px; padding: 16px; gap: 10px; }
.login-section h3 { font-weight: 500; color: rgba(37,37,37,0.5); font-size: 14px; }
.login-options,
.login-option-content { gap: 10px; }
.login-option {
    padding: 0;
    min-height: 48px;
    border-bottom: 1px solid #ececec;
    font-size: 14px;
    text-decoration: none;
    color: inherit;
}
.login-option:hover,
.login-option:focus { text-decoration: none; color: inherit; }
.login-options .login-option:last-child { border-bottom: 0; }
.delete-profile { margin-top: 20px; font-weight: 500; color: #fe4100; gap: 8px; }

/* --- ПОМОЩЬ — стили в старом блоке (строки ~943) --- */

/* Отзывы */
.reviews .tab { width: auto; }
.reviews-stars { gap: 8px; margin: 12px 0; }
.order-published { padding: 16px; }
.order-published__user { margin: 8px 0; gap: 8px; }
.order-published__user-photo { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #FB6411; padding: 2px; overflow: hidden; flex-shrink: 0; }
.order-published__user-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.order-published__user-data { font-size: 13px; }
.order-published__user-data span { font-weight: 700; }
.order-published__photos { margin-bottom: 16px; gap: 8px; }
.order-published__photo { border-radius: 12px; width: 100px; height: 68px; object-fit: cover; }
.favorites-swiper { width: 100%; }

/* --- ЖАЛОБЫ И ПРЕДЛОЖЕНИЯ --- */
.feedback-form { display: flex; flex-direction: column; gap: 16px; }
.feedback-left { gap: 16px; }
.file-btn { padding: 14px; gap: 8px; border: 1px solid #ececec; border-radius: 30px; background: transparent; cursor: pointer; }
.file-icon { width: 18px; height: 16px; }
textarea { resize: none; border: 1px solid #ececec; background: #fff; border-radius: 20px; padding: 16px; min-height: 160px; font-size: 14px; }
.feedback-right { gap: 16px; }
.feedback-hint { font-size: 13px; }
.feedback-submit.btn-primary { padding: 14px 24px; width: 100%; }

/* --- ВАКАНСИИ --- */
.vacancies { gap: 10px; }
.vacancies-card { gap: 10px; border-radius: 20px; padding: 16px; }
.vacancies-card__title { font-weight: 500; font-size: 18px; }
.vacancies-card__body { max-height: 160px; overflow: hidden; position: relative; transition: max-height 0.3s ease; }
.vacancies-card__body.is-expanded { overflow: visible; }
.vacancies-card__body:not(.is-expanded)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(transparent, #fff); pointer-events: none; }
.vacancies-card__section { margin-bottom: 8px; font-size: 14px; }
.vacancies-card__section > strong { color: #fb6411; }
.vacancies-card__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vacancy-subtitle { margin-bottom: 16px; font-size: 18px; }
.vacancy-form__text { margin-bottom: 20px; font-size: 13px; }
.vacancy-form__inputs { margin-bottom: 12px; gap: 16px; }
.vacancy-form__inputs input { width: 100%; }
.vacancy-form__inputs input::placeholder { font-weight: 500; color: rgba(37,37,37,0.5); }
.vacancy-textarea { margin-bottom: 16px; border: 1px solid #ececec; border-radius: 20px; padding: 12px 16px; width: 100%; min-height: 100px; }
.vacancy-form .btn.btn-primary,
.response-sending .btn.btn-primary { padding: 14px; }
.response-sending__card { margin-bottom: 16px; border-radius: 20px; padding: 16px; gap: 10px; }
.response-sending__img { width: 60px; height: 50px; }
.response-sending__body { gap: 10px; }
.about-section { border-radius: 20px; padding: 16px; }
.about-title { margin-bottom: 8px; font-weight: 700; font-size: 15px; }
.about-list { margin-bottom: 16px; padding-left: 8px; list-style: none; font-size: 14px; }
.about-list li::before { content: "•"; margin-right: 8px; color: #252525; }

/* --- СОТРУДНИЧЕСТВО --- */
.cooperation { gap: 24px; flex-direction: column; }
.cooperation-wrapper { width: 100%; gap: 16px; }
.cooperation h3 { font-weight: 500; font-size: 18px; }
.cooperation-card { border-radius: 20px; padding: 16px; gap: 16px; }
.cooperation-card img { width: 64px; height: 30px; }
.cooperation-card .btn-primary,
.partners-card .btn-primary { padding: 14px; max-width: 100%; }
.cooperation-title { margin-bottom: 20px; gap: 12px; }

/* Шапка карточки клиента */
.manager-header { gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.manager-header > div:first-child { flex: 1; min-width: 0; }
.manager-header a, .manager-header a:hover, .manager-header a:focus { text-decoration: none; color: inherit; }
.manager-header .cooperation-title { margin-bottom: 8px; font-weight: 700; font-size: 28px; gap: 12px; }
.manager-header .cooperation-title img { width: 28px; height: 28px; flex-shrink: 0; }
.manager-header .client-verified-row { gap: 8px; padding-left: 40px; }
.manager-header .client-verified-label { color: #fb6411; font-size: 15px; font-weight: 700; }
.manager-header .client-actions { gap: 8px; flex-shrink: 0; }
.manager-header .client-action-btn { width: 48px; height: 48px; border-radius: 50%; background: #fb6411; display: flex; align-items: center; justify-content: center; padding: 0; }
.manager-header .client-action-btn img,
.manager-header .client-action-btn svg { filter: brightness(0) invert(1); width: 20px; height: 20px; }
.manager-header .client-action-btn svg { filter: none; }
.manager-header .client-action-btn--disabled { opacity: 0.5; pointer-events: none; }
.client-verified-hint { display: block; margin: 4px 0 0 40px; font-size: 12px; color: #999; }


/* Строка верификации и подсказка выравниваются по левому краю вместе с именем
   и кнопками: на узком экране отступ под иконку заголовка сдвигал их вправо
   и они висели сами по себе */
.manager-header .client-verified-row { margin-left: 0; padding-left: 0; }
.client-verified-hint { margin-left: 0; }
/* История заказов в карточке клиента - без панели фильтра, кнопка "Подробнее" оставлена */
.tab-wrapper[data-content="orders"] .cal-filter,
.tab-wrapper[data-content="orders"] .cal-card__client-link,
.tab-wrapper[data-content="orders"] .cal-card__action:not(.cal-card__action--detail) { display: none; }

/* Карточка клиента — сворачиваемые секции, документы, файлы */
.doc-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    margin-bottom: 12px;
    padding: 4px 14px 16px;
}
.doc-section:not(.is-open) { padding-top: 0; padding-bottom: 0; }
.doc-section .moe-section__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: #252525;
    user-select: none;
}
.doc-section:not(.is-open) .moe-section__summary { padding: 12px 0; }
.doc-section .moe-section__toggle {
    margin-left: auto;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.doc-section.is-open .moe-section__toggle { background: #f0f1f3; color: #252525; }
.doc-section:not(.is-open) .moe-section__toggle { background: #fb6411; color: #fff; }
.doc-section .moe-section__arrow {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transition: transform .2s ease;
}
.doc-section.is-open .moe-section__arrow { transform: rotate(-135deg); margin-top: 3px; }
.doc-section:not(.is-open) .moe-section__arrow { transform: rotate(45deg); margin-bottom: 3px; }
/* Те же два правила стояли и здесь, дублем - см. выше по файлу */

/* Серый блок-обёртка полей внутри секции */
.document-status-field,
.doc-section .client-form-grid {
    background: #f9fafb;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 8px;
}
#docFieldsForm .form-group,
#personalFieldsForm .form-group,
#checksFieldsForm .form-group { display: flex; flex-direction: column; gap: 8px; }

/* Поля карточки клиента — бордер как на десктопе */
#docFieldsForm .form-control,
#personalFieldsForm .form-control,
#checksFieldsForm .form-control,
.document-status-select .custom-select__trigger,
.client-file-modal__field .form-control { border: 1px solid #ececec; }

/* Адрес регистрации — разделитель */
.client-form-address { margin-top: 12px; padding-top: 12px; border-top: 1px solid #ddd; }

/* Статус документа — выпадающий список */
.document-status-field__label { gap: 6px; }
.document-status-select { width: 100%; max-width: none; }
.document-status-select .custom-select__trigger { max-width: none; }

/* Срок действия паспорта/ВУ */
.doc-validity {
    padding: 8px 16px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
}
.doc-validity--ok { color: #1b5e20; background: #e8f5e9; }
.doc-validity--warning { color: #e65100; background: #fff3e0; }
.doc-validity--expired { color: #b71c1c; background: #ffebee; }
.doc-validity--unknown { color: #666; background: #f5f5f5; }

/* Проверки — Да/Нет в строке */
.check-options { gap: 20px; }

/* Карточки документов и файлов клиента */
.doc-cards { margin-top: 16px; }
.client-files__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.client-file-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 12px;
    position: relative;
}
.client-file-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 140px;
    border-radius: 12px;
    background: #f4f4f4;
    overflow: hidden;
    text-decoration: none;
}
.client-file-preview img { width: 100%; height: 100%; object-fit: cover; }
.client-file-preview--empty { color: #bbb; font-size: 13px; }
.client-file-ext { font-weight: 700; font-size: 18px; color: #fb6411; }
.client-file-info { display: flex; flex-direction: column; gap: 4px; }
.client-file-name {
    font-size: 14px;
    font-weight: 600;
    color: #fb6411;
    text-decoration: none;
    word-break: break-word;
}
.client-file-name--empty { color: #999; }
.client-file-comment { font-size: 12px; color: #777; word-break: break-word; }
.client-file-date { font-size: 12px; color: #999; margin-top: 6px; }
.client-file-delete,
.client-doc-delete {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #fb6411;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.client-file-delete:disabled { opacity: .4; cursor: default; }
.client-doc-card__upload { margin-top: auto; }

/* Раздел «Файлы» клиента */
.tab-wrapper[data-content="documents"] .client-documents { margin-top: 24px; }
.client-documents__title { margin-bottom: 12px; font-size: 18px; font-weight: 600; }
.client-files__messages { margin-bottom: 12px; }
.client-files__messages.is-error,
.client-file-modal__messages.is-error { color: #c00; }
.client-files__messages.is-success,
.client-file-modal__messages.is-success { color: #4caf50; }
.client-files__empty { font-size: 14px; color: #999; margin-bottom: 16px; }
.client-files__add { margin-top: 24px; }
.client-files__hint { width: 100%; margin-top: 16px; margin-bottom: 0; }
.client-files__stage-file {
    font-size: 13px;
    color: #999;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.document-messages { margin-bottom: 12px; }

/* Кнопка выбора файла */
.doc-upload-label { display: inline-block; cursor: pointer; }
.doc-upload-btn {
    padding: 0 20px;
    border: 1px solid #ececec;
    border-radius: 24px;
    background: #fff;
    color: #fb6411;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

/* Модалки загрузки документа/файла */
#docUploadModal .modal-content,
#clientFileModal .modal-content { position: relative; }
.client-file-modal__close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    z-index: 1;
}
.client-file-modal__pick { gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.client-file-modal__field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.client-file-modal__field label { font-weight: 700; }
.client-file-modal__field .form-control { max-width: none; width: 100%; }
.client-file-modal__field textarea.form-control { height: auto; min-height: 72px; }
.client-file-modal__messages { margin-top: 8px; }

.partners { gap: 16px; }
.partners-card { border-radius: 20px; padding: 16px; gap: 16px; }
.partners-card__inputs { gap: 16px; }
.partners-card__inputs input { border: 1px solid rgba(0,0,0,0.5); width: 100%; }
.partners-card__inputs input::placeholder { font-weight: 500; color: rgba(37,37,37,0.5); }
.partners-card__inputs span,
.partners-card__inputs a { font-size: 13px; }
.providers-title { margin-bottom: 16px; }
.providers-text { margin-bottom: 12px; font-size: 16px; }
.providers-left { gap: 10px; }
.providers-form input::placeholder { font-weight: 500; color: rgba(37,37,37,0.5); }
.providers-right { border-radius: 20px; padding: 16px; }
.providers-hint { font-size: 16px; }
.providers-right textarea { min-height: 120px; }
.contract-fields { grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
.contract-fields .form-control { max-width: none; width: 100%; }

/* --- АВТОРИЗАЦИЯ --- */
.login-bg { position: fixed; inset: 0; background: linear-gradient(180deg, #fbbd1e 0%, #fb6411 61.91%); }
.car-left, .car-right { display: none; }
.login { margin-top: 60px; margin-bottom: 60px; }
.login-card { border-radius: 30px; padding: 24px; max-width: 100%; width: 100%; margin: 0 auto; position: relative; z-index: 1; }
.login-logo { width: 48px; height: auto; margin-bottom: 16px; }
.login-title { margin-bottom: 16px; font-weight: 700; font-size: 20px; }
.login-inputs { gap: 12px; }
.login-inputs .form-control { border: 1px solid rgba(0,0,0,0.5); max-width: 100%; height: 48px !important; padding: 0 16px !important; }
.login-inputs .form-control::placeholder { font-weight: 500; color: rgba(37,37,37,0.5); }
.login-inputs .form-error { font-size: 12px; color: #dc3545; margin-top: 4px; min-height: 16px; }
.login-inputs .form-control.is-invalid { border-color: #dc3545; }
.login-btns { margin-top: 16px; gap: 12px; }
.login-btns .btn { height: 48px !important; padding: 0 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.login-card a[href="/auth/password/"] { text-align: center !important; display: block !important; }
.btn-register { border: 1px solid rgba(0,0,0,0.5); }

/* --- РЕГИСТРАЦИЯ --- */
.registration-section { padding-top: 0; }
.registration-errors { max-width: 100%; margin: 0 auto 16px; padding: 12px; border-radius: 12px; background: #f8d7da; color: #842029; font-size: 13px; }
.registration-login-link { margin-top: 16px; }
.registration-form { max-width: 100%; margin: 0 auto; }
.registration-form__inputs { margin-bottom: 8px; gap: 12px; flex-direction: column; }
.registration-form__inputs .form-group { width: 100%; }
.registration-form__inputs .form-control { max-width: 100%; }
.registration-form .required { color: #fb6411; }
.registration-form .form-error { font-size: 12px; color: #dc3545; margin-top: 4px; min-height: 16px; }
.registration-form .form-control.is-invalid { border-color: #dc3545; }
.registration-form .form-control.is-valid { border-color: #28a745; }
.upload-section { margin-bottom: 12px; padding: 20px 16px; border-radius: 20px; gap: 16px; flex-direction: column; }
.upload-block { width: 100%; }
.upload-title { margin-bottom: 8px; font-size: 16px; }
.upload-description { margin-bottom: 16px; font-size: 13px; }
.upload-items { gap: 10px; }
.upload-item { gap: 16px; }
.upload-circle { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #ececec; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; /* бейдж «+» поверх круга, фон и так обрезан border-radius */ }

/* --- КАБИНЕТ ПАРТНЁРА --- */
.reward-cards { gap: 12px; margin-bottom: 20px; flex-direction: column; }
.reward-balance-card { background: linear-gradient(154deg, #fbbd1e 0%, #fc8c18 100%); border-radius: 20px; padding: 20px; color: #fff; }
.reward-accruals-card { background: #fff; border-radius: 20px; padding: 20px; }
.reward-accruals-title { font-size: 14px; margin-bottom: 4px; color: #666; }
.reward-accruals-sum { font-size: 24px; font-weight: 700; }
.reward-accruals-count { font-size: 13px; color: #999; margin-top: 2px; }
.reward-balance-title { font-size: 14px; margin-bottom: 4px; }
.reward-balance-sum { font-size: 24px; font-weight: 700; }
.reward-balance-details { margin-top: 12px; gap: 4px; }
.reward-balance-row { font-size: 13px; opacity: 0.9; }
.reward-payments { margin-bottom: 20px; }
.reward-section-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.reward-payment-item { padding: 10px 0; border-bottom: 1px solid #eee; }
.reward-payment-date { color: #666; font-size: 13px; }
.reward-payment-amount { font-weight: 700; }
.reward-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; font-size: 13px; }
.reward-table th { text-align: left; padding: 10px 12px; font-weight: 700; font-size: 12px; color: #666; border-bottom: 2px solid #ddd; }
.reward-table td { padding: 10px 12px; border-bottom: 1px solid #ddd; }
.reward-table tfoot td { font-weight: 700; border-bottom: none; border-top: 2px solid #ddd; }
.reward-chart { margin-top: 20px; }
.reward-chart-header { margin-bottom: 12px; }
.reward-chart-nav { gap: 12px; }
.reward-chart-nav__year { font-weight: 700; font-size: 14px; min-width: 40px; text-align: center; }
.reward-chart-nav__btn {
    background: #f0f1f3;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #252525;
    line-height: 1;
    transition: background .15s;
}
.reward-chart-nav__btn:hover:not(:disabled) { background: #e5e7eb; }
.reward-chart-nav__btn:disabled { color: #9ca3af; cursor: default; }
/* Canvas графика на мобильном — явная высота чтобы chart.js рендерил
   с реальным разрешением (вместе с maintainAspectRatio:false) */
.reward-chart canvas { height: 280px !important; width: 100% !important; max-height: 280px !important; }
.cal-card__reward { gap: 4px; font-size: 13px; color: #252525; }
.cal-card__reward-sum { font-weight: 700; color: #fb6411; }
.expense-toggle-icon { transition: transform 0.2s; }
.expense-month-toggle.collapsed .expense-toggle-icon { transform: rotate(-90deg); }

/* --- КАБИНЕТ МЕНЕДЖЕРА --- */
.manager-form-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.manager-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.manager-info { gap: 12px; }
.manager-subtitle { font-weight: 600; font-size: 15px; margin-bottom: 8px; color: #252525; }
.search-sort-section { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; align-items: center; }
.search-sort-section .clients-sort-select { position: relative; flex-shrink: 0; z-index: 1001; }
.search-sort-section { position: relative; z-index: 10; overflow: visible; }
.manager-clients { overflow: visible; }
.search-sort-section .clients-sort-btn { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid #ececec; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.search-sort-section .clients-sort-select .custom-select__list { position: absolute; top: 100%; left: 0; background: #fff; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); z-index: 1000; min-width: 200px; margin-top: 4px; display: none !important; padding: 12px 16px !important; list-style: none; }
.search-sort-section .clients-sort-select.is-open .custom-select__list { display: flex !important; flex-direction: column; }
.search-sort-section .clients-sort-select .custom-select__option { padding: 6px 0; font-size: 14px; cursor: pointer; }
.search-sort-section .clients-sort-select .custom-select__option.active { color: #fb6411; font-weight: 700; }
.search-sort-section .search-box { flex: 1; min-width: 0; position: relative; gap: 0; margin-bottom: 0; }
.search-sort-section .search-box .search-input { width: 100%; height: 38px; border-radius: 30px; padding: 0 40px 0 16px; border: 1px solid #ececec; background: #fff; font-size: 14px; outline: none; }
.search-sort-section .search-box .search-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: transparent; padding: 4px; }
.search-sort-section .sort-select { height: 38px; padding: 0 36px 0 16px; border-radius: 30px; border: 1px solid #ececec; background-color: #fff; font-size: 14px; background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5L5 7.5L9 3.5' stroke='%23fb6411' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-position: right 14px center; }

@media (max-width: 575.98px) {
    .client-status-label { display: none !important; }
    .client-link { flex-wrap: wrap; gap: 8px 12px; }
}

.client-list { gap: 10px; padding: 0; margin: 0; }
.client-item { padding: 0; border-radius: 30px; background: #fff; text-decoration: none; color: inherit; border: none; list-style: none; }
.client-item:hover { background: #fff7f2; }
.client-link { padding: 12px 16px; gap: 12px; flex-wrap: wrap; text-decoration: none; }
.client-link:hover, .client-link:focus { text-decoration: none; color: inherit; }
.client-link span { text-decoration: none !important; }
.client-id { font-weight: 700; font-size: 14px; min-width: 28px; }
.client-name { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; }
.client-phone { font-size: 13px; color: #1d1d1d; display: none; }
.client-status-label { font-size: 13px; padding: 6px 14px; border-radius: 20px; border: 1px solid #fb6411; background: transparent; white-space: nowrap; }
.client-status-label.status-new { border-color: #999; color: #999; }
.client-status { font-size: 12px; }

/* Календарь менеджера */
.calendar { margin-bottom: 20px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.calendar-day { padding: 6px 2px; font-size: 12px; border-radius: 6px; cursor: pointer; position: relative; }
.calendar-day:hover { background: #f5f5f5; }
.calendar-day.today { font-weight: 700; color: #fb6411; }
.calendar-day.has-events::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #fb6411; }
.calendar-legend { gap: 12px; margin-top: 12px; font-size: 12px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Чипсы фильтра */
.cal-filter__chips { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.cal-chip { height: 38px; padding: 0 14px; border-radius: 20px; background: #fff; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.cal-chip--active,
.cal-chip:hover { background: #fb6411; color: #fff; }
.cal-chips-more-link { height: 38px; padding: 0 14px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; }

/* Фильтр поиска (моб): инпут на всю ширину, кнопки на новую строку */
.cal-filter__search-row { flex-wrap: wrap; }
.cal-filter__search-wrap { flex: 1 1 100%; max-width: 100%; }
.cal-filter__search-input { height: 38px; padding-top: 0 !important; padding-bottom: 0 !important; }
.cal-calendar-btn { height: 38px; padding-top: 0; padding-bottom: 0; color: #1d1d1d; }
.cal-calendar-btn svg { color: #1d1d1d; stroke: currentColor; }
.cal-reset-btn { color: #fb6411 !important; }
.cal-filter { position: relative; }
.cal-calendar-wrap { position: static; }
.cal-calendar-popup { left: 0; right: 0; width: 330px; max-width: 100%; padding: 16px; padding-top: 32px; box-sizing: border-box; }
.cal-calendar-popup .flatpickr-calendar,
.cal-calendar-popup .flatpickr-innerContainer,
.cal-calendar-popup .flatpickr-rContainer,
.cal-calendar-popup .flatpickr-days,
.cal-calendar-popup .dayContainer,
.cal-calendar-popup .flatpickr-weekdays,
.cal-calendar-popup .flatpickr-weekdaycontainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.cal-calendar-popup .flatpickr-day { max-width: none !important; }
.cal-legend { flex-wrap: wrap !important; }
.cal-legend__item { white-space: nowrap; flex-shrink: 0; }

/* Модалки */
.modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.modal.show { display: flex !important; align-items: center; justify-content: center; }
.modal.fade { opacity: 0; transition: opacity 0.2s linear; }
.modal.fade.show { opacity: 1; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; }
.modal-backdrop.fade { opacity: 0; transition: opacity 0.2s linear; }
.modal-backdrop.fade.show { opacity: 0.5; }
.modal-dialog { max-width: calc(100% - 32px); margin: 16px; }
.modal-content { border-radius: 20px; background: #fff; padding: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
.modal-header { padding: 16px; }
.modal-body { padding: 16px; }
.modal-footer { padding: 16px; }

/* Лайтбокс авто — мобильный */
#autoLightbox {
    padding: 0 !important;
}
#autoLightbox .modal-dialog {
    max-width: calc(100% - 32px) !important;
    margin: auto !important;
    padding: 16px 0;
}
#autoLightbox .modal-content {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 12px !important;
    border: none !important;
    position: relative;
}
.auto-lightbox__swiper {
    width: 100%;
    height: auto;
    overflow: hidden;
}
.auto-lightbox__slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
.auto-lightbox__slide img {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
}
.auto-lightbox__counter {
    text-align: center;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #252525;
}
#autoLightbox .btn-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}
#autoLightbox .swiper-button-prev,
#autoLightbox .swiper-button-next {
    width: 40px !important;
    height: 40px !important;
    background-color: #FB6411 !important;
    border-radius: 50% !important;
    top: 50% !important;
    margin-top: -20px !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
#autoLightbox .swiper-button-prev { left: 12px !important; }
#autoLightbox .swiper-button-next { right: 12px !important; }
#autoLightbox .swiper-button-prev::after,
#autoLightbox .swiper-button-next::after {
    display: none !important;
    content: none !important;
}
#autoLightbox .swiper-button-next svg,
#autoLightbox .swiper-button-prev svg {
    height: auto !important;
    object-fit: cover !important;
    transform-origin: center !important;
    width: 10px !important;
    fill: none !important;
    stroke: #fff !important;
    pointer-events: none !important;
    display: flex !important;
    text-align: center !important;
    justify-content: center !important;
}

/* Лайтбокс отзывов — единый стиль с авто */
.review-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    background: rgba(0,0,0,0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.review-lightbox img {
    max-width: calc(100% - 32px) !important;
    max-height: 80vh !important;
    object-fit: contain !important;
    border-radius: 20px !important;
}
.review-lightbox__close {
    display: none !important;
}
.review-lightbox__nav {
    position: absolute !important;
    top: 50% !important;
    margin-top: -20px !important;
    width: 40px !important;
    height: 40px !important;
    background: #FB6411 !important;
    border-radius: 50% !important;
    border: none !important;
    color: transparent !important;
    font-size: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.review-lightbox__prev::before {
    content: '' !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-left: 2px solid #fff !important;
    border-top: 2px solid #fff !important;
    transform: rotate(-45deg) !important;
    margin-left: 4px !important;
}
.review-lightbox__next::before {
    content: '' !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid #fff !important;
    border-top: 2px solid #fff !important;
    transform: rotate(45deg) !important;
    margin-right: 4px !important;
}
.review-lightbox__prev { left: 12px !important; }
.review-lightbox__next { right: 12px !important; }

/* Options cards — используются стили из старого мобильного блока (строки ~1823) */

/* Brands */
.brands-section { margin: 24px 0; }
.brands-card { padding: 12px; text-align: center; }
.brands-card img { max-height: 40px; }

} /* end mobile adaptation */

/* (Старый overflow-fix .header-catalog/.header-actions снят — теперь на ≤768px рендерится отдельный <header class="header d-md-none"> с мобильной разметкой, десктопный — d-none d-md-block.) */

/* Модалка отзыва — блок "Фото и видео" по левому краю */
#reviewModal .form-group[data-field="INPUT_5"] {
    align-items: flex-start !important;
    text-align: left;
}
#reviewModal .form-group[data-field="INPUT_5"] label {
    text-align: left;
    align-self: flex-start;
}

/* Кнопка "Оставить отзыв" внизу /personal/orders/detail.php */
.leave-review-cta {
    margin-top: 40px;
    padding: 24px;
    background: #fff7ed;
    border-radius: 12px;
    text-align: center;
}
.leave-review-cta__text {
    margin-bottom: 16px;
    font-weight: 600;
    color: #fb6411;
    font-size: 16px;
}
.leave-review-cta .btn-primary {
    min-width: 200px;
}

/* /personal/reviews/ — карточка в столбик на ≤767 (горизонтальный layout остаётся только на десктопе) */
@media (max-width: 767.98px) {
    .orders-card {
        flex-direction: column;
        padding: 20px;
        gap: 16px;
        align-items: stretch;
    }
    .orders-card__img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
    }
    .orders-card__body {
        padding: 0;
        gap: 12px;
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .orders-card__title {
        margin-bottom: 0;
    }
    .orders-card .transaction-info {
        margin-bottom: 0;
        gap: 4px;
    }
    .orders-card .btn-primary {
        max-width: none;
        width: 100%;
    }
}

/* Подсветка и иконки нижней навигации (для <992px — мобайл+планшет) */
@media (max-width: 991.98px) {
    .footer__mobile--menu--button { color: #8c8c8c; text-decoration: none !important; }
    .footer__mobile--menu--button.active { color: #fb6411; }
    .footer__mobile--menu--button img { filter: brightness(0); opacity: 0.55; }
    .footer__mobile--menu--button.active img { filter: invert(45%) sepia(96%) saturate(1500%) hue-rotate(2deg) brightness(101%) contrast(97%); opacity: 1; }
}

/* === Мобильный хедер (.header.d-lg-none): защита от десктоп-правил v1 (order, flex-wrap, sticky) === */
@media (max-width: 768px) {
    .header.d-lg-none { position: relative; z-index: 100; }
    .header.d-lg-none .header-container { display: flex !important; flex-direction: column !important; gap: 12px; padding: 16px; }
    .header.d-lg-none .header-top { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 12px; align-items: stretch !important; width: 100%; }
    .header.d-lg-none .header-row-1 { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px; flex-wrap: nowrap !important; }
    .header.d-lg-none .header-row-2 { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px; flex-wrap: nowrap !important; }
    .header.d-lg-none .header-actions { display: flex !important; align-items: center !important; gap: 8px; margin-left: 0 !important; }
    .header.d-lg-none .header-logo,
    .header.d-lg-none .header-top .btn,
    .header.d-lg-none .header-phone,
    .header.d-lg-none .header-chat,
    .header.d-lg-none .header-catalog,
    .header.d-lg-none .header-search-btn,
    .header.d-lg-none .header-profile { order: 0 !important; margin-left: 0 !important; }
    .header.d-lg-none .header-catalog { flex: 1 1 auto !important; }
    .header.d-lg-none .header-row-2.header-row-2--hidden { max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: all .25s ease; }
    .header.d-lg-none .header-row-2 { transition: all .25s ease; max-height: 80px; opacity: 1; overflow: visible; }
}

/* Фикс-позиция нижней навигации + scroll-padding-bottom для <992 (мобайл+планшет).
   padding-bottom только на main/pagewrapper — на body НЕ ставим, иначе на коротких страницах
   создаётся искусственный скролл и происходит «мигание» страницы. */
@media (max-width: 991.98px) {
    body > main,
    body > .main,
    body > .pagewrapper { padding-bottom: 90px; }
    .footer__mobile--menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        padding: 8px 16px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
        border-radius: 20px 20px 0 0;
    }
    .footer__mobile--menu--button { align-items: center; gap: 4px; font-size: 11px; min-width: 60px; }
    .footer__mobile--menu--button img { width: 24px; height: 24px; }
    /* Подвал на телефоне лежит под фиксированным меню - реквизиты не должны уходить под него.
       Отступ под меню несёт сам подвал, поэтому у main он больше не нужен: иначе перед
       подвалом пустой промежуток в 90px. Без подвала (раздел /auth/) отступ у main остаётся. */
    footer { padding-bottom: calc(24px + 90px + env(safe-area-inset-bottom)); }
    body > main:has(~ footer) { padding-bottom: 0; }
    /* Логотип в подвале - слева, как в макете: order:1 у .header-logo задан для шапки,
       где он стоит справа от бургера, к подвалу это не относится */
    footer .header-logo { order: 0; }
}

/* Страница профиля без бокового меню (<1200 - там оно шторкой): карточки, список
   разделов, плитки. Правила вынесены из блока <=768, потому что мобильный блок профиля
   показывается до 1199px (d-xl-none), и на планшете он оставался без стилей. */
@media (max-width: 1199.98px) {
    .main-mobile.profile-mobile {
        padding-top: 16px;
    }

    .profile-mobile .profile-info {
        margin-bottom: 24px;
        gap: 8px;
    }

    .profile-mobile .profile-avatar {
        padding: 1px;
        width: 80px;
        height: 80px;
        min-width: 80px;
        min-height: 80px;
        border-radius: 50%;
        border: 1px solid #FB6411;
        flex-shrink: 0;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .profile-mobile .profile-info h2 {
        font-size: 14px;
        border-radius: 30px;
        padding: 12px 24px;
    }

    .profile-mobile__cards {
        margin-bottom: 24px;
        gap: 10px;
    }

    .profile-mobile .bonus-card {
        padding: 14px;
        width: calc((100% - 10px) / 2);
        height: 130px;
    }

    .profile-mobile .bonus-card:nth-child(2) {
        background: linear-gradient(220deg, #ffca43 0%, #fb6411 100%);
    }

    .profile-mobile .bonus-title {
        margin-bottom: 7px;
        font-size: 18px;
        font-weight: 700;
    }
    .profile-mobile .bonus-amount {
        font-size: 14px;
        font-weight: 400;
    }

    .profile-mobile .bonus-card__img {
        top: 9px;
        width: 90px;
        height: 44px;
    }

    .profile-mobile .bonus-card:nth-child(2) .bonus-card__img {
        top: 6px;
        right: 10px;
        width: 65px;
        height: 65px;
    }

    .profile-mobile .login-section,
    .profile-mobile .options {
        margin-bottom: 24px;
    }

    /* Плитки помощи и соцсетей в профиле - мобильного размера: без этого до 1199px
       они получают десктопные 280px высоты. На планшете две в ряд */
    .profile-mobile .options-cards {
        gap: 12px;
    }

    .profile-mobile .options-card {
        width: calc((100% - 12px) / 2);
        min-height: 140px;
        height: auto;
        padding: 24px;
        border-radius: 20px;
        gap: 12px;
        overflow: hidden;
    }

    .profile-mobile .options-card__title {
        max-width: 200px;
        font-size: 18px;
    }

    .profile-mobile .options-socials {
        gap: 10px;
    }

    .profile-mobile .options-socials .social {
        width: 50px;
        height: 50px;
    }

    .profile-mobile .options-card__bg {
        width: 100px;
        height: 84px;
        right: 16px;
        top: auto;
        bottom: 16px;
    }
}

@media (max-width: 768px) {
    .profile-mobile .options-card {
        width: 100%;
    }
}

/* Мобильный хедер и нижняя навигация — на всю ширину экрана (для <992px) */
@media (max-width: 991.98px) {
    /* Контент страницы по ширине совпадает с шапкой. Шапка на мобильных
       занимает всю ширину с отступом 16px, а bootstrap-контейнер сжимался
       до 540px и центрировался - контент выглядел заметно уже шапки */
    .container {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .header.d-lg-none .container,
    .header.d-lg-none > .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; }
    .header.d-lg-none .header-container { border-radius: 0 !important; padding: 12px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
    /* Лого слева, действия справа — уже задано justify-content:space-between на header-row-1 */
}

/* Финальные правки мобильного хедера: скругление снизу + кнопки прижаты вправо */
@media (max-width: 991.98px) {
    .header.d-lg-none .header-container {
        border-radius: 0 0 30px 30px !important;
        padding: 16px !important;
    }
    /* Действия плотным блоком справа, без растяжки */
    .header.d-lg-none .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
    }
    /* Лого фиксированной ширины, не растягивается */
    .header.d-lg-none .header-logo { flex: 0 0 auto !important; }
    /* Row-1 — лого слева, .header-actions справа (как пакет) */
    .header.d-lg-none .header-row-1 { justify-content: space-between !important; }
}

/* Фикс: .header-actions внутри мобильного .header.d-lg-none — без width:100%, плотным пакетом справа */
@media (max-width: 991.98px) {
    .header.d-lg-none .header-actions {
        width: auto !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
    }
    /* Кнопка «Фильтр» — иконка слева, белая, gap до текста */
    .header.d-lg-none .header-filter-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .header.d-lg-none .header-filter-toggle img {
        width: 18px;
        height: 18px;
        filter: brightness(0) invert(1);
    }
}

@media (max-width: 768px) {
    .tab-buttons { margin: 16px 0 16px; }
}

/* auto-lightbox стрелки — стилевые ::before (по аналогии с .review-lightbox__nav) */
.auto-lightbox__prev,
.auto-lightbox__next {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    background: #FB6411;
    border-radius: 50%;
    border: none;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.auto-lightbox__prev::before,
.auto-lightbox__next::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
}
.auto-lightbox__prev::before { border-left: 2px solid #fff; transform: rotate(-45deg); margin-left: 4px; }
.auto-lightbox__next::before { border-right: 2px solid #fff; transform: rotate(45deg); margin-right: 4px; }
.auto-lightbox__prev { left: 12px; }
.auto-lightbox__next { right: 12px; }
/* Swiper >= 11 авто-вставляет .swiper-navigation-icon в пустые кнопки — гасим её */
.auto-lightbox__prev .swiper-navigation-icon,
.auto-lightbox__next .swiper-navigation-icon { display: none !important; }

@media (max-width: 768px) {
    .registration-section { padding-top: 24px; }
}

/* === Шторка ЛК-меню справа === */
.lk-burger { display: inline-flex; align-items: center; justify-content: center; }
.lk-burger__lines, .lk-burger__lines::before, .lk-burger__lines::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: #252525;
    border-radius: 2px;
    position: relative;
}
.lk-burger__lines::before { position: absolute; top: -6px; left: 0; }
.lk-burger__lines::after  { position: absolute; top: 6px;  left: 0; }

/* Шторка вне .profile-wrapper (прямой ребёнок body) — всегда fixed справа, на любом разрешении.
   Второй селектор - подстраховка для обёртки режима правки Битрикса (div#bx_incl_area_N). */
body > .lk-sidebar,
body > [id^="bx_incl_area"] > .lk-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    width: 85% !important;
    max-width: 320px !important;
    background: #fff !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 16px 16px 80px !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    box-shadow: -4px 0 20px rgba(0,0,0,.1) !important;
    border-radius: 0 !important;
}
body > .lk-sidebar.lk-sidebar--open,
body > [id^="bx_incl_area"] > .lk-sidebar.lk-sidebar--open { transform: translateX(0) !important; }

/* Шторка inline в .profile-wrapper — fixed справа на <1200, inline на ≥1200 */
@media (max-width: 1199.98px) {
    .profile-wrapper > .lk-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 9999 !important;
        width: 85% !important;
        max-width: 320px !important;
        background: #fff !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding: 16px 16px 80px !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        box-shadow: -4px 0 20px rgba(0,0,0,.1) !important;
        border-radius: 0 !important;
    }
    .profile-wrapper > .lk-sidebar.lk-sidebar--open { transform: translateX(0) !important; }
    .profile-wrapper > .lk-sidebar::before { content: 'Меню' !important; }
}

/* Overlay — на любом разрешении */
.lk-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, .35);
}
.lk-overlay.active { display: block; }
body.lk-open { overflow: hidden; }

/* Аренда с водителем — детальная авто */
.auto-price--driver {
    font-size: 20px;
    color: #fb6411;
    margin-top: 4px;
}
.auto-price__note {
    font-size: 14px;
    color: #6b7280;
    font-weight: 400;
}
.auto-driver-info {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.auto-driver-info li {
    position: relative;
    padding-left: 26px;
    color: #2b2b2b;
}
.auto-driver-info li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background: url('assets/icons/star.svg') center/contain no-repeat;
}
.auto-driver-note {
    margin: 12px 0 0;
    color: #6b7280;
    font-size: 14px;
}
/* Smart-filter sidebar (на /catalog/) — overlay на ≤991, не трогая lk-sidebar */
@media (max-width: 991.98px) {
    .filter-sidebar:not(.lk-sidebar) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        width: 85% !important;
        max-width: 320px !important;
        background-color: #fff !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 16px !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1) !important;
        border-radius: 0 !important;
        height: auto !important;
    }
    .filter-sidebar:not(.lk-sidebar).filter-sidebar--open {
        transform: translateX(0) !important;
    }
}

/* === Мобильный хедер (.header.d-lg-none) — column layout на любом разрешении 0-991 === */
.header.d-lg-none .header-container {
    border-radius: 0 0 30px 30px !important;
    padding: 16px !important;
    gap: 0 !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07) !important;
}
.header.d-lg-none .header-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: stretch !important;
}
.header.d-lg-none .header-row-1 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
.header.d-lg-none .header-row-2 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-height: 60px;
    opacity: 1;
    transition: max-height 0.25s ease, opacity 0.25s ease;
}
.header.d-lg-none .header-row-2.header-row-2--hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.header.d-lg-none .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}
.header.d-lg-none .header-logo {
    flex: 0 0 auto !important;
    max-width: 120px;
}
.header.d-lg-none .header-logo img {
    width: auto;
    max-height: 36px;
}
@media (max-width: 991.98px) {
    .header.d-lg-none .header-catalog,
    .header.d-lg-none .header-filter-toggle {
        flex: 1 1 auto !important;
    }
}

/* === filter-overlay глобально (раньше было только в @media 768) === */
.filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.35);
}
.filter-overlay.active { display: block; }
body.filter-open { overflow: hidden; }
body.filter-open .header { z-index: 1 !important; }
body.filter-open .footer__mobile--menu { z-index: 1 !important; }

/* Карточки авто — по 2 в строке на <1200 (на ≥1200 остаётся 3) */
@media (max-width: 1199.98px) {
    .car-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}

/* .header-catalog растягивается только на <992 (раньше было в @media 1199) */
@media (max-width: 991.98px) {
    .header-catalog.btn.btn-primary {
        flex: 1 1 auto !important;
        min-width: 0;
        justify-content: center;
    }
}

/* На узких экранах ≤575 (включая 370) — карточки авто в 1 колонку */
@media (max-width: 575.98px) {
    .car-cards { grid-template-columns: 1fr !important; }
}


/* На ≤575 — скрываем «С водителем» / «Без водителя», Сортировка по центру */
@media (max-width: 575.98px) {
    .tab-buttons > .btn[data-rental] { display: none !important; }
    .tab-buttons { justify-content: center !important; }
    .tab-buttons > .custom-select { flex: 0 0 auto !important; }

    /* В мобильном хедере убираем избранное и уведомления — остаются только чат и аватар */
    .header-row-1 .header-actions a[href="/personal/favorites/"],
    .header-row-1 .header-actions a[href="/personal/notices/"] { display: none !important; }
}

@media (max-width: 768px) {
    .card-img { height: 250px; }
}

/* Шапка карточки отзыва: имя клиента слева, звёзды справа; на ≤992 — звёзды на новой строке */
.reviews-card__head { gap: 12px; margin-bottom: 12px; }
@media (max-width: 991.98px) {
    .reviews-card__head .reviews-stars { flex-basis: 100%; }
}

/* === Адаптация таблиц в карточки на ≤992 ===
   Применяется к кастомным таблицам проекта. <thead> скрывается, каждый <tr>
   становится карточкой, каждая <td> — строкой. Если у <td> есть data-label —
   подпись выводится через ::before. */
@media (max-width: 991.98px) {
    .data-table, .moe-basket, .moe-payments, .reward-table {
        display: block;
        width: 100%;
    }
    .data-table thead, .moe-basket thead, .moe-payments thead, .reward-table thead {
        display: none;
    }
    .data-table tbody, .moe-basket tbody, .moe-payments tbody, .reward-table tbody {
        display: block;
    }
    .data-table tr, .moe-basket tr, .moe-payments tr, .reward-table tr {
        display: block;
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        border: none;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .data-table td, .moe-basket td, .moe-payments td, .reward-table td {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px 12px;
        padding: 6px 0;
        border: none;
        text-align: right;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* Любой контент внутри карточек — не вылезать за ширину */
    .data-table td > *, .moe-basket td > *, .moe-payments td > *, .reward-table td > * {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* Inputs/selects/textarea — ограничиваются шириной карточки, но не перебивают собственную ширину */
    .data-table td input, .moe-basket td input, .moe-payments td input, .reward-table td input,
    .data-table td select, .moe-basket td select, .moe-payments td select, .reward-table td select,
    .data-table td textarea, .moe-basket td textarea, .moe-payments td textarea, .reward-table td textarea {
        max-width: 100%;
        box-sizing: border-box;
    }
    .data-table td:first-child, .moe-basket td:first-child,
    .moe-payments td:first-child, .reward-table td:first-child {
        padding-top: 0;
    }
    .data-table td:last-child, .moe-basket td:last-child,
    .moe-payments td:last-child, .reward-table td:last-child {
        padding-bottom: 0;
    }
    /* Карточка оплаты: первая ячейка — на всю ширину, остальные в строку по контенту. */
    .moe-payments tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
    }
    .moe-payments td {
        width: auto;
        flex: 0 0 auto;
        padding: 4px 0;
    }
    .moe-payments td:first-child {
        flex: 0 0 100%;
        width: 100%;
        font-weight: 600;
        margin-bottom: 4px;
    }
    /* Платёж и его чек — одна карточка: строка чека приклеивается к строке
       платежа без зазора, скругления стыкуются */
    .moe-payments tr.moe-payment-row--paired {
        border-radius: 16px 16px 0 0;
        margin-bottom: 0;
        padding-bottom: 8px;
    }
    .moe-payments tr.moe-receipt-row {
        border-radius: 0 0 16px 16px;
        margin-top: 0;
        padding-top: 0;
        box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.04);
    }
    .moe-payments tr.moe-receipt-row td::before {
        display: none;
    }
    .moe-payments tr.moe-receipt-row td:first-child {
        font-weight: 400;
        margin-bottom: 0;
    }
    /* td с пустым data-label (например, ячейка с кнопкой ×) — без отступа на подпись, контент по центру */
    .data-table td[data-label=""], .moe-basket td[data-label=""],
    .moe-payments td[data-label=""], .reward-table td[data-label=""] {
        justify-content: center;
        text-align: center;
    }
    .data-table td[data-label=""]::before, .moe-basket td[data-label=""]::before,
    .moe-payments td[data-label=""]::before, .reward-table td[data-label=""]::before {
        content: none !important;
    }
    /* Подпись из data-label */
    .data-table td[data-label]::before,
    .moe-basket td[data-label]::before,
    .moe-payments td[data-label]::before,
    .reward-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #1d1d1d;
        text-align: left;
        flex-shrink: 0;
    }
}

/* На очень узких экранах (≤370) кнопка-сабмит «Авто выдан» — на всю ширину */
@media (max-width: 370px) {
    .btn-primary.manager-submit.w-auto,
    .manager-submit { width: 100% !important; }
}

/* iOS Safari зумит страницу при фокусе на поле ввода с font-size < 16px.
   Все поля форм на мобильном — минимум 16px (чекбоксы/радио/диапазоны не трогаем). */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* B: мобильная читаемость — самый мелкий текст (9–12px) поднят до 14px.
   Только мобильный, .badge и заголовки не затронуты. */
@media (max-width: 768px) {
    .file-hint,
    .rental-show-more,
    .cal-calendar-popup .calendar-legend .legend-item,
    .cal-card__created,
    .cal-legend__item,
    .cal-auto-status,
    .expense-status,
    .header-notification,
    .footer-bottom,
    .order-time,
    .transaction-expires,
    .client-verified-hint,
    .client-file-comment,
    .client-file-date,
    .promo-card .hero-slide__title,
    .promo-card .hero-slide__text,
    .footer__mobile--menu--button,
    .message-bubble,
    .message-time,
    .btn-rent,
    .search-dropdown__price,
    .orders-card__text,
    .feedback-modal__form span,
    .orders-card__header .transaction-date,
    .vacancy-form__text,
    .promo-card__descr-text,
    .booking-card__disclaimer,
    .required-note,
    .forgot-password,
    .agreement-text,
    .search-dropdown__item .search-dropdown__price,
    .car-details,
    .order-car-info,
    .notification-date,
    .promo-card__date,
    .documents-hint,
    .document-upload-error,
    .document-upload-success,
    .login-inputs .form-error,
    .registration-form .form-error,
    .reward-table th,
    .client-status,
    .calendar-day,
    .calendar-legend {
        font-size: 14px !important;
    }
}

/* Чат: в режиме открытого диалога общий заголовок «Чат» дублирует «Чат с …» компонента —
   скрываем на всех ширинах (в списке чатов заголовок остаётся). */
.profile-lk:has(.phoenix-chat) > .orders-title { display: none; }

@media (max-width: 768px) {
    /* Клавиатура открыта (фокус на поле): прячем нижнее меню; чат — фикс-оболочка поверх
       страницы (вне flex-потока body), позицию/высоту задаёт JS по visualViewport → поле
       вплотную над клавиатурой, без зазора и «всплывающего» меню. */
    body.chat-kb .footer__mobile--menu { display: none !important; }
    body.chat-kb .phoenix-chat {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 100dvh;
        z-index: 1000;
        margin: 0;
        padding: 10px 16px;
        background: #ECECEC;
    }
}

/* Города выдачи/возврата в форме бронирования */
.rental-auto-card__info {
    flex: 1 1 auto;
    min-width: 0;
}
.rental-block--auto .rental-auto-card {
    margin-top: 12px;
}
.rental-cities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 16px;
    margin-top: 18px;
}
.rental-city-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.rental-city-field__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
}
.rental-cities .rental-city-select {
    width: 100%;
}
.rental-cities .rental-city-trigger {
    width: 100%;
    border: 1px solid #ececec;
    border-radius: 30px;
    padding: 10px 16px;
}
/* открытое поле — над соседним (иначе сосед просвечивает сквозь выпадашку).
   Должно быть ВЫШE базового z-index:50 у .rental-city-select (flatpickr-phoenix.css),
   иначе на мобильных (поля в столбик) соседний селект перекрывает список. */
.rental-city-field:has(.rental-city-select.is-open) {
    z-index: 60;
}

/* Выпадашка города на /personal/rent/ не должна обрезаться/уходить за секцию
   (overflow по цепочке контейнеров + поднятие над следующими секциями). */
.rental-block--auto .moe-section__body,
.rental-auto-card,
.rental-auto-card__info,
.rental-auto-card__city-row {
    overflow: visible;
}
.rental-block--auto:has(.rental-city-select.is-open) {
    position: relative;
    z-index: 30;
}
.rental-city-select.is-open .custom-select__list {
    z-index: 1000;
}
/* длинные названия городов не обрезаются — ширина по контенту */
.rental-city-select .custom-select__list {
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: 280px;
}
.rental-city-select .custom-select__option {
    white-space: nowrap;
}

/* городские селекты (хедер, модалка поиска): длинные названия не обрезаются */
[data-city-select] .custom-select__list {
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: 260px;
}
[data-city-select] .custom-select__option {
    white-space: nowrap;
}