:root { --aule-slider-btn-bg: oklch(0.25 0 0); --aule-slider-btn-color: #ffffff; --aule-slider-btn-size: 45px; --aule-slider-btn-radius: 22px; --aule-slider-btn-opacity: 0.8; --aule-slider-btn-hover-opacity: 1; --aule-slider-btn-shadow: none; --aule-slider-transition-speed: 0.5s; --aule-slider-transition-timing: ease-in-out; --aule-slider-border-radius: 0px; --aule-slider-aspect-ratio: 16 / 9; --aule-slider-outside-gap: 15px; --aule-slider-inside-gap: var(--wp--preset--spacing--tiny); --aule-slider-viewport-margin: 20px; --aule-slider-indicator-gap: 14px; --aule-slider-indicator-bg: rgba(0, 0, 0, 0.5); --aule-slider-dot-size: 10px; --aule-slider-dot-active-width: 38px; --aule-slider-dot-bg: rgba(255, 255, 255, 0.5); --aule-slider-dot-fill: #ffffff; --aule-slider-play-icon-size: 26px; --aule-slider-play-btn-color: var(--aule-slider-btn-color); --aule-slider-inside-inset: 16px; }
.aule-image-slider-container.aule-ui-dark { --aule-slider-btn-bg: oklch(0.25 0 0); --aule-slider-btn-color: #ffffff; --aule-slider-btn-shadow: none; --aule-slider-indicator-bg: rgba(0, 0, 0, 0.5); --aule-slider-dot-bg: rgba(255, 255, 255, 0.5); --aule-slider-dot-fill: #ffffff; --aule-slider-play-btn-color: #ffffff; }
.aule-image-slider-container.aule-ui-light { --aule-slider-btn-bg: #ffffff; --aule-slider-btn-color: #1a1a1a; --aule-slider-btn-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); --aule-slider-indicator-bg: rgba(255, 255, 255, 0.7); --aule-slider-dot-bg: rgba(0, 0, 0, 0.35); --aule-slider-dot-fill: #1a1a1a; --aule-slider-play-btn-color: #1a1a1a; }
.aule-image-slider-container { position: relative; width: 100%; box-sizing: border-box; }
.aule-image-slider-container.aule-nav-top { margin-top: var(--aule-slider-inside-gap); }
.aule-image-slider-container.aule-nav-bottom { margin-bottom: var(--aule-slider-inside-gap); }
.aule-image-slider-container.aule-reserve-top { margin-top: 0px; padding-top: calc(
    var(--aule-slider-btn-size) + var(--aule-slider-outside-gap)
  ); }
.aule-image-slider-container.aule-reserve-bottom { margin-bottom: 0px; padding-bottom: calc(
    var(--aule-slider-btn-size) + var(--aule-slider-outside-gap)
  ); }
.aule-slider-wrapper { position: relative; width: 100%; aspect-ratio: var(--aule-slider-aspect-ratio); overflow: hidden; border-radius: var(--aule-slider-border-radius); }
.aule-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--aule-slider-transition-speed)
    var(--aule-slider-transition-timing); z-index: 1; }
.aule-slide.is-active { opacity: 1; z-index: 2; }
.aule-slider-image { width: 100%; height: 100%; object-fit: cover; }
[data-transition="slide"] .aule-slide { opacity: 1; transform: translateX(calc(100% + var(--aule-slider-slide-gap, 0px))); transition: transform var(--aule-slider-transition-speed)
    var(--aule-slider-transition-timing); }
[data-transition="slide"] .aule-slide.is-active { transform: translateX(0); z-index: 2; }
[data-transition="slide"] .aule-slide.is-before { transform: translateX(calc(-100% - var(--aule-slider-slide-gap, 0px))); }
[data-transition="slide"] .aule-slide.is-after { transform: translateX(calc(100% + var(--aule-slider-slide-gap, 0px))); }
.aule-slider-nav, .aule-slider-indicator-bar { position: absolute; display: flex; align-items: center; gap: 10px; z-index: 10; padding: 0; width: 100%; box-sizing: border-box; pointer-events: none; left: 0; }
.aule-slider-nav button, .aule-slider-indicator-bar button { pointer-events: auto; width: var(--aule-slider-btn-size); height: var(--aule-slider-btn-size); background-color: var(--aule-slider-btn-bg); color: var(--aule-slider-btn-color); border: none; border-radius: var(--aule-slider-btn-radius); box-shadow: var(--aule-slider-btn-shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: var(--aule-slider-btn-opacity); transition: opacity 0.2s ease; }
.aule-slider-nav button:hover, .aule-slider-indicator-bar button:hover { opacity: var(--aule-slider-btn-hover-opacity); }
.aule-slider-nav.aule-nav-middle { top: 50%; transform: translateY(-50%); justify-content: space-between; padding: 0 15px; }
.aule-nav-loc-outside.aule-nav-middle .aule-slider-nav { left: 50%; transform: translate(-50%, -50%); padding: 0; width: calc(
    100% + (var(--aule-slider-btn-size) + var(--aule-slider-outside-gap)) * 2
  ); max-width: calc(100vw - var(--aule-slider-viewport-margin) * 2); }
.aule-image-slider-container.aule-reserve-bottom .aule-slider-nav.aule-nav-middle { top: calc(
    50% - (var(--aule-slider-btn-size) + var(--aule-slider-outside-gap)) / 2
  ); }
.aule-slider-nav.aule-nav-top, .aule-slider-indicator-bar.aule-nav-top { top: 0; }
.aule-slider-nav.aule-nav-bottom, .aule-slider-indicator-bar.aule-nav-bottom { bottom: 0; }
.aule-slider-nav.aule-loc-inside.aule-nav-top, .aule-slider-indicator-bar.aule-loc-inside.aule-nav-top { top: var(--aule-slider-inside-inset); }
.aule-slider-nav.aule-loc-inside.aule-nav-bottom, .aule-slider-indicator-bar.aule-loc-inside.aule-nav-bottom { bottom: var(--aule-slider-inside-inset); }
.aule-align-left { justify-content: flex-start; }
.aule-align-center { justify-content: center; }
.aule-align-right { justify-content: flex-end; }
.aule-slider-indicator-group { display: flex; align-items: center; gap: var(--aule-slider-indicator-gap); pointer-events: auto; z-index: 15; }
.aule-slider-indicators { display: flex; align-items: center; background: var(--aule-slider-indicator-bg); padding: 8px 9px; border-radius: 99px; transition: background 0.2s ease; pointer-events: auto; height: fit-content; }
.aule-play-pause-btn { pointer-events: auto; width: var(--aule-slider-btn-size); height: var(--aule-slider-btn-size); flex: 0 0 auto; background-color: var(--aule-slider-btn-bg); color: var(--aule-slider-play-btn-color); border: none; border-radius: var(--aule-slider-btn-radius); box-shadow: var(--aule-slider-btn-shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; opacity: var(--aule-slider-btn-opacity); transition: opacity 0.2s ease; }
.aule-play-pause-btn:hover { opacity: var(--aule-slider-btn-hover-opacity); }
.aule-play-pause-btn span { display: flex; align-items: center; justify-content: center; width: var(--aule-slider-play-icon-size); height: var(--aule-slider-play-icon-size); }
.aule-play-pause-btn svg { width: 100%; height: 100%; }
.aule-slider-dots { display: flex; align-items: center; gap: 6px; }
.aule-slider-dot { width: var(--aule-slider-dot-size); height: var(--aule-slider-dot-size); border-radius: var(--aule-slider-dot-size); background-color: var(--aule-slider-dot-bg); position: relative; overflow: hidden; transition: width 0.3s ease; cursor: pointer; }
.aule-slider-dot.is-active { width: var(--aule-slider-dot-active-width); }
.aule-slider-dot-progress { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background-color: var(--aule-slider-dot-fill); }
.aule-no-autoplay .aule-slider-dot.is-active { background-color: var(--aule-slider-dot-fill); }
.aule-slider-dot.is-animating .aule-slider-dot-progress { width: 100%; transition: width linear; }
.aule-image-slider-editor { border: 1px dashed rgba(0,0,0,0.1); background: #f0f0f0; }
.aule-dynamic-preview { display: flex; align-items: center; justify-content: center; background: #e2e8f0; color: #475569; text-align: center; height: 100%; }
.aule-indicator-placeholder { visibility: hidden; pointer-events: none; }
.wp-block-aule-image-slider .aule-slider-wrapper { min-height: 200px; }