/*==================================================
  FAQ Section
==================================================*/

.faq-section{
    padding:80px 0;
    background:#fff;
}

.faq-wrapper{
    max-width:900px;
    margin:0 auto;
}

.faq-item{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    margin-bottom:20px;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

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

.faq-item.active{
    border-color:var(--primary);
}

.faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:22px 24px;
    border:none;
    background:transparent;
    cursor:pointer;
    text-align:left;
    font-size:18px;
    font-weight:600;
    color:var(--dark);
    transition:var(--transition);
}

.faq-question:hover{
    color:var(--primary);
}

.faq-icon{
    flex-shrink:0;
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--light);
    color:var(--primary);
    font-size:22px;
    font-weight:700;
    transition:var(--transition);
}

/*==================================================
  FAQ Answer
==================================================*/

.faq-answer{
    display:none;
    padding:0 24px 24px;
    color:var(--text);
    line-height:1.8;
    border-top:1px solid var(--border);
}

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

.faq-answer ul,
.faq-answer ol{
    margin:15px 0 15px 20px;
}

.faq-answer li{
    margin-bottom:8px;
}

/*==================================================
  Active State
==================================================*/

.faq-item.active .faq-question{
    color:var(--primary);
}

.faq-item.active .faq-icon{
    background:var(--primary);
    color:#fff;
}

.faq-item.active .faq-icon::before{
    content:"−";
}

.faq-icon::before{
    content:"+";
}

.faq-question span:last-child{
    font-size:0;
}

/*==================================================
  Empty State
==================================================*/

.faq-empty{
    max-width:700px;
    margin:0 auto;
    padding:50px 30px;
    text-align:center;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow);
}

.faq-empty h3{
    margin-bottom:15px;
    color:var(--dark);
}

.faq-empty p{
    margin:0;
    color:var(--text);
}

/*==================================================
  Responsive
==================================================*/

@media (max-width:767px){

    .faq-section{
        padding:60px 0;
    }

    .faq-question{
        padding:18px;
        font-size:16px;
    }

    .faq-answer{
        padding:0 18px 18px;
    }

}