/*
  ============================================
  ==  FAQ SECTION STYLES (ULTRA COMPACT, NO GAPS)
  ============================================
*/

.lg-faq-section {
    width: 100%;
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6rem 1.5rem;
    box-sizing: border-box;
    --color-bg: #000000;
    --color-text: #FFFFFF;
    --color-neon: #C0FF00;
    --color-border: rgba(255, 255, 255, 0.08);
    --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --lg-font-body: 'Inter', sans-serif;
    --lg-font-heading: 'Space Grotesk', sans-serif;
    font-family: var(--lg-font-body);
}

@media (max-width: 991.98px) {
    .lg-faq-section {
        padding: 4rem 1rem !important;
        min-height: auto;
    }
}

/* ==========================================
   HEADER
========================================== */
.lg-faq-section__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
    max-width: 800px;
    width: 100%;
}

.lg-faq-section__title {
    font-family: var(--lg-font-heading);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 300;                /* 'Frequently Asked' — light */
    letter-spacing: -0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
    color: var(--color-text);
}

.lg-faq-header h3 {
    font-family: var(--lg-font-heading);
}

.lg-faq-section__title-highlight {
    background: linear-gradient(to right, #ffffff, var(--color-neon, #c0ff00));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;                /* 'QUESTIONS' — bold */
}

.lg-faq-section__description {
    max-width: 700px;
    margin-top: 1.25rem;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-weight: 300;
}

/* ==========================================
   COMPONENTS
========================================== */

/* FAQ Accordion Item */
.lg-faq-card {
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition-smooth);
}

.lg-faq-card .lg-faq-header { transition: color 0.2s ease; }
.lg-faq-card:hover .lg-faq-header h3 { color: var(--color-text); }
.lg-faq-card.is-expanded .lg-faq-header h3 { color: var(--color-neon); }

/* Grid transition for true 0 height animation */
.lg-faq-content-grid {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lg-faq-card.is-expanded .lg-faq-content-grid { grid-template-rows: 1fr; }

/* FIX: min-height: 0 ensures it doesn't take up empty space when closed */
.lg-faq-content-inner {
    min-height: 0; 
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lg-faq-card.is-expanded .lg-faq-content-inner {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

/* Animated Plus/Minus Icon — rules defined below with full sizing */

/* Entrance Animations */
@keyframes lg-faq-fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.lg-faq-anim-stagger { opacity: 0; animation: lg-faq-fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* ==========================================
   SUPRASCRIERE PENTRU TEXTUL RĂSPUNSURILOR
========================================== */
.lg-faq-section .lg-faq-content-inner p {
    color: #FFFFFF !important;
    font-weight: 200 !important; /* 500 (Medium) face textul un pic mai "plin" decât cel normal */
    opacity: 1 !important;
    letter-spacing: 0.3px !important; /* O spațiere foarte fină a literelor ajută mult la lizibilitate pe fundal negru */
}

/* ====================================================
   PERFECT MOBILE RESPONSIVENESS FOR FAQ BLOCK
   ==================================================== */

/* Mobile styles consolidated in the block below */
/* ==========================================
   Animated Plus/Minus Icon (Perfect Centered +)
========================================== */
.lg-faq-toggle-icon {
    position: relative;
    width: 14px; /* O idee mai mare pentru a arăta proporțional */
    height: 14px;
}

.lg-faq-toggle-icon span { 
    position: absolute;
    background-color: #6b7280;
    border-radius: 999px;
    transition: transform 0.3s ease, background-color 0.3s ease; 
}

/* Linia Orizontală */
.lg-faq-toggle-icon span:first-child { 
    width: 100% !important; 
    height: 1.5px !important; 
    top: 50% !important;
    left: 0 !important;
    margin-top: -0.75px !important; /* Centrează perfect fără să folosească Transform */
}

/* Linia Verticală */
.lg-faq-toggle-icon span:last-child { 
    width: 1.5px !important; 
    height: 100% !important; 
    left: 50% !important;
    top: 0 !important;
    margin-left: -0.75px !important; /* Centrează perfect fără să folosească Transform */
}

.lg-faq-card:hover .lg-faq-toggle-icon span { background-color: var(--color-text); }
.lg-faq-card.is-expanded .lg-faq-toggle-icon span:first-child { transform: rotate(180deg); background-color: var(--color-neon); }
.lg-faq-card.is-expanded .lg-faq-toggle-icon span:last-child { transform: rotate(90deg) scale(0); background-color: var(--color-neon); }
/* ====================================================
   PERFECT MOBILE RESPONSIVENESS FOR FAQ BLOCK
   (Compact & Tight)
   ==================================================== */

@media (max-width: 768px) {
    .lg-faq-section {
        padding: 2.5rem 0 !important; /* Eliminăm padding-ul lateral masiv de pe secțiune */
    }
    
    #lg-faq-layout {
        padding-left: 1rem !important; /* Suprascriem clasele Tailwind de padding (px-6) */
        padding-right: 1rem !important;
    }

    .lg-faq-card {
        padding: 0 !important; /* Eliminăm padding-ul extra adăugat pe card */
    }
    
    .lg-faq-header {
        padding-top: 0.85rem !important; /* Spațiu vertical redus între întrebări */
        padding-bottom: 0.85rem !important;
        gap: 0.75rem !important; /* Apropiem textul de iconiță */
    }

    .lg-faq-section__title {
        font-size: 2.8rem; /* bigger on mobile to fill more of the screen */
    }
    
    .lg-faq-section__description {
        font-size: 0.9rem;
        padding: 0 1rem; /* Previne lipirea textului de marginile ecranului */
    }
    
    .lg-faq-content-inner p {
        padding-bottom: 1rem !important; /* Reducem spațiul de sub răspuns când e deschis */
    }
}