/*
 * Compiled stylesheet: static_faqs.css
 * Shared by views:
 *   - app/Views/front/static/faqs.php
 */

/* ===== DESIGN VARIABLES ===== */
    :root {
        --saffron:       #E87722;
        --saffron-light: #F5A24B;
        --saffron-dark:  #C4620F;
        --gold:          #D4A838;
        --gold-light:    #F0D06A;
        --maroon:        #6B1A1A;
        --maroon-light:  #8B2222;
        --forest:        #1C3A28;
        --cream:         #FBF7EE;
        --warm-off:      #FAF5E9;
        --text-dark:     #231008;
        --text-body:     #4A3728;
        --text-muted:    #8A7060;
        --border:        rgba(212,168,56,0.28);
        --shadow-warm:   0 12px 48px rgba(232,119,34,0.14);
        --shadow-card:   0 4px 28px rgba(35,16,8,0.10);
        --radius:        16px;
        --radius-sm:     10px;
    }

    body {
        background: var(--cream);
        font-family: 'Poppins', sans-serif;
        color: var(--text-dark);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Playfair Display', serif;
    }

    .dashboard-container {
        max-width: 1200px;
        margin: 3rem auto;
        padding: 0 1.5rem;
    }

    /* Page header (like invoice/videos page) */
    .page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid var(--saffron);
    }

    .page-header-icon {
        background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.8rem;
    }

    .page-header-text h1 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-dark);
        margin: 0;
    }

    .page-header-text p {
        font-size: 0.95rem;
        color: var(--text-muted);
        margin: 0;
    }

    /* Category tabs (like gallery filter tabs) */
    .category-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 2rem;
        justify-content: center;
    }

    .category-tab {
        background: var(--cream);
        border: 2px solid var(--border);
        border-radius: 40px;
        padding: 0.6rem 1.8rem;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        transition: 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .category-tab i {
        color: var(--saffron);
    }

    .category-tab:hover {
        border-color: var(--saffron-light);
        color: var(--saffron-dark);
    }

    .category-tab.active {
        background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
        border-color: transparent;
        color: #fff;
    }

    .category-tab.active i {
        color: #fff;
    }

    /* FAQ categories */
    .faq-category {
        display: none;
    }

    .faq-category.active {
        display: block;
    }

    .section-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 1.5rem;
        border-left: 4px solid var(--saffron);
        padding-left: 1rem;
    }

    /* Accordion cards (like post cards) */
    .accordion {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        margin-bottom: 0.8rem;
        padding: 1.2rem 1.5rem;
        width: 100%;
        text-align: left;
        cursor: pointer;
        transition: 0.2s;
        font-weight: 600;
        color: var(--text-dark);
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: var(--shadow-card);
    }

    .accordion:hover {
        border-color: var(--saffron-light);
        transform: translateY(-2px);
    }

    .accordion.active {
        background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
        color: #fff;
        border-color: transparent;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        margin-bottom: 0;
    }

    .accordion .icon {
        font-size: 0.9rem;
        transition: transform 0.2s;
    }

    .accordion.active .icon {
        transform: rotate(180deg);
    }

    .panel {
        background: var(--cream);
        border: 1px solid var(--border);
        border-top: none;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        padding: 0 1.5rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        margin-bottom: 0.8rem;
    }

    .panel p {
        padding: 1.5rem 0;
        margin: 0;
        color: var(--text-body);
        line-height: 1.8;
    }

    /* No FAQs message */
    .no-faqs {
        text-align: center;
        padding: 3rem 2rem;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-card);
        color: var(--text-muted);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .category-tabs {
            justify-content: flex-start;
        }
    }