/* The square target is transparent; only its centered pseudo-element paints the original dot. */
.elementor-widget-image-carousel .swiper-pagination-bullet[data-aqara-image-dot] {
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle;
    width: max(24px, var(--aqara-dot-width)) !important;
    height: max(24px, var(--aqara-dot-height)) !important;
    margin-left: var(--aqara-dot-left) !important;
    margin-right: var(--aqara-dot-right) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
}
.elementor-widget-image-carousel .swiper-pagination-bullet[data-aqara-image-dot]::before {
    content: "" !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--aqara-dot-width);
    height: var(--aqara-dot-height);
    border-radius: var(--aqara-dot-radius);
    background: var(--aqara-dot-background);
    opacity: var(--aqara-dot-opacity);
    box-shadow: var(--aqara-dot-shadow);
    pointer-events: none;
}
.elementor-widget-image-carousel [data-aqara-image-dot]:focus-visible,
.elementor-widget-image-carousel .elementor-swiper-button:focus-visible,
.elementor-widget-image-carousel .aqara-image-carousel-rotation:focus-visible {
    outline: 2px solid #222222 !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 0 0 4px #ffffff !important;
}
.elementor-widget-image-carousel .swiper-slide a:focus-visible,
.elementor-widget-image-carousel [data-aqara-image-keyboard]:focus-visible {
    outline: 2px solid #222222 !important;
    outline-offset: -4px !important;
    box-shadow: inset 0 0 0 6px #ffffff !important;
}
.elementor-widget-image-carousel .swiper-slide a:focus-visible { display: block; }
.elementor-widget-image-carousel .aqara-image-carousel-rotation {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 12px !important;
    inset-inline-end: 12px !important;
    z-index: 5 !important;
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid #ffffff !important;
    border-radius: 50% !important;
    background: #222222 !important;
    color: #ffffff !important;
    cursor: pointer !important;
}
.elementor-widget-image-carousel .aqara-image-carousel-rotation svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.elementor-widget-image-carousel .aqara-image-carousel-rotation::before,
.elementor-widget-image-carousel .aqara-image-carousel-rotation::after { content: none !important; }
.aqara-image-carousel-rotation[data-playing="true"] .aqara-image-play,
.aqara-image-carousel-rotation[data-playing="false"] .aqara-image-pause { display: none; }
@media (hover: hover) and (pointer: fine) {
    .elementor-widget-image-carousel:not(:hover):not(:focus-within) .aqara-image-carousel-rotation {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .elementor-widget-image-carousel .swiper-wrapper { transition-duration: 0ms !important; }
}
@media (forced-colors: active) {
    .elementor-widget-image-carousel [data-aqara-image-dot]:focus-visible,
    .elementor-widget-image-carousel .elementor-swiper-button:focus-visible,
    .elementor-widget-image-carousel .aqara-image-carousel-rotation:focus-visible,
    .elementor-widget-image-carousel .swiper-slide a:focus-visible,
    .elementor-widget-image-carousel [data-aqara-image-keyboard]:focus-visible { outline-color: Highlight !important; }
    .elementor-widget-image-carousel [data-aqara-image-dot]::before { background: ButtonText; }
    .elementor-widget-image-carousel [data-aqara-image-dot][aria-current="true"]::before { background: Highlight; }
}