/**
 * NshWeb Produits Recherche — Styles Frontend
 *
 * Barre de recherche WooCommerce avec autocomplétion AJAX.
 * Design moderne, responsive, accessible et personnalisable via variables CSS.
 *
 * @package NshwProdRecherche
 * @version 1.0.0
 */

/* ============================================================
   Variables CSS — Thème par défaut (surchargeable côté admin)
   ============================================================ */
:root {
    --nshw-pr-width:         100%;
    --nshw-pr-height:        48px;
    --nshw-pr-radius:        8px;
    --nshw-pr-border-color:  #e2e8f0;
    --nshw-pr-focus-color:   #3b82f6;
    --nshw-pr-bg:            #ffffff;
    --nshw-pr-text:          #1e293b;
    --nshw-pr-placeholder:   #94a3b8;
    --nshw-pr-icon-size:     18px;
    --nshw-pr-shadow:        0 4px 24px rgba(0, 0, 0, 0.08);
    --nshw-pr-shadow-focus:  0 0 0 3px rgba(59, 130, 246, 0.15);
    --nshw-pr-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --nshw-pr-z-index:       99999;
    --nshw-pr-result-bg:     #ffffff;
    --nshw-pr-result-hover:  #f8fafc;
    --nshw-pr-group-title:   #64748b;
    --nshw-pr-product-name:  #1e293b;
    --nshw-pr-product-price: #0f172a;
    --nshw-pr-sale-color:    #ef4444;
    --nshw-pr-sku-color:     #94a3b8;
    --nshw-pr-badge-sale:    #ef4444;
    --nshw-pr-badge-oos:     #6b7280;
    --nshw-pr-badge-sale-color:   #ffffff;  /* Couleur texte badge Promo */
    --nshw-pr-badge-sale-radius:  4px;      /* Rayon bordure badge Promo */
    --nshw-pr-badge-sale-border:  none;     /* Bordure badge Promo */
    --nshw-pr-view-all-bg:        var(--nshw-pr-focus-color); /* Fond bouton Voir tous */
    --nshw-pr-view-all-color:     #ffffff;  /* Texte bouton Voir tous */
    --nshw-pr-view-all-border:    none;     /* Bordure bouton Voir tous */
    --nshw-pr-view-all-radius:    6px;      /* Rayon bordure bouton Voir tous */
    --nshw-pr-transition:    0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --nshw-pr-atc-bg:        #3b82f6;  /* Fond bouton Ajouter au panier */
    --nshw-pr-atc-color:     #ffffff;  /* Texte bouton Ajouter au panier */
    --nshw-pr-qty-bg:        #f8fafc;  /* Fond boutons +/- */
    --nshw-pr-qty-color:     #64748b;  /* Texte boutons +/- */
}

/* ============================================================
   Conteneur principal
   ============================================================ */
.nshw-pr-wrapper {
    position:   relative;
    width:       var(--nshw-pr-width);
    max-width:   100%;
    font-family: var(--nshw-pr-font);
    box-sizing:  border-box;
}

.nshw-pr-wrapper *,
.nshw-pr-wrapper *::before,
.nshw-pr-wrapper *::after {
    box-sizing: inherit;
}

/* ============================================================
   Zone de saisie
   ============================================================ */
.nshw-pr-input-wrap {
    position:      relative;
    display:       flex;
    align-items:   center;
    height:        var(--nshw-pr-height);
    background:    var(--nshw-pr-bg);
    border:        1.5px solid var(--nshw-pr-border-color);
    border-radius: var(--nshw-pr-radius);
    transition:    border-color var(--nshw-pr-transition),
                   box-shadow var(--nshw-pr-transition);
    overflow:      hidden;
}

.nshw-pr-wrapper.focused .nshw-pr-input-wrap {
    border-color: var(--nshw-pr-focus-color);
    box-shadow:   var(--nshw-pr-shadow-focus);
}

/* Champ de saisie */
.nshw-pr-input {
    flex:         1;
    height:       100%;
    padding:      0 16px;
    border:       none;
    outline:      none;
    background:   transparent;
    color:        var(--nshw-pr-text);
    font-size:    15px;
    font-family:  var(--nshw-pr-font);
    font-weight:  400;
    line-height:  1.5;
    -webkit-appearance: none;
    appearance:   none;
}

.nshw-pr-input::placeholder {
    color: var(--nshw-pr-placeholder);
}

/* Suppression des styles natifs sur input[type="search"] */
.nshw-pr-input::-webkit-search-decoration,
.nshw-pr-input::-webkit-search-cancel-button,
.nshw-pr-input::-webkit-search-results-button,
.nshw-pr-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* Icône loupe */
.nshw-pr-icon-search {
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width:       44px;
    color:       var(--nshw-pr-placeholder);
    transition:  color var(--nshw-pr-transition);
}

.nshw-pr-icon-search svg {
    width:  var(--nshw-pr-icon-size);
    height: var(--nshw-pr-icon-size);
}

.nshw-pr-wrapper.focused .nshw-pr-icon-search {
    color: var(--nshw-pr-focus-color);
}

/* Bouton d'effacement */
.nshw-pr-clear {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           36px;
    height:          36px;
    margin-right:    6px;
    background:      #f1f5f9;
    border:          none;
    border-radius:   50%;
    cursor:          pointer;
    color:           #64748b;
    transition:      background var(--nshw-pr-transition),
                     color var(--nshw-pr-transition);
}

.nshw-pr-clear:hover {
    background: #e2e8f0;
    color:      #1e293b;
}

.nshw-pr-clear svg {
    width:  14px;
    height: 14px;
}

/* Spinner de chargement */
.nshw-pr-spinner {
    display:       block;
    flex-shrink:   0;
    width:         18px;
    height:        18px;
    margin-right:  12px;
    border:        2px solid #e2e8f0;
    border-top:    2px solid var(--nshw-pr-focus-color);
    border-radius: 50%;
    animation:     none;
}

/* Animation uniquement quand le spinner est visible (pas d'animation GPU au chargement) */
.nshw-pr-spinner:not([hidden]) {
    animation: nshw-pr-spin 0.7s linear infinite;
}

@keyframes nshw-pr-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Panneau des résultats
   ============================================================ */
.nshw-pr-results {
    position:      absolute;
    top:           calc(100% + 6px);
    left:          0;
    right:         0;
    z-index:       var(--nshw-pr-z-index);
    background:    var(--nshw-pr-result-bg);
    border:        1.5px solid var(--nshw-pr-border-color);
    border-radius: var(--nshw-pr-radius);
    box-shadow:    var(--nshw-pr-shadow);
    max-height:    480px;
    overflow-y:    auto;
    overscroll-behavior: contain;

    /* Animation d'apparition */
    opacity:          0;
    transform:        translateY(-6px);
    transform-origin: top center;
    transition:       opacity var(--nshw-pr-transition),
                      transform var(--nshw-pr-transition);
}

.nshw-pr-results:not([hidden]) {
    opacity:   1;
    transform: translateY(0);
}

/* Scrollbar personnalisée */
.nshw-pr-results::-webkit-scrollbar {
    width: 4px;
}
.nshw-pr-results::-webkit-scrollbar-track {
    background: transparent;
}
.nshw-pr-results::-webkit-scrollbar-thumb {
    background:    #cbd5e1;
    border-radius: 2px;
}

/* ============================================================
   Groupes de résultats
   ============================================================ */
.nshw-pr-group {
    padding: 0;
}

.nshw-pr-group + .nshw-pr-group {
    border-top: 1px solid #f1f5f9;
}

/* Titre de groupe */
.nshw-pr-group-title {
    padding:        8px 16px 4px;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--nshw-pr-group-title);
    user-select:    none;
}

/* ============================================================
   Termes (catégories, étiquettes, attributs)
   ============================================================ */
.nshw-pr-term-item {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         8px 16px;
    color:           var(--nshw-pr-text);
    text-decoration: none;
    font-size:       14px;
    transition:      background var(--nshw-pr-transition);
    cursor:          pointer;
}

.nshw-pr-term-item:hover,
.nshw-pr-term-item:focus {
    background:      var(--nshw-pr-result-hover);
    outline:         none;
    text-decoration: none;
    color:           var(--nshw-pr-focus-color);
}

.nshw-pr-term-item::before {
    content:     '→';
    color:       var(--nshw-pr-placeholder);
    flex-shrink: 0;
    font-size:   12px;
}

/* ============================================================
   Produits
   ============================================================ */
.nshw-pr-product {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         10px 16px;
    text-decoration: none;
    color:           inherit;
    transition:      background var(--nshw-pr-transition);
    cursor:          pointer;
}

.nshw-pr-product:hover,
.nshw-pr-product:focus {
    background:      var(--nshw-pr-result-hover);
    outline:         none;
    text-decoration: none;
}

/* Image produit */
.nshw-pr-product-img {
    position:      relative;
    flex-shrink:   0;
    width:         54px;
    height:        54px;
    border-radius: 6px;
    overflow:      hidden;
    background:    #f8fafc;
    border:        1px solid #f1f5f9;
}

.nshw-pr-product-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* Badges */
.nshw-pr-badge {
    position:      absolute;
    top:           3px;
    left:          3px;
    padding:       2px 5px;
    border-radius: 4px;
    font-size:     9px;
    font-weight:   700;
    color:         #ffffff;
    line-height:   1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nshw-pr-badge-sale {
    background:    var(--nshw-pr-badge-sale);
    color:         var(--nshw-pr-badge-sale-color);
    border-radius: var(--nshw-pr-badge-sale-radius);
    border:        var(--nshw-pr-badge-sale-border);
}

.nshw-pr-badge-outofstock {
    background: var(--nshw-pr-badge-oos);
}

/* Infos produit */
.nshw-pr-product-info {
    flex:         1;
    min-width:    0;
    display:      flex;
    flex-direction: column;
    gap:          2px;
}

.nshw-pr-product-name {
    font-size:       14px;
    font-weight:     600;
    color:           var(--nshw-pr-product-name);
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
    line-height:     1.3;
}

.nshw-pr-product-sku {
    font-size:  11px;
    color:      var(--nshw-pr-sku-color);
    font-family: monospace;
}

.nshw-pr-product-excerpt {
    font-size:  12px;
    color:      var(--nshw-pr-group-title);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.nshw-pr-product-price {
    font-size:   13px;
    font-weight: 600;
    color:       var(--nshw-pr-product-price);
    margin-top:  2px;
}

.nshw-pr-product-price del {
    color:       var(--nshw-pr-sku-color);
    font-weight: 400;
    margin-right: 4px;
}

.nshw-pr-product-price ins {
    color:           var(--nshw-pr-sale-color);
    text-decoration: none;
}

/* ============================================================
   Pied des résultats — Bouton "Voir tous"
   ============================================================ */
.nshw-pr-view-all {
    padding:    10px 16px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}

.nshw-pr-view-all a {
    display:         inline-block;
    padding:         8px 20px;
    background:      var(--nshw-pr-view-all-bg);
    color:           var(--nshw-pr-view-all-color);
    border:          var(--nshw-pr-view-all-border);
    border-radius:   var(--nshw-pr-view-all-radius);
    font-size:       13px;
    font-weight:     600;
    text-decoration: none;
    transition:      opacity var(--nshw-pr-transition);
}

.nshw-pr-view-all a:hover {
    opacity:         0.88;
    text-decoration: none;
    color:           #ffffff;
}

/* ============================================================
   État vide et messages
   ============================================================ */
.nshw-pr-no-results,
.nshw-pr-loading-msg {
    padding:    20px 16px;
    text-align: center;
    color:      var(--nshw-pr-group-title);
    font-size:  14px;
}

/* ============================================================
   Intégration menu Divi
   ============================================================ */
.nshw-pr-menu-item .nshw-pr-wrapper {
    width: auto;
    min-width: 240px;
}

.nshw-pr-divi-wrapper {
    display: inline-block;
    vertical-align: middle;
}

/* ============================================================
   Responsive Mobile
   ============================================================ */
@media (max-width: 640px) {
    .nshw-pr-results {
        position: fixed;
        top:      auto;
        bottom:   0;
        left:     0;
        right:    0;
        border-radius: var(--nshw-pr-radius) var(--nshw-pr-radius) 0 0;
        max-height: 70dvh;
    }

    .nshw-pr-product-sku,
    .nshw-pr-product-excerpt {
        display: none;
    }

    .nshw-pr-product-img {
        width:  44px;
        height: 44px;
    }
}

/* ============================================================
   Animation slide (option admin)
   ============================================================ */
.nshw-pr-anim-slide .nshw-pr-results {
    transition: opacity var(--nshw-pr-transition),
                transform var(--nshw-pr-transition),
                max-height var(--nshw-pr-transition);
}

/* ============================================================
   Accessibilité : focus visible au clavier
   ============================================================ */
.nshw-pr-product:focus-visible,
.nshw-pr-term-item:focus-visible,
.nshw-pr-view-all a:focus-visible {
    outline:        2px solid var(--nshw-pr-focus-color);
    outline-offset: 2px;
}

/* ============================================================
   Bloc quantité + Ajouter au panier (dans les résultats)
   ============================================================ */

/* Enveloppe d'un résultat produit (lien + row ATC) */
.nshw-pr-product-wrap {
    border-bottom: 1px solid #f1f5f9;
}

.nshw-pr-product-wrap:last-child {
    border-bottom: none;
}

/* Ligne quantité + bouton panier */
.nshw-pr-atc-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     6px 16px 10px 82px; /* 82px = largeur image + padding gauche */
}

/* Sélecteur de quantité */
.nshw-pr-qty-wrap {
    display:     flex;
    align-items: center;
    border:      1.5px solid var(--nshw-pr-border-color);
    border-radius: 6px;
    overflow:    hidden;
}

.nshw-pr-qty-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    background:      var(--nshw-pr-qty-bg);
    border:          none;
    cursor:          pointer;
    font-size:       16px;
    font-weight:     700;
    color:           var(--nshw-pr-qty-color);
    line-height:     1;
    transition:      background var(--nshw-pr-transition);
    padding:         0;
}

.nshw-pr-qty-btn:hover {
    background: #e2e8f0;
    color:      #1e293b;
}

.nshw-pr-qty-input {
    width:       36px;
    height:      28px;
    border:      none;
    border-left: 1.5px solid var(--nshw-pr-border-color);
    border-right: 1.5px solid var(--nshw-pr-border-color);
    text-align:  center;
    font-size:   13px;
    font-weight: 600;
    color:       var(--nshw-pr-text);
    background:  #ffffff;
    -moz-appearance: textfield;
    outline:     none;
    padding:     0;
}

.nshw-pr-qty-input::-webkit-outer-spin-button,
.nshw-pr-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Bouton Ajouter au panier */
.nshw-pr-atc-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    padding:         0 12px;
    height:          28px;
    background:      var(--nshw-pr-atc-bg);
    color:           var(--nshw-pr-atc-color);
    border:          none;
    border-radius:   6px;
    font-size:       12px;
    font-weight:     600;
    cursor:          pointer;
    transition:      opacity var(--nshw-pr-transition),
                     background var(--nshw-pr-transition);
    white-space:     nowrap;
    flex-shrink:     0;
}

.nshw-pr-atc-btn:hover:not(:disabled) {
    opacity: 0.88;
}

.nshw-pr-atc-btn:disabled,
.nshw-pr-atc-btn.nshw-pr-atc-loading {
    opacity: 0.6;
    cursor:  not-allowed;
}

.nshw-pr-atc-btn.nshw-pr-atc-done {
    background: #10b981; /* Vert succès */
}

/* Responsive : masquer le bloc ATC sur mobile très étroit */
@media (max-width: 380px) {
    .nshw-pr-atc-row {
        padding-left: 16px;
    }
}