/* Общий стиль всех section (родителей) */
.container{
    display: grid;
    padding: 10px clamp(20px, 5vw, 50px);
    gap: clamp(20px, 3vw, 30px);
}

/* Глобальные стили сайта */
:root{
/* Стиль шрифтов */
    --h1_font_family: 'Inter', sans-serif;
    --h2_font_family: 'Cormorant Garamond', serif;

/* Размеры шрифтов, вертикальных отступов между словами и их стили */
    --h0_title_font: 600 clamp(1.875rem, 5vw, 2.75rem)/1.1 var(--h2_font_family);
    --h0w_font: 600 clamp(1.75rem, 5vw, 2.5rem)/1 var(--h1_font_family);

    --h1_font: 400 clamp(0.9375rem, 3vw, 1.5625rem)/clamp(1.5625rem, 2.5vw, 2.5rem) var(--h1_font_family);
    --h2_font: 600 clamp(1.125rem, 2.5vw, 1.375rem)/clamp(1.375rem, 3vw, 1.875rem) var(--h1_font_family);
    --h3_font: 400 clamp(1rem, 2vw, 1.375rem)/clamp(1.125rem, 2.2vw, 1.625rem) var(--h1_font_family);
    --h4_font: 400 clamp(0.9375rem, 2vw, 1.1875rem)/clamp(1.25rem, 2.5vw, 1.5rem) var(--h1_font_family);
    --h4_title_card_font: 600 clamp(0.9375rem, 2.2vw, 1.5rem)/clamp(1.25rem, 2.5vw, 1.5rem) var(--h2_font_family);
    --h5_font: 600 clamp(0.9375rem, 1.6vw, 1.0625rem)/clamp(1.125rem, 2vw, 1.375rem) var(--h1_font_family);
    --h5_title_card_font: 600 clamp(0.9375rem, 1.9vw, 1.3125rem)/clamp(1.125rem, 2vw, 1.375rem) var(--h2_font_family);
    --h6_font: 400 clamp(0.75rem, 1.2vw, 1.0625rem)/clamp(1.125rem, 2vw, 1.375rem) var(--h1_font_family);
    --h7_font: 400 clamp(0.75rem, 1.2vw, 0.875rem)/clamp(1rem, 1.6vw, 1.25rem) var(--h1_font_family);
    --h8_font: 400 clamp(0.625rem, 1vw, 0.75rem)/clamp(0.875rem, 1.4vw, 1rem) var(--h1_font_family);

    --h1_btn_font: 600 clamp(1.125rem, 2.4vw, 1.625rem)/clamp(1.125rem, 2.2vw, 1.625rem) var(--h2_font_family);
    --h2_btn_font: 600 clamp(0.75rem, 1.5vw, 1.0625rem)/clamp(1rem, 1.6vw, 1.25rem) var(--h2_font_family);

/* Прозрачность */
    --o_90: 0.9;
    --o_80: 0.8;
    --o_70: 0.7;
    --o_60: 0.6;
    --o_50: 0.5;
    --o_35: 0.35;
    --o_40: 0.4;
    --o_30: 0.3;
    --o_20: 0.2;
    --o_10: 0.1;
    --o_05: 0.05;
    --o_00: 0.0;

/* Цвета */
    --color_white: 255 255 255;

    --color_black: 0 0 0;

    /* Основной цвет - имя компании, цвет текстов при наведении и в тенях */
    --color_vinous: 151 23 23;

    /* Кнопка "Читать еще" и label в Popup */
    --color_gray: 161 161 161;
    
    /* В активном состоянии input + кнопка "Получить каталог" */
    --color_blue: 0 134 228;
    
    /* При наведении в Popup */
    --color_blue_hover: 26 159 255;
    
    /* При наведении на "Персональных данных" в Popup */
    --color_blue_link: 74 144 226;
    
    /* Фон в Popup*/
    --color_blue_night: 33 31 199;
    
    /* Фон в Popup и label при активном input */
    --color_brown: 49 16 0;

    /* Сообщение с ошибкой + border quiz */
    --color_red: 255 0 0;

    /* Обводка quiz input в focus */
    --color_red_mute: 180 40 40;


/* Расположении текстов */
    --h1_text_align: start;
    --h2_text_align: center;

/* Закругление элементов */
    --h1_border_radius: 50%;
    --h2_border_radius: 30px;
    --h3_border_radius: 12px;
    --h4_border_radius: 8px;
    --h5_border_radius: 4px;

/* Обводка элементов */
    --h1_border: 1px solid;
    --h2_border: 2px solid;

/* Тени элементов */
    --box_shadow: 0 4px 15px;
}


/* Автозаполненные поля в popup и quiz не меняли стили */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: rgb(var(--color_white));
}

/* Страница */
body,html{
    margin: 0;
    width: 100%;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    background: radial-gradient(circle at top, #151515, #0b0b0b);
    font-family: var(--h1_font_family);
    font-size: clamp(16px, 0.8vw, 20px);
    scrollbar-color: rgb(var(--color_vinous)) transparent;
    -webkit-scrollbar-color: rgb(var(--color_vinous)) transparent;
}

/* Скролл */
body::-webkit-scrollbar{
    width: 8px;
}

/* Фон под ползунком */
body::-webkit-scrollbar-track {
    background: transparent;
}

/* Ползунок */
body::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color_vinous));
    border-radius: var(--h3_border_radius);
}

/* Убрать скролл, когда открыт POPUP */
body.popup-open {
    overflow: hidden;
}

/* Фон для всего body при открытом POPUP */
body.popup-open::before{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    transition: opacity 0.3s ease;
    background: rgb(var(--color_black) / var(--o_50));
}


/* фон для всех Незагруженных фоток */
img {
    display: block;
    background: linear-gradient(
                                90deg,
                                rgb(230 230 230 / 1) 25%,
                                rgb(245 245 245 / 1) 37%,
                                rgb(230 230 230 / 1) 63%
    );
    background-size: 400% 100%;
    animation: img-shimmer 1.3s infinite;
}
img:not(.img-loaded) {
    color: transparent;
}
/* фон для всех Загруженных фоток */
img.img-loaded {
    animation: none;
    background: none;
}
@keyframes img-shimmer {
    to { background-position: -400% 0; }
}



/* Обсудить мероприятие кнопка */
.event-btn{
    position: fixed;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
    opacity: 1;
    visibility: visible;
    padding: clamp(10px, 2vw, 14px) clamp(18px, 4vw, 28px);
    right: 10px;
    bottom: 10px;
    background: linear-gradient(135deg, #7c1212, #971717);
    cursor: pointer;    
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.25s ease, opacity 0.3s ease, visibility 0.3s ease;
    border-radius: var(--h2_border_radius);
    font: var(--h2_btn_font);
    color: rgb(var(--color_white));
    border: var(--h1_border) rgb(var(--color_white) / var(--o_30));
    box-shadow: 0 10px 30px rgb(var(--color_vinous) / var(--o_40)), inset 0 0 0 1px rgb(var(--color_white) / var(--o_80));
}

/* Обсудить мероприятие кнопка в активном состоянии */
.event-btn:active{
    transform: translateY(0);
    box-shadow: 0 8px 22px rgb(var(--color_vinous) / var(--o_40));
}

/* Обсудить мероприятие убрать кнопку, когда открыт POPUP */
body.popup-open #b_b__btn {
    opacity: 0;
    visibility: hidden;
}

/* Обсудить мероприятие иконка */
.event-btn_icon{    
    width: 30px;
    height: 30px;
    border-radius: var(--h1_border_radius);
}

/* Обсудить мероприятие счетчик элементов в корзине */
#cart_count{
    position: absolute;
    left: 56px;
    top: 5px;
    display: flex;
}



/* Базовая кнопка */
.base_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
    padding: clamp(10px, 2vw, 14px) clamp(18px, 4vw, 28px);
    width: max-content;
    min-height: 48px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    background: linear-gradient(180deg, #7a0f18 0%, #4b070c 100%);
    box-shadow: 0 0 0 1px rgb(var(--color_white) / var(--o_05)) inset, 0 8px 24px rgb(var(--color_vinous) / var(--o_40));
    border: var(--h1_border) rgb(var(--color_red_mute) / var(--o_40));
    color: rgb(var(--color_white));
    font: var(--h1_btn_font);
    border-radius: var(--h3_border_radius);
}

/* Базовая кнопка в активном состоянии */
.base_btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgb(var(--color_vinous) / var(--o_60)) inset;
}



/* Заголовки блоков на страницах */
.blog_title{
    text-align: var(--h2_text_align);
    font: var(--h0_title_font);
    color: rgb(var(--color_white));
    text-transform: uppercase;
}


/* Popup обсудить мероприятие */
#task_event_blog {
    position: fixed;
    top: 50%;
    left: 50%;
    width: clamp(320px, 90vw, 1200px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(.2,.8,.2,1);
    transform: translate(-50%, -50%) scale(0.92);
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    border-radius: var(--h3_border_radius);
    box-shadow: 0 0 0 1px rgb(var(--color_white) / var(--o_30)) inset, 0 30px 80px rgb(var(--color_black) / var(--o_50)), 0 0 70px rgb(var(--color_vinous) / var(--o_20));
    border: var(--h1_border) rgb(var(--color_white) / var(--o_30));
}

/* Когда открыто (Popup обсудить мероприятие) */
#task_event_blog.open{
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Контейнер (Popup обсудить мероприятие)  */
.t_e_b__content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: radial-gradient(circle at 30% 50%, #141A2A 0%, #0B0F16 60%, #070A10 100%);
}

/* Кнопка закрыть */
#t_e_b__c__close{
    position: absolute;
    top: 20px;
    right: 20px;
}

/* Кнопка закрыть иконка */
#t_e_b__c__close img{
    width: clamp(10px, 2vw, 20px);
    height: clamp(10px, 2vw, 20px);
}

/* Левый блок в контейнере*/
.t_e_b__c__blog{
    display: grid;
    gap: clamp(20px, 4vw, 50px);
    padding: clamp(20px, 5vw, 60px) 60px;
    text-align: center;
}

/* Текст "Обсудить событие" */
.t_e_b__c__b__title{
    font: var(--h0_title_font);
    color: rgb(var(--color_vinous));
}

/* Текст с информацией */
.t_e_b__c__b__description{
    color: rgb(var(--color_white) / var(--o_90));
    font: var(--h4_font);
}

/* Корзина */
#popup_cart{
    min-height: 0px;
    height: max-content;
    max-height: 150px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color_vinous)) transparent;
    scroll-behavior: smooth;
}

/* Корзина - элементы */
.cart_item{
    display: flex;
    height: 100px;
    padding: 0 10px;
    overflow: hidden;
    justify-content: space-between;
    align-items: center;
    border-top: var(--h1_border) rgb(var(--color_white) / var(--o_30));
    border-bottom: var(--h1_border) rgb(var(--color_white) / var(--o_30));
}

/* Корзина - текст */
.cart_item span{
    color: rgb(var(--color_white) / var(--o_90));
    font: var(--h4_font);
}

/* Корзина элементы - фотка карточки */
.cart_item img{
    width: 70px;
    height: 80px;
    object-fit: cover;
}

/* Корзина навигациия - контейнер */
.c_i__navigation{
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Корзина навигациия - кнопки */
.c_i__navigation button{
    padding: clamp(10px, 2vw, 14px) clamp(10px, 2vw, 15px);
    width: max-content;
    min-height: 10px;
}

/* Форма в контейнере */
.form {
    display: grid;
}

/* Блок с инпутом */
.input-group {
    min-height: 70px;
    position: relative;
    white-space: nowrap;
}

/* Иконка в инпуте */
.input-group__icon{
    position: absolute;
    left: 16px;
    top: 10px;
    width: 20px;
    height: 20px;
}

/* Инпут в Обсудить мероприятие */
.input-group__input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    background: transparent;
    padding: 10px 16px 10px 50px;
    font: var(--h7_font);
    color: rgb(var(--color_white));
    border-radius: var(--h4_border_radius);
    border: var(--h1_border) rgb(var(--color_vinous));
}

/* Когда активен инпут */
.input-group__input:focus {
    outline: none;
    border: var(--h1_border) rgb(var(--color_blue));
}

/* label */
.input-group__label {
    display: block;
    position: absolute;
    top: 0;
    left: 45px;
    padding: 0 5px;
    transition: line-height 200ms ease-in-out,
    font-size 200ms ease-in-out, 
    top 200ms ease-in-out;
    pointer-events: none;
    background-color: transparent;
    
    font: var(--h7_font);
    line-height: 40px;
    user-select: none;
    -webkit-text-fill-color: rgb(var(--color_gray) / var(--o_90));
    color: rgb(var(--color_gray) / var(--o_90));
}

/* label при активном Input */
.input-group__input:not(:placeholder-shown) + .input-group__label,
.input-group__input:focus + .input-group__label {
    opacity: 1;
    top: -7px;
    left: 23px;
    background-color: #141A2A;
    line-height: 40px;
    white-space: nowrap;
    font: var(--h8_font);
}

/* Когда активен инпут - стили для label */
.input-group__input:focus + .input-group__label {
    color: rgb(var(--color_blue));
}

/* Блок с чекбоксом и текстом */
.checkbox_label{
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Чекбокс */
.policy_checkbox{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Чекбокс */
.checkmark{
    width: 18px;
    height: 18px;
    margin-right: 12px;
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    background: rgb(var(--color_black) / var(--o_20));
    border: var(--h1_border) rgb(var(--color_white) / var(--o_30));
    border-radius: var(--h5_border_radius);
}

/* Чекбокс, когда нажат */
.policy_checkbox:checked + .checkmark{
    box-shadow: var(--box_shadow) rgb(var(--color_white) / var(--o_30));
    background: rgb(var(--color_white) / var(--o_90));
    border-color: rgb(var(--color_white) / var(--o_90));
}

/* Галочка */
.checkmark:after{
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 3px;
    width: 4px;
    height: 8px;
    border-width: 0 2px 2px 0;
    border-style: solid;
    transform: rotate(45deg);
    border-color: rgb(var(--color_black));
}

/* Когда нажат - галочка видна */
.policy_checkbox:checked + .checkmark:after{
    display: block;
}

/* Текст */
.checkbox_text{
    text-align: start;
    flex: 1;
    transition: color 0.3s ease;
    user-select: none;
    font: var(--h7_font);
    color: rgb(var(--color_white) / var(--o_80));
}

/* текст "Политика конфиденциальности" */
.policy_link{
    text-decoration: underline;
    transition: color 0.3s ease;
    color: rgb(var(--color_vinous) / var(--o_90));
}

/* Сообщение об ошибке */
.errorMsg {
    display: block;
    margin-top: 6px;
    font: var(--h7_font);
    color: rgb(var(--color_red));
}

/* Кнопка "Получить каталог" */
#get_catalog {
    width: 100%;
    text-transform: uppercase;
}

/* Текст под кнопкой "Получить каталог" */
.t_e_b__c__b__info{
    font: var(--h8_font);
    color: rgb(var(--color_white) / var(--o_80));
}

/* Правый блок в контейнере - Фотография + маска */
.t_e_b__c__b__image{
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/static/img/start_page/t_e_b__mask.png);

    -webkit-mask-image: url('/static/img/svg/wave-mask.svg');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;

    mask-image: url('/static/img/svg/base_page/wave-mask.svg');
    mask-size: cover;
    mask-repeat: no-repeat;
}

/* Правый блок в контейнере - обводка слева */
.t_e_b__c__b__image::after{
    content: "";
    position: absolute;
    inset: 0;
    background: url('/static/img/svg/base_page/wave-stroke.svg');
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}



/* Окно с успехом */
#popup_submit_success{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 28px;
    width: min(420px, calc(100vw - 32px));
    min-height: 260px;
    max-height: 350px;
    padding: 36px 32px;
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    box-sizing: border-box;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(.2,.8,.2,1);
    backdrop-filter: blur(10px);
    background: radial-gradient(circle at top, rgb(var(--color_vinous) / var(--o_20)), rgba(10,10,10,.96) 65%);
    border-radius: var(--h2_border_radius);
    box-shadow:0 0 0 1px rgb(var(--color_white) / var(--o_30)) inset, 0 24px 60px rgb(var(--color_black) / var(--o_50)), 0 0 60px rgb(var(--color_vinous) / var(--o_20));
    border: var(--h1_border) rgb(var(--color_white) / var(--o_80));
}

/* Когда открыт */
#popup_submit_success.open{
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Галочка */
#popup_submit_success::before{
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    background:linear-gradient(180deg, #9c1622 0%, #5f0a10 100%);
    box-shadow: 0 10px 30px rgb(var(--color_vinous) / var(--o_40)), inset 0 0 0 1px rgb(var(--color_white) / var(--o_80));
    border-radius: var(--h1_border_radius);
    font: var(--h0w_font);
    color: rgb(var(--color_white));
    border:var(--h1_border) rgb(var(--color_white) / var(--o_80));
}

/* Текст */
#popup_submit_text{
    font: var(--h3_font);
    color: rgb(var(--color_white));
    text-align: var(--h2_text_align);
}

/* Кнопка */
#popup_exit_btn{
    min-width: 180px;
    min-height: 48px;
    padding: clamp(10px, 2vw, 14px) clamp(18px, 4vw, 28px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: linear-gradient(180deg, #7a0f18 0%, #4b070c 100%);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    font: var(--h4_font);
    color: rgb(var(--color_white));
    border-radius: var(--h3_border_radius);
    border: var(--h1_border) rgb(var(--color_white) / var(--o_30));
    box-shadow: 0 0 0 1px rgb(var(--color_white) / var(--o_70)) inset, 0 8px 24px rgba(122, 15, 24, 0.45);
}

/* Кнопка в нажатом состоянии */
#popup_exit_btn:active{
    transform: translateY(0);
    box-shadow: 0 6px 16px rgb(var(--color_vinous) / var(--o_60)) inset;
}



/* Уведомления об ошибках запросов контейнер */
#popup_notifications {
    position: fixed;
    right: 0;
    bottom: 80px;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 4;
    pointer-events: none;
}

/* Уведомления об ошибках запросов */
#popup_notification {
    position: relative;
    padding: clamp(16px, 1.4vw, 24px) clamp(16px, 1.5vw, 26px) clamp(16px, 1.3vw, 22px) clamp(56px, 5.3vw, 90px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: opacity 0.5s ease, transform 0.7s ease, visibility 0.5s ease;
    z-index: 4;
    backdrop-filter: blur(10px);
    background: radial-gradient(circle at bottom, rgb(var(--color_vinous) / var(--o_35)), rgba(15, 15, 15, 0.96) 70%);
    border-radius: var(--h2_border_radius);
    border: var(--h1_border) rgb(var(--color_white) / var(--o_80));
    box-shadow: inset 0 0 0 1px rgb(var(--color_white) / var(--o_10)), inset 0 -12px 28px rgb(var(--color_red) / var(--o_10)), 0 22px 55px rgb(var(--color_black) / var(--o_40)), 0 0 40px rgb(var(--color_vinous) / var(--o_20));
}

/* Уведомления об ошибках запросов когда открыто */
#popup_notification.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Уведомления об ошибках запросов красная полоска снизу */
#popup_notification::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: 36px;
    filter: blur(0.3px);
    border-bottom-left-radius: var(--h2_border_radius);
    border-bottom-right-radius: var(--h2_border_radius);
    border-bottom: var(--h2_border) rgb(var(--color_red));
    box-shadow: inset 0 -8px 14px rgb(var(--color_red) / var(--o_20)), 0 8px 18px -8px rgb(var(--color_red) / var(--o_50))
}

/* Крестик */
#popup_notification::before{
    content: "×";
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(30px, 3.3vw, 56px);
    height: clamp(30px, 3.3vw, 56px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--h1_border_radius);
    border:var(--h1_border) rgb(var(--color_white) / var(--o_80));
    color: rgb(var(--color_white));
    font: var(--h0w_font);
    background:linear-gradient(180deg, #9c1622 0%, #5f0a10 100%);
    box-shadow: 0 10px 30px rgb(var(--color_vinous) / var(--o_40)), inset 0 0 0 1px rgb(var(--color_white) / var(--o_80));
}

/* Уведомления об ошибках запросов контент */
.popup_notification_content {
    display: grid;
    gap: 12px;
}

/* Уведомления об ошибках запросов название ошибки текст */
.popup_notification_title{
    font: var(--h2_font);
    color: rgb(var(--color_white));
    text-align: var(--h2_text_align);
}

/* Уведомления об ошибках запросов описание ошибки текст */
.popup_notification_text{
    font: var(--h4_font);
    color: rgb(var(--color_white) / var(--o_80));
    text-align: var(--h2_text_align);
}



/* Меню */
#header {
    position: fixed;
    top: 1%;
    left: 50%;
    transform: translate(-50%);
    width: 90%;
    z-index: 4;
    color: rgb(var(--color_white));
}

/* Меню нижний слой обводки белого фона */
#header::before{
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    box-shadow: var(--box_shadow) rgb(var(--color_black) / var(--o_20));
    background: rgb(var(--color_white) / var(--o_90));
    border-radius: var(--h2_border_radius);
}

/* Меню после скролла, наведения и открытия меню */
#header.scrolled::before,
#header:hover::before,
#header.has-open-menu::before {
    opacity: 1;
}

/* Меню при скролле, наведении и открытии подменю */
#header.scrolled, #header:hover, #header.has-open-menu {
    color: rgb(var(--color_black));
}

/* Меню общий контейнер */
.header-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(10px, 2vw, 20px);
    /* overflow: hidden; */
    overflow: visible;
}

/* Меню левый контейнер */
.nav-left {
    display: flex;
    align-items: center;
    gap: clamp(15px, 2vw, 30px);
}

/* Мобильное меню */
.burger{
    display: none;
    position: relative;
    width: 20px;
    height: 53px;
    cursor: pointer;
}

/* Мобильное меню бургер иконка */
.burger::before, .burger::after{
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 2px;
    background: rgb(var(--color_vinous));
    border-radius: 2px;
    transition: transform 0.3s ease;
}

/* Мобильное меню бургер иконка (верхняя палочка) */
.burger::before{
    top: 20px;
}

/* Мобильное меню бургер иконка (нижняя палочка) */
.burger::after{
    top: 35px;
}

/* Мобильное меню когда открыта бургер иконка (верхняя палочка) */
.burger.open::before{
    top: 25px;
    transform: rotate(45deg);
}

/* Мобильное меню когда открыта бургер иконка (нижняя палочка) */
.burger.open::after{
    top: 25px;
    transform: rotate(-45deg);
}

/* Мобильное меню контейнер */
#menu {
    position: fixed;
    right: -50px;
    width: 100%;
    height: 100vh;
    background: rgb(247, 236, 236);
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.3s ease;
}

/* Мобильное меню когда открыто контейнер */
#menu.open{
    pointer-events: all;
    transform: translateX(0%);
    right: 0;
    top: 100%;
    cursor: default;
}

/* Мобильное меню когда открыто содержимое */
#menu.open .nav-links{
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

/* Пункты меню все контейнер*/
#menu.open .nav-links li {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid black;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Пункты меню последний контейнер */
#menu.open .nav-links li:last-child {
    border-bottom: none;
}

/* Пункт меню при открытии пункта с подменю компактное меню */
#menu.open .nav-links li.open > a, #menu.open .nav-links li.open > .menu-container{
    color: rgb(var(--color_vinous));
}

/* Пункты меню все контейнер у подменю */
#menu.open .nav-links li .text_submenu li {
    display: flex;
    flex-direction: column;
    border-bottom: none;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Пункты меню и стрелка контейнер  */
#menu.open .menu-container{
    display: flex;
    justify-content: space-between;
}

/* Пункты меню контейнер стрелка у has_submenu */
#menu.open .arrow{
    position: relative;
    width: 14px;
}

/* Пункты меню стрелка у has_submenu */
#menu.open .arrow::after, #menu.open .arrow::before{
    content: "";
    position: absolute;
    inset: 0;
    width: 14px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Пункты меню стрелка у has_submenu (верхняя) */
#menu.open .arrow::after{
    top: 5px;
    transform: rotate(45deg);
}

/* Пункты меню стрелка у has_submenu (нижняя) */
#menu.open .arrow::before{
    top: 15px;
    transform: rotate(-45deg);
}

/* Пункты подменю */
#menu.open .text_submenu{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    padding-left: 16px;
}

/* Пункты подменю когда открыты */
#menu.open li.open .text_submenu{
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
}

/* Пункты подменю когда открыты стрелка у has_submenu (верхняя) */
#menu.open li.open .arrow::after{
    transform: rotate(-45deg);
}

/* Пункты подменю когда открыты стрелка у has_submenu (нижняя) */
#menu.open li.open .arrow::before{
    transform: rotate(45deg);
}

/* Меню логотип */
.logo {
    width: clamp(28px, 3vw, 40px);
    height: clamp(28px, 3vw, 40px);
}

/* Пункты меню центральный контейнер */
.nav-links {
    display: flex;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    gap: clamp(8px, 1.5vw, 20px);
}

/* Пункты меню все */
.nav-links a, .nav-right a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
    padding: clamp(4px, 0.8vw, 8px) clamp(8px, 0.9vw, 16px);
    font: var(--h6_font);
}

/* Пункт меню активный*/
.nav-links a.active{
    color: rgb(var(--color_vinous));
}

/* Подменю */
#absolute_submenu_container{
    position: fixed;
    top: 63px;
    z-index: 4;
    pointer-events: none;
}

/* Подменю контейнер */
.submenu_content {
    display: grid;
    position: fixed;
    left: 8%;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    padding-top: 10px;
    margin: 0 50px;
    max-width: 450px;
}

/* Подменю нижний слой белой обводки */
.submenu_content::before{
    content: '';
    position: fixed;
    inset: 0;
    border-radius: 0 0 30px 30px;
    opacity: 1;
    pointer-events: none;
    z-index: -1;
    box-shadow: var(--box_shadow) rgb(var(--color_black) / var(--o_20));
    background: rgb(var(--color_white) / var(--o_90));
}

/* Подменю в открытом состоянии */
#absolute_submenu_container .submenu_content.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

/* Подменю контейнер пунктов */
.text_submenu{
    font: var(--h5_font);
    overflow: hidden;
    list-style: none;
    padding: 0px 30px;
    user-select: none;
    -webkit-user-select: none;
}

/* Подменю пункты */
.text_submenu a{
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}



/* Содержимое (тело) сайта */
#main{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr max-content;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

/* Биллборд контейнер */
#billboard_blog{
    background: url(/static/img/start_page/billboard.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:0% 55%;
    aspect-ratio: 1 / 0.4;
    display: grid;
    grid-template-rows: max-content max-content;
    align-content: center;
    gap: 0;
}

/* Биллборд название страницы */
.b_b__title{
    font: var(--h1_font);
    color: rgb(var(--color_white));
}

/* Биллборд имя компании */
.logo_name{
    text-align: var(--h1_text_align);
    font: var(--h0_title_font);
    color: rgb(var(--color_vinous));
}

/* Биллборд доп инфа контейнер */
.b_b__detail{
    margin-top: 10px;
    font: var(--h6_font);
    color: rgb(var(--color_white));
}



/* Подвал */
#footer {
    color: rgb(var(--color_white) / var(--o_90));
    padding: clamp(30px, 5vw, 50px);
}

/* Подвал контейнер */
#footer_container {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(420px, 1fr);
    gap: 40px;
}

/* Подвал левый блок инфо */
.footer_left {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Подвал правый блок меню */
.footer_menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 40px;
}

/* Подвал контейнер каждого блока */
.footer_blog {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
    a{
        text-decoration: none;
        color: inherit;
    }
}

/* Подвал пункты контейнер */
.footer-links {
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
    padding: 0;
    margin: 0;
}

/* Подвал пункты */
.footer-links a {
    text-decoration: none;
    transition: color 0.3s ease;

    word-wrap: break-word;
    overflow-wrap: break-word;
    color: rgb(var(--color_white) / var(--o_90));
    font: var(--h5_font);
}

/* Подвал отступ между пунктами */
.footer-links li {
    margin-bottom: 15px;
}

/* Подвал отступ между пунктами у последнего элемента */
.footer-links li:last-child {
    margin-bottom: 0px;
}

/* Подвал логотип */
#footer_logo {
    width: 150px;
    height: 100px;
}

/* Подвал соц сети контейнер */
#footer_social{
    display: flex;
    gap: 10px;
}

/* Подвал иконки соц сетей контейнер иконки*/
#footer_icon{
    border-radius: var(--h1_border_radius);
    cursor: pointer;
    transition: transofrm 0.3s ease, background 0.3s ease;
    background: hsla(0, 74%, 34%, 0.665);
    width: 50px;
    height: 50px;
}

/* Подвал иконки соц сетей */
.social_icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    transition: transform 0.3s ease;
    transform: scale(0.6);
}

/* Подвал названия контейнеров */
.footer_name{
    font: var(--h5_font);
    color: rgb(var(--color_vinous));
}

/* Подвал текст с инфо */
.footer_text_h2{
    font: var(--h8_font) !important;
}







/* Планшеты */
@media (max-width: 1024px){
    /* Убрать дефолт серую заливку клика на айфон */
    a {
        -webkit-tap-highlight-color: rgb(var(--color_vinous) / var(--o_20));
    }



    /* Меню */
    #header {
        top: 0;
        width: 100%;
    }
    /* Меню нижний слой обводки белого фона */
    #header::before{
        border-radius: 0px;
    }
    /* Пункты меню центральный контейнер */
    .nav-links {
        padding: 0;
    }
    /* Подменю */
    #absolute_submenu_container{
        top: 54px;
    }



    /* Popup обсудить мероприятие */
    #task_event_blog {
        width: 94vw;
        max-height: 90vh;
    }

    /* Контейнер (Popup обсудить мероприятие)  */
    .t_e_b__content{
        grid-template-columns: 1.1fr 0.9fr;
    }

    /* Левый блок в контейнере*/
    .t_e_b__c__blog{
        gap: 32px;
        padding: clamp(20px, 4vw, 40px);
    }

    /* Текст с информацией */
    .t_e_b__c__b__description{
        font: var(--h5_font);
    }
}

/* Телефоны */
@media (max-width: 768px){
    /* Общий стиль всех section (родителей) */
    .container{
        padding: 10px 20px;
    }



    /* Меню левый и правый контейнеры */
    .nav-center, .nav-right{
        display: none;
    }

    /* Мобильное меню */
    .burger{
        display: flex;
    }

    /* Подменю */
    #absolute_submenu_container{
        display: none;
    }

    /* Пункты меню все мобильная версия */
    #menu.open .nav-links a, .nav-right a{
        text-overflow: ellipsis;
        overflow: hidden;
    }



    /* Биллборд контейнер */
    #billboard_blog{
        /* min-height: 200px; */
        aspect-ratio: auto;
        padding: 120px 20px 40px;

        align-content: start;
        /* gap: 16px; */
        background-position: center top;
    }



    /* Popup обсудить мероприятие */
    #task_event_blog {
        top: 50%;
        width: 96vw;
        max-height: 92vh;
        overflow: hidden;
    }

    /* Контейнер (Popup обсудить мероприятие)  */
    .t_e_b__content{
        grid-template-columns: 1fr;
    }

    /* Правый блок в контейнере - Фотография + маска */
    .t_e_b__c__b__image{
        display: none;
    }

    /* Левый блок в контейнере*/
    .t_e_b__c__blog{
        gap: 24px;
        padding: 24px 20px;
    }



    #footer_container{
        grid-template-columns: 1fr;
    }
    .footer_left {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
    .footer_menu{
        width: 100%;
    }
}

/* Маленькие телефоны */
@media (max-width: 480px){
    #billboard_blog{
        min-height: auto;
        padding: 100px 16px 32px;
    }
    
    .b_b__detail{
        flex-wrap: wrap;
    }



    /* Popup обсудить мероприятие */
    #task_event_blog {
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
        max-height: 95vh;
    }

    /* Кнопка закрыть */
    #t_e_b__c__close{
        top: 5px;
        right: 5px;
    }

    /* Кнопка закрыть иконка */
    #t_e_b__c__close img{
        width: 20px;
        height: 20px;
    }

    /* Левый блок в контейнере*/
    .t_e_b__c__blog{
        gap: 20px;
        padding: 20px 16px;
    }

    /* Блок с инпутом */
    .input-group {
        min-height: 64px;
    }

    /* Текст под кнопкой "Получить каталог" */
    .t_e_b__c__b__info{
        font-size: 12px;
    }
}



/* Hover для десктопа */
@media (hover: hover) and (pointer: fine) {
    /* Обсудить мероприятие кнопка при наведении */
    .event-btn:hover{
        background: linear-gradient(135deg, #971717, #b51d1d);
        transform: translateY(-2px);
        box-shadow: 0 14px 40px rgb(var(--color_vinous) / var(--o_60)), inset 0 0 0 1px rgb(var(--color_white) / var(--o_30));
    }

    /* Обсудить мероприятие иконка при наведении на кнопку */
    .event-btn:hover .event-btn_icon{
        transform: scale(1.05);
    }



    /* Базовая кнопка при наведении */
    .base_btn:hover{
        background: linear-gradient(180deg, #9c1622 0%, #5f0a10 100%);
        box-shadow: 0 0 0 1px rgb(var(--color_red_mute) / var(--o_40)) inset, 0 12px 32px rgb(var(--color_red_mute) / var(--o_60));
        transform: translateY(-2px);
    }



    /* Текст при наведении */
    .checkbox_label:hover .checkbox_text{
        color: rgb(var(--color_white));
    }

    /* Чекбокс при наведении */
    .checkbox_label:hover .checkmark{
        border: var(--h1_border) rgb(var(--color_white));
    }

    /* текст при наведении "Политика конфиденциальности" */
    .policy_link:hover{
        text-decoration: none;
        color: rgb(var(--color_vinous));
    }



    /* Кнопка при наведении */
    #popup_exit_btn:hover{
        transform: translateY(-2px);
        background: linear-gradient(180deg, #9c1622 0%, #5f0a10 100%);
        box-shadow: 0 0 0 1px rgb(var(--color_red_mute) / var(--o_40)) inset, 0 12px 32px rgb(var(--color_red_mute) / var(--o_60));
    }



    /* Пункт меню при наведении */
    .nav-links a:hover {
        background: rgb(var(--color_black) / var(--o_20));
        color: rgb(var(--color_vinous));
        border-radius: var(--h2_border_radius);
    }

    /* Пункт меню при наведении компактное меню */
    #menu.open .nav-links li a:hover {
        border-radius: none;
        background: none;
    }

    /* Пункт меню при наведении на контейнер компактное меню */
    #menu.open .nav-links li:hover {
        border-radius: none;
        background: none;
        transform: translateY(-5px);
    }

    /* Пункт меню при наведении на контейнер компактное меню */
    #menu.open .nav-links li:hover > a, #menu.open .nav-links li:hover > .menu-container{
        color: rgb(var(--color_vinous));
    }
    
    /* Пункты меню стрелка у has_submenu */
    #menu.open .nav-links li:hover .arrow::after, #menu.open .nav-links li:hover .arrow::before{
        background-color: rgb(var(--color_vinous));
    }

    /* Подменю пункты при наведении */
    .text_submenu a:hover{
        color: rgb(var(--color_vinous));
    }



    /* Подвал пункты при наведении */
    .footer-links a:hover {
        color: rgb(var(--color_vinous));
    }

    /* Подвал при наведении иконки соц сетей */
    #footer_icon:hover {
        transform: scale(1.05);
    }
    #footer_icon:hover .social_icon{
        transform: scale(0.7);
    }
}



/* Стили для сенсорных устройств */
@media (hover: none) and (pointer: coarse) {
    /* Инпут в Обсудить мероприятие */
    .input-group__input{
        font-size: 16px;
    }
}