/* --- Styles Généraux (Pays & Régions) --- */
.dynamic-country-buttons-wrapper,
#dynamic-origin-region-buttons-container,
#dynamic-destination-region-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Style individuel des boutons (Pays & Régions - Structure HTML identique attendue) */
/* Ciblage plus large pour inclure les boutons dans l'accordéon */
.choice-country {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 10px 15px !important;
    border: 1px solid #2A2B55 !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    cursor: pointer;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.choice-country > .elementor-element { margin: 0 !important; padding: 0 !important; display: flex; align-items: center; }
.choice-country > .elementor-element:first-child { margin-right: 10px !important; flex-shrink: 0; width: auto; justify-content: center; }
.choice-country > .elementor-element:nth-child(2) { flex-grow: 1 !important; justify-content: flex-start; text-align: left; }
.choice-country > .elementor-element p { margin: 0 !important; font-size: 15px; line-height: 1.4; color: inherit !important; transition: color 0.2s ease; }
.choice-country > .elementor-element:first-child p { font-size: 1.2em; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.choice-country:not(.selected):hover { background-color: #74C0B5 !important; border-color: #74C0B5 !important; color: #ffffff !important;  }
.choice-country.selected { background-color: #74C0B5 !important; border-color: #74C0B5 !important; color: #ffffff !important; }

#dynamic-origin-region-buttons-container p.loading-regions,
#dynamic-origin-region-buttons-container p.no-regions-available,
#dynamic-origin-region-buttons-container p.ajax-error,
#dynamic-destination-region-buttons-container p.loading-regions,
#dynamic-destination-region-buttons-container p.no-regions-available,
#dynamic-destination-region-buttons-container p.ajax-error {
     padding: 10px; text-align: center; color: #777; font-style: italic;
     border: 1px dashed #eee; border-radius: 5px; width: auto;
     box-sizing: border-box; margin: 10px auto;
}

/* --- Styles SPÉCIFIQUES pour l'Accordéon Destination (Step 3) - Style Image 2 --- */
.destination-country-accordion {
    width: 100%;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espace entre les continents */
}
.destination-country-accordion .e-n-accordion-item {
   /* border: 1px solid #d2d2d2 !important; /* Bordure grise autour de chaque section continent */
    border-radius: 5px !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    background-color: #ffffff;
}
.destination-country-accordion .e-n-accordion-item > summary {
    display: flex !important;
    align-items: center !important;
    padding: 10px 15px !important;
    cursor: pointer;
    background-color: #ffffff !important; /* Fond blanc par défaut */
    list-style: none;
    width: 100% !important;
    box-sizing: border-box;
    font-weight: 500; /* Plus gras comme sur l'image */
    color: #333333;
    transition: background-color 0.2s;
    position: relative; /* Pour pseudo-élément de bordure */
}
.destination-country-accordion .e-n-accordion-item > summary::-webkit-details-marker { display: none; }
.destination-country-accordion .e-n-accordion-item > summary::marker { display: none; }
.destination-country-accordion .e-n-accordion-item-title-text { flex-grow: 1; text-align: left; font-size: 15px; }
.destination-country-accordion .e-n-accordion-item-title-icon { margin-left: auto; padding-left: 10px; color: #2A2B55; font-size: 0.8em; } /* Icone plus petite */
.destination-country-accordion .e-n-accordion-item[open] > summary .e-closed,
.destination-country-accordion .e-n-accordion-item:not([open]) > summary .e-opened { display: none; }
.destination-country-accordion .e-n-accordion-item > summary:hover { background-color: #f8f8f8 !important; }
/* Style quand le continent est ouvert */
.destination-country-accordion .e-n-accordion-item[open] > summary {
    background-color: #ffffff !important; /* Reste blanc */
    border: 1px solid #eeeeee !important; /* Ligne de séparation très fine si ouvert */
    border-radius: 5px !important;
}
.destination-country-accordion .e-n-accordion-item:not([open]) > summary {
    background-color: #ffffff !important; /* Reste blanc */
    border: 1px solid #eeeeee !important; /* Ligne de séparation très fine si ouvert */
}
/* Conteneur des boutons pays DANS l'accordéon */
.destination-country-accordion .e-n-accordion-item > div[role="region"] {
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* Espace interne réduit */
    background-color: #ffffff;
    border-top: none; /* Assure pas de double bordure */
}
/* Enlever la bordure des boutons pays à l'intérieur de l'accordéon ouvert */
.destination-country-accordion .e-n-accordion-item[open] .choice-country {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 10px 15px !important;
    border: 1px solid #d2d2d2 !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    cursor: pointer;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.destination-country-accordion .e-n-accordion-item[open] .choice-country:hover {
    background-color: #74C0B5 !important; border-color: #74C0B5 !important; color: #ffffff !important;
}
/* Style spécifique pour le bouton pays sélectionné DANS l'accordéon */
.destination-country-accordion .choice-country.selected {
    background-color: #74C0B5 !important; border-color: #74C0B5 !important; color: #ffffff !important; 
}

/* --- Styles Scroll Régions (Inchangés) --- */
.elementor-element-2389aaf, /* Parent Step 2 */
#step_4 .elementor-widget-container /* Adapter si besoin pour Step 4 */ {
    display: flex !important; flex-direction: column !important; flex-grow: 1; height: 100%; overflow: hidden;
}
#dynamic-origin-region-buttons-container,
#dynamic-destination-region-buttons-container {
    flex-grow: 1; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 8px; width: 100% !important; box-sizing: border-box; min-height: 150px; padding-bottom: 20px;
}
.elementor-element-2389aaf > .elementor-element-725c995,
#step_4 .elementor-widget-container > .elementor-widget-heading {
    flex-grow: 0; flex-shrink: 0;
}

/* --- Correction Responsive Mobile (Inchangé) --- */
@media (max-width: 767px) {
    .step.elementor-element { display: none !important; opacity: 0 !important; }
    .step.elementor-element.show { display: flex !important; opacity: 1 !important; visibility: visible !important; }
    .elementor-element-2389aaf, #step_4 .elementor-widget-container { height: auto; min-height: 60vh; max-height: none !important; }
    #dynamic-origin-region-buttons-container, #dynamic-destination-region-buttons-container { min-height: 100px; }
    .choice-country { padding: 8px 12px !important; }
    .choice-country > .elementor-element p { font-size: 14px; }
    .choice-country > .elementor-element:first-child p { font-size: 1.1em; }
    .destination-country-accordion .e-n-accordion-item-title-text { font-size: 14px; }
    #dynamic-origin-region-buttons-container .choice-country, #dynamic-destination-region-buttons-container .choice-country { visibility: visible !important; opacity: 1 !important; }
}
/* --- Styles pour les boutons de date (Step 5) --- */

 /* --- Styles pour les boutons de date (Step 5) --- */

/* Conteneur des boutons */
#step_5 #date-options-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 15px 15px; /* Espace vertical et horizontal */
    margin-top: 10px;
    padding: 10px;
}
/* Style de BASE pour chaque bouton de date (classe à ajouter dans Elementor) */
#step_5 .date-option-button {
     
}

/* Style du texte <p> à l'intérieur */
#step_5 .date-option-button p {
    margin: 0 !important;
    padding: 0 5px;
    color: inherit !important; /* Hérite couleur du parent */
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    transition: color 0.2s ease;
    pointer-events: none; /* Empêche le <p> d'intercepter le clic du bouton parent */
}

/* *** EFFET HOVER (NON SÉLECTIONNÉ) *** */
#step_5 .date-option-button:not(.selected):hover {
    background-color: #f0f0f0 !important; /* Fond gris très clair */
    border-color: #b0b0b0 !important; /* Bordure grise plus visible */
    color: #222222 !important; /* Texte légèrement plus foncé */
}

/* *** ÉTAT SÉLECTIONNÉ (CLASSE AJOUTÉE PAR JS) *** */
#step_5 .date-option-button.selected {
    background-color: #74C0B5 !important; /* Couleur turquoise/vert */
    border-color: #74C0B5 !important;   /* Même couleur pour la bordure */
    color: #ffffff !important;         /* Texte blanc */
    transform: scale(1.05);             /* Léger grossissement (optionnel) */
    cursor: default !important;         /* Curseur normal si déjà sélectionné */
}

/* Forcer couleur texte blanc pour le <p> si inherit ne suffit pas */
#step_5 .date-option-button.selected p {
    color: #ffffff !important;
}

/* Ajustements pour mobile 
@media (max-width: 480px) {
    #step_5 #date-options-container { gap: 10px; }
    #step_5 .date-option-button { width: 75px; height: 75px; font-size: 13px; }
}
*/
/* --- Styles pour le Swiper Volume (Step 6) --- */

/* --- Styles pour le Swiper Volume (Step 6) --- */

/* Conteneur global du widget Carousel */
/* --- Styles pour le Swiper Volume (Step 6) --- */
/* Style de BASE pour chaque carte volume */
#step_6 .volume-option-card {
    /* Styles existants... Assurez-vous d'avoir une bordure visible par défaut */
    border: 2px solid #e0e0e0; /* Exemple de bordure grise par défaut */
    border-radius: 8px;
    background-color: #ffffff;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer; /* Curseur main sur toute la carte */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0 3px 8px rgba(0,0,0,0.07);
    position: relative;
    z-index: 1;
    transform: translateY(0); /* État initial */

    /* Transition pour les effets */
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* *** EFFET HOVER sur la carte ENTIÈRE (non sélectionnée) *** */
#step_6 .volume-option-card:not(.selected):hover {
                  /* Soulève la carte */
    border-color: #74C0B5 !important;         /* Bordure turquoise */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important; /* Ombre plus forte */
    z-index: 2;                               /* Passe au-dessus */
}

/* Style de la carte SÉLECTIONNÉE (inchangé) */
#step_6 .volume-option-card.selected {
    border-color: #74C0B5 !important;
    border-width: 3px !important;
    
    box-shadow: 0 6px 20px rgba(116, 192, 181, 0.35) !important;
    z-index: 3; /* Plus haut que le hover */
}

/* Optionnel: Style au survol de la carte DÉJÀ sélectionnée */
#step_6 .volume-option-card.selected:hover {
     transform: translateY(-2px); /* Maintient l'état sélectionné */
      cursor: pointer;   /* Change le curseur si besoin */
}

#step_7 .reason-option-button.selected {
    background-color: #74C0B5 !important;
    border-color: #74C0B5 !important;
    color: #ffffff !important;
}
#step_7 .reason-option-button.selected p {
     color: #ffffff !important;
}
#step_7 .reason-option-button { /* Style de base si besoin */
    cursor: pointer;
     border: 1px solid #d2d2d2 !important;
     border-radius: 6px !important;
     background-color: #ffffff !important;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
      padding: 10px 15px !important; /* Ajuster si nécessaire */
}
 #step_7 .reason-option-button:not(.selected):hover {
      background-color: #f8f8f8 !important;
      border-color: #c0c0c0 !important;
 }