/**
 * 2025-2026 CyliumDev
 * @license   Proprietary - Non-commercial use only
 *
 * Image slider widget (cyliumee-slider handle).
 * Split out of front.css so a page only pays for the widgets it renders;
 * depends on 'cyliumee-front' (shared commons) for cascade order.
 */

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

.cyliumee-slider__slide {
    position: relative;
    display: block;
    width: 100%;
}

.cyliumee-slider__media-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cyliumee-slider__picture,
.cyliumee-slider__picture img {
    display: block;
    width: 100%;
    height: auto;
}

.cyliumee-slider__image {
    object-fit: cover;
    width: 100%;
}

.cyliumee-slider__video {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
}

.cyliumee-slider__video--fit-cover   { object-fit: cover; }

.cyliumee-slider__video--fit-contain { object-fit: contain; }

.cyliumee-slider__video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.cyliumee-slider__video-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cyliumee-slider__video-frame--fit-cover .cyliumee-slider__video-iframe {
    /* Scale the iframe past the box and crop with negative offsets so it covers
       (YouTube/Vimeo iframes ignore object-fit; this approximates the same look
       for a 16:9 source). */
    width: 177.78%;
    height: 100%;
    top: 0;
    left: -38.89%;
}

.cyliumee-slider__media-link .cyliumee-slider__video-iframe {
    pointer-events: none;
}

.cyliumee-slider__video-poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 🔴 THE FIXED HEIGHT IS A MINIMUM, NOT A CEILING — and this is the real reason
 * the text was cut.
 *
 * `.cyliumee-slider__content` is `position: absolute; inset: 0`, so it is OUT OF
 * FLOW: it can never make the slide taller. With `height` fixed, a slide whose
 * text needs more room simply had it cut off, and no alignment value could help —
 * `safe` alignment (1.0.86) only chose WHICH end got clipped.
 *
 * So in fixed mode the slide becomes a flex column with a `min-height`, and the
 * content block rejoins the flow as its flex child. The media stays absolute
 * behind it (`inset: 0` against the slide, which is `position: relative`), so the
 * image still covers whatever height the slide ends up with.
 *
 * What changes for an existing slider: NOTHING as long as the text fits — the
 * min-height governs and the slide is exactly as tall as before. It only differs
 * where the text was ALREADY being cut, and there growing is the point.
 * ───────────────────────────────────────────────────────────────────────── */

.cyliumee-slider--fixed .cyliumee-slider__slide {
    min-height: var(--cee-height, 760px);
    height: auto;
    display: flex;
    flex-direction: column;
}

.cyliumee-slider--fixed .cyliumee-slider__content {
    position: relative;
    flex: 1 1 auto;
    display: flex;
}

/* Stretches to the slide height via the default `align-items: stretch`, so the
   merchant's vertical alignment still has the full height to work with — which is
   what makes "centered" mean centered again once the text fits. */
.cyliumee-slider--fixed .cyliumee-slider__container {
    height: auto;
}

.cyliumee-slider--fixed .cyliumee-slider__media-link,
.cyliumee-slider--fixed .cyliumee-slider__picture,
.cyliumee-slider--fixed .cyliumee-slider__video,
.cyliumee-slider--fixed .cyliumee-slider__video-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cyliumee-slider--fixed .cyliumee-slider__video-frame {
    aspect-ratio: auto;
}

.cyliumee-slider--fixed .cyliumee-slider__picture img {
    height: 100%;
    object-fit: cover;
}

.cyliumee-slider__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--cee-overlay, transparent);
    pointer-events: none;
}

.cyliumee-slider__content {
    position: absolute;
    inset: 0;
    z-index: 5;
    box-sizing: border-box;
    padding: var(--cee-content-padding, 1.5rem);
    pointer-events: none;
}

.cyliumee-slider__container {
    width: 100%;
    max-width: var(--cee-container-w, 1140px);
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* 🔴 `safe`: when the content is TALLER than the slide, alignment falls back
       to start instead of overflowing past the top edge — where the slide's own
       `overflow: hidden` cuts it. The slide height is FIXED
       (`height: var(--cee-height, 760px)`), so on mobile a four-line heading plus
       a subtitle plus two buttons overflows easily, and with `flex-end` the
       overflow goes UPWARD: the top of the title disappears while empty space
       remains at the bottom. Restoring the content padding in 1.0.85 removed
       another 48px of usable height and made it visible. */
    justify-content: safe var(--cee-valign, flex-end);
    align-items: var(--cee-halign, center);
}

.cyliumee-slider__content-inner {
    max-width: var(--cee-content-max-width, 800px);
    width: 100%;
    text-align: var(--cee-talign, center);
    background: var(--cee-content-bg, transparent);
    pointer-events: auto;
}

.cyliumee-slider__heading {
    margin: 0 0 0.25em;
    color: var(--cee-h-color, #fff);
    font-size: var(--cee-h-size, 2.25rem);
    line-height: 1.15;
}

.cyliumee-slider__subheading {
    margin: 0 0 0.5em;
    color: var(--cee-sh-color, #fff);
    font-size: var(--cee-sh-size, 1.25rem);
    line-height: 1.25;
    font-weight: 500;
}

.cyliumee-slider__text {
    margin: 0 0 1em;
    color: var(--cee-t-color, #fff);
    font-size: var(--cee-t-size, 1rem);
    line-height: 1.45;
}

.cyliumee-slider__text > :last-child {
    margin-bottom: 0;
}

/* Layout only. Everything a theme button brings with it — padding, border,
   radius, weight, colours — lives in the `:not()` block below, so that a chosen
   type is never overridden by this stylesheet. */
.cyliumee-slider__button {
    display: inline-block;
    margin: 0;
    /* No font-size here: the button's text size comes from the CE Typography
       group (button_typography), which is responsive on its own. Hard-coding
       14px in the tablet/mobile media queries used to override it — the
       --cee-btn-size* variables it read were never emitted anywhere. */
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.cyliumee-slider__button:hover,
.cyliumee-slider__button:focus {
    outline: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
 * THE WIDGET'S OWN LOOK — only when NO type is applied.
 *
 * A type puts `.elementor-button` (CE family) or `.btn` (shop-theme family) on the
 * button, and the global style then owns it: the kit writes
 * `.elementor-button-primary .elementor-button { background-color: … }`, the theme
 * writes `.btn-primary { … }`. Declaring our own background alongside made the two
 * compete — the button stayed black (reported by the user). Excluding those two
 * classes makes the module go silent as soon as a type is chosen, so the theme
 * style governs with nothing to override.
 *
 * 🔴 GEOMETRY IS IN HERE TOO (padding / border / radius / weight). It used to sit
 * in the base rule above and therefore crushed the geometry of a theme button in
 * every case — colours were protected by this guard, the box was not.
 *
 * Consequence to keep in mind: with a type selected, the per-button colour and
 * size settings of the Style tab still apply, but through CE's generated CSS
 * (each control carries its own `selectors`), not through this file. An unset
 * control emits nothing at all, which is what lets the theme express itself.
 * ───────────────────────────────────────────────────────────────────────── */

.cyliumee-slider__button:not(.elementor-button):not(.btn) {
    padding: var(--cee-btn-pad-y, 12px) var(--cee-btn-pad-x, 24px);
    border: var(--cee-btn-border-w, 0) solid var(--cee-btn-border-color, transparent);
    border-radius: var(--cee-btn-radius, 4px);
    font-weight: 600;
    color: var(--cee-btn-text, #fff);
    background: var(--cee-btn-bg, #1f1f1f);
}

.cyliumee-slider__button:not(.elementor-button):not(.btn):hover,
.cyliumee-slider__button:not(.elementor-button):not(.btn):focus {
    border-color: var(--cee-btn-border-color-hover, var(--cee-btn-border-color, transparent));
    color: var(--cee-btn-text-hover, #fff);
    background: var(--cee-btn-bg-hover, #444);
}

.cyliumee-slider__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cee-btns-gap, 12px);
    vertical-align: top;
    /* Unset = follow the text block. `--cee-halign` is the block's own alignment,
       so the buttons inherit it until a slide says otherwise — which is exactly
       what they did before this control existed. `display` had to move from
       inline-flex to flex for justify-content to have any meaning. */
    justify-content: var(--cee-btnalign, var(--cee-halign, center));
}

@media (max-width: 1024px) {
    .cyliumee-slider__buttons {
        justify-content: var(--cee-btnalign-tablet, var(--cee-btnalign, var(--cee-halign-tablet, var(--cee-halign, center))));
    }
}

@media (max-width: 767px) {
    .cyliumee-slider__buttons {
        justify-content: var(--cee-btnalign-mobile, var(--cee-btnalign-tablet, var(--cee-btnalign, var(--cee-halign-mobile, var(--cee-halign-tablet, var(--cee-halign, center))))));
    }
}

.cyliumee-slider__button--2:not(.elementor-button):not(.btn) {
    color: var(--cee-btn2-text, #1f1f1f);
    background: var(--cee-btn2-bg, #fff);
    border: var(--cee-btn2-border-w, 0) solid var(--cee-btn2-border-color, transparent);
    border-radius: var(--cee-btn2-radius, var(--cee-btn-radius, 4px));
}

.cyliumee-slider__button--2:not(.elementor-button):not(.btn):hover,
.cyliumee-slider__button--2:not(.elementor-button):not(.btn):focus {
    color: var(--cee-btn2-text-hover, #1f1f1f);
    background: var(--cee-btn2-bg-hover, #e5e5e5);
    border-color: var(--cee-btn2-border-color-hover, var(--cee-btn2-border-color, transparent));
}

.cyliumee-slider__button--3:not(.elementor-button):not(.btn) {
    color: var(--cee-btn3-text, #fff);
    background: var(--cee-btn3-bg, rgba(255, 255, 255, 0.15));
    border: var(--cee-btn3-border-w, 1px) solid var(--cee-btn3-border-color, rgba(255, 255, 255, 0.3));
    border-radius: var(--cee-btn3-radius, var(--cee-btn-radius, 4px));
}

.cyliumee-slider__button--3:not(.elementor-button):not(.btn):hover,
.cyliumee-slider__button--3:not(.elementor-button):not(.btn):focus {
    color: var(--cee-btn3-text-hover, #fff);
    background: var(--cee-btn3-bg-hover, rgba(255, 255, 255, 0.3));
    border-color: var(--cee-btn3-border-color-hover, var(--cee-btn3-border-color, rgba(255, 255, 255, 0.3)));
}

.cyliumee-slider--anim-fade .cyliumee-slider__content-inner--animate {
    animation: ceeSliderFade var(--cee-anim-duration, 700ms) ease both;
}

.cyliumee-slider--anim-fade-up .cyliumee-slider__content-inner--animate {
    animation: ceeSliderFadeUp var(--cee-anim-duration, 700ms) ease both;
}

@media (prefers-reduced-motion: reduce) {
    .cyliumee-slider--anim-fade .cyliumee-slider__content-inner--animate,
    .cyliumee-slider--anim-fade-up .cyliumee-slider__content-inner--animate {
        animation: none;
    }
}

@media (max-width: 1024px) {
    .cyliumee-slider--fixed .cyliumee-slider__slide {
        height: var(--cee-height-tablet, var(--cee-height, 760px));
    }
    .cyliumee-slider__content {
        padding: var(--cee-content-padding-tablet, var(--cee-content-padding, 1.5rem));
    }
    .cyliumee-slider__container {
        max-width: var(--cee-container-w-tablet, var(--cee-container-w, 1140px));
        justify-content: safe var(--cee-valign-tablet, var(--cee-valign, flex-end));
        align-items: var(--cee-halign-tablet, var(--cee-halign, center));
    }
    .cyliumee-slider__content-inner {
        max-width: var(--cee-content-max-width-tablet, var(--cee-content-max-width, 800px));
        text-align: var(--cee-talign-tablet, var(--cee-talign, center));
    }
    .cyliumee-slider__heading    { font-size: var(--cee-h-size-tablet, var(--cee-h-size, 2.25rem)); }
    .cyliumee-slider__subheading { font-size: var(--cee-sh-size-tablet, var(--cee-sh-size, 1.25rem)); }
    .cyliumee-slider__text       { font-size: var(--cee-t-size-tablet, var(--cee-t-size, 1rem)); }
    .cyliumee-slider__button:not(.elementor-button):not(.btn) {
        padding: var(--cee-btn-pad-y-tablet, var(--cee-btn-pad-y, 12px)) var(--cee-btn-pad-x-tablet, var(--cee-btn-pad-x, 24px));
    }
    .cyliumee-slider__pagination {
        bottom: var(--cee-dots-bottom-tablet, var(--cee-dots-bottom, 12px));
    }
}

@media (max-width: 767px) {
    .cyliumee-slider--fixed .cyliumee-slider__slide {
        height: var(--cee-height-mobile, var(--cee-height-tablet, var(--cee-height, 760px)));
    }
    .cyliumee-slider__content {
        padding: var(--cee-content-padding-mobile, var(--cee-content-padding-tablet, var(--cee-content-padding, 1.5rem)));
    }
    .cyliumee-slider__container {
        max-width: var(--cee-container-w-mobile, var(--cee-container-w-tablet, var(--cee-container-w, 1140px)));
        justify-content: safe var(--cee-valign-mobile, var(--cee-valign-tablet, var(--cee-valign, flex-end)));
        align-items: var(--cee-halign-mobile, var(--cee-halign-tablet, var(--cee-halign, center)));
    }
    .cyliumee-slider__content-inner {
        max-width: var(--cee-content-max-width-mobile, var(--cee-content-max-width-tablet, var(--cee-content-max-width, 800px)));
        text-align: var(--cee-talign-mobile, var(--cee-talign-tablet, var(--cee-talign, center)));
    }
    .cyliumee-slider__heading    { font-size: var(--cee-h-size-mobile, var(--cee-h-size-tablet, var(--cee-h-size, 1.5rem))); }
    .cyliumee-slider__subheading { font-size: var(--cee-sh-size-mobile, var(--cee-sh-size-tablet, var(--cee-sh-size, 1.05rem))); }
    .cyliumee-slider__text       { font-size: var(--cee-t-size-mobile, var(--cee-t-size-tablet, var(--cee-t-size, 0.9rem))); }
    .cyliumee-slider__button:not(.elementor-button):not(.btn) {
        padding: var(--cee-btn-pad-y-mobile, var(--cee-btn-pad-y-tablet, var(--cee-btn-pad-y, 12px)))
                 var(--cee-btn-pad-x-mobile, var(--cee-btn-pad-x-tablet, var(--cee-btn-pad-x, 24px)));
    }
    .cyliumee-slider__pagination {
        bottom: var(--cee-dots-bottom-mobile, var(--cee-dots-bottom-tablet, var(--cee-dots-bottom, 12px)));
    }
}

.cyliumee-slider__nav {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 50%;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cee-arrow-size, 44px);
    height: var(--cee-arrow-size, 44px);
    margin: calc(var(--cee-arrow-size, 44px) / -2) 0 0 0;
    padding: 0;
    color: var(--cee-arrow, #fff);
    background: var(--cee-arrow-bg, rgba(0, 0, 0, 0.35));
    background-image: none;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.cyliumee-slider__nav:hover,
.cyliumee-slider__nav:focus {
    background: var(--cee-arrow-bg-hover, rgba(0, 0, 0, 0.6));
    color: var(--cee-arrow-hover, var(--cee-arrow, #fff));
    outline: 0;
    box-shadow: none;
}

.cyliumee-slider__nav--prev { left: 12px; }

.cyliumee-slider__nav--next { right: 12px; }

.cyliumee-slider__nav--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.cyliumee-slider__nav--hidden { display: none; }

.cyliumee-slider__nav svg {
    display: block;
    width: 40%;
    height: 40%;
}

.cyliumee-slider__pagination {
    position: absolute;
    bottom: var(--cee-dots-bottom, 12px);
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}

.cyliumee-slider--dots-pill .cyliumee-slider__pagination {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--cee-dots-pill-bg, rgba(10, 10, 11, 0.55));
    -webkit-backdrop-filter: blur(var(--cee-dots-pill-blur, 6px));
    backdrop-filter: blur(var(--cee-dots-pill-blur, 6px));
}

.cyliumee-slider__pagination--clickable .cyliumee-slider__bullet {
    pointer-events: auto;
}

.cyliumee-slider__bullet {
    width: var(--cee-dot-size, 10px);
    height: var(--cee-dot-size, 10px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: var(--cee-dot, rgba(255, 255, 255, 0.5));
    box-shadow: none;
    opacity: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cyliumee-slider__bullet:hover { transform: scale(1.15); }

.cyliumee-slider__bullet--active {
    width: var(--cee-dot-w-active, var(--cee-dot-size, 10px));
    background: var(--cee-dot-active, #fff);
    transform: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 * BUTTON TYPES — no CSS of our own on purpose (since 1.0.39).
 *
 * A type now makes the button INHERIT a global style instead of carrying colours
 * declared here:
 *   - Creative Elements family: `.elementor-button` on the button plus
 *     `.elementor-button-{primary|secondary}` on its wrapper, which is exactly
 *     what the kit styles (core/kits/documents/kit.php);
 *   - shop-theme family: the theme's own `.btn`, `.btn-primary`, `.btn-secondary`.
 *
 * So whatever the editor configures in "Theme Style Settings" applies to these
 * buttons with no duplication here. The 1.0.36 Bootstrap palette
 * (info/success/warning/danger and the --cee-btn-type-* variables) is gone: those
 * types exist nowhere in the kit, so they could only hard-code a parallel colour.
 *
 * The per-button colour settings in the Style tab still win over the inherited
 * style — they are emitted as --cee-btnN-* custom properties consumed by the
 * rules above.
 * ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
 * 🔴 SAME GLOBAL CREATIVE ELEMENTS RULE AS THE ICON BOXES, THIRD VICTIM
 *
 *   .elementor-widget .swiper-slide > :not(.swiper-lazy-preloader)
 *       { min-width: 100%; padding: 0 !important }
 *   — creativeelements/views/css/widget-image-carousel.min.css, CE 2.14.0
 *
 * `.cyliumee-slider__content` is a DIRECT child of `.swiper-slide`, so its
 * `padding: var(--cee-content-padding)` was wiped by that `!important` — which is
 * the whole of the "Content padding does nothing" report. The variable was always
 * emitted correctly; a third-party rule was eating it.
 *
 * Repeated class for specificity (0,4,0 vs CE's 0,3,0) AND `!important`, because
 * here we must beat an `!important` — a plain declaration cannot. Scoped to
 * `.cyliumee-slider`, so CE's image carousel is untouched.
 * ───────────────────────────────────────────────────────────────────────── */

.cyliumee-slider.cyliumee-slider .swiper-slide > .cyliumee-slider__content {
    padding: var(--cee-content-padding, 1.5rem) !important;
}

@media (max-width: 1024px) {
    .cyliumee-slider.cyliumee-slider .swiper-slide > .cyliumee-slider__content {
        padding: var(--cee-content-padding-tablet, var(--cee-content-padding, 1.5rem)) !important;
    }
}

@media (max-width: 767px) {
    .cyliumee-slider.cyliumee-slider .swiper-slide > .cyliumee-slider__content {
        padding: var(--cee-content-padding-mobile, var(--cee-content-padding-tablet, var(--cee-content-padding, 1.5rem))) !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * CONTENT SPACING — one `gap`, not a pile of margins.
 *
 * Every child of the text block used to carry its own bottom margin (heading
 * 0.25em, subheading 0.5em, text 1em, and a `:last-child` reset), so the spacing
 * between two lines depended on WHICH blocks the slide happened to have. A flex
 * column with `gap` gives one number, and it is the same number everywhere.
 *
 * ───────────────────────────────────────────────────────────────────────── */

/* `box-sizing` stays even though the inner padding it was written for is gone
   (removed in 1.0.105): this box is `width: 100%`, so any padding a theme or a
   merchant stylesheet puts on it would otherwise be ADDED to that width and the
   block would overflow its container. Cheap insurance, and it costs nothing. */
.cyliumee-slider__content-inner {
    box-sizing: border-box;
}

/* 🔴 The flex column and the margin reset are gated behind `--gap`, a modifier
   the template emits ONLY when the merchant set a spacing value. Applying them to
   every slider would silently restyle the documents already published with the
   legacy per-child margins — the retroactive change this module has been bitten
   by before. An untouched slider renders exactly as it did. */
.cyliumee-slider__content-inner--gap {
    display: flex;
    flex-direction: column;
    gap: var(--cee-content-gap, 0px);
}

@media (max-width: 1024px) {
    .cyliumee-slider__content-inner--gap {
        gap: var(--cee-content-gap-tablet, var(--cee-content-gap, 0px));
    }
}

@media (max-width: 767px) {
    .cyliumee-slider__content-inner--gap {
        gap: var(--cee-content-gap-mobile, var(--cee-content-gap-tablet, var(--cee-content-gap, 0px)));
    }
}

.cyliumee-slider__content-inner--gap .cyliumee-slider__heading,
.cyliumee-slider__content-inner--gap .cyliumee-slider__subheading,
.cyliumee-slider__content-inner--gap .cyliumee-slider__text,
.cyliumee-slider__content-inner--gap .cyliumee-slider__buttons {
    margin: 0;
}