/* 🎯 HERO BANNER OVERLAY - FIX PESTE BANNER, NU SE MIȘCĂ LA SCROLL
   ================================================================== */

/* CONTAINER PRINCIPAL - ID UNIC pentru a evita conflictele */
#hero-banner-overlay {
    /* POZIȚIONARE ABSOLUTĂ față de hero banner */
    position: absolute !important;
    z-index: 9998 !important; /* Sub overlay-ul principal dar peste banner */
    
    /* ACOPERIRE EXACTĂ HERO BANNER */
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important; /* Va fi calculată dinamic să coincidă cu hero banner */
    
    /* VIZIBILITATE INIȚIALĂ */
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    
    /* ANIMAȚII SMOOTH */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(-10px) !important;
    
    /* STILIZARE */
    background: rgba(255, 255, 255, 0.98) !important;
    border: 2px solid #2034ad !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    
    /* CONȚINUT - SCROLL INTELIGENT */
    padding: 30px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important; /* PREVINE SCROLL CHAINING CÂND NU E NECESAR */
    font-family: 'Poppins', sans-serif !important;
    
    /* PREVENT INTERACTION CÂND HIDDEN */
    pointer-events: none !important;
}

/* STARE ACTIVĂ - AFIȘAT */
#hero-banner-overlay.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* STARE CÂND NU ARE SCROLL INTERN - PERMITE SCROLL PAGINA */
#hero-banner-overlay.no-internal-scroll {
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
}

/* ====================================================================
   📱 RESPONSIVE BEHAVIOR - CALCULAT DINAMIC VIA JAVASCRIPT
   ==================================================================== */

/* 📞 MOBILE/TABLET - HIDDEN */
@media screen and (max-width: 767px) {
    #hero-banner-overlay {
        display: none !important;
    }
}

/* FALLBACK HEIGHTS - În caz că JS nu funcționează */
@media screen and (min-width: 768px) {
    #hero-banner-overlay {
        min-height: 400px !important;
        max-height: 800px !important;
    }
}

/* ====================================================================
   🎨 CONȚINUT OVERLAY
   ==================================================================== */

/* HEADER OVERLAY */
.hero-overlay-header {
    border-bottom: 2px solid #e0e7ff !important;
    padding-bottom: 20px !important;
    margin-bottom: 25px !important;
    text-align: center !important;
}

.hero-overlay-title {
    color: #2034ad !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
}

.hero-overlay-subtitle {
    color: #6b7280 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* CONȚINUT PRINCIPAL */
.hero-overlay-content {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    height: auto !important;
    max-height: calc(100% - 120px) !important;
    overflow-y: auto !important;
}

/* CARDURI CATEGORIE */
.hero-category-card {
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%) !important;
    border: 1px solid #e0e7ff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.hero-category-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #2034ad 0%, #4f46e5 100%) !important;
    transform: scaleX(0) !important;
    transition: transform 0.3s ease !important;
}

.hero-category-card:hover::before {
    transform: scaleX(1) !important;
}

.hero-category-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(32, 52, 173, 0.2) !important;
    border-color: #2034ad !important;
}

.hero-category-title {
    color: #2034ad !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    margin: 0 0 15px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e0e7ff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.hero-category-icon {
    font-size: 20px !important;
    color: #4f46e5 !important;
}

.hero-category-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hero-category-item {
    margin-bottom: 8px !important;
}

.hero-category-link {
    color: #4a5568 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    padding: 8px 0 !important;
    display: block !important;
    transition: all 0.2s ease !important;
    border-left: 2px solid transparent !important;
    padding-left: 0 !important;
}

.hero-category-link:hover {
    color: #2034ad !important;
    font-weight: 500 !important;
    padding-left: 12px !important;
    border-left-color: #2034ad !important;
    text-decoration: none !important;
}

/* ====================================================================
   🎯 BUTON ÎNCHIDERE
   ==================================================================== */

.hero-overlay-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 32px !important;
    height: 32px !important;
    background: #ef4444 !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}

.hero-overlay-close:hover {
    background: #dc2626 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

/* ====================================================================
   🔧 SCROLLBAR CUSTOM
   ==================================================================== */

#hero-banner-overlay::-webkit-scrollbar,
.hero-overlay-content::-webkit-scrollbar {
    width: 8px !important;
}

#hero-banner-overlay::-webkit-scrollbar-track,
.hero-overlay-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

#hero-banner-overlay::-webkit-scrollbar-thumb,
.hero-overlay-content::-webkit-scrollbar-thumb {
    background: rgba(32, 52, 173, 0.3) !important;
    border-radius: 4px !important;
}

#hero-banner-overlay::-webkit-scrollbar-thumb:hover,
.hero-overlay-content::-webkit-scrollbar-thumb:hover {
    background: rgba(32, 52, 173, 0.5) !important;
}

/* ====================================================================
   🎨 ANIMAȚII SPECIALE
   ==================================================================== */

/* FADE IN CARDS */
.hero-category-card {
    animation: fadeInUp 0.5s ease-out forwards !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

.hero-category-card:nth-child(1) { animation-delay: 0.1s !important; }
.hero-category-card:nth-child(2) { animation-delay: 0.2s !important; }
.hero-category-card:nth-child(3) { animation-delay: 0.3s !important; }
.hero-category-card:nth-child(4) { animation-delay: 0.4s !important; }
.hero-category-card:nth-child(5) { animation-delay: 0.5s !important; }
.hero-category-card:nth-child(6) { animation-delay: 0.6s !important; }

@keyframes fadeInUp {
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ====================================================================
   🎯 UTILITĂȚI
   ==================================================================== */

/* PREVENT SCROLL BEHIND OVERLAY */
body.hero-overlay-active {
    overflow: hidden !important;
}

/* ACCESSIBILITY */
#hero-banner-overlay[aria-hidden="true"] {
    display: none !important;
}

#hero-banner-overlay:focus-within {
    outline: 2px solid #2034ad !important;
    outline-offset: 2px !important;
}

/* PRINT */
@media print {
    #hero-banner-overlay {
        display: none !important;
    }
}