/* EAVS Search — page de prévisualisation front-office. Styles propres au module.
   Couleurs de marque reprises telles que définies dans
   themes/eavs_hummingbird_child/assets/css/custom.css (non modifié) :
   violet EAVS #9351a1 (--bs-primary du thème), orange EAVS #f5a623. */

.eavssearch-preview-page {
    max-width: 960px;
    margin: 0 auto;
}

.eavssearch-preview-badge {
    display: inline-block;
    font-size: 0.8rem;
    color: #8a6d00;
    background: #fff8e1;
    border: 1px solid #ffe08a;
    border-radius: 4px;
    padding: 4px 10px;
    margin-bottom: 1.5rem;
}

.eavssearch-search-form {
    position: relative;
    margin-bottom: 2rem;
    max-width: 820px;
    width: 100%;
}

.eavssearch-search-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.eavssearch-search-row {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.eavssearch-search-input {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 1rem;
    border: 1px solid #ccc;
    border-radius: 999px;
    font-size: 1rem;
}

.eavssearch-search-input:focus {
    outline: none;
    border-color: #9351a1;
    box-shadow: 0 0 0 3px rgba(147, 81, 161, 0.2);
}

.eavssearch-search-submit {
    padding: 0.65rem 1.4rem;
    border-radius: 999px;
    border: none;
    background: #9351a1;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.eavssearch-search-submit:hover,
.eavssearch-search-submit:focus-visible {
    background: #5a23a0;
}

/* Suggestions (autocomplétion) — positionnement en superposition (jamais dans le flux normal
   de la page), largeur alignée sur le champ, hauteur bornée avec défilement interne pour ne
   jamais déborder sur le footer ni hors écran. */
.eavssearch-suggestions {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    max-height: min(420px, 60vh) !important;
    overflow-y: auto !important;
}

.eavssearch-suggestions[hidden] {
    display: none !important;
}

.eavssearch-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.eavssearch-suggestion:hover,
.eavssearch-suggestion.is-active {
    background: #f6eef8;
}

.eavssearch-suggestion img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: #f7f7f7;
    border-radius: 4px;
    flex-shrink: 0;
}

.eavssearch-suggestion-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.eavssearch-suggestion-name {
    font-size: 0.95rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

.eavssearch-suggestion-name mark {
    background: rgba(245, 166, 35, 0.35);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.eavssearch-suggestion-meta {
    font-size: 0.78rem;
    color: #777;
}

/* Pastille de disponibilité dans l'autocomplétion — même palette que les cartes produits de la
   page de résultats (.eavssearch-product-card-availability--*), en plus compact pour ne pas
   surcharger une ligne de suggestion déjà dense. */
.eavssearch-suggestion-availability {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    width: fit-content;
}

.eavssearch-suggestion-availability--available {
    background: #e3f7e9;
    color: #1d7a3c;
}

.eavssearch-suggestion-availability--backorder {
    background: #fff3da;
    color: #96610b;
}

.eavssearch-suggestion-availability--unavailable {
    background: #fde8e8;
    color: #a52222;
}

.eavssearch-suggestions-status {
    padding: 8px 10px;
    font-size: 0.85rem;
    color: #777;
}

.eavssearch-suggestions-seeall {
    /* Toujours visible sans avoir à faire défiler la liste jusqu'au bout (demande explicite) :
       collé en bas du conteneur défilant (.eavssearch-suggestions a overflow-y:auto), au-dessus
       du contenu qui défile derrière grâce au fond opaque. Design et couleurs inchangés. */
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #eee;
    margin-top: 2px;
}

.eavssearch-suggestions-seeall a,
.eavssearch-suggestions-seeall button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background: none;
    border: none;
    font-weight: 600;
    font-size: 0.88rem;
    color: #9351a1;
    text-decoration: none;
    cursor: pointer;
}

.eavssearch-suggestions-seeall a:hover,
.eavssearch-suggestions-seeall a.is-active,
.eavssearch-suggestions-seeall button:hover,
.eavssearch-suggestions-seeall button.is-active {
    background: #f6eef8;
    text-decoration: underline;
}

/* États */
.eavssearch-empty-state,
.eavssearch-no-results {
    color: #666;
    font-style: italic;
}

.eavssearch-error-state {
    color: #a52222;
    background: #fde8e8;
    border-radius: 6px;
    padding: 10px 14px;
}

.eavssearch-notice {
    background: #eef6ff;
    border-left: 3px solid #2ea2cc;
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.eavssearch-results-summary {
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Liste de résultats — lisible, pas de grille dense */
.eavssearch-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eavssearch-product-card {
    display: flex;
    gap: 16px;
    padding: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease;
}

.eavssearch-product-card:hover,
.eavssearch-product-card:focus-visible {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    color: inherit;
    text-decoration: none;
}

.eavssearch-product-card:focus-visible {
    outline: 3px solid #9351a1;
    outline-offset: 2px;
}

.eavssearch-product-card-image {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    border-radius: 6px;
    overflow: hidden;
}

.eavssearch-product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.eavssearch-product-card-image-placeholder {
    color: #aaa;
    font-size: 0.75rem;
}

.eavssearch-product-card-body {
    flex: 1;
    min-width: 0;
}

.eavssearch-product-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.eavssearch-product-card-meta {
    margin: 0 0 4px;
    font-size: 0.85rem;
    color: #666;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.eavssearch-product-card-category {
    margin: 0 0 8px;
    font-size: 0.8rem;
    color: #999;
}

.eavssearch-product-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.eavssearch-product-card-price {
    font-weight: 700;
    font-size: 1.1rem;
}

.eavssearch-product-card-availability {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.eavssearch-product-card-availability--available {
    background: #e3f7e9;
    color: #1d7a3c;
}

.eavssearch-product-card-availability--backorder {
    background: #fff3da;
    color: #96610b;
}

.eavssearch-product-card-availability--unavailable {
    background: #fde8e8;
    color: #a52222;
}

@media (max-width: 575px) {
    .eavssearch-product-card {
        flex-direction: column;
    }

    .eavssearch-product-card-image {
        width: 100%;
        height: 160px;
    }

    .eavssearch-search-form {
        max-width: none;
    }
}

/* Pagination */
.eavssearch-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.eavssearch-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: #9351a1;
    font-weight: 600;
    font-size: 0.9rem;
}

.eavssearch-pagination-link:hover {
    background: #f6eef8;
    text-decoration: none;
    color: #9351a1;
}

.eavssearch-pagination-link.is-current {
    background: #9351a1;
    border-color: #9351a1;
    color: #fff;
    cursor: default;
}

.eavssearch-pagination-link:focus-visible {
    outline: 3px solid #9351a1;
    outline-offset: 2px;
}

.eavssearch-pagination-ellipsis {
    padding: 0 4px;
    color: #999;
}