@font-face {
    font-family: 'Inter Display SemiBold';
    /*src: url('/fonts/InterDisplay-SemiBold.woff2') format('woff2'), url('/fonts/InterDisplay-SemiBold.woff') format('woff');*/
    /*src: url('/fonts/Geologica_Auto-SemiBold.woff2') format('woff2');*/
    src: url('/fonts/Manrope-SemiBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Display';
    /*src: url('/fonts/InterDisplay-Regular.woff2') format('woff2'), url('/fonts/InterDisplay-Regular.woff') format('woff');*/
    /*src: url('/fonts/Geologica_Auto-Regular.woff2') format('woff2');*/
    src: url('/fonts/Manrope-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    /*src: url('/fonts/InterVariable.woff2') format('woff2'), url('/fonts/InterVariable.woff') format('woff');*/
    /*src: url('/fonts/Geologica_Auto-Light.woff2') format('woff2');*/
    src: url('/fonts/Manrope-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    /*background-color: #F5F5F5;*/
    background-color: #FFFFFF;
    font-family: 'Inter Display' !important;
}


.grid-main-login {
    display: grid;
    grid-template-columns: auto 1fr auto;
    height: 100%;
    width: 100%;
    justify-items: center;
    align-items: center;
}

    .grid-main-login > div {
        height: 100% !important;
    }

.header-main {
    color: #000;
    font-family: 'Inter Display SemiBold';
    font-size: 31.395px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -1.236px;
}

.sub-header-main {
    color: #000;
    font-family: 'Inter Display';
    font-size: 18.314px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.162px;
    opacity: 0.6;
}

.label-input-text {
}

/* Контейнер должен быть относительным, чтобы label позиционировался внутри него */
.input-container {
    position: relative;
    margin-top: 8px; /* Отступ сверху для поднятой метки */
}

    /* Стили для поля ввода */
    .input-container input {
        width: 100%;
        padding: 10px 0;
        font-size: 16px;
        border: none;
        border-bottom: 1px solid #A6A6A6; /* Нижняя линия вместо рамки */
        outline: none;
        transition: border-color 0.3s ease;
    }

        /* Изменение цвета линии при фокусе */
        .input-container input:focus {
            border-bottom-color: #A6A6A6;
        }

    /* Исходное положение метки (лежит поверх пустого поля) */
    .input-container label {
        position: absolute;
        top: 10px;
        left: 0;
        color: #A6A6A6;
        font-family: "Inter Display";
        font-size: 18.314px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        transition: all 0.3s ease;
        pointer-events: none; /* Чтобы клик проходил сквозь текст на сам input */
    }

    /* Сдвиг метки вверх при фокусе или если поле заполнено */
    .input-container input:focus ~ label,
    .input-container input:not(:placeholder-shown) ~ label {
        top: -5px;
        font-size: 12px;
        color: #A6A6A6;
    }

/* Находим галочку/крестик валидации и привязываем её к правому краю инпута, а не страницы */
/*.input-container input.valid::after,
    .input-container input.invalid::after,
    .input-container .valid::after,
    .input-container .invalid::after {
        position: absolute !important;
        right: 12px !important;*/ /* Отступ изнутри инпута справа */
/*top: 50% !important;
        transform: translateY(-50%) !important;*/ /* Центрируем по вертикали */
/*z-index: 5;
    }*/

.ch-all {
    height: 21px !important;
    width: 21px !important;
    /*border: 1px solid #A6A6A6;
    background: #FFF;*/
}

    .ch-all > .ant-checkbox-inner {
        height: 21px !important;
        width: 21px !important;
        border-color: #A6A6A6 !important;
    }

.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner {
    border-color: #A6A6A6;
}

.ant-checkbox-input:checked + .ant-checkbox-inner {
    background-color: #ffffff !important;
    border-color: #A6A6A6 !important;
}

    .ant-checkbox-input:checked + .ant-checkbox-inner::after {
        position: absolute;
        display: table;
        border: 2px solid #A6A6A6;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(1) translate(-50%, -50%);
        opacity: 1;
        transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
        content: ' ';
    }

.ant-checkbox-inner::after {
    position: absolute;
    top: 44%;
    left: 21.5%;
    display: table;
    width: 6.714286px;
    height: 11.142857px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) scale(0) translate(-50%, -50%);
    opacity: 0;
    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
    content: ' ';
}

.ant-checkbox-checked::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #A6A6A6;
    border-radius: 2px;
    visibility: hidden;
    animation: antCheckboxEffect 0.36s ease-in-out;
    animation-fill-mode: backwards;
    content: '';
}

.text-right-panel {
    color: rgba(0, 0, 0, 0.80);
    text-align: center;
    font-family: Inter;
    font-size: 15.732px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.475px;
}

.link-login {
    color: #000;
    font-family: Inter;
    font-size: 15.732px;
    font-style: normal;
    font-weight: 700;
    line-height: 22.475px;
}

.btn-main {
    display: flex;
    padding: 18.314px 15.697px;
    justify-content: center;
    align-items: center;
    gap: 10.465px;
    width: 100%;
    border-radius: 15.697px;
    border: 1.046px solid #000;
    background: linear-gradient(90deg, #1C1C1C 0%, #231F20 100%);
    box-shadow: 0 -2.616px 23.546px 0 rgba(0, 0, 0, 0.50) inset, 0 2.616px 20.93px 0 rgba(0, 0, 0, 0.50) inset;
    color: #FFF;
    text-align: center;
    font-family: "Inter Display";
    font-size: 18.314px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    /*text-transform: capitalize;*/
    background-color: transparent !important;
    border: none !important;
    cursor: pointer;
}

    .btn-main:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: #cccccc; /* Или любой другой нейтральный цвет */
    }

/*  .btn-main > button {
        color: #FFF;
        text-align: center;
        font-family: "Inter Display";
        font-size: 18.314px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-transform: capitalize;
        background-color:transparent!important;
        border:none!important;
    }*/


.validation-message {
    color: red !important;
    font-family: "Inter Display" !important;
    font-weight: 100 !important;
    font-size: 12px;
    margin-top: 2px;
}

/* Общий контейнер (черная капсула) */
.segmented-control {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    /*max-width: 400px;*/ /* Задайте нужную вам ширину */
    /*height: 48px;*/
    height: 47px;
    padding: 4px;
    align-items: flex-start;
    background-color: #1a1a1a; /* Темный фон */
    border: 2px solid #1a1a1a;
    border-radius: 16px;
    box-sizing: border-box;
    overflow: hidden;
    user-select: none;
}

/* Контейнер-капсула */
/*.segmented-control {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
    height: 48px;
    background-color: #1a1a1a;
    border-radius: 24px;
    padding: 2px;
    box-sizing: border-box;
}*/

/* Кнопки переключения внутри капсулы */
.segment-btn {
    position: relative;
    z-index: 2;
    flex: 1;
    height: 100%;
    background: none;
    border: none;
    font-family: 'Inter Display SemiBold';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 22.5px; /* 150% */
    letter-spacing: -0.234px;
    color: #ffffff;
    cursor: pointer;
    outline: none;
    transition: color 0.25s ease;
}

    /* Цвет текста активной кнопки */
    .segment-btn.active {
        color: #000000;
    }

/* Белая подложка-бегунок */
.segmented-control__slider {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
    width: calc(50% - 2px);
    height: calc(100% - 4px);
    background-color: #ffffff;
    border-radius: 16px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(0);
}

    /* Сдвиг бегунка вправо, если активен телефон */
    .segmented-control__slider.slide-right {
        transform: translateX(100%);
    }

/* Плавное появление полей ввода при переключении */
.animate-fade-in {
    animation: fadeIn 0.2s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.grid-panel-code {
    display: grid;
    grid-template-rows: repeat(6, auto);
    padding-left: 69px;
    padding-right: 69px;
    margin-top: 245px;
}

    .grid-panel-code > div:nth-child(1) {
        margin-bottom: 23px;
    }

    .grid-panel-code > div:nth-child(4) {
        margin-top: 24px;
    }

    .grid-panel-code > div:nth-child(6) {
        margin-top: 24px;
    }

.otp-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
}

.otp-input {
    display: flex;
    width: 56px;
    height: 68px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #1D1D1F;
    font-family: "Inter Display";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 42px; /* 150% */
    text-align: center;
}

    .otp-input:focus {
        border: 2px solid #1D1D1F;
    }

.verify-btn {
    background-color: #e0e0e0;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    display: flex;
    height: 52px;
    padding: 18.314px 15.697px;
    justify-content: center;
    align-items: center;
    gap: 10.465px;
    width: 100%;
    border-radius: 15.697px;
    border: 1.046px solid #000;
    /* background: linear-gradient(90deg, #1C1C1C 0%, #231F20 100%);*/
    /*box-shadow: 0 -2.616px 23.546px 0 rgba(0, 0, 0, 0.50) inset, 0 2.616px 20.93px 0 rgba(0, 0, 0, 0.50) inset;*/
    /*color: #FFF;*/
    text-align: center;
    font-family: "Inter Display";
    font-size: 18.314px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    /*text-transform: capitalize;*/
    /*background-color: transparent !important;*/
    border: none !important;
}

    .verify-btn:not(:disabled) {
        background-color: #000000;
        color: #ffffff;
        border: 1.046px solid #000;
        background: linear-gradient(90deg, #1C1C1C 0%, #231F20 100%);
        box-shadow: 0 -2.616px 23.546px 0 rgba(0, 0, 0, 0.50) inset, 0 2.616px 20.93px 0 rgba(0, 0, 0, 0.50) inset;
        cursor: pointer;
    }

.hidden-element {
    /*display: none !important;*/
    color: rgba(0, 0, 0, 0.30) !important;
}

.timer-text {
    color: #86868B;
    text-align: center;
    font-family: "Inter Display";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.5px; /* 150% */
}

.resend-link {
    color: #86868B;
    font-family: "Inter Display";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.5px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    cursor: pointer;
    border: none;
    background: none;
}

    .resend-link:hover {
        color: rgba(0, 0, 0, 0.50);
    }

    .resend-link[disabled] {
        cursor: no-drop;
    }

.code-header-sub {
    color: #86868B;
    font-family: "Inter Display";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px; /* 150% */
}

.resend-container {
    text-align: center;
}

.icon-prev {
    cursor: pointer;
}

.grid-main {
    display: grid;
    grid-template-columns: 267px 1fr;
    height: 100%;
}

    .grid-main > div:first-child {
        border-right: 1px solid #F4F4F4;
    }

.grid-main-profile {
    display: grid;
    grid-template-rows: repeat(7, auto);
    grid-row-gap: 5px;
}

    .grid-main-profile > div:nth-child(4) {
        padding-top: 21px;
        padding-bottom: 17px;
    }

    .grid-main-profile > div:nth-child(6) {
        padding-top: 30px;
        padding-bottom: 13px;
    }

    .grid-main-profile > div:nth-child(8) {
        padding-top: 30px;
        padding-bottom: 13px;
    }

.text-account {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .text-account > span {
        color: #6A7282;
        font-family: "Inter Display";
        font-size: 14.324px;
        font-style: normal;
        font-weight: 400;
        line-height: 21.487px; /* 150% */
        letter-spacing: 0.358px;
        text-transform: uppercase;
    }

.bullet-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #6A7282;
}

.text-all-header {
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 33.858px;
    font-style: normal;
    font-weight: 600;
    line-height: 50.787px; /* 150% */
}

.text-all-header-sub {
    color: #4A5565;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.393px; /* 150% */
}

.text-sub-header {
    color: #86868B;
    font-family: "Inter Display";
    font-size: 14.26px;
    font-style: normal;
    font-weight: 500;
    line-height: 14.725px; /* 103.264% */
    letter-spacing: 0.785px;
    text-transform: uppercase;
}



@media (max-width: 768px) {
    .grid-main-login {
        grid-template-columns: 0px 1fr 0px;
        justify-items: stretch;
        align-items: baseline;
    }

    .header-main {
        font-size: 32.502px;
    }

    .sub-header-main {
        color: rgba(0, 0, 0, 0.80);
        font-family: Inter;
        font-size: 18.097px;
        line-height: 25.853px;
    }

    .text-right-panel {
        font-size: 1.2em;
        line-height: 25.853px;
    }

    .link-login {
        color: #000;
        font-size: 1.2em;
        line-height: 25.853px;
    }

    .text-all-header-sub {
        font-size: 11.582px;
        line-height: 16.546px;
    }

    .text-account > span {
        font-size: 9.928px;
        line-height: 13.237px; /* 133.333% */
        letter-spacing: 0.248px;
    }

    .text-all-header {
        font-size: 24.819px;
        line-height: 29.783px; /* 120% */
    }

    .text-sub-header {
        font-size: 9px;
        line-height: 13.5px; /* 150% */
        letter-spacing: 0.9px;
    }

    .grid-main-profile > div:nth-child(4) {
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .grid-main-profile > div:nth-child(6) {
        padding-top: 17px;
        padding-bottom: 16px;
    }

    .btn-main {
        font-size: 13.666px;
        font-weight: 500;
        line-height: 20.499px;
        letter-spacing: -0.267px;
        padding: 11.531px 0 11.884px 0;
        margin-top: 15px;
    }

    .input-container input {
        color: #1D1D1F;
        font-family: Inter;
        font-size: 13.666px;
        font-style: normal;
        font-weight: 400;
        line-height: 20.499px; /* 150% */
        letter-spacing: -0.267px;
    }

    .input-container label {
        color: #A6A6A6;
        font-family: "Inter Display";
        font-size: 14.363px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .grid-panel-code {
        margin-top: 0px;
        padding: 0 26px;
    }
}
/* Контейнер кнопок по умолчанию (для десктопов) */
.cookie-banner-buttons {
    display: flex;
    gap: 12px;
}

    /* Кнопки по умолчанию занимают ширину по контенту с внутренними отступами */
    .cookie-banner-buttons .cookie-btn {
        padding: 0 24px;
        width: auto;
    }

/* Адаптив для мобильных устройств (экраны менее 576px) */
@media (max-width: 575.98px) {
    .cookie-banner-buttons {
        flex-direction: column; /* Выстраиваем кнопки вертикально */
        gap: 8px;
    }

        .cookie-banner-buttons .cookie-btn {
            width: 100%; /* Каждая кнопка растягивается на всю ширину баннера */
            padding: 0; /* Сбрасываем боковые отступы, так как ширина теперь 100% */
            text-align: center;
        }
}

.grecaptcha-badge {
    display: none !important;
}
/* Изменяет цвет самого крутящегося элемента */
.ant-spin {
    color: #1d39a7 !important;
}

/* Изменяет цвет точек стандартного спиннера */
.ant-spin-dot-item {
    background-color: #1d39a7 !important;
}

/* Изменяет цвет подписи под спиннером */
.ant-spin-text {
    color: #1d39a7 !important;
}

.ant-layout {
    background-color: #ffffff !important;
}

/* Возвращаем корневому компоненту естественное поведение */
/*.global-screen-spinner,
.global-screen-spinner .ant-spin-nested-loading {
    display: block !important;
    width: 100%;
    height: auto;
}*/

/* Стилизуем маску загрузки, полностью изолируя её от .ant-layout */
/*.global-screen-spinner .ant-spin-nested-loading > div > .ant-spin {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;*/
/* Центрирование иконки и текста */
/*display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;*/
/* Эффект затемнения */
/*background-color: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 9999 !important;
    }*/

/* Плавное размытие контента приложения (включая .ant-layout) при загрузке */
/*.global-screen-spinner .ant-spin-blur {
        filter: blur(2px) !important;
        opacity: 0.8 !important;
    }*/

/* Стили текста подсказки */
/*.global-screen-spinner .ant-spin-text {
        color: #ffffff !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
        margin-top: 16px !important;
    }*/
/* Эффект тряски для контейнера */
.otp-container.shake {
    animation: shakeEffect 0.4s ease-in-out;
}

@keyframes shakeEffect {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-6px);
    }

    40%, 80% {
        transform: translateX(6px);
    }
}

.grid-promo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20.75px;
}

    .grid-promo > div {
        display: grid;
        grid-template-rows: repeat(3, auto);
        border-radius: 12.967px;
        border: 1.297px solid #E5E5E5;
        background: #FFF;
        padding: 22.04px;
    }

        .grid-promo > div > div:first-child {
            padding-bottom: 15.67px;
        }

        .grid-promo > div > div:nth-child(2) {
            color: #0A0A0A;
            font-family: "Inter Display";
            font-size: 18.153px;
            font-style: normal;
            font-weight: 600;
            line-height: 23.599px;
            padding-bottom: 4.77px;
        }

        .grid-promo > div > div:nth-child(3) {
            color: #666;
            font-family: "Inter Display";
            font-size: 15.56px;
            font-style: normal;
            font-weight: 400;
            line-height: 21.784px; /* 140% */
        }


.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(311px, 1fr));
    /* Отступы между карточками (по горизонтали и вертикали) */
    gap: 20.75px;
    width: 100%;
    box-sizing: border-box;
    /*grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 20.75px;
    grid-row-gap: 20.75px;*/
}

/* Главный контейнер карточки */
.card-wrapper {
    /*width: 100%; 
    max-width: 200px;
    container-type: inline-size;*/ /* Включает отслеживание ширины для внутренних элементов */
    /*box-sizing: border-box;*/
}

    .card-wrapper > div:nth-child(2) {
        display: none;
    }

.member-card {
    width: 100%;
    max-width: 550px;
    aspect-ratio: 1.58 / 1; /* Пропорция стандартной ID-карты */
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 25.93px;
    border-radius: 20px; /* Четкий фиксированный радиус скругления */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Легкая тень для объема */
}

    .member-card.maag {
        background-color: #726251;
        background: url(/img/maag.jpg);
        background-size: cover;
    }

    .member-card.ecru {
        background-color: #8B2942;
        background: url(/img/ecru.jpg);
        background-size: cover;
        background-position: center;
    }

    .member-card.dub {
        background-color: #1A1A1A;
        background: url(/img/dub.jpg);
        background-size: cover;
        background-position: center;
    }

    .member-card.vilet {
        background-color: #FFEBD5;
        color: #000000;
        background: url(/img/vilet.jpg);
        background-size: cover;
        background-position: center;
    }

/* Верхняя линия (Брендинг) */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-card {
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 1;
}

.status-card {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Нижняя линия (Данные + QR) */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.user-info-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.name-card {
    color: #FFF;
    font-family: "Inter Display";
    font-size: 19.45px;
    font-style: normal;
    font-weight: 400;
    line-height: 29.175px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

    .name-card.vilet {
        /*color: #000000;*/
    }

.date-card {
    font-size: 13px;
    opacity: 0.6;
}

/* Блок QR-кода */
.qr-box-card {
    width: 70px; /* Фиксированный физический размер QR-кода */
    height: 70px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Запрещает сжимать QR-код */
}

    .qr-box-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.add-mobile-card {
    display: flex;
    height: 53.811px;
    padding: 12.967px 106.488px 12.967px 106.467px;
    justify-content: center;
    align-items: center;
    gap: 10.373px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 12.967px;
    border: 1.297px solid #E5E5E5;
    background: #FFF;
    margin-top: 15.56px;
    cursor: pointer;
}

    .add-mobile-card > span {
        white-space: nowrap;
    }

/* Стили для состояния блокировки */
.disabled-div {
    background-color: #6c757d; /* Серый цвет */
    cursor: not-allowed; /* Курсор "запрещено" */
    pointer-events: none; /* Браузер полностью игнорирует любые клики по этому элементу */
    opacity: 0.65;
}

.panel-add-card {
    padding: 32.416px;
    border-radius: 18.153px;
    border: 1.297px solid #E5E5E5;
    background: #FFF;
    margin-top: 15.56px;
}

.grid-add-card {
    /*margin-top: 30px;*/
}

.item-card-add {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    margin-bottom: 20px;
}

    .item-card-add:last-child {
        margin-bottom: 0;
    }


.add-card-header {
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 20.746px;
    font-style: normal;
    font-weight: 600;
    line-height: 31.12px; /* 150% */
}

.add-card-sub-header {
    color: #666;
    font-family: "Inter Display";
    font-size: 16.857px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.285px; /* 150% */
    padding-bottom: 20.03px;
}

.add-card-brand {
    display: grid;
    grid-template-columns: auto 1fr;
}

    .add-card-brand > div:first-child {
        margin-right: 20.75px;
    }

.brand-icon {
    display: flex;
    width: 62.239px;
    height: 62.239px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 12.967px;
    background: #F5F5F5;
}

.brand-header {
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 18.153px;
    font-style: normal;
    font-weight: 600;
    line-height: 27.23px; /* 150% */
}

.brand-sub-header {
    color: #666;
    font-family: "Inter Display";
    font-size: 15.56px;
    font-style: normal;
    font-weight: 400;
    line-height: 23.34px; /* 150% */
}

.btn-add-card {
    display: flex;
    padding: 12.967px 25.933px 12.251px 25.933px;
    justify-content: center;
    align-items: center;
    gap: 9.801px;
    border-radius: 43508444px;
    background: #000;
    cursor: pointer;
}

    .btn-add-card > span {
        color: #FFF;
        text-align: center;
        font-family: "Inter Display";
        font-size: 16.857px;
        font-style: normal;
        font-weight: 500;
        line-height: 25.285px; /* 150% */
    }

.help-sub-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 35px;
    grid-row-gap: 17px;
    width: 100%;
    border-radius: 10.908px;
    border: 1.091px solid rgba(0, 0, 0, 0.10);
    background: #FFF;
    padding: 21.815px;
}

    .help-sub-panel > div {
        display: grid;
        grid-template-rows: repeat(4, auto);
        grid-row-gap: 10px;
    }

        .help-sub-panel > div > div:first-child {
            color: #0A0A0A;
            font-family: "Inter Display";
            font-size: 18.153px;
            font-style: normal;
            font-weight: 600;
            line-height: 23.599px;
            padding-bottom: 4.77px;
        }

        .help-sub-panel > div > div > div:nth-child(2) {
            display: grid;
            grid-template-rows: auto;
            text-transform: uppercase;
        }

.links-app {
    text-decoration: underline;
    color: #6d6a6a;
}

/* Контейнер для всплывающего окна (изначально скрыт) */
.qr-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(255 255 255 / 70%); /* Затемнение фона */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease; /* Плавное появление фона */
}

    /* Активное состояние оверлея */
    .qr-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

/* Модальное окно внутри оверлея */
.qr-modal {
    background: white;
    padding: 20px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    /* Эффект увеличения из центра */
    transform: scale(0.7);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Эффект увеличения при открытии */
.qr-overlay.active .qr-modal {
    transform: scale(1);
}

/* Стили для увеличенного QR-кода */
.qr-large {
    width: 300px; /* Оптимальный размер для сканирования */
    height: 300px;
    display: block;
}

/* Кнопка закрытия */
.close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #000;
    font-size: 24px;
    cursor: pointer;
}

/* Маленький QR-код на карте */
.qr-small {
    cursor: pointer;
    transition: transform 0.2s;
}

    .qr-small:hover {
        transform: scale(1.05); /* Легкий интерактив при наведении */
    }

/*.logo-panel {*/
/*text-align:center;*/
/*}

    .logo-panel > img {
        width: 300px;
        margin-left: 69px;
        margin-bottom: -107px;
    }*/

.purchases-brand {
    display: flex;
    padding: 1.302px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 20.836px;
    border: 1.302px solid #E5E7EB;
    background: #FFF;
}

.purchases-brand-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    height: 100.922px;
    align-items: center;
    width: 100%;
    padding-left: 26px;
    padding-right: 26px;
    cursor: pointer;
}

    .purchases-brand-header, .purchases-brand-header * {
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 и старые версии Edge */
        user-select: none; /* Стандартное свойство (Chrome, Firefox, Opera) */
    }

        .purchases-brand-header > div:nth-child(4) {
            text-align: right;
            padding-right: 25px;
        }

.purchase-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 15.63px;
    margin-top: 22px;
}

.purchase-count-header {
    color: #4A5565;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.393px; /* 150% */
}

.purchase-filter-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 11.72px 22.138px 11.114px 0px;
    justify-content: flex-start;
    align-items: center;
    gap: 10.418px;
}

.purchase-filter-date {
    display: flex;
    padding: 11.72px 22.138px 11.114px 22.138px;
    justify-content: center;
    align-items: center;
    gap: 10.418px;
    border-radius: 13.022px;
    border: 1.302px solid #E5E7EB;
    background: #FFF;
}

.purchase-filter-date-text {
    color: #0A0A0A;
    text-align: center;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 500;
    line-height: 25.393px; /* 150% */
}

.purchase-filter-brand {
    display: flex;
    padding: 11.72px 22.138px 11.114px 22.138px;
    justify-content: center;
    align-items: center;
    gap: 9.978px;
    border-radius: 13.022px;
    border: 1.302px solid #E5E7EB;
    background: #FFF;
}

.purchase-filter-brand-text {
    color: #0A0A0A;
    text-align: center;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 500;
    line-height: 25.393px; /* 150% */
}

.purchase-filter-type {
    display: flex;
    padding: 11.72px 22.138px 11.114px 22.138px;
    justify-content: center;
    align-items: center;
    gap: 10.022px;
    border-radius: 13.022px;
    border: 1.302px solid #E5E7EB;
    background: #FFF;
}

.purchase-filter-type-text {
    color: #0A0A0A;
    text-align: center;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 500;
    line-height: 25.393px; /* 150% */
}

.arrow-filter {
    width: 20.836px;
    height: 20.836px;
}

.purchase-brand-name {
    color: #0A0A0A;
    text-align: center;
    font-family: "Inter Display";
    font-size: 14.324px;
    font-style: normal;
    font-weight: 700;
    line-height: 21.487px; /* 150% */
    letter-spacing: 0.358px;
    background-color: #F5F5F5;
    padding: 5px 10px;
    border-radius: 5px;
}

.purchase-status {
    color: #2E7D32;
    text-align: center;
    font-family: "Inter Display";
    font-size: 13.022px;
    font-style: normal;
    font-weight: 500;
    line-height: 19.533px; /* 150% */
    letter-spacing: 0.326px;
}

.purchase-location-name {
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 18.231px;
    font-style: normal;
    font-weight: 500;
    line-height: 27.347px; /* 150% */
}

.purchase-type {
    color: #6A7282;
    font-family: "Inter Display";
    font-size: 13.022px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.533px; /* 150% */
    letter-spacing: 0.326px;
    text-transform: uppercase;
    display: none;
}

.purchase-brand-name-d {
    padding: 5px 10px;
    border-radius: 5px;
    display: inline;
    margin-left: 15.65px;
    text-transform: uppercase;
    font-family: Inter Display;
    font-weight: 500;
    font-size: 13.02px;
    line-height: 19.53px;
    letter-spacing: 0.33px;
    text-align: center;
}

    .purchase-brand-name-d.green {
        background-color: #E8F5E9;
        color: #2E7D32;
    }

    .purchase-brand-name-d.red {
        background-color: #FFEBEE;
        color: #C62828;
    }

.purchase-type-value {
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 500;
    line-height: 25.393px; /* 150% */
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    /*background-color: #f5f5f5;*/
    cursor: pointer;
}

    .accordion-header, .accordion-header * {
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 и старые версии Edge */
        user-select: none; /* Стандартное свойство (Chrome, Firefox, Opera) */
    }

.purchase-date {
    color: #4A5565;
    text-align: center;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 500;
    line-height: 25.393px; /* 150% */
    padding-right: 16px;
}

.purchase-sum {
    color: #0A0A0A;
    text-align: center;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 600;
    line-height: 25.393px; /* 150% */
}

/* Поведение стрелочки */
.accordion-arrow {
    transition: transform 0.3s ease;
}

    .accordion-arrow.is-flipped {
        transform: rotate(180deg);
    }

/* Анимация высоты через CSS Grid (работает идеально без фиксированного max-height) */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out, background-color 0.3s;
    width: 100%;
    /*background-color: #fff;*/
}

    .accordion-content.is-open {
        grid-template-rows: 1fr;
        /*background-color: #fafafa;*/
    }

/* Внутренний контейнер прячет текст во время сворачивания */
.content-inner {
    overflow: hidden;
    /*padding: 0 15px;*/
    transition: padding 0.3s ease-out;
}

.accordion-content.is-open .content-inner {
    /*padding: 15px;*/
}

.purchase-product-data {
    display: flex;
    padding: 27.347px 26.044px 0 26.044px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20.836px;
    flex-shrink: 0;
    align-self: stretch;
    border-top: 1.302px solid #E5E7EB;
}

.purchase-product-grid {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-row-gap: 10px;
    width: 100%;
    height: 100%;
}

.purchase-product-grid-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-column-gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1.302px solid #E5E7EB;
    align-items: center;
}

    .purchase-product-grid-header > div:nth-child(2) {
        line-height: 100%;
        padding-right: 30px;
    }

.purchase-order-date {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-row-gap: 5px;
}

.purchase-order-date-text {
    color: #6A7282;
    font-family: "Inter Display";
    font-size: 13.022px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.533px; /* 150% */
    letter-spacing: 0.326px;
    text-transform: uppercase;
}

.purchase-order-date-value {
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 700;
    line-height: 25.393px; /* 150% */
}

.purchase-store {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-row-gap: 5px;
    padding-bottom: 27px;
    padding-top: 20px;
}

.purchase-store-header {
    color: #6A7282;
    font-family: "Inter Display";
    font-size: 13.022px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.533px; /* 150% */
    letter-spacing: 0.326px;
    text-transform: uppercase;
}

.purchase-store-location-name {
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 700;
    line-height: 25.393px; /* 150% */
}

.purchase-store-location-address {
    color: #86868B;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.393px; /* 150% */
}

.purchase-product-sku {
    color: #86868B;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.393px; /* 150% */
}

.purchase-product-body {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 10px;
    padding-bottom: 48px;
}

    .purchase-product-body > div {
        display: grid;
        grid-template-rows: auto auto;
        grid-row-gap: 5px;
    }

.purchase-product-name {
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 16.929px;
    font-style: normal;
    font-weight: 700;
    line-height: 25.393px; /* 150% */
}

.purchase-product-attr {
    color: #6A7282;
    font-family: "Inter Display";
    font-size: 15.627px;
    font-style: normal;
    font-weight: 400;
    line-height: 23.44px; /* 150% */
}

.purchase-product-price {
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 18.231px;
    font-style: normal;
    font-weight: 700;
    line-height: 27.347px; /* 150% */
}

.purchase-product-discount-grid {
}

.purchase-product-grid-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 11px;
    padding-bottom: 20px;
    border-top: 1.302px solid #E5E7EB;
    width: 100%;
}

    .purchase-product-grid-footer > div {
        color: #0A0A0A;
        font-family: "Inter Display";
        font-size: 18.231px;
        font-style: normal;
        font-weight: 600;
        line-height: 27.347px; /* 150% */
    }

        .purchase-product-grid-footer > div:last-child {
            text-align: right;
        }

.purchase-product-grid-footer-check {
    width: 100%;
    margin-top: -35px;
    margin-bottom: 20px;
    justify-items: center;
}

    .purchase-product-grid-footer-check > button {
        max-width: 350px;
        padding: 10px;
    }
/*Стили для ниспадающего списка*/
/* Контейнер выпадающего списка */
.dropdown-wrapper {
    position: relative;
    display: inline-block;
}

/* Кнопка-триггер */
.dropdown-trigger {
    /*background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000;*/
    display: flex;
    padding: 11.72px 22.138px 11.114px 22.138px;
    justify-content: center;
    align-items: center;
    gap: 9.978px;
    border-radius: 13.022px;
    border: 1.302px solid #E5E7EB;
    background: #FFF;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .dropdown-trigger > span {
        color: #0A0A0A;
        text-align: center;
        font-family: "Inter Display";
        font-size: 16.929px;
        font-style: normal;
        font-weight: 500;
        line-height: 25.393px;
    }

    .dropdown-trigger:hover {
        border-color: #b5b5b5;
    }
    /* Состояние кнопки при открытом окне */
    .dropdown-trigger.active {
        border-color: #000;
        /*border-width: 2px;
        padding: 9px 17px; */
    }

/* ======================================================== */
/* 💻 СТИЛИ ДЛЯ ПК (Выпадающее меню под кнопкой)            */
/* ======================================================== */
.dropdown-menu {
    display: none; /* Прячем по умолчанию */
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border-radius: 16px;
    /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);*/
    width: 280px;
    padding: 20px;
    z-index: 100;
    box-sizing: border-box;
    /*border-radius: 16px;*/
    border: 1px solid #E5E7EB;
    /*background: #FFF;*/
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}

    /* Показываем меню на ПК при наличии класса .show */
    .dropdown-menu.show {
        display: block;
    }

.mobile-handle {
    display: none;
}

/* Заголовок BRAND серого цвета */
.dropdown-header-title {
    color: #6A7282;
    font-family: "Inter Display";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: 1.2px;
    padding-bottom: 15px;
    text-transform: uppercase;
}

/* Список чекбоксов */
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

/* Контейнер строки чекбокса */
.checkbox-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    position: relative;
}

    /* Скрываем нативный чекбокс браузера */
    .checkbox-item input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Кастомный квадрат чекбокса */
.custom-checkbox {
    height: 20px;
    width: 20px;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-right: 12px;
    display: inline-block;
    transition: background-color 0.15s, border-color 0.15s;
}

/* Когда чекбокс нажат — красим его в черный цвет */
.checkbox-item input:checked ~ .custom-checkbox {
    background-color: #000;
    border-color: #000;
}

/* Текст лейбла у чекбокса */
.checkbox-label {
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

/* Линия разделения перед кнопками управления */
.dropdown-footer {
    border-top: 1px solid #eee;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Кнопка Clear */
.btn-clear {
    background: none;
    border: none;
    color: #757575;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 0;
}

    .btn-clear:hover {
        color: #000;
    }

/* Кнопка Apply */
.btn-apply {
    background: #000;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .btn-apply:hover {
        background: #222;
    }

.svg-circle-green {
    width: 33px;
    height: 33px;
}

.only-mobile {
    display: none;
}

.logo-panel > .maag-logo {
    width: 280px;
    margin-left: 69px;
    margin-bottom: -80px;
}

.logo-panel > .dub-logo {
    width: 280px;
    margin-left: 69px;
    margin-bottom: -80px;
}

.logo-panel > .ecru-logo {
    width: 280px;
    margin-left: 69px;
    margin-bottom: -80px;
}

.logo-panel > .vilet-logo {
    width: 280px;
    margin-left: 65px;
    margin-bottom: -80px;
}


/* Адаптивность под совсем маленькие экраны мобильных */
@media (max-width: 575.98px) {

    .only-mobile {
        display: inherit;
    }

    .grid-promo {
        grid-template-columns: 1fr;
        grid-row-gap: 10.7px;
    }

        .grid-promo > div > div:nth-child(2) {
            font-size: 15.16px;
            font-weight: 400;
            line-height: 19.619px;
        }

        .grid-promo > div > div:nth-child(3) {
            color: #86868B;
            font-size: 13.376px;
            font-weight: 400;
            line-height: 17.835px;
        }

        .grid-promo > div {
            border: none;
            padding: 0;
            grid-template-columns: auto 1fr;
            grid-column-gap: 12px;
        }

            .grid-promo > div > .item-1 {
                grid-row: span 2;
            }

                .grid-promo > div > .item-1 > img {
                    width: 16px;
                }

    .member-card {
        padding: 16px;
        border-radius: 14px;
        aspect-ratio: 1.95 / 1;
    }

    .logo-card {
        font-size: 26px;
    }

    .name-card {
        font-size: 13.376px;
        font-weight: 400;
        line-height: 20.065px;
    }

    .qr-box-card {
        width: 55px;
        height: 55px;
        padding: 4px;
    }

    .card-wrapper > div:nth-child(2) {
        display: grid;
        grid-template-columns: auto 1fr;
        padding: 10.7px 0px;
        /*column-gap: 18.33px;*/
        padding-bottom: 10px;
        justify-items: end;
    }

        .card-wrapper > div:nth-child(2) > div > img {
            height: 48px;
        }

    .grid-cards {
        gap: 10.7px;
    }

    .add-mobile-card {
        display: none;
    }

    .btn-add-card {
        padding: 5.35px 16.958px 7.982px 17.835px;
        gap: 9.801px;
        border-radius: 43508444px;
        background: #000;
        cursor: pointer;
    }

        .btn-add-card > span {
            font-size: 11.376px;
            font-style: normal;
            font-weight: 500;
            line-height: 13.065px; /* 150% */
        }

    #form_registration {
        height: 100%;
    }

    .help-sub-panel {
        grid-template-columns: 1fr;
    }

    .item-card-add {
        grid-template-columns: 1fr;
    }

    .brand-sub-header {
        font-size: 13px;
        line-height: 18px;
    }

    .brand-icon {
        float: left;
    }

    .add-card-brand {
        display: table;
        clear: both;
        content: "";
        margin-bottom: 10px;
        margin-top: 15px;
    }

        .add-card-brand:first-child {
            margin-top: 0px;
        }

    .add-card-header {
        font-size: 16.746px;
    }

    .add-card-sub-header {
        font-size: 14.857px;
        line-height: 20.285px;
    }

    .logo-panel > .maag-logo {
        width: 250px;
        margin-left: 38px;
        margin-bottom: 40px;
    }

    .logo-panel > .dub-logo {
        width: 250px;
        margin-left: 38px;
        margin-bottom: 40px;
    }

    .logo-panel > .ecru-logo {
        width: 250px;
        margin-left: 38px;
        margin-bottom: 40px;
    }

    .logo-panel > .vilet-logo {
        width: 250px;
        margin-left: 38px;
        margin-bottom: 40px;
    }

    .purchase-brand-name {
        color: #0A0A0A;
        font-family: "Inter Display";
        font-size: 13.237px;
        font-style: normal;
        font-weight: 600;
        line-height: 19.855px; /* 150% */
    }

    .purchases-brand-header {
        padding-left: 17px;
        padding-right: 17px;
    }

    .purchase-order-date-text {
        font-size: 9.928px;
        font-style: normal;
        font-weight: 400;
        line-height: 13.237px; /* 133.333% */
    }

    .purchase-order-date-value {
        font-size: 13.237px;
        font-weight: 600;
        line-height: 19.855px; /* 150% */
    }

    .mobile-right {
        text-align: right;
    }

    .purchases-brand-header {
        grid-template-columns: 1fr auto auto; /* Меняем на 3 столбца */
        /* Задаем карту сетки: первые 3 элемента идут в первый столбец */
        grid-template-areas:
            "area-1 area-4 area-5"
            "area-2 .   ."
            "area-3 .   .";
    }
    /* Привязываем элементы к созданным областям */
    .grid-header-item-1 {
        grid-area: area-1;
    }

    .grid-header-item-2 {
        grid-area: area-2;
    }

    .grid-header-item-3 {
        grid-area: area-3;
    }

    .grid-header-item-4 {
        grid-area: area-4;
    }

    .grid-header-item-5 {
        grid-area: area-5;
    }

    .purchase-location-name {
        color: #4A5565;
        font-family: "Inter Display";
        font-size: 11.582px;
        font-style: normal;
        font-weight: 400;
        line-height: 16.546px; /* 142.857% */
    }

    .purchases-brand-header > div:nth-child(4) {
        padding-right: 9px;
    }

    .purchase-date {
        display: none;
    }

    .purchase-type {
        display: none;
    }

    .purchase-sum {
        color: #0A0A0A;
        font-family: "Inter Display";
        font-size: 13.237px;
        font-style: normal;
        font-weight: 600;
        line-height: 19.855px; /* 150% */
    }

    .purchase-brand-name {
        font-family: Inter Display;
        font-weight: 600;
        font-size: 13.24px;
        line-height: 19.86px;
        letter-spacing: 0px;
    }

    .purchase-brand-name-d {
        margin-left: 7px;
        font-family: Inter Display;
        font-weight: 400;
        font-size: 9.93px;
        line-height: 13.24px;
        letter-spacing: 0px;
        text-align: center;
    }

    .dropdown-trigger {
        display: flex;
        padding: 7.446px 10.755px 6.992px 10.755px;
        justify-content: center;
        align-items: flex-start;
        gap: 6.618px;
        border-radius: 8.273px;
        border: 0.827px solid #D1D5DC;
    }

        .dropdown-trigger > span {
            color: #0A0A0A;
            text-align: center;
            font-family: "Inter Display";
            font-size: 11.582px;
            font-style: normal;
            font-weight: 500;
            line-height: 16.546px; /* 142.857% */
        }

    .arrow-filter {
        width: 14px;
        height: 14px;
        margin-top: 2px;
    }

    .dropdown-menu {
    }

    .svg-circle-green {
        width: 19px;
        height: 19px;
    }

    .purchase-store-header {
        font-size: 9.928px;
        font-weight: 400;
        line-height: 13.237px; /* 133.333% */
    }

    .purchase-store-location-name {
        font-size: 11.582px;
        font-weight: 600;
        line-height: 16.546px; /* 142.857% */
    }

    .purchase-store-location-address {
        font-size: 11.582px;
        font-weight: 400;
        line-height: 16.546px; /* 142.857% */
    }

    .purchase-product-name {
        font-size: 13.237px;
        font-weight: 600;
        line-height: 19.855px; /* 150% */
    }

    .purchase-product-sku {
        font-size: 11.582px;
        font-weight: 400;
        line-height: 16.546px; /* 142.857% */
    }

    .purchase-product-price {
        font-size: 13.237px;
        font-style: normal;
        font-weight: 600;
        line-height: 19.855px; /* 150% */
    }

    .purchase-product-body {
        padding-bottom: 30px;
    }

    .purchase-product-grid-footer > div {
        font-size: 13.237px;
        font-weight: 600;
        line-height: 19.855px; /* 150% */
    }

    .dropdown-header-title {
        display: grid;
        grid-template-columns: 1fr auto;
    }
}

@media (max-width: 360px) {
    .card-wrapper > div:nth-child(2) {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

/* ======================================================== */
/* 📱 СТИЛИ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (Шторка снизу)          */
/* ======================================================== */
@media (max-width: 767px) {
    .dropdown-menu {
        display: flex !important;
        position: fixed;
        top: 60px;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        height: calc(100vh - 60px) !important;
        max-height: calc(100vh - 60px) !important;
        /* 🌟 Современные браузеры переопределят через dvh, где он поддерживается */
        height: calc(100dvh - 60px) !important;
        max-height: calc(100dvh - 60px) !important;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
        padding: 16px 24px 100px 24px;
        flex-direction: column;
        box-sizing: border-box !important;
        background: #fff;
        z-index: 999;
        margin-top: 0px;
        touch-action: none;
        transform: translateY(110%);
        /* 🌟 Закрытие: чуть дольше и мягче */
        transition: transform 0.32s cubic-bezier(0.32, 0, 0.67, 0), margin-top 0.32s cubic-bezier(0.32, 0, 0.67, 0);
    }

        .dropdown-menu.show {
            transform: translateY(0%) !important;
            /* 🌟 Открытие: как было — более упругое и быстрое */
            transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

    /* Для прокрутки внутреннего списка чекбоксов возвращаем стандартный скролл тачпадом */
    .checkbox-list {
        flex-grow: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
        touch-action: pan-y; /* Разрешаем вертикальный скролл только внутри списка брендов */
    }

    /*.dropdown-footer {
        position: absolute;
        bottom: 24px;
        left: 24px;
        right: 24px;
        background: #fff;
        border-top: none;
        padding-top: 12px;
        display: flex;
        gap: 16px;
    }*/

    .dropdown-footer {
        position: absolute;
        bottom: max(24px, env(safe-area-inset-bottom, 24px));
        left: 24px;
        right: 24px;
        background: #fff;
        border-top: none;
        padding-top: 12px;
        display: flex;
        gap: 16px;
    }

    .btn-clear, .btn-apply {
        flex: 1;
        height: 48px;
        border-radius: 24px;
        font-size: 16px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-clear {
        border: 1px solid #000;
        background: #fff;
        color: #000;
    }

    .btn-apply {
        background: #000;
        color: #fff;
    }

    .mobile-handle {
        display: block;
        width: 40px;
        height: 4px;
        background: #D1D5DC;
        border-radius: 2px;
        margin: 0 auto 16px auto;
    }

    .checkbox-list {
        padding-bottom: 90px; /* высота футера + отступы */
    }
}


/* Ключевые кадры для анимации выезда */
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* ===== ФИЛЬТР ПО ДАТЕ ===== */

.calendar-icon {
    width: 18px;
    height: 18px;
}

.dropdown-menu-date {
    width: 620px;
}

.date-header-mobile {
    display: none;
}

.date-filter-body {
    display: flex;
    gap: 28px;
}

.quick-select-panel {
    width: 220px;
    flex-shrink: 0;
}

.quick-select-list {
    gap: 0;
    margin-bottom: 0;
}

.quick-select-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 4px;
    cursor: pointer;
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    transition: background-color 0.15s;
}

    .quick-select-item:hover {
        background-color: #F5F5F5;
    }

    .quick-select-item.selected {
        background-color: #0A0A0A;
        color: #fff;
        padding-left: 12px;
        padding-right: 12px;
    }

.custom-range-section {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 16px;
}

.custom-range-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 4px 0;
}

.custom-range-title {
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 15px;
    font-weight: 500;
}

.custom-range-sub {
    color: #86868B;
    font-family: "Inter Display";
    font-size: 12.5px;
    margin-top: 2px;
}

.custom-range-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

    .custom-range-chevron.rotated {
        transform: rotate(90deg);
    }

.calendar-panel {
    flex-grow: 1;
    min-width: 0;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.calendar-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

    .calendar-nav-btn:hover {
        background-color: #F5F5F5;
    }

.calendar-month-title {
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 6px;
}

    .calendar-weekdays span {
        text-align: center;
        color: #86868B;
        font-size: 11px;
        text-transform: uppercase;
        font-weight: 500;
    }

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-row-gap: 2px;
}

.calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    cursor: pointer;
    position: relative;
    font-family: "Inter Display";
    font-size: 14px;
    color: #0A0A0A;
}

    .calendar-day.muted {
        color: #C4C4C4;
    }

    .calendar-day.in-range::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: #F0EAE0;
    }

    .calendar-day span {
        position: relative;
        z-index: 1;
    }

    .calendar-day.selected-edge span {
        background-color: #0A0A0A;
        color: #fff;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.calendar-range-summary {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
    color: #0A0A0A;
    font-family: "Inter Display";
    font-size: 14px;
    font-weight: 500;
}

/*============ЧЕК===============*/
/* Контейнер модального окна */
.receipt-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

/* Окно с фиксированной высотой и прокруткой */
.receipt-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    max-width: 450px;
    width: 100%;
    margin: 0 40px;
}

.receipt-modal-body {
    overflow-y: auto;
    padding-right: 8px;
}

/* Стилизация под термопринтер */
.receipt-paper {
    width: 380px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.4;
    color: #000;
    background-color: #fdfdfd;
    padding: 10px;
}

.receipt-center {
    text-align: center;
}

.receipt-bold {
    font-weight: bold;
}

/* Разделительные линии как на чеках */
.receipt-divider {
    border-top: 1px dashed #000;
    margin: 6px 0;
}

.receipt-line {
    border-top: 1px solid #000;
    margin: 6px 0;
}

/* Табличная верстка для ключ-значение */
.receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.receipt-row-key {
    text-align: left;
    padding-right: 10px;
}

.receipt-row-value {
    text-align: right;
    white-space: nowrap;
}

.receipt-item-title {
    margin-top: 5px;
    font-weight: bold;
}

.grid-check-header {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-row-gap: 10px;
    /*font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    font-family: sans-serif;
}

    .grid-check-header > div {
        text-align: center;
        font-size: 13px;
        color: #344d5c;
    }

        .grid-check-header > div:first-child {
            font-weight: 600;
        }

        .grid-check-header > div:nth-child(5) {
            font-weight: 700;
            font-size: 15px;
            color: #6b9fa3;
        }

.grid-check-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 10px;
    grid-row-gap: 3px;
    font-family: sans-serif;
    font-size: 11px;
    margin-top: 10px;
}

    .grid-check-body > div {
        font-weight: 100;
        color: #344d5c;
    }

        .grid-check-body > div:nth-child(2n+2) {
            text-align: right;
        }

.product-items {
    font-family: sans-serif;
    margin-top: 10px;
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.header-item-product {
    font-size: 16px;
    font-weight: bold;
}

.amount-item-product {
    font-weight: bold;
    text-align: right;
}

.item-product-all, .item-product-all-value {
    font-size: 16px;
    font-weight: bold !important;
    color: #000 !important;
    text-transform: uppercase !important;
}

.dop {
    font-size: 16px;
    font-weight: bold !important;
    color: #000 !important;
}

.panel-check-qr{
    text-align:center;
}
.panel-check-qr > img{
    display:inline;
}

.qr-100{
    width:100px;
    height:100px;    
}

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ===== */
@media (max-width: 767px) {
    .dropdown-menu-date {
        width: 100vw !important;
    }

    .date-header-desktop {
        display: none;
    }

    .date-header-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

        .date-header-mobile span:first-child {
            color: #0A0A0A;
            font-family: "Inter Display";
            font-size: 20px;
            font-weight: 600;
        }

    .date-cancel-link {
        color: #6A7282;
        font-family: "Inter Display";
        font-size: 15px;
        cursor: pointer;
    }

    .date-filter-body {
        position: relative;
        min-height: 420px; /* резервируем место под быстрый выбор, чтобы контейнер не "прыгал" */
    }

    .calendar-panel {
        display: none;
    }

        .calendar-panel.mobile-visible {
            display: block;
            position: absolute;
            z-index: 5;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: auto;
            /* 🌟 Резервируем место снизу, чтобы контент не прятался под футером */
            background: #fff;
            border-top: none;
            margin-top: 0;
            padding-bottom: 90px;
            box-sizing: border-box;
            padding-top: 0;
        }

    .calendar-mobile-header {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 0 16px 0;
        cursor: pointer;
    }

    .calendar-mobile-back {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #0A0A0A;
        font-family: "Inter Display";
        font-size: 15px;
        font-weight: 500;
        /* 🌟 Гарантируем, что футер всегда поверх любого перекрывающего контента */
        .dropdown-footer {
            background: #fff;
            z-index: 10;
        }
    }
}