/*
File: public/assets/css/sections/faq.css
Description: Styling for the bordered, green-highlighted FAQ section.
*/

.faq-section {
    background-color: white; /* Clean white background */
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.faq-main-heading {
    color: #212529;
    font-size: 1.5rem;
    margin-bottom: 3rem;
}

/* ========================================================= */
/* ACCORDION STYLING */
/* ========================================================= */
.accordion {
    max-width: 900px; /* Accordion ko center mein chota rakhein */
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden; /* Corners ko achhe se chhupane ke liye */
}

.faq-item {
    border: none;
    border-bottom: 1px solid #e9ecef; /* Har item ke beech halki line */
}

/* Question Button */
.faq-question {
    background-color: transparent !important;
    color: #333;
    font-size: 1.1rem;
    padding: 18px 24px;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

/* Question Hover/Active State */
.faq-question:not(.collapsed) {
    color: #1a965a; /* Green text when active */
    background-color: #f0f8ff !important; /* Halka blue ya green background */
    border-bottom: 2px solid #1a965a; /* Active state par bottom green line */
}

.faq-question:hover {
    color: #1a965a;
}

/* Accordion Icon (Arrow) */
.faq-question:not(.collapsed)::after {
    /* Arrow ko green colour dein jab active ho */
    filter: brightness(0) saturate(100%) invert(35%) sepia(87%) saturate(300%) hue-rotate(90deg) brightness(100%) contrast(100%);
    transform: rotate(-180deg);
}

.faq-question::after {
    margin-left: 1rem;
}

/* Answer Body */
.faq-answer {
    background-color: #f8f9fa; /* Answer ka background halka grey */
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    padding-top: 5px;
    padding-bottom: 20px;
}