/* =====================================================
   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;
}

/* ── Multi-card layout (only for .emc-always carousels) ──
   Mobile is always one card per view. Tablet (>=768px) and desktop
   (>=1025px) show a configurable number of cards, optionally revealing a
   peek of the next card via --emc-peek. Spacing between cards is set with
   --emc-card-gap, independent of the global slide gap. Non-always carousels
   keep their intrinsic Elementor widths and are unaffected. */

/* Force the strip to fill the wrapper. Elementor can set a reduced container
   width (e.g. --width:80%) on the element, which would leave empty space on
   the side where the next arrow sits. */
.emc-always.emc-active,
.emc-always .emc-active {
    width: 100% !important;
    max-width: 100% !important;
}
.emc-always.emc-active > *,
.emc-always .emc-active > * {
    flex-basis: 100% !important;
    width: auto !important;
    max-width: none !important;
}
@media (min-width: 768px) {
    .emc-always.emc-active,
    .emc-always .emc-active {
        gap: var(--emc-card-gap, 0px) !important;
    }
    .emc-always.emc-active > *,
    .emc-always .emc-active > * {
        flex-basis: calc(
            (100% - var(--emc-peek, 0px) - (var(--emc-cards-tablet, 1) - 1) * var(--emc-card-gap, 0px))
            / var(--emc-cards-tablet, 1)
        ) !important;
    }
}
@media (min-width: 1025px) {
    .emc-always.emc-active > *,
    .emc-always .emc-active > * {
        flex-basis: calc(
            (100% - var(--emc-peek, 0px) - (var(--emc-cards-desktop, 1) - 1) * var(--emc-card-gap, 0px))
            / var(--emc-cards-desktop, 1)
        ) !important;
    }
}

/* ── Mouse drag-to-scroll ─────────────────────────────── */
.emc-active.emc-draggable {
    cursor: grab !important;
}
.emc-active.emc-dragging {
    cursor: grabbing !important;
    /* Disable snap while dragging so the strip follows the pointer smoothly;
       JS snaps to the nearest slide on release. */
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}
.emc-active.emc-dragging * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !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: var(--emc-arrow-zindex, 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;
    box-sizing: border-box !important;
    padding: var(--emc-arrow-padding, 0) !important;
    transition: opacity 0.3s ease !important;
    -webkit-tap-highlight-color: transparent;
}

.emc-container .emc-arrow.emc-left {
    left: var(--emc-arrow-offset, 0) !important;
}
.emc-container .emc-arrow.emc-right {
    right: var(--emc-arrow-offset, 0) !important;
}

.emc-arrow svg {
    width: var(--emc-arrow-icon-size, 60%) !important;
    height: var(--emc-arrow-icon-size, 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;
}

/* ── Arrows aligned to the dots row ───────────────────────
   Global "Arrows at dots level" setting or per-carousel
   .emc-arrows-bottom. Arrows drop to the bottom corners and
   align with the dots: the dots row is given min-height = arrow
   size, and both the arrows and the dots box are anchored to
   bottom:0, so their vertical centers coincide. Lateral padding
   and arrow offset are left to the existing Side Margin / Offset
   settings and the emc-px/pl/pr utilities — no extra padding here. */
.emc-container.emc-arrows-bottom .emc-arrow {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
}
.emc-container.emc-arrows-bottom .emc-dots {
    min-height: var(--emc-arrow-size, 35px) !important;
}

/* ── Right-edge fade overlay (opt-in per carousel) ─────────
   Add .emc-fade-1 or .emc-fade-2 to a carousel to fade its right
   edge into a solid colour — a "there's more" hint that blends the
   last visible card into the section background. Two classes so a
   site can have two background colours (e.g. white vs light-blue
   sections). Colours are set in admin (Fade colour 1 / 2) and land
   as --emc-fade-1-color / --emc-fade-2-color. JS copies the class
   from the carousel element to .emc-container. Kept below the
   arrows (z-index) so they stay clickable and visible.

   The fade only makes sense when a next card is peeking: with a
   single card filling the viewport there is nothing to blend, and
   the gradient would just wash out the right edge of that card. So
   the width is derived from the peek and collapses to 0 when there
   is none — see the --emc-fade-size block below. */
.emc-container.emc-fade-1::after,
.emc-container.emc-fade-2::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: var(--emc-fade-width, var(--emc-fade-size, 0px)) !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: var(--emc-fade-zindex, 9) !important;
}

/* Fade width, derived from the peek.
   --emc-fade-size is the computed default; --emc-fade-width is a manual
   escape hatch that wins at any breakpoint (for carousels that show a
   partial card through Elementor's intrinsic widths rather than --emc-peek).

   Below 768px every carousel is single-card — the multi-card calc() that
   consumes --emc-peek lives in the >=768px media queries — so the peek is
   effectively 0 here no matter what .emc-peek-{n} says, and the fade is off. */
.emc-container.emc-fade-1,
.emc-container.emc-fade-2 {
    --emc-fade-size: 0px;
}
@media (min-width: 768px) {
    .emc-container.emc-fade-1,
    .emc-container.emc-fade-2 {
        /* Tunable: how far the gradient reaches in from the right edge.
           var(--emc-peek) covers exactly the peeking card, so it goes from
           fully visible at its left edge to fully blended at the viewport
           edge. Peek 0 => 0 => no fade. */
        --emc-fade-size: var(--emc-peek, 0px);
    }
}
.emc-container.emc-fade-1::after {
    background: linear-gradient(to right, transparent, var(--emc-fade-1-color, #E9F1FA)) !important;
}
.emc-container.emc-fade-2::after {
    background: linear-gradient(to right, transparent, var(--emc-fade-2-color, #ffffff)) !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.
   ===================================================== */

/* 1. Each variant only declares the pad amount in a custom property. */
.emc-active.emc-shadow,
.emc-active.emc-shadow-15 { --emc-shadow-pad: 15px; }
.emc-active.emc-shadow-5  { --emc-shadow-pad: 5px;  }
.emc-active.emc-shadow-10 { --emc-shadow-pad: 10px; }
.emc-active.emc-shadow-20 { --emc-shadow-pad: 20px; }
.emc-active.emc-shadow-25 { --emc-shadow-pad: 25px; }
.emc-active.emc-shadow-30 { --emc-shadow-pad: 30px; }

/* 2. SHARED: inner padding + snap inset paint the shadow on all four sides.
   Applies to every layout — single-card AND .emc-always multi-card. */
.emc-active.emc-shadow,
.emc-active.emc-shadow-5,
.emc-active.emc-shadow-10,
.emc-active.emc-shadow-15,
.emc-active.emc-shadow-20,
.emc-active.emc-shadow-25,
.emc-active.emc-shadow-30 {
    padding: var(--emc-shadow-pad) !important;
    scroll-padding-inline: var(--emc-shadow-pad) !important;
}

/* 3. SINGLE-CARD ONLY: gap = 2× pad hides the next slide and width:100%
   forces one slide per view. Excluded on .emc-always so its multi-card
   flex-basis and --emc-card-gap survive (this was the incompatibility:
   shadow used to override the visible-card count on desktop). */
.emc-active.emc-shadow:not(.emc-always),
.emc-active.emc-shadow-5:not(.emc-always),
.emc-active.emc-shadow-10:not(.emc-always),
.emc-active.emc-shadow-15:not(.emc-always),
.emc-active.emc-shadow-20:not(.emc-always),
.emc-active.emc-shadow-25:not(.emc-always),
.emc-active.emc-shadow-30:not(.emc-always) {
    gap: calc(var(--emc-shadow-pad) * 2) !important;
}
.emc-active.emc-shadow:not(.emc-always) > *,
.emc-active.emc-shadow-5:not(.emc-always) > *,
.emc-active.emc-shadow-10:not(.emc-always) > *,
.emc-active.emc-shadow-15:not(.emc-always) > *,
.emc-active.emc-shadow-20:not(.emc-always) > *,
.emc-active.emc-shadow-25:not(.emc-always) > *,
.emc-active.emc-shadow-30:not(.emc-always) > * {
    width: 100% !important;
    flex-basis: 100% !important;
}

/* =====================================================
   CARDS-PER-VIEW UTILITY CLASSES (per-carousel)
   Override the global "Cards on desktop / tablet" for a single
   carousel. Only a CSS custom property is set; it inherits down to
   the slides, where the .emc-always multi-card calc() consumes it.
   No JS needed — these vars cascade from the carousel element.
   Pair with .emc-always (multi-card is desktop/tablet only; mobile
   always shows one card per view).
   ===================================================== */

/* Desktop (>=1025px) */
.emc-cards-1 { --emc-cards-desktop: 1 !important; }
.emc-cards-2 { --emc-cards-desktop: 2 !important; }
.emc-cards-3 { --emc-cards-desktop: 3 !important; }
.emc-cards-4 { --emc-cards-desktop: 4 !important; }
.emc-cards-5 { --emc-cards-desktop: 5 !important; }
.emc-cards-6 { --emc-cards-desktop: 6 !important; }

/* Tablet (768px–1024px) */
.emc-cards-tablet-1 { --emc-cards-tablet: 1 !important; }
.emc-cards-tablet-2 { --emc-cards-tablet: 2 !important; }
.emc-cards-tablet-3 { --emc-cards-tablet: 3 !important; }
.emc-cards-tablet-4 { --emc-cards-tablet: 4 !important; }
.emc-cards-tablet-5 { --emc-cards-tablet: 5 !important; }
.emc-cards-tablet-6 { --emc-cards-tablet: 6 !important; }

/* =====================================================
   NEXT-CARD PEEK (OFFSET) UTILITY CLASSES (per-carousel)
   Opt-in offset: only carousels carrying one of these classes leave
   part of the next card visible as a "there's more" hint. Sets the
   inherited --emc-peek custom property the multi-card calc() already
   subtracts, so no JS is needed. Overrides the global "Next card
   peek" setting for that carousel only. Pair with .emc-always.
   ===================================================== */
.emc-peek-10  { --emc-peek: 10px  !important; }
.emc-peek-20  { --emc-peek: 20px  !important; }
.emc-peek-30  { --emc-peek: 30px  !important; }
.emc-peek-40  { --emc-peek: 40px  !important; }
.emc-peek-50  { --emc-peek: 50px  !important; }
.emc-peek-60  { --emc-peek: 60px  !important; }
.emc-peek-80  { --emc-peek: 80px  !important; }
.emc-peek-100 { --emc-peek: 100px !important; }
.emc-peek-120 { --emc-peek: 120px !important; }
.emc-peek-150 { --emc-peek: 150px !important; }
.emc-peek-200 { --emc-peek: 200px !important; }
.emc-peek-250 { --emc-peek: 250px !important; }
.emc-peek-300 { --emc-peek: 300px !important; }

/* =====================================================
   MOBILE-ONLY SHADOW PADDING UTILITY CLASSES (<=767px)
   Same effect as .emc-shadow-* but scoped to phones, so a carousel
   can have shadow padding only on mobile (or a different amount than
   desktop). On phones every carousel is single-card (multi-card layout
   starts at 768px), so the gap/width rules apply unconditionally here.
   JS copies emc-m-shadow* from the element to the .emc-active strip.
   ===================================================== */
@media (max-width: 767px) {
    .emc-active.emc-m-shadow,
    .emc-active.emc-m-shadow-15 { --emc-shadow-pad: 15px; }
    .emc-active.emc-m-shadow-5  { --emc-shadow-pad: 5px;  }
    .emc-active.emc-m-shadow-10 { --emc-shadow-pad: 10px; }
    .emc-active.emc-m-shadow-20 { --emc-shadow-pad: 20px; }
    .emc-active.emc-m-shadow-25 { --emc-shadow-pad: 25px; }
    .emc-active.emc-m-shadow-30 { --emc-shadow-pad: 30px; }

    .emc-active.emc-m-shadow,
    .emc-active.emc-m-shadow-5,
    .emc-active.emc-m-shadow-10,
    .emc-active.emc-m-shadow-15,
    .emc-active.emc-m-shadow-20,
    .emc-active.emc-m-shadow-25,
    .emc-active.emc-m-shadow-30 {
        padding: var(--emc-shadow-pad) !important;
        scroll-padding-inline: var(--emc-shadow-pad) !important;
        gap: calc(var(--emc-shadow-pad) * 2) !important;
    }
    .emc-active.emc-m-shadow > *,
    .emc-active.emc-m-shadow-5 > *,
    .emc-active.emc-m-shadow-10 > *,
    .emc-active.emc-m-shadow-15 > *,
    .emc-active.emc-m-shadow-20 > *,
    .emc-active.emc-m-shadow-25 > *,
    .emc-active.emc-m-shadow-30 > * {
        width: 100% !important;
        flex-basis: 100% !important;
    }
}