/* Only EAEL Advanced Accordion. Existing header colors, typography and spacing stay intact. */
/* G410's ecosystem accordion is centered in a flex column with auto width.
   Retain its expanded width when every panel is closed; keep other widgets' sizing. */
.elementor-widget-eael-adv-accordion.elementor-element-1c93654 {
    width: 100%;
}

.eael-adv-accordion [data-aqara-accordion-header] {
    /* Keep the overlay's z-index local so it cannot cover the following panel. */
    isolation: isolate;
}

.eael-adv-accordion [data-aqara-accordion-header] > button.aqara-accordion-toggle {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    cursor: pointer !important;
    z-index: 11 !important;
}

.eael-adv-accordion button.aqara-accordion-toggle::before,
.eael-adv-accordion button.aqara-accordion-toggle::after {
    content: none !important;
}

.eael-adv-accordion [data-aqara-accordion-header] > button.aqara-accordion-toggle:focus-visible {
    outline: 2px solid #222 !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 0 0 4px #fff !important;
}

/* Hover caret follows the title, without overriding the normal/active icon palette.
   JS mirrors the title's transition, so do not interpolate the icon color again. */
.eael-adv-accordion [data-aqara-icon-hover] .fa-toggle,
.eael-adv-accordion [data-aqara-icon-hover] .fa-toggle::before {
    color: var(--aqara-accordion-hover-ink) !important;
    transition-property: transform !important;
}

.eael-adv-accordion [data-aqara-icon-hover] [data-aqara-icon-fill] {
    fill: var(--aqara-accordion-hover-ink) !important;
    transition-property: transform !important;
}

.eael-adv-accordion [data-aqara-icon-hover] [data-aqara-icon-stroke] {
    stroke: var(--aqara-accordion-hover-ink) !important;
    transition-property: transform !important;
}

/* Keep authored title links usable above the transparent toggle hit area. */
.eael-adv-accordion [data-aqara-accordion-header] a[href],
.eael-adv-accordion [data-aqara-accordion-header] button:not(.aqara-accordion-toggle),
.eael-adv-accordion [data-aqara-accordion-header] input,
.eael-adv-accordion [data-aqara-accordion-header] select,
.eael-adv-accordion [data-aqara-accordion-header] textarea {
    position: relative;
    z-index: 12;
}

.eael-adv-accordion [data-aqara-accordion-header] a:focus-visible,
.eael-adv-accordion [data-aqara-accordion-panel] a:focus-visible {
    outline: 2px solid #222 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff !important;
}

.eael-adv-accordion [data-aqara-accordion-panel][hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .eael-adv-accordion[data-aqara-accordion],
    .eael-adv-accordion [data-aqara-accordion-header],
    .eael-adv-accordion [data-aqara-accordion-header] .fa-toggle {
        transition: none !important;
        animation: none !important;
    }
}

@media (forced-colors: active) {
    .eael-adv-accordion [data-aqara-accordion-header] > button.aqara-accordion-toggle:focus-visible,
    .eael-adv-accordion [data-aqara-accordion-header] a:focus-visible,
    .eael-adv-accordion [data-aqara-accordion-panel] a:focus-visible {
        outline-color: Highlight !important;
    }
}