/* FAQ category description - text-align supported in all browsers */
.faqs .faq-category-description {
    text-align: center;
}

/* FAQ item - overflow supported in IE 6+, padding in all browsers */
.faqs .faq-item {
    padding: var(--size-4) 0 0 0;
    overflow: hidden;
}

/* Border for non-first FAQ items - :not(:first-of-type) supported in IE 9+ */
.faqs .faq-item:not(:first-of-type) {
    border-top: var(--size-0) solid var(--color-black);
}

/* Fallback for older browsers without :not() - use adjacent sibling selector */
@supports not selector(:not(*)) {
    .faqs .faq-item + .faq-item {
        border-top: var(--size-0) solid var(--color-black);
    }
}

/* FAQ question styling - display block, cursor, font-weight in all browsers */
.faqs .faq-item .faq-question {
    display: block;
    cursor: pointer;
    font-weight: 700;
}

/* FAQ question SVG icon - float supported in IE 6+, font-size in all browsers */
.faqs .faq-item .faq-question svg {
    float: right;
    font-size: var(--size-5);
    color: var(--color-prescriptions);
    /* transform property - supported in IE 9+ (with -ms- prefix) */
    transition: transform 0.3s ease;
}

/* Vendor prefix for older IE versions */
.faqs .faq-item .faq-question svg {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* FAQ answer - display none/block supported in all browsers */
.faqs .faq-item .faq-answer {
    display: none;
    padding: var(--size-3) 0;
}

/* Active FAQ item - styling for open state */
.faqs .faq-item.active .faq-question svg {
    /* transform: rotate() - supported in IE 9+ (with -ms- prefix) */
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Active FAQ answer - display the answer when item is active */
.faqs .faq-item.active .faq-answer {
    display: block;
}