/*
 * Advanced Elementor Slider Carousel — Frontend Styles
 * Version: 1.4.21
 *
 * v1.4.21: Dots responsive controls (Size, Gap, Bottom Offset) now
 *   work correctly at every Elementor breakpoint (Desktop/Tablet/Mobile).
 *   Root cause: hardcoded --aesc-dot-size in media queries (≤767px and
 *   ≤430px) overrode Elementor's responsive selector; clamp() on bottom
 *   offset made the Elementor value act only as a ceiling.
 *   Fixes:
 *   - --aesc-dot-size and --aesc-dot-gap removed from media queries.
 *   - clamp() replaced with direct var(--aesc-dot-bottom) on .dots.
 *   - --aesc-dot-bottom media defaults kept as cascade fallbacks only
 *     (Elementor selector loads later and wins).
 *
 * v1.4.20: Arrow transparent override (Section 24).
 *   Removes dark circular background. Overrides both Section 14
 *   CSS defaults and any Elementor inline CSS from bg-color /
 *   border-radius controls via !important. SVG gets
 *   position:static + transform:none so no theme CSS can displace
 *   the icon from the button hit-area.
 *
 * v1.4.19: ROLLBACK — arrow CSS reverted to v1.4.16 stable state.
 *   The v1.4.17 Section-23 arrow overrides and the v1.4.18
 *   Section-24 transparent-background block are removed. Arrow
 *   navigation was broken by those overrides. The dark circular
 *   background on arrows is restored (Section 14 rules govern
 *   again). Dot visual reset (Section 23, dots-only) is kept.
 *   No JS, editor-preview logic, dots positioning, or full-width
 *   logic was touched.
 *
 * v1.4.18: Arrow circular background removed — icon only.
 *   Section 24 overrides the background-color, border-radius,
 *   border, outline, and box-shadow on the arrow button so it
 *   becomes fully transparent. The clickable area is preserved
 *   using the existing --aesc-arrow-size token (Elementor Button
 *   Size control). The SVG icon size stays under Elementor's
 *   Icon Size control (--aesc-arrow-icon). No JS, PHP, dots,
 *   or positioning logic was touched.
 *
 * v1.4.17: Visual style of dots & arrows restored to the clean
 * v1.4.12 look. Themes and Elementor were injecting default
 * `<button>` styling (border, box-shadow, border-radius:0,
 * browser-native appearance, sometimes ::before/::after
 * decorations) that the earlier rules did not override
 * forcefully enough — dots looked square/boxed and arrows had
 * visible borders. Section 23 (appended at the end) forces a
 * clean reset with high-specificity selectors + !important.
 * No functionality, JS, PHP, dots positioning, full-width, or
 * editor-preview logic was touched.
 *
 * v1.4.16: Editor preview navigation actually moves slides now.
 *   - Removed the `.aesc-editor-preview .advanced-slide:first-child`
 *     fallback that kept slide 0 visible regardless of which slide
 *     was actually active. Now only `.is-active` is shown.
 *   - The legacy `.elementor-editor-active .advanced-slider-arrow`
 *     rule previously set `pointer-events: none`; now it sets
 *     `pointer-events: auto !important` so editor clicks work even
 *     through the legacy selector.
 *   - Frontend rules untouched.
 *
 * v1.4.15: Arrows are now clickable inside the Elementor editor
 * preview. The Section-22 rule that set
 *   .aesc-editor-preview .advanced-slider-arrow { pointer-events:none }
 * intentionally disabled editor clicks in 1.4.13, but that broke
 * preview navigation. Now: pointer-events:auto on the button +
 * pointer-events:none on its SVG/children (click target is the
 * button, not the icon). z-index:9999 keeps the button above
 * Elementor's editor overlay. Frontend rules are unchanged.
 *
 * v1.4.14: No CSS changes. Bug fix is JS-only — the
 * `.aesc-editor-preview` class is now correctly gated to edit
 * mode in JS, so the existing editor-preview CSS rules in
 * Section 22 stay scoped to the editor only and never affect
 * the real frontend.
 *
 * v1.4.13 FIX — ELEMENTOR EDITOR PREVIEW RENDERING
 * ──────────────────────────────────────────────────────
 * BUG: Inside the Elementor editor iframe the canvas preview
 *      was blank — only arrows appeared, the slide image/content
 *      never rendered. Cause: editor-specific CSS was scoped to
 *      `.elementor-editor-active` which lives on the OUTER (parent)
 *      document body, not on the iframe body where this stylesheet
 *      is applied, so the rules never matched in the iframe.
 *
 * FIX: Editor CSS now lives under a class controlled by the plugin
 *      itself — `.aesc-editor-preview` — added to the wrapper by
 *      the JS edit-mode detection. Existing `.elementor-editor-active`
 *      selectors are kept for backwards compatibility.
 *      Frontend rules are unchanged.
 * ──────────────────────────────────────────────────────
 *
 * v1.4.12 FIX — RESPONSIVE DOTS POSITIONING
 * ──────────────────────────────────────────────────────
 * BUG: Dots disappeared / moved outside the visible image when the
 *      desktop browser was resized smaller (without crossing a
 *      breakpoint). Root cause: --aesc-dot-bottom was a FIXED px
 *      value (80px desktop), so as the image shrank with the
 *      viewport the 80px offset eventually pushed the dots below
 *      the visible image and overflow:hidden clipped them.
 *
 * FIX: .advanced-slider-dots `bottom` is now driven by a viewport-
 *      aware clamp():
 *          bottom: clamp(18px, 5vw, var(--aesc-dot-bottom, 70px));
 *      Floor 18px = never too close to the edge.
 *      Preferred 5vw = scales fluidly with viewport (≈5–8% of image).
 *      Ceiling = user-configured Elementor value (default 70px).
 *      Mobile (≤767px) clamps tighter: clamp(12px, 4vw, 24px).
 *      JS getDotsBottom() now reads the resolved CSS bottom so the
 *      fixed-height + contain letterbox correction stays accurate.
 * ──────────────────────────────────────────────────────
 *
 * ROOT CAUSE FIXES v1.4.4
 * ──────────────────────────────────────────────────────
 * BUG 1 — Desktop not full-width:
 *   CSS left:50%+translateX(-50%) is UNRELIABLE in Elementor's
 *   flex/grid layout. It works for simple block contexts but not
 *   when the widget is inside a flex column. Removed entirely.
 *   Full-width is now 100% handled by JavaScript (applyFullWidth)
 *   which measures the actual offset with getBoundingClientRect
 *   and sets inline margin-left + width. Skips in editor.
 *
 * BUG 2 — Mobile blank space + arrows outside image:
 *   Editor was forcing height:500px. Landscape images at mobile
 *   width (~200px tall) were centered in 500px → 150px blank
 *   above and below. Arrow at top:50% = 250px → outside image.
 *   Fix: In editor, image is position:relative (normal flow),
 *   wrapper height follows image naturally. Zero blank space.
 *   Frontend: JS uses data-img-w/data-img-h PHP attributes to
 *   compute exact height without waiting for image.onload.
 * ──────────────────────────────────────────────────────
 */

/* =========================================================
   CSS Custom Properties
   ========================================================= */

.advanced-slider-wrapper {
  --aesc-speed          : 600ms;
  --aesc-ease           : cubic-bezier(0.645, 0.045, 0.355, 1.000);
  --aesc-fade-ease      : ease;
  --aesc-arrow-size     : 48px;
  --aesc-arrow-icon     : 20px;
  --aesc-arrow-offset   : 16px;
  --aesc-arrow-bg       : rgba(0, 0, 0, 0.40);
  --aesc-arrow-bg-hover : rgba(0, 0, 0, 0.70);
  --aesc-arrow-fill     : #ffffff;
  --aesc-dot-size       : 10px;
  --aesc-dot-gap        : 8px;
  --aesc-dot-bottom     : 70px;  /* desktop ceiling for clamp() — JS reads the resolved bottom for letterbox fix */
  --aesc-dot-normal     : rgba(255, 255, 255, 0.50);
  --aesc-dot-active     : #ffffff;
  --aesc-pad-v          : 40px;
  --aesc-pad-h          : 20px;
  --aesc-btn-pad-v      : 12px;
  --aesc-btn-pad-h      : 30px;
  --aesc-btn-size       : 1rem;
  --aesc-btn-bg         : #e74c3c;
  --aesc-btn-bg-hover   : #c0392b;
  --aesc-h              : auto; /* JS writes this in auto-height mode */
}

/* =========================================================
   0. Elementor Widget Container — strip default padding
   ========================================================= */

.elementor-widget-advanced_slider_carousel {
  padding    : 0 !important;
  margin     : 0 !important;
  width      : 100%;
  max-width  : none !important;
  align-self : flex-start !important; /* don't stretch in flex column */
}

.elementor-widget-advanced_slider_carousel > .elementor-widget-container {
  padding   : 0 !important;
  margin    : 0 !important;
  width     : 100%;
  max-width : none !important;
}

/* =========================================================
   1. Wrapper
   ========================================================= */

.advanced-slider-wrapper {
  position         : relative;
  width            : 100%;
  max-width        : none;
  height           : var(--aesc-h); /* auto or JS-set pixel value */
  min-height       : 100px;         /* prevent collapse before JS */
  margin           : 0;
  padding          : 0;
  overflow         : hidden !important; /* dots/arrows must never escape */
  display          : block;
  box-sizing       : border-box;
  background-color : transparent;
}

/* =========================================================
   2. Full-width
   =========================================================
   CSS only removes constraints. JavaScript (applyFullWidth)
   measures actual position with getBoundingClientRect and
   applies negative margin-left + explicit width.
   This works reliably in ALL parent layouts (flex, grid, block).
   The JS is skipped inside the Elementor editor.
   ========================================================= */

.advanced-slider-wrapper.aesc-full-width {
  /* No CSS left/transform tricks — JS handles this */
  max-width : none !important;
  margin    : 0;
}

/* =========================================================
   3. Inner slider
   ========================================================= */

.advanced-slider {
  position : relative;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}

/* =========================================================
   4. Track
   ========================================================= */

.advanced-slider-track {
  display     : flex;
  flex-wrap   : nowrap;
  align-items : stretch;
  width       : 100%;
  height      : 100%;
  transition  : transform var(--aesc-speed) var(--aesc-ease);
  will-change : transform;
}

.advanced-slider-wrapper.aesc-effect-fade .advanced-slider-track {
  display  : block;
  position : relative;
  height   : 100%;
}

/* =========================================================
   5. Individual Slide
   ========================================================= */

.advanced-slide {
  flex-shrink      : 0;
  flex-grow        : 0;
  flex-basis       : 100%;
  width            : 100%;
  height           : 100%;
  position         : relative;
  overflow         : hidden;
  box-sizing       : border-box;
  background-color : transparent;
}

.advanced-slider-wrapper.aesc-effect-fade .advanced-slide {
  position       : absolute;
  inset          : 0;
  opacity        : 0;
  transition     : opacity var(--aesc-speed) var(--aesc-fade-ease);
  pointer-events : none;
}
.advanced-slider-wrapper.aesc-effect-fade .advanced-slide.is-active {
  opacity        : 1;
  position       : relative;
  pointer-events : auto;
}

/* =========================================================
   6. Auto-height mode (JS-driven)
   =========================================================
   JS reads data-img-w/data-img-h from slide div (set by PHP),
   calculates height = wrapper.offsetWidth * (imgH/imgW),
   and writes --aesc-h. Transition animates between slides.
   ========================================================= */

.advanced-slider-wrapper.aesc-height-auto {
  height     : var(--aesc-h, auto) !important;
  min-height : 100px               !important;
  transition : height 0.25s ease;
}

.advanced-slider-wrapper.aesc-height-auto .advanced-slider,
.advanced-slider-wrapper.aesc-height-auto .advanced-slider-track {
  height : 100% !important;
}

.advanced-slider-wrapper.aesc-height-auto .advanced-slide {
  height     : 100% !important;
  min-height : 0    !important;
}

/* Image: absolute fill, object-fit:contain = zero blank space
   (wrapper height = exact image ratio height thanks to JS) */
.advanced-slider-wrapper.aesc-height-auto .aesc-slide-image {
  position        : absolute   !important;
  inset           : 0          !important;
  width           : 100%       !important;
  height          : 100%       !important;
  object-fit      : contain    !important;
  object-position : center center !important;
  display         : block      !important;
}

/* =========================================================
   7. Fixed-height mode
   ========================================================= */

.advanced-slider-wrapper.aesc-height-fixed .advanced-slider,
.advanced-slider-wrapper.aesc-height-fixed .advanced-slider-track,
.advanced-slider-wrapper.aesc-height-fixed .advanced-slide {
  height : 100%;
}

.advanced-slider-wrapper.aesc-height-fixed .aesc-slide-image {
  position : absolute;
  inset    : 0;
  width    : 100%;
  height   : 100%;
  object-fit : contain;
}

.advanced-slider-wrapper.aesc-height-fixed.aesc-image-fit-contain .aesc-slide-image {
  object-fit : contain !important;
}
.advanced-slider-wrapper.aesc-height-fixed.aesc-image-fit-cover .aesc-slide-image {
  object-fit : cover !important;
}

/* =========================================================
   8. Base image fallback
   ========================================================= */

.aesc-slide-image {
  display   : block;
  width     : 100%;
  height    : auto;
  max-width : 100%;
}

/* =========================================================
   9. Background Layer
   ========================================================= */

.advanced-slide-bg {
  position            : absolute;
  inset               : 0;
  background-color    : transparent;
  background-repeat   : no-repeat;
  background-position : center center;
  background-size     : contain;
  z-index             : 0;
  pointer-events      : none;
}

/* =========================================================
   10. Overlay Layer
   ========================================================= */

.advanced-slide-overlay {
  position       : absolute;
  inset          : 0;
  pointer-events : none;
  z-index        : 2;
}

/* =========================================================
   11. Full-slide Link
   ========================================================= */

.advanced-slide-link {
  position : absolute;
  inset    : 0;
  z-index  : 3;
  display  : block;
  cursor   : pointer;
}

/* =========================================================
   12. Content Layer
   ========================================================= */

.advanced-slide-content {
  position        : absolute;
  inset           : 0;
  z-index         : 4;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  padding         : var(--aesc-pad-v) var(--aesc-pad-h);
  pointer-events  : none;
  box-sizing      : border-box;
  line-height     : 1.5;
}

.advanced-slide-content a,
.advanced-slide-content button,
.advanced-slide-content .advanced-slide-button {
  pointer-events : auto;
}

.advanced-slide-content h2 {
  margin      : 0 0 16px;
  font-size   : clamp(1.5rem, 3.5vw, 3rem);
  line-height : 1.2;
  color       : #ffffff;
  word-wrap   : break-word;
}

.advanced-slide-content p {
  margin      : 0 0 24px;
  font-size   : clamp(0.875rem, 2vw, 1.2rem);
  line-height : 1.7;
  color       : #eeeeee;
}

/* =========================================================
   13. Button
   ========================================================= */

.advanced-slide-button {
  display          : inline-block;
  padding          : var(--aesc-btn-pad-v) var(--aesc-btn-pad-h);
  background-color : var(--aesc-btn-bg);
  color            : #ffffff;
  text-decoration  : none;
  border-radius    : 4px;
  font-size        : var(--aesc-btn-size);
  font-weight      : 600;
  letter-spacing   : 0.04em;
  transition       : background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
  cursor           : pointer;
  border           : none;
  white-space      : nowrap;
  line-height      : 1.4;
}

.advanced-slide-button:hover,
.advanced-slide-button:focus-visible {
  background-color : var(--aesc-btn-bg-hover);
  color            : #ffffff;
  transform        : translateY(-2px);
  outline          : 2px solid rgba(255, 255, 255, 0.5);
  outline-offset   : 2px;
}

/* =========================================================
   14. Navigation Arrows
   ========================================================= */

.advanced-slider-arrow {
  position         : absolute;
  top              : 50%;          /* overridden by Elementor arrow_vertical_position */
  transform        : translateY(-50%);
  z-index          : 10;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  width            : var(--aesc-arrow-size);
  height           : var(--aesc-arrow-size);
  background-color : var(--aesc-arrow-bg);
  border           : none;
  border-radius    : 50%;
  cursor           : pointer;
  opacity          : 0.85;
  padding          : 0;
  transition       : background-color 0.25s ease, opacity 0.25s ease;
  flex-shrink      : 0;
}

.advanced-slider-arrow:hover,
.advanced-slider-arrow:focus-visible {
  background-color : var(--aesc-arrow-bg-hover);
  opacity          : 1;
  outline          : 2px solid rgba(255, 255, 255, 0.5);
  outline-offset   : 2px;
}

.advanced-slider-arrow--prev { left  : var(--aesc-arrow-offset); }
.advanced-slider-arrow--next { right : var(--aesc-arrow-offset); }

.advanced-slider-arrow svg {
  width          : var(--aesc-arrow-icon);
  height         : var(--aesc-arrow-icon);
  fill           : var(--aesc-arrow-fill);
  stroke         : none;
  pointer-events : none;
  display        : block;
  flex-shrink    : 0;
}

.advanced-slider-wrapper.aesc-no-loop .advanced-slider-arrow--prev.is-disabled,
.advanced-slider-wrapper.aesc-no-loop .advanced-slider-arrow--next.is-disabled {
  opacity        : 0.25;
  cursor         : default;
  pointer-events : none;
}

/* =========================================================
   15. Navigation Dots
   =========================================================
   v1.4.21: bottom now uses var(--aesc-dot-bottom) directly so
   the Elementor "Bottom Offset" responsive control sets the
   EXACT bottom position at each breakpoint (desktop/tablet/mobile).
   The previous clamp() approach made the Elementor value act only
   as a ceiling, causing the mobile control to appear non-functional.
   CSS defaults fall back to the media-query values in Section 16.
   ========================================================= */

.advanced-slider-dots {
  position        : absolute;
  bottom          : var(--aesc-dot-bottom, 70px);
  left            : 50%;
  transform       : translateX(-50%);
  z-index         : 80;
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : var(--aesc-dot-gap, 8px);
  list-style      : none;
  margin          : 0;
  padding         : 0;
  opacity         : 1;
  visibility      : visible;
  pointer-events  : auto;
}

/* Stronger rule — beats Elementor inline CSS */
.advanced-slider-wrapper .advanced-slider-dots {
  bottom     : var(--aesc-dot-bottom, 70px) !important;
  z-index    : 80 !important;
  opacity    : 1  !important;
  visibility : visible !important;
  display    : flex !important;
  gap        : var(--aesc-dot-gap, 8px) !important;
}

.advanced-slider-dot {
  display          : block;
  width            : var(--aesc-dot-size);
  height           : var(--aesc-dot-size);
  background-color : var(--aesc-dot-normal);
  border           : none;
  border-radius    : 50%;
  cursor           : pointer;
  padding          : 0;
  flex-shrink      : 0;
  transition       : background-color 0.25s ease, transform 0.25s ease;
}

.advanced-slider-dot.is-active {
  background-color : var(--aesc-dot-active);
  transform        : scale(1.3);
}

.advanced-slider-dot:hover,
.advanced-slider-dot:focus-visible {
  background-color : rgba(255, 255, 255, 0.85);
  outline          : 2px solid rgba(255, 255, 255, 0.6);
  outline-offset   : 2px;
}

/* =========================================================
   16. Responsive — token scaling ONLY, no heights
   =========================================================
   v1.4.21: --aesc-dot-size and --aesc-dot-gap are NO LONGER set
   in these media queries. Setting them here would override any
   Elementor responsive value the user configures for mobile,
   making the Elementor mobile Dot Size control appear broken.
   Let the Elementor selector (--aesc-dot-size on wrapper) win.

   --aesc-dot-bottom fallbacks ARE kept here as safe defaults for
   sites that have not yet saved Elementor mobile/tablet values.
   Elementor's own responsive CSS (also written to --aesc-dot-bottom)
   loads AFTER this stylesheet and wins via cascade order.
   ========================================================= */

@media (max-width: 1024px) {
  .advanced-slider-wrapper { --aesc-arrow-offset : 10px; --aesc-dot-bottom : 45px; }
}

@media (max-width: 767px) {
  .advanced-slider-wrapper {
    --aesc-arrow-size   : 40px;
    --aesc-arrow-icon   : 17px;
    --aesc-arrow-offset : 8px;
    /* --aesc-dot-size removed v1.4.21: let Elementor mobile control win */
    /* --aesc-dot-gap  removed v1.4.21: let Elementor mobile control win */
    --aesc-dot-bottom   : 24px;  /* fallback only — Elementor selector overrides */
    --aesc-pad-v        : 24px;
    --aesc-pad-h        : 16px;
    --aesc-btn-pad-v    : 10px;
    --aesc-btn-pad-h    : 22px;
    --aesc-btn-size     : 0.875rem;
  }
  /* Removed v1.4.21: clamp() mobile override on .advanced-slider-dots
     was preventing the Elementor mobile Bottom Offset from working. */
}

@media (max-width: 430px) {
  .advanced-slider-wrapper {
    --aesc-arrow-size   : 36px;
    --aesc-arrow-icon   : 15px;
    --aesc-arrow-offset : 6px;
    /* --aesc-dot-size removed v1.4.21: let Elementor mobile control win */
    /* --aesc-dot-gap  removed v1.4.21: let Elementor mobile control win */
    --aesc-pad-v        : 20px;
    --aesc-pad-h        : 14px;
    --aesc-btn-pad-v    : 9px;
    --aesc-btn-pad-h    : 18px;
  }
}

@media (max-width: 375px) {
  .advanced-slider-wrapper {
    --aesc-arrow-size  : 32px;
    --aesc-arrow-icon  : 13px;
    --aesc-pad-v       : 16px;
    --aesc-pad-h       : 12px;
    --aesc-btn-pad-v   : 8px;
    --aesc-btn-pad-h   : 16px;
  }
}

/* =========================================================
   17. Elementor Editor — CRITICAL FIX
   =========================================================
   ROOT CAUSE of "blank space above/below" in editor:
   Previous versions forced height:500px in the editor.
   Landscape images (~200px tall) were centered in 500px
   → 150px blank above, 150px below. Arrow at top:50% = 250px
   was in the BLANK AREA, not the image.

   FIX: In the editor, image is position:relative (normal flow).
   Wrapper height follows the image's natural rendered height.
   Zero blank space. Arrow at top:50% is in the center of image.

   Also: full-width (left:50%, transform) is reverted so the
   slider shows at 100% of the column width in the editor.
   ========================================================= */

/* Revert full-width in editor — higher specificity (3 classes) */
.elementor-editor-active .advanced-slider-wrapper,
.elementor-editor-active .advanced-slider-wrapper.aesc-full-width {
  width     : 100%  !important;
  max-width : none  !important;
  left      : auto  !important;
  right     : auto  !important;
  transform : none  !important;
  margin    : 0     !important;
  transition: none  !important;
  /* No forced height — let content determine it */
}

/* Editor: image in NORMAL FLOW → wrapper height = image height */
.elementor-editor-active .aesc-slide-image {
  position   : relative !important;
  inset      : auto     !important;
  width      : 100%     !important;
  height     : auto     !important;
  display    : block    !important;
  object-fit : contain  !important;
  max-height : none     !important;
}

/* Editor: override auto/fixed height — let image set the height */
.elementor-editor-active .advanced-slider-wrapper.aesc-height-auto,
.elementor-editor-active .advanced-slider-wrapper.aesc-height-fixed {
  height     : auto  !important;
  min-height : 50px  !important;
  max-height : none  !important;
}

/* Editor: track/slides use auto height so image determines it */
.elementor-editor-active .advanced-slider,
.elementor-editor-active .advanced-slider-track,
.elementor-editor-active .advanced-slide {
  height     : auto !important;
  min-height : 0    !important;
}

/* v1.4.16: Legacy editor selector — arrows MUST be clickable so the
   user can preview slide navigation in the editor. The 1.4.7 version
   set pointer-events:none here; that prevented clicks. Now enabled. */
.elementor-editor-active .advanced-slider-arrow {
  pointer-events : auto !important;
}

/* =========================================================
   18. Accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .advanced-slider-track,
  .advanced-slide,
  .advanced-slider-arrow,
  .advanced-slide-button,
  .advanced-slider-dot,
  .advanced-slider-wrapper {
    transition : none !important;
  }
}

/* =========================================================
   19. Mobile Override for Fixed-Height Mode (v1.4.5 FIX)
   =========================================================
   ROOT CAUSE: On mobile, fixed height (e.g., 500px for desktop)
   is larger than the image's natural height (~219px for a
   1600×900 image at 390px width). Result: image at top, large
   blank space below, arrow at top:50% = in the blank area.

   FIX: On mobile (≤767px), always use natural image height
   regardless of the user's fixed height setting.
   Image goes back to normal flow (position:relative, height:auto).
   Wrapper/slides/track follow the image height.
   Arrow at top:50% = center of image. Zero blank space.
   ========================================================= */

@media (max-width: 767px) {
  /* Override fixed height — let image determine height */
  .advanced-slider-wrapper.aesc-height-fixed {
    height     : auto !important;
    min-height : 0    !important;
  }

  .advanced-slider-wrapper.aesc-height-fixed .advanced-slider,
  .advanced-slider-wrapper.aesc-height-fixed .advanced-slider-track,
  .advanced-slider-wrapper.aesc-height-fixed .advanced-slide {
    height     : auto !important;
    min-height : 0    !important;
  }

  /* Image: back to normal flow, natural height, no blank space */
  .advanced-slider-wrapper.aesc-height-fixed .aesc-slide-image {
    position   : relative !important;
    inset      : auto     !important;
    width      : 100%     !important;
    height     : auto     !important;
    object-fit : contain  !important;
    display    : block    !important;
    max-height : none     !important;
  }
}

/* =========================================================
   21. Safe Content Padding on Mobile (v1.4.8)
   =========================================================
   On mobile, arrows sit against left/right edges.
   Without enough horizontal padding, slide text can overlap
   the arrows. This rule auto-computes safe padding using
   CSS calc() from the arrow-size and arrow-offset tokens.
   Applied only when arrows are NOT hidden by the
   .aesc-hide-arrows-mobile toggle (v1.4.7).

   Formula: arrow-size + arrow-offset + 8px extra breathing room
   Example at ≤767px: 40px + 8px + 8px = 56px each side.
   ========================================================= */

@media (max-width: 767px) {
  .advanced-slider-wrapper:not(.aesc-hide-arrows-mobile) .advanced-slide-content {
    padding-left  : max(var(--aesc-pad-h), calc(var(--aesc-arrow-size) + var(--aesc-arrow-offset) + 8px));
    padding-right : max(var(--aesc-pad-h), calc(var(--aesc-arrow-size) + var(--aesc-arrow-offset) + 8px));
  }
}

/* =========================================================
   20. Hide Arrows on Mobile (v1.4.7)
   =========================================================
   When the user enables "Hide Arrows on Mobile" toggle in
   Style → Navigation Arrows, the wrapper gets the class
   aesc-hide-arrows-mobile. This rule hides both arrow
   buttons on screens ≤767px (Elementor mobile breakpoint).
   Swipe gestures remain fully functional.
   ========================================================= */

@media (max-width: 767px) {
  .advanced-slider-wrapper.aesc-hide-arrows-mobile .advanced-slider-arrow {
    display: none !important;
  }
}

/* =========================================================
   22. Elementor Editor Preview — v1.4.13 ROOT FIX
   =========================================================
   The class .aesc-editor-preview is added to the wrapper by JS
   (detectEditMode → elementorFrontend.isEditMode()) the moment
   the widget initialises inside the editor iframe. This is the
   RELIABLE switch — the legacy .elementor-editor-active prefix
   only lives on the outer document body, not on the iframe
   body where this stylesheet runs, so it cannot be trusted on
   its own.

   These rules:
     • neutralise full-width breakout (no negative margin tricks)
     • allow the wrapper to follow image height naturally
     • override the wrapper's overflow:hidden so preview can't clip
     • force the first / active slide visible (no transform tricks)
     • put the image back in normal flow so it actually shows up
     • make arrows non-interactive (no autoplay/clicks in editor)
   Frontend behaviour is intentionally untouched.
   ========================================================= */

.advanced-slider-wrapper.aesc-editor-preview,
.advanced-slider-wrapper.aesc-editor-preview.aesc-full-width {
  width      : 100% !important;
  max-width  : 100% !important;
  margin     : 0    !important;
  left       : auto !important;
  right      : auto !important;
  transform  : none !important;
  overflow   : visible !important;
  transition : none !important;
}

.advanced-slider-wrapper.aesc-editor-preview.aesc-height-auto,
.advanced-slider-wrapper.aesc-editor-preview.aesc-height-fixed {
  height     : auto  !important;
  min-height : 160px !important;
  max-height : none  !important;
}

.advanced-slider-wrapper.aesc-editor-preview .advanced-slider,
.advanced-slider-wrapper.aesc-editor-preview .advanced-slider-track,
.advanced-slider-wrapper.aesc-editor-preview .advanced-slide {
  height     : auto  !important;
  min-height : 160px !important;
  overflow   : visible !important;
}

/* In editor, transform-based slide track tricks don't apply —
   show only the active / first slide. Hidden slides stay in the
   DOM (so the editor's repeater still finds them) but don't render. */
.advanced-slider-wrapper.aesc-editor-preview .advanced-slider-track {
  display   : block !important;
  transform : none  !important;
}

.advanced-slider-wrapper.aesc-editor-preview .advanced-slide {
  display    : none !important;
  position   : relative !important;
  inset      : auto !important;
  opacity    : 1 !important;
  width      : 100% !important;
  flex-basis : auto !important;
}

/* v1.4.16: Removed the `:first-child` fallback that previously kept the
   first slide visible alongside .is-active. With that fallback, when the
   user clicked an arrow/dot in editor preview the JS toggled .is-active
   correctly but slide 0 stayed visible (because of :first-child) → visual
   navigation appeared broken. JS init now guarantees one slide always
   has .is-active in editor mode, so this fallback is no longer needed. */
.advanced-slider-wrapper.aesc-editor-preview .advanced-slide.is-active {
  display        : block !important;
  pointer-events : auto  !important;
}

/* Image must be in normal flow so the wrapper grows to its height.
   Without this the image is position:absolute inset:0 and the wrapper
   has no intrinsic height → preview collapses to 0 → looks blank. */
.advanced-slider-wrapper.aesc-editor-preview .aesc-slide-image {
  position        : relative !important;
  inset           : auto     !important;
  width           : 100%     !important;
  height          : auto     !important;
  display         : block    !important;
  object-fit      : contain  !important;
  object-position : center center !important;
  max-height      : none     !important;
}

/* Editor (v1.4.15): arrows MUST be clickable in the editor canvas so the
   user can preview slide navigation. Enable pointer-events on the
   button itself + raise z-index above Elementor's editor overlay.
   The SVG icon and any inner children are kept non-interactive so the
   click target is always the button, never a child element (which
   prevented click delegation in some Elementor overlay contexts). */
.advanced-slider-wrapper.aesc-editor-preview .advanced-slider-arrow {
  pointer-events : auto    !important;
  z-index        : 9999    !important;
  cursor         : pointer !important;
}

.advanced-slider-wrapper.aesc-editor-preview .advanced-slider-arrow svg,
.advanced-slider-wrapper.aesc-editor-preview .advanced-slider-arrow * {
  pointer-events : none !important;
}

/* =========================================================
   23. Visual Reset — Dots & Arrows (v1.4.17)
   =========================================================
   ROOT CAUSE: Themes and Elementor inject default `<button>` styling
   (border, box-shadow, browser-native appearance, border-radius:0,
   sometimes ::before/::after decorations) that the earlier dot/arrow
   rules did not override forcefully enough — making dots look
   square/boxed and adding visible borders on arrows.

   FIX: Force the original v1.4.12 clean visual style with high-
   specificity selectors (`.advanced-slider-wrapper` prefix) and
   `!important`, defeating any theme / Elementor / browser default.
   Same rules apply both on the real frontend and inside the
   Elementor editor preview. Functionality is NOT touched —
   sizing tokens, positioning, transitions, and hit-targets are
   inherited from Sections 14–15 above.
   ========================================================= */

/* ---- DOTS: circular, no border, no outline, no box-shadow ---- */
/* v1.4.21: size uses var(--aesc-dot-size) with !important so the
   Elementor selector (also --aesc-dot-size on wrapper) wins over
   the removed media-query hardcoded values. */
.advanced-slider-wrapper .advanced-slider-dot {
  width                 : var(--aesc-dot-size, 10px) !important;
  height                : var(--aesc-dot-size, 10px) !important;
  min-width             : var(--aesc-dot-size, 10px) !important;
  min-height            : var(--aesc-dot-size, 10px) !important;
  max-width             : var(--aesc-dot-size, 10px) !important;
  max-height            : var(--aesc-dot-size, 10px) !important;
  padding               : 0       !important;
  margin                : 0       !important;
  border                : 0       !important;
  outline               : 0       !important;
  box-shadow            : none    !important;
  border-radius         : 50%     !important;
  -webkit-appearance    : none    !important;
  appearance            : none    !important;
  background-clip       : padding-box !important;
  line-height           : 0       !important;
  font-size             : 0       !important;
  overflow              : hidden  !important;
}

.advanced-slider-wrapper .advanced-slider-dot.is-active,
.advanced-slider-wrapper .advanced-slider-dot[aria-selected="true"] {
  border        : 0    !important;
  outline       : 0    !important;
  box-shadow    : none !important;
  border-radius : 50%  !important;
}

/* Defeat theme ::before / ::after decorations on dot buttons */
.advanced-slider-wrapper .advanced-slider-dot::before,
.advanced-slider-wrapper .advanced-slider-dot::after {
  display : none !important;
  content : none !important;
}

/* ---- END of dot visual reset (Section 23, v1.4.17) ---- */
/* v1.4.19: Sections 23 arrow rules and Section 24 (transparent
   arrow background) rolled back. Arrow visual CSS reverts to the
   v1.4.16 state — Section 14 rules only, with the dark circle
   background restored. Arrow navigation was broken by the
   Section 23/24 overrides. */
/* =========================================================
   24. Arrow Transparent Override (v1.4.20)
   =========================================================
   Removes the dark circular background from navigation arrows.
   The button retains its width/height for click-target size but
   is visually fully transparent. Overrides both the Section 14
   CSS defaults AND any Elementor inline CSS from the bg-color /
   border-radius controls (via !important).

   Key fix: SVG gets position:static + transform:none so it cannot
   be displaced from the button's hit area by any theme/Elementor
   transform injection. pointer-events:auto on the button ensures
   the entire clickable area is interactive; pointer-events:none
   only on the SVG child so clicks fall through to the button.
   ========================================================= */

.advanced-slider-wrapper .advanced-slider-arrow {
  background            : transparent !important;
  background-color      : transparent !important;
  border                : 0           !important;
  outline               : 0           !important;
  box-shadow            : none        !important;
  border-radius         : 0           !important;
  width                 : var(--aesc-arrow-size, 44px) !important;
  height                : var(--aesc-arrow-size, 44px) !important;
  display               : flex        !important;
  align-items           : center      !important;
  justify-content       : center      !important;
  padding               : 0           !important;
  margin                : 0           !important;
  pointer-events        : auto        !important;
  cursor                : pointer     !important;
  -webkit-appearance    : none        !important;
  appearance            : none        !important;
}

.advanced-slider-wrapper .advanced-slider-arrow:hover,
.advanced-slider-wrapper .advanced-slider-arrow:focus,
.advanced-slider-wrapper .advanced-slider-arrow:focus-visible,
.advanced-slider-wrapper .advanced-slider-arrow:active {
  background       : transparent !important;
  background-color : transparent !important;
  border           : 0           !important;
  outline          : 0           !important;
  box-shadow       : none        !important;
  border-radius    : 0           !important;
}

/* SVG icon: lock in place so no theme/Elementor transform can push
   the visual icon outside the button's click-target rectangle.
   pointer-events:none ensures clicks on the icon fall through to the
   button (not the SVG element), so the whole button area is clickable. */
.advanced-slider-wrapper .advanced-slider-arrow svg {
  width          : var(--aesc-arrow-icon, 20px) !important;
  height         : var(--aesc-arrow-icon, 20px) !important;
  display        : block   !important;
  flex           : 0 0 auto !important;
  margin         : 0       !important;
  padding        : 0       !important;
  position       : static  !important;
  transform      : none    !important;
  pointer-events : none    !important;
}

.advanced-slider-wrapper .advanced-slider-arrow::before,
.advanced-slider-wrapper .advanced-slider-arrow::after {
  display : none !important;
  content : none !important;
}