/* FAQ Switcher */
.cpx-faq-switcher {
    --cpx-faq-switcher-border: var(--e-global-color-c0c5761);
    --cpx-faq-switcher-accent: var(--e-global-color-primary);
    --cpx-faq-switcher-text: var(--e-global-color-text);
    --cpx-faq-switcher-bg: var(--e-global-color-secondary);
}

.cpx-faq-switcher__header {
    position: relative;
    z-index: 10;
    margin-bottom: 1.5em;
}

.cpx-faq-switcher__heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 0.6em;
    align-items: center;
    margin: 0;
}

.cpx-faq-switcher__heading-text {
    color: var(--cpx-faq-switcher-text);
}

/* Custom select */
.cpx-faq-switcher__select {
    position: relative;
    display: inline-block;
}

.cpx-faq-switcher__select-trigger {
    display: inline-flex;
    gap: 0.5em;
    align-items: center;
    padding: 0.25em 0.6em;
    background: transparent;
    border: 2px solid var(--cpx-faq-switcher-accent);
    border-radius: 6px;
    color: var(--cpx-faq-switcher-accent);
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:focus {
        outline: none !important;
    }
}

.cpx-faq-switcher__select-trigger:hover {
    background-color: color-mix(in srgb, var(--cpx-faq-switcher-accent) 10%, transparent);
}

.cpx-faq-switcher__select-arrow {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    margin-bottom: -3px;
}

.cpx-faq-switcher__select.is-open .cpx-faq-switcher__select-arrow {
    transform: rotate(180deg);
}

.cpx-faq-switcher__select-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    width: max-content;
    min-width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--cpx-faq-switcher-bg);
    border: 1px solid var(--cpx-faq-switcher-border);
    border-radius: 6px;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease;
    pointer-events: none;
}

.cpx-faq-switcher__select.is-open .cpx-faq-switcher__select-list {
    max-height: 400px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cpx-faq-switcher__select-option {
    padding: 0.7em 1em;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--cpx-faq-switcher-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cpx-faq-switcher__select-option:hover,
.cpx-faq-switcher__select-option.is-active {
    color: var(--e-global-color-c0c5761);
    background-color: color-mix(in srgb, var(--cpx-faq-switcher-accent) 10%, transparent);
}

/* Panels */
.cpx-faq-switcher__panel {
    display: none;
}

.cpx-faq-switcher__panel.is-active {
    display: block;
}

@media screen and (max-width: 768px) {

    .cpx-faq-switcher__heading-text,
    .cpx-faq-switcher__select,
    .cpx-faq-switcher__select-trigger {
        width: 100% !important;
    }
}