/* Configuration stays in Elementor; only the runtime copies are interactive. */
.icce-course-carousel a.icce-hotspot {
    display: none !important;
}
.icce-course-carousel .icce-carousel-stage {
    position: relative;
}
.icce-course-carousel .icce-hotspot-link {
    position: absolute;
    z-index: 25;
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}
.icce-course-carousel .icce-hotspot-link[hidden] {
    display: none !important;
    pointer-events: none !important;
}
.icce-course-carousel .icce-hotspot-link:focus-visible {
    outline: 3px solid #b52a2f;
    outline-offset: 2px;
    background: rgb(255 255 255 / 20%);
}

/* Red lesson controls need explicit white icons in both Elementor render modes. */
.icce-course-carousel .elementor-widget-image-carousel .elementor-swiper-button i,
.icce-course-carousel .elementor-widget-image-carousel .elementor-swiper-button svg {
    color: #fff !important;
    fill: #fff !important;
}
/* TheGov replaces eicon glyphs with Flaticon. Keep default Elementor chevrons
 * paired with their original font, leaving custom icon shapes unchanged. */
.icce-course-carousel .elementor-widget-image-carousel .elementor-swiper-button i.eicon-chevron-left::before,
.icce-course-carousel .elementor-widget-image-carousel .elementor-swiper-button i.eicon-chevron-right::before {
    font-family: eicons !important;
    font-style: normal;
    font-weight: normal;
}
.icce-course-carousel .elementor-widget-image-carousel .elementor-swiper-button i.eicon-chevron-left::before {
    content: "\e87e" !important;
}
.icce-course-carousel .elementor-widget-image-carousel .elementor-swiper-button i.eicon-chevron-right::before {
    content: "\e87d" !important;
}

/* Fixed-size touch arrows otherwise cover reference text on narrow images. */
@media (max-width: 767px) {
    .icce-course-carousel .elementor-image-carousel-wrapper {
        padding-bottom: 92px !important;
    }
    .icce-course-carousel .elementor-swiper-button-prev,
    .icce-course-carousel .elementor-swiper-button-next {
        top: calc(100% - 72px) !important;
        transform: none !important;
    }
}

/* Explanations are hoverable, keyboard-readable, and also available by tap. */
.icce-course-carousel .icce-hotspot-info-controls {
    display: flex;
    width: 100%;
    flex-basis: 100%;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.icce-course-carousel .icce-hotspot-info-button {
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid #b52a2f;
    border-radius: 4px;
    background: #fff;
    color: #102d43;
    font: 16px/1.5 Arial, sans-serif;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}
.icce-course-carousel .icce-hotspot-info-button:focus-visible {
    outline: 3px solid #b52a2f;
    outline-offset: 2px;
}
.icce-hotspot-note {
    position: fixed;
    z-index: 100001;
    box-sizing: border-box;
    width: max-content;
    max-width: min(480px, calc(100vw - 24px));
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
    padding: 16px 20px;
    border: 1px solid #31566b;
    border-radius: 6px;
    background: #fff;
    color: #102d43;
    box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
    font: 18px/1.5 Arial, sans-serif;
    text-align: left;
}
.icce-hotspot-note[hidden],
.icce-course-carousel .icce-hotspot-info-controls[hidden],
.icce-course-carousel .icce-hotspot-info-button[hidden] {
    display: none !important;
}

/* Elementor common.css uses position:sticky below 1024px for logged-in
 * lightboxes. That puts the close control underneath the WordPress toolbar.
 * Keep media dialogs fixed below the toolbar; Elementor popup templates retain
 * their own layout. WordPress sets this variable to 32px or 46px by breakpoint.
 */
body.admin-bar .elementor-lightbox:not(.elementor-popup-modal) {
    position: fixed;
    /* Toolbar items can wrap outside its declared height at intermediate widths. */
    z-index: 100000;
    top: var(--wp-admin--admin-bar--height, 32px);
    bottom: 0;
    height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
    height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px));
}

/* Definition popups opened by a slide hotspot; leave other popup styles alone. */
.elementor-popup-modal.icce-hotspot-popup {
    position: fixed !important;
    z-index: 100000;
}
.icce-hotspot-popup .dialog-widget-content {
    max-width: calc(100vw - 32px);
}
.icce-hotspot-popup .dialog-message {
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    max-height: 80dvh;
    overflow-y: auto;
}
/* TheGov's optimized boxed-section grid has fixed breakpoint widths (758px
 * on tablets). A popup has its own width and padding, so that page grid would
 * spill beyond the dialog. Override only the definition's inner grid. */
.elementor-popup-modal.icce-hotspot-popup .icce-definition.elementor-section-boxed > .elementor-container {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}
.icce-hotspot-popup .dialog-close-button {
    z-index: 2;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* Explicit opt-in: only the configured slide's existing video hotspot. */
.icce-course-carousel .icce-hotspot-link.icce-hotspot-video-box {
    box-sizing: border-box;
    border: 1px solid #3c3c3c;
    border-radius: 0;
}
.icce-course-carousel .icce-hotspot-video-box::before,
.icce-course-carousel .icce-hotspot-video-box::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.icce-course-carousel .icce-hotspot-video-box::before {
    box-sizing: border-box;
    width: clamp(44px, 11.2281%, 82px);
    aspect-ratio: 1;
    border: 2px solid rgb(24 44 59 / 50%);
    border-radius: 50%;
    background: rgb(255 255 255 / 50%);
}
.icce-course-carousel .icce-hotspot-video-box::after {
    width: clamp(19.36px, 4.9404%, 36.08px);
    aspect-ratio: 1;
    background: rgb(24 44 59 / 50%);
    clip-path: polygon(25% 12.5%, 87.5% 50%, 25% 87.5%);
    margin-left: clamp(3.08px, .786%, 5.74px);
}

/* Existing slide artwork supplies the border; add only the play cue. */
.icce-course-carousel .icce-hotspot-link.icce-hotspot-video-box.icce-hotspot-play-only {
    border: 0;
}