/**
 * Corrections spécifiques pour Plantes et Nature
 * 1. Z-index mobile pour la barre de recherche
 * 2. Position et style du picto de recherche (loupe)
 */

/* CORRECTION 1: Z-index mobile pour la barre de recherche */
@media (max-width: 991px) {
    .search-widget {
        z-index: 10000 !important;
        position: relative !important;
    }

    .search-widget.active {
        z-index: 10001 !important;
        position: relative !important;
    }

    #search_widget {
        z-index: 10000 !important;
        position: relative !important;
    }

    #search_widget .ttsearchtoggle {
        z-index: 10001 !important;
        position: relative !important;
        background: white !important;
        border: 1px solid #e9e9e9 !important;
    }

    /* CORRECTION: Barre de recherche ne passe plus derrière la bannière */
    .header-nav .search-widget,
    #header .search-widget,
    .top-nav .search-widget {
        z-index: 10002 !important;
        position: relative !important;
    }
}

/* CORRECTION 2: Position et style du picto de recherche (loupe) */

/* Supprimer le fond vert du bouton de recherche */
.search-widget .ttsearch_button {
    background: none !important;
    width: 50px !important;
    height: 50px !important;
    float: right !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
    position: relative !important;
}

/* Correction pour l'état actif - supprimer le fond vert */
.search-widget.active .ttsearch_button {
    background: none !important;
    z-index: 1 !important;
    cursor: pointer !important;
}

/* Supprimer le ::before avec le fond vert */
.search-widget.active .ttsearch_button::before {
    display: none !important;
}

/* Afficher la loupe Material Icons sans fond */
.ttsearch_button .material-icons.search {
    display: block !important;
    color: #20bf6b !important;
    font-size: 25px !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
}

/* Hover de la loupe - changement de couleur uniquement */
.search-widget .ttsearch_button:hover .material-icons.search {
    color: #1a9655 !important;
}

.search-widget.active .ttsearch_button:hover {
    background: none !important;
}

.search-widget .ttsearch_button:hover {
    background: none !important;
}

/* CORRECTION 3: Position du bouton de recherche à droite de la barre */
.search-widget .ttsearch_button {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}

/* Assurer que le container de recherche a position relative */
.search-widget {
    position: relative !important;
}

/* CORRECTION 4: Alignement responsive */
@media (max-width: 991px) {
    .search-widget {
        position: absolute !important;
        right: 105px !important;
        top: 117px !important;
        z-index: 10000 !important;
    }

    .search-widget .ttsearch_button {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 50px !important;
        height: 50px !important;
    }

    /* Correction du toggle de recherche mobile */
    #search_widget .ttsearchtoggle {
        position: relative !important;
        top: 55px !important;
        z-index: 10001 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 543px) {
    #search_widget .ttsearchtoggle {
        right: -100px !important;
        width: 310px !important;
        z-index: 10001 !important;
    }

    .search-widget {
        z-index: 10000 !important;
    }
}

/* CORRECTION 5: Formulaire de recherche */
.search-widget form {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.search-widget form input[type="text"] {
    flex: 1 !important;
    padding-right: 55px !important;
}

.search-widget form button[type="submit"] {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    width: 25px !important;
    height: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
}

.search-widget form button[type="submit"] .material-icons.search {
    color: #20bf6b !important;
    font-size: 20px !important;
    background: none !important;
}

.search-widget form button[type="submit"]:hover .material-icons.search {
    color: #1a9655 !important;
}

/* CORRECTION 6: Assurer que notre modal reste au-dessus */
#ps-chatbot-search-modal {
    z-index: 999999999 !important;
}

/* CORRECTION 7: Z-index pour les éléments de header mobile */
@media (max-width: 768px) {
    .header-nav,
    #header .header-nav {
        z-index: 9999 !important;
        position: relative !important;
    }

    .header-top,
    #header .header-top {
        z-index: 9998 !important;
        position: relative !important;
    }

    /* Bannière mobile */
    .header-banner,
    .banner-top,
    .promotional-banner {
        z-index: 9997 !important;
        position: relative !important;
    }
}

/* CORRECTION 8: Container de recherche responsive */
.search-widget-container,
.header-search-container {
    position: relative !important;
    z-index: 10000 !important;
}

/* CORRECTION 9: Éviter que le picto soit coupé */
.search-widget .ttsearch_button {
    overflow: visible !important;
    min-width: 50px !important;
    flex-shrink: 0 !important;
}

/* CORRECTION 10: Fix pour le thème spécifique Plantes et Nature */
.header-nav .search-widget .ttsearch_button .material-icons.search {
    display: block !important;
    color: #20bf6b !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

/* Suppression définitive des backgrounds problématiques */
.search-widget .ttsearch_button,
.search-widget.active .ttsearch_button,
.search-widget .ttsearch_button:hover,
.search-widget.active .ttsearch_button:hover {
    background-image: none !important;
    background-color: transparent !important;
    background: none !important;
}