/* =========================================
   WooFlux Mobile Bar - Style Sheet v1.1.1 (Z-Index Fixed Final)
   ========================================= */

/* 1. VARIABILE DEFAULT (Se suprascriu din Admin) */
:root {
    --wf-accent: #ff4757; /* Culoarea principală */
    --wf-bg: #ffffff; /* Fundal Meniu */
    --wf-text: #666666; /* Text inactiv */
    --wf-text-active: #000000; /* Text activ (doar în Light Mode) */
    --wf-active-bg: rgba(0,0,0,0.05); /* Fundal buton activ */
}

/* 2. OVERLAY & MODAL */
#wooflux-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    z-index: 99001 !important; /* MODIFICAT: Peste etichete, dar SUB modulul Keepz (99998) */
    display: none; opacity: 0; transition: opacity 0.3s;
}

#wooflux-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85);
    width: 90%; max-width: 380px;
    background: var(--wf-bg); /* Se schimbă cu tema */
    color: var(--wf-text);
    border-radius: 24px;
    z-index: 99002 !important; /* MODIFICAT: Peste etichete, dar SUB modulul Keepz (99999) */
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
    display: none; opacity: 0; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    overflow: hidden;
}
.wf-modal-open { display: block !important; opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; }

.wf-head { 
    padding: 18px; display: flex; justify-content: space-between; align-items: center; 
    border-bottom: 1px solid rgba(0,0,0,0.05); font-weight: 800; 
    color: var(--wf-text);
}

#wf-close-modal { 
    background: rgba(0,0,0,0.05); border: none; border-radius: 50%; 
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; 
    color: var(--wf-text);
}

.wf-content { padding: 20px; text-align: center; }

/* Produse în Modal - Ajustat pentru 2 produse vizibile + scroll orizontal (spațiu mai bun) */
.wf-content ul.products { display: flex !important; gap: 12px; padding: 0 !important; margin: 0 !important; overflow-x: auto; flex-wrap: nowrap !important; scroll-snap-type: x mandatory; }
.wf-content ul.products li { width: calc(50% - 6px) !important; flex: 0 0 auto; list-style: none !important; margin: 0 !important; scroll-snap-align: start; }
.wf-content ul.products li img { border-radius: 12px; margin-bottom: 8px; }
.wf-content ul.products li h2 { font-size: 11px !important; line-height: 1.3; height: 2.6em; overflow: hidden; margin: 0; padding: 0; color: var(--wf-text); }
.wf-content ul.products li .price { color: var(--wf-accent); font-weight: bold; font-size: 12px; } 
/* OPTIMIZARE: Țintim doar butonul add_to_cart, pentru a nu ascunde alte butoane din temă */
.wf-content .add_to_cart_button { display: none !important; }

/* Dark Mode specific pentru elementele interne ale modalului */
#wooflux-modal.wf-dark-mode .wf-content ul.products li { background: rgba(255, 255, 255, 0.05); padding: 8px; border-radius: 14px; }
#wooflux-modal.wf-dark-mode .wf-content ul.products li h2 { color: #eeeeee !important; }

.wf-btn-view { 
    display: block; width: 100%; padding: 14px; 
    background: var(--wf-accent); color: #fff !important; 
    border-radius: 16px; font-weight: 700; margin-top: 18px; text-decoration: none; 
}

/* 3. MENIU MOBIL */
#wooflux-nav {
    position: fixed; bottom: 20px; left: 15px; right: 15px; height: 65px;
    background: var(--wf-bg); 
    border-radius: 20px; 
    z-index: 99000 !important; /* MODIFICAT: Urcat suficient cât să bată etichetele, dar mai mic decât Keepz (99999) */
    box-shadow: 0 10px 40px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s;
    padding-bottom: env(safe-area-inset-bottom);
}
.wf-hidden { transform: translateY(180%); opacity: 0; }
.wf-visible { transform: translateY(0); opacity: 1; }

/* FIX: Clasă specială pentru ascundere forțată când alte pop-up-uri sunt deschise */
#wooflux-nav.wf-force-hide { transform: translateY(180%) !important; opacity: 0 !important; pointer-events: none !important; }

.wf-container { display: flex; justify-content: space-around; align-items: center; height: 100%; padding: 0 6px; }

/* Butoane Meniu */
.wf-item { 
    display: flex; align-items: center; justify-content: center; 
    text-decoration: none !important; color: var(--wf-text) !important; 
    padding: 8px 12px; border-radius: 16px; transition: all 0.3s ease; max-width: 50px; 
}
.wf-item.wf-active { 
    max-width: 140px; 
    background: var(--wf-active-bg); 
    color: var(--wf-text) !important; 
    /* Nota: Textul activ preia culoarea setată în PHP (negru sau alb) prin variabila --wf-text */
}

.wf-label { font-size: 12px; font-weight: 700; margin-left: 0; opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; transition: all 0.3s ease; }
.wf-active .wf-label { margin-left: 8px; opacity: 1; max-width: 80px; }
.wf-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; }

/* Badge Coș */
.wf-badge {
    position: absolute; top: -6px; right: -8px;
    background: var(--wf-accent); color: #fff; font-size: 10px;
    min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--wf-bg); /* Bordura badge-ului ia culoarea meniului */
    font-weight: 800; padding: 0 2px; z-index: 2;
}

/* Trigger Promo */
#wf-promo-trigger {
    position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
    background: var(--wf-accent); 
    padding: 6px 16px; border-radius: 20px 20px 0 0;
    color: #fff; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; cursor: pointer;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
}
.wf-pulse { width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: wf-pulse 1.5s infinite; }
@keyframes wf-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(255,255,255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255, 0); } }

/* 4. MOD FULL WIDTH (App Style) */
#wooflux-nav.wf-full-width {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
}
/* Ajustăm trigger-ul pentru full width să nu arate ciudat */
#wooflux-nav.wf-full-width #wf-promo-trigger {
    border-radius: 12px 12px 0 0;
}

/* Ascunde pe Desktop */
@media (min-width: 769px) { #wooflux-nav, #wooflux-modal, #wooflux-overlay { display: none !important; } }