/* Styles de base pour les éléments cachés */
.boat-search-results, /* Changed from ID to class */
.boat-search-overlay { /* Changed from ID to class */
    display: none !important;
}

/* Styles pour le conteneur des résultats en mode dropdown */
.bs-results-dropdown-active {
    display: block !important; /* This class is added when it should be visible */
    position: absolute !important;
    z-index: 99999 !important; /* Un peu moins que la modale pour être sûr */
    left: 0;
    top: 100%; /* Positionne toujours en dessous de la barre de recherche */
    right: 0;
    width: 100%;
    max-height: 80vh;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow-y: auto;
    pointer-events: auto;
}

/* Styles pour l'overlay de la modale - désactivé car géré par Elementor */
.bs-overlay-active {
    display: none !important; /* Overlay désactivé */
}

/* Styles pour le conteneur des résultats en mode modale (détails du bateau) */
.bs-results-modal-active {
    display: block !important; /* This class is added when it should be visible */
    position: absolute !important; /* Position absolue comme le dropdown */
    z-index: 100000 !important; /* Plus élevé que le dropdown pour être au-dessus */
    left: 0;
    top: 100%; /* Positionne toujours en dessous de la barre de recherche */
    right: 0;
    width: 100%;
    max-height: 80vh;
    background-color: #ffffff !important;
    padding: 0 !important; /* Le padding est dans le div interne généré par displayBoatDetails, conforme à votre JS */
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; /* Même ombre que le dropdown */
    overflow-y: auto !important; /* Permet le défilement si le contenu est trop long */
    pointer-events: auto !important;
}

/* Styles spécifiques pour mobile */
@media (max-width: 768px) {
    .bs-results-modal-active {
        max-height: 60vh !important;
    }

    .bs-results-dropdown-active {
        max-height: 60vh !important;
    }
}

/* Classe ajoutée au body lorsque la modale est ouverte */
.bs-body-modal-open {
    overflow: hidden !important; /* Empêche le défilement de la page derrière la modale */
    /* pointer-events: none; /* Désactive les clics sur le body, la modale les réactive pour elle-même */
    /* Attention: pointer-events: none sur le body peut avoir des effets secondaires.
       La modale et l'overlay ont pointer-events: auto pour être cliquables.
       Si vous utilisez pointer-events: none sur le body, assurez-vous que cela ne bloque pas
       des fonctionnalités essentielles d'Elementor ou d'autres plugins.
       Une alternative est de se fier uniquement à l'overlay pour bloquer les clics. */
}

/* Assurez-vous que le conteneur principal de votre recherche permet le positionnement absolu du dropdown */
.boat-search-container { /* Remplacez par la classe réelle de votre conteneur de recherche principal */
    position: relative !important; /* Nécessaire pour que le positionnement absolu de.bs-results-dropdown-active fonctionne correctement */
}

/* Styles pour les résultats de recherche dans le dropdown */

/* Couleurs par défaut pour les textes des résultats */
.bs-results-dropdown-active .bs-modele-name {
    color: #1A2755 !important;
}

.bs-results-dropdown-active .bs-navire-name {
    color: #1A2755 !important;
}

.bs-results-dropdown-active .bs-navire-model,
.bs-results-dropdown-active .bs-navire-year {
    color: #1A2755 !important;
}

/* Effet hover pour les lignes de résultats */
.bs-results-dropdown-active .bs-result-item {
    transition: background-color 0.2s ease;
}

.bs-results-dropdown-active .bs-result-item:hover {
    background-color: #f0f8ff !important;
}

/* Couleurs de texte au hover */
.bs-results-dropdown-active .bs-result-item:hover .bs-modele-name,
.bs-results-dropdown-active .bs-result-item:hover .bs-navire-name,
.bs-results-dropdown-active .bs-result-item:hover .bs-navire-model,
.bs-results-dropdown-active .bs-result-item:hover .bs-navire-year {
    color: #CCB28C !important;
}