/* =========================================================
   CONSULTATION PAGE
   ========================================================= */

body.consultation-page {
    background: #d8d8d8;
    color: #2b2b2b;
    min-height: 100vh;
}


/* =========================================================
   ОСНОВНОЙ БЛОК
   ========================================================= */

.consultation {
    min-height: calc(100vh - var(--header-height));
    margin-top: var(--header-height);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 60px 40px 100px;
    box-sizing: border-box;
}


.consultation__content {
    width: 100%;
    max-width: 720px;
    text-align: center;
}


/* Маленький заголовок */

.consultation__eyebrow {
    margin: 0 0 28px;

    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;

    color: #666666;
}


/* Главный заголовок */

.consultation__title {
    margin: 0 auto 28px;

    max-width: 700px;

    font-size: 42px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;

    color: #1a1a1a;
}


/* Описание */

.consultation__description {
    max-width: 520px;

    margin: 0 auto 22px;

    font-size: 15px;
    line-height: 1.7;

    color: #666666;
}


/* Бесплатная консультация */

.consultation__note {
    margin: 0 0 42px;

    font-size: 13px;
    line-height: 1.5;

    color: #2b2b2b;
}


/* =========================================================
   КНОПКА
   ========================================================= */

.consultation__button {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding: 14px 22px;

    border: 1px solid #2b2b2b;

    color: #2b2b2b;
    text-decoration: none;

    font-size: 11px;
    letter-spacing: 0.08em;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


.consultation__button span {
    font-size: 17px;
    transition: transform 0.3s ease;
}


.consultation__button:hover {
    background: #2b2b2b;
    color: #ffffff;
}


.consultation__button:hover span {
    transform: translateX(4px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .consultation {
        min-height: calc(100vh - var(--header-height));

        padding: 50px 24px 90px;
    }


    .consultation__eyebrow {
        margin-bottom: 22px;

        font-size: 10px;
        letter-spacing: 0.1em;
    }


    .consultation__title {
        font-size: 30px;
        line-height: 1.25;

        margin-bottom: 24px;
    }


    .consultation__description {
        max-width: 330px;

        font-size: 13px;
        line-height: 1.6;
    }


    .consultation__note {
        margin-bottom: 34px;

        font-size: 12px;
    }


    .consultation__button {
        font-size: 10px;
        padding: 13px 19px;
    }
}

/* =========================================================
   CONSULTATION — LIGHT HEADER
   ========================================================= */

.consultation-page {
    font-family: 'Montserrat', sans-serif;
}

.consultation-page .header--light {
    background-color: #d8d8d8;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.consultation-page .header--light .logo__name {
    color: #2b2b2b;
}

.consultation-page .header--light .logo__sub {
    color: #777777;
}

.consultation-page .header--light .nav__link {
    color: #2b2b2b;
}

.consultation-page .header--light .social-icon {
    border-color: rgba(0, 0, 0, 0.3);
    color: #2b2b2b;
}

.consultation-page .header--light .social-icon:hover {
    border-color: #000;
    background-color: rgba(0, 0, 0, 0.05);
}

/* =========================================================
   ALTERNATIVE CONTACT — TELEGRAM
   ========================================================= */

.consultation__telegram {
    margin: 22px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #777777;
}

.consultation__telegram a {
    color: #555555;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s ease;
}

.consultation__telegram a:hover {
    opacity: 0.55;
}


/* MOBILE */

@media (max-width: 768px) {

    .consultation__telegram {
        margin-top: 20px;
        font-size: 10px;
    }

}

/* =========================================================
   CONTACT LINKS
   ========================================================= */

.consultation__contacts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    margin-top: 28px;
}

.consultation__contact {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #555555;
    text-decoration: none;

    font-size: 15px;

    transition: opacity 0.3s ease;
}

.consultation__contact:hover {
    opacity: 0.5;
}

.consultation__phone {
    color: #555555;
    text-decoration: none;

    font-size: 11px;
    letter-spacing: 0.03em;

    transition: opacity 0.3s ease;
}

.consultation__phone:hover {
    opacity: 0.5;
}


/* MOBILE */

@media (max-width: 768px) {

    .consultation__contacts {
        gap: 18px;
        margin-top: 24px;
    }

    .consultation__contact {
        font-size: 14px;
    }

    .consultation__phone {
        font-size: 10px;
    }

}

/* =========================================================
   CONSULTATION FORM
   ========================================================= */

.consultation-form {
    display: none;
    width: 100%;
    max-width: 520px;
    margin: 42px auto 0;
    text-align: left;
}

.consultation-form.is-open {
    display: block;
}

.consultation-form__field {
    margin-bottom: 24px;
}

.consultation-form__field label {
    display: block;
    margin-bottom: 8px;

    font-size: 9px;
    letter-spacing: 0.1em;
    color: #777777;
}

.consultation-form__field input,
.consultation-form__field textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 10px 0;

    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);

    background: transparent;

    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #2b2b2b;

    outline: none;

    transition: border-color 0.3s ease;
}

.consultation-form__field textarea {
    resize: vertical;
    min-height: 80px;
}

.consultation-form__field input:focus,
.consultation-form__field textarea:focus {
    border-color: #222222;
}

.consultation-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-top: 10px;
    padding: 14px 22px;

    border: 1px solid #2b2b2b;
    background: transparent;

    color: #2b2b2b;

    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    letter-spacing: 0.08em;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.consultation-form__submit span {
    font-size: 17px;

    transition: transform 0.3s ease;
}

.consultation-form__submit:hover {
    background: #2b2b2b;
    color: #ffffff;
}

.consultation-form__submit:hover span {
    transform: translateX(4px);
}

.consultation-form__success {
    display: none;

    margin-top: 28px;

    font-size: 12px;
    line-height: 1.6;
    color: #555555;
}

.consultation-form__success.is-visible {
    display: block;
}


/* Защита от ботов */

.form-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);

    height: 1px;
    width: 1px;

    margin: -1px;
    padding: 0;
}


/* MOBILE */

@media (max-width: 768px) {

    .consultation-form {
        margin-top: 34px;
    }

    .consultation-form__field {
        margin-bottom: 21px;
    }

    .consultation-form__field label {
        font-size: 8px;
    }

    .consultation-form__field input,
    .consultation-form__field textarea {
        font-size: 12px;
    }

    .consultation-form__submit {
        font-size: 9px;
    }
}

/* =========================================================
   CONSULTATION — INTERIOR BACKGROUND / MULTIPLY
   ========================================================= */

body.consultation-page {
    position: relative;
    background: #d8d8d8;
}

/* Фотография интерьера */
body.consultation-page::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 0;

    background-image: url("../assets/images/consultation-bg.webp");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    opacity: 0.16;

    mix-blend-mode: multiply;

    pointer-events: none;

    filter: grayscale(100%) contrast(0.8);
}

/* Контент поверх изображения */
body.consultation-page .header,
body.consultation-page .consultation,
body.consultation-page .footer-contacts {
    position: relative;
    z-index: 1;
}

/* =========================================================
   CONSULTATION — MOBILE DARK HEADER
   ========================================================= */

@media (max-width: 768px) {

    .consultation-page .header--light {
        background: #1a1a1a;
        color: #ffffff;
    }

    .consultation-page .header--light .logo__name,
    .consultation-page .header--light .logo__sub,
    .consultation-page .header--light .nav__link,
    .consultation-page .header--light .social-icon {
        color: #ffffff !important;
    }

    .consultation-page .header--light .logo__sub {
        opacity: 0.65;
    }

    .consultation-page .header--light .social-icon {
        border-color: rgba(255, 255, 255, 0.4);
    }
}