/* ======================== ОСНОВНА СТРУКТУРА КАЛЬКУЛЯТОРА ======================== */
.window-calculator {
    padding: 40px 40px;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    font-family: Arial, sans-serif;
}

.window-calculator .page-type-product h1 {
     font-size: 2rem !important;
  line-height: 2rem;
  font-weight: 800;
  color: #182978;
}


#userDataForm, #sucsesful {
    display: none;
}

.format-options .unit label {
    /* 🔥 Ключ: Скрыть визуально, но оставить в потоке */
    opacity: 0; 
    height: 0; 
    overflow: hidden;

    /* Сбрасываем отступы */
    margin: 0 !important;
    padding: 0 !important;

    /* ✅ Добавляем курсор, чтобы инпут не перекрывал его */
    cursor: pointer; 
}


.profile-selection .profile-option label:before,
.door-type-selection-wrapper .door-type-option label:before{
    content: ''; /* Обязательно для отображения псевдоэлемента */
    display: block;
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    /* ФОРМА */
    border-radius: 50%; /* Делает элемент КРУГЛЫМ */
    /* ЦВЕТ */
    border: 1px solid #eeeeee; /* Светло-серый цвет РАМКИ */
    background: transparent; /* ПРОЗРАЧНАЯ заливка */
    /* ЭФФЕКТЫ */
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	

}

.profile-selection .profile-option.active label:before ,
.door-type-selection-wrapper .door-type-option.active label:before{
    /* ЦВЕТ */
    background-color: rgba(255, 217, 0, 0.8); /* ЖЕЛТО-ЗОЛОТИСТЫЙ цвет ЗАЛИВКИ */
    /* АНИМАЦИЯ */
    -webkit-animation: cd-bounce 0.3s;
    -moz-animation: cd-bounce 0.3s;
    animation: cd-bounce 0.3s;
	text-align: left !important;
}
.profile-selection .profile-option label,
.door-type-selection-wrapper .door-type-option label {
    position: relative;
    padding-left: 30px; 
    margin-left: 0;
    padding-right: 20px;
    display: block;
	cursor: pointer;
	

    /* 🔥🔥 ГЛАВНОЕ ИСПРАВЛЕНИЕ: */
    text-align: left; /* Устанавливаем выравнивание текста внутри метки */
    margin: 0 auto 0 0; /* Прижимаем метку к ЛЕВОМУ краю Flexbox-контейнера */
    white-space: nowrap; /* Не даем тексту переноситься, если это не нужно */
}


/* ======================== ВИБІР КОНСТРУКЦІЇ ТА ПРОФІЛЮ (ЖОВТИЙ АКЦЕНТ) ======================== */

.door-type-selection-wrapper,
.profile-selection {
    display: flex;
    flex-wrap: wrap; 
    
    /* Устанавливаем адаптивный зазор: 2.5vw по горизонтали и 15px по вертикали */
    gap: 15px 1vw; 
    
    /* Устанавливаем привязку к левому краю, чтобы кнопки не растягивались и не поглощали gap */
    justify-content: flex-start;
    margin-bottom: 20px;
}

.door-type-option,
.profile-option {
    /* Отключаем рост и сжатие (flex: 0 0) и устанавливаем точную ширину: */
    /* (100% - общий горизонтальный зазор 5vw) / 3 элемента */
     flex: 0 0 calc((100% - 2vw ) / 3);  
    
    /* Убираем все конфликтующие margin */
    margin: 0 !important; 
    /* Сохраняем минимальный размер, чтобы избежать слишком узких кнопок */
    min-width: 220px; 
    
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px 15px;
    text-align: center;
    transition: all 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    /* Убеждаемся, что текст в кнопке тоже прижат влево */
    justify-content: flex-start; 
}
.button {
 border-radius: 60px; 
}
.door-type-option input[type="radio"],
.profile-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
	cursor: pointer;
}

.door-type-option.active,
.profile-option.active,
.format-selection .unit.active{
    border-radius: 4px;
    border: 1px solid rgba(255, 217, 0, 0.8);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    background: #ffffff;
}


/* ======================== ВИБІР ФОРМАТУ (Зображення) ======================== */

.format-selection h3 {
	display: flex;
    text-align: center;
    margin-bottom: 15px;
    font-size: 1em;
    color: #333;
}
.format-options {
    display: flex;
    flex-wrap: wrap;
    
    /* 🔥 ГЛАВНОЕ ИСПРАВЛЕНИЕ: 
       Центрирует ряд элементов целиком, если их суммарная ширина меньше 100%. */
    justify-content: center; 
    
    /* Добавьте небольшой зазор (gap) между иконками, если это нужно 
       (свойство "gap" - современное и предпочтительное) */
    gap: 20px; 
}

.format-selection .unit {
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
	 padding-top: 0;
    padding-bottom: 0;
    /* Убеждаемся, что элемент плотно прилегает */
    line-height: 1; 
    margin-bottom: 0;
    position: relative; /* Обязательно, чтобы инпут позиционировался относительно него */
    cursor: pointer; 
}

.format-selection .unit__image {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    transition: border-color 0.2s;
    margin-bottom: 0px;
}

.format-selection .unit img {
    max-width: 80px;
    height: auto;
    display: block;
}
.format-selection .unit {
    cursor: pointer;
}

.format-selection .unit input[type="radio"] {
    display: none !important; /* 🔥 Усиленное скрытие */
}
.title-h3 {
    font-size: 1.3em;
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 15px;
    color: #182978;
}

/* ======================== 4. ДВОКОЛОНКОВИЙ МАКЕТ: ВІКНО + ОПЦІЇ ======================== */

.calc-layout-wrapper {
    display: flex;
    gap: 15px;
    align-items: center; /* Вирівнювання елементів зверху */
}

.visualization-block {
    flex: 0 0 60%; /* 🔥 60% ширини контейнера calc-layout-wrapper */
    
    /* Залишаємо стилі центрування */
    display: flex;
    flex-direction: column; 
    align-items: center; 
}


/* ======================== БЛОК ВІЗУАЛІЗАЦІЇ (ЛІВА КОЛОНКА) ======================== */

.calcimages {
	background: rgba(0, 40, 190, 0.05);
    padding: 0;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
	width: 100%
}

.window-image {
    /* Обмежуємо розмір самого зображення вікна, щоб воно було центроване */
    max-width: 100%; 
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.window-image img {
	margin: 20px;
    max-width: 100%; 
    height: auto;
    display: block;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.opening-type-selection-dropdown-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 0; 
}

#generalOpeningTypeDropdown {
    width: 200px; 
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    appearance: none; 
    background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%20228.4L154.2%2095.6l-132%20132.8%2022.4%2022.4%20109.6-109.6L264.6%20250.8z%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px center; 
    background-size: 10px;
}



/* ======================== БЛОК ОПЦІЙ (ПРАВА КОЛОНКА) ======================== */

.optionssize {
    display: flex;
    flex-direction: column; 
    gap: 10px; 
}

.optionssize label {
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
    font-weight: 500;
    color: #555;
    margin-bottom: 10px;
}

/* Стилі для рядка з Шириною та Висотою */
.dimensions-row {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.dimensions-row > div {
    flex: 1;
}

.optionssize input[type="number"],
.optionssize select {
    color: #666666;
    font-family: 'Arial', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    line-height: 1.25;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    padding: 15px 10px 15px 10px;
    transition: all 0.2s linear 0s;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 5px;
}

}

.total {
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee; 
    width: 100%;
}

.total {
    text-align: center;
	align-items: center
}

#continueButton,
#backButton,
#submitRequest {
    padding: 1vw 2vw;
    margin-top: 20px;
    height: auto;
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 60px;
    text-decoration: none;
}

.button-form {
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dimensions input[type="number"] {
    width: 100%;
    color: #666666;
    font-family: 'Arial', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    line-height: 1.25;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    padding: 10px 10px 10px 10px;
    transition: all 0.2s linear 0s;
    margin-top: 10px;
}
#window-options-inline columns-2{
	width: 60vw;
}
#windowOptions {
    margin-top: 15px;  
    display: flex;   
    flex-wrap: wrap;   
    gap: 15px;
    width: 100%; 
    justify-content: center; /* 🔥 ЦЕНТРУЄ вміст, коли його загальна ширина менша за 100% */
}
#windowOptions.columns-2 .windowType,
#windowOptions.columns-2 .windowType.form-control {
    /* 1. Ширина 20% + ГАРАНТІЯ 2 КОЛОНОК */
    /* Використовуємо 20% ширини, але також обмежуємо max-width для візуального контролю */
    flex: 0 0 25% !important; 
    width: 25% !important;     
    
    /* 2. Обмежуємо візуальний розмір (можна налаштувати) */
    max-width: 150px !important; 
    
    /* Скидаємо margin за замовчуванням і додаємо вертикальний відступ між рядками */
    margin: 0 !important; 
    margin-bottom: 15px !important; /* Відступ між рядками */
}

#windowOptions.single-select-mode .windowType {
    /* 100% ширини для селекта */
    flex: 1 0 100% !important; 
    width: 100% !important; 
}

/* Контейнер повинен бути на 100% ширини і використовувати flex-direction: column */
#windowOptions.single-select-mode {
    display: flex;
    flex-direction: column; /* 🔥 Примушує йти вертикально */
    flex-wrap: nowrap;
    
    max-width: 100% !important; 
    width: 100% !important; 
    
    gap: 10px; /* Вертикальний проміжок між селектами */
}





/* Прибираємо фіксовану ширину контейнера, щоб він займав 100% і центрувався батьком */
#windowOptions.columns-2 {
    display: flex;
    flex-direction: row; 
    flex-wrap: wrap; 
    
    /* Вирівнюємо до лівого краю. Відступи створюються через margin селектів. */
    justify-content: flex-start !important; 
    
    /* Скидаємо всі відступи контейнера */
    padding: 0 !important; 
    gap: 0 !important; 
    width: 20vw;
    margin: 0 auto 0 0 !important; /* Центрування контейнера тут не потрібне */
	min-width: 520px;
}
/* 🔥 ПРАВИЛА ДЛЯ НЕПАРНИХ (1, 3, 5, ...) — ЛІВИЙ ЕЛЕМЕНТ В РЯДКУ */
#windowOptions.columns-2 .windowType:nth-child(odd) {
    /* 22% зліва + 5% справа (зазор до парного) */
    margin-left: 15% !important;
    margin-right: 5% !important;
}

/* 🔥 ПРАВИЛА ДЛЯ ПАРНИХ (2, 4, 6, ...) — ПРАВИЙ ЕЛЕМЕНТ В РЯДКУ */
#windowOptions.columns-2 .windowType:nth-child(even) {
    /* 22% справа */
    margin-right: 15% !important;
    margin-left: 0 !important; /* Скидаємо будь-який лівий margin */
}
/* ======================== АДАПТИВНІСТЬ ======================== */

@media (max-width: 992px) { 
    .calc-layout-wrapper {
        flex-direction: column; 
        gap: 15px;
    }

    .options-block {
		 flex: 0 0 40%; /* Змушує блок займати рівний простір */
        margin-top: 20px;
    }
    
    .dimensions-row {
        flex-direction: column; 
        gap: 0;
    }
    .dimensions-row > div {
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    .door-type-selection-wrapper,
    .profile-selection {
        flex-direction: column;important
        gap: 10px;
    }
    
   .door-type-option,
    .profile-option {
        /* 🔥 МАКСИМАЛЬНО АГРЕСИВНО ПРИМУШУЄМО ДО 100% ШИРИНИ */
        flex: 0 0 100% !important; 
        width: 100% !important; 
        min-width: 100% !important;
        padding: 15px;
		min-width: 220px;
    }
 #windowOptions .windowType,
    #windowOptions .windowType.form-control {
        flex: 0 0 100% !important; 
        width: 100% !important; 
        max-width: 100% !important;
    }
}