/* =========================================================
   FAQ Manager — Frontend Styles
   ========================================================= */

/* ---- Zoekbalk ---- */
.faqm-search-wrap {
    margin-bottom: 1.2rem;
}

.faqm-search {
    width: 100%;
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
    border: 2px solid var(--bs-gray-300, #dee2e6);
    border-radius: 0.3rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.faqm-search:focus {
    border-color: var(--bs-black, #000000);
}

/* ---- Letter-navigatie ---- */
.faqm-letter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 1.6rem;
}

.faqm-letter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--bs-gray-300, #dee2e6);
    border-radius: 0.2rem;
    font-weight: 700;
    font-size: 0.7rem;
    text-decoration: none;
    color: var(--bs-black, #000000);
    transition: background 0.15s, color 0.15s;
}

.faqm-letter-link:hover,
.faqm-letter-link:focus {
    background: var(--bs-black, #000000);
    color: var(--bs-white, #ffffff);
    border-color: var(--bs-black, #000000);
}

/* ---- Letter groepen ---- */
.faqm-letter-group {
    margin-bottom: 2rem;
}

.faqm-letter-heading {
    font-size: 1.1rem;
    font-weight: 700;
    border-bottom: 2px solid var(--bs-gray-200, #e9ecef);
    padding-bottom: 0.3rem;
    margin-bottom: 0.8rem;
}

/* ---- Verborgen items bij zoeken ---- */
.faqm-accordion-item[hidden] {
    display: none;
}

/* ---- Productpagina sectie ---- */
.faqm-product-faq-section {
    margin-top: 0;
    margin-bottom: 1.6rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bs-gray-300, #dee2e6);
}

.faqm-product-faq-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* ---- Geen resultaten ---- */
.faqm-no-results {
    font-style: italic;
}

/* ---- Lettergroep verborgen als alle kinderen verborgen zijn ---- */
.faqm-letter-group.faqm-all-hidden {
    display: none;
}

/* =====================================================
   FAQ Accordion — stijlen overgenomen uit thema
   ===================================================== */
.faqm-overview .accordion {
    width: 100%;
}
.faqm-overview .accordion,
.faqm-overview .accordion-item,
.faqm-overview .accordion .accordion-button {
    border: 0;
    box-shadow: none;
    border-radius: 0 !important;
}
.faqm-overview .accordion-item {
    border: 0.25px solid var(--grey, #dee2e6) !important;
    border-radius: 0 !important;
}
.faqm-overview .accordion .accordion-button {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.faqm-overview .accordion-item {
    background: var(--white, #ffffff);
}
.faqm-overview .accordion-item + .accordion-item {
    margin-top: 0.75rem;
}
.faqm-overview .accordion .accordion-button.collapsed,
.faqm-overview .accordion .accordion-button {
    background: none !important;
}
.faqm-overview .accordion .accordion-button .accordion-button__title {
    font-size: 0.8rem;
    color: var(--bs-black, #000000);
    font-weight: 600;
    line-height: 1.75rem;
}
.faqm-overview .accordion .accordion-button::after {
    display: none;
}
.faqm-overview .accordion .accordion-item .accordion-body {
    font-size: 0.8rem;
    color: var(--bs-black, #000000);
    background: none;
    padding: 0 1.25rem 1rem 1.25rem;
    border-radius: 0;
}
.faqm-overview .accordion .accordion-button:not(.collapsed) .accordion-button__arrow {
    animation: rotate-90-cw 0.1s ease-in-out both;
}
.faqm-overview .accordion .accordion-button.collapsed .accordion-button__arrow {
    animation: rotate-0-ccw 0.1s ease-in-out both;
}
@keyframes rotate-90-cw {
    0%   { transform: rotate(0); }
    100% { transform: rotate(90deg); }
}
@keyframes rotate-0-ccw {
    0%   { transform: rotate(90deg); }
    100% { transform: rotate(0); }
}
@media all and (max-width: 767px) {
    .faqm-overview .accordion .accordion-button span.title {
        font-size: 0.7rem;
    }
}