/**
 * Algolia Search Styles
 */

/* Masquer la barre de recherche Algolia sur desktop (version ordinateur) */
@media (min-width: 992px) {
    .algolia-search-bar-below-nav {
        display: none !important;
    }
}

 .algolia-search-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.algolia-search-wrapper {
    position: relative;
}

.algolia-search-form {
    display: flex;
    width: 100%;
}

.algolia-input-wrapper {
    display: flex;
    width: 100%;
    position: relative;
}

#algolia-search-input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    outline: none;
}

#algolia-search-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.algolia-search-button {
    padding: 10px 20px;
    background-color: #70D612;
    color: #fff;
    border: 1px solid #70D612;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.algolia-search-button:hover {
    background-color: #5ab80f;
    border-color: #5ab80f;
}

.algolia-search-button .material-icons,
.algolia-search-button .algolia-search-button-icon {
    font-size: 20px;
    flex-shrink: 0;
}

#algolia-search-widget .algolia-search-button {
    padding: 10px 14px;
}

#algolia-search-widget .algolia-search-button .material-icons {
    font-size: 22px;
}

/* Annule les styles du thème .search-widget form button[type="submit"] sur le bouton Algolia */
.search-widget #algolia-search-widget form button.algolia-search-button[type="submit"],
.search-widget .algolia-search-container form button.algolia-search-button[type="submit"] {
    position: relative !important;
    right: auto !important;
    background: #70D612 !important;
    background-color: #70D612 !important;
    border: 1px solid #70D612 !important;
    border-radius: 0 4px 4px 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 10px 14px !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

.search-widget #algolia-search-widget form button.algolia-search-button[type="submit"]:hover,
.search-widget .algolia-search-container form button.algolia-search-button[type="submit"]:hover {
    background: #5ab80f !important;
    background-color: #5ab80f !important;
    border-color: #5ab80f !important;
}

.algolia-results-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 5px;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 10001;
    animation: fadeIn 0.2s ease-in;
    box-sizing: border-box;
    padding: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Suggestions header : une seule colonne, sans gap (gap réservé à la page résultats) */
#algolia-search-widget .algolia-hits-list,
#algolia-search-widget .ais-Hits-list,
#algolia-instantsearch-results .algolia-hits-list,
#algolia-instantsearch-results .ais-Hits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    width: 100%;
}

#algolia-search-widget .algolia-hit-item,
#algolia-search-widget .ais-Hits-item,
#algolia-instantsearch-results .algolia-hit-item,
#algolia-instantsearch-results .ais-Hits-item {
    width: 100% !important;
    max-width: 100% !important;
    border-bottom: 1px solid #eee;
    padding: 0;
}

#algolia-search-widget .algolia-hit-item:last-child,
#algolia-search-widget .ais-Hits-item:last-child,
#algolia-instantsearch-results .algolia-hit-item:last-child,
#algolia-instantsearch-results .ais-Hits-item:last-child {
    border-bottom: none;
}

/* Layout suggestion : hauteur fixe sur la suggestion, image à gauche, texte à droite */
#algolia-search-widget .algolia-hit,
#algolia-instantsearch-results .algolia-hit {
    width: 100%;
    height: 80px;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    transition: background-color 0.2s;
    cursor: pointer;
    box-sizing: border-box;
}

/* Si le lien produit est cassé (cache), masquer les liens vides et garder image + contenu côte à côte */
#algolia-search-widget .algolia-hit .algolia-hit-link:empty,
#algolia-instantsearch-results .algolia-hit .algolia-hit-link:empty {
    display: none !important;
}

#algolia-search-widget .algolia-hit > .algolia-hit-image-wrapper,
#algolia-instantsearch-results .algolia-hit > .algolia-hit-image-wrapper {
    flex-shrink: 0;
    order: 0;
}

#algolia-search-widget .algolia-hit > .algolia-hit-content,
#algolia-instantsearch-results .algolia-hit > .algolia-hit-content {
    flex: 1;
    min-width: 0;
    order: 1;
}

#algolia-search-widget .algolia-hit:hover,
#algolia-instantsearch-results .algolia-hit:hover {
    background-color: #f0f7ff;
}

#algolia-search-widget .algolia-hit:active,
#algolia-instantsearch-results .algolia-hit:active {
    background-color: #e0efff;
}

#algolia-search-widget .algolia-hit-link,
#algolia-instantsearch-results .algolia-hit-link {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1;
    width: 100%;
    min-height: 0;
    text-decoration: none;
    color: inherit;
    gap: 10px;
    min-width: 0;
    box-sizing: border-box;
}

#algolia-search-widget .algolia-hit-image,
#algolia-instantsearch-results .algolia-hit-image {
    flex-shrink: 0;
    order: 0;
    width: 56px;
    height: 100%;
    max-height: 56px;
    overflow: hidden;
    border-radius: 4px;
}

#algolia-search-widget .algolia-hit-image img,
#algolia-instantsearch-results .algolia-hit-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#algolia-search-widget .algolia-hit-image-wrapper,
#algolia-instantsearch-results .algolia-hit-image-wrapper {
    position: relative;
    flex-shrink: 0;
    order: 0;
    width: 56px;
    height: 100%;
    max-height: 56px;
    overflow: visible;
}

#algolia-search-widget .algolia-hit-badges-on-image,
#algolia-instantsearch-results .algolia-hit-badges-on-image {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

#algolia-search-widget .algolia-hit-content,
#algolia-instantsearch-results .algolia-hit-content {
    flex: 1;
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    text-align: left;
    overflow: hidden;
}

.algolia-hit-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.algolia-hit-title mark {
    background-color: #ffeb3b;
    padding: 2px 0;
    font-weight: 700;
    color: #333;
}

.algolia-hit-price {
    font-size: 18px;
    font-weight: bold;
    color: #007bff;
}

#algolia-search-widget .algolia-hit-price,
#algolia-instantsearch-results .algolia-hit-price {
    font-size: 15px;
    font-weight: 700;
    color: #70D612;
    margin: 0;
}

/* Ordre strict : prix réduit (gauche) → prix rayé → badge juste à droite du prix rayé */
#algolia-search-widget .algolia-hit-price-wrapper,
#algolia-instantsearch-results .algolia-hit-price-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin: 0;
    direction: ltr;
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
    flex-shrink: 0;
}

#algolia-search-widget .algolia-hit-price-wrapper .algolia-hit-price-promo,
#algolia-instantsearch-results .algolia-hit-price-wrapper .algolia-hit-price-promo {
    order: 1;
    flex-shrink: 0;
}

#algolia-search-widget .algolia-hit-price-wrapper .algolia-hit-regular-group,
#algolia-instantsearch-results .algolia-hit-price-wrapper .algolia-hit-regular-group {
    order: 2;
    flex-shrink: 0;
}

#algolia-search-widget .algolia-hit-regular-group,
#algolia-instantsearch-results .algolia-hit-regular-group {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    direction: ltr;
}

#algolia-search-widget .algolia-hit-regular-price,
#algolia-instantsearch-results .algolia-hit-regular-price {
    font-size: 13px;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

#algolia-search-widget .algolia-hit-price-promo,
#algolia-instantsearch-results .algolia-hit-price-promo {
    font-size: 15px;
    font-weight: 700;
    color: #70D612;
}

/* Ligne prix + badge disponibilité (à droite du prix) */
#algolia-search-widget .algolia-hit-price-line,
#algolia-instantsearch-results .algolia-hit-price-line {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    width: fit-content;
    max-width: 100%;
}

#algolia-search-widget .algolia-hit-stock-badge,
#algolia-instantsearch-results .algolia-hit-stock-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1.3;
    flex-shrink: 0;
}

#algolia-search-widget .algolia-hit-badge-disponible,
#algolia-instantsearch-results .algolia-hit-badge-disponible {
    color: #fff;
    background-color: #70D612;
}

#algolia-search-widget .algolia-hit-badge-sur-demande,
#algolia-instantsearch-results .algolia-hit-badge-sur-demande {
    color: #fff !important;
    background-color: #FFCC00;
}

/* Tooltip badge En stock* (suggestions header) */
#algolia-search-widget .algolia-hit-stock-badge-wrapper,
#algolia-instantsearch-results .algolia-hit-stock-badge-wrapper {
    position: relative;
    display: inline-block;
}

/* Pont invisible pour garder le :hover entre le badge et le tooltip */
#algolia-search-widget .algolia-hit-stock-badge-wrapper::after,
#algolia-instantsearch-results .algolia-hit-stock-badge-wrapper::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: 220px;
    height: 12px;
}

#algolia-search-widget .algolia-hit-stock-tooltip,
#algolia-instantsearch-results .algolia-hit-stock-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    padding: 8px 10px;
    background: #333;
    color: #fff;
    font-size: 11px;
    line-height: 1.35;
    border-radius: 4px;
    white-space: normal;
    width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 10002;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease 0s, visibility 0s linear 0.3s;
    pointer-events: none;
}

#algolia-search-widget .algolia-hit-stock-badge-wrapper:hover .algolia-hit-stock-tooltip,
#algolia-instantsearch-results .algolia-hit-stock-badge-wrapper:hover .algolia-hit-stock-tooltip,
#algolia-search-widget .algolia-hit-stock-tooltip:hover,
#algolia-instantsearch-results .algolia-hit-stock-tooltip:hover {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
    pointer-events: auto;
}

#algolia-search-widget .algolia-hit-stock-tooltip a,
#algolia-instantsearch-results .algolia-hit-stock-tooltip a,
#algolia-search-widget .algolia-hit-tooltip-link,
#algolia-instantsearch-results .algolia-hit-tooltip-link {
    color: #70D612;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

#algolia-search-widget .algolia-hit-stock-tooltip a:hover,
#algolia-instantsearch-results .algolia-hit-stock-tooltip a:hover,
#algolia-search-widget .algolia-hit-tooltip-link:hover,
#algolia-instantsearch-results .algolia-hit-tooltip-link:hover {
    color: #8ee838;
}

/* Badge header : flux inline à droite du prix rayé (annule position: absolute des résultats) */
#algolia-search-widget .algolia-hit-reduction-badge,
#algolia-instantsearch-results .algolia-hit-reduction-badge {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    min-width: 0;
    box-shadow: none;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1.3;
    flex-shrink: 0;
}

.algolia-hit-description {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.algolia-hit-description mark {
    background-color: #ffeb3b;
    padding: 2px 0;
    font-weight: 600;
    color: #333;
}

.algolia-no-results {
    padding: 0;
    text-align: center;
    color: #666;
}

/* ==============================================
   Mobile/Tablette : barre de recherche sous le header-nav (flux normal, pas fixe)
   ============================================== */
@media (max-width: 991px) {
    /* Éviter que overflow:hidden du thème sur .searchtoggle ne coupe le dropdown de suggestions */
    .searchtoggle .algolia-search-container,
    .searchtoggle .algolia-search-wrapper {
        overflow: visible !important;
    }
    /* Classe ajoutée par le JS pour permettre au dropdown d'être visible */
    .searchtoggle.algolia-search-open {
        overflow: visible !important;
    }

    /* Masquer uniquement la loupe <span class="search_button"> dans le widget de recherche */
    .search-widget .search_button {
        display: none !important;
    }
    
    /* Algolia search bar - placée en dessous du header-nav via JS */
    .algolia-search-bar-below-nav {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px 0 !important;
        box-sizing: border-box !important;
        flex: none !important;
    }
    
    .algolia-search-bar-below-nav .search_button {
        display: none !important;
    }
    
    .algolia-search-bar-below-nav .algolia-search-bar-title {
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        font-weight: 600;
        font-style: italic;
        margin: 0 0 6px 0;
        color: #fff;
        display: block;
    }
    
    .algolia-search-bar-below-nav .searchtoggle {
        display: block !important;
        width: 100% !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 !important;
    }
    
    .algolia-search-bar-below-nav #algolia-search-widget {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .algolia-search-bar-below-nav .algolia-search-wrapper,
    .algolia-search-bar-below-nav .algolia-search-form,
    .algolia-search-bar-below-nav .algolia-input-wrapper {
        width: 100% !important;
    }
    
    .algolia-search-bar-below-nav #algolia-search-input {
        height: auto;
        width: 100% !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
        border-radius: 4px 0 0 4px !important; /* Border-radius à gauche car le bouton est visible */
    }
    
    .algolia-search-bar-below-nav .algolia-search-button {
        padding: 10px 14px !important; /* Le bouton reste visible */
    }
    
    /* Ajuster le wrapper pour que le champ prenne toute la largeur */
    .search-widget .algolia-input-wrapper,
    .algolia-search-bar-below-nav .algolia-input-wrapper {
        width: 100% !important;
    }
    
    .algolia-search-bar-below-nav .algolia-results-container {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* Responsive – suggestions header mobile */
@media (max-width: 768px) {
    .algolia-search-container {
        max-width: 100%;
    }

    .algolia-results-container {
        max-height: min(320px, 55vh);
        padding: 0;
    }

    #algolia-search-widget .algolia-hit-link,
    #algolia-instantsearch-results .algolia-hit-link {
        flex-direction: row !important;
        align-items: center;
        gap: 6px;
    }

    #algolia-search-widget .algolia-hit,
    #algolia-instantsearch-results .algolia-hit {
        height: 44px;
        padding: 0;
    }

    #algolia-search-widget .algolia-hit-image,
    #algolia-instantsearch-results .algolia-hit-image {
        width: 40px;
        height: 100%;
        max-height: 36px;
        flex-shrink: 0;
        order: 0;
    }

    #algolia-search-widget .algolia-hit-content,
    #algolia-instantsearch-results .algolia-hit-content {
        order: 1;
        gap: 1px;
    }

    #algolia-search-widget .algolia-hit-title,
    #algolia-instantsearch-results .algolia-hit-title {
        font-size: 13px;
        line-height: 1.2;
    }

    #algolia-search-widget .algolia-hit-price,
    #algolia-instantsearch-results .algolia-hit-price {
        font-size: 12px;
    }

    #algolia-search-widget .algolia-hit-price-wrapper,
    #algolia-instantsearch-results .algolia-hit-price-wrapper {
        gap: 3px 4px;
    }

    #algolia-search-widget .algolia-hit-price-promo,
    #algolia-instantsearch-results .algolia-hit-price-promo {
        font-size: 12px;
    }

    #algolia-search-widget .algolia-hit-regular-price,
    #algolia-instantsearch-results .algolia-hit-regular-price {
        font-size: 10px;
    }

    #algolia-search-widget .algolia-hit-reduction-badge,
    #algolia-instantsearch-results .algolia-hit-reduction-badge {
        font-size: 9px;
        padding: 1px 3px;
    }

    #algolia-search-widget .algolia-hit-price-line,
    #algolia-instantsearch-results .algolia-hit-price-line {
        gap: 4px;
    }

    #algolia-search-widget .algolia-hit-stock-badge,
    #algolia-instantsearch-results .algolia-hit-stock-badge {
        font-size: 9px;
        padding: 1px 4px;
    }

    #algolia-search-widget .algolia-hit-description,
    #algolia-instantsearch-results .algolia-hit-description {
        display: none;
    }

    .algolia-no-results {
        padding: 0;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .algolia-results-container {
        max-height: min(260px, 48vh);
        padding: 0;
    }

    #algolia-search-widget .algolia-hit,
    #algolia-instantsearch-results .algolia-hit {
        height: 40px;
        padding: 0;
    }

    #algolia-search-widget .algolia-hit-link,
    #algolia-instantsearch-results .algolia-hit-link {
        gap: 5px;
    }

    #algolia-search-widget .algolia-hit-image,
    #algolia-instantsearch-results .algolia-hit-image {
        width: 36px;
        height: 100%;
        max-height: 32px;
    }

    #algolia-search-widget .algolia-hit-content,
    #algolia-instantsearch-results .algolia-hit-content {
        gap: 1px;
    }

    #algolia-search-widget .algolia-hit-title,
    #algolia-instantsearch-results .algolia-hit-title {
        font-size: 12px;
    }

    #algolia-search-widget .algolia-hit-price,
    #algolia-instantsearch-results .algolia-hit-price {
        font-size: 11px;
    }

    #algolia-search-widget .algolia-hit-price-wrapper,
    #algolia-instantsearch-results .algolia-hit-price-wrapper {
        gap: 2px 3px;
    }

    #algolia-search-widget .algolia-hit-price-promo,
    #algolia-instantsearch-results .algolia-hit-price-promo {
        font-size: 11px;
    }

    #algolia-search-widget .algolia-hit-regular-price,
    #algolia-instantsearch-results .algolia-hit-regular-price {
        font-size: 9px;
    }

    #algolia-search-widget .algolia-hit-reduction-badge,
    #algolia-instantsearch-results .algolia-hit-reduction-badge {
        font-size: 8px;
        padding: 0 2px;
    }

    #algolia-search-widget .algolia-hit-price-line,
    #algolia-instantsearch-results .algolia-hit-price-line {
        gap: 3px;
    }

    #algolia-search-widget .algolia-hit-stock-badge,
    #algolia-instantsearch-results .algolia-hit-stock-badge {
        font-size: 8px;
        padding: 0 3px;
    }

    #algolia-search-widget .algolia-hit-description,
    #algolia-instantsearch-results .algolia-hit-description {
        display: none;
    }

    .algolia-no-results {
        padding: 0;
        font-size: 13px;
    }
}