.motion-slider {
    --ms-height: var(--height-mobile, 350px);
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--bg-color, #000);
    flex-shrink: 0; /* survive a column flex/grid parent */
}

/* Accessibility: Pause/Play overlay control (non-intrusive) */
.motion-slider .motion-slider-toggle {
    position: absolute;
    z-index: 12;
    right: 12px;
    top: 12px;
    min-width: 44px; /* target size */
    min-height: 44px; /* target size */
    padding: 8px 10px;
    font: inherit;
    color: #111;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    cursor: pointer;
    transition: opacity .2s ease;
    opacity: 0.0;
}

/*
 * Theme-proof: some themes set `button { width:100% }`. Keep the toggle
 * sized to its label, not the slider width.
 */
.motion-slider > button.motion-slider-toggle {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: fit-content !important;
    height: auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
}
.motion-slider.high-contrast-controls .motion-slider-toggle {
    background: #fff;
    border-color: #000;
    color: #000;
}
.motion-slider:hover .motion-slider-toggle,
.motion-slider:focus-within .motion-slider-toggle {
    opacity: 1.0;
}
.motion-slider .motion-slider-toggle:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .motion-slider {
        --ms-height: var(--height-tablet, 450px);
    }
}

@media (min-width: 1024px) {
    .motion-slider {
        --ms-height: var(--height-desktop, 600px);
    }
}

/* Theme-proof: track and slides are 100%/absolute, so the slider has no
   intrinsic height and a single overridden `height` collapses it entirely. */
.motion-slider.motion-slider {
    height: var(--ms-height);
    min-height: var(--ms-height);
}

.motion-slider-track {
    position: relative;
    height: 100%;
    width: 100%;
}

.motion-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    /* background-image removed, handled by ::after */
    background-color: var(--slide-bg-color, var(--bg-color, transparent));
    opacity: 0;
    transition: opacity 0.5s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Contain the ::after pseudo-element */
    pointer-events: none; /* Make non-current slides non-interactive */
}

.motion-slide::after { /* Pseudo-element for background image */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--slide-bg-color, var(--bg-color, transparent));
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    z-index: 0; /* Behind content and overlay */
}

/* Slide Transitions */
.motion-slide.current { /* Use .current for visibility */
    opacity: 1;
    z-index: 2; /* Ensure current slide is above others and potentially the overlay initially */
    pointer-events: auto; /* Make current slide interactive */
}

.motion-slider[data-transition="slide"] .motion-slide {
    /* transform: translateX(100%); */ /* Rely on JS to set initial/reset positions */
    opacity: 1; /* Slides should be opaque during transition */
    transition: transform 0.5s ease-in-out;
}

.motion-slider[data-transition="slide"] .motion-slide.current { /* Use .current */
    transform: translateX(0);
}

/* Ken Burns Effect (Animation Definition) */
@keyframes kenburns-dynamic {
    0% {
        transform: scale(var(--kb-start-scale, 1)) translate(var(--kb-start-tx, 0), var(--kb-start-ty, 0));
    }
    100% {
        transform: scale(var(--kb-end-scale, 1.1)) translate(var(--kb-end-tx, 0), var(--kb-end-ty, 0));
    }
}

/* Apply Ken Burns Animation - Use .kb-animate class */
.motion-slider[data-transition="kenburns"] .motion-slide.kb-animate::after { 
    transform: scale(var(--kb-start-scale, 1)) translate(var(--kb-start-tx, 0px), var(--kb-start-ty, 0px));
    animation-name: kenburns-dynamic;
    animation-duration: var(--kb-duration, 5000ms);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    will-change: transform;
}

/* Ensure default opacity transition isn't overridden for Ken Burns */
.motion-slider[data-transition="kenburns"] .motion-slide {
     /* No transition: none; here */
     /* Ensure base opacity transition applies */
}

/* Slide content */
.motion-slide-content {
    position: relative;
    box-sizing: border-box;
    width: 100%; /* Allow it to take full width of parent initially */
    max-width: min(800px, calc(100% - 132px)); /* Primary width constraint */
    max-height: 100%; /* Stay inside the padded slide */
    min-height: 0; /* Allow flex item to shrink below intrinsic content height */
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2rem;
    margin-left: auto; /* Center the block */
    margin-right: auto; /* Center the block */
    text-align: center;
    color: var(--content-color, #fff);
    text-shadow: var(--content-text-shadow, none);
    z-index: 2; /* Ensure content is above slide overlay */
    background-color: rgba(var(--content-box-rgb, 0, 0, 0), var(--content-box-alpha, 0.35));
    border-radius: var(--content-box-radius, 10px);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.2);
}

/* Show content only when slide is current */
.motion-slider .motion-slide.current .motion-slide-content {
    opacity: 1;
    /* transition: none; */ /* Let transition apply */
}

.motion-slide-content.is-scrollable,
.motion-global-content.is-scrollable {
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

.motion-slide-content::-webkit-scrollbar,
.motion-global-content::-webkit-scrollbar {
    width: 8px;
}
.motion-slide-content::-webkit-scrollbar-track,
.motion-global-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.motion-slide-content::-webkit-scrollbar-thumb,
.motion-global-content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.motion-slide::before { /* Dark overlay */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* Ensure overlay is above background pseudo-element */
}

h2.motion-slide-title {
    font-size: 2.5rem;
    margin: 0 0 1rem;
    line-height: 1.2;
    color: var(--content-color, #fff) !important;
}

.motion-slide-text {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.motion-slide-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #fff;
    color: #000;
    text-decoration: none;
    text-shadow: none;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.motion-slide-button:hover {
    background: #000;
    color: #fff;
}

/* Button Styling */
.motion-slide-buttons-wrap {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    gap: 1rem; /* Space between buttons */
    justify-content: center; /* Default alignment */
    margin-top: 1.5rem; /* Space above the button group */
}

/* Content alignment: text and buttons inside the content area */
.motion-slide.content-align-left .motion-slide-content {
    text-align: left;
}
.motion-slide.content-align-left .motion-slide-buttons-wrap {
    justify-content: flex-start;
}

.motion-slide.content-align-right .motion-slide-content {
    text-align: right;
}
.motion-slide.content-align-right .motion-slide-buttons-wrap {
    justify-content: flex-end;
}

/* Content position: where the content area sits in the frame.
   Side placement sizes the area to its content, up to the same max width as center,
   so a short block does not stay an 800px panel with the text stranded in the middle.
   66px matches half the 132px gutter and clears the arrows.
   Two columns keep the wide panel; only the side changes. */
.motion-slide.content-position-left .motion-slide-content,
.motion-slide.content-position-right .motion-slide-content {
    width: max-content;
    max-width: min(800px, calc(100% - 132px));
    min-width: 0;
}
.motion-slide.content-position-left .motion-slide-content {
    margin-left: 66px;
    margin-right: auto;
}
.motion-slide.content-position-right .motion-slide-content {
    margin-left: auto;
    margin-right: 66px;
}
.motion-slide.content-position-left .motion-slide-content.motion-content-layout-two,
.motion-slide.content-position-right .motion-slide-content.motion-content-layout-two {
    width: 100%;
    max-width: min(1120px, calc(100% - 132px));
}

.motion-content-col.col-align-left {
    text-align: left;
}
.motion-content-col.col-align-left .motion-slide-buttons-wrap,
.motion-content-col.col-align-left .motion-global-buttons-wrap {
    justify-content: flex-start;
}
.motion-content-col.col-align-left .motion-slide-media img,
.motion-content-col.col-align-left .motion-global-media img {
    margin-left: 0;
    margin-right: auto;
}

.motion-content-col.col-align-center {
    text-align: center;
}
.motion-content-col.col-align-center .motion-slide-buttons-wrap,
.motion-content-col.col-align-center .motion-global-buttons-wrap {
    justify-content: center;
}
.motion-content-col.col-align-center .motion-slide-media img,
.motion-content-col.col-align-center .motion-global-media img {
    margin-left: auto;
    margin-right: auto;
}

.motion-content-col.col-align-right {
    text-align: right;
}
.motion-content-col.col-align-right .motion-slide-buttons-wrap,
.motion-content-col.col-align-right .motion-global-buttons-wrap {
    justify-content: flex-end;
}
.motion-content-col.col-align-right .motion-slide-media img,
.motion-content-col.col-align-right .motion-global-media img {
    margin-left: auto;
    margin-right: 0;
}

/* In-container content layout (image, subtitle, columns) */
.motion-slide-media,
.motion-global-media {
    margin: 0 0 1rem;
}
.motion-slide-media:last-child,
.motion-global-media:last-child {
    margin-bottom: 0;
}
.motion-slide-media img,
.motion-global-media img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(var(--ms-height) - 8rem);
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}

/* Column position places the image in that column. Text still follows alignment.
   Unset position leaves the image on the alignment side, so older sliders stay put. */
.motion-content-col.col-position-left,
.motion-content-col.col-position-center,
.motion-content-col.col-position-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.motion-content-col.col-position-left .motion-slide-media,
.motion-content-col.col-position-left .motion-global-media {
    align-self: flex-start;
    width: auto;
    max-width: 100%;
}
.motion-content-col.col-position-center .motion-slide-media,
.motion-content-col.col-position-center .motion-global-media {
    align-self: center;
    width: auto;
    max-width: 100%;
}
.motion-content-col.col-position-right .motion-slide-media,
.motion-content-col.col-position-right .motion-global-media {
    align-self: flex-end;
    width: auto;
    max-width: 100%;
}
.motion-content-col.col-position-left .motion-slide-media img,
.motion-content-col.col-position-left .motion-global-media img,
.motion-content-col.col-position-center .motion-slide-media img,
.motion-content-col.col-position-center .motion-global-media img,
.motion-content-col.col-position-right .motion-slide-media img,
.motion-content-col.col-position-right .motion-global-media img {
    margin-left: 0;
    margin-right: 0;
}

.motion-slide-subtitle,
.motion-global-subtitle {
    font-size: 1.25rem;
    margin: 0 0 1rem;
    line-height: 1.35;
    color: var(--content-color, #fff);
}

.motion-slide-content.motion-content-layout-two,
.motion-global-content.motion-content-layout-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem 2rem;
    align-items: center;
}
.motion-slide-content.motion-content-layout-two {
    max-width: min(1120px, calc(100% - 132px));
}
.motion-global-content.motion-content-layout-two {
    max-width: min(1120px, calc(100% - 172px));
}

.motion-content-col {
    min-width: 0;
    min-height: 0;
}
.motion-content-col > .motion-slide-buttons-wrap:first-child,
.motion-content-col > .motion-global-buttons-wrap:first-child {
    margin-top: 0;
}
.motion-content-col > *:last-child {
    margin-bottom: 0;
}

/* Navigation arrows - Base styles */
.motion-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    cursor: pointer;
    z-index: 11; /* Increased to be above global content */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
    box-sizing: border-box;
    overflow: visible;
}

.motion-slider-nav.prev {
    left: 20px;
}

.motion-slider-nav.next {
    right: 20px;
}

/* Icon fills the SVG box; stays visible in flex layouts */
.motion-slider-nav .motion-arrow-icon {
    display: block;
    flex: 0 0 auto;
    overflow: visible;
    box-sizing: border-box;
}

/* Arrow Style: White Circle */
.motion-slider-nav.arrow-style-white-circle {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    color: #333;
    aspect-ratio: 1;
    flex-shrink: 0;
    max-width: 44px;
    max-height: 44px;
}

.motion-slider-nav.arrow-style-white-circle:hover {
    background: rgba(255, 255, 255, 1);
}

.motion-slider-nav.arrow-style-white-circle .motion-arrow-icon {
    width: 22px;
    height: 22px;
}

/* Arrow Style: Dark Circle */
.motion-slider-nav.arrow-style-dark-circle {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    color: #fff;
    aspect-ratio: 1;
    flex-shrink: 0;
    max-width: 44px;
    max-height: 44px;
}

.motion-slider-nav.arrow-style-dark-circle:hover {
    background: rgba(0, 0, 0, 0.8);
}

.motion-slider-nav.arrow-style-dark-circle .motion-arrow-icon {
    width: 22px;
    height: 22px;
}

/* Arrow Style: Arrow Only */
.motion-slider-nav.arrow-style-arrow-only {
    background: transparent;
    border-radius: 0;
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    color: #fff;
}

.motion-slider-nav.arrow-style-arrow-only .motion-arrow-icon {
    width: 36px;
    height: 36px;
    /* Readable on light backgrounds without changing default fill */
    filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.35)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.motion-slider-nav.arrow-style-arrow-only:hover .motion-arrow-icon {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

/* Hide until hover functionality */
.motion-slider-nav.hide-until-hover {
    opacity: 0;
    visibility: hidden;
}

.motion-slider:hover .motion-slider-nav.hide-until-hover {
    opacity: 1;
    visibility: visible;
}

/* Navigation dots */
.motion-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

/* Compact dot target; WCAG 2.1 AA does not require the 44px AAA target size. */
.motion-slider-dot {
    position: relative;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.motion-slider-dot::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.3s;
}

/* Ensure minimum target size for arrows */
.motion-slider .motion-slider-nav {
    min-width: 44px;
    min-height: 44px;
}

.motion-slider .motion-slider-nav.arrow-style-white-circle,
.motion-slider .motion-slider-nav.arrow-style-dark-circle {
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
}

.motion-slider .motion-slider-nav.arrow-style-arrow-only {
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
}

/*
 * Theme-proof: some themes set `button { width:100%; padding:… }`. These nav buttons are
 * `position:absolute` children of `.motion-slider`; percentage width becomes the slider width.
 */
.motion-slider > button.motion-slider-nav {
    box-sizing: border-box !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
}

.motion-slider > button.motion-slider-nav.arrow-style-arrow-only {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
}

.motion-slider-dot:hover::before {
    background: rgba(255, 255, 255, 0.5);
}

.motion-slider-dot.active::before {
    background: #fff;
}

/* Focus and high-contrast enhancements */
.motion-slider .motion-slider-dot:focus,
.motion-slider .motion-slider-nav:focus,
.motion-slider .motion-slider-toggle:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}
.motion-slider.high-contrast-controls .motion-slider-dot::before {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #000;
}

.motion-slider.high-contrast-controls .motion-slider-dot.active::before {
    background-color: #fff;
}

.motion-slider.high-contrast-controls .motion-slider-nav {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #000;
}

/* Mobile optimizations */
@media (max-width: 767px) {
    /* Adjust slide layout to push content up */
    .motion-slide {
        align-items: flex-start; /* Align content to top */
        padding-top: 1rem; /* Add some space from top */
        padding-bottom: 70px; /* Create space at bottom for nav */
    }

    .motion-slide-title,
    h2.motion-global-title { /* Target both titles */
        font-size: 1.5rem; /* Reduce further */
    }

    .motion-slide-text {
        font-size: 1rem;
    }

    .motion-slider-nav {
        width: 36px;
        height: 36px;
        /* Reposition arrows to bottom corners */
        top: auto;
        bottom: 15px; 
        transform: none;
        font-size: 14px;
    }

    /* Match global min-* to layout size so themes’ width/height are not beaten by 44px min (oval buttons). */
    .motion-slider .motion-slider-nav {
        min-width: 36px;
        min-height: 36px;
    }

    .motion-slider .motion-slider-nav.arrow-style-white-circle,
    .motion-slider .motion-slider-nav.arrow-style-dark-circle {
        min-width: 36px;
        min-height: 36px;
        max-width: 36px;
        max-height: 36px;
    }
    
    .motion-slider-nav.arrow-style-arrow-only {
        width: 50px;
        height: 50px;
        max-width: 50px;
        max-height: 50px;
    }

    .motion-slider .motion-slider-nav.arrow-style-arrow-only {
        min-width: 50px;
        min-height: 50px;
        max-width: 50px;
        max-height: 50px;
    }

    .motion-slider > button.motion-slider-nav {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }

    .motion-slider > button.motion-slider-nav.arrow-style-arrow-only {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }
    
    .motion-slider-nav.arrow-style-arrow-only .motion-arrow-icon {
        width: 44px;
        height: 44px;
    }
    
    .motion-slider-nav.arrow-style-white-circle,
    .motion-slider-nav.arrow-style-dark-circle {
        max-width: 36px;
        max-height: 36px;
    }

    .motion-slider .motion-slider-nav.arrow-style-white-circle,
    .motion-slider .motion-slider-nav.arrow-style-dark-circle {
        max-width: 36px;
        max-height: 36px;
    }
    
    .motion-slider-nav.arrow-style-white-circle .motion-arrow-icon,
    .motion-slider-nav.arrow-style-dark-circle .motion-arrow-icon {
        width: 18px;
        height: 18px;
    }
    
    .motion-slider-nav.prev {
        left: 15px; 
    }
    .motion-slider-nav.next {
        right: 15px; 
    }

    .motion-slider-dots {
        /* Keep dots centered at bottom */
        bottom: 15px; 
        /* Adjust gap if needed */
         gap: 8px; 
    }

    /* Reduce button size on mobile */
    .motion-slide-button,
    .motion-global-button { /* Target both buttons */
        padding: 0.5rem 1.25rem; /* Reduce padding */
        font-size: 0.9rem; /* Optionally reduce font size slightly */
    }

    /* Reset content width and ensure it respects padding */
    .motion-slide-content,
    .motion-global-content {
         /* max-width: calc(100% - 2rem); */ /* This is covered by base style width + max-width */
         /* margin-bottom: 0; */ /* Base style has auto margins for centering, mb 0 might be okay if not centered */
    }

    .motion-slide-content {
        padding: 1em;
        max-height: 100%; /* Limit height to available space */
        overflow-y: auto; /* Add scrollbar if needed */
        /* Scrollbar Styling (Firefox) */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.2); /* thumb track */
        /* border-bottom: 2px solid rgba(255, 255, 255, 0.5); */ /* REMOVED direct border */
    }
    /* Apply border only when scrollable */
    .motion-slide-content.is-scrollable {
         border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    }

    /* Scrollbar Styling (Webkit) - Moved outside */
    .motion-slide-content::-webkit-scrollbar {
        width: 8px;
    }
    .motion-slide-content::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2); 
        border-radius: 4px;
    }
    .motion-slide-content::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 4px;
        border: 2px solid transparent; /* Optional padding around thumb */
        background-clip: content-box; /* Ensure border doesn't make thumb thicker */
    }

    .motion-slide-content h2.motion-slide-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    /* Adjust global content positioning */
    .motion-global-content {
        top: 2rem; /* Position from top */
        transform: translateX(-50%); /* Only horizontal centering */
    }

    /* REMOVE commented out gradient block */
    /* 
    .motion-slide.has-scroll-hint::after { ... } 
    */
}

/* Global Content Layer Styling */
.motion-global-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 100%; /* Allow it to take full width of parent initially */
    max-width: min(800px, calc(100% - 172px)); /* Primary width constraint */
    max-height: calc(100% - 3rem); /* Space above and below inside the slider */
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2rem;
    /* Centering is handled by transform */
    color: var(--content-color, #fff);
    text-shadow: var(--content-text-shadow, none);
    background-color: rgba(var(--content-box-rgb, 0, 0, 0), var(--content-box-alpha, 0.35)); /* Same as slide content */
    border-radius: var(--content-box-radius, 10px); /* Same as slide content */
    z-index: 10;
    text-align: center;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.2);
}

/* Render background image for Global Content via CSS variable like slides */
.motion-global-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    border-radius: inherit;
    z-index: 0; /* Behind inner content */
}

/* Ensure inner elements are above the ::after background */
.motion-global-content > * {
    position: relative;
    z-index: 1;
}

.motion-global-content::before { /* Optional overlay, if needed */
    /* Similar to .motion-slide::before if desired */
}

/* Alignment for Global Content */
.motion-global-content.content-align-left {
    text-align: left;
}
.motion-global-content.content-align-left .motion-global-buttons-wrap {
    justify-content: flex-start;
}
.motion-global-content.content-align-right {
    text-align: right;
}
.motion-global-content.content-align-right .motion-global-buttons-wrap {
    justify-content: flex-end;
}

/* 86px is half the 172px global max-width gutter. */
.motion-global-content.content-position-left,
.motion-global-content.content-position-right {
    width: max-content;
    max-width: min(800px, calc(100% - 172px));
    min-width: 0;
}
.motion-global-content.content-position-left {
    left: 86px;
    right: auto;
    transform: translateY(-50%);
}
.motion-global-content.content-position-right {
    left: auto;
    right: 86px;
    transform: translateY(-50%);
}
.motion-global-content.content-position-left.motion-content-layout-two,
.motion-global-content.content-position-right.motion-content-layout-two {
    width: 100%;
    max-width: min(1120px, calc(100% - 172px));
}

/* Styling for elements inside global content */
h2.motion-global-title {
    font-size: 2.5rem; /* Match slide title */
    margin: 0 0 1rem;
    line-height: 1.2;
    color: var(--content-color, #fff) !important; 
}

.motion-global-text {
    font-size: 1.125rem; /* Match slide text */
    margin-bottom: 0; /* Removed bottom margin */
    line-height: 1.6;
}

.motion-global-buttons-wrap {
    display: flex;
    flex-wrap: wrap; 
    gap: 1rem; 
    justify-content: center; /* Default */
    margin-top: 1.5rem; 
}

.motion-global-button {
    /* Inherit from .motion-slide-button or define separately */
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #fff;
    color: #000;
    text-decoration: none;
    text-shadow: none;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.motion-global-button:hover {
    background: #000;
    color: #fff;
}

/* Video Background Styling
   Cover the slider (like background-size: cover), not the viewport.
   Viewport vh/vw sizing breaks when the slider aspect ≠ the viewport aspect,
   leaving YouTube letterbox bars. Container units keep 16:9 relative to the wrap. */
.motion-video-bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0; /* Behind slides/content */
    background: #000; /* Fallback */
    container-type: size;
}

.motion-video-bg-wrap iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    /* Themes (e.g. ZAD core.css) set iframe { max-width: 100% }, which
       blocks cover sizing when the iframe must be wider than the slider. */
    max-width: none !important;
    max-height: none !important;
    border: 0;
    pointer-events: none;
}

.motion-video-bg-wrap video,
.motion-slide-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.motion-slide-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.motion-slide.has-slide-video::before {
    z-index: 2;
}

.motion-slide.has-slide-video .motion-slide-content {
    z-index: 3;
}

/* Wider than 16:9 → grow height past the container, crop top/bottom */
@container (min-aspect-ratio: 16/9) {
    .motion-video-bg-wrap iframe {
        width: 100%;
        height: 56.25cqw; /* 9/16 of container width */
    }
}

/* Taller than 16:9 → grow width past the container, crop sides */
@container (max-aspect-ratio: 16/9) {
    .motion-video-bg-wrap iframe {
        width: 177.78cqh; /* 16/9 of container height */
        height: 100%;
    }
}

/* Ensure slides have no background when video is active */
.motion-slider.has-video-bg .motion-slide {
    background: transparent;
}
.motion-slider.has-video-bg .motion-slide::after {
    background-image: none !important; /* Override --bg-image if set */
    background: transparent;
}

/* Hide the ::before overlay when video is active */
.motion-slider.has-video-bg .motion-slide::before {
    display: none;
}

/* Video fallback for iOS devices when autoplay fails */
.motion-video-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Add a subtle play button overlay for video fallback */
.motion-video-fallback::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Full width and wide alignment styling (support wrapper and inner element) */
.wp-block-motion-slider-saved.alignfull,
.motion-slider.alignfull,
.wp-block-motion-slider-saved.alignfull .motion-slider,
.alignfull .motion-slider {
    width: 100vw;
    max-width: 100vw !important; /* Ensure it overrides theme max-widths */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* For alignwide, themes usually handle this. Provide a sensible default if not */
.wp-block-motion-slider-saved.alignwide,
.motion-slider.alignwide,
.wp-block-motion-slider-saved.alignwide .motion-slider,
.alignwide .motion-slider {
    /* Center relative to viewport and exceed container when needed while honoring theme wide size */
    --ms-wide-size: var(--wp--style--global--wide-size, 1400px);
    width: min(var(--ms-wide-size), 100vw);
    max-width: none;
    margin-left: calc(50% - (min(var(--ms-wide-size), 100vw) / 2));
    margin-right: calc(50% - (min(var(--ms-wide-size), 100vw) / 2));
}

/* Old caption styling removed - captions now appear below slider */

/* Mobile caption adjustments */
@media (max-width: 767px) {
    /* Old caption adjustments removed - captions now below slider */
}

/* Elementor Content Width Options */
.motion-slider-width-content .motion-slider {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-left: auto;
    margin-right: auto;
}

.motion-slider-width-full .motion-slider {
    width: 100vw;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.motion-slider-width-full > .elementor-widget-container {
    max-width: none; /* Override potential max-width from Elementor on the container */
}

/* Captions below slider */
.motion-slider-with-captions {
    /* Container for slider + caption area */
}

.motion-slider-captions {
    position: relative;
    min-height: 20px; /* Reserve space even when empty */
    padding: 10px 0;
    text-align: center;
}

.motion-slide-caption {
    display: none; /* Hide all captions by default */
    xcolor: #333;
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 0 20px;
    margin: 0;
}

/* Show only the current slide's caption */
.motion-slide-caption.current {
    display: block;
    opacity: 1;
    animation: motion-caption-fade-in 0.3s ease-in-out;
}

/* Fade-in animation for captions */
@keyframes motion-caption-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile caption adjustments */
@media (max-width: 767px) {
    .motion-slide-caption {
        font-size: 0.85rem;
        padding: 0 15px;
    }
    
    .motion-slider-captions {
        padding: 8px 0;
    }
}

/* Container-width-based responsive styles (replaces viewport-based media queries) */
.motion-slider.motion-narrow {
    /* Narrow slider styles - equivalent to mobile layout */
}

.motion-slider.motion-narrow .motion-slide {
    align-items: flex-start; /* Align content to top */
    padding-top: 1rem; /* Add some space from top */
    padding-bottom: 70px; /* Create space at bottom for nav */
}

.motion-slider.motion-narrow .motion-slide-title,
.motion-slider.motion-narrow h2.motion-global-title {
    font-size: 1.5rem; /* Reduce further */
}

.motion-slider.motion-narrow .motion-slide-subtitle,
.motion-slider.motion-narrow .motion-global-subtitle {
    font-size: 1.05rem;
}

.motion-slider.motion-narrow .motion-slide-text {
    font-size: 1rem;
}

.motion-slider.motion-narrow .motion-slider-nav {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    /* Reposition arrows to bottom corners */
    top: auto;
    bottom: 15px; 
    transform: none;
    font-size: 14px;
}

.motion-slider.motion-narrow .motion-slider-nav.arrow-style-white-circle,
.motion-slider.motion-narrow .motion-slider-nav.arrow-style-dark-circle {
    min-width: 36px;
    min-height: 36px;
}

.motion-slider.motion-narrow .motion-slider-nav.arrow-style-arrow-only {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
}

.motion-slider.motion-narrow > button.motion-slider-nav {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
}

.motion-slider.motion-narrow > button.motion-slider-nav.arrow-style-arrow-only {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
}

.motion-slider.motion-narrow .motion-slider-nav.arrow-style-arrow-only .motion-arrow-icon {
    width: 44px;
    height: 44px;
}

.motion-slider.motion-narrow .motion-slider-nav.arrow-style-white-circle,
.motion-slider.motion-narrow .motion-slider-nav.arrow-style-dark-circle {
    max-width: 36px;
    max-height: 36px;
}

.motion-slider.motion-narrow .motion-slider-nav.arrow-style-white-circle .motion-arrow-icon,
.motion-slider.motion-narrow .motion-slider-nav.arrow-style-dark-circle .motion-arrow-icon {
    width: 18px;
    height: 18px;
}

.motion-slider.motion-narrow .motion-slider-nav.prev {
    left: 15px; 
}

.motion-slider.motion-narrow .motion-slider-nav.next {
    right: 15px; 
}

.motion-slider.motion-narrow .motion-slider-dots {
    /* Keep dots centered at bottom */
    bottom: 15px; 
    /* Adjust gap if needed */
    gap: 8px; 
}

/* Reduce button size on narrow sliders */
.motion-slider.motion-narrow .motion-slide-button,
.motion-slider.motion-narrow .motion-global-button {
    padding: 0.5rem 1.25rem; /* Reduce padding */
    font-size: 0.9rem; /* Optionally reduce font size slightly */
}

.motion-slider.motion-narrow .motion-slide-content {
    padding: 1.5rem; /* Reduced from 2rem */
    max-width: 90%; /* Increased from default constraint */
    max-height: 100%; /* Limit height to available space */
    overflow-y: auto; /* Add scrollbar if needed */
    /* Scrollbar Styling (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.2); /* thumb track */
}

.motion-slider.motion-narrow .motion-slide.content-position-left .motion-slide-content,
.motion-slider.motion-narrow .motion-slide.content-position-right .motion-slide-content {
    width: max-content;
    max-width: calc(100% - 2rem);
}
.motion-slider.motion-narrow .motion-slide.content-position-left .motion-slide-content {
    margin-left: 1rem;
    margin-right: auto;
}
.motion-slider.motion-narrow .motion-slide.content-position-right .motion-slide-content {
    margin-left: auto;
    margin-right: 1rem;
}
.motion-slider.motion-narrow .motion-slide.content-position-left .motion-slide-content.motion-content-layout-two,
.motion-slider.motion-narrow .motion-slide.content-position-right .motion-slide-content.motion-content-layout-two {
    width: 100%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.motion-slider.motion-narrow .motion-slide-content.motion-content-layout-two,
.motion-slider.motion-narrow .motion-global-content.motion-content-layout-two {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 90%;
}

/* Apply border only when scrollable */
.motion-slider.motion-narrow .motion-slide-content.is-scrollable {
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

/* Scrollbar Styling (Webkit) */
.motion-slider.motion-narrow .motion-slide-content::-webkit-scrollbar {
    width: 8px;
}

.motion-slider.motion-narrow .motion-slide-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2); 
    border-radius: 4px;
}

.motion-slider.motion-narrow .motion-slide-content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    border: 2px solid transparent; /* Optional padding around thumb */
    background-clip: content-box; /* Ensure border doesn't make thumb thicker */
}

.motion-slider.motion-narrow .motion-slide-content h2.motion-slide-title {
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Adjust global content positioning for narrow sliders */
.motion-slider.motion-narrow .motion-global-content {
    top: 2rem; /* Position from top */
    transform: translateX(-50%); /* Only horizontal centering */
    padding: 1.5rem; /* Reduced from 2rem */
    max-width: 90%; /* Increased from default constraint */
}
.motion-slider.motion-narrow .motion-global-content.content-position-left,
.motion-slider.motion-narrow .motion-global-content.content-position-right {
    top: 2rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    transform: none;
}
.motion-slider.motion-narrow .motion-global-content.content-position-left {
    left: 1rem;
    right: auto;
}
.motion-slider.motion-narrow .motion-global-content.content-position-right {
    left: auto;
    right: 1rem;
}
.motion-slider.motion-narrow .motion-global-content.content-position-left.motion-content-layout-two,
.motion-slider.motion-narrow .motion-global-content.content-position-right.motion-content-layout-two {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 90%;
    transform: translateX(-50%);
}

/* Medium slider adjustments */
.motion-slider.motion-medium .motion-slide-title,
.motion-slider.motion-medium h2.motion-global-title {
    font-size: 2rem; /* Slightly smaller than wide */
}

.motion-slider.motion-medium .motion-slide-subtitle,
.motion-slider.motion-medium .motion-global-subtitle {
    font-size: 1.125rem;
}

.motion-slider.motion-medium .motion-slide-text {
    font-size: 1.05rem;
}

/* Wide slider styles (default/desktop) */
.motion-slider.motion-wide .motion-slide-title,
.motion-slider.motion-wide h2.motion-global-title {
    font-size: 2.5rem; /* Full size */
}

.motion-slider.motion-wide .motion-slide-subtitle,
.motion-slider.motion-wide .motion-global-subtitle {
    font-size: 1.25rem;
}

.motion-slider.motion-wide .motion-slide-text {
    font-size: 1.125rem;
}