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

.cyliumee-slider--fixed .cyliumee-slider__slide {
    height: var(--cee-height, 760px);
}

.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;
    justify-content: var(--cee-valign, flex-end);
    align-items: var(--cee-halign, center);
}

.cyliumee-slider__content-inner {
    padding: var(--cee-inner-padding, 0);
    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: inline-flex;
    flex-wrap: wrap;
    gap: var(--cee-btns-gap, 12px);
    vertical-align: top;
}

.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: var(--cee-valign-tablet, var(--cee-valign, flex-end));
        align-items: var(--cee-halign-tablet, var(--cee-halign, center));
    }
    .cyliumee-slider__content-inner {
        padding: var(--cee-inner-padding-tablet, var(--cee-inner-padding, 0));
        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: 768px) {
    .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: 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 {
        padding: var(--cee-inner-padding-mobile, var(--cee-inner-padding-tablet, var(--cee-inner-padding, 0)));
        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.
 * ───────────────────────────────────────────────────────────────────────── */