/* Déclencheur */
.k-trigger-search { 
    display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 9px 7px;
    height: 52px; background: #F6F6F6; border: 1px solid #D2D2D2; border-radius: 15px; cursor: pointer;
}
.k-trigger-search input { border: none; background: transparent; outline: none; width: 100%; margin-left: 10px; cursor: pointer; pointer-events: none; }

/* Modale */
.kreabel-search-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.4); z-index: 99999; backdrop-filter: blur(2px); }
.kreabel-search-modal-content { background: #E1E1E1; width: 100%; max-height: 85vh; padding: 30px 5% 50px 5%; overflow-y: auto; }

/* Header Modale */
.kreabel-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; gap: 20px; }
.k-search-input-wrapper { flex-grow: 1; background: #FFFFFF; box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1); border-radius: 15px; display: flex; align-items: center; padding: 10px 20px; }
.k-search-input-wrapper input {
display: flex;
flex-direction: row;
align-items: center;
padding: 9px 38px;
gap: 38px;
width: 1194px;
height: 55px;
    border: none;

outline: none;
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #C6C6C6;	
	margin-left: 10px;}
.kreabel-close-modal-btn { background: transparent; border: none; cursor: pointer; color: #333; }
.kreabel-close-modal-btn i { font-size: 36px; font-weight: 300; }

/* Textes et Historique */
.k-section-title {margin-bottom: 10px; display: block;

font-family: 'Raleway';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #000000;


}
.history-header { margin-bottom: 15px; }
#kreabel-clear-history { text-decoration: underline; display: block; margin-top: 5px;

font-family: 'Raleway';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #000000;



 }
.history-tag { 
display: flex; 
flex-wrap: wrap;
align-items: center; 
cursor: pointer; 
transition: 0.2s; 
text-decoration: none; 
padding: 10px 20px;
gap: 10px;
height: 44px;
background: #1C7EE1;
border-radius: 15px;
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
text-align: center;
color: #FFFFFF;
height: 44px;
}
.history-tag i.remove-tag { font-size: 16px; color: #888; }
.history-tag:hover, .history-tag:first-child { background-color: #1a73e8; color: #FFFFFF; }
.history-tag:hover i.remove-tag, .history-tag:first-child i.remove-tag { color: #FFFFFF; }
.k-live-categories { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.k-live-categories .history-tag { border: 1px solid #ddd; }
.k-live-categories .history-tag:hover { background-color: #1a73e8 !important; color: white !important; border-color: #1a73e8 !important; }

/* Slider Produits (Desktop) */
.kreabel-products-wrapper { position: relative; display: flex; align-items: center; }
.kreabel-products-slider { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; scroll-behavior: smooth; width: 100%; }
.kreabel-products-slider::-webkit-scrollbar { height: 6px; }
.kreabel-products-slider::-webkit-scrollbar-track { background: #d1d1d1; border-radius: 10px; margin: 0 50px; }
.kreabel-products-slider::-webkit-scrollbar-thumb { background: #000000; border-radius: 10px; }
.kreabel-product-card { background: #FFFFFF; border-radius: 16px; min-width: 220px; max-width: 220px; padding: 20px; scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.kreabel-product-card img { width: 100%; height: 160px; object-fit: contain; margin-bottom: 15px; }
.k-product-info h5 { font-size: 14px; font-weight: 600; color: #000; margin-bottom: 10px; line-height: 1.3; height: 36px; overflow: hidden; }
.k-price-row .price { font-size: 22px; font-weight: bold; color: #000; }
.k-stock-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #000; margin-top: 10px; }
.k-dot { width: 8px; height: 8px; background-color: #2ecc71; border-radius: 50%; display: inline-block; }
.k-slider-btn { position: absolute; background: #FFFFFF; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 10; }
.k-slider-btn.prev { left: -20px; }
.k-slider-btn.next { right: -20px; }
#k-see-all-results { display: block; width: fit-content; margin: 30px auto 0; background: #000; color: #fff; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: bold; text-align: center; transition: 0.3s;}

/* Utilitaires d'affichage */
.d-desktop { display: block; }
.d-mobile { display: none !important; }
.d-mobile-flex { display: none !important; }

/* REGLAGES MOBILE EXCLUSIFS (Application stricte de la maquette + Full screen) */
@media (max-width: 767px) {
    .d-desktop { display: none !important; }
    .d-mobile { display: block !important; }
    .d-mobile-flex { display: flex !important; }

    /* --- Modale principale : Forcer le plein écran dynamique --- */
    .kreabel-search-modal {
        height: 100% !important;
        height: 100dvh !important; /* S'adapte à la barre de navigation iOS/Android */
    }

    .k-trigger-search {
        flex-direction: row;
        border: none;
        width: 100%;
        box-sizing: border-box;
        background: #FFF;
        box-shadow: 0 12px 25px 0 rgba(0, 0, 0, 0.10);
        border-radius: 15px;
    }
    
    /* --- Conteneur : Transformation en colonne Flex --- */
    .kreabel-search-modal-content {
        height: 100%; 
        max-height: none; 
        border-radius: 0; 
        padding: 20px 15px 0 15px;
        background: #EBEBEB; /* Gris clair de la maquette */
        box-sizing: border-box; 
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Désactive le scroll global de la page */
    }

    /* --- Header et Input : Garder leur taille fixe en haut --- */
    .kreabel-modal-header-top {
        align-items: center; 
        justify-content: center; 
        position: relative; 
        margin-bottom: 25px; 
        width: 100%;
        flex-shrink: 0; /* Empêche l'écrasement par flexbox */
    }
    
    .kreabel-modal-header { 
        margin-bottom: 25px; 
        width: 100%; 
        flex-shrink: 0; 
    }

    .mobile-modal-title { 
        font-size: 24px; 
        font-weight: 700; 
        color: #000; 
    }
    
    .kreabel-modal-header-top .kreabel-close-modal-btn { 
        position: absolute; 
        right: 0; 
        background: transparent;
        border: none;
    }

    /* --- Input : Design Pilule et Icône à droite --- */
    .k-search-input-wrapper {
        padding: 8px 25px; 
        display: flex; 
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center;
        border-radius: 50px !important; /* Style pilule */
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
        width: 100%;
        box-sizing: border-box;
    }
    
    .k-search-input-wrapper input { 
        order: 1; 
        margin-left: 0; 
        font-size: 16px;
        color: #000;
        text-align: center; 
        padding: 0;
        height: 40px;
        width: 100% !important; /* Écrase la largeur fixe du bureau */
        max-width: 100%;
        flex-grow: 1;
    }
    
    .k-search-input-wrapper .search-icon { 
        order: 2; 
        font-size: 28px; 
        color: #000;
        min-width: 29px;
    }

    /* --- Zone de résultats : Activer le scroll fluide interne --- */
    #kreabel-default-view, 
    #kreabel-live-results {
        flex-grow: 1; /* Prend tout l'espace disponible sous la recherche */
        overflow-y: auto; 
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* Scroll fluide natif iOS */
        padding-bottom: 50px; 
    }

    /* --- Masquer le titre (ex: "Produits suggérés", "Votre historique") --- */
    .k-section-title { 
        display: none !important; 
    }

    /* --- Header Historique (pour le bouton effacer) --- */
    .history-header {
        display: flex; 
        flex-direction: row; 
        justify-content: center; 
        margin-bottom: 15px;
    }
    
    #kreabel-clear-history { 
        margin-top: 0; 
        font-size: 14px; 
        color: #333;
    }
    
    /* --- Tags de recherche (Catégories et Historique) --- */
    .history-tags, .k-live-categories { 
        display: flex; 
        flex-wrap: wrap; /* Assure le retour à la ligne */
        gap: 10px; 
        margin-bottom: 25px;
    }
    
    .history-tag {
        background: #FFFFFF !important; 
        color: #000000 !important; 
        padding: 10px 18px; /* Correspond à la maquette */
        font-size: 14px;
        line-height: normal;
        box-shadow: 0px 2px 8px rgba(0,0,0,0.06);
        border: none !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px; /* Espace entre le texte et l'icône SVG */
        text-decoration: none;
    }
    
    .remove-tag { 
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    /* Premier tag actif en bleu */
    .history-tag:first-child, .history-tag:hover {
        background: #1C7EE1 !important;
        color: #FFFFFF !important;
    }

    /* --- Produits --- */
    .kreabel-products-slider {
        flex-direction: column; 
        overflow-y: visible; 
        gap: 12px; 
        padding-bottom: 10px;
    }
    
    .kreabel-product-card {
        flex-direction: row; 
        min-width: 100%; 
        max-width: 100%; 
        padding: 20px; 
        align-items: center; 
        height: auto;
        border-radius: 20px; 
        box-shadow: 0px 4px 10px rgba(0,0,0,0.03);
        box-sizing: border-box;
    }
    
    .kreabel-product-card img {
        width: 100px; 
        height: 100px; 
        margin-bottom: 0; 
        margin-right: 20px; 
        object-fit: contain;
    }
    
    .k-product-info {
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        flex-grow: 1;
    }
    
    .k-product-info h5 {
        height: auto; 
        max-height: 45px; 
        margin-bottom: 10px; 
        font-size: 15px;
        font-weight: 700; 
        color: #000;
    }
    
    .k-price-row .price { 
        font-size: 24px; 
        font-weight: 800;
    }
    
    .k-stock-status {
        margin-top: 6px;
        font-weight: 500;
    }
    
    /* Masquer les flèches du slider */
    .k-slider-btn { display: none !important; }
}