/* RESET & VARIABILE */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #ffffff; --text: #333; --nav: #f8f9fa;
    --accent: #007bff; --border: #ddd; --sub-bg: #fff;
}
.dark-theme {
    --bg: #121212; --text: #eee; --nav: #1f1f1f;
    --accent: #3d5afe; --border: #333; --sub-bg: #252525;
}

html, body { max-width:1320px; margin:auto; height: 100%; width: 100%; overflow-x: hidden; }
body { 
    background: var(--bg); color: var(--text); 
    font-family: 'Segoe UI', sans-serif; display: flex; flex-direction: column;
	/*background-image: url('/PICTURES/background_pic.jpg'); /* Înlocuiește cu link-ul tău */
}

/* NAVBAR */
.navbar {
    background: var(--nav); border-bottom: 1px solid var(--border); 
    height: 70px; position: sticky; top: 0; z-index: 1000;
	flex-shrink: 0;
}
.nav-container { 
    max-width: 1200px; margin: 0 auto; height: 100%; 
    display: flex; justify-content: space-between; align-items: center; padding: 0 20px; 
}
.brand { font-size: 1.4rem; font-weight: bold; text-decoration: none; color: var(--accent); }

/* MENU PC */
.nav-content { display: flex; flex-grow: 1; justify-content: space-between; font-size: 1rem; align-items: center; margin-left: 40px; height: 100%; }
.nav-links { display: flex; list-style: none; gap: 5px; height: 100%; }
.nav-links > li { height: 100%; display: flex; align-items: center; position: relative; }
.nav-links a { text-decoration: none; color: var(--text); padding: 0 15px; font-weight: 500; height: 100%; display: flex; align-items: center; }

/* Arrow PC */
.has-sub > a::after {
    content: ''; display: inline-block; margin-left: 8px;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 5px solid var(--text); transition: 0.3s;
}

.submenu {
    display: none; position: absolute; top: 70px; left: 0; 
    background: var(--sub-bg); border: 1px solid var(--border);
    min-width: 200px; list-style: none; box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    padding: 10px 0;
}
.has-sub:hover .submenu { display: block; }
.submenu li a { padding: 12px 20px; width: 100%; display: block; }

/* NAV RIGHT */
.nav-right { display: flex; align-items: center; gap: 15px; }
.nav-right select { background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 8px 18px; border-radius: 5px; }
.btn-login { text-decoration: none; color: var(--text); border: 1px solid var(--accent); padding: 8px 18px; border-radius: 5px; }
.btn-reg { text-decoration: none; background: var(--accent); color: white !important; padding: 8px 18px; border-radius: 5px; }
.btn-login:hover {
    background-color: #0056b3;
}
.btn-reg:hover {
    background-color: #0056b3;
}



/* MOBILE (FIXED) */
.menu-toggle { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
.bar { width: 22px; height: 3px; background: var(--text); transition: 0.4s; }

@media (max-width: 670px) {
    .menu-toggle { display: flex; }
    
    .nav-content {
        display: none; 
        position: fixed; 
        top: 70px; 
        left: 0; 
        right: 0;
        background: var(--nav); 
        flex-direction: column; 
        z-index: 2000;
        padding: 0; 
        margin: 0; 
        height: auto; 
        max-height: calc(100vh - 70px); /* Previne ieșirea din ecran */
        overflow-y: auto; /* Permite scroll dacă meniul e lung */
        border-bottom: 1px solid var(--border);
    }
    
    .nav-content.active { display: flex; }
    
    .nav-links { flex-direction: column; width: 100%; height: auto; }
    
    .nav-links > li { 
        width: 100%; 
        border-bottom: 1px solid var(--border); 
        display: flex; 
        flex-direction: column; /* Stivuiește submeniul sub link-ul părinte */
    }
    
    .nav-links a { 
        justify-content: flex-start; /* Aliniere la stânga pentru lizibilitate */
        padding: 15px 25px; 
        width: 100%; 
    }

    /* SUBMENIU MOBIL - Ajustări esențiale */
    .has-sub .submenu { 
        display: none !important; 
        position: static; /* Scoate submeniul din flow-ul absolut */
        width: 100%; 
        background: rgba(0,0,0,0.03); /* Fundal ușor diferit pentru contrast */
        box-shadow: none; 
        border: none;
        padding: 0;
    }
    
    /* Afișare submeniu când clasa 'open-active' este prezentă */
    .has-sub.open-active > .submenu { 
        display: block !important; 
    }

    /* Indentare link-uri submeniu */
    .submenu li a { 
        padding-left: 45px !important; 
        font-size: 0.95rem;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    /* Rotație săgeată pe mobil */
    .has-sub.open-active > a::after {
        transform: rotate(180deg);
    }

    .nav-right { 
        flex-direction: column; 
        padding: 20px; 
        width: 100%; 
        align-items: center; 
        gap: 10px; 
    }
    
    .nav-right select, .btn-login, .btn-reg { 
        width: 100% !important; /* Lățime completă pe mobil */
        max-width: 300px;
        text-align: center; 
    }
}

main {
	flex: 1 0 auto; 
	padding: 20px 10px; 
	text-align: center; 
}

.div_transparent {
    /* Fundal alb cu transparență (ajustată la 10% pentru a lăsa border-ul să iasă în evidență) */
    background-color: rgba(255, 255, 255, 0.1);
    
    /* Border subțire și elegant */
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Umbra cerută, folosind culoarea #121212 */
    /* Parametri: x, y, blur, spread, culoare */
    box-shadow: 0 10px 30px rgba(18, 18, 18, 0.8); 
    
    /* Efect de glassmorphism (opțional, dar recomandat pentru fundaluri transparente) */
    backdrop-filter: blur(8px);
    
    /* Stiluri de bază pentru container */
    padding: 30px;
    border-radius: 15px;
    color: var(--text);
    max-width: 90%;
    margin: 20px auto;
}

/* Footer */
.footer { flex-shrink: 0; font-size: 0.8rem; padding: 10px; text-align: center; background: var(--nav); border-top: 1px solid var(--border); }