.contact-fullscreen {}


.contact-fullscreen__container {
    position: relative;

}

.contact-fullscreen__container::before {
    content: '';
    width: 100vw;
    height: 100%;
    left: 50%;
    top: 0;
    position: absolute;
    z-index: -1;
    transform: translateX(-50%);
    background: radial-gradient(451.73% 132.38% at 50% 116.67%, rgba(107, 237, 212, 0.38) 0%, rgba(82, 199, 173, 0.24) 25%, rgba(56, 140, 128, 0.10) 55%, rgba(46, 107, 102, 0.00) 100%), linear-gradient(250deg, #296661 39.54%, #337A75 52.51%, #245C59 65.47%);

}

.contact-fullscreen__inner {
    display: grid;

}

/* 3 колонки без gap на десктопе */
@media (min-width: 1024px) {
    .contact-fullscreen__inner {
        grid-template-columns: 35% 30% 35%;
        gap: 0;
        align-items: center;
    }
}

.contact-fullscreen__col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--bg-white);
    position: relative;
}

/* Отступы для крайних колонок */
.contact-fullscreen__col--text {
    padding: 0 var(--space-6) 0 0;
    margin: 1.8rem 0;
}



.contact-fullscreen__col--form {
    padding: 0;
    margin: 1.8rem 0;
}



/* Центральное изображение */
.contact-fullscreen__col--image {
    padding: 0;
    min-height: 11.5rem;
    height: 100%;
}

.contact-fullscreen__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

/* Типографика */
.contact-fullscreen__title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin-bottom: var(--space-5);
    color: var(--bg);
    line-height: 120%;
    font-weight: 500;
}

.contact-fullscreen__title .accent {
    color: var(--brand);
}

.contact-fullscreen__description {
    color: var(--bg-white);
    font-size: .7rem;
}

.contact-fullscreen__features {
    list-style: none;
    padding: 0;
    gap: var(--space-3);
}

.contact-fullscreen__feature {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--text);
}

.contact-fullscreen__feature-icon {}

.contact-fullscreen__feature-text {
    min-width: 0;
}

/* Форма */
.contact-fullscreen__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-fullscreen__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.contact-fullscreen__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-fullscreen__field label,
.contact-fullscreen__field .phone-input__label {
    font-size: 0.7rem;
    color: var(--bg-white);
    line-height: 100%;
    padding-left: var(--space-5);
}


.contact-fullscreen__input {
    width: 100%;
    padding: 0.75rem 1rem;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 1.2rem;
    font-family: var(--font-main);
    color: var(--bg-white);
    outline: none;
    transition: border-color 0.3s ease;
    box-shadow: 0 20px 40px -15px rgba(10, 61, 36, 0.05);
    font-size: .9rem;
    line-height: 100%;
    background: rgba(0, 0, 0, 0.60);
    padding: 0.5rem 1.2rem;

}

.contact-fullscreen__input::placeholder {
    color: #B9C1C1;
}

.contact-fullscreen__input:focus {
    outline: none;
    border-color: var(--bg-white-muted);
}

.contact-fullscreen__form .phone-input__input {
    background-color: #102926 !important;
    color: #fff !important;
    padding: 0.5rem 1.2rem;
}

.contact-fullscreen__form .phone-input__input:focus-visible {
    border-color: var(--bg-white-muted) !important;
}

.contact-fullscreen__form .phone-input .iti__country.iti__highlight,
.contact-fullscreen__form .iti--detached-country-selector .iti__country.iti__highlight,
.contact-fullscreen__form .iti--container .iti__country.iti__highlight {
    background: transparent !important;
    color: var(--bg-white-muted) !important;
}


.contact-fullscreen__form .phone-input .iti__country-selector,
.contact-fullscreen__form .phone-input .iti--detached-country-selector,
.contact-fullscreen__form .phone-input .iti.iti--inline-country-selector .iti__country-selector {
    background-color: #102926 !important;
}

.contact-fullscreen__form .phone-input .iti__country-check-svg,
.contact-fullscreen__form .iti--detached-country-selector .iti__country-check-svg {
    color: var(--brand-muted) !important;
}

.contact-fullscreen__form .phone-input .iti__arrow {

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5" fill="none"><path d="M5 5L0 0H10L5 5Z" fill="%23FFF"/></svg>');

}

.contact-fullscreen__form .phone-input .iti__dial-code,
.contact-fullscreen__form .iti--container .iti__dial-code {
    color: var(--brand-muted);
}

.contact-fullscreen__consent {
    font-size: 0.7rem;
    line-height: 100%;
    color: var(--bg);
}

.contact-fullscreen__consent a {
    color: var(--text);
    text-decoration: none;
}

.contact-fullscreen__consent a:hover {
    color: var(--bg-white);
}


.contact-fullscreen__submit button {
    width: 100%;
    padding: .5rem 1.2rem;
    border: 1px solid var(--brand) !important;
    max-height: 2.1rem;
}



.contact-fullscreen__submit .action-button.is-loading .action-button__label,
.contact-fullscreen__submit .action-button.is-loading .action-button__icon {
    opacity: 0;
}





@media (max-width: 1024px) {
    .contact-fullscreen__col--text {
        padding: 0;
        margin: var(--space-5) 0 0 0;
    }

    .contact-fullscreen__col--form {
        padding: 0;
        margin: var(--space-5) 0;

    }

    .contact-fullscreen__col--image {
        min-height: 8rem;
        order: 2;
    }

    .contact-fullscreen__img {
        object-fit: contain;
    }

    .contact-fullscreen__title {
        font-size: 1.1rem;
        margin-bottom: var(--space-3);
    }

}

@media (max-width: 768px) {
    .contact-fullscreen__fields {
        grid-template-columns: repeat(1, 1fr);
        gap: var(--space-3);
    }

    .contact-fullscreen__features {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 568px) {
    .contact-fullscreen__features {
        grid-template-columns: repeat(1, 1fr);
    }

    .contact-fullscreen__img{
        object-fit: cover;
    }
}