/**
 * Optima Carousel Stylesheet
 * Premium, modular, responsive carousel styling.
 * Multi-theme support via scoped CSS custom properties.
 */

/* ==========================================================================
   CSS Custom Properties (scoped per carousel instance)
   Define base defaults here — override per instance with .theme-dark
   or via inline styles from shortcode attributes.
   ========================================================================== */
.optima-carousel-container {
    /* Typography */
    --optima-font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Card Title Typography */
    --optima-title-size: 2vw;
    --optima-title-size-mobile: 3vh;
    --optima-title-weight: 700;
    --optima-title-color: #1a1a1a;
    --optima-title-line-height: 1.2;
    --optima-title-margin: 0 0 16px 0;

    /* Card Body Typography */
    --optima-text-size: 1.8vw;
    --optima-text-size-mobile: 2vh;
    --optima-text-weight: 400;
    --optima-text-color: #4a4a4a;
    --optima-text-line-height: 1.6;

    /* Layout & Sizes */
    --optima-card-width: 35vw;
    --optima-card-width-mobile: 75vw;
    --optima-card-gap: 30px;
    --optima-card-gap-mobile: 15px;

    /* Colors & Styling */
    --optima-card-bg: #FFFBFA;
    --optima-card-border: #4f152a;
    --optima-card-border-hover: #8a254c;
    --optima-card-radius: 40px;
    --optima-badge-size: 40px;

    /* Shadows */
    --optima-card-shadow: 0 20px 40px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
    --optima-card-shadow-active: 0 25px 50px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.04);
    --optima-card-shadow-hover: 0 30px 60px rgba(79, 21, 42, 0.15), 0 1px 6px rgba(79, 21, 42, 0.05);

    /* Focus ring */
    --optima-card-focus-ring: rgba(79, 21, 42, 0.5);

    /* Navigation buttons */
    --optima-nav-bg: #FFFBFA;
    --optima-nav-color: #333333;
    --optima-nav-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Pagination dots */
    --optima-dot-color: rgba(0, 0, 0, 0.2);
    --optima-dot-color-active: var(--optima-title-color);

    /* Badge positioning (default: bottom-right) */
    --optima-badge-display: none;
    --optima-badge-position: absolute;
    --optima-badge-top: auto;
    --optima-badge-bottom: -15px;
    --optima-badge-left: auto;
    --optima-badge-right: -15px;
}
.optima-carousel-card-title{
        text-transform: default;

}
/* ==========================================================================
   Theme: Dark
   ========================================================================== */
/*.optima-carousel-container{*/
/*    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);*/
/*    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);*/

/*}*/
    
.optima-carousel-container.theme-dark {
    --optima-title-color: #FFFBFA;
    --optima-text-color: #e0e0e0;
    --optima-card-bg: rgba(255, 255, 255, 0);
    --optima-card-border: #ffffff;
    --optima-card-border-hover: #d8b4fe;
    --optima-card-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    --optima-card-shadow-active: 0 25px 50px rgba(0, 0, 0, 0.4);
    --optima-card-shadow-hover: 0 30px 60px rgba(216, 180, 254, 0.12);
    --optima-card-focus-ring: rgba(216, 180, 254, 0.5);
    --optima-nav-bg: rgba(255, 255, 255, 0.1);
    --optima-nav-color: #ffffff;
    --optima-nav-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --optima-dot-color: rgba(255, 255, 255, 0.3);
    --optima-dot-color-active: #d8b4fe;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);

    /* Badge: top-left */
    --optima-badge-display: none;
    --optima-badge-position: absolute;
    --optima-badge-top: auto;
    --optima-badge-bottom: -15px;
    --optima-badge-left: auto;
    --optima-badge-right: -15px;
}

/* ==========================================================================
   Visibility classes (respond to display property)
   ========================================================================== */
.optima-carousel-container.visibility-mobile-only {
    display: none;
}

@media (max-width: 1024px) {
    .optima-carousel-container.visibility-mobile-only {
        display: block;
    }
}

.optima-carousel-container.visibility-desktop-only {
    display: none;
}

@media (min-width: 1025px) {
    .optima-carousel-container.visibility-desktop-only {
        display: block;
    }
}

/* ==========================================================================
   Carousel Container Layout
   ========================================================================== */
.optima-carousel-container {
    position: relative;
    width: 100%;
    //margin: 40px auto;
    overflow: hidden;
    //padding: 30px 0 60px 0;
    font-family: var(--optima-font-family);
    box-sizing: border-box;
}

.optima-carousel-container * {
    box-sizing: border-box;
}

/* Track Wrapper - allows seeing side cards while clipping outer contents */
.optima-carousel-track-wrapper {
    width: 100%;
    overflow: visible;
    position: relative;
    cursor: grab;
    touch-action: pan-y;
}

.optima-carousel-track-wrapper:active {
    cursor: grabbing;
}

/* Track holding the flex list of cards */
.optima-carousel-track {
    display: flex;
    align-items: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* ==========================================================================
   Card Styling
   ========================================================================== */
.optima-carousel-card {
    position: relative;
    flex: 0 0 var(--optima-card-width);
    width: var(--optima-card-width);
    margin: 0 calc(var(--optima-card-gap) / 2);
    background: var(--optima-card-bg);
    border: 4px solid var(--optima-card-border);
    border-radius: var(--optima-card-radius);
    padding: 2%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-shadow: var(--optima-card-shadow);

    /* Center focal transitions */
    opacity: 0.5;
    transform: scale(0.88);
    filter: blur(1px);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                filter 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    user-select: none;
    -webkit-user-drag: none;
}

/* Link-specific resets and styles */
.optima-carousel-card.optima-carousel-card-link {
    cursor: pointer;
    text-decoration: none;
    outline: none;
}

/* Hover effect on active link card */
/*.optima-carousel-card.optima-carousel-card-link.is-active:hover {*/
/*    transform: scale(1.03) translateY(-8px);*/
/*    border-color: var(--optima-card-border-hover);*/
/*    box-shadow: var(--optima-card-shadow-hover);*/
/*}*/

/* Subtle opacity increase when hovering inactive card */
.optima-carousel-card.optima-carousel-card-link:not(.is-active):hover {
    opacity: 0.7;
    filter: blur(0.5px);
}

/* Accessibility focus-visible styles */
.optima-carousel-card.optima-carousel-card-link:focus-visible {
    outline: 3px solid var(--optima-card-focus-ring);
    outline-offset: 4px;
}

/* Active clicked state */
/*.optima-carousel-card.optima-carousel-card-link:active {*/
/*    transform: scale(0.98);*/
/*    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);*/
/*}*/

/* Active centered card styling */
.optima-carousel-card.is-active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    z-index: 2;
    /*box-shadow: var(--optima-card-shadow-active);*/
}

.optima-carousel-card-inner {
    width: 100%;
}

/* Title styling */
.optima-carousel-card-title {
    font-family: var(--optima-font-family);
    font-size: var(--optima-title-size);
    font-weight: var(--optima-title-weight);
    color: var(--optima-title-color);
    line-height: var(--optima-title-line-height);
    margin: var(--optima-title-margin);
    transition: color 0.3s ease;
    text-align: center;
}

/* Body Text styling */
.optima-carousel-card-text {
    font-family: var(--optima-font-family);
    font-size: var(--optima-text-size);
    font-weight: var(--optima-text-weight);
    color: var(--optima-text-color);
    line-height: var(--optima-text-line-height);
    margin: 0;
}

/* ==========================================================================
   Decorative Badge
   Position controlled via variables (bottom-right default, top-left for dark)
   ========================================================================== */
.optima-carousel-card-badge {
    display: var(--optima-badge-display);
    position: var(--optima-badge-position);
    top: var(--optima-badge-top);
    bottom: var(--optima-badge-bottom);
    left: var(--optima-badge-left);
    right: var(--optima-badge-right);
    width: var(--optima-badge-size);
    height: var(--optima-badge-size);
    object-fit: contain;
    z-index: 10;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));

    /* Gentle floating micro-animation */
    animation: optima-float 4s ease-in-out infinite;
}

@keyframes optima-float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-5px) rotate(3deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* ==========================================================================
   Navigation Controls (Next / Prev Arrows)
   ========================================================================== */
.optima-carousel-prev,
.optima-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--optima-nav-bg);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--optima-nav-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: var(--optima-nav-shadow);
    transition: background 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s;
}

.optima-carousel-prev {
    left: 20px;
}

.optima-carousel-next {
    right: 20px;
}

.optima-carousel-prev:hover,
.optima-carousel-next:hover {
    background: var(--optima-title-color);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.optima-carousel-prev:active,
.optima-carousel-next:active {
    transform: translateY(-50%) scale(0.95);
}

/* ==========================================================================
   Indicators (Pagination Dots)
   ========================================================================== */
.optima-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
}

.optima-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--optima-dot-color);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
}

.optima-carousel-dot.is-active {
    width: 24px;
    border-radius: 4px;
    background: var(--optima-dot-color-active);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .optima-carousel-card {
        flex: 0 0 var(--optima-card-width-mobile);
        width: var(--optima-card-width-mobile);
        margin: 0 calc(var(--optima-card-gap-mobile) / 2);
        padding: 30px 24px;
        min-height: 220px;
    }
.optima-carousel-container{
    -webkit-mask-image: none;
    mask-image: none;}
    .optima-carousel-card-title {
        font-size: var(--optima-title-size-mobile);
        margin-bottom: 12px;
    }
.optima-carousel-container.theme-dark{
    -webkit-mask-image: none;
    mask-image: none;}
    .optima-carousel-card-text {
        font-size: var(--optima-text-size-mobile);
    }

    .optima-carousel-prev,
    .optima-carousel-next {
        width: 40px;
        height: 40px;
        display: none;

    }

    .optima-carousel-prev {
        left: 10px;
    }

    .optima-carousel-next {
        right: 10px;
    }


    /* Disable arrows hover effect on touch devices */
    @media (hover: none) {
        .optima-carousel-prev:hover,
        .optima-carousel-next:hover {
            background: var(--optima-nav-bg);
            color: var(--optima-nav-color);
        }
    }
}