/* Styling specifiek voor AI Verklaring - Gelijk aan Klantenservice FAQ */

#ai-verklaring-page .content-wrapper {
    margin: 0 auto;
}

/* De wrapper krijgt een lijntje aan de bovenkant zoals de FAQ area */
#ai-verklaring-page .faq_area {
    border-top: 1px solid #ddd;
    margin-top: 30px;
}

/* FAQ Item styling uit custom.css */
#ai-verklaring-page .faq_item {
    border-bottom: 1px solid #ddd;
}

/* FAQ Title styling uit custom.css (verwijdert de button-look) */
#ai-verklaring-page .faq_title {
    padding: 20px 0px;
    background: #fff;
    color: #0a0a38;
    font-weight: 500;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

/* Arrow styling exact overgenomen uit jouw custom.css */
#ai-verklaring-page .faq_title span.arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230a0a38' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 10px;
    top: 0;
    margin: auto;
    bottom: 0;
    transition: all 0.5s;
}

/* Rotatie van de pijl bij actieve status */
#ai-verklaring-page .faq_title.active span.arrow {
    transform: rotate(180deg);
}

/* De content (standaard verborgen) */
#ai-verklaring-page .faq_details {
    font-size: 1rem;
    padding: 0px 0px 20px 0px;
    background: #fff;
    display: none; /* Wordt aangestuurd door jQuery slideToggle */
    color: #0a0a38;
}

/* INTRO SECTIE */
#ai-verklaring-page .oefening_title {
    margin-bottom: 20px;
}

#ai-verklaring-page .intro-content {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #0a0a38 !important;
    margin-bottom: 40px;
}

/* RESPONSIVE */
@media only screen and (max-width: 767px) {
    #ai-verklaring-page .faq_title {
        padding-right: 40px;
        font-size: 15px;
    }
}