/* styles.css - Dezmembrari BMW Satu Mare */

/* Resetări de bază și Variabile */
:root {
    /* BMW M Performance Inspired Colors */
    --bmw-m-light-blue: #35AFFF;
    --bmw-m-medium-blue: #007bff;
    --bmw-m-dark-blue: #002B5A;
    --bmw-m-red: #F20000;
    --bmw-white: #FFFFFF;
    --bmw-black: #000000;

    /* Glassmorphism Colors */
    --glass-background-color: rgba(255, 255, 255, 0.1); /* Foarte subtil, aproape transparent */
    --glass-border-color: rgba(255, 255, 255, 0.2);     /* O bordură albă semi-transparentă pentru efect */

    /* Site Palette using M-inspired colors */
    --primary-color: var(--bmw-m-dark-blue);
    --secondary-color: var(--bmw-m-light-blue);
    --accent-color: var(--bmw-m-red);

    --text-color: var(--bmw-black);
    --light-text-color: var(--bmw-white);

    /* Old: --background-color-cards: rgba(255, 255, 255, 0.825); */
    /* New: Background pentru elementele de tip sticlă */
    --background-glass-element: rgba(255, 255, 255, 0.08); /* O bază mai transparentă pentru blur */

    --border-color: var(--bmw-m-light-blue); /* Rămâne pentru alte borduri */

    --font-primary: 'Open Sans', sans-serif;
    --font-secondary: 'Roboto', sans-serif;

    --container-width: 1140px;
    --border-radius: 8px;
    --header-height: 70px;
    --footer-height: 60px;

    --card-box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.8);
    --card-box-shadow-hover: 0px 12px 28px rgba(0, 0, 0, 0.7);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-primary);
    color: var(--text-color); 
    line-height: 1.7;
    overflow-x: hidden;
    padding-top: var(--header-height);

    background-image: url('bg.webp'); 
    background-attachment: fixed; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    min-height: 100vh; 
    background-color: #1c1c1c; 

    display: flex; 
    flex-direction: column; 
}

.content-area {
    flex-grow: 1; 
}


.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 15px; 
}

/* Header & Navigație Principală - Ajustări pentru logo */
.site-header {
    /* ... (stilurile existente) ... */
}
.header-container {
    /* ... (stilurile existente) ... */
}

.logo a.logo-link { /* Am adăugat clasa .logo-link pentru specificitate */
    font-size: 1.6rem; /* Ajustează dacă e necesar după adăugarea imaginii */
    font-weight: 700;
    color: var(--light-text-color);
    text-decoration: none;
    letter-spacing: 0.5px;
    display: flex; /* Pentru a alinia imaginea și textul pe aceeași linie */
    align-items: center; /* Aliniere verticală la centru */
}

.logo-image {
    height: 40px; /* Setează o înălțime potrivită pentru logo-ul tău */
    width: auto;   /* Lățimea se va ajusta automat pentru a păstra proporțiile */
    margin-right: 10px; /* Spațiu între logo și text */
    /* Poți adăuga și alte stiluri dacă e necesar, ex: border-radius */
}

/* Wrapper pentru conținutul principal al fiecărei secțiuni */
/* Wrapper pentru conținutul principal al fiecărei secțiuni */
.section .content-wrapper {
    background-color: var(--background-glass-element); /* Culoarea de bază semi-transparentă */
    backdrop-filter: blur(10px); /* Efectul de blur al fundalului */
    -webkit-backdrop-filter: blur(10px); /* Pentru compatibilitate Safari */
    border: 1px solid var(--glass-border-color); /* Bordură subtilă */
    padding: 40px 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.101);
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-width);
    width: 90%;
}
/* Primul content-wrapper să nu aibă margin-top dacă e direct după hero */
#despre.section .content-wrapper {
    margin-top: 0;
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--primary-color); /* Rămâne primary, dar asigură-te că este lizibil.
                                     Am putea adăuga un text-shadow subtil dacă e nevoie,
                                     dar să vedem cum arată prima dată. */
    margin-bottom: 0.75em;
    line-height: 1.3;
    padding: 5px 5px 5px 5px;
}
.section-title .highlight, .hero-content .highlight { color: var(--accent-color); } 
h1 { font-size: 2.7rem; margin-bottom: 0.3em; }
h2.section-title { 
    font-size: 2.3rem; 
    text-align: center; 
    margin-bottom: 1.2em; 
    position: relative;
    color: var(--primary-color); 
}
h2.section-title::after {
    content: ''; display: block; width: 80px; height: 3px;
    background-color: var(--accent-color); 
    margin: 15px auto 0;
    
}
h3 { font-size: 1.5rem; color: var(--primary-color); } 
p {
    margin-bottom: 1rem;
    color: var(--text-color); /* Rămâne text-color, care e negru. Vom vedea dacă e OK peste blur */
    padding: 5px 5px 5px 5px;
}
.section-intro {
    text-align: center; font-size: 1.1rem; color: var(--bmw-m-medium-blue); 
    max-width: 700px; margin: -1em auto 2.5em; 
}
a { color: var(--accent-color); text-decoration: none; transition: color 0.2s ease; } 
a:hover { color: var(--secondary-color); text-decoration: none; } 
img { max-width: 100%; height: auto; display: block; }

.section {
    padding: 20px 0; /* Redus padding-ul secțiunii, wrapper-ul are padding */
}
.section:last-of-type { padding-bottom: 20px; }

/* Specific pentru #home */
#home.section { 
    min-height: calc(100vh - var(--header-height)); 
    padding: 0; 
    background-color: transparent; 
    box-shadow: none; 
    color: var(--light-text-color); 
    display: flex; align-items: center; justify-content: center;
    position: relative; 
}
#home.section .content-wrapper { /* Asigură că hero nu ia stilul de gradient */
    background-image: none;
    background-color: transparent;
    box-shadow: none;
    padding: 20px; 
    width: 100%; 
    max-width: none; 
    margin-top: 0;
    margin-bottom: 0;
}
#home .hero-background { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Overlay negru puțin mai pronunțat ****************************** */
    border-radius: 15px;
    z-index: 0; 
}
#home .hero-content { position: relative; z-index: 1; text-align: center; }
#home.section h1, #home.section .subtitle {
    color: blue; 
    background-color: #e2e2e2c0;
    border-radius: 15px;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7); 
}

/* Header & Navigație Principală */
.site-header {
    background-color: var(--primary-color); 
    padding: 0; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.25); 
    position: fixed; 
    top: 0; left: 0; width: 100%; z-index: 1000;
    height: var(--header-height); display: flex; align-items: center;
}
.header-container { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.logo a { 
    font-size: 1.6rem; font-weight: 700; color: var(--light-text-color); 
    text-decoration: none; letter-spacing: 0.5px; 
}
.main-nav ul { list-style: none; display: flex; }
.main-nav li { margin-left: 25px; }
.main-nav a {
    font-family: var(--font-secondary); font-weight: 500; font-size: 1rem;
    color: var(--light-text-color); 
    text-decoration: none; padding: 10px 5px;
    position: relative; letter-spacing: 0.3px;
}
.main-nav a::after { 
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 0; height: 2px;
    background-color: var(--accent-color); 
    transition: width 0.3s ease-in-out;
}
.main-nav a:hover::after, .main-nav a.active-link::after { width: 100%; }
.main-nav a.active-link { color: var(--accent-color); } 
.mobile-nav-toggle { 
    display: none; background: none; border: none;
    font-size: 1.8rem; color: var(--light-text-color); 
    cursor: pointer;
}

/* Hero Section (specific content styling) */
.hero-content h1 { font-size: 3rem; margin-bottom: 0.5em; font-weight: 700; }
.hero-content .subtitle { font-size: 1.25rem; margin-bottom: 2em; max-width: 750px; margin-left: auto; margin-right: auto; font-weight: 300;}
.hero-buttons { margin-top: 1.5em; }
.hero-buttons .btn {
    margin: 0.5em 0.7em; padding: 14px 35px;
    border-radius: var(--border-radius); text-decoration: none;
    font-weight: 600; font-size: 1rem; letter-spacing: 0.5px;
    transition: all 0.3s ease; display: inline-block;
    border: 2px solid transparent; text-transform: uppercase;
}
/* Butoane generale (non-hero) */
.btn-primary { 
    background-color: var(--accent-color); 
    color: var(--light-text-color);
    border-color: var(--accent-color);
}
.btn-primary:hover {
    background-color: #0436ff; 
    border-color: #c00000;
    color: var(--light-text-color); transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.btn-whatsapp-hero { 
    background-color: #25D366; 
    color: var(--light-text-color);
    border-color: #25D366;
}
.btn-whatsapp-hero:hover {
    background-color: #025521; border-color: #1DA851;
    color: var(--light-text-color); transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.btn-whatsapp-hero i { margin-right: 10px; font-size: 1.1em; }


/* Card Styling */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
    margin-top: 30px;
}
.card {
    background-color: var(--background-glass-element); /* Culoarea de bază semi-transparentă */
    backdrop-filter: blur(8px); /* Efectul de blur, puțin mai mic decât la wrapper */
    -webkit-backdrop-filter: blur(8px); /* Pentru compatibilitate Safari */
    border: 1px solid var(--glass-border-color); /* Bordură subtilă */
    border-radius: var(--border-radius);
    box-shadow: var(--card-box-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.card:hover {
    transform: translateY(-6px); /* Puțin mai mult la hover */
    box-shadow: var(--card-box-shadow-hover); /* Umbră mai pronunțată la hover */
}

/* Container pentru imagine în card */
.card .card-image-container { 
    width: 100%;
    height: 200px; /* Înălțime fixă pentru imagini în carduri */
    overflow: hidden;
    /* margin-bottom: 15px; Eliminat, vom adăuga padding la content */
    /* border-radius: calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px) 0 0; Nu mai e necesar dacă .card are overflow:hidden */
    line-height: 0; /* Elimină spațiu sub imagine dacă e inline */
}
.card .card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    transition: transform 0.3s ease;
}
.card:hover .card-image-container img {
    transform: scale(1.05); /* Efect subtil de zoom la hover pe card */
}

/* Conținutul text al cardului (titlu, text, listă) */
.card .card-content {
    padding: 20px; /* Padding pentru conținutul de sub imagine */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Asigură că acest container umple spațiul disponibil */
}

.card-title {
    font-family: var(--font-secondary);
    font-size: 1.25rem; /* Puțin redus pentru a face loc imaginii */
    color: var(--accent-color); 
    margin-bottom: 10px; /* Redus margin-bottom */
}
.card-text { 
    font-size: 0.9rem; /* Redus puțin pentru a echilibra cu titlul */
    color: var(--text-color); 
    line-height: 1.6; 
    flex-grow: 1;
    margin-bottom: 10px; /* Asigură spațiu înainte de lista (dacă există) */
}
.card-text ul { list-style: none; padding-left: 0; margin-top: 10px;}
.card-text ul li { padding-left: 1.5em; position: relative; margin-bottom: 8px;}
.card-text ul li::before {
    content: '\f058'; 
    font-family: 'Font Awesome 6 Free'; font-weight: 900; 
    color: var(--primary-color); 
    position: absolute; left: 0; top: 2px; 
}

/* Stiluri specifice pentru cardurile FĂRĂ imagine (ex: cele din Despre Noi, Contact) */
.card.no-image .card-content { /* Dacă un card nu are imagine, padding-ul se aplică direct */
    padding: 25px;
}


/* Contact Details Card Specific */
.contact-details.card .card-title { 
    text-align: left; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 10px;
    font-size: 1.4rem; 
}
.contact-details p { font-size: 1.05rem; margin-bottom: 1em; display: flex; align-items: center;} 
.contact-details p i { margin-right: 12px; color: var(--primary-color); width: 20px; text-align: center; font-size: 1.1em;}


/* Layout pentru secțiunea Despre Noi */
.about-flex-container { display: flex; gap: 30px; flex-wrap: wrap; }
.about-text-content, .about-image-content { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap:30px;}
.about-text-content .card .card-content, /* Aplicăm padding-ul specific conținutului */
.about-image-content .card .card-content {
    padding: 25px;
}
.about-image-content .card { overflow: visible; /* Permite imaginii să iasă dacă e cazul, sau ajustează */ }

.about-image-content .image-container { 
    border-radius: var(--border-radius);
    overflow: hidden; 
    box-shadow: 0 6px 18px rgba(0,0,0,0.12); 
    line-height: 0; 
}
.about-image-content .image-container img { 
    border-radius: var(--border-radius); width: 100%;
}


.advantages-placeholder ul {
    list-style: none; padding: 25px;
    background-color: var(--background-glass-element); /* Culoarea de bază semi-transparentă */
    backdrop-filter: blur(8px); /* Efectul de blur */
    -webkit-backdrop-filter: blur(8px); /* Pentru compatibilitate Safari */
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border-color); /* Bordură subtilă */
    box-shadow: var(--card-box-shadow);
}
.advantages-placeholder li {
    margin-bottom: 0.8em; font-size: 1rem; /* Mărit puțin fontul și spațierea */
    padding-left: 1.8em; position: relative;
    color: var(--text-color); 
}
.advantages-placeholder li::before {
    content: '\f054'; 
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--accent-color); 
    position: absolute;
    left: 0; top: 3px; font-size: 0.9em; 
}
.advantages-placeholder li strong { color: var(--primary-color); } 


/* Buton WhatsApp Flotant */
.whatsapp-float {
    position: fixed; width: 57px; height: 57px;
    bottom: 35px; 
    right: 30px; background-color: #1fbb58;
    color: var(--light-text-color); border-radius: 50%;
    text-align: center; font-size: 28px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000; 
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.whatsapp-float:hover {
    background-color: #008230; transform: scale(1.1);
    text-decoration: none; color: var(--light-text-color);
}

/* Footer */
.site-footer {
    background-color: var(--primary-color); 
    color: var(--light-text-color); 
    padding: 15px 0; 
    text-align: center;
    font-size: 0.85rem; 
    width: 100%;
    height: auto; 
    min-height: var(--footer-height); 
    z-index: 999; 
    display: flex; align-items: center; justify-content: center;
}
.footer-content { 
    width: 100%; max-width: var(--container-width); 
    display: flex; flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: center; gap: 10px; 
}
.footer-info p { margin-bottom: 0; color: var(--secondary-color); font-size: 0.85rem; } 
.footer-nav { margin-top: 0; }
.footer-nav a {
    color: var(--secondary-color); 
    margin: 0 10px;
    font-size: 0.85rem; font-weight: 500;
}
.footer-nav a:hover { color: var(--accent-color); text-decoration: underline; } 

/* Media Queries */
@media (max-width: 992px) { /* Tablete */
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content .subtitle { font-size: 1.15rem; }
    .section .content-wrapper { padding: 30px 20px; width: 95%;} 
    .main-nav li { margin-left: 15px; } 
    .card-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px;} 
    .card .card-image-container { height: 180px; } /* Reducem înălțimea imaginii pe tabletă */
    .card-title { font-size: 1.2rem; }
    .card-text { font-size: 0.88rem; }
}

@media (max-width: 768px) { /* Mobil */
    body {
        background-image: url('bg-mobile.webp'); 
         
        padding-top: calc(var(--header-height) - 10px);
    }
    .site-header { 
        height: calc(var(--header-height) - 10px);
        background-color: var(--primary-color); 
    }
    .main-nav { 
        display: none; flex-direction: column;
        position: absolute; top: calc(var(--header-height) - 10px); 
        left: 0; width: 100%;
        background-color: var(--primary-color); 
        box-shadow: 0 3px 5px rgba(0,0,0,0.2);
        padding-bottom: 10px; 
        border-top: 1px solid var(--border-color); 
        z-index: 1100; 
    }
    .main-nav.active { display: flex; }
    .main-nav ul { flex-direction: column; width: 100%; gap: 0; }
    .main-nav li { margin-left: 0; width: 100%; text-align: left; }
    .main-nav a {
        padding: 12px 20px; display: block;
        width: 100%; 
        border-bottom: 1px solid rgba(255,255,255,0.1); 
        color: var(--light-text-color); 
    }
     .main-nav a:hover, .main-nav a.active-link {
        background-color: var(--accent-color); 
        color: var(--light-text-color);
    }
    .main-nav li:last-child a { border-bottom: none; }
    .main-nav a::after { display: none; } 
    .mobile-nav-toggle { display: block; color: var(--light-text-color); } 

    h1 { font-size: 1.8rem; } 
    .hero-content h1 { font-size: 2rem; } 
    .hero-content .subtitle { font-size: 1rem; }
    .hero-buttons { flex-direction: column; gap: 12px; align-items: center;}
    .hero-buttons .btn { width: 90%; max-width: 320px;}

    h2.section-title { font-size: 1.7rem; }
    .section-intro { font-size: 0.95rem; }
    .section .content-wrapper { padding: 25px 15px; width: 95%;} 
    
    .card-grid { grid-template-columns: 1fr; gap: 20px; } /* Un singur card pe rând */
    .card .card-image-container { height: 220px; } /* Mărim puțin imaginea când e un singur card */
    .card .card-content { padding: 15px; }
    .card-title { font-size: 1.15rem; }
    .card-text { font-size: 0.85rem; }


    .site-footer { 
        padding: 15px; 
        min-height: var(--footer-height); 
    }
    .footer-content { 
        flex-direction: column; gap: 15px; 
        justify-content: center; 
    }
    .footer-nav { display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .footer-nav a { margin: 0; font-size: 0.8rem; }
    .footer-info p { font-size: 0.8rem; text-align: center;}

    .whatsapp-float { bottom: 15px; right: 15px; width: 50px; height: 50px; font-size: 24px;} 
}

@media (max-width: 480px) { /* Mobil mic */
    body {
        font-size: 15px;
        background-image: url('bg-mobile.webp') !important;
        background-color: #ffffff; /* Fallback color */
    
    }


    /* Ajustare pentru logo pe mobil mic, dacă e necesar */
    .logo-image {
        height: 30px; /* O idee ar fi să micșorezi puțin logo-ul pe ecrane foarte mici */
        margin-right: 8px;
    }
    .logo a.logo-link {
        font-size: 1.2rem; /* Reducem și textul logo-ului puțin */
    }

    h1 { font-size: 1.6rem; }
    .hero-content h1 { font-size: 1.8rem; }
    .hero-content .subtitle { font-size: 0.9rem; line-height: 1.5; }
    .hero-buttons .btn { padding: 12px 25px; font-size: 0.9rem; }

    h2.section-title { font-size: 1.5rem; margin-bottom: 1em; }
    h2.section-title::after { width: 60px; height: 2px; margin-top: 10px;}
    
    .section .content-wrapper { padding: 20px 10px; width: calc(100% - 20px); /* Să nu atingă marginile */}
    .section-intro { font-size: 0.9rem; }

    .card .card-image-container { height: 190px; } /* Ajustare fină pentru imagini pe mobil mic */
    .card-title { font-size: 1.1rem; margin-bottom: 8px; }
    .card-text { font-size: 0.82rem; line-height: 1.55; }
    .card .card-content { padding: 12px; }


    .contact-details.card .card-content { padding: 20px 15px; }
    .contact-details p { font-size: 0.9rem; }
    .contact-details p i { font-size: 1em; }


    .whatsapp-float { bottom: 25px; right: 15px; width: 55px; height: 55px; font-size: 22px; z-index: 1000;} 
    .footer-content { gap: 10px; }
    .footer-nav a, .footer-info p { font-size: 0.75rem; }
}
@media (max-width: 360px) { /* Mobil mic */
    body {
        font-size: 15px;
        background-image: url('bg-mobile.webp') !important;
        background-color: #ffffff; /* Fallback color */
    
    }


    /* Ajustare pentru logo pe mobil mic, dacă e necesar */
    .logo-image {
        height: 30px; /* O idee ar fi să micșorezi puțin logo-ul pe ecrane foarte mici */
        margin-right: 8px;
    }
    .logo a.logo-link {
        font-size: 1.2rem; /* Reducem și textul logo-ului puțin */
    }

    h1 { font-size: 1.4rem; }
    .hero-content h1 { font-size: 1.6rem; }
    .hero-content .subtitle { font-size: 0.8rem; line-height: 1.3; }
    .hero-buttons .btn { padding: 10px 20px; font-size: 0.8rem; }

    h2.section-title { font-size: 1.3rem; margin-bottom: 1em; }
    h2.section-title::after { width: 50px; height: 2px; margin-top: 10px;}
    
    .section .content-wrapper { padding: 20px 10px; width: calc(100% - 20px); /* Să nu atingă marginile */}
    .section-intro { font-size: 0.8rem; }

    .card .card-image-container { height: 190px; } /* Ajustare fină pentru imagini pe mobil mic */
    .card-title { font-size: 1rem; margin-bottom: 8px; }
    .card-text { font-size: 0.82rem; line-height: 1.35; }
    .card .card-content { padding: 12px; }


    .contact-details.card .card-content { padding: 20px 15px; }
    .contact-details p { font-size: 0.8rem; }
    .contact-details p i { font-size: 0.9em; }


    .whatsapp-float { bottom: 25px; right: 15px; width: 50px; height: 50px; font-size: 22px; z-index: 1000;} 
    .footer-content { gap: 10px; }
    .footer-nav a, .footer-info p { font-size: 0.75rem; }
}