/* ===========================================
   SEARCH BAR STYLES
   =========================================== */

/* Bouton loupe dans le header */
.search-toggle {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.search-toggle:hover {
    color: #e91e63;
}

/* Overlay de recherche mobile - plein écran avec flou */
body .search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    padding: 60px 16px 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

body .search-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Conteneur de recherche */
.search-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

/* Formulaire de recherche */
.search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 30px;
    padding: 6px 6px 6px 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.search-form input {
    flex: 1;
    border: none;
    background: none;
    font-size: 16px;
    padding: 8px 0;
    outline: none;
    min-width: 0;
}

.search-form input::placeholder {
    color: #999;
}

.search-submit,
.search-close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.search-submit:hover {
    background: #e91e63;
    color: #fff;
}

.search-close:hover {
    color: #e91e63;
}

/* Suggestions d'autocomplete */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    margin-top: 8px;
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.search-suggestions.active {
    display: block;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-suggestion-item:hover {
    background: #f8f8f8;
}

.search-suggestion-item .suggestion-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.search-suggestion-item .suggestion-icon.category {
    background: #e3f2fd;
    color: #1976d2;
}

.search-suggestion-item .suggestion-icon.tag {
    background: #fce4ec;
    color: #e91e63;
}

.search-suggestion-item .suggestion-text {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.search-suggestion-item .suggestion-count {
    font-size: 12px;
    color: #999;
    margin-left: 8px;
}

.search-suggestion-item .suggestion-type {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Message "aucun résultat" */
.search-no-results {
    padding: 20px;
    text-align: center;
    color: #666;
}

/* Loading state */
.search-loading {
    padding: 20px;
    text-align: center;
    color: #999;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    body .search-overlay {
        padding: 80px 16px 16px;
    }

    .search-form {
        padding: 4px 4px 4px 16px;
    }

    .search-form input {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .search-suggestions {
        max-height: calc(100vh - 180px);
    }
}

/* ===========================================
   BARRE DE RECHERCHE DESKTOP (toujours visible)
   =========================================== */

/* Caché par défaut (mobile) */
.search-bar-desktop {
    display: none;
}

@media (min-width: 1024px) {
    /* Barre de recherche desktop - centrée en haut */
    .search-bar-desktop {
        display: flex;
        justify-content: center;
        margin: 0 auto 20px auto;
        padding: 15px 0;
        position: relative;
    }

    .search-form-desktop {
        display: flex;
        align-items: center;
        background: #FDF6E3;
        border-radius: 30px;
        padding: 6px 20px 6px 6px;
        width: 420px;
        border: 1px solid #E6D9A8;
        box-shadow: none;
        transition: all 0.2s ease;
    }

    .search-form-desktop:focus-within {
        border-color: #DAA520;
    }

    .search-input-desktop {
        flex: 1;
        border: none;
        background: none;
        font-size: 16px;
        padding: 12px 0;
        outline: none;
        min-width: 0;
        color: #B8860B;
    }

    .search-input-desktop::placeholder {
        color: #B8860B;
    }

    .search-submit-desktop {
        background: none;
        border: none;
        padding: 12px;
        cursor: pointer;
        color: #B8860B;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s;
    }

    .search-submit-desktop:hover {
        color: #DAA520;
    }

    /* Suggestions desktop */
    .search-suggestions-desktop {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 420px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        margin-top: 4px;
        max-height: 400px;
        overflow-y: auto;
        display: none;
        z-index: 1000;
    }

    .search-suggestions-desktop.active {
        display: block;
    }

    /* Overlay caché par défaut sur desktop, visible si actif (via menu) */
    body .search-overlay:not(.active) {
        display: none;
    }

    /* Cacher le bouton loupe dans header-user-actions sur desktop */
    .header-user-actions .search-toggle {
        display: none;
    }
}

/* ===========================================
   VERBES "JE VEUX..." (MODE FOCUS)
   =========================================== */

.search-verbs-header {
    padding: 10px 16px 6px;
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #f0f0f0;
}

/* Items de verbe - même style que les suggestions */
.search-suggestion-item.verb-item {
    text-transform: capitalize;
}

.search-suggestion-item.verb-item .verb-icon {
    background: #f5f5f5;
}

.search-suggestion-item.verb-item .verb-emoji {
    font-size: 18px;
    line-height: 1;
}

/* ===========================================
   RACCOURCIS PRIORITAIRES (MOTS MAGIQUES)
   =========================================== */

.search-suggestion-item.shortcut {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    border-bottom: 2px solid #ffc107;
}

.search-suggestion-item.shortcut:hover {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
}

.search-suggestion-item.shortcut .suggestion-icon-emoji {
    font-size: 20px;
    margin-right: 12px;
    flex-shrink: 0;
}

.search-suggestion-item.shortcut .suggestion-text {
    font-weight: 600;
    color: #856404;
}

/* ===========================================
   SUGGESTIONS PRÉNOM (BONNE FÊTE)
   =========================================== */

.search-suggestion-item.prenom {
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
    border-bottom: 2px solid #e91e63;
}

.search-suggestion-item.prenom:hover {
    background: linear-gradient(135deg, #f8bbd9 0%, #f48fb1 100%);
}

.search-suggestion-item.prenom .suggestion-icon-emoji {
    font-size: 20px;
    margin-right: 12px;
    flex-shrink: 0;
}

.search-suggestion-item.prenom .suggestion-text {
    font-weight: 600;
    color: #880e4f;
}

.search-suggestion-item.prenom.selected {
    background: linear-gradient(135deg, #f48fb1 0%, #ec407a 100%);
}

/* ===========================================
   SÉLECTION CLAVIER
   =========================================== */

.search-suggestion-item.selected {
    background-color: #f0f0f0;
}

.search-suggestion-item.shortcut.selected {
    background: linear-gradient(135deg, #ffe69c 0%, #ffd966 100%);
}