/* =================================================================== */
/*             1. CONFIGURARE GENERALĂ ȘI VARIABILE                    */
/* =================================================================== */
/* 
    CE FACE ACEASTĂ SECȚIUNE:
    - :root: Definește variabile globale (culori, dimensiuni) pentru a fi refolosite în tot documentul. 
      Acest lucru asigură consistența și facilitează modificările viitoare.
    - body: Resetează o setare globală (padding-top) specific pentru paginile de articol,
      permițând imaginii principale să se alinieze perfect sub navbar.
*/

:root {
    --color-blob-1: rgba(255, 90, 95, 0.15);
    --color-blob-2: rgba(247, 183, 51, 0.15);
    --article-max-width: 800px;
    --article-padding: clamp(30px, 5vw, 60px);
}


/* =================================================================== */
/*              2. EFECTE VIZUALE DE FUNDAL (BLOBS)                    */
/* =================================================================== */
/* 
    CE FACE ACEASTĂ SECȚIUNE:
    - .article-page-wrapper: Creează un container principal pentru toată pagina care permite
      poziționarea elementelor decorative de fundal.
    - .article-page-wrapper::before, ::after: Generează două "pete" de culoare (blobs) animate
      care se mișcă lent în spatele conținutului, creând o atmosferă dinamică.
    - @keyframes: Definește animația de mișcare pentru fiecare blob.
*/

.article-page-wrapper {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    
}
.article-page-wrapper::before,
.article-page-wrapper::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(80px);
    opacity: 0.8;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
.article-page-wrapper::before {
    width: 400px; 
    height: 400px;
    background: var(--color-blob-1);
    top: -100px; 
    left: -150px;
    animation-name: moveBlob1;
}
.article-page-wrapper::after {
    width: 500px; 
    height: 500px;
    background: var(--color-blob-2);
    bottom: -150px; 
    right: -200px;
    animation-name: moveBlob2;
    animation-duration: 25s;
}
@keyframes moveBlob1 { to { transform: translate(100px, 150px) scale(1.1); } }
@keyframes moveBlob2 { to { transform: translate(-150px, -100px) scale(0.9); } }

/* =================================================================== */
/*        3. LAYOUT PRINCIPAL: IMAGINE HERO & CONTAINER ARTICOL        */
/* =================================================================== */
/* 
    CE FACE ACEASTĂ SECȚIUNE:
    - .article-hero-image: Stilizează imaginea mare de la începutul articolului. O face să ocupe
      toată lățimea și îi dă un efect de parallax (background-attachment: fixed).
    - .article-container: Creează "cardul" principal al articolului, centrat, cu fundal 
      semi-transparent și un efect de "plutire" peste imaginea hero (margin-top: -120px).
*/

.article-hero-image {
    width: 100%;
    height: 50vh;
    min-height: 300px;
    max-height: 500px;
    background-image: url('../images/coduri.jpg'); 
    background-size: cover;
    background-position: center 30%;
    background-attachment: fixed; 
}
.article-container {
    max-width: var(--article-max-width);
    margin: -120px auto 0 auto;
    position: relative;
    padding: var(--article-padding);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-large);
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}

/* =================================================================== */
/*                  4. TIPOGRAFIE ȘI STILURI DE TEXT                   */
/* =================================================================== */
/* 
    CE FACE ACEASTĂ SECȚIUNE:
    - h1, h2, h3, p, li: Stabilește stilurile de bază pentru tot textul din articol.
    - .article-header: Creează blocul de antet distinct, cu fundal și umbre interioare.
    - .article-header h1: Stilizează titlul principal pentru impact maxim.
    - .article-meta: Stilizează data publicării.
    - .lead: Creează un paragraf introductiv, cu un font mai mare și mai aerisit.
    - .pull-quote, .highlight-*: Definește stiluri speciale pentru a evidenția anumite
      fragmente de text (citate de impact sau hașură colorată).
*/

/* Stiluri generale pentru text */
.article-container h1, .article-container h2, .article-container h3 {
    color: var(--color-deep-teal);
    line-height: 1.3;
}
.article-container p, .article-container li {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--text-dark);
}

/* Antetul articolului */
.article-header {
    margin: calc(var(--article-padding) * -1) calc(var(--article-padding) * -1) 40px;
    padding: var(--article-padding);
    background-color: var(--color-light-blue-grey);
    text-align: center;
    border-bottom: 1px solid var(--color-light-grey);
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
    box-shadow: inset 7px 0 9px -7px rgba(0, 0, 0, 0.08), 
                inset -7px 0 9px -7px rgba(0, 0, 0, 0.08);
}
.article-header h1 {
    font-size: clamp(2.2em, 5vw, 3.2em);
    font-weight: 800;
    line-height: 1.15; 
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
}
.article-meta {
    color: var(--text-light);
    font-style: italic;
    font-size: 0.95em;
}

/* Paragraful introductiv */
.lead {
    font-size: 1.25em;
    font-weight: 300;
    color: var(--color-deep-teal);
    margin-bottom: 40px;
}

/* Stiluri pentru evidențierea textului */
.pull-quote {
    margin: 40px auto;
    padding: 25px;
    max-width: 90%;
    border-left: 5px solid var(--color-coral-red);
    background-color: var(--color-light-blue-grey);
    font-size: 1.3em;
    font-style: italic; 
    line-height: 1.6;
    color: var(--color-deep-teal);
    border-radius: 0 var(--border-radius-soft) var(--border-radius-soft) 0;
}
.highlight-saffron {
    background-color: rgba(247, 183, 51, 0.25);
    padding: 2px 6px;
    border-radius: 4px;
}
.highlight-coral {
    background-color: rgba(255, 90, 95, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
}

.highlight-teal {
    background-color: rgba(0, 160, 146, 0.2); /* Folosește culoarea --color-teal-vibrant cu transparență */
    padding: 2px 6px;
    border-radius: 4px;
}

/* Listă informativă simplă */
.info-list {
  list-style-type: disc; /* Puncte normale */
  padding-left: 20px;
  margin-bottom: 20px;
}

/* Listă cu bife verzi */
.creative-positive-results {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.creative-positive-results li {
  padding-left: 35px;
  position: relative;
  margin-bottom: 12px;
  font-size: 1.05em;
}

.creative-positive-results li::before {
  content: '\f00c'; /* Codul pentru bifa din Font Awesome */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: #28a745; /* Verde */
  background-color: rgba(40, 167, 69, 0.1);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
}

/* Listă cu X roșu */
.creative-negative-results {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.creative-negative-results li {
  padding-left: 35px;
  position: relative;
  margin-bottom: 12px;
  font-size: 1.05em;
}

.creative-negative-results li::before {
  content: '\f00d'; /* Codul pentru X din Font Awesome */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: #dc3545; /* Roșu */
  background-color: rgba(220, 53, 69, 0.1);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
}

/* Stil pentru linkurile din header-ul articolului */
.article-links {
    margin-top: 15px;
    display: flex;
    gap: 20px; /* Spațiu între linkuri */
    justify-content: flex-start; /* Aliniere la stânga */
    flex-wrap: wrap;
}
.article-links a {
    text-decoration: none;
    font-weight: 600;
    color: #007bff;
    transition: color 0.3s;
}
.article-links a:hover {
    color: #0056b3;
}
.article-links a .fas {
    margin-right: 8px;
}

/* =================================================================== */
/*                  5. COMPONENTE SPECIFICE ARTICOLULUI                */
/* =================================================================== */
/* 
    CE FACE ACEASTĂ SECȚIUNE:
    Definește stilul pentru toate blocurile de conținut personalizate din interiorul articolului:
    - Secțiunea de Explicare a Codurilor: Carduri cu antet colorat și galerie internă.
    - Secțiunea de Detalii Ambalaje: Layout lat, pe două coloane, cu mini-galerii.
    - Imagini & Galerii: Stiluri pentru imaginile care ocupă toată lățimea sau care fac parte
      din diverse tipuri de grile.
*/

/* ----- 5.1. SECȚIUNEA PENTRU EXPLICAREA CODURILOR DE OUĂ ----- */
.code-explanation-item {
    margin-bottom: 40px;
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-subtle);
    overflow: hidden;
}
.code-explanation-item.code-0-item { border-top: 5px solid var(--color-teal-vibrant); }
.code-explanation-item.code-1-item { border-top: 5px solid var(--color-saffron); }
.code-explanation-item.code-2-item { border-top: 5px solid var(--color-coral-red); }
.code-explanation-item.code-3-item { border-top: 5px solid var(--color-blood-red); }

.code-explanation-item .code-header {
    padding: 20px 25px;
}
.code-explanation-item.code-0-item .code-header { background-color: var(--color-teal-vibrant); }
.code-explanation-item.code-1-item .code-header { background-color: var(--color-saffron); }
.code-explanation-item.code-2-item .code-header { background-color: var(--color-coral-red); }
.code-explanation-item.code-3-item .code-header { background-color: var(--color-blood-red); }

.code-explanation-item .code-header h3 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 700;
    color: var(--color-white) !important;
}

.code-explanation-item .code-content {
    padding: 25px;
}
.code-explanation-item .code-content p {
    margin-bottom: 25px;
}

/* ----- 5.2. SECȚIUNEA LATĂ PENTRU DETALII AMBALAJE ----- */
.packaging-details-section {
    padding: 60px 0;
    background-color: var(--color-light-blue-grey);
}
.packaging-details-section .wide-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
.packaging-details-section h2 {
    text-align: center;
    font-size: clamp(2.2em, 5vw, 3em);
    font-weight: 800;
    color: var(--color-deep-teal);
    margin-bottom: 60px;
    position: relative;
    padding-bottom: 20px;
}
.packaging-details-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background-color: var(--color-coral-red);
    border-radius: 2px;
}
.detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--color-light-grey);
}
.detail-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.detail-text h3 {
    font-size: 1.8em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
}



/* Stil pentru lista cu rezultate pozitive (sondaj) */
.creative-positive-results {
    list-style: none;
    padding-left: 0;
    margin: 40px 0;
}
.creative-positive-results li {
    position: relative;
    padding-left: 3.5rem;
    margin-bottom: 20px;
    font-size: 1.1em;
    color: var(--text-dark);
}
.creative-positive-results li::before {
    content: '✔';
    position: absolute;
    left: 0; top: 0;
    width: 2.5rem; height: 2.5rem;
    background: var(--color-teal-vibrant);
    color: var(--color-white);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
}

/* =================================================================== */
/*             6. COMPONENTE REUTILIZABILE (SEPARATOR)       */
/* =================================================================== */
/* 
    CE FACE ACEASTĂ SECȚIUNE:
    - .section-divider: O linie orizontală fină pentru a separa vizual secțiunile.
*/

.section-divider {
    height: 1px;
    background-color: var(--color-light-grey);
    margin: 60px auto;
    border: none;
    width: 80%;
}



/* =================================================================== */
/*             8. SEPARATOR VIZUAL ELEGANT (ARC SUBTIL)                */
/* =================================================================== */

.section-separator-wrapper {
    position: relative;
    background-color: transparent; 
}

.section-separator-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.section-separator-wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    /* MODIFICARE: Am redus drastic înălțimea pentru subtilitate */
    height: 80px; 
}

.section-separator-wave .shape-fill {
    fill: #f5f5f5; /* Culoarea secțiunii de știri (--color-light-grey) */
}

/* Ajustare pentru secțiunea de știri */
.news-section.separated {
    /* MODIFICARE: Am redus padding-ul pentru a se potrivi cu noul separator */
    padding-top: 80px; 
    background-color: var(--color-light-grey);
}

/* Pe mobil, separatorul devine și mai mic */
@media (max-width: 768px) {
    .section-separator-wave svg {
        height: 50px;
    }
    .news-section.separated {
        padding-top: 50px;
    }
}

/* =================================================================== */
/*                  7. STILURI PENTRU MOBIL (RESPONSIVE)               */
/* =================================================================== */
/* 
    CE FACE ACEASTĂ SECȚIUNE:
    - @media (max-width: 768px): Suprascrie stilurile de mai sus DOAR pe ecranele
      mai mici de 768px (telefoane, tablete în mod portret). Transformă layout-urile
      cu mai multe coloane în layout-uri cu o singură coloană, ajustează dimensiunile
      fonturilor și imaginilor pentru a se potrivi ecranului mic.
*/

@media (max-width: 768px) {
    /* Ajustări pentru layout-ul principal */
    .article-hero-image {
        height: 30vh;
        min-height: 200px;
        background-attachment: scroll;
    }
    .article-container {
        margin-top: -60px;
    }
    .article-page-wrapper::before, .article-page-wrapper::after {
        filter: blur(50px);
    }
    
    /* Ajustări pentru text */
    .article-header h1 {
        font-size: 1.9em;
        line-height: 1.2;
    }
    .code-explanation-item .code-header h3 {
        font-size: 1.6em;
    }
    .packaging-details-section h2 {
        line-height: 1.2;
    }
    
    /* Ajustări pentru galerii și layout-uri cu coloane */
    .code-gallery-grid {
        grid-template-columns: 1fr;
    }
    .code-gallery-item img {
        height: 220px;
    }
    .detail-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


/* ================================================= */
/*          STILURI NOI PENTRU CASETE INFORMATIVE    */
/*         (DE ADĂUGAT LA FINALUL FIȘIERULUI)        */
/* ================================================= */

/* Casetă pentru linkurile către rapoarte */
.report-links-box {
    background-color: var(--color-light-blue-grey);
    border-left: 5px solid var(--color-teal-vibrant);
    padding: 25px 30px;
    margin: 40px 0;
    border-radius: var(--border-radius-soft);
}
.report-links-box h4 {
    margin-top: 0;
    color: var(--color-deep-teal);
}
.report-links-box ul {
    list-style: none;
    padding: 0;
}
.report-links-box a {
    font-weight: 600;
    color: var(--color-teal-vibrant);
    text-decoration: none;
}
.report-links-box a:hover {
    text-decoration: underline;
}

/* Casetă pentru statistici de impact */
.stat-highlight-box {
    background-color: rgba(247, 183, 51, 0.1);
    border: 2px dashed var(--color-saffron);
    padding: 30px;
    margin: 40px 0;
    text-align: center;
    border-radius: var(--border-radius-large);
}
.stat-highlight-box .stat-number {
    font-size: 4em;
    font-weight: 800;
    color: var(--color-saffron);
    display: block;
    line-height: 1;
}
.stat-highlight-box .stat-text {
    font-size: 1.1em;
    color: var(--text-dark);
    max-width: 600px;
    margin: 10px auto 0 auto;
}


/* ================================================= */
/*          STILURI NOI PENTRU ARTICOLUL "10 LUCRURI" */
/* ================================================= */

/* NOU: Stil pentru evidențierea cu verde */
.highlight-green {
    background-color: rgba(40, 167, 69, 0.15); /* Verde cu transparență */
    padding: 2px 6px;
    border-radius: 4px;
}

/* NOU: Stil pentru a formata lista de fapte ca niște carduri */
.fact-list {
    list-style: none;
    padding-left: 0;
    counter-reset: fact-counter; /* Inițializează un contor */
}
.fact-list li {
    position: relative;
    padding-left: 60px; /* Lasă spațiu pentru numărul mare */
    margin-bottom: 30px;
    font-size: 1.1em;
}

/* NOU: Stil pentru numărul mare din stânga */
.fact-list li::before {
    counter-increment: fact-counter; /* Incrementează contorul */
    content: counter(fact-counter); /* Afișează valoarea contorului */
    position: absolute;
    left: 0;
    top: -5px;
    font-size: 3em;
    font-weight: 800;
    color: var(--color-light-teal); /* O culoare de fundal subtilă */
    line-height: 1;
}


/* ================================================= */
/*          STIL PENTRU CARDUL FINAL DE ACȚIUNE      */
/* ================================================= */

.article-cta-box {
    background-color: var(--color-light-blue-grey); /* Același fundal ca la antet, pentru consistență */
    padding: 30px 40px;
    margin-top: 50px; /* Spațiu generos deasupra */
    border-radius: var(--border-radius-large);
    text-align: center; /* Centrează tot conținutul */
    
    /* Accentul vizual care atrage atenția */
    border-top: 4px solid var(--color-coral-red); 
}

/* Stilul pentru textul din interiorul cardului */
.article-cta-box p {
    font-size: 1.2em; /* Text mai mare */
    font-weight: 600; /* Puțin mai bold */
    color: var(--color-deep-teal); /* Culoare mai închisă pentru contrast */
    line-height: 1.6;
    max-width: 600px; /* Limitează lățimea pe ecrane mari */
    margin: 0 auto 25px auto; /* Centrează și adaugă spațiu sub el */
}

/* Stilul pentru butonul din interiorul cardului */
.article-cta-box .btn-primary {
    /* Butonul preia stilurile, nu necesită modificări majore */
}

/* ================================================= */
/*          STIL PENTRU CARDUL DE DONAȚIE DIN ARTICOL */
/* ================================================= */

.donation-cta-box {
    background-color: var(--color-light-blue-grey);
    padding: 30px 40px;
    margin-top: 50px;
    border-radius: var(--border-radius-large);
    text-align: center;
    border-top: 4px solid var(--color-teal-vibrant); /* Accent de culoare teal */
}
.donation-cta-box h4 {
    margin-top: 0;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color-deep-teal);
}
.donation-cta-box p {
    font-size: 1.1em;
    color: var(--text-dark);
    max-width: 600px;
    margin: 15px auto 25px auto;
}

/* ================================================= */
/*          STIL NOU PENTRU CITATUL PREȘEDINTELUI    */
/* ================================================= */

.president-quote-box {
    display: flex;
    align-items: center;
    gap: 30px;
    
    /* MODIFICAT: Fundal galben-saffron, foarte deschis */
    background-color: rgba(247, 183, 51, 0.1);
    
    padding: 30px;
    margin: 40px 0;
    border-radius: var(--border-radius-large);
    
    /* MODIFICAT: Dunga de pe margine este acum galben-saffron */
    border-left: 5px solid var(--color-saffron);
}

/* Stil pentru imaginea de profil */
.president-quote-box .profile-image {
    flex-shrink: 0; /* Previne micșorarea imaginii */
    width: 100px;
    height: 100px;
    border-radius: 50%; /* O face perfect rotundă */
    object-fit: cover; /* Asigură că imaginea umple cercul fără a se deforma */
    border: 3px solid var(--color-white);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Container pentru textul citatului */
.president-quote-box .quote-text {
    flex-grow: 1; /* Ocupă spațiul rămas */
}

/* Stil pentru textul citatului (paragraful) */
.president-quote-box .quote-text p {
    font-size: 1.2em;
    font-style: italic;
    color: var(--color-deep-teal);
    line-height: 1.6;
    margin: 0 0 15px 0; /* Elimină marginea de jos implicită și adaugă una nouă */
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-light-teal); /* O linie fină de separare */
}

/* Stil pentru numele și funcția */
.president-quote-box .quote-text strong {
    font-size: 1.1em;
    font-style: normal;
    font-weight: 700;
    color: var(--text-dark);
}

/* Adaptare pentru mobil */
@media (max-width: 768px) {
    .president-quote-box {
        flex-direction: column; /* Elementele trec unul sub altul */
        text-align: center; /* Centrează textul */
    }
}


/* ================================================= */
/*          STIL NOU PENTRU LISTE CU STATUS          */
/* ================================================= */

/* Clasa principală pentru listă, care elimină stilurile default */
.status-list {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

/* Stil comun pentru fiecare element din listă */
.status-list li {
    position: relative;
    padding-left: 35px; /* Lasă spațiu pentru bifă */
    margin-bottom: 15px;
    font-size: 1.1em;
}

/* Stilul comun pentru BIFĂ (pseudo-elementul ::before) */
.status-list li::before {
    content: '\f00c'; /* Codul pentru bifa din Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    
    /* Designul cercului din spatele bifei */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: #fff; /* Bifa va fi albă */
}

/* Stil specific pentru BIFA VERDE */
.status-list li.status-complete::before {
    background-color: #28a745; /* Verde */
}

/* Stil specific pentru BIFA GALBENĂ (SAFFRON) */
.status-list li.status-in-progress::before {
    background-color: var(--color-saffron); /* Galben-Saffron */
}

.status-list li.status-negative::before {
    content: '\f00d'; /* Codul pentru "X" din Font Awesome */
    background-color: var(--color-coral-red); /* Roșu-coral */
}

/* ================================================= */
/*          STIL NOU PENTRU DECLARAȚIA F.R.E.E.      */
/* ================================================= */

.free-statement-box {
    background-color: var(--color-deep-teal); /* Fundal închis, de brand */
    color: var(--color-white);
    padding: 40px;
    margin: 40px 0;
    border-radius: var(--border-radius-large);
    text-align: center;
    position: relative;
    overflow: hidden; /* Important pentru pseudo-elemente */
}

/* Logo-ul F.R.E.E. din interior */
.free-statement-box .statement-logo {
    max-height: 40px;
    margin-bottom: 20px;
    opacity: 0.8;
}

/* Textul declarației */
.free-statement-box .statement-text {
    font-size: 1.3em;
    font-weight: 600; /* Mai bold, pentru a sugera o declarație puternică */
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
    position: relative; /* Pentru a sta deasupra ghilimelelor */
    z-index: 2;
    color: var(--color-white); /* Forțăm culoarea albă */
}

/* NOU: Ghilimele decorative în fundal */
.free-statement-box::before {
    content: '\f10d'; /* Codul pentru ghilimele din Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 6em;
    color: rgba(255, 255, 255, 0.05); /* Foarte transparent */
    z-index: 1;
}

/* ================================================= */
/*          STIL NOU PENTRU TIMELINE-UL DIN ARTICOL  */
/* ================================================= */

.timeline-box {
    position: relative;
    padding: 20px 0 20px 80px; /* Lasă spațiu în stânga pentru iconiță și linie */
    border-left: 3px solid var(--color-light-teal); /* Linia verticală a timeline-ului */
    margin-left: 20px;
}
/* Eliminăm bordura de sus a primului element și de jos a ultimului */
.timeline-box:first-of-type { border-top: 3px solid var(--color-light-teal); border-top-left-radius: 15px; }
.timeline-box:last-of-type { border-bottom: 3px solid var(--color-light-teal); border-bottom-left-radius: 15px; }

/* Iconița de pe timeline */
.timeline-icon {
    position: absolute;
    left: -24px; /* Centrează iconița pe linia verticală */
    top: 20px;
    width: 48px;
    height: 48px;
    background-color: var(--color-coral-red);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
}

/* Conținutul textului din timeline */
.timeline-content h3 {
    margin-top: 0;
    color: var(--color-deep-teal);
}
.timeline-content p {
    margin-bottom: 0;
}

.ambassador-card-wrapper {
    max-width: 500px; /* Limitează lățimea cardului */
    margin: 40px auto; /* Centrează cardul pe orizontală */
}

/* Suprascriem umbra default a cardului de ambasador pentru un aspect mai integrat */
.ambassador-card-wrapper .ambassador-card {
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}

/* ================================================= */
/*          STIL NOU PENTRU CARDUL TESTIMONIAL       */
/* ================================================= */

.testimonial-card {
    display: flex; /* Activează layout-ul pe coloane */
    gap: 30px; /* Spațiu între imagine și text */
    align-items: center; /* Aliniază vertical elementele */
    background-color: var(--color-light-blue-grey);
    border-radius: var(--border-radius-large);
    padding: 30px;
    margin: 40px auto;
    max-width: 95%; /* Ocupă aproape toată lățimea, dar nu complet */
}

/* Stil pentru imaginea din stânga */
.testimonial-card .profile-image {
    flex: 0 0 150px; /* Lățime fixă de 120px */
    width: 150px;
    height: 150px;
    border-radius: 50%; /* O face perfect rotundă */
    object-fit: cover;
    border: 4px solid var(--color-white);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Stil pentru conținutul textului din dreapta */
.testimonial-card .testimonial-content {
    flex-grow: 1; /* Ocupă spațiul rămas */
    text-align: left; /* Aliniere la stânga */
}

/* Stil pentru citatul principal */
.testimonial-card .testimonial-content p {
    font-size: 1.1em;
    font-style: italic;
    color: var(--text-dark);
    margin: 0 0 15px 0;
    line-height: 1.7;
    /* Adăugăm ghilimele decorative */
    position: relative;
    padding-left: 35px;
}
.testimonial-card .testimonial-content p::before {
    content: '\f10d'; /* Codul pentru ghilimele din Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: -5px;
    font-size: 1.8em;
    color: var(--color-coral-red);
}

/* Stil pentru numele ambasadorului */
.testimonial-card .testimonial-content h4 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 800;
    color: var(--color-deep-teal);
}

/* ================================================= */
/*          STIL NOU PENTRU LINKUL "VEZI AMBASADORII" */
/* ================================================= */

/* Containerul care centrează linkul */
.view-all-ambassadors-link {
    display: block;
    text-align: center;
    margin: 40px 0; /* Spațiere verticală */
}

/* Stilul principal pentru link - aspect de "pastilă" cu contur */
.view-all-ambassadors-link a {
    display: inline-block; /* Permite aplicarea de padding și border */
    padding: 12px 25px; /* Spațiu interior pentru a crea forma */
    border: 2px solid var(--color-light-teal); /* Un contur foarte subtil, gri-verzui */
    border-radius: 50px; /* Colțuri perfect rotunjite */
    
    color: var(--color-deep-teal); /* Culoarea textului */
    font-weight: 700; /* Text mai bold */
    text-decoration: none;
    
    transition: all 0.3s ease; /* Animație lină pentru toate proprietățile */
}

/* Efectul la trecerea mouse-ului */
.view-all-ambassadors-link a:hover {
    background-color: var(--color-teal-vibrant); /* Se umple cu culoare */
    border-color: var(--color-teal-vibrant); /* Conturul devine de aceeași culoare */
    color: var(--color-white); /* Textul devine alb */
    transform: translateY(-2px); /* Se ridică puțin */
    box-shadow: 0 5px 15px rgba(0, 160, 146, 0.2); /* Adaugă o umbră subtilă */
}

/* Adaptare pentru mobil */
@media (max-width: 768px) {
    .testimonial-card {
        flex-direction: column; /* Elementele trec unul sub altul */
        text-align: center;
    }
    .testimonial-card .testimonial-content {
        text-align: center;
    }
    .testimonial-card .testimonial-content p {
        padding-left: 0; /* Eliminăm spațiul pentru ghilimele */
    }
    .testimonial-card .testimonial-content p::before {
        display: none; /* Ascundem ghilimelele pe mobil pentru un aspect mai curat */
    }
}



/* ================================================= */
/*          STIL NOU PENTRU BLOCUL INTRODUCTIV       */
/*              (Versiune cu ou roșu)              */
/* ================================================= */

.intro-block {
    text-align: center;
    margin: 50px auto 60px auto;
    padding: 0 20px; /* Spațiere pe mobil */
    position: relative;
}

/* Elementul decorativ de deasupra (oul) */
.intro-block::before {
    content: '\f7fb'; /* MODIFICAT: Codul pentru ou din Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-coral-red); /* MODIFICAT: Culoare roșie, din paleta existentă */
    font-size: 3em;
    display: block;
    margin-bottom: 25px;
    opacity: 0.9;
}

.intro-block .lead {
    font-size: 1.3em;
    font-weight: 400;
    font-style: italic; /* MODIFICAT: Adăugat stilul italic */
    color: #6c757d; /* MODIFICAT: Un gri mai deschis, dar lizibil */
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.8;
}


/* ================================================= */
/*          STIL NOU PENTRU LISTA DE REZULTATE       */
/* ================================================= */

.survey-results-list {
    list-style: none;
    padding-left: 0;
    margin: 40px 0;
}

.survey-results-list li {
    position: relative;
    padding-left: 40px; /* Lasă spațiu pentru bifă */
    margin-bottom: 20px;
    font-size: 1.1em;
    line-height: 1.7;
}

/* Stilul pentru BIFĂ (pseudo-elementul ::before) */
.survey-results-list li::before {
    content: '\f00c'; /* Codul pentru bifa din Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 4px;
    
    /* Designul cercului din spatele bifei */
    color: #28a745; /* Verde pentru a indica un rezultat pozitiv/dorit */
    background-color: rgba(40, 167, 69, 0.1);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
}

.survey-results-list li strong {
    color: var(--color-deep-teal);
    display: block; /* Forțează textul descriptiv să treacă pe rândul următor */
    margin-bottom: 4px;
}

/* ================================================= */
/*          STIL NOU PENTRU ARTICOLUL DIALOG         */
/* ================================================= */

/* Paragraful introductiv care pregătește dialogul */
.intro-dialogue-setup p {
    font-size: 1.15em;
    font-style: italic;
    color: #6c757d; /* Un gri subtil */
    text-align: center;
    max-width: 90%;
    margin: 40px auto 50px auto;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-light-grey);
}

/* Containerul principal pentru întregul dialog */
.dialogue-wrapper {
    margin-top: 40px;
    margin-bottom: 50px;
}

/* Stilul de bază pentru fiecare replică */
.dialogue-entry {
    position: relative;
    padding: 20px 25px;
    margin-bottom: 25px;
    border-radius: var(--border-radius-large);
    max-width: 85%; /* Replicile nu ocupă toată lățimea */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.dialogue-entry p {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.7;
}

/* Stilul pentru numele personajului */
.speaker-name {
    display: block;
    font-weight: 700;
    font-size: 1.2em;
    margin-bottom: 10px;
}

/* Stil specific pentru Liberta (găina liberă) */
.speaker-liberta {
    background-color: rgba(0, 160, 146, 0.05); /* Fundal verde-teal foarte deschis */
    border-left: 4px solid var(--color-teal-vibrant);
    margin-right: auto; /* Aliniere la stânga */
}
.speaker-liberta .speaker-name {
    color: var(--color-teal-vibrant);
}

/* Stil specific pentru Claustra (găina din cușcă) */
.speaker-claustra {
    background-color: rgba(255, 90, 95, 0.05); /* Fundal roșu-coral foarte deschis */
    border-right: 4px solid var(--color-coral-red);
    margin-left: auto; /* Aliniere la dreapta */
    text-align: left; /* Textul rămâne aliniat la stânga pentru lizibilitate */
}
.speaker-claustra .speaker-name {
    color: var(--color-coral-red);
}

/* Citatul final al Claustrei refolosește stilul existent, care are deja o dungă roșie */
.pull-quote {
    margin-top: 50px;
}


/* ================================================= */
/*          STILURI PENTRU ARTICOLUL "CU CE MA AFECTEAZA" */
/* ================================================= */

/* Caseta pentru explicarea conceptelor cheie */
.concept-box {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    background-color: var(--color-light-blue-grey);
    padding: 25px 30px;
    margin: 30px 0 40px 0;
    border-left: 5px solid var(--color-saffron);
    border-radius: 0 var(--border-radius-soft) var(--border-radius-soft) 0;
}
.concept-box i {
    font-size: 2.5em;
    color: var(--color-saffron);
    margin-top: 5px;
}
.concept-box h4 {
    margin: 0 0 5px 0;
    color: var(--color-deep-teal);
}
.concept-box p {
    margin: 0;
    font-size: 1.05em;
    line-height: 1.7;
}

/* Stiluri pentru lista de fapte (reutilizează .fact-list dacă există) */
.fact-list {
    list-style: none;
    padding-left: 0;
    counter-reset: fact-counter;
}
.fact-list li {
    position: relative;
    padding: 30px 30px 30px 80px;
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: var(--border-radius-large);
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    border-top: 1px solid #f0f0f0;
}
.fact-list li::before {
    counter-increment: fact-counter;
    content: counter(fact-counter);
    position: absolute;
    left: 20px;
    top: 30px;
    font-size: 3.5em;
    font-weight: 800;
    color: var(--color-light-teal);
    line-height: 1;
}
.fact-list li h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-deep-teal);
}

/* Layout pe două coloane pentru text și imagine în interiorul listei */
.fact-content-image-split {
    display: grid;
    grid-template-columns: 1fr 0.7fr; /* Coloana de text mai lată */
    gap: 30px;
    align-items: center;
}
.fact-content-image-split.image-on-left {
    grid-template-columns: 0.7fr 1fr;
}
.fact-image img {
    width: 100%;
    border-radius: var(--border-radius-soft);
}
.mini-quote {
    font-style: italic;
    color: var(--text-light);
    padding-left: 20px;
    border-left: 3px solid var(--color-light-grey);
    margin-top: 20px;
}

/* Caseta finală, "Hub de acțiune" */
.action-hub-box {
    background-color: var(--color-light-blue-grey);
    padding: 40px;
    margin-top: 50px;
    border-radius: var(--border-radius-large);
    text-align: center;
    border-top: 4px solid var(--color-teal-vibrant);
}
.action-hub-box h4 {
    font-size: 1.8em;
    color: var(--color-deep-teal);
    margin: 0 0 10px 0;
}
.action-hub-box p {
    max-width: 600px;
    margin: 0 auto 30px auto;
}
.action-list {
    list-style: none;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    text-align: left;
}
.action-list li a, .action-list li {
    font-weight: 600;
    color: var(--color-deep-teal);
    text-decoration: none;
    font-size: 1.1em;
}
.action-list li a:hover {
    color: var(--color-teal-vibrant);
    text-decoration: underline;
}
.action-list li::before {
    content: '\f058'; /* Bifă solidă */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-teal-vibrant);
    margin-right: 15px;
}


/* Adaptări pentru mobil */
@media (max-width: 768px) {
    .fact-list li {
        padding: 20px 20px 20px 60px;
    }
    .fact-list li::before {
        left: 15px;
        top: 20px;
        font-size: 2.5em;
    }
    .fact-content-image-split,
    .fact-content-image-split.image-on-left {
        grid-template-columns: 1fr; /* O singură coloană pe mobil */
    }
    .fact-content-image-split.image-on-left .fact-image {
        order: -1; /* Mută imaginea deasupra textului */
    }
}

/* ================================================= */
/*          STILURI NOI PENTRU ARTICOLUL "CU CE MA AFECTEAZA" */
/* ================================================= */

/* Caseta pentru întrebări retorice */
.question-block {
    position: relative;
    background-color: var(--color-light-blue-grey);
    padding: 25px 30px 25px 70px; /* Spațiu în stânga pentru iconiță */
    margin: 40px 0;
    border-radius: var(--border-radius-soft);
}
.question-block::before {
    content: '\f059'; /* Iconița de întrebare din Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8em;
    color: var(--color-teal-vibrant);
    opacity: 0.7;
}
.question-block p {
    margin: 0;
    font-size: 1.15em;
    font-style: italic;
    color: var(--color-deep-teal);
    line-height: 1.7;
}

/* Stil pentru sursa citatului din blockquote */
.pull-quote footer {
    display: block;
    margin-top: 15px;
    font-style: normal;
    font-weight: 600;
    font-size: 0.9em;
    text-align: right;
    color: var(--text-light);
}

.health-risk-box {
    display: flex; /* Activează Flexbox */
    align-items: flex-start; /* Aliniază elementele la partea de sus */
    gap: 20px; /* Creează spațiu între iconiță și text */
    background-color: rgba(255, 90, 95, 0.05);
    border-left: 5px solid var(--color-coral-red);
    padding: 25px; /* Padding egal pe toate părțile */
    margin: 25px 0;
    border-radius: 0 var(--border-radius-soft) var(--border-radius-soft) 0;
}
.health-risk-box::before {
    content: '\f071'; /* Iconița de avertizare */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.8em; /* Mărimea iconiței */
    color: var(--color-coral-red);
    margin-top: 5px; /* O mică ajustare pentru aliniere perfectă cu textul */
}
.health-risk-content h4 {
    margin: 0 0 10px 0;
    color: var(--color-coral-red);
    font-size: 1.2em;
}
.health-risk-content p {
    margin: 0;
    line-height: 1.8;
}

/* Ajustări pentru hub-ul de acțiune final */
.action-hub-box {
    background-color: var(--color-light-blue-grey);
    padding: 40px;
    margin-top: 50px;
    border-radius: var(--border-radius-large);
    text-align: center;
    border-top: 4px solid var(--color-teal-vibrant);
}
.action-hub-box .action-list {
    list-style: none;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    text-align: left;
    margin-top: 20px;
}
.action-hub-box .action-list li {
    font-size: 1.1em;
    line-height: 1.6;
}
.action-hub-box .action-list li a {
    color: var(--color-deep-teal);
    text-decoration: none;
}
.action-hub-box .action-list li a:hover {
    color: var(--color-teal-vibrant);
}
.action-hub-box .action-list li::before {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-teal-vibrant);
    margin-right: 15px;
}

/* ================================================= */
/*          STIL NOU: CĂLĂTORIA VIZUALĂ              */
/* ================================================= */

/* Caseta pentru ideea cheie (bumerang) */
.key-insight-box {
    display: flex; gap: 20px; align-items: center;
    background-color: var(--color-light-blue-grey);
    padding: 25px; margin: 30px 0;
    border-radius: var(--border-radius-soft);
    border-left: 4px solid var(--color-teal-vibrant);
}
.key-insight-box i {
    font-size: 2em; color: var(--color-teal-vibrant);
}
.key-insight-box p { margin: 0; font-size: 1.1em; line-height: 1.7; }

/* Caseta pentru întrebarea centrală */
.central-question-box {
    background-color: var(--color-deep-teal);
    color: var(--color-white);
    text-align: center;
    padding: 40px 30px;
    margin: 40px auto 50px auto;
    border-radius: var(--border-radius-large);
}
.central-question-box p {
    font-size: 1.5em; font-weight: 700; font-style: italic;
    margin: 0; color: var(--color-white);
}

/* Containerul pentru pașii călătoriei */
.journey-steps {
    list-style: none; padding: 0;
    counter-reset: journey-counter;
}
.journey-step {
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius-large);
    margin-bottom: 40px;
    overflow: hidden; /* Important pentru a rotunji colțurile header-ului */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.step-header {
    display: flex; align-items: center;
    background-color: #f8f9fa;
    padding: 20px 30px;
    border-bottom: 1px solid #e9ecef;
}
.step-header::before {
    counter-increment: journey-counter;
    content: counter(journey-counter);
    font-size: 2em; font-weight: 800;
    color: var(--color-white);
    background-color: var(--color-teal-vibrant);
    min-width: 50px; height: 50px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-right: 20px;
}
.step-header h2 {
    margin: 0; font-size: 1.6em; color: var(--color-deep-teal);
}
.step-content {
    padding: 30px;
}

/* Caseta pentru statistici */
.stat-box {
    display: flex; align-items: center; gap: 20px;
    background-color: rgba(255, 90, 95, 0.07);
    border-left: 4px solid var(--color-coral-red);
    padding: 20px; margin: 25px 0;
    border-radius: var(--border-radius-soft);
}
.stat-box span {
    font-size: 3.5em; font-weight: 800;
    color: var(--color-coral-red);
    line-height: 1;
}
.stat-box p { margin: 0; }

/* Caseta de introspecție */
.introspection-box {
    border: 2px dashed var(--color-light-teal);
    padding: 25px; margin: 25px 0;
    border-radius: var(--border-radius-soft);
    text-align: center;
}
.introspection-box p {
    margin: 0; font-size: 1.1em; font-style: italic; color: var(--color-deep-teal);
}

/* Caseta de analogie */
.analogy-box {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background-color: #e9ecef;
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius-soft);
    margin: 25px 0; overflow: hidden;
}
.analogy-item {
    background-color: #fff; padding: 25px; text-align: center;
}
.analogy-item i {
    font-size: 2.5em; margin-bottom: 15px; color: var(--color-teal-vibrant);
}
.analogy-item h4 {
    margin: 0 0 10px 0; color: var(--color-deep-teal);
}
.analogy-item p { margin: 0; }

/* Caseta de risc (health-risk-box) - stil refolosit/ajustat */
.health-risk-box {
    background-color: rgba(255, 90, 95, 0.05);
    border-left: 5px solid var(--color-coral-red);
    padding: 25px; margin: 25px 0;
    border-radius: 0 var(--border-radius-soft) var(--border-radius-soft) 0;
}
.health-risk-box h4 {
    margin: 0 0 10px 0; color: var(--color-coral-red);
}
.health-risk-box p { margin: 0; }

/* Adaptări pentru mobil */
@media (max-width: 768px) {
    .analogy-box { grid-template-columns: 1fr; }
    .step-header h2 { font-size: 1.3em; }
}

/* Stilul pentru concept-box și action-hub-box rămân aceleași */

/* ================================================= */
/*          STILURI PENTRU ARTICOLUL "CE SPUNE DESPRE NOI" */
/* ================================================= */

/* Caseta pentru paradoxul introductiv */
.intro-paradox-box {
    display: flex; gap: 25px; align-items: flex-start;
    background-color: var(--color-light-blue-grey);
    padding: 25px 30px; margin: 30px 0 40px 0;
    border-left: 5px solid var(--color-saffron);
    border-radius: 0 var(--border-radius-soft) var(--border-radius-soft) 0;
}
.intro-paradox-box i {
    font-size: 2.5em; color: var(--color-saffron);
    margin-top: 5px;
}
.intro-paradox-box p { margin: 0; font-size: 1.1em; line-height: 1.7; }

/* Grila pentru cele 5 libertăți negate */
.freedoms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 30px 0 40px 0;
}
.freedom-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-bottom: 4px solid var(--color-coral-red);
    padding: 25px 20px;
    border-radius: var(--border-radius-soft);
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.freedom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.freedom-card i {
    font-size: 2.5em;
    color: var(--color-coral-red);
    margin-bottom: 15px;
}
.freedom-card h4 {
    margin: 0; color: var(--text-dark);
    font-size: 1.1em;
}

/* Caseta de profil a găinii */
.hen-profile-box {
    display: flex; gap: 25px; align-items: flex-start;
    background-color: rgba(40, 167, 69, 0.05); /* Fundal verde deschis */
    padding: 30px; margin: 40px 0;
    border-left: 5px solid #28a745; /* Verde */
    border-radius: 0 var(--border-radius-soft) var(--border-radius-soft) 0;
}
.hen-profile-box i {
    font-size: 2.5em; color: #28a745;
    margin-top: 5px;
}
.hen-profile-box h3 { margin: 0 0 10px 0; color: #28a745; }
.hen-profile-box p { margin: 0; line-height: 1.8; }

/* Statistica de 94% refolosește stilul existent .stat-highlight-box */

/* Caseta finală de acțiune */
.final-action-box {
    background-color: var(--color-light-blue-grey);
    padding: 40px;
    margin-top: 50px;
    border-radius: var(--border-radius-large);
    text-align: center;
    border-top: 4px solid var(--color-teal-vibrant);
}
.final-action-box h3 {
    font-size: 1.8em; color: var(--color-deep-teal);
    margin: 0 0 20px 0;
}
.action-options-list {
    list-style: none;
    padding: 0;
    max-width: 500px; /* Limităm lățimea pentru un aspect mai bun */
    margin: 30px auto; /* Centrare și spațiere */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spațiu între cele două opțiuni */
}

/* Stilul pentru fiecare opțiune din listă */
.action-options-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #fff;
    padding: 20px;
    border-radius: var(--border-radius-soft);
    border-left: 5px solid var(--color-teal-vibrant);
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
    transition: transform 0.2s ease;
}
.action-options-list li:hover {
    transform: scale(1.03); /* Un mic efect la hover */
}

/* Stilul iconiței */
.action-options-list li i {
    font-size: 1.8em;
    color: var(--color-teal-vibrant);
}

/* Stilul textului */
.action-options-list li span {
    font-size: 1.1em;
    line-height: 1.5;
}

/* ================================================= */
/*          STILURI PENTRU ARTICOLUL "PROFI PROTEST"  */
/* ================================================= */

border-style: solid;
}
.small-stat .stat-number { font-size: 3em; }
.small-stat .stat-text { font-size: 1em; }

/* Stil pentru lista cu bife (reutilizare/adaptare) */
.info-list.check-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
}
.info-list.check-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0; top: 5px;
    color: var(--color-teal-vibrant);
}




/* Linia fină de separare */
.debate-divider {
    border: none;
    height: 1px;
    background-color: #e9ecef;
    margin: 25px 0;
}

/* ================================================= */
/*          STIL MINIMALIST PENTRU CITATE            */
/* ================================================= */

/* Stil subtil pentru afirmațiile companiei */
.simple-quote {
    margin: 10px 0 30px 0;
    padding: 15px 20px;
    background-color: #f8f9fa; /* Un gri foarte deschis, aproape invizibil */
    border-left: 4px solid #e9ecef; /* O margine gri fină */
    border-radius: 0 4px 4px 0;
}
.simple-quote p {
    margin: 0;
    font-style: italic;
    color: #6c757d;
}

/* Stil pentru sursa citatului (dacă există deja din alt articol, nu mai e nevoie să-l adaugi) */
.pull-quote footer {
    display: block;
    margin-top: 15px;
    font-style: normal;
    font-weight: 600;
    font-size: 0.9em;
    text-align: right;
    color: var(--text-light);
}

.info-list.check-list {
    list-style: none; /* Anulează bulina standard */
    padding-left: 0;  /* Anulează spațiul (indentarea) lăsat pentru bulină */
}

/* ================================================= */
/*          STILURI NOI PENTRU PAGINA DE POLITICĂ    */
/* ================================================= */

/* Stil pentru antetul paginii de confidențialitate */
.privacy-header {
    background-color: #f8f9fa; /* Un gri foarte deschis */
    padding: 60px 20px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}
.privacy-header .icon {
    font-size: 3em;
    color: var(--color-teal-vibrant, #00a092);
    margin-bottom: 15px;
}
.privacy-header h1 {
    font-size: clamp(2.5em, 5vw, 3.5em);
    color: var(--color-deep-teal);
    margin-bottom: 10px;
    max-width: 65ch; /* Limitează lățimea la aproximativ 65 de caractere */
    margin-left: auto; /* Centrează titlul după ce a fost limitat */
    margin-right: auto; /* Centrează titlul după ce a fost limitat */
}
.privacy-header .subtitle {
    font-size: 1.2em;
    color: var(--text-light);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Stil pentru titlurile H2 decorate */
.article-container h2.decorated {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 25px;
    margin-top: 40px;
    font-size: 1.8em;
    color: var(--color-deep-teal);
}
.article-container h2.decorated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 4px;
    background-color: var(--color-teal-vibrant, #00a092);
    border-radius: 2px;
}

/* Stil pentru subtitlurile H3 decorate */
.article-container h3 {
    border-left: 4px solid var(--color-saffron);
    padding-left: 15px;
    font-size: 1.4em;
    color: var(--color-deep-teal);
    margin-top: 30px;
}

/* Stil pentru lista de drepturi cu bife */
.rights-list {
    list-style: none;
    padding-left: 0;
    margin-top: 25px;
}
.rights-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    font-size: 1.05em;
    line-height: 1.7;
}
.rights-list li::before {
    content: '\f00c'; /* Iconița de bifă din Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--color-teal-vibrant, #00a092);
    font-size: 1.1em;
}

/* ================================================= */
/*          STIL PENTRU COMUTATORUL DE LIMBĂ         */
/* ================================================= */

.lang-switcher {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.lang-btn {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9em;
    color: #495057;
    transition: all 0.2s ease;
}

.lang-btn:hover {
    background-color: #e9ecef;
}

.lang-btn.active {
    background-color: var(--color-teal-vibrant, #00a092);
    color: white;
    border-color: var(--color-teal-vibrant, #00a092);
}

/* Ascunde conținutul limbii care nu este activă */
.lang-content {
    display: none;
}
.lang-content.active {
    display: block;
}

/* ================================================= */
/*          STILURI NOI PENTRU PAGINA DE COOKIES     */
/* ================================================= */

/* Card informativ pentru servicii externe */
.info-card {
    background-color: #f8f9fa;
    border-left: 4px solid var(--color-teal-vibrant);
    padding: 25px 30px;
    margin: 30px 0;
    border-radius: 0 8px 8px 0;
}

/* Tabel modern pentru lista de cookies */
.cookies-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 0.95em;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden; /* Important pentru a rotunji colțurile header-ului */
}

.cookies-table thead tr {
    background-color: var(--color-deep-teal);
    color: #ffffff;
    text-align: left;
    font-weight: bold;
}

.cookies-table th,
.cookies-table td {
    padding: 12px 15px;
}

.cookies-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.cookies-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.cookies-table tbody tr:last-of-type {
    border-bottom: 2px solid var(--color-deep-teal);
}

.cookies-table td:first-child {
    font-weight: 600;
    color: var(--color-deep-teal);
}
/* ================================================= */
/*          STILURI NOI PENTRU ACORDEON COOKIES      */
/* ================================================= */

.cookie-accordion {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin: 30px 0;
}

.cookie-item {
    border-bottom: 1px solid #e9ecef;
}
.cookie-item:last-child {
    border-bottom: none;
}

.cookie-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.2s ease;
}

.cookie-header:hover {
    background-color: #f8f9fa;
}

.cookie-header .cookie-name {
    font-weight: 600;
    color: var(--color-deep-teal);
}

.cookie-header .toggle-icon {
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

/* Stil pentru când acordeonul este activ */
.cookie-item.active .cookie-header {
    background-color: #f1f8f7;
}

.cookie-item.active .toggle-icon {
    transform: rotate(180deg);
}

/* Detaliile cookie-ului (inițial ascunse) */
.cookie-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    background-color: #fdfdfd;
    font-size: 0.9em;
}

.cookie-details-content {
    padding: 0 20px;
}

.cookie-details p {
    margin: 10px 0;
    line-height: 1.6;
}

.cookie-details p strong {
    color: var(--text-dark);
}

/* Adaptări pentru mobil */
@media (max-width: 768px) {
    .president-quote-box { flex-direction: column; text-align: center; }
}

/* ================================================= */
/*          STILURI PENTRU ARTICOLUL "SONDAJ ROMÂNI" */
/* ================================================= */

/* Caseta de impact principală - refolosire/adaptare .stat-highlight-box */
.stat-highlight-box.teal-bg {
    background-color: var(--color-teal-vibrant);
    border: none;
    padding: 40px 30px;
    margin: 30px 0;
    text-align: center;
    border-radius: var(--border-radius-large);
}
.teal-bg .stat-number {
    color: var(--color-white);
    font-size: 5em;
}
.teal-bg .stat-text {
    color: var(--color-white);
    font-size: 1.2em;
    opacity: 0.9;
    max-width: 500px;
    margin: 10px auto 0 auto;
}

/* Grila pentru detalierea statisticilor */
.stat-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin: 30px 0;
    text-align: center;
}
.stat-item {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius-soft);
    border-bottom: 3px solid var(--color-light-teal);
}
.stat-item span {
    display: block;
    font-size: 2.5em;
    font-weight: 700;
    color: var(--color-deep-teal);
}
.stat-item p { margin: 0; color: var(--text-light); }

/* Lista vizuală pentru statistici rapide */
.quick-stats-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}
.quick-stats-list li {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #fff;
    border: 1px solid #e9ecef;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: var(--border-radius-soft);
    font-size: 1.1em;
}
.quick-stats-list li i {
    font-size: 1.8em;
    color: var(--color-coral-red);
}

/* Caseta pentru "knowledge gap" - problema informării */
.knowledge-gap-box {
    display: flex;
    align-items: center;
    gap: 30px;
    background-color: rgba(247, 183, 51, 0.1);
    border: 2px dashed var(--color-saffron);
    padding: 30px;
    margin: 30px 0;
    border-radius: var(--border-radius-large);
}
.knowledge-gap-box .stat-number {
    font-size: 4em;
    font-weight: 800;
    color: var(--color-saffron);
}
.knowledge-gap-box .stat-text h4 {
    margin: 0 0 10px 0;
    color: var(--color-deep-teal);
}
.knowledge-gap-box .stat-text p { margin: 0; }

/* Caseta pentru metodologie */
.methodology-box {
    background-color: #f8f9fa;
    border-left: 4px solid #adb5bd;
    padding: 20px;
    margin: 30px 0;
    border-radius: 0 4px 4px 0;
}
.methodology-box p {
    margin: 0;
    font-size: 0.95em;
    font-style: italic;
    color: #6c757d;
}

/* Caseta pentru linkul către raport (reutilizare) */
.report-links-box {
    background-color: var(--color-light-blue-grey);
    border-left: 5px solid var(--color-teal-vibrant);
    padding: 25px 30px;
    margin: 40px 0;
    border-radius: var(--border-radius-soft);
}
.report-links-box h4 { margin-top: 0; color: var(--color-deep-teal); }
.report-links-box a { font-weight: 600; color: var(--color-teal-vibrant); text-decoration: none; }
.report-links-box a:hover { text-decoration: underline; }

/* Adaptări pentru mobil */
@media (max-width: 768px) {
    .knowledge-gap-box {
        flex-direction: column;
        text-align: center;
    }
}