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

.faq-section{
    padding:10px 0 100px;
}

/* ---------- Toolbar: expand-all + quick category nav ---------- */

.shortcut-toggle-all{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:11px 24px;
    border:none;
    border-radius:22px;

    background:linear-gradient(135deg,#eef3ff,#f3f5fa);
    color:#4169e1;

    font-family:inherit;
    font-size:.95rem;
    font-weight:600;

    cursor:pointer;

    box-shadow:0 4px 12px rgba(79,124,255,.12);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.shortcut-toggle-all:hover{
    background:linear-gradient(135deg,#4f7cff,#755cff);
    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(79,124,255,.22);
}

.shortcut-toggle-all:active{
    transform:translateY(0);
    box-shadow:0 4px 12px rgba(79,124,255,.15);
}

.faq-toolbar{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    margin-bottom:45px;
}

.faq-quicknav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px 8px;
    width:100%;
    max-width:1100px;
    margin:0 auto;
}

.faq-chip{
    flex:0 0 auto;
    white-space:nowrap;
    display:inline-block;
    padding:9px 8px;
    border-radius:16px;
    background:#f3f5fa;
    color:#667085;
    font-weight:600;
    font-size:.9rem;
    text-decoration:none;
    transition:.25s ease;
}

.faq-chip:hover{
    background:linear-gradient(135deg,#4f7cff,#755cff);
    color:#fff;
    transform:translateY(-2px);
}

/* ---------- Category groups ---------- */

.faq-list{
    max-width:850px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:50px;
}

.faq-category{
    scroll-margin-top:110px;
}

.faq-category-title{
    display:flex;
    align-items:center;
    gap:16px;
    margin:0 0 22px;
    padding-bottom:14px;
    font-size:1.4rem;
    letter-spacing:-.02em;
    border-bottom:2px solid transparent;
    border-image:linear-gradient(90deg,#4f7cff,#8b5cf6) 1;
}

.faq-category-icon{
    width:46px;
    height:46px;
    flex:0 0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:16px;
    background:#eef3ff;
    font-size:1.4rem;
}

/* ---------- Accordion items ---------- */

.faq-item{
    background:white;
    border-radius:22px;
    border:1px solid rgba(15,23,42,.06);
    margin-bottom:14px;
    overflow:hidden;
    transition:box-shadow .25s ease, border-color .25s ease;
}

.faq-item:last-child{
    margin-bottom:0;
}

.faq-item.open{
    box-shadow:0 20px 45px rgba(15,23,42,.08);
    border-color:rgba(79,124,255,.25);
}

.faq-item h3{
    margin:0;
}

.faq-question{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
    border:none;
    background:transparent;
    cursor:pointer;
    padding:22px 26px;
    text-align:left;
    font-family:inherit;
    font-size:1rem;
}

.faq-q-mark{
    flex:0 0 auto;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:32px;
    height:32px;
    border-radius:10px;
    background:#eef3ff;
    color:#4169e1;
    font-weight:700;
    font-size:.85rem;
}

.faq-question-text{
    flex:1 1 auto;
    font-weight:600;
    color:#1a1f36;
    letter-spacing:-.01em;
}

.faq-toggle-icon{
    flex:0 0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:#f3f5fa;
    color:#4f7cff;
    font-size:1.1rem;
    font-weight:700;
    transition:transform .3s ease, background .3s ease, color .3s ease;
}

.faq-item.open .faq-toggle-icon{
    transform:rotate(45deg);
    background:linear-gradient(135deg,#4f7cff,#755cff);
    color:#fff;
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease, opacity .3s ease;
    opacity:0;
}

.faq-item.open .faq-answer{
    opacity:1;
}

.faq-answer p{
    margin:0;
    padding:0 26px 24px 74px;
    color:#667085;
    line-height:1.65;
}

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

@media(max-width:700px){
    .faq-answer p{
        padding-left:26px;
    }

    .faq-category-title{
        font-size:1.2rem;
    }

    .faq-question{
        padding:18px 18px;
    }

}

@media(max-width:480px){
    .faq-chip{
        font-size:.82rem;
        padding:8px 14px;
    }

}

@media(max-width:1000px){
    .faq-quicknav{
        grid-template-columns:repeat(4, max-content);
    }
}

@media(max-width:760px){
    .faq-quicknav{
        grid-template-columns:repeat(3, max-content);
    }
}

@media(max-width:520px){
    .faq-quicknav{
        grid-template-columns:repeat(2, max-content);
    }
}