/* ============================================================================
   NAVBAR & FOOTER - Transparent cu Mov Subtil
   ============================================================================
   Adaugă acest CSS în background.css SAU creează navbar-footer.css
   ============================================================================ */

/* === NAVBAR TRANSPARENT CU GRADIENT === */
.navbar,
nav,
header nav {
    background: rgba(10, 10, 10, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(246, 11, 139, 0.1);
    position: relative;
    overflow: hidden;
}

/* Gradient overlay mov subtil pentru navbar */
.navbar::before,
nav::before,
header nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(246, 11, 139, 0.05) 0%,
        rgba(139, 11, 246, 0.03) 50%,
        rgba(246, 11, 139, 0.05) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Asigură că conținutul navbar e deasupra overlay-ului */
.navbar > *,
nav > * {
    position: relative;
    z-index: 1;
}

/* Glow effect pe hover pentru navbar links */
.navbar a:hover,
nav a:hover {
    color: #f60b8b;
    text-shadow: 0 0 10px rgba(246, 11, 139, 0.3);
    transition: all 0.3s ease;
}

/* === FOOTER TRANSPARENT CU GRADIENT === */
footer {
    background: rgba(10, 10, 10, 0.9) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(246, 11, 139, 0.1);
    position: relative;
    overflow: hidden;
}

/* Gradient overlay mov subtil pentru footer */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(139, 11, 246, 0.05) 0%,
        rgba(246, 11, 139, 0.03) 50%,
        rgba(139, 11, 246, 0.05) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Asigură că conținutul footer e deasupra overlay-ului */
footer > *,
footer .container,
footer .footer-content {
    position: relative;
    z-index: 1;
}

/* Footer links hover */
footer a:hover {
    color: #f60b8b;
    text-shadow: 0 0 8px rgba(246, 11, 139, 0.4);
    transition: all 0.3s ease;
}

/* === VARIANTE ALTERNATIVE === */

/* VARIANTA 1: Mai Transparent (Glassmorphism) */
/*
.navbar,
nav {
    background: rgba(10, 10, 10, 0.6) !important;
    backdrop-filter: blur(30px);
    border-bottom: 1px solid rgba(246, 11, 139, 0.15);
}

footer {
    background: rgba(10, 10, 10, 0.7) !important;
    backdrop-filter: blur(30px);
    border-top: 1px solid rgba(246, 11, 139, 0.15);
}
*/

/* VARIANTA 2: Gradient Direct (Fără Overlay) */
/*
.navbar,
nav {
    background: linear-gradient(
        135deg,
        rgba(10, 10, 10, 0.95) 0%,
        rgba(26, 10, 31, 0.95) 50%,
        rgba(10, 10, 10, 0.95) 100%
    ) !important;
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(246, 11, 139, 0.2);
}

footer {
    background: linear-gradient(
        180deg,
        rgba(26, 10, 31, 0.95) 0%,
        rgba(10, 10, 10, 0.98) 100%
    ) !important;
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(246, 11, 139, 0.2);
}
*/

/* VARIANTA 3: Foarte Subtil (Aproape Invizibil) */
/*
.navbar::before,
nav::before {
    background: linear-gradient(
        135deg,
        rgba(246, 11, 139, 0.02) 0%,
        rgba(139, 11, 246, 0.01) 100%
    );
}

footer::before {
    background: linear-gradient(
        180deg,
        rgba(139, 11, 246, 0.02) 0%,
        rgba(246, 11, 139, 0.01) 100%
    );
}
*/

/* === GLOW EFFECT PE BORDER === */
.navbar {
    box-shadow: 0 1px 20px rgba(246, 11, 139, 0.1);
}

footer {
    box-shadow: 0 -1px 20px rgba(246, 11, 139, 0.1);
}

/* === ANIMATED GLOW (OPȚIONAL) === */
@keyframes navbarGlow {
    0%, 100% {
        box-shadow: 0 1px 20px rgba(246, 11, 139, 0.1);
    }
    50% {
        box-shadow: 0 1px 30px rgba(246, 11, 139, 0.15);
    }
}

@keyframes footerGlow {
    0%, 100% {
        box-shadow: 0 -1px 20px rgba(246, 11, 139, 0.1);
    }
    50% {
        box-shadow: 0 -1px 30px rgba(246, 11, 139, 0.15);
    }
}

/* Uncomment pentru animated glow */
/*
.navbar {
    animation: navbarGlow 4s ease-in-out infinite;
}

footer {
    animation: footerGlow 4s ease-in-out infinite;
}
*/

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .navbar,
    nav {
        backdrop-filter: blur(15px);
    }
    
    footer {
        backdrop-filter: blur(15px);
    }
}

/* === SCROLLED STATE (Dacă navbar e sticky) === */
.navbar.scrolled,
nav.scrolled {
    background: rgba(10, 10, 10, 0.95) !important;
    box-shadow: 0 2px 30px rgba(246, 11, 139, 0.15);
}