@import "fonts/MuseoSansCyrl/stylesheet.css";
@import "fonts/MullerBlack/stylesheet.css";

/* ═══════════════════════════════════════════
   ROOT VARIABLES
═══════════════════════════════════════════ */

:root {
    /* Colors */
    --white:        #ffffff;
    --black:        #030303;
    --text-main:    #2A2A2A;
    --color-text:   #B1AFAA;

    --gold:                 #C8A44E;
    --gold-hover:           #AA8630;
    --gold-focus:           #8C6812;
    --gold-disabled:        #E3E1DC;
    --gold-text:            var(--white);
    --gold-text-disabled:   #7A7A7A;

    --gray:                 #F1EFEA;
    --gray-dark:            #CFCDC8;
    --gray-hover:          var(--gray-dark);
    --gray-focus:           #B1AFAA;
    --gray-disabled:        #F1EFEA;
    --gray-text:            var(--text-main);
    --gray-text-disabled:   #B1AFAA;
    --divider:              var(--gray-dark);


    --gray-border:  #BFBFBF;
    --urgent-bg:    #FFE6E7;
    --urgent-color: #D62D30;
    --red:          #D62D30;
    --red-light:    #FFE8E9;
    --green:        #DFEDE7;
    --green-text:   #4A8C6F;
    --green-light:  #90D2B5;
    --blue:         #1175E4;
    --link:         var(--black);
    --devider:      #E3E1DC;

    --color-text-balck: var(--text-main);

    /* Backgrounds */
    --bg-header:    var(--white);
    --bg-footer:    var(--gray);
    --bg-gray:      var(--gray);
    --bg-form-el:   rgb(232, 240, 254);
    --bg-gold:      #F3ECDA;

    /* Typography */
    --font-size-micro: 12px;
    --font-size-min:   14px;
    --font-size-midi:  16px;
    --font-size-max:   20px;
    --font-size-mega:  24px;
    --font-size-hyper: 32px;
    --font-size-giga:  48px;

    --font-size-body: 14px;
    --font-size-body-16: 14px;
    --font-size-body-20: 14px;

    --font-size-h1: 28px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    --font-size-h4: 18px;

    --font-weight-title: 500;
    --font-weight-body: 300;
    --font-weight-h4: 500;

    /* Spacing */
    --distance-micro: 5px;
    --distance-min:   10px;
    --distance-midi:  20px;
    --distance-max:   40px;
    --distance-mega:  80px;
    --distance-20: 10px;
    --distance-24: 12px;
    --distance-28: 20px;
    --distance-36: 20px;
    --distance-48: 28px;
    --distance-60: 20px;
    --distance-100: 50px;
    --distance-150: 80px;

    /* Border radius */
    --border-radius-micro: 2px;
    --border-radius-min:   4px;
    --border-radius-midi:  10px;
    --border-radius-max:   20px;
    --border-radius-mega:  32px;
    --border-radius-input: 10px;
    --border-radius-20: 20px;
    --border-radius-10: 10px;

    /* Borders */
    --border-silver: 1px solid var(--gray-border);
    --border-gray:   1px solid var(--gray);

    /* Forms */
    --gap-form-field:            10px;
    --border-color-form-el:      var(--gray-border);
    --padding-left-form-element: 10px;
    --margin-bottom-label-form:  10px;
    --height-input: 51px;
    --height-textarea: 150px;

    /* BUTTON */
    --height-button:      45px;
    --height-button-lg:   48px;
    --padding-button: 16px 18px;

    /* Layout */
    --content-width-val:  100%;
    --height-header-top:  69px;
    --height-header-nav:  60px;
    --padding-container: 20px;
    --padding-block-20: 20px 20px;
    --padding-block-36: var(--distance-48) var(--distance-36);
    --padding-block-48: 20px 20px;
    --padding-block-60: 20px 20px;
}

/* tablet: 768+ */
@media screen and (min-width: 768px) {
    :root {
        --distance-20: 20px;

        --font-size-min:   15px;
        --font-size-midi:  16px;

        --font-size-h1: 40px;
        --font-size-h2: 32px;
        --font-size-h3: 20px;
        --font-size-h4: 18px;

        --font-size-body: 16px;
        --font-size-body-16: 14px;
        --font-size-body-20: 16px;

        --height-header-top: 80px;
        --height-header-nav: 64px;
        --distance-max:  40px;

        --border-radius-midi: 10px;
        --height-input: 59px;

        --distance-mega: 100px;
        --distance-48: 36px;
        --distance-60: 28px;
        --distance-150: 100px;

        --padding-block-36: 36px 36px;
        --padding-block-48: 36px 36px;
        --padding-block-60: 20px 20px;
        /* BUTTON */
        --height-button: 60px;
        --height-button-lg: 60px;
    }
}

/* notebook: 1280+ */
@media screen and (min-width: 1700px) {
    :root {
        --font-size-min:   16px;
        --font-size-midi:  20px;
        --font-size-max:   22px;

        --font-size-h1: 52px;
        --font-size-h2: 40px;
        --font-size-h3: 28px;
        --font-size-h4: 24px;

        --font-size-body: 20px;
        --font-size-body-16: 16px;
        --font-size-body-20: 20px;

        --height-header-top: 52px;
        --height-header-nav: 68px;
        --height-textarea: 170px;

        --distance-max:  48px;
        --distance-mega: 130px;
        --distance-24: 24px;
        --distance-28: 28px;
        --distance-36: 36px;
        --distance-48: 48px;
        --distance-60: 60px;
        --distance-100: 100px;
        --distance-150: 150px;

        --padding-block-20: 24px 36px;
        --padding-block-48: 48px 48px;
        --padding-block-60: 60px 60px;

        /* BUTTON */
        --padding-button: 20px 28px;
    }
}


@media screen and (min-width: 1700px) {
    :root {
        --content-width-val:  1700px;
    }
}

/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
    display: block;
}

html {
    height: 100%;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Museo Sans Cyrl", Arial, sans-serif;
    background-color: var(--gray);
    height: 100%;
    font-size: var(--font-size-midi);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text-main);
    line-height: 1.5;
}

*, *:before, *:after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: none;
}

table {
    border-collapse: collapse;
    border-width: 0;
    padding: 0;
    margin: 0;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }

input, textarea, select, button {
    font-family: inherit;
    font-size: var(--font-size-body-16);
    color: var(--color-text-balck);
    font-weight: 500;
    border-radius: var(--border-radius-input);
    height: var(--height-input);
    border: 0px;
    background: var(--gray);
    max-width: 100%;
    padding: 0px 20px;
}
input, textarea, select {
    width: 100%;
}
textarea {
    height: var(--height-textarea);
}
button {
    width: auto;
}
input, textarea {
    color: var(--text-main);
    outline: none;
    -webkit-appearance: none;
}

input[type="button"],
input[type="submit"],
button {
    cursor: pointer;
    -webkit-appearance: none;
    background: var(--gold);
    border-radius: var(--border-radius-input);
    color: var(--white);
    border: 0px;
    font-weight: 700;
}
input[type="checkbox"],
input[type="radio"] {
    aspect-ratio: 1/1;
    width: 24px;
    height: 24px;
    border: 1px solid #E3E1DC;
    padding: 0px;
    border-radius: 5px;
    background: none;
}
/* Базовый стиль для кастомного элемента */
label input[type="checkbox"] ~ span:last-of-type,
label input[type="radio"] ~ span:last-of-type {
    position: relative;
    padding-left: 36px;
    cursor: pointer;
}

/* Создаём кастомный элемент через ::before */
label input[type="checkbox"] ~ span:last-of-type::before,
label input[type="radio"] ~ span:last-of-type::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0px;
    transform: translateY(0px);
    width: 24px;
    height: 24px;
    border: 1px solid #CFCDC8;
    background-color: transparent;
    transition: all 0.2s ease;
}

@media screen and (min-width: 1280px) {
    label input[type="checkbox"] ~ span:last-of-type::before,
    label input[type="radio"] ~ span:last-of-type::before {
        width: 28px;
        height: 28px;
    }

    label input[type="checkbox"] ~ span:last-of-type,
    label input[type="radio"] ~ span:last-of-type {
        padding-left: 44px;
    }

}

/* Чекбокс - радиус 5px */
label input[type="checkbox"] ~ span:last-of-type::before {
    border-radius: 5px;
}

/* Радиокнопка - тоже радиус 5px (квадратная) */
label input[type="radio"] ~ span:last-of-type::before {
    border-radius: 50%;
}

/* Активное состояние для чекбокса и радио - полная золотая заливка */
label input[type="checkbox"]:checked ~ span:last-of-type::before,
label input[type="radio"]:checked ~ span:last-of-type::before {
    background-color: var(--gold, #B8860B);
    border-color: var(--gold, #B8860B);
}

/* Галочка для чекбокса и радио (через background) */
label input[type="checkbox"]:checked ~ span:last-of-type::before,
label input[type="radio"]:checked ~ span:last-of-type::before {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.4009 0.532593C12.7112 0.222359 13.2146 0.222293 13.5249 0.532593C13.8351 0.842877 13.8351 1.34637 13.5249 1.65662L5.15869 10.0219C4.84845 10.332 4.34578 10.3319 4.03564 10.0219L0.532715 6.51892C0.222734 6.20867 0.222642 5.70609 0.532715 5.39587C0.842992 5.0856 1.34647 5.08553 1.65674 5.39587L4.59717 8.3363L12.4009 0.532593Z' fill='white' stroke='white' stroke-width='0.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 9px;
}

/* Скрываем оригинальный input, но оставляем доступным для клавиатуры */
label input[type="checkbox"],
label input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Фокус на кастомном элементе (для доступности) */
label input[type="checkbox"]:focus-visible ~ span:last-of-type::before,
label input[type="radio"]:focus-visible ~ span:last-of-type::before {
    outline: 2px solid var(--gold, #B8860B);
    outline-offset: 2px;
}

.select-custom {
    position: relative;
    display: inline-block;
    width: 100%;
    height: var(--height-input);
}

/* Скрываем стандартную стрелку браузера */
.select-custom select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
}

/* Ваша SVG стрелка */
.select-custom::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 7px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L6 6L1 1' stroke='%232A2A2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.select-custom select:hover {
    border-color: #999;
}

.select-custom select:focus {
    outline: none;
    border-color: var(--text-main);
}


a {
    color: var(--link);
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

a, span, div, button { outline: none !important; }

img, svg {
    max-width: 100%;
    vertical-align: top;
}

strong { font-weight: 700; }

ul, ol { margin-left: 30px; }

p { line-height: 1.2; font-size: 14px; margin-bottom: 0.8rem;}
p:last-child {margin-bottom: 0rem;}

h1, h2, h3, h4 {
    font-family: "Muller", Arial, sans-serif;
    font-weight: 500;
    line-height: 1;
}

h1, .h1 { font-size: var(--font-size-h1); margin-top: 0rem; margin-bottom: 0rem; }
h2, .h2 { font-size: var(--font-size-h2); margin-top: 0rem; margin-bottom: 0rem; }
h3, .h3 { font-size: var(--font-size-h3); margin-top: 0rem; margin-bottom: 0rem; }
h4, .h4 { font-size: var(--font-size-h4); margin-top: 0rem; margin-bottom: 0rem; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-main);
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}


/* ═══════════════════════════════════════════
   UTILS
═══════════════════════════════════════════ */

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-wrapper {
}

.container {
    width: var(--content-width-val);
    max-width: min(100%, var(--content-width-val));
    padding: 0 var(--padding-container);
    margin: 0 auto;
}
.container_no-padding__mobile {
    padding: 0px;
}
@media screen and (min-width: 768px) {
    .container {
        padding: 0 var(--distance-midi);
    }
    .container_no-padding__mobile {
        padding: 0 var(--distance-midi);
    }
}

@media screen and (max-width: 767px)                        { .mobile-hide   { display: none !important; } }
@media screen and (min-width: 768px)  and (max-width: 1279px) { .tablet-hide   { display: none !important; } }
@media screen and (min-width: 1280px) and (max-width: 1699px) { .notebook-hide { display: none !important; } }
@media screen and (min-width: 1700px)                       { .desktop-hide  { display: none !important; } }

p, ul, ol {font-weight: 300}

@media screen and (min-width: 768px) {
    p, ul, ol {font-size: 16px;}
}

@media screen and (min-width: 1700px) {
    p, ul, ol {font-size: 20px;}
}

.text-center {text-align: center}
.mt-20 {margin-top: var(--distance-20)}
.mt-24 {margin-top: var(--distance-24)}
.mt-36 {margin-top: var(--distance-36)}
.mb-60 {margin-bottom: var(--distance-60)}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */

.header {
    position: relative;
    z-index: 1002;
}

/* ─── Строка 1: топ-бар — только notebook+ ─── */

.header-top {
    display: block;
    background: var(--bg-header);
    border-bottom: var(--border-gray);
    padding: 12px 0px;
    height: var(--height-header-top);
    border-radius: 0px 0px 20px 20px;
    overflow: hidden;
}

.header-top__inner {
    display: flex;
    align-items: center;
    gap: var(--distance-midi);
    justify-content: space-between;
}

.header-top__socials {
    display: flex;
    align-items: center;
    gap: var(--distance-min);
}

/* ─── Строка 2: nav ─── */
.header-nav {
    background: var(--bg-header);
    position: absolute;
    top: 89px;
    border-radius: 20px;
    padding: var(--padding-container) 0;
    width: 100%;
    z-index: 1000;

    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease;
}

.header-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.header-nav__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--distance-midi);
}

/* ─── Оверлей ─── */

.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(42, 42, 42, 0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

body.menu-open .menu-overlay {
    opacity: 1;
    pointer-events: auto;
    z-index: 1001;
}

/* ─── Лого ─── */

.header-logo {
    flex-shrink: 0;
}

.header-logo a {
    display: block;
    text-decoration: none;
}

.header-logo__img {
    display: block;
    max-height: 40px;
    width: auto;
}
/*----Контакты-----*/
.header-contacts {
    display: flex;
    gap: 18px;
    flex-direction: column;
}
.header-city__image {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-contact {
    display: inline-flex;
    align-items: center;
    gap: var(--distance-min);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-midi);
    color: var(--text-main);
    padding: 0;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 500;
    line-height: 1;
}
/* ─── Город ─── */


.header-city svg { flex-shrink: 0; }

.header-city__arrow {
    transition: transform .2s;
}

.header-city:hover .header-city__arrow {
    transform: rotate(180deg);
}

/* ─── Соцсети ─── */

.header-nav__socials {
    display: inline-flex;
    align-items: center;
    gap: var(--distance-min);
}

.header-social {
    display: block;
    flex-shrink: 0;
    transition: opacity .2s;
}

.header-social:hover { opacity: .8; }

.header-social img {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* ─── Кнопки шапки ─── */

.header-btns--discount {
    display: flex;
    gap: 10px;
    align-items: center;
}
.header-menu--footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-top: 1px solid var(--gray-border);
    padding-top: var(--padding-container);
}
.header-btns {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}
.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--distance-min);
    padding: 0 var(--distance-midi);
    height: var(--height-button);
    border-radius: var(--border-radius-midi);
    font-size: var(--font-size-min);
    font-weight: 700;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity .2s;
    flex-shrink: 0;
    width: auto;
}

.header-btn:hover { opacity: .85; }

.header-btn--default {
    background: var(--bg-gray);
    color: var(--text-main);
}

.header-btn--urgent {
    background: var(--urgent-bg);
    color: var(--urgent-color);
}

.header-btn--consult {
    background: var(--gold);
    color: var(--white);
}

.header-btn--discount {
    background: var(--gold);
    color: var(--white);
    width: var(--height-button);
    padding-left: 0px;
    padding-right: 0px;
}

/* ─── Меню десктоп ─── */

.header-menu--desktop {
    width: 100%;
}
.header-menu {
    width: 100%;
}
.header-menu__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.header-menu__li {
    width: 100%;
}
.header-menu__a {
    display: block;
    font-size: var(--font-size-min);
    color: var(--text-main);
    text-decoration: none;
    border-radius: var(--border-radius-min);
    white-space: nowrap;
    transition: background .2s;
    font-weight: 500;

}
.header-menu__a--discount {
    background: var(--gold);
    color: var(--white);
    width: 100%;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;

    font-weight: 700;
}

/* ─── Правая часть nav (tablet) ─── */

.header-nav__right {
    display: flex;
    align-items: center;
    gap: var(--distance-midi);
    margin-left: auto;
}

/* ─── Бургер ─── */

.header-burger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-gray);
    border: none;
    border-radius: var(--border-radius-midi);
    cursor: pointer;
    font-size: var(--font-size-min);
    color: var(--text-main);
    padding: 0 var(--distance-midi);
    height: var(--height-button);
    flex-shrink: 0;
    transition: background .2s;
}

.header-burger:hover {
    background: var(--gray-border);
}

.header-burger__box {
    position: relative;
    width: 14px;
    height: 12px;
    flex-shrink: 0;
}

.header-burger__line {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--text-main);
    border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease, top .3s ease, width .3s ease;
}


/* Активное состояние → крест */
.header-burger.is-active .header-burger__line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 100%;
}

.header-burger.is-active .header-burger__line:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
}

.header-burger.is-active .header-burger__line:nth-child(3) {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) rotate(-45deg);
    width: 100%;
}



/* ─── Мобильное меню ─── */

.header-mobile-menu {
    display: none;
    background: var(--bg-header);
    border-top: var(--border-gray);
    padding: 0 0 var(--distance-max);
}

.header-mobile-menu.is-open {
    display: block;
}

.header-menu--mobile .header-menu__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
}

.header-burger__line:nth-child(1) { top: 0;   width: 8px;  }
.header-burger__line:nth-child(2) { top: 50%; transform: translateY(-50%); width: 12px; }
.header-burger__line:nth-child(3) { bottom: 0; top: auto;  width: 8px;  }

.header-menu--mobile .header-menu__list li {
    width: 100%;
    border-bottom: var(--border-gray);
}

.header-menu--mobile .header-menu__list li a {
    padding: var(--distance-midi) 0;
    border-radius: 0;
    font-size: var(--font-size-max);
    font-weight: 400;
}

.header-mobile-menu__city,
.header-mobile-menu__schedule,
.header-mobile-menu__phone {
    display: flex;
    align-items: center;
    gap: var(--distance-min);
    padding: var(--distance-midi) 0;
    font-size: var(--font-size-midi);
    color: var(--text-main);
    border-bottom: var(--border-gray);
    text-decoration: none;
}

.header-mobile-menu__socials {
    display: flex;
    align-items: center;
    gap: var(--distance-min);
    padding: var(--distance-midi) 0;
    border-bottom: var(--border-gray);
}

.header-mobile-menu__btns {
    display: flex;
    flex-direction: column;
    gap: var(--distance-min);
    padding-top: var(--distance-midi);
}

.header-mobile-menu__btns .header-btn {
    width: 100%;
    height: var(--height-button-lg);
    font-size: var(--font-size-midi);
}

/* ─── Попап подтверждения города ─── */

.city-confirm {
    position: fixed;
    bottom: var(--distance-midi);
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2000;
    white-space: nowrap;
}

.city-confirm__inner {
    display: flex;
    align-items: center;
    gap: var(--distance-48);
    justify-content: center;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--distance-20);
    padding: var(--padding-block-60);
    box-shadow: 0 4px 24px rgba(0,0,0,.15);
}
.city-confirm__buttons {
    display: flex;
    align-items: center;
    gap: var(--distance-24);
}
.city-confirm__text {
    font-size: var(--font-size-midi);
    color: var(--text-main);
}

.city-confirm__yes {
    background: var(--gold);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius-midi);
    padding: 0 var(--distance-midi);
    height: var(--height-button);
    font-size: var(--font-size-min);
    font-weight: 500;
    cursor: pointer;
    transition: opacity .2s;
}

.city-confirm__yes:hover { opacity: .85; }

.city-confirm__no {
    background: none;
    border: none;
    color: var(--link);
    font-size: var(--font-size-min);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

/* ─── Попап выбора города ─── */

.city-select-popup {
    background: var(--white);
    border-radius: var(--border-radius-max);
    padding: var(--distance-max);
    width: 480px;
    max-width: 100%;
}

.city-select-popup__title {
    font-size: var(--font-size-h3);
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: var(--distance-midi);
}

.city-select-popup__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--distance-micro);
    max-height: 400px;
    overflow-y: auto;
}

.city-select-popup__item {
    padding: var(--distance-min) var(--distance-midi);
    border-radius: var(--border-radius-midi);
    font-size: var(--font-size-midi);
    color: var(--text-main);
    cursor: pointer;
    transition: background .2s;
}

.city-select-popup__item:hover,
.city-select-popup__item.is-selected {
    background: var(--bg-gray);
}

/* ═══════════════════════════════════════════
   BREAKPOINTS HEADER
═══════════════════════════════════════════ */

/* tablet: 768–1279 */
@media screen and (min-width: 768px) {

    .header-top {
        padding: 10px 0px;
    }
    .header-logo__img {
        max-height: 54px;
    }

    .header-top__inner {
        gap: var(--distance-midi);
    }
    .header-btn--discount {
        width: auto;
        padding: 10px 12px ;
        height: 40px;
    }
    .header-burger {
        height: 60px;
        padding: 12px 36px;
        gap: 10px;
        font-size: 16px;
    }
    .header-burger__box {
        width: 19px;
        height: 14px;
    }
    .header-social img {
        width: 36px;
        height: 36px;
    }

    .header-burger__line:nth-child(1) {  width: 10px;  }
    .header-burger__line:nth-child(2) {  width: 16px; }
    .header-burger__line:nth-child(3) { width: 10px;  }

    .header-nav__right .header-nav__phone { display: inline-flex; }
    .header-nav__right .header-nav__socials { display: inline-flex; }

    .city-confirm {
        padding: var(--distance-midi) var(--distance-max);
    }
    .header-top__city-phone-text {
        display: inline-block;
        max-width: 65px;
        white-space: nowrap;
        overflow: hidden;
    }
    .header-top__phone {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .header-top__phone img {
        width: 18px;
        height: 18px;
    }
}

/* notebook: 1280+ */

@media screen and (min-width: 1280px) {

    .header-top__city-phone-text {
        max-width: 100%;
        overflow: inherit;
    }
    .header {
        z-index: 1100;
    }
    .header-contacts {
        flex-direction: row;
    }

    .header-burger {
        height: 40px;
    }
    .header-nav {
        max-width: 450px;
        right: 0px;
        left: auto;
        z-index: 2000;
    }
}

@media screen and (min-width: 1700px) {

    .header-top {
        height: 85px;
        border-radius: 0px;
        border: 0px;
    }
    /* На notebook+ правая часть nav скрывается — всё переезжает в топ-бар */
    .header-nav__right {
        display: none;
    }

    .header-menu--desktop {
        display: flex;
        flex: 1;
        overflow: hidden;
    }
    .header-btns {
        flex-direction: row;
        width: auto;
        gap: 10px;
    }

    .header-btn {
        padding: 0px 32px;
        font-size: 16px;
        gap: 8px
    }
    .header-contacts {
        padding-left: 52px;
        gap: 26px;
    }
    .header-contact {
        font-size: 16px;
    }
    .header-nav {
        opacity: 1;
        transform: translateY(0px);
        padding: 0px 0px 16px;
        border-radius: 0px 0px 20px 20px;
        position: relative;
        top: 0px;
        pointer-events: auto;
        max-width: 100%;
    }
    .header-menu__list {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .header-menu {
        border-top: 1px solid var(--gray-border);
        padding-top: 16px;
    }
    .header-menu__li {
        width: auto;
    }
    .header-menu__a--discount {
        border-radius: 10px;
        font-weight: 700;
        font-family: "Museo Sans Cyrl";
    }
}




/* ═══════════════════════════════════════════
   FOOTER VARIABLES
═══════════════════════════════════════════ */

:root {
    --bg-footer-main:      #2A2A2A;
    --footer-text:         #ffffff;
    --footer-text-muted:   #7A7A7A;
    --footer-divider:      #525252;
    --footer-social-size:  36px;
}

/* ═══════════════════════════════════════════
   FOOTER BASE
═══════════════════════════════════════════ */

.footer {
    background: var(--bg-footer-main);
    color: var(--footer-text);
    padding-bottom: calc(var(--distance-150) * 2.5);
}

/* ─── Main секция ─── */

.footer__main {
    padding: var(--distance-mega) 0 var(--distance-midi);
}

/* ─── Head: лого + город ─── */

.footer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
}

.footer-logo__img {
    display: block;
    max-height: 40px;
    width: auto;
}

/* ─── Кнопка города ─── */

.footer-city {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 0px;
    border-radius: var(--border-radius-midi);
    color: var(--footer-text);
    font-size: var(--font-size-min);
    padding: 10px 16px;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}

.footer-city:hover {
    background: rgba(255,255,255,0.14);
}

.footer-city__chevron {
    flex-shrink: 0;
    transition: transform .2s;
}

.footer-city.is-open .footer-city__chevron {
    transform: rotate(180deg);
}

/* ─── Контакты ─── */

.footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 49px;
}

.footer-contact {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--footer-text);
    text-decoration: none;
}

.footer-contact__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.footer-contact__icon img {
    width: 16px;
    height: 16px;
    filter: invert(1) brightness(2);
}

.footer-contact__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-contact__phone-800 {
    font-size: var(--font-size-midi);
    font-weight: 500;
    color: var(--footer-text);
    text-decoration: none;
    transition: color .2s;
}

.footer-contact__phone-800:hover {
    color: var(--gold);
}

.footer-contact__label {
    font-size: var(--font-size-min);
    color: var(--footer-text-muted);
}

.footer-contact__link {
    font-size: var(--font-size-midi);
    color: var(--footer-text);
    text-decoration: none;
    transition: color .2s;
}

.footer-contact__link:hover {
    color: var(--gold);
}

/* ─── Соцсети ─── */

.footer-socials {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--footer-social-size);
    height: var(--footer-social-size);
    border-radius: 50%;
    overflow: hidden;
    transition: opacity .2s;
    flex-shrink: 0;
}

.footer-social:hover {
    opacity: .8;
}

.footer-social img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ─── Меню (аккордеон mobile/tablet) ─── */

.footer__menus {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--footer-divider);
}

.footer-menu {
    border-bottom: 1px solid var(--footer-divider);
}

.footer-menu__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--footer-text);
    font-size: var(--font-size-midi);
    font-weight: 600;
    padding: var(--distance-midi) 0;
    cursor: pointer;
    text-align: left;
    transition: color .2s;
}

.footer-menu__title:hover {
    color: var(--gold);
}

.footer-menu__chevron {
    flex-shrink: 0;
    transition: transform .3s ease;
}

.footer-menu.is-open .footer-menu__chevron {
    transform: rotate(180deg);
}

.footer-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* аккордеон */
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s ease, padding .35s ease;
}

.footer-menu.is-open .footer-menu__list {
    max-height: 600px;
    padding-bottom: var(--distance-midi);
}

.footer-menu__item {
    margin-bottom: 12px;
}

.footer-menu__item:last-child {
    margin-bottom: 0;
}

.footer-menu__link {
    font-size: var(--font-size-min);
    color: var(--footer-text);
    text-decoration: none;
    transition: color .2s;
}

.footer-menu__link:hover {
    color: var(--gold);
}

/* ─── Legal секция ─── */

.footer__legal {
    padding: 29px 0 var(--distance-midi);
}

/* ─── Реквизиты ─── */

.footer__requisites {
    margin-bottom: 28px;
}

.footer__requisites-label {
    display: block;
    font-size: var(--font-size-min);
    color: var(--footer-text);
    font-weight: 300;
    margin-bottom: 11px;
}

.footer__requisites-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--font-size-min);
    color: var(--footer-text);
}

.footer__requisites-value {
    color: var(--footer-text-muted);
}

/* ─── Дисклеймер ─── */

.footer__disclaimer {
    font-size: 14px;
    color: var(--footer-text-muted);
    line-height: 1.2;
    margin-bottom: var(--distance-min);
}

/* ─── Bottom: политика + копирайт ─── */

.footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.footer__policy-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__policy-link {
    font-size: var(--font-size-min);
    color: var(--footer-text-muted);
    text-decoration: underline;
    text-decoration-color: var(--footer-divider);
    transition: color .2s;
}

.footer__policy-link:hover {
    color: var(--gold);
}

.footer__copy {
    font-size: var(--font-size-min);
    color: var(--footer-text-muted);
    line-height: 1.2;
}

/* ─── Читать подробнее ─── */

.footer__readmore {
    padding: 4px 0;
}

.footer__readmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-size: var(--font-size-min);
    color: var(--white);
    cursor: pointer;
    padding: 0;
    transition: color .2s;
    width: 100%;
    justify-content: center;
}

.footer__readmore-btn:hover {
    color: var(--gold);
}

.footer__readmore-btn svg path {
    transition: stroke .2s;
}

.footer__readmore-btn:hover svg path {
    stroke: var(--gold);
}

/* ═══════════════════════════════════════════
   FOOTER BREAKPOINTS
═══════════════════════════════════════════ */

/* tablet: 768+ */
@media screen and (min-width: 768px) {

    .footer__main {
        padding: 100px 0 var(--distance-midi);
    }

    .footer__contacts {
        display: grid;
        grid-template-columns: 1fr  ;
    }

    /* соцсети растягиваем на всю ширину */
    .footer-socials {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    .footer__requisites-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 17px;
        font-size: 14px;
    }
    .footer__requisites {
        margin-bottom: 36px;
    }
    .footer__disclaimer {
        margin-bottom: 15px;
    }
    .footer__policy-link {
        font-size: 14px;
    }

    .footer__policy-menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 16px;
    }
    .footer__bottom {
        gap: 36px;
    }
    .footer__legal {
        padding: 29px 0 30px;
    }
}

/* notebook: 1280+ */
@media screen and (min-width: 1700px) {

    .footer {
        padding-bottom: calc(var(--distance-150) * 1.5);
    }
    .footer-logo__img {
        max-height: 54px;
    }
    .footer__main {
        padding: 70px 0 47px;
    }
    .footer__contacts {
        gap: 21px;
    }
    .footer__head {
        margin-bottom: 27px;
    }


    .footer__legal {
        border-top: 1px solid var(--footer-divider);
        padding: 46px 0 32px;
    }
    .footer__requisites {
        margin-bottom: 33px;
    }

    .footer__disclaimer {
        font-size: 16px;
        margin-bottom: 47px;
    }
    .footer__policy-link {
        font-size: 16px;
    }
    /* ─── Десктоп: grid 12 колонок ─── */
    .footer__grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 0 var(--distance-midi);
        align-items: start;
    }

    /* контакты: колонки 1-4 */
    .footer__contacts {
        grid-column: 1 / 5;
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 0;
        /* лого над контактами */
        padding-top: 0;
    }

    /* меню: колонки 5-12 */
    .footer__menus {
        grid-column: 5 / 12;
        flex-direction: row;
        gap: 0;
        border-top: none;
        align-items: start;
    }

    .footer-menu {
        flex: 1;
        border-bottom: none;
    }

    /* лого — первый элемент в колонке 1-4, над контактами */
    .footer__contacts::before {
        content: '';
    }

    .footer-logo--desktop {
        grid-column: 1 / 5;
        margin-bottom: var(--distance-max);
    }

    /* аккордеон на десктопе — всегда открыт */
    .footer-menu__title {
        pointer-events: none;
        font-size: var(--font-size-min);
        font-weight: 400;
        color: var(--footer-text-muted);
        padding-bottom: 24px;
    }

    .footer-menu__item {
        margin-bottom: 4px;
    }

    .footer-menu__chevron {
        display: none;
    }

    .footer-menu__list {
        max-height: none !important;
        overflow: visible;
        padding-bottom: 0 !important;
    }

    /* город — правый верхний угол, в grid 12/13 */
    .footer-city--desktop {
        grid-column: 12 / 13;
        justify-self: end;
    }

    .footer__requisites-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 21px;
        font-size: 16px;
    }

    .footer__bottom {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
    }

    .footer__policy-menu {
        flex-direction: row;
        gap: 8px 36px;
    }
    .footer__readmore-btn {
        font-size: var(--font-size-min);
    }
}

/* ═══════════════════════════════════════════
  FOOTER NAVIGATION
═══════════════════════════════════════════ */

.footer__navigation-wrapper {
    position: fixed;
    bottom: 0px;
    width: 100%;
    left: 0px;
    z-index: 1000;
}
.footer__navigation {
    background: var(--white);
    box-shadow: 0px 0px 30px 0px rgba(42, 42, 42, 0.2);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.footer__navigation-btns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}

@media screen and (min-width: 768px) {

    .footer__navigation-wrapper {
        bottom: var(--distance-36);
    }
    .footer__navigation {
        border-radius: var(--distance-20);
    }
    .footer__navigation-btns {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}


/* ═══════════════════════════════════════════
  FOOTER NAVIGATION FLY
═══════════════════════════════════════════ */

.footer__navigation-fly {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
}

.footer__navigation-fly::-webkit-scrollbar {
    display: none;
}

.fly-navigation__btn {
    flex-shrink: 0;
    padding: 8px 16px;
    white-space: nowrap;
    border-radius: var(--border-radius-10);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fly-navigation__btn:hover {
    background: var(--gray);
}

.fly-navigation__btn.is-active {
    background: var(--gray);
}



/* ═══════════════════════════════════════════
   Footer content
═══════════════════════════════════════════ */
.footer__content {
    padding: var(--distance-150) 0px calc(var(--distance-150) * 2);
}
.footer__content-wrap {
    display: none;
}

.footer__content-wrap.active {
    display: block;
}

.footer__readmore-btn svg {
    transition: transform 0.3s ease;
}

.footer__readmore-btn.active svg {
    transform: rotate(180deg);
}
.footer__content h2,
.footer__content ol,
.footer__content ul  {
    padding-bottom: 1rem;
}


/* ═══════════════════════════════════════════
  SLIDER COMMON STYLES
═══════════════════════════════════════════ */

/* Базовые стили для всех слайдеров */
.js-slider {
    overflow: hidden;
    position: relative;
    padding-bottom: 50px;
}

.js-slider .swiper-wrapper {
    display: flex;
}

.js-slider .swiper-slide {
    height: auto;
    flex-shrink: 0;
    width: 300px;
}

/* Пагинация */
.js-slider .swiper-pagination-bullets.swiper-pagination-horizontal {
    position: relative;
    margin-top: 20px;
    text-align: center;
}

.js-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border: 1px solid var(--gray-dark);
    background: var(--white);
    opacity: 0.5;
}

.js-slider .swiper-pagination-bullet-active {
    background: var(--gold);
    border: 1px solid var(--gold);
    opacity: 1;
}

/* Навигация */
.js-slider .swiper-button-prev,
.js-slider .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    background: var(--white);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.js-slider .swiper-button-prev {
    left: -80px;
}

.js-slider .swiper-button-next {
    right: -80px;
}

.js-slider .swiper-button-prev::after,
.js-slider .swiper-button-next::after {
    font-size: 15px;
    font-weight: bold;
    color: var(--text-main);
}

/* Отключаем навигацию и пагинацию только если есть специальный класс */
.js-slider--no-nav {
    padding-bottom: 0;
}

.js-slider--no-nav .swiper-pagination,
.js-slider--no-nav .swiper-button-prev,
.js-slider--no-nav .swiper-button-next {
    display: none;
}


/* Десктоп: размеры слайдов задаются через data-атрибуты */
@media screen and (min-width: 1280px) {
    .js-slider {
        overflow: visible;
    }

    .js-slider .swiper-slide {
        width: auto;
    }
}

/* ─── Form ─── */


/* CF7 форма внутри блока */
.form-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.form-col {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }
.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}
.wpcf7-form-control {
    margin-bottom: 10px;
}
.wpcf7-form-control-wrap {
    width: 100%;
}
.wpcf7-radio {
    display: flex;
    gap: var(--distance-24);
}
.hero-form__form .wpcf7-form p {
    margin: 0;
}
.wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: 50%;

}
.wpcf7-list-item {
    margin: 0px;
}
.wpcf7-acceptance a {
    color: var(--gold);
    text-decoration: underline;
}
.wpcf7-list-item-label {
    display: inline-block;
}
.wpcf7-response-output {
    display: none;
}

.form-center {
    text-align: center;
}
@media screen and (min-width: 1280px) {
    .form-row {
        flex-direction: row;
        gap: 10px;
    }
}

/* ═══════════════════════════════════════
   FLOATING LABEL
═══════════════════════════════════════ */

.fl-field {
    position: relative;
    width: 100%;
}

.fl-field input,
.fl-field textarea {
    width: 100%;
    padding-top: 18px;
    padding-bottom: 6px;
    height: var(--height-input);
    /* убираем нативный placeholder */
    color: var(--text-main);
    transition: border-color 0.2s ease;
    margin-bottom: 0px;
}

.fl-field textarea {
    height: var(--height-textarea);
    padding-top: 24px;
}

.fl-label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-body-16);
    font-weight: 500;
    color: #999;
    pointer-events: none;
    transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    line-height: 1;
}
.fl-icon {
    position: absolute;
    display: block;
    right: 20px;
    width: 16px;
    height: 16px;
    top: 50%;
    transform: translateY(-50%);

}
.wpcf7-not-valid + .fl-label + .fl-icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='8' fill='%23D62D30'/%3e%3cpath d='M10.6924 4.87646C10.7628 4.89055 10.8299 4.91767 10.8896 4.95752L10.9727 5.02588L11.042 5.10986C11.1016 5.19933 11.1338 5.30548 11.1338 5.41455C11.1337 5.56006 11.0756 5.69935 10.9727 5.80225L8.77637 7.99951L10.9736 10.1968L11.043 10.2798C11.1026 10.3693 11.1347 10.4753 11.1348 10.5845C11.1348 10.7301 11.0766 10.8702 10.9736 10.9731C10.8707 11.0759 10.7314 11.1333 10.5859 11.1333C10.4403 11.1333 10.3002 11.0761 10.1973 10.9731L8 8.77588L5.80371 10.9731C5.75284 11.024 5.69244 11.0647 5.62598 11.0923C5.55935 11.1199 5.48717 11.1333 5.41504 11.1333C5.34303 11.1333 5.2716 11.1199 5.20508 11.0923C5.1386 11.0647 5.07825 11.024 5.02734 10.9731L5.02637 10.9722C4.9498 10.8951 4.89792 10.7978 4.87695 10.6929L4.86719 10.5854L4.87695 10.478C4.89786 10.373 4.94982 10.2758 5.02637 10.1987L5.02734 10.1978L7.22266 7.99951L5.02734 5.80225L5.01758 5.79248L5.00879 5.78271C4.91894 5.6778 4.8717 5.54281 4.87695 5.40479L4.89062 5.30225C4.91357 5.20277 4.96401 5.11079 5.03711 5.0376L5.11719 4.97217C5.20165 4.91472 5.30087 4.88147 5.4043 4.87744C5.50779 4.87344 5.60955 4.89891 5.69824 4.94971L5.78223 5.0083L5.79297 5.01709L7.99902 7.22314L10.1963 5.02588L10.2803 4.95752C10.3698 4.89785 10.4758 4.86572 10.585 4.86572L10.6924 4.87646Z' fill='white' stroke='white' stroke-width='0.7'/%3e%3c/svg%3e ");
}
/* textarea — лейбл от верха */
.fl-field textarea ~ .fl-label {
    top: 22px;
    transform: none;
}
.fl-field--focused textarea ~ .fl-label,
.fl-field--active textarea ~ .fl-label {
    top: 10px;
}

/* При фокусе или заполнении */
.fl-field--focused .fl-label,
.fl-field--active .fl-label {
    top: 10px;
    transform: none;
    font-size: 11px;
    color: var(--color-text);
}

/* Цвет лейбла при фокусе */
.fl-field--focused .fl-label {
    color: var(--color-text);
}

.fl-required {
    color: var(--color-text);
}

/* CF7 ошибка — подсветка поля */
.wpcf7-not-valid-tip {
    font-size: 14px;
    font-weight: 500;
    color: var(--red);
    margin-top: 4px;
    display: block;
}

input.wpcf7-not-valid,
textarea.wpcf7-not-valid {
    background: var(--red-light);
}

.wpcf7-not-valid + .fl-label {
    color: var(--red);
    opacity: 0.6;
}




/* ═══════════════════════════════════════════
   TABS COMMON STYLES
═══════════════════════════════════════════ */

[data-tabs] {
    width: 100%;
}

[data-tab-trigger] {
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-tab-trigger].active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

[data-tab-panel] {
    display: none;
}

[data-tab-panel].active {
    display: block;
}


/* ═══════════════════════════════════════════
   TABS POPUP
═══════════════════════════════════════════ */
.reviews-modal {
    display: none;
}



/* ═══════════════════════════════════════════
   TABS CASES CARD
═══════════════════════════════════════════ */
.case-card {
    background: var(--white);
    padding: var(--padding-block-36);
    border-radius: var(--border-radius-20);
}
.case-card__chips {
    display: flex;
    gap: 10px;
}
.case-card__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.case-card__sections {
    display: flex;
    flex-direction: column;
    gap: var(--distance-20);
}
.case-card__section {
    gap: 8px;
}
.case-card__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--distance-20);;
}
.case-card__link-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--distance-36);
}
@media screen and (min-width: 1700px) {
    .case-card__header {
        gap: 24px;
    }
}



/* ═══════════════════════════════════════════
   FAQ
═══════════════════════════════════════════ */


.faq {
    margin-top: var(--distance-150);
}

.faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--white);
    padding: var(--padding-block-60);
    border-radius: var(--border-radius-max);
}

.faq__item {
    border-bottom: 1px solid var(--devider);
}
.faq__item:last-child {
    border-bottom: 0px;
}

.faq__trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--distance-midi);
    width: 100%;
    padding: var(--distance-36) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}
.faq__item:first-child .faq__trigger {
    padding-top: 0px;
}
.faq__item:last-child .faq__trigger {
    padding-bottom: 0px;
}
.faq__question {
    font-size: var(--font-size-h3);
    font-weight: 500;
    color: var(--text-main);
    transition: color 0.2s ease;
}

.faq__trigger:hover .faq__question {
    color: var(--gold);
}

.faq__chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--text-main);
    transition: color 0.2s ease, transform 0.3s ease;
    width: 14px;
    height: 20px;
}

.faq__chevron img {
    width: 100%;
}
.faq__item.is-open .faq__chevron {
    color: var(--gold);
    transform: rotate(180deg);
}

.faq__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.faq__item.is-open .faq__body {
    grid-template-rows: 1fr;
}

.faq__content {
    overflow: hidden;
}

.faq__answer {
    padding-bottom: var(--distance-midi);
    font-size: var(--font-size-min);
    color: var(--text-main);
    line-height: 1.6;
}

.faq__answer p:last-child {
    margin-bottom: 0;
}
.faq__buttons {
    margin-top: var(--distance-28);
    margin-bottom: var(--distance-36);
}



/* ═══════════════════════════════════════════
   Team Card
═══════════════════════════════════════════ */

.employer-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 300px;
}
.team__slider .employer-card {
    height: 100%; 
}

.employer-card__photo-wrap {
    border-radius: var(--border-radius-20);
    overflow: hidden;
    background: var(--divider);
    flex-shrink: 0; /* Фото не сжимается */
}

.employer-card__city {
    position: absolute;
    top: var(--distance-28);
    left: var(--distance-28);
    z-index: 1; /* Чтобы город был поверх фото */
}

.elementor img.employer-card__photo {
    width: 300px;
    height: 300px;
    object-fit: cover;
    display: block;
}

.elementor .employer-card__photo-placeholder {
    width: 300px;
    height: 300px;
    background: var(--team-card-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.employer-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--white);
    border-radius: var(--border-radius-20);
    padding: var(--distance-28);
    flex: 1;
    justify-content: space-between;
}

.employer-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.employer-card__name {
    font-size: 16px;
    font-weight: 700;
    color: #2A2A2A;
}

.employer-card__role {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
    display: block;
}

.employer-card__stats {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.employer-card__stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.employer-card__stat-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Кнопка внутри карточки будет прижата к низу */
.employer-card__body .button {
    margin-top: auto;
}

@media (min-width: 1280px) {
    .employer-card {
        width: 400px;
    }
    .elementor img.employer-card__photo,
    .employer-card__photo-placeholder {
        width: 400px;
        height: 420px;
    }
}




/* ═══════════════════════════════════════════
   POPUPS
═══════════════════════════════════════════ */

.popups-form {
    display: none;
}
.popup {
    display: flex;
    flex-direction: column;
    gap: var(--distance-36);
    align-items: center;
}
.fancybox-content {
    background: var(--white);
    border-radius: var(--border-radius-20);
    padding: var(--padding-block-60);
    max-width: 100%;
}
.fancybox-video-popup .fancybox-content {
    background: transparent;
    padding: 0;

    /* Вычисляем ширину из высоты с учётом соотношения 9:16 */
    height: calc(100vh - 80px);
    width: calc((100vh - 80px) * 9 / 16);
    max-width: 90vw;
}

.video-popup-wrap,
.video-popup-wrap > div {
    width: 100%;
    height: 100%;
}

.video-popup-wrap iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.popup-header {
    display: flex;
    flex-direction: column;
    gap: var(--distance-24);
    align-items: center;
}
.popup__actions .button {
    min-width: 270px;
}
.popup-form-700 {
    max-width: 700px;
    margin: 0px auto;
}

@media screen and (min-width: 768px) {

    .fancybox-content {
        min-width: 728px;
    }
}
@media screen and (min-width: 1280px) {

    .fancybox-content {
        min-width: 1096px;
    }
}