/* =====================================================
   Elementor Mobile Carousel — Frontend Styles
   ===================================================== */

/* ── Desktop: arrows, dots hidden ─────────────────────── */
.emc-arrow,
.emc-dots {
    display: none !important;
}

/* =====================================================
   SHARED MOBILE STYLES (applied via JS class .emc-active)
   ===================================================== */

/* Wrapper — lateral padding so arrows don't overlap content */
.emc-container {
    position: relative !important;
    width: 100% !important;
    padding: var(--emc-padding, 0) var(--emc-arrow-margin, 24px) !important;
    box-sizing: border-box !important;
}
.emc-container.emc-no-arrows {
    padding-left: var(--emc-padding, 0) !important;
    padding-right: var(--emc-padding, 0) !important;
}

/* Carousel scroll strip */
.emc-active {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: var(--emc-gap, 0) !important;
    padding: 0 !important;
}

/* Each slide — respect editor width, only add snap behavior */
.emc-active > * {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
}

/* Hide scrollbar */
.emc-active::-webkit-scrollbar {
    display: none !important;
}
.emc-active {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* ── Arrows ───────────────────────────────────────────── */
.emc-container .emc-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: var(--emc-arrow-size, 35px) !important;
    height: var(--emc-arrow-size, 35px) !important;
    cursor: pointer !important;
    z-index: 10 !important;
    opacity: var(--emc-arrow-opacity, 0.8) !important;
    pointer-events: auto !important;
    background: var(--emc-arrow-bg, #333) !important;
    border: none !important;
    border-radius: var(--emc-arrow-radius, 50px) !important;
    padding: 0 !important;
    transition: opacity 0.3s ease !important;
    -webkit-tap-highlight-color: transparent;
}

.emc-container .emc-arrow.emc-left {
    left: 0 !important;
}
.emc-container .emc-arrow.emc-right {
    right: 0 !important;
}

.emc-arrow svg {
    width: 60% !important;
    height: 60% !important;
    fill: none !important;
    stroke: var(--emc-arrow-color, #fff) !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    display: block !important;
}

.emc-arrow:hover {
    opacity: 1 !important;
}

.emc-arrow:disabled,
.emc-arrow[disabled] {
    opacity: 0.25 !important;
    pointer-events: none !important;
}

/* ── Dots ─────────────────────────────────────────────── */
.emc-container .emc-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--emc-dot-spacing, 6px) !important;
    margin-top: var(--emc-dot-bottom, 15px) !important;
    padding: 0 !important;
    list-style: none !important;
}

.emc-dot {
    width: var(--emc-dot-size, 10px) !important;
    height: var(--emc-dot-size, 10px) !important;
    border-radius: 50% !important;
    background: var(--emc-dot-color, #ccc) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
    -webkit-tap-highlight-color: transparent;
}

.emc-dot.active {
    background: var(--emc-dot-active, #333) !important;
    transform: scale(1.25) !important;
}

/* ── Hide arrows/dots when per-element class used ─────── */
.emc-container.emc-no-arrows .emc-arrow {
    display: none !important;
}
.emc-container.emc-no-dots .emc-dots {
    display: none !important;
}

/* ── Desktop: hide everything generated ───────────────── */
@media (min-width: 2561px) {
    /* Fallback: extremely large screen, keep hidden */
    .emc-arrow, .emc-dots { display: none !important; }
}

/* =====================================================
   LATERAL SPACING UTILITY CLASSES
   Per-carousel override of the lateral padding so arrows
   don't overlap content. Applied to .emc-container
   (JS copies matching emc-(px|pl|pr)-{n} from element).
   Overrides the global "Side Margin (px)" setting.
   ===================================================== */

/* Padding both sides (px) */
.emc-container.emc-px-0  { padding-left:  0   !important; padding-right:  0   !important; }
.emc-container.emc-px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.emc-container.emc-px-20 { padding-left: 20px !important; padding-right: 20px !important; }
.emc-container.emc-px-30 { padding-left: 30px !important; padding-right: 30px !important; }
.emc-container.emc-px-40 { padding-left: 40px !important; padding-right: 40px !important; }
.emc-container.emc-px-50 { padding-left: 50px !important; padding-right: 50px !important; }
.emc-container.emc-px-60 { padding-left: 60px !important; padding-right: 60px !important; }
.emc-container.emc-px-80 { padding-left: 80px !important; padding-right: 80px !important; }

/* Padding left only (pl) */
.emc-container.emc-pl-0  { padding-left:  0   !important; }
.emc-container.emc-pl-10 { padding-left: 10px !important; }
.emc-container.emc-pl-20 { padding-left: 20px !important; }
.emc-container.emc-pl-30 { padding-left: 30px !important; }
.emc-container.emc-pl-40 { padding-left: 40px !important; }
.emc-container.emc-pl-50 { padding-left: 50px !important; }
.emc-container.emc-pl-60 { padding-left: 60px !important; }
.emc-container.emc-pl-80 { padding-left: 80px !important; }

/* Padding right only (pr) */
.emc-container.emc-pr-0  { padding-right:  0   !important; }
.emc-container.emc-pr-10 { padding-right: 10px !important; }
.emc-container.emc-pr-20 { padding-right: 20px !important; }
.emc-container.emc-pr-30 { padding-right: 30px !important; }
.emc-container.emc-pr-40 { padding-right: 40px !important; }
.emc-container.emc-pr-50 { padding-right: 50px !important; }
.emc-container.emc-pr-60 { padding-right: 60px !important; }
.emc-container.emc-pr-80 { padding-right: 80px !important; }

/* =====================================================
   SHADOW PADDING UTILITY CLASSES
   Makes box-shadows on slides fully visible (top, bottom AND
   sides) while keeping one slide per view. The trick:
   1. padding: Npx on the strip — creates the safe zone where
      the shadow can paint without being clipped by overflow.
   2. gap: 2*Npx between slides — pushes the next slide past
      the right padding zone so it doesn't peek through.
   3. scroll-padding-inline: Npx — shifts the snap landing zone
      inward by N, so when snapped the slide's left edge sits
      at viewport+N (not at viewport edge), making the left
      pad zone visible — that's where the lateral shadow lives.
   4. width / flex-basis 100% on slides — forces a single slide
      per view regardless of Elementor's intrinsic widths.
   ===================================================== */

.emc-active.emc-shadow,
.emc-active.emc-shadow-15 {
    padding: 15px !important;
    gap: 30px !important;
    scroll-padding-inline: 15px !important;
}
.emc-active.emc-shadow > *,
.emc-active.emc-shadow-15 > * { width: 100% !important; flex-basis: 100% !important; }

.emc-active.emc-shadow-5 {
    padding: 5px !important;
    gap: 10px !important;
    scroll-padding-inline: 5px !important;
}
.emc-active.emc-shadow-5 > * { width: 100% !important; flex-basis: 100% !important; }

.emc-active.emc-shadow-10 {
    padding: 10px !important;
    gap: 20px !important;
    scroll-padding-inline: 10px !important;
}
.emc-active.emc-shadow-10 > * { width: 100% !important; flex-basis: 100% !important; }

.emc-active.emc-shadow-20 {
    padding: 20px !important;
    gap: 40px !important;
    scroll-padding-inline: 20px !important;
}
.emc-active.emc-shadow-20 > * { width: 100% !important; flex-basis: 100% !important; }

.emc-active.emc-shadow-25 {
    padding: 25px !important;
    gap: 50px !important;
    scroll-padding-inline: 25px !important;
}
.emc-active.emc-shadow-25 > * { width: 100% !important; flex-basis: 100% !important; }

.emc-active.emc-shadow-30 {
    padding: 30px !important;
    gap: 60px !important;
    scroll-padding-inline: 30px !important;
}
.emc-active.emc-shadow-30 > * { width: 100% !important; flex-basis: 100% !important; }