.generalFormService {
    width: 100%;
    max-width: 66.66667%;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px auto;
    font-family: "Nissan Brand", Sans-serif !important;

    h2 {
        font-size: 36px;
        color: #222;
        line-height: 1.22;
        text-transform: uppercase;
        font-weight: 300;
        margin-bottom: 48px;
    }

    .containerContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
        margin-bottom: 48px;

        p {
            font-weight: 300;
            line-height: 1.5;
            font-size: 16px;
        }

        .inputContainerContent {
            position: relative;
            width: 100%;
            max-width: 590px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .inputArea {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                position: relative;
                padding: 15px 15px;
                height: 70px;
                background-color: #fff;
                border: 1px solid #dcdee2;
                flex-wrap: wrap;
                gap: 0;
                align-content: flex-start;
                justify-content: center;
                width: 100%;
                max-width: 590px;
                cursor: pointer;
                transition: .1s all ease-in-out;


                .textInfo {
                    color: black;
                    opacity: 1;
                }

                span {
                    color: #666;
                    opacity: 0.5;
                    font-size: 16px;
                    position: relative;
                    top: 0px;

                    transition: all .2s ease-in-out;
                }

            }

            .inputArea:after {
                content: '';
                background-image: url(https://dev.nissan-global.by/wp-content/uploads/2025/12/chevron.png);
                background-repeat: no-repeat;
                background-size: cover;
                width: 20px;
                height: 20px;
                position: absolute;
                right: 15px;
                transform: rotate(90deg);
                transition: all .2s ease-in-out;
            }

            .rotateClass:after {
                transform: rotate(270deg);
            }

            .dropListInput {
                width: 100%;
                max-width: 590px;
                background-color: #fff;
                border: 1px solid #dcdee2;
                border-top: unset;
                height: 0;
                opacity: 0;
                overflow: hidden;
                visibility: hidden;
                transition: .2s all ease-in-out;
                position: absolute;
                top: 70px;
                max-height: 222px;
                z-index: 1000;


                input {
                    border: unset;
                    height: 30px;
                    padding: 6px 20px;
                    width: 100%;
                    border-bottom: 1px solid #dcdee2;
                    color: #bbb;
                    outline: unset;
                }

                .listItems {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    height: 0px;
                    overflow: hidden;
                    transition: height .2s ease-in-out;
                    max-height: 200px;
                    overflow-y: auto;


                    span {
                        padding: 12px 20px;
                        font-weight: 300;
                        font-size: 16px;
                        height: 48px;
                        width: 100%;
                        cursor: pointer;
                        background-color: #fff;
                        transition: .2s all ease-in-out;
                    }

                    span:hover {
                        background-color: #eee;
                        color: #222;
                    }

                    span:hover~.inputArea {
                        border-bottom: 3px solid black !important;
                    }
                }
            }
        }
    }
}

.inputArea:hover {
    border-bottom: 3px solid black !important;
}

.inputContainerContent:has(.listItems span:hover) .inputArea {
    border-bottom: 3px solid #000 !important;
}

.inputContainerContent:has(.dropListInput input:hover) .inputArea {
    border-bottom: 3px solid #000 !important;
}

.openDropList {
    opacity: 1 !important;
    visibility: visible !important;
}


.dropListCalendar {
    overflow: hidden;
    height: 0;
    max-height: 220px !important;
    max-width: 250px !important;
    left: 0;
}

.dropListCalendar.openDropList {
    /* у тебя это уже может быть, если нужно — оставь как есть */
}

.dropListCalendar .calendarHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 6px;
    font-weight: 600;
}

.dropListCalendar .calTitle {
    font-size: 14px;
}

.dropListCalendar .calPrev,
.dropListCalendar .calNext {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
}

.dropListCalendar .calPrev:hover,
.dropListCalendar .calNext:hover {
    background: rgba(0, 0, 0, .06);
}

.dropListCalendar .calPrev:before,
.dropListCalendar .calNext:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.dropListCalendar .calPrev:before {
    border-right: 8px solid #999;
    margin-left: -2px;
}

.dropListCalendar .calNext:before {
    border-left: 8px solid #999;
    margin-left: 2px;
}

.dropListCalendar .calWeekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 6px 12px;
    color: #777;
    font-weight: 600;
    font-size: 12px;
}

.dropListCalendar .calWeekdays span {
    text-align: center;
    padding: 6px 0;
}

.dropListCalendar .calGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0 12px 12px;
}

.dropListCalendar .calDay {
    height: 23px;
    font-size: 13px !important;
    border: 0;
    background: #f8f8f8;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    color: #333;
}

.dropListCalendar .calDay:hover {
    background: rgba(0, 0, 0, .06);
}

.dropListCalendar .calDay.isMuted {
    opacity: .35;
}

.dropListCalendar .calDay.isToday {
    outline: 1px solid rgba(0, 0, 0, .25);
}

.dropListCalendar .calDay.isSelected {
    background: #333;
    color: #fff;
}

.calDay.isDisabled {
    opacity: .25;
    cursor: not-allowed;
    background: unset !important;
}

.calDay.isDisabled:hover {
    background: transparent;
}

.timeInput .inputArea,
.nameInput {
    overflow: hidden !important;
}

.timeInput .inputArea:after {
    background-image: url('https://dev.nissan-global.by/wp-content/uploads/2025/12/free-icon-clock-3818205.png') !important;
    width: 15px !important;
    height: 15px !important;
}

.nameInput:after {
    background-image: unset !important;
}

.timeInput .inputArea .timeText,
.nameInput .infoName {
    border: unset;
    outline: none;
    width: 100%;
    height: 100%;
    font-size: 16px;
}

/* PHONE: убираем стрелку у inputArea (у тебя она через :after) */
.phoneContainer .inputArea:after {
    background-image: unset !important;
}

/* строка внутри inputArea */
.phoneContainer .phoneRow {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    height: 100%;
}

/* кнопка страны слева */
.phoneContainer .phoneCountryBtn {
    height: 100%;
    min-width: 74px;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #dcdee2;
    position: relative;

}

.phoneContainer .phoneCountryBtn .phoneCountryText {
    font-size: 16px !important;
    opacity: 1 !important;
    color: black !important;
}

.phoneContainer .phoneCountryBtn:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid #888;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin-left: 8px;
    transform: rotate(90deg);
}

/* инпут телефона */
.phoneContainer .phoneText {
    border: 0;
    outline: none;
    height: 100%;
    width: 100%;
    padding: 0 40px 0 14px;
    /* место под крестик */
    font-size: 16px;
    color: #222;
}

/* крестик справа как на скрине */
.phoneContainer .phoneClear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 22px;
    color: #222;
    opacity: .55;
    display: none;
    /* показываем когда есть значение */
}

.phoneContainer .phoneClear:hover {
    opacity: 1;
}

/* dropdown выравниваем под всю ширину */
.phoneContainer .phoneDrop {
    max-width: 590px;
}

/* чтобы клик по inputArea работал как у тебя (курсор) */
.phoneContainer .inputArea {
    cursor: text;
    padding: 0 !important;
    /* у тебя padding 15px, тут удобнее внутри */
}

.phoneContainer .inputArea .phoneRow {
    padding: 15px 15px;
    /* вернули визуально как было */
    position: relative;
}

.phoneContainer .phoneDrop .listItems {
    max-height: 185px !important;
}

.checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 590px;
}

.ui-check__link {
    color: #0b3a8f;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ui-check__link:hover {
    opacity: .85;
}

.checkBlock {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 48px;
}

.checkBox {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 7px;
}

.checkBox input[type="checkbox"] {
    border: 1px solid #ccc;
    width: 24px;
    height: 24px;
    color: #fff;
    vertical-align: middle;
}

.checkBox label a {
    font-size: 16px;
    color: #081c34;
    line-height: 24px;
}

.generalFormService .sendBtn {
    height: 56px;
    width: 294px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-color: #081c34;
    color: #081c34;
    border-radius: 30px;
    border: 1px solid #081c34;
    text-transform: uppercase;
    font-family: "Nissan Brand", Sans-serif;
    transition: .2s all ease-in-out;
    cursor: pointer;
}

.generalFormService .sendBtn:hover {
    background-color: #081c34;
    border-color: #081c34;
    color: #fff;
}