/* FAQ Page Specific Styles */

/* Hero image positioning */
.faq-hero .ai-hero-right img {
    position: relative;
    right: 0;
    bottom: 0;
    object-fit: cover;
    height: 100%;
    width: 85%;
    object-position: 50% 10%;
    transform: translateX(5%);
}

/* Tablet: 769px - 1024px (iPad Mini landscape & similar) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .faq-hero {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .faq-hero .ai-hero-right {
        height: 100%;
        bottom: 0;
    }
    .faq-hero .ai-hero-right img {
        width: 100%;
        height: 100%;
        min-height: 100%;
        object-fit: cover;
        object-position: center center;
        transform: none;
    }
    .faq-rewamp .ai-faq-container {
        padding: unset !important;
    }
}

/* iPad Mini portrait: up to 768px */
@media only screen and (max-width: 768px) {
    .faq-hero {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .faq-hero .ai-hero-right img {
        object-position: 0% 10%;
        width: 90%;
        max-height: unset;
    }
}

/* Mobile: up to 480px */
@media only screen and (max-width: 480px) {
    .faq-hero .ai-hero-right img {
        object-position: 67% 10%;
        width: 160%;
        transform: translateX(-37%);
    }
}

/* FAQ Content Section - White background */
.faq-content-section {
    padding: 60px clamp(2rem, 6vw, 6rem) !important;
    background-color: #ffffff !important;
}

.faq-content-section .ai-faq-container {
    padding: unset !important;
}

/* Tablet Styles */
@media only screen and (max-width: 1024px) {
    .faq-content-section {
        padding: 40px 16px !important;
    }
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
    .faq-content-section {
        padding: 40px 16px !important;
    }
}

/* Override max-height to allow full content display */
.faq-content-section .faq-answer.active {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Lazy Loading - Hide items beyond initial batch */
.ai-faq-container ul.faq-active-list li.visual-item.faq-item.faq-hidden {
    display: none !important;
}

/* Fade-in animation for newly loaded items */
.ai-faq-container ul.faq-active-list li.visual-item.faq-item.faq-fade-in {
    animation: faqFadeIn 0.4s ease-out forwards;
}

@keyframes faqFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading indicator */
.faq-load-more-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    min-height: 60px;
}

.faq-load-more-trigger.loading::after {
    content: '';
    width: 30px;
    height: 30px;
    border: 3px solid rgba(34, 134, 232, 0.2);
    border-top-color: #2286E8;
    border-radius: 50%;
    animation: faqSpinner 0.8s linear infinite;
}

@keyframes faqSpinner {
    to {
        transform: rotate(360deg);
    }
}