/* ==========================================================================
   KillarNation — FAQ Components (Free Fire Questions)
   Mobile-first. Uses tokens from tokens.css. No hex values.
   ========================================================================== */


/* ── Filter tabs (archive) ──────────────────────────────────────────────── */

.faq-filters {
    display: flex;
    gap: var(--kn-sp-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--kn-sp-3);
    margin-bottom: var(--kn-sp-4);
}
.faq-filters::-webkit-scrollbar { display: none; }

.faq-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--kn-sp-1);
    padding: var(--kn-sp-2) var(--kn-sp-4);
    font-size: var(--kn-fs-sm);
    font-weight: var(--kn-fw-medium);
    color: var(--kn-text-soft);
    background: var(--kn-surface-sunken);
    border: 1px solid var(--kn-border-light);
    border-radius: var(--kn-radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--kn-transition);
    flex-shrink: 0;
}
.faq-filter-btn:hover {
    border-color: var(--kn-primary);
    color: var(--kn-primary);
}
.faq-filter-btn--active {
    background: var(--kn-yellow-soft);
    color: var(--kn-yellow-dark);
    border-color: var(--kn-primary);
    font-weight: var(--kn-fw-semibold);
}
.faq-filter-btn__count {
    font-size: 10px;
    opacity: .6;
}


/* ── Question list ───────────────────────────────────────────────────────── */

.faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--kn-border-light);
}

.faq-item {
    border-bottom: 1px solid var(--kn-border-light);
}
.faq-item.is-hidden { display: none; }

.faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kn-sp-4);
    padding: var(--kn-sp-4) var(--kn-sp-1);
    text-decoration: none;
    color: var(--kn-text);
    cursor: pointer;
}

.faq-item__q-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.faq-item__cat {
    font-size: var(--kn-fs-xs);
    font-weight: var(--kn-fw-semibold);
    color: var(--kn-yellow-dark);
    text-transform: uppercase;
    letter-spacing: var(--kn-ls-wide);
}

.faq-item__q-text {
    font-size: var(--kn-fs-md);
    font-weight: var(--kn-fw-medium);
    line-height: var(--kn-lh-snug);
}

.faq-item__q-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--kn-surface-sunken);
    color: var(--kn-text-soft);
    font-size: var(--kn-fs-lg);
    line-height: 1;
    transition: var(--kn-transition);
}
.faq-item__q:hover .faq-item__q-icon {
    background: var(--kn-yellow-soft);
    color: var(--kn-yellow-dark);
    transform: rotate(90deg);
}

/* Full answer lives here in the DOM (for the popup + no-JS single page)
   but never renders inline on the archive/list. */
.faq-item__answer[hidden] { display: none; }


/* ── Popup modal ─────────────────────────────────────────────────────────── */

.faq-modal {
    position: fixed;
    inset: 0;
    z-index: var(--kn-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--kn-sp-4);
}
.faq-modal[hidden] { display: none; }

.faq-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.faq-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    max-height: 82vh;
    overflow-y: auto;
    background: var(--kn-surface);
    border-radius: var(--kn-radius-xl);
    box-shadow: var(--kn-shadow-lg);
    padding: var(--kn-sp-8) var(--kn-sp-6) var(--kn-sp-6);
    animation: kn-faq-pop var(--kn-dur-slow) var(--kn-ease);
}

@keyframes kn-faq-pop {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.faq-modal__close {
    position: absolute;
    top: var(--kn-sp-3);
    right: var(--kn-sp-3);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kn-surface-sunken);
    color: var(--kn-text-soft);
    font-size: var(--kn-fs-lg);
    line-height: 1;
    cursor: pointer;
}
.faq-modal__close:hover {
    background: var(--kn-yellow-soft);
    color: var(--kn-yellow-dark);
}

.faq-modal__cat {
    display: inline-block;
    margin-bottom: var(--kn-sp-2);
}

.faq-modal__title {
    font-size: var(--kn-fs-xl);
    font-weight: var(--kn-fw-bold);
    line-height: var(--kn-lh-snug);
    margin: 0 0 var(--kn-sp-4);
    padding-right: var(--kn-sp-8);
}

.faq-modal__body {
    color: var(--kn-text-soft);
    line-height: var(--kn-lh-relaxed);
}
.faq-modal__body p { margin-bottom: var(--kn-sp-3); }
.faq-modal__body p:last-child { margin-bottom: 0; }
.faq-modal__body ul,
.faq-modal__body ol { margin: 0 0 var(--kn-sp-3) var(--kn-sp-5); }

/* Bottom-sheet style on small screens */
@media (max-width: 640px) {
    .faq-modal { align-items: flex-end; padding: 0; }
    .faq-modal__panel {
        max-width: 100%;
        max-height: 85vh;
        border-radius: var(--kn-radius-xl) var(--kn-radius-xl) 0 0;
    }
    @keyframes kn-faq-pop {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}


/* ── Single question page ────────────────────────────────────────────────── */

.faq-single .faq-single__cat { margin-bottom: var(--kn-sp-2); }

.faq-related h2 {
    font-size: var(--kn-fs-xl);
    margin-bottom: var(--kn-sp-2);
}