/**
 * Reusable Carousel Component CSS
 * 
 * Completely Isolated - Uses Unique Class Names (betquest-carousel-*)
 * Zero conflicts with legacy CSS - truly drag-and-drop
 * 
 * Breakpoints:
 * - ≤767px: Scrollable carousel, snap to full boxes
 * - 768-919px: Scrollable carousel, snap to full boxes  
 * - 920-1023px: Static 3 wider boxes (no scroll)
 * - ≥1024px: Static 4 boxes grid
 */

/* Skeleton Animation - Unique name */
@keyframes betquest-carousel-skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================
   FORCE FIELD - Total Isolation Reset
   ============================================ */

/* Kill any inheritance from parent containers - NUCLEAR OPTION */
.betquest-carousel-wrapper,
.betquest-carousel-wrapper *,
.betquest-carousel-wrapper *::before,
.betquest-carousel-wrapper *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: initial !important;
    /* Reset any weird behaviors inherited from legacy CSS */
    position: relative !important;
    display: block !important;
    float: none !important;
    clear: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Reset all borders initially */
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    box-shadow: none !important;
    /* CRITICAL: Prevent border transitions that cause flashing */
    transition-property: transform, background, box-shadow !important; /* ONLY allow these transitions */
    transition-duration: 0.2s !important;
    transition-timing-function: ease !important;
}

/* CRITICAL: Override overflow for card and image - they need hidden for rounded corners */
.betquest-carousel-card {
    overflow: hidden !important; /* Override reset - needed for rounded corners */
}

.betquest-carousel-card .betquest-carousel-image {
    overflow: hidden !important; /* Override reset - needed for rounded corners */
}

/* Then re-apply our specific styles */
.betquest-carousel-wrapper {
    margin: 2rem 0 -1rem !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.betquest-carousel-card {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(2, 46, 74, 0.12), 0 2px 8px rgba(2, 46, 74, 0.08) !important;
}

.betquest-carousel-card .betquest-carousel-footer {
    border-bottom: 1px solid #f0f0f0 !important;
}

/* ============================================
   BASE CAROUSEL STYLES (All Breakpoints)
   ============================================ */

/* Carousel Socket - Universal breakout using CSS variables */
/* This allows carousel to adapt to any page's container padding */
.betquest-carousel-wrapper {
    margin-left: calc(-1 * var(--content-side-padding, 1rem)) !important;
    margin-right: calc(-1 * var(--content-side-padding, 1rem)) !important;
    width: calc(100% + (2 * var(--content-side-padding, 1rem))) !important;
    margin-top: 2rem !important;
    margin-bottom: -1rem !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    overflow: visible !important;
    position: relative !important;
    display: block !important;
    /* Ensure it breaks out properly */
    isolation: isolate !important; /* Create new stacking context */
}

/* CRITICAL: Override any legacy rules for individual-competition-page context */
.individual-competition-page .betquest-carousel-wrapper {
    margin: 2rem 0 -1rem !important; /* Override any legacy .carousel-wrapper margin */
    padding-left: 0.5rem !important; /* Carousel left inset - match home carousel */
    padding-right: 0 !important; /* Override any legacy padding */
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    display: block !important;
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* CRITICAL: Ensure proper spacing after .final-cta on individual pages */
.individual-competition-page .final-cta + .betquest-carousel-wrapper {
    margin-top: 2rem !important; /* Consistent spacing after final-cta */
}

/* CRITICAL: Ensure proper spacing between carousels on individual pages */
.individual-competition-page .betquest-carousel-wrapper + .betquest-carousel-wrapper {
    margin-top: 2rem !important; /* Consistent spacing between carousels */
}

/* Individual pages: same title styling as home, no extra 1rem below title */
.individual-competition-page .betquest-carousel-title {
    color: #022e4a !important;
    margin: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    gap: 0.25em !important;
}

/* CRITICAL: Override any legacy rules targeting carousel container on individual pages */
.individual-competition-page .betquest-carousel-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-snap-type: x mandatory !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 1.5rem !important;
    padding-right: var(--content-side-padding, 1rem) !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* Title – left-aligned, one line, spacing from var (same as home) */
.betquest-carousel-title {
    /* Inherit page's standard h2 size instead of forcing 1.563rem */
    /* font-size: 1.563rem !important; REMOVED - inherit page context */
    color: #022e4a !important;
    margin: 0 0 var(--space-block, 1rem) 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    padding-left: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    gap: 0.25em !important;
}

/* Jackpot-competitions & Daily-free-games: carousel breakout like blog/home (own 0.5rem margin) */
/* Mobile: break out of container (0.5rem), add own 0.5rem left padding, escape right */
.jackpot-competitions-page .betquest-carousel-wrapper,
.daily-free-games-page .betquest-carousel-wrapper {
    margin-left: -0.5rem !important; /* Break out of container padding */
    margin-right: 0 !important; /* Right edge - escape to border */
    padding-left: 0.5rem !important; /* Own 0.5rem margin from page border */
    padding-right: 0 !important; /* Right edge - no padding */
    width: calc(100% + 0.5rem) !important; /* Compensate for negative margin */
}

.jackpot-competitions-page .betquest-carousel-title,
.daily-free-games-page .betquest-carousel-title {
    margin-bottom: 0.5rem !important;
    padding-left: 0 !important; /* Parent wrapper handles padding */
    padding-right: 0 !important;
}

.jackpot-competitions-page .betquest-carousel-container,
.daily-free-games-page .betquest-carousel-container {
    padding-left: 0 !important; /* Parent wrapper handles padding */
    padding-right: 0 !important;
}

/* Desktop 920px+: break out by 1rem, add 1.5rem left padding */
@media (min-width: 920px) {
    .jackpot-competitions-page .betquest-carousel-wrapper,
    .daily-free-games-page .betquest-carousel-wrapper {
        margin-left: -1rem !important; /* Break out of container padding (1rem at 920px+) */
        padding-left: 1.5rem !important; /* Own 1.5rem margin from page border */
        width: calc(100% + 1rem) !important; /* Compensate for negative margin */
    }
    .jackpot-competitions-page .betquest-carousel-title,
    .daily-free-games-page .betquest-carousel-title {
        margin-bottom: 1.5rem !important;
    }
}

/* Hide "Featured" prefix below 768px */
@media (max-width: 767px) {
    .betquest-carousel-title .section-title-prefix {
        display: none !important;
    }
}

.betquest-carousel-see-all {
    color: #00cc5a !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline !important;
    font-size: var(--fs-sm, 0.875rem) !important; /* 14px mobile, will be overridden for desktop */
}

.betquest-carousel-see-all:hover {
    color: #00cc57 !important;
}

/* Container - Unique class name */
.betquest-carousel-container {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-left: var(--content-side-padding, 1rem) !important;
    padding-right: var(--content-side-padding, 1rem) !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    margin-bottom: 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: var(--content-side-padding, 1rem) !important;
    gap: 1rem !important; /* Single source of truth for spacing - replaces card margin-right */
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.betquest-carousel-container::-webkit-scrollbar {
    display: none !important;
}

/* Card - Unique class name */
.betquest-carousel-card {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(2, 46, 74, 0.12), 0 2px 8px rgba(2, 46, 74, 0.08) !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important; /* Removed - spacing now controlled by container gap */
    scroll-snap-align: start !important; /* Snap to start of each card - seamless like-for-like swap */
    flex: 0 0 280px !important;
    cursor: pointer !important;
    overflow: hidden !important; /* CRITICAL: hidden to prevent any visual artifacts */
    height: auto !important; /* Changed from fixed 195px - let content determine height */
    min-height: 195px !important; /* Ensure minimum height */
    max-height: none !important; /* Allow footer to grow if needed */
    touch-action: manipulation !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    width: auto !important;
    position: relative !important;
    background: #ffffff !important;
    /* Ensure card is isolated */
    isolation: isolate !important;
    /* CRITICAL: NO BORDERS EVER - ALL SIDES */
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    /* CRITICAL: Prevent border transitions that cause flashing */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important; /* Only transition transform and shadow */
    /* CRITICAL: Prevent any visual artifacts from border-radius */
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
}

/* Image - Unique class name (was game-image) */
.betquest-carousel-card .betquest-carousel-image {
    position: relative !important;
    width: 100% !important;
    height: 160px !important;
    border-radius: 8px 8px 0 0 !important;
    overflow: hidden !important; /* CRITICAL: Clip image to rounded corners */
    background: #ffffff !important; /* CRITICAL: White background so no dark shows through rounded corners */
    /* CRITICAL: NO BORDERS ON ANY SIDE */
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important; /* NO PADDING */
    display: block !important;
    flex-shrink: 0 !important;
    z-index: 0 !important; /* Below footer */
    outline: none !important; /* No outline */
    box-shadow: none !important; /* No shadow that could look like border */
    /* CRITICAL: Prevent any border on hover */
    transition: none !important; /* No transitions - image stays in place */
    /* CRITICAL: Ensure image fills rounded corners properly - no background bleed */
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
}

.betquest-carousel-card .betquest-carousel-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* CRITICAL: NO BORDERS ON IMG ELEMENT */
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    display: block !important;
    vertical-align: bottom !important;
    margin: 0 !important;
    padding: 0 !important;
    /* CRITICAL: Ensure image respects rounded corners and fills completely */
    border-radius: 8px 8px 0 0 !important; /* Match parent border-radius */
    /* CRITICAL: Image must fill container completely - no gaps */
    object-position: center center !important;
    /* CRITICAL: No visual artifacts - ensure image covers all corners */
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
    /* CRITICAL: Ensure image is positioned flush with container edges */
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Footer - Unique class name (was game-top-border) */
.betquest-carousel-card .betquest-carousel-footer {
    padding: 0.5rem 0.75rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 35px !important;
    height: auto !important; /* Allow footer to grow if needed */
    flex: 1 1 auto !important; /* Take remaining space in flex container */
    background: #ffffff !important;
    /* CRITICAL: NO BORDERS ON ANY SIDE - ALL SIDES NONE */
    border: none !important;
    border-top: none !important; /* NO TOP BORDER - prevents black line */
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #f0f0f0 !important; /* Only bottom border for visual separation */
    margin-top: 0 !important; /* CRITICAL: NO GAP between image and footer */
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important; /* Ensure footer stays above image on hover */
    overflow: visible !important; /* Don't clip content */
    line-height: 1.5 !important; /* Ensure text has proper line height */
    border-radius: 0 0 8px 8px !important; /* Rounded bottom corners to match top */
    outline: none !important; /* No outline */
    box-shadow: none !important; /* No shadow that could look like border */
    /* CRITICAL: Prevent border transitions that cause flashing */
    transition: background 0.2s ease !important; /* Only transition background */
    /* CRITICAL: Prevent visual artifacts from border-radius */
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
}

.betquest-carousel-card .betquest-carousel-logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.betquest-carousel-card .betquest-carousel-logo-link img {
    width: 70px !important;
    height: auto !important;
    max-height: 35px !important;
    object-fit: contain !important;
    display: block !important;
}

.betquest-carousel-card .betquest-carousel-timer {
    color: #00cc5a !important;
    font-size: 16px !important; /* Base: 16px - NEVER smaller */
    font-weight: 700 !important;
    text-align: right !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Segmented timer: override nuclear reset (wrapper * { display: block }) so timer stays one line */
.betquest-carousel-card .betquest-carousel-timer .timer-segments {
    display: inline-block !important;
    white-space: nowrap !important;
}
.betquest-carousel-card .betquest-carousel-timer .timer-segments span,
.betquest-carousel-card .betquest-carousel-timer .timer-segments .timer-d-wrap,
.betquest-carousel-card .betquest-carousel-timer .timer-segments .timer-h-wrap,
.betquest-carousel-card .betquest-carousel-timer .timer-segments .timer-m-wrap,
.betquest-carousel-card .betquest-carousel-timer .timer-segments .timer-s-wrap {
    display: inline !important;
}
.betquest-carousel-card .betquest-carousel-timer .timer-segments.timer-days-mode .timer-s-wrap {
    display: none !important;
}
.betquest-carousel-card .betquest-carousel-timer .timer-segments.timer-seconds-mode .timer-d-wrap {
    display: none !important;
}
.betquest-carousel-card .betquest-carousel-timer .timer-segments.timer-no-hours .timer-h-wrap {
    display: none !important;
}
.betquest-carousel-card .betquest-carousel-timer .timer-segments.timer-no-minutes .timer-m-wrap {
    display: none !important;
}

/* Skeleton Styles */
.betquest-carousel-skeleton-shimmer {
    background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%) !important;
    background-size: 200% 100% !important;
    animation: betquest-carousel-skeleton-loading 2s ease-in-out infinite !important;
}

.betquest-carousel-card.betquest-carousel-skeleton .betquest-carousel-image {
    background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%) !important;
    background-size: 200% 100% !important;
    animation: betquest-carousel-skeleton-loading 2s ease-in-out infinite !important;
    /* CRITICAL: Skeleton can have different background, but loaded image container is white */
}

.betquest-carousel-card.betquest-carousel-skeleton .betquest-carousel-footer {
    background: #ffffff !important;
}

.betquest-carousel-skeleton-placeholder {
    background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%) !important;
    background-size: 200% 100% !important;
    animation: betquest-carousel-skeleton-loading 2s ease-in-out infinite !important;
    border-radius: 4px !important;
}

/* Timer font sizes at each breakpoint - MINIMUM 16px */
@media (max-width: 767px) {
    .betquest-carousel-card .betquest-carousel-timer {
        font-size: 16px !important; /* Mobile: 16px */
    }
}

@media (min-width: 768px) and (max-width: 919px) {
    .betquest-carousel-card .betquest-carousel-timer {
        font-size: 16px !important; /* Tablet: 16px */
    }
}

@media (min-width: 920px) and (max-width: 1023px) {
    .betquest-carousel-card .betquest-carousel-timer {
        font-size: 16px !important; /* Tablet Large: 16px */
    }
}

@media (min-width: 1024px) {
    .betquest-carousel-card .betquest-carousel-timer {
        font-size: 16px !important; /* Desktop: 16px - NEVER smaller */
    }
}

/* ============================================
   MOBILE (≤767px) - Scrollable Carousel
   ============================================ */

@media (max-width: 767px) {
    .betquest-carousel-wrapper {
        margin-left: calc(-1 * var(--content-side-padding, 1rem)) !important;
        margin-right: calc(-1 * var(--content-side-padding, 1rem)) !important;
        width: calc(100% + 2 * var(--content-side-padding, 1rem)) !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* CRITICAL: Individual page overrides for mobile */
    .individual-competition-page .betquest-carousel-wrapper {
        margin-left: calc(-1 * var(--content-side-padding, 1rem)) !important;
        margin-right: calc(-1 * var(--content-side-padding, 1rem)) !important;
        width: calc(100% + 2 * var(--content-side-padding, 1rem)) !important;
        overflow: visible !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 2rem !important; /* Consistent spacing */
        margin-bottom: -1rem !important;
    }
    
    .betquest-carousel-title {
        /* Inherit page's standard h2 mobile size instead of forcing 1.375rem */
        /* font-size: 1.375rem !important; REMOVED - inherit page context */
        padding-left: var(--content-side-padding, 1rem) !important;
        margin-bottom: var(--space-block, 1rem) !important;
    }
    
    .betquest-carousel-see-all {
        font-size: var(--fs-sm, 0.875rem) !important; /* 14px mobile */
    }
    
    /* Footer fixes for mobile - EXACT match to desktop */
    .betquest-carousel-card .betquest-carousel-footer {
        padding: 0.5rem 0.75rem !important; /* EXACT same as desktop */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 35px !important; /* EXACT same as desktop */
        height: auto !important; /* Allow footer to grow */
        flex: 1 1 auto !important; /* Take remaining space */
        background: #ffffff !important;
        border: none !important;
        border-top: none !important; /* No black line */
        border-bottom: 1px solid #f0f0f0 !important; /* Mobile has border */
        border-left: none !important;
        border-right: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important; /* Don't clip content */
        line-height: 1.5 !important; /* Ensure text displays properly */
    }
    
    /* CRITICAL: Card must have overflow hidden for rounded corners, but footer can still show */
    .betquest-carousel-card {
        overflow: hidden !important; /* CRITICAL: Must be hidden for rounded corners */
        height: auto !important; /* Let content determine height */
        min-height: 195px !important; /* Minimum height */
    }
    
    .betquest-carousel-container {
        padding-left: 1.5rem !important;
        padding-right: var(--content-side-padding, 1rem) !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        scroll-padding-left: var(--content-side-padding, 1rem) !important;
    }
    
    /* HOMEPAGE: wrapper at 0.5rem from viewport; container 0 so first card at 0.5rem (title unchanged) */
    .homepage .betquest-carousel-wrapper {
        margin-left: -0.5rem !important;
        width: calc(100% + 0.5rem) !important;
        padding-left: 0 !important;
    }
    .homepage .betquest-carousel-container {
        scroll-padding-left: 0.5rem !important;
    }
    
    .betquest-carousel-card {
        margin-right: 0 !important; /* Removed - spacing now controlled by container gap */
    }
}

/* ============================================
   TABLET (768-919px) - Scrollable Carousel
   ============================================ */

@media (min-width: 768px) and (max-width: 919px) {
    .betquest-carousel-wrapper {
        margin-left: calc(-1 * var(--content-side-padding, 1rem)) !important;
        margin-right: calc(-1 * var(--content-side-padding, 1rem)) !important;
        width: calc(100% + 2 * var(--content-side-padding, 1rem)) !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* CRITICAL: Individual page overrides for tablet */
    .individual-competition-page .betquest-carousel-wrapper {
        margin-left: calc(-1 * var(--content-side-padding, 1rem)) !important;
        margin-right: calc(-1 * var(--content-side-padding, 1rem)) !important;
        width: calc(100% + 2 * var(--content-side-padding, 1rem)) !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 2rem !important; /* Consistent spacing */
        margin-bottom: -1rem !important;
    }
    
    .betquest-carousel-title {
        padding-left: 1.5rem !important;
        margin-bottom: var(--space-block, 1rem) !important;
    }
    
    /* Individual page: shift header right to align with carousel start */
    .individual-competition-page .betquest-carousel-title {
        padding-left: 1rem !important; /* Align with first card */
    }
    
    .betquest-carousel-see-all {
        font-size: var(--fs-sm, 0.875rem) !important; /* 14px tablet */
    }
    
    /* Footer fixes for tablet - EXACT match to desktop */
    .betquest-carousel-card .betquest-carousel-footer {
        padding: 0.5rem 0.75rem !important; /* EXACT same as desktop */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 35px !important; /* EXACT same as desktop */
        height: auto !important; /* Allow footer to grow */
        flex: 1 1 auto !important; /* Take remaining space */
        background: #ffffff !important;
        border: none !important;
        border-top: none !important; /* No black line */
        border-bottom: 1px solid #f0f0f0 !important; /* Tablet has border */
        border-left: none !important;
        border-right: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important; /* Don't clip content */
        line-height: 1.5 !important; /* Ensure text displays properly */
    }
    
    /* Ensure card allows footer to show fully on tablet */
    .betquest-carousel-card {
        overflow: visible !important; /* Changed - allow footer to show fully */
        height: auto !important; /* Let content determine height */
        min-height: 195px !important; /* Minimum height */
    }
    
    .betquest-carousel-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        scroll-padding-left: var(--content-side-padding, 1rem) !important;
        overflow-x: auto !important;
        overflow-y: visible !important; /* Shadows not clipped */
    }
    
    .betquest-carousel-wrapper {
        overflow: visible !important; /* Shadows not clipped */
    }
    
    /* Individual page: ensure left/right padding (no impact on box shadows) */
    .individual-competition-page .betquest-carousel-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .betquest-carousel-card {
        flex: 0 0 280px !important;
        margin-right: 0 !important; /* Removed - spacing now controlled by container gap */
    }
}

/* ============================================
   TABLET LARGE (920-1023px) - Static 3 Wider Boxes
   ============================================ */

/* Home only: 1rem gap between hero and carousel header in 920–1023 (not on individual pages) */
@media (min-width: 920px) and (max-width: 1023px) {
    .homepage .betquest-carousel-wrapper {
        margin-top: 1rem !important;
    }
}

@media (min-width: 920px) and (max-width: 1023px) {
    .betquest-carousel-wrapper {
        margin-left: calc(-1 * var(--content-side-padding, 1rem)) !important;
        margin-right: calc(-1 * var(--content-side-padding, 1rem)) !important;
        width: calc(100% + 2 * var(--content-side-padding, 1rem)) !important;
        overflow: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .individual-competition-page .betquest-carousel-wrapper {
        margin-left: calc(-1 * var(--content-side-padding, 1rem)) !important;
        margin-right: calc(-1 * var(--content-side-padding, 1rem)) !important;
        width: calc(100% + 2 * var(--content-side-padding, 1rem)) !important;
        overflow: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: -1rem !important;
    }
    
    /* Header aligned over carousel – same padding as container so title lines up with first box */
    .betquest-carousel-title {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: var(--space-block, 1rem) !important;
    }
    
    /* Individual page: same alignment as homepage – header over carousel */
    .individual-competition-page .betquest-carousel-title {
        padding-right: 0.5rem !important;
    }
    
    .betquest-carousel-see-all {
        font-size: var(--fs-sm, 0.875rem) !important;
    }
    
    .betquest-carousel-card .betquest-carousel-footer {
        border-top: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    /* 3 boxes span width; 0.5rem inset each side (home.php logic – shadows unaffected) */
    .betquest-carousel-container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        display: flex !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }
    
    /* Individual page: same as homepage – 0.5rem left and right so three boxes span width with equal inset */
    .individual-competition-page .betquest-carousel-container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .betquest-carousel-card {
        flex: 0 0 calc((100% - 24px) / 3) !important;
        margin-right: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    
    /* Hide 4th skeleton at 920-1023px */
    .betquest-carousel-container .betquest-carousel-skeleton:nth-child(4),
    .betquest-carousel-container .betquest-carousel-card:nth-child(4) {
        display: none !important;
    }
}

/* ============================================
   DESKTOP (≥1024px) - Static 4 Boxes Grid
   ============================================ */

@media (min-width: 1024px) {
    .betquest-carousel-wrapper {
        margin-left: calc(-1 * var(--content-side-padding, 1rem)) !important;
        margin-right: calc(-1 * var(--content-side-padding, 1rem)) !important;
        width: calc(100% + 2 * var(--content-side-padding, 1rem)) !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: var(--space-block, 1rem) !important; /* 1rem space between hero and carousel header */
    }
    
    /* CRITICAL: Individual page overrides for desktop */
    .individual-competition-page .betquest-carousel-wrapper {
        margin-left: calc(-1 * var(--content-side-padding, 1rem)) !important;
        margin-right: calc(-1 * var(--content-side-padding, 1rem)) !important;
        width: calc(100% + 2 * var(--content-side-padding, 1rem)) !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: var(--space-block, 1rem) !important; /* 1rem space between hero and carousel header */
        margin-bottom: -1rem !important;
    }
    
    .betquest-carousel-title {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: var(--space-block, 1rem) !important;
    }
    
    .betquest-carousel-container {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 7px !important;
        width: 100% !important;
        padding-left: 0rem !important; /* Match header padding - NO right padding */
        padding-right: 0rem !important; /* Symmetric for end alignment */
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    
    /* Individual pages: same 1024 layout as home – 4-box grid, no scroll (overrides unscoped flex rule) */
    .individual-competition-page .betquest-carousel-container {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 7px !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    
    .betquest-carousel-card {
        width: 100% !important;
        cursor: pointer !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important; /* Only transform and shadow */
        border-radius: 8px !important;
        overflow: hidden !important; /* CRITICAL: hidden to clip properly */
        display: block !important;
        margin-right: 0 !important;
        height: auto !important;
        min-height: 195px !important;
        max-height: none !important;
        /* CRITICAL: NO BORDERS ON CARD EVER - ALL SIDES */
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        outline: none !important;
        /* CRITICAL: Prevent visual artifacts */
        -webkit-background-clip: padding-box !important;
        background-clip: padding-box !important;
    }
    
    .betquest-carousel-card .betquest-carousel-image {
        height: 160px !important;
    }
    
    .betquest-carousel-card .betquest-carousel-footer {
        padding: 0.5rem 0.75rem !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 35px !important;
        background: #ffffff !important;
        border: none !important;
        border-top: none !important; /* No black line */
        border-bottom: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 1 !important; /* Above image */
        border-radius: 0 0 8px 8px !important; /* Rounded bottom corners */
    }
    
    .betquest-carousel-card .betquest-carousel-logo-link img {
        width: 70px !important;
        max-height: 35px !important;
    }
    
    /* Hover effect - ONLY card raises, image stays in place - ABSOLUTELY NO BLACK LINES */
    @media (hover: hover) {
        .betquest-carousel-card:hover {
            transform: translateY(-2px) !important; /* Only card moves up */
            /* CRITICAL: NO BORDERS ON CARD EVER */
            border: none !important;
            border-top: none !important;
            border-bottom: none !important;
            border-left: none !important;
            border-right: none !important;
            outline: none !important;
            box-shadow: 0 4px 16px rgba(2, 46, 74, 0.12), 0 2px 8px rgba(2, 46, 74, 0.08) !important; /* Keep original shadow */
            /* CRITICAL: Dimensions stay the same - no flashing */
            width: auto !important;
            height: auto !important;
            min-height: 195px !important;
        }
        
        .betquest-carousel-card:hover .betquest-carousel-footer {
            background: rgba(0, 204, 90, 0.05) !important;
            box-shadow: 0 2px 8px rgba(0, 204, 90, 0.2) !important; /* Only shadow below footer */
            /* CRITICAL: NO BORDERS ON FOOTER EVER - ALL SIDES */
            border: none !important;
            border-top: none !important;
            border-left: none !important;
            border-right: none !important;
            border-bottom: none !important;
            outline: none !important;
            margin-top: 0 !important; /* Prevent any gap */
            margin-bottom: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        
        /* CRITICAL: Image stays in place - NO movement, NO borders, NO dimensions change */
        .betquest-carousel-card:hover .betquest-carousel-image {
            background: #ffffff !important; /* CRITICAL: White background - no dark showing through */
            box-shadow: none !important;
            /* CRITICAL: NO BORDERS ON IMAGE EVER - ALL SIDES */
            border: none !important;
            border-top: none !important; /* ESPECIALLY NO TOP BORDER */
            border-bottom: none !important;
            border-left: none !important;
            border-right: none !important;
            outline: none !important;
            margin-bottom: 0 !important; /* NO GAP between image and footer */
            margin-top: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            /* CRITICAL: Image dimensions stay the same */
            width: 100% !important;
            height: 160px !important;
            /* CRITICAL: No transform on image - only card moves */
            transform: none !important;
            transition: none !important; /* No transitions on image */
        }
        
        /* CRITICAL: Ensure image img element has no borders and stays in place */
        .betquest-carousel-card:hover .betquest-carousel-image img {
            border: none !important;
            border-top: none !important;
            border-bottom: none !important;
            border-left: none !important;
            border-right: none !important;
            outline: none !important;
            /* CRITICAL: Image stays in place */
            transform: none !important;
            transition: none !important;
            width: 100% !important;
            height: 100% !important;
        }
        
        /* CRITICAL: Prevent any visual artifacts from appearing */
        .betquest-carousel-card:hover * {
            border-top-color: transparent !important;
            border-bottom-color: transparent !important;
            border-left-color: transparent !important;
            border-right-color: transparent !important;
        }
    }
}