/* ============================================================
   🎨 VARIABLES GLOBALES & THÈME
   ============================================================ */
:root {
    --livo-blue: #111827;      /* Ton bleu nuit profond */
    --livo-yellow: #fbce03;    /* Jaune Livo */
    --gray-bg: #f9fafb;        /* Gris très léger pour le fond des cartes */
    --gray-border: #e5e7eb;    /* Bordure claire */
    --gray-text: #6b7280;      /* Texte secondaire */
}

/* ============================================================
   📱 UTILS & ANIMATIONS
   ============================================================ */
.scrollbar-hide::-webkit-scrollbar { 
    display: none; 
}

.scrollbar-hide { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}

.animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================================
   🏪 ZONE PRODUITS (FOND BLANC)
   ============================================================ */
#productsView {
    background-color: #ffffff !important;
    color: var(--livo-blue);
    min-height: 100vh;
}

/* Titres de la boutique */
#shopNameTitle {
    color: var(--livo-blue) !important;
    font-weight: 800;
    letter-spacing: -0.025em;
}

#shopLocTitle {
    color: var(--gray-text) !important;
}

/* ============================================================
   🔍 BARRE DE RECHERCHE (FIX VISIBILITÉ)
   ============================================================ */
#searchInput {
    background-color: var(--gray-bg) !important;
    border: 1px solid var(--gray-border) !important;
    /* Couleur du texte saisi forcée en bleu nuit */
    color: #111827 !important; 
    font-weight: 600;
}

#searchInput::placeholder {
    color: #9ca3af !important;
    font-weight: 400;
}

#searchInput:focus {
    border-color: var(--livo-yellow) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(251, 206, 3, 0.1);
    outline: none;
    color: #111827 !important;
}

/* ============================================================
   📦 CARTES PRODUITS
   ============================================================ */
.product-card-hover {
    transition: all 0.3s ease;
}

.product-card-hover:hover {
    border-color: var(--livo-blue) !important;
    box-shadow: 0 10px 25px -5px rgba(17, 24, 39, 0.1) !important;
    transform: translateY(-2px);
}

/* ============================================================
   🖼️ GALERIE MODALE
   ============================================================ */
#modalGallerySlider {
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

#modalGallerySlider:active {
    cursor: grabbing;
}


/* Supprime la croix par défaut des champs search sur Chrome/Safari */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}