/* ===== FAQ Page ===== */

.faq-page {
    margin: 0 auto;
    padding: 30px 45px;
    width: 100%;
    position: relative;
}

/* Skeleton shimmer */
@keyframes faqShimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.faq-skeleton {
    position: absolute;
    top: 30px;
    left: 45px;
    right: 45px;
    z-index: 2;
    transition: opacity 170ms ease;
}

.faq-skeleton-hide {
    opacity: 0;
}

.faq-skeleton-title {
    width: 220px;
    height: 28px;
    border-radius: 8px;
    margin-bottom: 18px;
    background: linear-gradient(90deg, #23243a 25%, #2e2f4a 50%, #23243a 75%);
    background-size: 800px 100%;
    animation: faqShimmer 1.2s infinite ease-in-out;
}

.faq-skeleton-item {
    width: 100%;
    height: 52px;
    border-radius: 10px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #23243a 25%, #2e2f4a 50%, #23243a 75%);
    background-size: 800px 100%;
    animation: faqShimmer 1.2s infinite ease-in-out;
}

.faq-skeleton-item:nth-child(2) { animation-delay: 0.1s; }
.faq-skeleton-item:nth-child(3) { animation-delay: 0.2s; }
.faq-skeleton-item:nth-child(4) { animation-delay: 0.3s; }
.faq-skeleton-item:nth-child(5) { animation-delay: 0.4s; }
.faq-skeleton-item:nth-child(6) { animation-delay: 0.5s; }

#faqContent {
    transition: opacity 170ms ease;
}

.faq-page .vip-faq-section {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .faq-page {
        padding: 20px 16px;
    }
    .faq-skeleton {
        top: 20px;
        left: 16px;
        right: 16px;
    }
}