/**
 * Tiger Slider — Front-end styles
 *
 * Layout / animation / Swiper plumbing only. Typography, colors, padding,
 * margin, borders are owned by Elementor widget controls (Style tab) which
 * default to the active kit's Global Colors / Global Fonts. The `--tiger-*`
 * tokens below act as a final fallback when nothing else is set.
 *
 * @package TigerElements
 */

/* ---------- Wrapper / container ---------- */
.tg-sl-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.tg-sl-cont {
    width: 100%;
    max-width: 100%;
    height: 600px; /* overridden by the Slider Height control */
    overflow: hidden;
}

/* ---------- Slide ---------- */
.tg-sl-slide {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    position: relative;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), filter 0.8s ease;
    background-color: transparent;
    backdrop-filter: blur(0px);
    border: 0;
}

.tg-sl-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tiger-swiper-slide-active.tg-sl-slide {
    backdrop-filter: blur(15px) saturate(160%);
    -webkit-backdrop-filter: blur(15px) saturate(160%);
}

.tiger-swiper-slide:not(.tiger-swiper-slide-active) {
    filter: brightness(0.4) scale(0.96);
}

/* ---------- Content stack ---------- */
.tg-sl-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 700px;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tg-sl-content > * {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(8px);
    transition: all var(--tg-sl-anim-dur, 0.8s) cubic-bezier(0.2, 1, 0.3, 1);
}

.tiger-swiper-slide-active .tg-sl-title { transition-delay: calc(var(--tg-sl-anim-stagger, 0.1s) * 2); opacity: 1; transform: translateY(0); filter: blur(0); }
.tiger-swiper-slide-active .tg-sl-sub   { transition-delay: calc(var(--tg-sl-anim-stagger, 0.1s) * 3); opacity: 1; transform: translateY(0); filter: blur(0); }
.tiger-swiper-slide-active .tg-sl-desc  { transition-delay: calc(var(--tg-sl-anim-stagger, 0.1s) * 4); opacity: 1; transform: translateY(0); filter: blur(0); }
.tiger-swiper-slide-active .tg-sl-btns  { transition-delay: calc(var(--tg-sl-anim-stagger, 0.1s) * 5); opacity: 1; transform: translateY(0); filter: blur(0); }

.tg-sl-noanim .tg-sl-content > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
}

/* ---------- Text fallbacks ----------
   3-step var() cascade: Elementor global → Tiger token → hardcoded.
   Per-widget Style-tab controls still override everything when set. */
.tg-sl-title { margin: 0; color: var(--e-global-color-primary,   var(--tiger-color-primary,   #6c5ce7)); }
.tg-sl-sub   {            color: var(--e-global-color-secondary, var(--tiger-color-secondary, #54595f)); }
.tg-sl-desc  {            color: var(--e-global-color-text,      var(--tiger-color-text,      #7a7a7a)); }

/* ---------- Buttons (structure only) ----------
   Markup adds `.elementor-button` on each anchor so Elementor kit Theme
   Style → Buttons drives typography, padding, radius, colors, border, and
   hover by default. Per-widget Style-tab controls then override on a
   single-slider basis. Nothing about color, padding, or typography lives
   here — only layout (gap, inline-flow, transition). */
.tg-sl-btns {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.tg-sl-btn-pri,
.tg-sl-btn-sec {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* ---------- Arrows ---------- */
.tg-sl-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.tg-sl-arrow-prev { left: 20px; }
.tg-sl-arrow-next { right: 20px; }

/* ---------- Pagination dots ---------- */
.tg-sl-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 999;
}

.tg-sl-dots-outside .tg-sl-dots {
    position: relative;
}

.tg-sl-dots-inside .tg-sl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
}

.tiger-swiper-pagination-bullet {
    height: 8px;
    width: 8px;
    border-radius: 4px;
    opacity: 1;
    transition: 0.4s;
    background: var(--e-global-color-secondary, var(--tiger-color-secondary, rgba(255, 255, 255, 0.2)));
}

.tiger-swiper-pagination-bullet-active {
    width: 30px;
    background: var(--e-global-color-accent, var(--tiger-color-accent, #61ce70));
}