/**
 * Koldkaze Smart Search - Styles CSS
 * Design moderne avec Bricolage Grotesque et #6300ff
 * 
 * @version 2.0.0
 */

/* Variables CSS pour la recherche */
:root {
    --kss-primary: #6300ff;
    --kss-primary-light: rgba(99, 0, 255, 0.1);
    --kss-primary-hover: #5000d9;
    --kss-primary-dark: #4a00b3;
    --kss-secondary: #f8f9fb;
    --kss-border: #e2e8f0;
    --kss-border-focus: #6300ff;
    --kss-text: #1a1a1a;
    --kss-text-muted: #64748b;
    --kss-white: #ffffff;
    --kss-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --kss-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --kss-radius: 12px;
    --kss-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --kss-font: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Wrapper général */
.koldkaze-search-wrapper {
    width: 100%;
    max-width: none;
}

/* Container principal de recherche - 100% largeur */
.koldkaze-search-container {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    font-family: var(--kss-font);
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Section de recherche */
.koldkaze-search-section {
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
}

/* Input de recherche */
.koldkaze-search-input {
    width: 100%;
    padding: 1rem 1.25rem 1rem 3.5rem;
    font-family: var(--kss-font);
    font-weight: 400;
    border: 2px solid var(--kss-border);
    border-radius: var(--kss-radius);
    background: var(--kss-white);
    color: var(--kss-text);
    outline: none;
    transition: var(--kss-transition);
    box-shadow: var(--kss-shadow);
    box-sizing: border-box;
}

.koldkaze-search-input::placeholder {
    color: var(--kss-text-muted);
    font-weight: 400;
}

.koldkaze-search-input:focus {
    border-color: var(--kss-border-focus);
    box-shadow: 0 0 0 3px var(--kss-primary-light), var(--kss-shadow-lg);
}

.koldkaze-search-input.koldkaze-loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%236300ff' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' opacity='.25'/%3E%3Cpath fill='%236300ff' d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'%3E%3CanimateTransform attributeName='transform' dur='0.75s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 1.25rem center;
    background-size: 20px;
}

/* Icône de recherche */
.koldkaze-search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kss-text-muted);
    font-size: 1.125rem;
    pointer-events: none;
    z-index: 2;
}

.koldkaze-search-input.koldkaze-loading + .koldkaze-search-icon {
    display: none;
}

/* Filtres avancés - Design minimal et élégant */
.koldkaze-search-filters {
    margin: 1.5rem 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.koldkaze-search-filters summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--kss-secondary);
    border: 1px solid var(--kss-border);
    border-radius: var(--kss-radius);
    cursor: pointer;
    transition: var(--kss-transition);
    font-family: var(--kss-font);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--kss-text);
    list-style: none;
    outline: none;
}

.koldkaze-search-filters summary::-webkit-details-marker {
    display: none;
}

.koldkaze-search-filters summary:hover {
    background: #f1f5f9;
    border-color: var(--kss-primary);
}

.koldkaze-search-filters summary::after {
    content: "⚙️";
    font-size: 1rem;
    transition: var(--kss-transition);
}

.koldkaze-search-filters[open] summary::after {
    transform: rotate(180deg);
}

.koldkaze-search-filters[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.filters-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
    background: var(--kss-white);
    border: 1px solid var(--kss-border);
    border-top: none;
    border-bottom-left-radius: var(--kss-radius);
    border-bottom-right-radius: var(--kss-radius);
    box-shadow: var(--kss-shadow);
}

.filters-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
    background: var(--kss-white);
    border: 1px solid var(--kss-border);
    border-top: none;
    border-bottom-left-radius: var(--kss-radius);
    border-bottom-right-radius: var(--kss-radius);
    box-shadow: var(--kss-shadow);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kss-text);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-family: var(--kss-font);
}

.filter-group select,
.filter-group input {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--kss-border);
    border-radius: 8px;
    background: var(--kss-white);
    font-size: 0.875rem;
    font-family: var(--kss-font);
    color: var(--kss-text);
    transition: var(--kss-transition);
    outline: none;
}

.filter-group select:focus,
.filter-group input:focus {
    border-color: var(--kss-border-focus);
    box-shadow: 0 0 0 2px var(--kss-primary-light);
}

/* Container d'autocomplétion */
.koldkaze-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--kss-white);
    border: 1px solid var(--kss-border);
    border-radius: var(--kss-radius);
    box-shadow: var(--kss-shadow-lg);
    z-index: 9999;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 0.25rem;
    display: none;
}

.koldkaze-autocomplete::-webkit-scrollbar {
    width: 6px;
}

.koldkaze-autocomplete::-webkit-scrollbar-track {
    background: var(--kss-secondary);
}

.koldkaze-autocomplete::-webkit-scrollbar-thumb {
    background: var(--kss-border);
    border-radius: 3px;
}

/* Items d'autocomplétion */
.autocomplete-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--kss-secondary);
    cursor: pointer;
    transition: var(--kss-transition);
}

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

.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--kss-secondary);
}

.autocomplete-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kss-primary);
    color: var(--kss-white);
    border-radius: 8px;
    margin-right: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.autocomplete-content {
    flex: 1;
    min-width: 0;
}

.autocomplete-title {
    font-weight: 500;
    color: var(--kss-text);
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--kss-font);
    font-size: 0.875rem;
}

.autocomplete-type {
    font-size: 0.75rem;
    color: var(--kss-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-weight: 500;
    font-family: var(--kss-font);
}

.autocomplete-image {
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 0.75rem;
    border-radius: 6px;
    overflow: hidden;
    background: var(--kss-secondary);
}

.autocomplete-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Container de résultats */
.koldkaze-search-results {
    margin-top: 1.5rem;
    width: 100%;
}

.koldkaze-search-results.koldkaze-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Header des résultats */
.search-results-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--kss-border);
}

.search-results-header h3 {
    margin: 0 0 0.5rem 0;
    color: var(--kss-text);
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--kss-font);
}

.search-stats {
    color: var(--kss-text-muted);
    font-size: 0.875rem;
    font-family: var(--kss-font);
}

/* Sections de résultats */
.search-section {
    margin-bottom: 2rem;
}

.search-section-title {
    margin: 0 0 1rem 0;
    color: var(--kss-text);
    font-size: 1.125rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--kss-border);
    font-family: var(--kss-font);
}

.search-items {
    display: grid !important;
    gap: 1.5rem !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    width: 100% !important;
}

/* Items de résultats - Layout en carte */
.search-item {
    display: flex !important;
    flex-direction: column !important;
    background: var(--kss-white);
    border: 1px solid var(--kss-border);
    border-radius: var(--kss-radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--kss-transition);
    box-shadow: var(--kss-shadow);
}

.search-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--kss-shadow-lg);
    border-color: var(--kss-primary);
}

.search-item-image {
    width: 100%;
    height: 200px;
    flex-shrink: 0;
    background: var(--kss-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.search-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-item-placeholder {
    color: var(--kss-text-muted);
    font-size: 2rem;
}

.search-item-content {
    flex: 1;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-item-title {
    margin: 0 0 0.75rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--kss-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--kss-font);
}

.search-item-excerpt {
    color: var(--kss-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    font-family: var(--kss-font);
}

.search-item-meta {
    font-size: 0.75rem;
    color: var(--kss-text-muted);
    margin-bottom: 0.75rem;
    font-family: var(--kss-font);
}

.search-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--kss-secondary);
}

.search-item-type {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.375rem 0.75rem;
    background: var(--kss-secondary);
    color: var(--kss-text-muted);
    border-radius: 6px;
    font-weight: 600;
    font-family: var(--kss-font);
}

.search-item-product .search-item-type {
    background: var(--kss-primary-light);
    color: var(--kss-primary);
}

.search-item-post .search-item-type {
    background: rgba(34, 197, 94, 0.1);
    color: #059669;
}

.search-item-page .search-item-type {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.search-item-price {
    font-weight: 700;
    color: var(--kss-primary);
    font-size: 1.125rem;
    font-family: var(--kss-font);
}

/* États sans résultats et erreurs */
.search-no-results,
.search-error {
    text-align: center;
    padding: 3rem 1.25rem;
    background: var(--kss-white);
    border-radius: var(--kss-radius);
    border: 1px solid var(--kss-border);
}

.search-no-results-icon,
.search-error-icon {
    font-size: 3rem;
    color: var(--kss-text-muted);
    margin-bottom: 1.25rem;
}

.search-error-icon {
    color: #ef4444;
}

.search-no-results h3,
.search-error h3 {
    margin: 0 0 0.75rem 0;
    color: var(--kss-text);
    font-size: 1.5rem;
    font-family: var(--kss-font);
    font-weight: 600;
}

.search-no-results p,
.search-error p {
    color: var(--kss-text-muted);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    font-family: var(--kss-font);
}

/* Responsive */
@media (max-width: 768px) {
    .filters-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .search-items {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
    }
    
    .search-item-image {
        height: 160px;
    }
    
    .search-item-content {
        padding: 1rem;
    }
    
    .search-item-title {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .koldkaze-search-input {
        padding: 0.875rem 1rem 0.875rem 3rem;
        font-size: 1rem; /* Évite le zoom sur iOS */
    }
    
    .koldkaze-search-icon {
        left: 1rem;
        font-size: 1rem;
    }
    
    .autocomplete-item {
        padding: 1rem;
    }
    
    .search-items {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .search-item-image {
        height: 180px;
    }
    
    .search-no-results,
    .search-error {
        padding: 2rem 1rem;
    }
    
    .search-no-results-icon,
    .search-error-icon {
        font-size: 2.25rem;
    }
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.koldkaze-loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Intégration Bricks - Assure 100% de largeur et évite les masquages */
.brxe-shortcode .koldkaze-search-container,
.bricks-search-wrapper .koldkaze-search-container {
    max-width: none;
    width: 100%;
}

/* Évite que Bricks masque les résultats de recherche */
.brxe-shortcode {
    overflow: visible !important;
}

.brxe-shortcode .koldkaze-search-wrapper {
    overflow: visible !important;
    position: relative;
    z-index: 100;
}

.brxe-shortcode .koldkaze-search-container {
    overflow: visible !important;
    position: relative;
}

.brxe-shortcode .koldkaze-search-results {
    position: relative;
    z-index: 101;
    overflow: visible !important;
    margin-top: 1.5rem;
    background: var(--kss-white);
    box-shadow: var(--kss-shadow);
    border-radius: var(--kss-radius);
}

/* Force l'affichage pour tous les conteneurs Bricks potentiels */
.brxe-container:has(.koldkaze-search-wrapper),
.brxe-div:has(.koldkaze-search-wrapper),
.brxe-section:has(.koldkaze-search-wrapper),
.brxe-block:has(.koldkaze-search-wrapper) {
    overflow: visible !important;
}

/* Widget sidebar */
.widget.koldkaze-search-widget .search-items {
    grid-template-columns: 1fr;
}

.widget.koldkaze-search-widget .search-item-image {
    width: 60px;
    height: 60px;
}

/* =================================== */
/* SHORTCODE COMPACT - ICÔNE + MODAL  */
/* =================================== */

/* Bouton trigger compact */
.koldkaze-search-compact-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size, 40px);
    height: var(--icon-size, 40px);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--kss-transition);
    color: #000000; /* Noir par défaut */
    outline: none;
    position: relative;
}

/* État replié de la navigation (header scrollé) */
.scrolled-header .koldkaze-search-compact-trigger {
    color: #ffffff; /* Blanc quand la nav est repliée */
}

.koldkaze-search-compact-trigger:hover {
    opacity: 0.7;
    transform: scale(1.05);
}

.koldkaze-search-compact-trigger:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

/* Focus en mode replié */
.scrolled-header .koldkaze-search-compact-trigger:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.koldkaze-search-compact-trigger svg {
    width: calc(var(--icon-size, 40px) * 0.5);
    height: calc(var(--icon-size, 40px) * 0.5);
}

/* Modal de recherche - Fullscreen */
.koldkaze-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.koldkaze-search-modal.show {
    opacity: 1;
}

.koldkaze-search-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.koldkaze-search-modal-content {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: var(--kss-white);
    overflow: hidden;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.koldkaze-search-modal.show .koldkaze-search-modal-content {
    transform: translateY(0);
}

.koldkaze-search-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 3rem;
    border-bottom: 1px solid var(--kss-border);
    background: var(--kss-secondary);
    flex-shrink: 0;
}

.koldkaze-search-modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--kss-text);
    font-family: var(--kss-font);
}

.koldkaze-search-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--kss-transition);
    color: var(--kss-text-muted);
}

.koldkaze-search-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: var(--kss-border);
    color: var(--kss-text);
}

.koldkaze-search-modal-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.koldkaze-search-modal-body {
    flex: 1;
    padding: 3rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.koldkaze-search-modal-body::-webkit-scrollbar {
    width: 8px;
}

.koldkaze-search-modal-body::-webkit-scrollbar-track {
    background: var(--kss-secondary);
}

.koldkaze-search-modal-body::-webkit-scrollbar-thumb {
    background: var(--kss-border);
    border-radius: 4px;
}

/* Container de recherche dans le modal fullscreen */
.koldkaze-search-modal .koldkaze-search-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Responsive modal fullscreen */
@media (max-width: 768px) {
    .koldkaze-search-modal-header {
        padding: 1.5rem 2rem;
    }
    
    .koldkaze-search-modal-header h3 {
        font-size: 1.25rem;
    }
    
    .koldkaze-search-modal-close {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .koldkaze-search-modal-close svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .koldkaze-search-modal-body {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .koldkaze-search-modal-header {
        padding: 1rem 1.5rem;
    }
    
    .koldkaze-search-modal-body {
        padding: 1.5rem 1rem;
    }
}

/* === STYLES IA - AJOUT POUR LA RECHERCHE INTELLIGENTE === */

/* Badge IA dans les résultats */
.ai-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, var(--kss-primary), var(--kss-primary-hover));
    color: white;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    box-shadow: 0 2px 4px rgba(99, 0, 255, 0.2);
}

/* Note: Section d'analyse IA supprimée car elle générait des données 'undefined' */

/* Section de recommandations IA */
.ai-recommendations-section {
    background: linear-gradient(135deg, #fff8f0, #fff4e6);
    border: 1px solid #fbbf24;
    border-radius: var(--kss-radius);
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: var(--kss-shadow);
}

.ai-recommendations-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #f59e0b;
    font-size: 0.9rem;
}

.ai-recommendation {
    margin-bottom: 1rem;
}

.ai-recommendation:last-child {
    margin-bottom: 0;
}

.ai-recommendation h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kss-text);
}

.ai-suggestion-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ai-suggestion-btn {
    background: var(--kss-white);
    border: 1px solid var(--kss-border);
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    color: var(--kss-text);
    cursor: pointer;
    transition: var(--kss-transition);
    font-family: var(--kss-font);
}

.ai-suggestion-btn:hover {
    background: var(--kss-primary);
    color: white;
    border-color: var(--kss-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 0, 255, 0.2);
}

.ai-suggestion-btn:active {
    transform: translateY(0);
}

/* Input avec IA activée */
.koldkaze-search-input.ai-enabled {
    border-color: var(--kss-primary);
    box-shadow: 0 0 0 3px rgba(99, 0, 255, 0.1);
}

.koldkaze-search-input.ai-enabled::placeholder {
    color: var(--kss-primary);
    font-style: italic;
}

/* Responsive pour les éléments IA */
@media (max-width: 768px) {
    /* Note: .ai-analysis-details supprimé */
    
    .ai-suggestion-terms {
        gap: 0.3rem;
    }
    
    .ai-suggestion-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .ai-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 480px) {
    /* Note: .ai-analysis-section et .ai-enhanced-query supprimés */
    .ai-recommendations-section {
        padding: 0.75rem;
        margin: 0.75rem 0;
    }
    
    .ai-recommendation h5 {
        font-size: 0.85rem;
    }
}