.vehicle-configurator {
    display: flex;
    justify-content: space-between;
    margin: 20px;
}

.left-section {
    width: 60%;
}

.carousel {
    display: flex;
    align-items: center;
    position: relative;
}

.carousel-images {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 400px;
    justify-content: center;
    align-items: center;
}

.carousel-images img {
    max-width: 100%;
    max-height: 100%;
    display: none;
}

.carousel-images img.active {
    display: block;
}

.right-section {
    width: 35%;
}

.config-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Стиль для вибору моделі */
.model-selection {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.model-selection button {
    align-items: center;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    color: #000;
    cursor: pointer;
    display: flex;
    font-size: 1.2em;
    font-weight: 700;
    justify-content: flex-start; /* Вирівнює текст ліворуч */
    text-align: left; /* Додаткове вирівнювання тексту */
    padding: 15px 20px;
    transition: all .3s ease;
}
.model-selection button.selected {
    background-color: #7fffd4; /* Fond clair similaire au fond initial */
    border-color: #ccc; /* Bordure de la même couleur que celle par défaut */
    color: #000; /* Texte noir pour rester cohérent avec les autres boutons */
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2); /* Légère ombre pour un effet de sélection */
}


.model-selection button:hover {
    background-color: #e0e0e0;
}

.model-selection button.active {
    background-color: #7FFFD4;
    color: #000;
    border: 2px solid #000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Вибір кольору */
.color img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border 0.3s;
}

.color img:hover {
    border-color: #000;
}

/* Вибір коліс */
.wheels img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}

.wheels img:hover {
    border-color: #000;
    transform: scale(1.05);
}

/* Вибір інтер'єру */
.interior img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border 0.3s;
}

.interior img:hover {
    border-color: #000;
}

/* Заголовки в секціях */
.config-options h3 {
    margin: 0;
    font-size: 1.3em;
    font-weight: bold;
    color: #053a80;
}

/* Кнопки навігації каруселі */
.carousel button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(127, 255, 212, 0.8);
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5em;
    transition: background-color 0.3s ease;
}

.carousel .prev-btn {
    left: 10px;
}

.carousel .next-btn {
    right: 10px;
}

.carousel button:hover {
    background-color: rgba(255, 255, 255, 1);
}

/* Результат конфігурації */
.result-summary {
    background-color: #f1f1f1;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.result-summary h3 {
    margin-bottom: 10px;
    font-size: 1.5em;
    color: #333;
}

.result-summary p {
    margin: 5px 0;
    font-size: 1em;
    color: #555;
}

/* Загальний стиль для кнопок із іконками */
button img {
    width: 60px; /* Розмір іконок */
    height: 60px;
    border: none; /* Видаляє рамки */
    box-shadow: none; /* Видаляє тіні */
    border-radius: 0; /* Забирає округлення */
    object-fit: cover; /* Забезпечує рівномірне масштабування */
    display: block; /* Гарантує правильне відображення */
}

/* Стиль для всіх кнопок */
button {
    background-color: transparent; /* Прозорий фон */
    border: none; /* Забирає рамки кнопок */
    padding: 0; /* Забирає зайві відступи */
    margin: 0; /* Забирає зайві відступи */
    cursor: pointer; /* Вказівник миші */
    display: flex; /* Для правильного вирівнювання */
    align-items: center; /* Центрування по вертикалі */
    justify-content: center; /* Центрування по горизонталі */
}

/* Стиль для кнопок при наведенні */
button:hover {
    background-color: transparent; /* Прозорий фон при наведенні */
}

/* Виділення активної іконки - кругле */
.color-option.active img,
.wheel-option.active img,
.interior-option.active img {
    border: 3px solid black; /* Чорна рамка */
    border-radius: 50%; /* Робить рамку круглою */
    padding: 3px; /* Додає відступ, щоб рамка не обрізалася */
}

/* Стиль для секцій */
.config-options h3 {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Контейнери для кольору, коліс та інтер'єру */
.color, .wheels, .interior {
    display: flex;
    flex-direction: column; /* Назва зверху, іконки знизу */
    align-items: center;
    text-align: center;
    gap: 10px;
}

/* Контейнери для іконок */
.color-options, .wheel-options, .interior-options {
    display: flex;
    flex-direction: row; /* Вирівнювання горизонтально */
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Дозволяє переносити елементи на наступний рядок, якщо бракує місця */
}

/* Заголовки */
.color h3, .wheels h3, .interior h3 {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Іконки */
.color-option img, .wheel-option img, .interior-option img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border 0.3s;
}

/* Виділення активного елемента */
.color-option img:hover, .wheel-option img:hover, .interior-option img:hover {
    border-color: black;
}

/* Додає відступи між кнопками */
.color-option, .wheel-option, .interior-option {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
}
/* Контейнер для типу клієнта */
.client-type {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Відступ між опціями */
    margin-top: 15px;
}
.lease-type h3 {
    font-size: 1.2em;
    font-weight: bold;
    margin-right: 10px;
}

/* Стилізація заголовка */
.client-type h3 {
    font-size: 1.2em;
    font-weight: bold;
    margin-right: 10px;
}

/* Контейнер для радіокнопок */
.radio-container {
    display: flex;
    gap: 10px; /* Відстань між кнопками */
}

/* Приховуємо стандартні радіокнопки */
.radio-container input[type="radio"] {
    display: none;
}

/* Стилізація радіокнопок */
.radio-container .radio-label {
    display: inline-block;
    padding: 8px 15px;
    border: 2px solid #ccc;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    text-align: center;
}

/* Виділення активної опції */
.radio-container input[type="radio"]:checked + .radio-label {
    background-color: #7FFFD4;
    color: white;
    border-color: #7FFFD4;
}
/* Контейнер для опцій */
.option-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 250px;
    margin: 10px 0;
}

/* Заголовок */
.option-container label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* Перемикач */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 25px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 2.5px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #7FFFD4;
}

input:checked + .slider:before {
    transform: translateX(24px);
}
/* Контейнер для опцій */
.options-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

/* Заголовок */
.options-container h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Оформлення картки опції */
.option-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #f8f8f8;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
    justify-content: flex-start;
}

/* Оформлення перемикача */
.option-toggle input {
    display: none;
}

.toggle-slider {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

/* Активний стан */
.option-toggle input:checked + .toggle-slider {
    background-color: #7FFFD4;
}

.option-toggle input:checked + .toggle-slider::before {
    transform: translate(20px, -50%);
}

/* Текст опції */
.option-text {
    font-size: 16px;
    font-weight: bold;
}

.price-summary {
        position: sticky;
        bottom: 80px; /* Відступ від низу */
        right: 10 px; /* Вирівнювання по правому краю */
        width: 400; /* Така ж ширина, як у кнопки */
        background: linear-gradient(135deg, #7FFFD4, #7FFFD4);
        padding: 15px;
        text-align: center;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
        z-index: 999;
        border-radius: 10px;
    }


/* Коригуємо відстань до контенту */
.config-options {
    margin-bottom: 80px; /* Запас для блоку ціни */
}

/* === Місячна ціна – яскрава і виразна === */
.price-summary .monthly-price {
    font-size: 2.5em;
    font-weight: bold;
    color: #003d33;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 5px;
}

/* === Загальна ціна – менш виразна, але добре видима === */
.price-summary .total-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

/* === Фіксований відступ для контенту, щоб меню не перекривало його === */
.config-options {
    margin-bottom: 120px;
}



/* Забезпечує коректний розмір сторінки */

/* === Кнопка "Valider la sélection" (сучасний стиль) === */
/* Закріплення кнопки Commander */
#validate-selection {
    position: sticky;
    bottom: 20px;
    right: 20px; /* Фіксуємо кнопку справа */
    width: 100%;
    padding: 15px 25px;
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, #7FFFD4, #7FFFD4);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    display: block;
}


#validate-selection:hover {
    background: linear-gradient(135deg, #0056b3, #004494);
    transform: scale(1.05);
}

/* Закріплення фото автомобіля */
.carousel {
    position: sticky;
    top: 50px; /* Відступ від верхнього краю */
    max-width: 600px;
    z-index: 100;
}


/* === Випадаючі списки оренди та пробігу (щоб не ховалися під ціною) === */
.lease-term select, 
.mileage select {
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    border: 2px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
       position: relative;
}


@media (max-width: 768px) {
    /* Контейнер головного блоку */
    .vehicle-configurator {
        flex-direction: column;
        align-items: center;
        margin: 10px;
    }

    .left-section, .right-section {
        width: 100%;
    }

    /* Карусель авто (не закріплена, але адаптована) */
    .carousel {
        position: relative;
        max-width: 100%;
        text-align: center;
    }

    .carousel-images {
        height: auto;
    }

    .carousel-images img {
        max-width: 100%;
        height: auto;
    }

    /* Вирівнювання кнопок вибору користувача */
    .client-type {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        text-align: center;
        align-items: center;
    }

    /* Виправлення тексту "Vous êtes" */
    .client-type h3 {
        white-space: nowrap;
        text-align: center;
    }

    /* Вирівнювання кнопок "Un particulier / Un professionnel" */
    .client-type button {
        flex: 1;
        text-align: center;
    }

    /* Виправлення блоку "Choose Model" */
    .config-options {
        align-items: center;
        text-align: center;
    }

    /* Покращення читабельності кнопок */
    .model-selection {
        width: 100%;
        text-align: center;
    }

    /* Покращення вигляду вибору кольору, коліс та інтер'єру */
    .color-options, .wheel-options, .interior-options {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Контейнери кольору, коліс, інтер'єру */
    .color, .wheels, .interior {
        width: 100%;
        text-align: center;
    }

    /* === Фіксований контейнер для ціни та кнопки "Commander" === */
    .price-container {
        position: fixed;
        bottom: 10px;
        left: 10px;
        right: 10px;
        width: calc(100% - 20px);
        text-align: center;
        z-index: 1000;
    }

    /* Закріплений блок з ціною */
    .price-summary {
        background: linear-gradient(135deg, #7FFFD4, #7FFFD4);
        padding: 12px;
        text-align: center;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        margin-bottom: 10px; /* Відступ між ціною та кнопкою */
    }

    .price-summary .monthly-price {
        font-size: 1.8em;
        font-weight: bold;
    }

    .price-summary .total-price {
        font-size: 1.2em;
        font-weight: bold;
    }

    /* Фіксована кнопка "Commander" */
    .commander-button {
        width: 100%;
        text-align: center;
    }

    /* Оптимізація кнопки "Commander" */
    #validate-selection {
        font-size: 1.2em;
        padding: 12px;
        width: 100%;
        max-width: 320px;
        border-radius: 10px;
        font-weight: bold;
        background: #7fffd4;
        color: white;
        border: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease-in-out;
    }

    #validate-selection:hover {
        background: #00795b;
        transform: scale(1.05);
    }
}
.down-payment {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.down-payment input {
    width: 80px;
    padding: 5px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.down-payment span {
    font-size: 1rem;
    font-weight: bold;
}
/* La colonne gauche en pile pour que le sticky colle au viewport */
.left-section {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* IMPORTANT: aucun overflow ici, sinon sticky casse */
  overflow: visible;
}

/* Le bloc "Mon contact Tesla" en sticky */
#tesla-contact-card {
  position: sticky;
  top: 70px;      /* décale sous ton header / au-dessus du visuel */
  z-index: 5;     /* au-dessus des images au scroll si besoin */
}

/* Option: désactiver le sticky sur mobile si tu veux */
@media (max-width: 900px) {
  #tesla-contact-card {
    position: static;
    top: auto;
  }
}
/* --- Rendre la colonne gauche sticky --- */
.left-section {
  position: sticky;
  top: 40px; /* distance depuis le haut du viewport */
  align-self: flex-start;
  height: fit-content;
}

/* Assurer que le container parent autorise le sticky */
.vehicle-configurator {
  align-items: flex-start;
  
  /* 📱 Affichage mobile : une seule voiture visible, centrée, pleine largeur */
@media (max-width: 900px) {
  .left-section {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .carousel {
    position: relative !important;
    top: auto !important;
    width: 100vw !important;
    margin: 0 auto !important;
    text-align: center !important;
    transform: none !important;
    z-index: 1 !important;
  }

  .carousel-images {
    width: 100vw !important;
    height: auto !important;
    overflow: hidden !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* ✅ Seule l'image active reste visible */
  .carousel-images img {
    display: none !important;
  }
  .carousel-images img.active {
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
  }

  .vehicle-configurator {
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .right-section {
    width: 100% !important;
    margin-top: 20px !important;
  }
}