/**
 * FutureBit PageBuilder Slider - Component Stylesheet
 * Supports easy customization via CSS Custom Properties in Hyvä Child Themes.
 */

:root,
.futurebit-pagebuilder-slider {
    /* Brand & Accent Colors */
    --fb-slider-accent: var(--color-primary);
    --fb-slider-accent-hover: var(--color-primary-darker);

    /* Navigation Arrows */
    --fb-slider-nav-size: 40px;
    --fb-slider-nav-bg: var(--color-white);
    --fb-slider-nav-color: var(--color-secondary);
    --fb-slider-nav-border: var(--color-slate-400);
    --fb-slider-nav-radius: 0px;
    --fb-slider-nav-shadow: 0 1px 4px rgba( var(--color-gray-300), 0.08);

    /* Progress Bar */
    --fb-slider-progress-height: 6px;
    --fb-slider-progress-color: var(--fb-slider-accent);
    --fb-slider-progress-track-bg: var(--color-gray-300);

    /* Pagination Dots */
    --fb-slider-dot-height: 12px;
    --fb-slider-dot-active-width: 32px;
    --fb-slider-dot-inactive-width: 12px;
    --fb-slider-dot-active-bg: var(--fb-slider-accent);
    --fb-slider-dot-active-border: var(--fb-slider-accent);
    --fb-slider-dot-inactive-bg: var(--color-white);
    --fb-slider-dot-inactive-border: var(--color-slate-400);
    --fb-slider-dot-radius: 0px;

    /* Contained & Compact Cards */
    --fb-slider-contained-max-width: 96rem;
    --fb-slider-card-max-width: 480px;
    --fb-slider-card-bg: rgba(30, 32, 34, 0.95);
    --fb-slider-card-color: var(--color-white);
    --fb-slider-card-radius: 2px;
    --fb-slider-card-padding: 28px 36px;
}

/* Base Slider Container */
.futurebit-pagebuilder-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.futurebit-pagebuilder-slider .futurebit-slider-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.futurebit-pagebuilder-slider .futurebit-slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.futurebit-pagebuilder-slider .futurebit-slider-track::-webkit-scrollbar {
    display: none;
}
.futurebit-pagebuilder-slider .futurebit-slide {
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
}

/* 9-Point Position Matrix */
.futurebit-pagebuilder-slider [data-position="top-left"] {
    align-items: flex-start; justify-content: flex-start; text-align: left;
}
.futurebit-pagebuilder-slider [data-position="top-center"] {
    align-items: flex-start; justify-content: center; text-align: center;
}
.futurebit-pagebuilder-slider [data-position="top-right"] {
    align-items: flex-start; justify-content: flex-end; text-align: right;
}
.futurebit-pagebuilder-slider [data-position="middle-left"],
.futurebit-pagebuilder-slider [data-position="left"] {
    align-items: center; justify-content: flex-start; text-align: left;
}
.futurebit-pagebuilder-slider [data-position="middle-center"],
.futurebit-pagebuilder-slider [data-position="center"] {
    align-items: center; justify-content: center; text-align: center;
}
.futurebit-pagebuilder-slider [data-position="middle-right"],
.futurebit-pagebuilder-slider [data-position="right"] {
    align-items: center; justify-content: flex-end; text-align: right;
}
.futurebit-pagebuilder-slider [data-position="bottom-left"] {
    align-items: flex-end; justify-content: flex-start; text-align: left;
}
.futurebit-pagebuilder-slider [data-position="bottom-center"] {
    align-items: flex-end; justify-content: center; text-align: center;
}
.futurebit-pagebuilder-slider [data-position="bottom-right"] {
    align-items: flex-end; justify-content: flex-end; text-align: right;
}

/* Typography & Responsive Font Sizes */
.futurebit-pagebuilder-slider .futurebit-slide-title,
.futurebit-pagebuilder-slider h2[data-element="heading"] {
    white-space: pre-line;
    width: 100%;
    font-size: var(--fb-heading-size-desktop, inherit);
}
.futurebit-pagebuilder-slider [data-heading-font-size]:not([data-heading-font-size=""]) .futurebit-slide-title,
.futurebit-pagebuilder-slider [data-heading-font-size]:not([data-heading-font-size=""]) h2[data-element="heading"] {
    font-size: var(--fb-heading-size-desktop) !important;
}

/* Tablet / Laptop Breakpoint (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .futurebit-pagebuilder-slider .futurebit-slide-title,
    .futurebit-pagebuilder-slider h2[data-element="heading"] {
        font-size: var(--fb-heading-size-tablet, var(--fb-heading-size-desktop, inherit));
    }
    .futurebit-pagebuilder-slider [data-heading-font-size-tablet]:not([data-heading-font-size-tablet=""]) .futurebit-slide-title,
    .futurebit-pagebuilder-slider [data-heading-font-size-tablet]:not([data-heading-font-size-tablet=""]) h2[data-element="heading"] {
        font-size: var(--fb-heading-size-tablet) !important;
    }
}

/* Mobile 9-Point Position Matrix & Mobile Font Size Override (<= 768px) */
@media (max-width: 768px) {
    .futurebit-pagebuilder-slider .futurebit-slide-title,
    .futurebit-pagebuilder-slider h2[data-element="heading"] {
        font-size: var(--fb-heading-size-mobile, var(--fb-heading-size-tablet, var(--fb-heading-size-desktop, inherit)));
    }
    .futurebit-pagebuilder-slider [data-heading-font-size-mobile]:not([data-heading-font-size-mobile=""]) .futurebit-slide-title,
    .futurebit-pagebuilder-slider [data-heading-font-size-mobile]:not([data-heading-font-size-mobile=""]) h2[data-element="heading"] {
        font-size: var(--fb-heading-size-mobile) !important;
    }
    .futurebit-pagebuilder-slider [data-position-mobile="top-left"] {
        align-items: flex-start; justify-content: flex-start; text-align: left;
    }
    .futurebit-pagebuilder-slider [data-position-mobile="top-center"] {
        align-items: flex-start; justify-content: center; text-align: center;
    }
    .futurebit-pagebuilder-slider [data-position-mobile="top-right"] {
        align-items: flex-start; justify-content: flex-end; text-align: right;
    }
    .futurebit-pagebuilder-slider [data-position-mobile="middle-left"] {
        align-items: center; justify-content: flex-start; text-align: left;
    }
    .futurebit-pagebuilder-slider [data-position-mobile="middle-center"] {
        align-items: center; justify-content: center; text-align: center;
    }
    .futurebit-pagebuilder-slider [data-position-mobile="middle-right"] {
        align-items: center; justify-content: flex-end; text-align: right;
    }
    .futurebit-pagebuilder-slider [data-position-mobile="bottom-left"] {
        align-items: flex-end; justify-content: flex-start; text-align: left;
    }
    .futurebit-pagebuilder-slider [data-position-mobile="bottom-center"] {
        align-items: flex-end; justify-content: center; text-align: center;
    }
    .futurebit-pagebuilder-slider [data-position-mobile="bottom-right"] {
        align-items: flex-end; justify-content: flex-end; text-align: right;
    }
    .futurebit-pagebuilder-slider [data-position-mobile$="-left"] .futurebit-slide-content {
        text-align: left;
    }
    .futurebit-pagebuilder-slider [data-position-mobile$="-center"] .futurebit-slide-content {
        text-align: center;
    }
    .futurebit-pagebuilder-slider [data-position-mobile$="-right"] .futurebit-slide-content {
        text-align: right;
    }
}

/* Contained Container Appearance (data-appearance="contained") */
.futurebit-pagebuilder-slider [data-appearance="contained"] {
    max-width: var(--fb-slider-contained-max-width, 96rem);
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    box-sizing: border-box;
}
.futurebit-pagebuilder-slider [data-theme="light-tint"][data-appearance="contained"] .futurebit-slide-content,
.futurebit-pagebuilder-slider [data-theme="light-tint"] [data-appearance="contained"] {
    background: rgba(var(--color-secondary), 0.94);
    color: #111827;
}
.futurebit-pagebuilder-slider [data-theme="light-tint"] h2,
.futurebit-pagebuilder-slider [data-theme="light-tint"] p,
.futurebit-pagebuilder-slider [data-theme="light-tint"] div {
    color: #111827;
    text-shadow: none;
}
.futurebit-pagebuilder-slider [data-theme="dark-solid"][data-appearance="contained"] .futurebit-slide-content,
.futurebit-pagebuilder-slider [data-theme="dark-solid"] [data-appearance="contained"] {
    background: rgba(15, 23, 42, 0.88);
    color: var(--color-white);
}
.futurebit-pagebuilder-slider [data-theme="dark-gradient"][data-appearance="contained"] .futurebit-slide-content,
.futurebit-pagebuilder-slider [data-theme="dark-gradient"] [data-appearance="contained"] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.55) 100%);
    color: var(--color-white);
}

/* Compact Box / Audi Card Appearance */
.futurebit-pagebuilder-slider .futurebit-caption-compact,
.futurebit-pagebuilder-slider [data-appearance="compact"] .futurebit-slide-content,
.futurebit-pagebuilder-slider [data-caption-appearance="compact"] .futurebit-slide-content {
    max-width: var(--fb-caption-max-width, var(--fb-slider-card-max-width, 480px));
    width: auto;
    padding: var(--fb-slider-card-padding, 28px 36px);
    border-radius: var(--fb-slider-card-radius, 2px);
    background: var(--fb-slider-card-bg, rgba(30, 32, 34, 0.95));
    color: var(--fb-slider-card-color, var(--color-white));
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .futurebit-pagebuilder-slider .futurebit-caption-compact,
    .futurebit-pagebuilder-slider [data-appearance="compact"] .futurebit-slide-content,
    .futurebit-pagebuilder-slider [data-caption-appearance="compact"] .futurebit-slide-content {
        max-width: 100% !important;
        width: 100% !important;
        padding: 20px 24px;
    }
}

/* Button / Text Link styling (e.g. Audi 'jetzt auswählen') */
.futurebit-pagebuilder-slider .btn.pagebuilder-button-link,
.futurebit-pagebuilder-slider a.pagebuilder-button-link,
.futurebit-pagebuilder-slider span.pagebuilder-button-link {
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: underline !important;
    display: inline-flex !important;
}
.futurebit-pagebuilder-slider .btn.pagebuilder-button-link:hover {
    opacity: 0.85;
}

/* Overlay Themes */
.futurebit-pagebuilder-slider [data-theme="dark-gradient"] {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.1) 100%);
}
.futurebit-pagebuilder-slider [data-theme="dark-solid"] {
    background: rgba(0, 0, 0, 0.45);
}
.futurebit-pagebuilder-slider [data-theme="light-tint"] {
    background: rgba(var(--color-secondary), 0.7);
}
.futurebit-pagebuilder-slider [data-theme="none"] {
    background: transparent;
}

/* Text Shadow options */
.futurebit-pagebuilder-slider [data-text-shadow="none"] h2,
.futurebit-pagebuilder-slider [data-text-shadow="none"] p,
.futurebit-pagebuilder-slider [data-text-shadow="none"] div {
    text-shadow: none !important;
}
.futurebit-pagebuilder-slider [data-text-shadow="subtle"] h2,
.futurebit-pagebuilder-slider [data-text-shadow="subtle"] p,
.futurebit-pagebuilder-slider [data-text-shadow="subtle"] div {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
}
.futurebit-pagebuilder-slider [data-text-shadow="medium"] h2,
.futurebit-pagebuilder-slider [data-text-shadow="medium"] p,
.futurebit-pagebuilder-slider [data-text-shadow="medium"] div {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75) !important;
}
.futurebit-pagebuilder-slider [data-text-shadow="strong"] h2,
.futurebit-pagebuilder-slider [data-text-shadow="strong"] p,
.futurebit-pagebuilder-slider [data-text-shadow="strong"] div {
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.95), 0 1px 2px rgba(0, 0, 0, 0.95) !important;
}
.futurebit-pagebuilder-slider [data-text-shadow="glow-white"] h2,
.futurebit-pagebuilder-slider [data-text-shadow="glow-white"] p,
.futurebit-pagebuilder-slider [data-text-shadow="glow-white"] div {
    text-shadow: 0 1px 6px rgba(var(--color-secondary), 0.75) !important;
}

/* Navigation Buttons */
.futurebit-nav-btn {
    width: var(--fb-slider-nav-size, 40px);
    height: var(--fb-slider-nav-size, 40px);
    min-width: var(--fb-slider-nav-size, 40px);
    min-height: var(--fb-slider-nav-size, 40px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fb-slider-nav-radius, 0px);
    background: var(--fb-slider-nav-bg, var(--color-white));
    color: var(--fb-slider-nav-color, var(--color-secondary) );
    border: 1px solid var(--fb-slider-nav-border, var(--color-gray-300));
    box-shadow: var(--fb-slider-nav-shadow, 0 1px 4px rgba(0, 0, 0, 0.08));
    transition: all 0.2s ease-in-out;
    z-index: 20;
    cursor: pointer;
    transform: translateY(-40px);
}
.futurebit-nav-btn:hover {
    border-color: var(--fb-slider-accent, var(--color-primary));
    color: var(--fb-slider-accent, var(--color-primary));
    box-shadow: 0 2px 8px rgba(187, 10, 48, 0.2);
}
.futurebit-nav-btn.futurebit-nav-next {
    border-color: var(--fb-slider-accent, var(--color-primary));
    color: var(--fb-slider-accent, var(--color-primary));
}

/* Progress Bar */
.futurebit-slider-progress-track {
    position: absolute;
    bottom: 26px;
    left: 32px;
    right: 32px;
    height: var(--fb-slider-progress-height, 4px);
    background: var(--fb-slider-progress-track-bg, rgba(148, 163, 184, 0.25));
    border-radius: 1px;
    overflow: hidden;
    z-index: 22;
    pointer-events: none;
}
.futurebit-slider-progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--fb-slider-progress-color, var(--fb-slider-accent, var(--color-primary)));
    will-change: width;
}

/* Pagination Dots */
.futurebit-dot {
    height: var(--fb-slider-dot-height, 12px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--fb-slider-dot-radius, 0px);
    cursor: pointer;
    padding: 0;
}
.futurebit-dot-active {
    width: var(--fb-slider-dot-active-width, 32px);
    background-color: var(--fb-slider-dot-active-bg, var(--fb-slider-accent, var(--color-primary)));
    border: 1px solid var(--fb-slider-dot-active-border, var(--fb-slider-accent, var(--color-primary)));
}
.futurebit-dot-inactive {
    width: var(--fb-slider-dot-inactive-width, 12px);
    background-color: var(--fb-slider-dot-inactive-bg, var(--color-white));
    border: 1px solid var(--fb-slider-dot-inactive-border, var(--color-slate-400));
}
.futurebit-dot-inactive:hover {
    border-color: var(--fb-slider-accent, var(--color-primary));
}


/* Controls Outside (Below Viewport / Slide Image) */
.futurebit-slider-controls-outside {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 10px 30px;
    box-sizing: border-box;
    background: var(--fb-slider-controls-outside-bg, transparent);
    z-index: 10;
}

.futurebit-slider-controls-outside .futurebit-slider-progress-track {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 96%;
    margin: 0 auto;
    background: var(--fb-slider-progress-track-outside-bg, #e2e8f0);
}

.futurebit-slider-controls-outside .futurebit-slider-dots-bar {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: auto;
    gap: 6px;
    display: flex;
}

.futurebit-slider-controls-outside .futurebit-dot-inactive {
    background-color: var(--fb-slider-dot-inactive-outside-bg, #e2e8f0);
    border-color: var(--fb-slider-dot-inactive-outside-border, #cbd5e1);
}

.futurebit-slider-controls-outside .futurebit-dot-inactive:hover {
    border-color: var(--fb-slider-accent, #bb0a30);
}