/* CSS Mobile Fixes Semplice - Charlie Racconta */

/* ===== FIX GENERALE MOBILE ===== */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== FIX HEADER ===== */
.charlie-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: white !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== FIX CONTAINER HEADER ===== */
.charlie-header .container {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ===== FIX ICONE NAVIGAZIONE ===== */
.flex.items-center.space-x-6 {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
}

/* ===== FIX MENU MOBILE ===== */
.charlie-header #mobileMenuToggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1001 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
}

/* Override per assicurare visibilità */
header #mobileMenuToggle,
.charlie-header button#mobileMenuToggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Regole globali per menu mobile (PC e mobile) */
.charlie-header #mobileMenuToggle,
header #mobileMenuToggle,
button#mobileMenuToggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1001 !important;
}

/* Regole globali per tutte le icone */
.charlie-header #darkModeToggle,
.charlie-header #accountToggle,
.charlie-header #cartToggle,
header #darkModeToggle,
header #accountToggle,
header #cartToggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1001 !important;
}

#mobileMenu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: white !important;
    z-index: 999 !important;
    padding-top: 80px !important;
    display: none !important;
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

#mobileMenu:not(.hidden) {
    display: block !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
}

#mobileMenu.hidden {
    display: none !important;
    transform: translateY(-100%) !important;
    opacity: 0 !important;
}

/* ===== FIX CARRELLO ===== */
#cart-dropdown {
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    z-index: 50 !important;
    width: 320px !important;
    background: white !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-top: 0.5rem !important;
}

/* ===== FIX DARK MODE ===== */
body.dark-mode {
    background-color: #1a202c !important;
    color: #ffffff !important;
}

body.dark-mode .text-gray-800 {
    color: #e2e8f0 !important;
}

body.dark-mode .text-gray-600 {
    color: #cbd5e0 !important;
}

body.dark-mode .bg-white {
    background-color: #2d3748 !important;
}

/* ===== FIX MAIN CONTENT ===== */
main {
    margin-top: 80px !important;
}

/* ===== FIX MOBILE SPECIFICO ===== */
@media (max-width: 768px) {
    .charlie-header .flex.items-center.space-x-6 {
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }
    
    #mobileMenuToggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Assicura che tutte le icone siano visibili */
    .charlie-header button,
    .charlie-header .relative {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1001 !important;
    }
    
    /* Icone specifiche sempre visibili */
    .charlie-header #darkModeToggle,
    .charlie-header #accountToggle,
    .charlie-header #cartToggle,
    .charlie-header #mobileMenuToggle,
    header #darkModeToggle,
    header #accountToggle,
    header #cartToggle,
    header #mobileMenuToggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1001 !important;
        min-width: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Override specifico per mobile menu toggle */
    .charlie-header button#mobileMenuToggle,
    header button#mobileMenuToggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1001 !important;
    }
}