/* ==========================================================================
   Personnalisation FiboSearch selon votre Design System
   ========================================================================== */

/* 1. Conteneur principal et champ de recherche
-------------------------------------------------------------------------- */

/* Applique la police et la couleur de base du corps de texte */
.dgwt-wcas-search-wrapp {
    font-family: inherit; /* Assurez-vous que la police de votre thème est héritée */
}

/* Style du champ de recherche (input) */
.dgwt-wcas-search-form .dgwt-wcas-search-input {
    /* Couleurs et Bordures */
    background-color: #f5f5f5; /* Neutral Backgrounds: Secondary/Default State */
    border: 1px solid #e0e0e0; /* Neutral Borders & Separators: Borders */
    color: #354a5f; /* Dark Accent 1: For text */

    /* UI Components Style */
    border-radius: 8px !important; /* Border-Radius: Buttons, Inputs */

    /* Typographie */
    font-weight: 400; /* Font-Weight: Normal */
    font-size: 1em; /* Font-Size: Use relative units */

    /* Interactivité & Animations */
    transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

/* Style du placeholder */
.dgwt-wcas-search-form .dgwt-wcas-search-input::placeholder {
    color: #888888; /* Text Colors: Secondary Text */
    opacity: 1;
}

/* Effet au focus sur le champ de recherche */
.dgwt-wcas-search-form .dgwt-wcas-search-input:focus {
    border-color: #ffa724; /* Primary Accent */
    box-shadow: 0 0 0 3px rgba(255, 167, 36, 0.2); /* Effet d'aura pour l'accessibilité */
    outline: none;
}


/* 2. Icône / Bouton de recherche
-------------------------------------------------------------------------- */

.dgwt-wcas-search-submit {
    background-color: transparent !important; /* On s'assure que le fond est transparent */
    border-radius: 50% !important; /* Prépare la forme circulaire pour le survol */
    width: 40px; /* Force une forme carrée pour un cercle parfait. Ajustez au besoin. */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-out;
}

/* Couleur de l'icône SVG par défaut */
.dgwt-wcas-search-submit svg {
    fill: #354a5f; /* Dark Accent 1 */
    transition: fill 0.2s ease-out;
}

/* Effet uniquement au survol de l'icône elle-même */
.dgwt-wcas-search-submit:hover {
    background-color: #ffa724 !important; /* Le fond orange apparaît */
}

/* L'icône devient blanche au survol */
.dgwt-wcas-search-submit:hover svg {
    fill: #ffffff !important; /* L'icône devient blanche */
}


/* 3. Conteneur des résultats (Dropdown)
-------------------------------------------------------------------------- */

.dgwt-wcas-suggestions-wrapp {
    margin-top: 8px; /* Petit espace entre la barre et les résultats */

    /* UI Components Style */
    background-color: #ffffff; /* Neutral Backgrounds: Main Container */
    border-radius: 12px; /* Border-Radius: Main Containers (cards, menus) */
    box-shadow: 0 5px 25px rgba(0,0,0,0.15); /* Box-Shadow: Floating Elements */
    border: 1px solid #e0e0e0; /* Neutral Borders & Separators: Borders */

    /* Interactivité & Animations */
    transform-origin: top center;
    animation: fadeInDown 0.3s ease-out forwards;
    opacity: 0;
}

/* Animation d'apparition du dropdown */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 4. Style des résultats individuels
-------------------------------------------------------------------------- */

/* Conteneur d'une suggestion de produit */
.dgwt-wcas-suggestion {
    border-bottom: 1px solid #f0f0f0; /* Separators */
    transition: background-color 0.2s ease;
}

/* Supprime la bordure du dernier élément */
.dgwt-wcas-suggestion:last-child {
    border-bottom: none;
}

/* Effet de survol sur une suggestion */
.dgwt-wcas-suggestion:hover {
    background-color: #fff8ed; /* Couleur de fond légère pour le survol (inspiré de "Navigation Links") */
}

/* Titre du produit dans les résultats */
.dgwt-wcas-st-title {
    color: #1e1e1e; /* Text Colors: Titles */
    font-weight: 600; /* Font-Weight: Semi-Bold */
}

/* Description/extrait du produit */
.dgwt-wcas-st-excerpt {
    color: #444444; /* Text Colors: Standard Text */
    font-weight: 400; /* Font-Weight: Normal */
}

/* Prix du produit */
.dgwt-wcas-st-price {
    color: #333333; /* Text Colors: Standard Text */
    font-weight: 600; /* Font-Weight: Semi-Bold */
}

/* Lien "Voir tous les résultats" */
.dgwt-wcas-suggestion-more {
    font-weight: 600; /* Font-Weight: Semi-Bold */
    color: #354a5f; /* Dark Accent 1 */
    background-color: #f5f5f5; /* Neutral Backgrounds: Secondary/Default State */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dgwt-wcas-suggestion-more:hover {
    background-color: #ffa724; /* Primary Accent */
    color: #ffffff; /* Text on Accent Color */
}


/* 5. Responsive (Mobile)
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Style de l'overlay en arrière-plan sur mobile */
    .dgwt-wcas-overlay {
        backdrop-filter: blur(5px); /* Responsive Design: blurred background effect */
        background-color: rgba(255, 255, 255, 0.5);
    }

    /* Le conteneur des suggestions prend tout l'écran */
    .dgwt-wcas-suggestions-wrapp {
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
}