/**
 * FAQ Section Component Styles - FlyonUI Integration
 * Modern accordion-style FAQ using FlyonUI components
 */

/* ===================================
   FLYONUI FAQ ACCORDION STYLES
   ================================== */

.faq-section {
    position: relative;
}

/* Base accordion styling */
.accordion {
    width: 100%;
}

.accordion-item {
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.accordion-toggle {
    width: 100%;
    font-size: 1.4rem;
    font-weight: 500;
    text-align: left;
    padding-bottom: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}




/* Content styling */
.accordion-content {
    transition: all 0.3s ease;
    overflow: hidden;
}

.accordion-content.hidden {
    height: 0;
    opacity: 0;
}

.accordion-content:not(.hidden) {
    height: auto;
    opacity: 1;
}

/* Active state styling */
.accordion-item.active .accordion-item-active\\:hidden {
    display: none;
}

.accordion-item.active .accordion-item-active\\:block {
    display: block;
}

.accordion-item:not(.active) .accordion-item-active\\:hidden {
    display: block;
}

.accordion-item:not(.active) .accordion-item-active\\:block {
    display: none;
}

/* Icon styling */
.accordion-toggle span[class*="icon-"] {
    transition: transform 0.2s ease;
}

/* ===================================
   RESPONSIVE DESIGN
   ================================== */

@media (max-width: 768px) {
    .faq-section h2 {
        font-size: 1.875rem !important;
    }

    .faq-section p {
        font-size: 1.1rem !important;
    }

    .accordion-toggle {
        padding: 1rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .faq-section h2 {
        font-size: 2.7rem !important;
    }

    .accordion-toggle {
        padding: 7px 13px 22px 13px;
        font-size: 1.3rem;
    }
}

/* ===================================
   ACCESSIBILITY & REDUCED MOTION
   ================================== */

@media (prefers-reduced-motion: reduce) {

    .accordion-toggle,
    .accordion-content,
    .accordion-toggle span[class*="icon-"] {
        transition: none !important;
    }
}

/* ===================================
   RTL SUPPORT
   ================================== */

[dir="rtl"] .accordion-toggle {
    text-align: right;
}

[dir="rtl"] .accordion-toggle span[class*="icon-"] {
    transform: scaleX(-1);
}

/* ===================================
   FALLBACK STYLES FOR MISSING ICONS
   ================================== */

/* Plus icon fallback */
.accordion-toggle span[class*="icon-[tabler--plus]"]:before {
    content: '+';
    font-size: 1.25rem;
    font-weight: bold;
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    text-align: center;
    line-height: 1;
}

/* Minus icon fallback */
.accordion-toggle span[class*="icon-[tabler--minus]"]:before {
    content: '−';
    font-size: 1.25rem;
    font-weight: bold;
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    text-align: center;
    line-height: 1;
}

/* Hide content when icon classes are available */
.accordion-toggle span[class*="icon-"]:not(:empty):before {
    display: none;
}