.elementor-1485 .elementor-element.elementor-element-675571b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1485 .elementor-element.elementor-element-b8f9e01{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1485 .elementor-element.elementor-element-b8f9e01.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1485 .elementor-element.elementor-element-fbea441{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1485 .elementor-element.elementor-element-63e46d6{--grid-row-gap:10px;--grid-column-gap:10px;}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Arial", Sans-serif;font-weight:600;fill:var( --e-global-color-text );color:var( --e-global-color-text );border-style:none;border-radius:50px 50px 50px 50px;}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.75 * 100% );}.elementor-1485 .elementor-element.elementor-element-63e46d6:after{content:"0.75";}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__thumbnail__link{width:100%;margin-bottom:calc(46px / 2);}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__meta-data span + span:before{content:"•";}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__card{background-color:#EFEFEF;border-color:#B3B3B342;border-width:1px;border-radius:8px;padding-top:20px;padding-bottom:20px;}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__card .elementor-post__meta-data{border-top-color:var( --e-global-color-text );}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__text{margin-top:20px;}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__badge{right:0;}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__card .elementor-post__badge{background-color:#CBC5C5;border-radius:0px;margin:20px;}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__avatar{top:calc(-46px / 2);}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__avatar img{width:46px;height:46px;}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__title, .elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__title a{color:#000000;}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__meta-data{color:#000000;}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__meta-data span:before{color:#000000;}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__read-more{color:var( --e-global-color-text );}.elementor-1485 .elementor-element.elementor-element-63e46d6 a.elementor-post__read-more{text-decoration:underline;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-1485 .elementor-element.elementor-element-63e46d6:after{content:"0.5";}.elementor-1485 .elementor-element.elementor-element-63e46d6 .elementor-post__thumbnail__link{width:100%;}}/* Start custom CSS for html, class: .elementor-element-d2b76a7 *//* ================================ */
/* VERTICAL LIGHT SKEUOMORPHIC BACKGROUND - PURE CSS */
/* ================================ */

.vertical-bg-container {
    --accent: #ff6b35;
    --accent-secondary: #ff8c61;
    --accent-rgb: 255, 107, 53;
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f0f0f2;
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, 
        var(--bg-primary) 0%, 
        var(--bg-secondary) 40%, 
        var(--bg-tertiary) 60%,
        var(--bg-secondary) 100%);
    overflow: hidden;
    z-index: -1;
}

.vertical-bg-container::before,
.vertical-bg-container::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

/* Vertical Column System - Using pseudo elements and box-shadow for multiple columns */
.vertical-bg-container::before {
    top: 0;
    left: 10%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 107, 53, 0.05) 10%,
        rgba(255, 107, 53, 0.1) 30%,
        rgba(255, 107, 53, 0.05) 50%,
        rgba(255, 107, 53, 0.1) 70%,
        rgba(255, 107, 53, 0.05) 90%,
        transparent 100%);
    box-shadow:
        15vw 0 0 rgba(255, 107, 53, 0.06),
        30vw 0 0 rgba(255, 107, 53, 0.06),
        45vw 0 0 rgba(255, 107, 53, 0.06),
        60vw 0 0 rgba(255, 107, 53, 0.06),
        75vw 0 0 rgba(255, 107, 53, 0.06);
    opacity: 0.6;
    animation: pulse-vertical 8s ease-in-out infinite;
}

/* Embossed Vertical Bar 1 */
.vertical-bar-1 {
    position: absolute;
    width: 60px;
    height: 300px;
    background: linear-gradient(145deg, #ffffff, #e6e6e9);
    box-shadow: 
        10px 10px 30px rgba(0, 0, 0, 0.05),
        -10px -10px 30px rgba(255, 255, 255, 0.9),
        inset 2px 2px 5px rgba(255, 255, 255, 0.9),
        inset -2px -2px 5px rgba(0, 0, 0, 0.03);
    border-radius: 30px;
    opacity: 0.3;
    top: -150px;
    left: 15%;
    transform: rotate(3deg);
    animation: slide-down 20s ease-in-out infinite;
}

/* Embossed Vertical Bar 2 */
.vertical-bar-2 {
    position: absolute;
    width: 40px;
    height: 250px;
    background: linear-gradient(145deg, #ffffff, #e6e6e9);
    box-shadow: 
        10px 10px 30px rgba(0, 0, 0, 0.05),
        -10px -10px 30px rgba(255, 255, 255, 0.9),
        inset 2px 2px 5px rgba(255, 255, 255, 0.9),
        inset -2px -2px 5px rgba(0, 0, 0, 0.03);
    border-radius: 20px;
    opacity: 0.3;
    top: 30%;
    right: 20%;
    transform: rotate(-2deg);
    animation: slide-up 25s ease-in-out infinite;
}

/* Embossed Vertical Bar 3 */
.vertical-bar-3 {
    position: absolute;
    width: 50px;
    height: 400px;
    background: linear-gradient(145deg, #ffffff, #e6e6e9);
    box-shadow: 
        10px 10px 30px rgba(0, 0, 0, 0.05),
        -10px -10px 30px rgba(255, 255, 255, 0.9),
        inset 2px 2px 5px rgba(255, 255, 255, 0.9),
        inset -2px -2px 5px rgba(0, 0, 0, 0.03);
    border-radius: 25px;
    opacity: 0.3;
    bottom: -100px;
    left: 40%;
    transform: rotate(1deg);
    animation: slide-down 30s ease-in-out infinite reverse;
}

/* Embossed Vertical Bar 4 */
.vertical-bar-4 {
    position: absolute;
    width: 35px;
    height: 200px;
    background: linear-gradient(145deg, #ffffff, #e6e6e9);
    box-shadow: 
        10px 10px 30px rgba(0, 0, 0, 0.05),
        -10px -10px 30px rgba(255, 255, 255, 0.9),
        inset 2px 2px 5px rgba(255, 255, 255, 0.9),
        inset -2px -2px 5px rgba(0, 0, 0, 0.03);
    border-radius: 18px;
    opacity: 0.3;
    top: 20%;
    right: 10%;
    transform: rotate(-1deg);
    animation: slide-up 22s ease-in-out infinite;
}

/* Floating Vertical Ribbon 1 */
.vertical-ribbon-1 {
    position: absolute;
    width: 3px;
    height: 40%;
    left: 25%;
    top: -20%;
    background: linear-gradient(180deg,
        transparent,
        rgba(255, 107, 53, 0.2),
        rgba(255, 107, 53, 0.1),
        transparent);
    opacity: 0.5;
    animation: ribbon-float 15s ease-in-out infinite;
}

/* Floating Vertical Ribbon 2 */
.vertical-ribbon-2 {
    position: absolute;
    width: 3px;
    height: 50%;
    right: 30%;
    bottom: -25%;
    background: linear-gradient(180deg,
        transparent,
        rgba(255, 107, 53, 0.2),
        rgba(255, 107, 53, 0.1),
        transparent);
    opacity: 0.5;
    animation: ribbon-float 20s ease-in-out infinite reverse;
}

/* Floating Vertical Ribbon 3 */
.vertical-ribbon-3 {
    position: absolute;
    width: 3px;
    height: 35%;
    left: 60%;
    top: -15%;
    background: linear-gradient(180deg,
        transparent,
        rgba(255, 107, 53, 0.2),
        rgba(255, 107, 53, 0.1),
        transparent);
    opacity: 0.5;
    animation: ribbon-float 18s ease-in-out infinite;
}

/* Light Beams using gradients */
.light-beam-1 {
    position: absolute;
    width: 1px;
    height: 100%;
    left: 10%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 107, 53, 0.15) 50%,
        transparent 100%);
    opacity: 0;
    animation: beam-pulse 4s ease-in-out infinite;
}

.light-beam-2 {
    position: absolute;
    width: 1px;
    height: 100%;
    left: 45%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 107, 53, 0.15) 50%,
        transparent 100%);
    opacity: 0;
    animation: beam-pulse 4s ease-in-out infinite 1s;
}

.light-beam-3 {
    position: absolute;
    width: 1px;
    height: 100%;
    right: 25%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 107, 53, 0.15) 50%,
        transparent 100%);
    opacity: 0;
    animation: beam-pulse 4s ease-in-out infinite 2s;
}

/* Central Vertical Core */
.vertical-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 60vh;
    max-height: 600px;
    pointer-events: none;
}

.vertical-core-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent,
        rgba(255, 107, 53, 0.1),
        rgba(255, 107, 53, 0.2),
        rgba(255, 107, 53, 0.1),
        transparent);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.1);
}

.vertical-core-ring-1 {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid rgba(255, 107, 53, 0.1);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.05),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    animation: ring-pulse 6s ease-in-out infinite;
}

.vertical-core-ring-2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(255, 107, 53, 0.1);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.05),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    animation: ring-pulse 6s ease-in-out infinite 2s;
}

.vertical-core-ring-3 {
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid rgba(255, 107, 53, 0.1);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.05),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    animation: ring-pulse 6s ease-in-out infinite 4s;
}

/* Animations */
@keyframes pulse-vertical {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

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

@keyframes slide-up {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-100px) rotate(-4deg); }
}

@keyframes ribbon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(40vh); }
}

@keyframes beam-pulse {
    0%, 100% { 
        opacity: 0;
        transform: scaleY(0.8);
    }
    50% { 
        opacity: 0.4;
        transform: scaleY(1);
    }
}

@keyframes ring-pulse {
    0%, 100% { 
        transform: translateX(-50%) scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: translateX(-50%) scale(1.1);
        opacity: 1;
    }
}

/* Tablet enhancements */
@media (min-width: 769px) {
    .vertical-bg-container::before {
        width: 3px;
    }

    .vertical-bar-1,
    .vertical-bar-2,
    .vertical-bar-3,
    .vertical-bar-4 {
        width: 80px;
        height: 400px;
    }

    .vertical-core {
        width: 160px;
        height: 70vh;
        max-height: 800px;
    }

    /* Vertical glass panels */
    .vertical-glass-1 {
        position: absolute;
        width: 100px;
        height: 60vh;
        top: 20%;
        left: 5%;
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 20px;
        opacity: 0.4;
        animation: slide-up 35s ease-in-out infinite;
    }

    .vertical-glass-2 {
        position: absolute;
        width: 80px;
        height: 50vh;
        bottom: 10%;
        right: 8%;
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 20px;
        opacity: 0.4;
        animation: slide-down 30s ease-in-out infinite;
    }
}

/* Desktop enhancements */
@media (min-width: 1025px) {
    .vertical-bg-container::before {
        width: 4px;
        box-shadow:
            15vw 0 0 rgba(255, 107, 53, 0.08),
            30vw 0 0 rgba(255, 107, 53, 0.08),
            45vw 0 0 rgba(255, 107, 53, 0.08),
            60vw 0 0 rgba(255, 107, 53, 0.08),
            75vw 0 0 rgba(255, 107, 53, 0.08);
    }

    .vertical-bar-1,
    .vertical-bar-2,
    .vertical-bar-3,
    .vertical-bar-4 {
        width: 100px;
        height: 500px;
    }

    /* Additional ribbons on desktop */
    .vertical-ribbon-4 {
        position: absolute;
        width: 3px;
        height: 45%;
        left: 10%;
        top: 30%;
        background: linear-gradient(180deg,
            transparent,
            rgba(255, 107, 53, 0.2),
            rgba(255, 107, 53, 0.1),
            transparent);
        opacity: 0.5;
        animation: ribbon-float 25s ease-in-out infinite reverse;
    }

    .vertical-ribbon-5 {
        position: absolute;
        width: 3px;
        height: 60%;
        right: 15%;
        top: -30%;
        background: linear-gradient(180deg,
            transparent,
            rgba(255, 107, 53, 0.2),
            rgba(255, 107, 53, 0.1),
            transparent);
        opacity: 0.5;
        animation: ribbon-float 30s ease-in-out infinite;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-284ba3e *//* ==========================================================
   CRYPTO BETTING WIDGET - COMPLETE CSS
   Elementor & WordPress Compatible
   WITH ISOLATION TO PREVENT STYLE LEAKAGE
   ========================================================== */

/* ==========================================================
   ISOLATION LAYER - Prevents style leakage to navigation
   ========================================================== */

/* CRITICAL: Isolate widget from rest of page */
.crypto-betting-widget {
    all: initial;
    display: block !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.5;
    color: #1d1d1f;
    box-sizing: border-box;
}

/* ==========================================================
   END ISOLATION LAYER
   ========================================================== */
/* ==========================================================
   ENHANCED DISPLAY RULES - Trust Badges, Stars, Arrows
   These override any conflicting styles to ensure proper display
   ========================================================== */

/* Trust badges - force correct display */
.crypto-betting-widget .qv-trust-signals {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    padding-top: 1rem !important;
    margin-top: 1rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.crypto-betting-widget .qv-trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    font-size: 0.75rem !important;
    color: #515154 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.crypto-betting-widget .qv-trust-icon {
    display: inline-flex !important;
    width: 16px !important;
    height: 16px !important;
    color: #22c55e !important;
    flex-shrink: 0 !important;
}

/* Stars - force correct display */
.crypto-betting-widget .star,
.crypto-betting-widget .qv-rating-stars .star,
.crypto-betting-widget .rating-stars .star {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    color: #ff6b35 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.crypto-betting-widget .qv-rating-stars,
.crypto-betting-widget .rating-stars {
    display: inline-flex !important;
    gap: 2px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* Arrow icons - force correct display */
.crypto-betting-widget .qv-arrow {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================
   TOP 10 LIST - Compact Styling (Properly scoped to .top10-section)
   ========================================================== */

/* Top 10 Section Container */
.crypto-betting-widget .top10-section {
    padding: 1.5rem 0;
}

/* Top 10 List Container */
.crypto-betting-widget .top10-section .top10-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Individual Top 10 Item */
.crypto-betting-widget .top10-section .top10-item {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 1rem;
    align-items: center;
    background: linear-gradient(145deg, #f8f8f9, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.03), -2px -2px 4px rgba(255, 255, 255, 0.9);
}

.crypto-betting-widget .top10-section .top10-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Special styling for top 3 - vibrant emphasis */
.crypto-betting-widget .top10-section .top10-item.rank-1 {
    background: linear-gradient(145deg, #fff9e6 0%, #fffef8 50%, #ffffff 100%);
    border: 2px solid #ffd700;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2), 0 0 0 1px rgba(255, 215, 0, 0.1);
}

.crypto-betting-widget .top10-section .top10-item.rank-1:hover {
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.35);
    border-color: #ffb700;
}

.crypto-betting-widget .top10-section .top10-item.rank-2 {
    background: linear-gradient(145deg, #f5f5f7 0%, #fafafa 50%, #ffffff 100%);
    border: 2px solid #c0c0c0;
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.2), 0 0 0 1px rgba(192, 192, 192, 0.1);
}

.crypto-betting-widget .top10-section .top10-item.rank-2:hover {
    box-shadow: 0 8px 24px rgba(192, 192, 192, 0.35);
    border-color: #a8a8a8;
}

.crypto-betting-widget .top10-section .top10-item.rank-3 {
    background: linear-gradient(145deg, #fff5f0 0%, #fffcfa 50%, #ffffff 100%);
    border: 2px solid #cd7f32;
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.2), 0 0 0 1px rgba(205, 127, 50, 0.1);
}

.crypto-betting-widget .top10-section .top10-item.rank-3:hover {
    box-shadow: 0 8px 24px rgba(205, 127, 50, 0.35);
    border-color: #b8661a;
}

/* Rank Badge */
.crypto-betting-widget .top10-section .rank-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #e8e8ea;
    color: #6e6e73;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.crypto-betting-widget .top10-section .rank-badge.gold {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    color: #8b6914;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 2px solid #f4c430;
}

.crypto-betting-widget .top10-section .rank-badge.silver {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #c0c0c0 100%);
    color: #4a4a4a;
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 2px solid #a8a8a8;
}

.crypto-betting-widget .top10-section .rank-badge.bronze {
    background: linear-gradient(135deg, #cd7f32 0%, #e8a87c 50%, #cd7f32 100%);
    color: #5c2e0a;
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 2px solid #b8661a;
}

/* Platform Logo */
.crypto-betting-widget .top10-section .top10-logo {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.crypto-betting-widget .top10-section .top10-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

/* Content Area */
.crypto-betting-widget .top10-section .top10-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

/* Header with Platform Name and Badge */
.crypto-betting-widget .top10-section .top10-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.crypto-betting-widget .top10-section .top10-header .platform-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.3;
}

/* Special Badges - Colorful */
.crypto-betting-widget .top10-section .best-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 5px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3);
}

.crypto-betting-widget .top10-section .speed-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 5px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.crypto-betting-widget .top10-section .mobile-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 5px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

/* Inline Rating */
.crypto-betting-widget .top10-section .platform-rating-inline {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.crypto-betting-widget .top10-section .platform-rating-inline .rating-stars {
    display: inline-flex;
    gap: 1px;
    color: #ff6b35;
    font-size: 0.875rem;
}

.crypto-betting-widget .top10-section .platform-rating-inline .rating-value {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #ff6b35;
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 107, 53, 0.15);
}

/* Description */
.crypto-betting-widget .top10-section .platform-description {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #515154;
    margin: 0;
    display: none; /* Hide description for more compact layout */
}

/* Feature Highlights - Colorful Pills */
.crypto-betting-widget .top10-section .feature-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.crypto-betting-widget .top10-section .feature-highlights li {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.625rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 5px;
    font-size: 0.75rem;
    color: #0c4a6e;
    font-weight: 500;
}

.crypto-betting-widget .top10-section .feature-highlights li::before {
    content: "✓";
    margin-right: 0.375rem;
    color: #10b981;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Link to Review - Eye-catching gradient button */
.crypto-betting-widget .top10-section .top10-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
}

.crypto-betting-widget .top10-section .top10-link:hover {
    background: linear-gradient(135deg, #ff5722 0%, #ff7043 100%);
    transform: translateX(3px);
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.45);
}

.crypto-betting-widget .top10-section .top10-link .link-arrow {
    font-size: 1.125rem;
    transition: transform 0.3s ease;
}

.crypto-betting-widget .top10-section .top10-link:hover .link-arrow {
    transform: translateX(4px);
}

/* Mobile - hide star icons, show text rating */
@media (max-width: 768px) {
    .crypto-betting-widget .star,
    .crypto-betting-widget .qv-rating-stars .star,
    .crypto-betting-widget .rating-stars .star {
        display: none !important;
    }

    .crypto-betting-widget .qv-winner-rating,
    .crypto-betting-widget .rating-text {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #ff6b35 !important;
        display: inline-block !important;
    }

    /* Top 10 List - Mobile Responsive (Scoped) */
    .crypto-betting-widget .top10-section .top10-item {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto;
        gap: 0.75rem;
        padding: 0.875rem;
    }

    .crypto-betting-widget .top10-section .rank-badge {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .crypto-betting-widget .top10-section .top10-logo {
        width: 48px;
        height: 48px;
    }

    .crypto-betting-widget .top10-section .top10-content {
        grid-column: 2 / 3;
    }

    .crypto-betting-widget .top10-section .top10-header .platform-name {
        font-size: 1rem;
    }

    .crypto-betting-widget .top10-section .feature-highlights {
        gap: 0.375rem;
    }

    .crypto-betting-widget .top10-section .feature-highlights li {
        font-size: 0.6875rem;
        padding: 0.1875rem 0.375rem;
    }

    .crypto-betting-widget .top10-section .top10-link {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .crypto-betting-widget .top10-section .top10-link .link-text {
        display: none;
    }

    .crypto-betting-widget .top10-section .top10-link .link-arrow {
        font-size: 1.125rem;
    }
}

/* ==========================================================
   END ENHANCED DISPLAY RULES
   ========================================================== */



/* ===================================
   MOBILE DISPLAY FIXES - Applied Throughout
   Trust Icons, Stars, and Arrows
   =================================== */

/* ===================================
   NITROPACK COMPATIBILITY FIXES
   Defensive CSS to survive performance optimization
   =================================== */

/* Prevent NitroPack from breaking flexbox layouts */

.crypto-betting-widget .qv-trust-signals,
.crypto-betting-widget .qv-winner-name,
.crypto-betting-widget .qv-winner-rating,
.crypto-betting-widget .qv-rating-stars,
.crypto-betting-widget .qv-trust-item,
.crypto-betting-widget .qv-trust-icon,
.crypto-betting-widget .qv-arrow,
.crypto-betting-widget .qv-view-details,
.crypto-betting-widget .platform-rating,
.crypto-betting-widget .rating-stars {
    box-sizing: border-box !important;
}

/* Ensure SVGs and icons maintain dimensions */

.crypto-betting-widget .qv-trust-icon svg,
.crypto-betting-widget .qv-arrow svg,
.crypto-betting-widget .star svg,
.crypto-betting-widget svg {
    max-width: 100% !important;
    max-height: 100% !important;
    vertical-align: middle !important;
}

/* Prevent layout shift from lazy loading */

.crypto-betting-widget img {
    display: block;
    max-width: 100%;
}

/* Ensure proper overflow handling */

.crypto-betting-widget .qv-category,
.crypto-betting-widget .platform-card,
.crypto-betting-widget .quick-verdict,
.crypto-betting-widget .table-container,
.crypto-betting-widget .content-section {
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* ===================================
   END NITROPACK COMPATIBILITY FIXES
   =================================== */

/* ===================================
   ARTICLE HEADER - Embossed Card with Depth
   Light Skeuomorphic Design with Orange Accent
   =================================== */

.crypto-betting-widget .article-header {
    background: linear-gradient(145deg, #f0f0f2, #ffffff);
    padding: 3rem 2.5rem;
    border-radius: 16px;
    margin-bottom: 1.35rem;
    position: relative;
    box-shadow:
        8px 8px 16px rgba(0, 0, 0, 0.08),
        -8px -8px 16px rgba(255, 255, 255, 0.9),
        inset 1px 1px 2px rgba(255, 255, 255, 0.5),
        inset -1px -1px 2px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.crypto-betting-widget .article-header::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 100%);
    border-radius: 16px 16px 0 0;
    pointer-events: none;
}

.crypto-betting-widget .article-header h1 {
    color: #1d1d1f;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1.5rem 0;
    letter-spacing: -0.02em;
    position: relative;
}

.crypto-betting-widget .article-header h1 .highlight {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c61 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.crypto-betting-widget .article-header .intro {
    color: #515154;
    font-size: 1.125rem;
    line-height: 1.7;
    margin: 0 0 1rem 0;
}

.crypto-betting-widget .article-header .intro:last-child {
    margin-bottom: 0;
}

/* Responsive Design */

@media  (max-width: 768px)  {
    
    
    .crypto-betting-widget .article-header {
        padding: 2rem 1.5rem;
        border-radius: 12px;
        margin-bottom: 2rem;
    }
    

    
    .crypto-betting-widget .article-header h1 {
        font-size: 1.875rem;
        margin-bottom: 1.25rem;
    }
    

    
    .crypto-betting-widget .article-header .intro {
        font-size: 1rem;
    }
    

}

@media  (max-width: 480px)  {
    
    
    .crypto-betting-widget .article-header {
        padding: 1.5rem 1.25rem;
        border-radius: 10px;
        box-shadow:
            4px 4px 8px rgba(0, 0, 0, 0.06),
            -4px -4px 8px rgba(255, 255, 255, 0.9);
    }
    

    
    .crypto-betting-widget .article-header h1 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        line-height: 1.3;
    }
    

    
    .crypto-betting-widget .article-header .intro {
        font-size: 0.9375rem;
        line-height: 1.6;
        margin-bottom: 0.75rem;
    }
    

}

/* ===================================
   END OF ARTICLE HEADER SECTION
   =================================== */

/* ===================================
   QUICK VERDICT - SEO-Optimized Category Winners
   Light Skeuomorphic with Orange Accent
   INCLUDES MOBILE FIXES FOR TRUST ICONS, STARS, ARROWS
   =================================== */

/* ===================================
   QUICK VERDICT - CLS FIXES
   =================================== */

/* Reserve space for the entire quick verdict section */

.crypto-betting-widget .quick-verdict {
    min-height: 400px; /* Adjust based on your typical content height */
    background: linear-gradient(145deg, #ffffff, #fafafa);
    padding: 1.75rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    position: relative;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    box-sizing: border-box;
}

/* Reserve space for platform logos BEFORE they load */

.crypto-betting-widget .qv-platform-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    min-height: 106px; /* 90px image + 16px padding */
    min-width: 106px;  /* Reserve width too */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Fix the aspect ratio - should be 1:1 for square logos */

.crypto-betting-widget .qv-platform-logo img {
    border-radius: 8px !important;
    display: block !important;
    width: 90px !important;
    height: 90px !important; /* Fixed height instead of auto */
    object-fit: contain !important;
    aspect-ratio: 1/1 !important; /* Changed from 1/5 to 1/1 */
}

/* Reserve minimum height for categories grid */

.crypto-betting-widget .qv-categories {
    min-height: 250px; /* Adjust based on your content */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

/* Reserve space for individual category cards */

.crypto-betting-widget .qv-category {
    min-height: 280px; /* Prevents reflow when content loads */
    background: linear-gradient(145deg, #f8f8f9, #ffffff);
    /* ... rest of your styles ... */
}

/* SEO-friendly header with H2 */

.crypto-betting-widget .qv-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

.crypto-betting-widget .qv-header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, #ff6b35 0%, #ff8c61 100%);
    /* CLS FIX: Removed animation to prevent layout shift on page load */
    /* animation: slide-in 0.6s ease-out; */
}

/* CLS FIX: Removed slide-in animation to prevent CLS issues
@keyframes slide-in {
    from { width: 0; }
    to { width: 80px; }
} */

.crypto-betting-widget .qv-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 0.375rem 0;
    letter-spacing: -0.01em;
}

.crypto-betting-widget .qv-subtitle {
    font-size: 0.875rem;
    color: #515154;
    margin: 0;
    line-height: 1.4;
}

/* Updated date for SEO */

.crypto-betting-widget .qv-updated {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #86868b;
}

.crypto-betting-widget .qv-updated time {
    color: #ff6b35;
    font-weight: 500;
}

/* Category Winners Grid - SEO Optimized */

.crypto-betting-widget .qv-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

/* Individual category card - Colorful */

.crypto-betting-widget .qv-category {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
    border-radius: 12px;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.crypto-betting-widget .qv-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

.crypto-betting-widget .qv-category.featured {
    background: linear-gradient(145deg, #fff9e6 0%, #fffef8 100%);
    border-color: #ffd700;
}

.crypto-betting-widget .qv-category.featured:hover {
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.3);
    border-color: #ffb700;
}

/* Category header - Vibrant gradients */

.crypto-betting-widget .qv-category-header {
    padding: 1rem 1.25rem 0.75rem;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

.crypto-betting-widget .qv-category.featured .qv-category-header {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
}

.crypto-betting-widget .qv-category-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.9);
    display: block;
    margin-bottom: 0.25rem;
}

.crypto-betting-widget .qv-category-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Winner details */

.crypto-betting-widget .qv-category-body {
    padding: 0.875rem 1rem;
    overflow: hidden; /* FIX: Contain all child elements */
}

/* Platform Logo Container */

.crypto-betting-widget .qv-platform-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    min-height: 90px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.crypto-betting-widget .qv-platform-logo img {
    border-radius: 8px !important;
    display: block !important;
    max-width: 90px !important;
    max-height: 90px !important;
    width: 90px !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: 1/5 !important;
}

/* Elementor compatibility for platform logos */

.crypto-betting-widget .qv-platform-logo .elementor-widget-container {
    width: 90px;
    min-height: 90px;
}

.crypto-betting-widget .qv-winner-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* FIX: Winner Name - Prevent rating overflow */

.crypto-betting-widget .qv-winner-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 0.375rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem; /* FIX: Add gap for spacing */
    flex-wrap: wrap; /* FIX: Allow wrapping on mobile */
    min-height: 28px; /* CLS FIX: Reserve minimum space to prevent reflow */
    transition: color 0.2s ease;
}

/* FIX: Text overflow protection */

.crypto-betting-widget .qv-winner-name > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.crypto-betting-widget .qv-category:hover .qv-winner-name {
    color: #ff6b35;
}

/* FIX: Winner Rating - Prevent overflow */

.crypto-betting-widget .qv-winner-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #ff6b35;
    font-weight: 600;
    flex-shrink: 0; /* FIX: Prevent rating from shrinking */
    white-space: nowrap; /* FIX: Prevent rating text from wrapping */
}

/* FIX: Star Ratings - Use inline-flex for better containment */

.crypto-betting-widget .qv-rating-stars {
    display: inline-flex; /* FIX: Changed from inline to inline-flex */
    gap: 1px;
    flex-shrink: 0; /* FIX: Prevent stars from shrinking */
}

/* Star styling - compatible with both SVG and text stars */

.crypto-betting-widget .star {
    width: 8px;
    height: 8px;
    fill: #ff6b35; /* For SVG stars */
    color: #ff6b35; /* For text stars (★) */
    flex-shrink: 0; /* FIX: Prevent individual stars from shrinking */
    display: inline-block;
    font-size: 8px;
    line-height: 1;
}

.crypto-betting-widget .star.empty {
    fill: #e5e5e7; /* For SVG stars */
    color: #e5e5e7; /* For empty text stars (☆) */
}

/* FIX: Ensure all SVGs stay contained */

.crypto-betting-widget .star svg {
    max-width: 100%;
    max-height: 100%;
}

/* Winner features list */

.crypto-betting-widget .qv-winner-features {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
}

.crypto-betting-widget .qv-winner-features li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.75rem;
    color: #515154;
    line-height: 1.6;
    margin-bottom: 0.25rem;
}

.crypto-betting-widget .qv-winner-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Key highlight badge - Vibrant */

.crypto-betting-widget .qv-highlight-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #8b6914;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 20px;
    margin-top: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

.crypto-betting-widget .qv-category:hover .qv-highlight-badge {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.45);
}

/* View details link - Colorful */

.crypto-betting-widget .qv-category-footer {
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(96, 165, 250, 0.05) 100%);
    border-top: none;
}

.crypto-betting-widget .qv-category.featured .qv-category-footer {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.05) 0%, rgba(255, 140, 97, 0.05) 100%);
}

/* FIX: View Details - Add gap for spacing */

.crypto-betting-widget .qv-view-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem; /* FIX: Add gap for spacing */
    font-size: 0.75rem;
    color: #515154;
    text-decoration: none;
    transition: color 0.2s ease;
}

.crypto-betting-widget .qv-view-details:hover {
    color: #ff6b35;
}

/* FIX: View Details Arrows */

.crypto-betting-widget .qv-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
    flex-shrink: 0; /* FIX: Prevent arrow from shrinking */
}

/* FIX: Ensure arrow SVGs stay contained */

.crypto-betting-widget .qv-arrow svg {
    max-width: 100%;
    max-height: 100%;
}

.crypto-betting-widget .qv-view-details:hover .qv-arrow {
    transform: translateX(3px);
}

/* Comparison table button */

.crypto-betting-widget .qv-compare-section {
    padding: 1rem;
    background: rgba(255, 107, 53, 0.02);
    border-radius: 8px;
    margin-top: 1.25rem;
}

.crypto-betting-widget .qv-compare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.crypto-betting-widget .qv-compare-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.crypto-betting-widget .qv-compare-count {
    font-size: 0.75rem;
    color: #86868b;
}

.crypto-betting-widget .qv-compare-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, #ff6b35, #ff8c61);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 2px 4px rgba(255, 107, 53, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.crypto-betting-widget .qv-compare-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.crypto-betting-widget .qv-compare-btn:hover::before {
    width: 400px;
    height: 400px;
}

.crypto-betting-widget .qv-compare-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 8px rgba(255, 107, 53, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* FIX: Trust signals - Prevent overflow and improve mobile layout */

.crypto-betting-widget .qv-trust-signals {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-wrap: wrap; /* FIX: Allow wrapping on small screens */
    min-height: 40px; /* CLS FIX: Reserve minimum space to prevent reflow */
}

/* FIX: Trust Item - Prevent shrinking */

.crypto-betting-widget .qv-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #515154;
    flex-shrink: 0; /* FIX: Prevent icons from shrinking */
    min-width: 0; /* FIX: Allow text to truncate if needed */
}

/* FIX: Trust Icon - Prevent shrinking */

.crypto-betting-widget .qv-trust-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: #22c55e;
    flex-shrink: 0; /* FIX: Prevent icon from shrinking */
}

/* FIX: Ensure trust icon SVGs stay contained */

.crypto-betting-widget .qv-trust-icon svg {
    max-width: 100%;
    max-height: 100%;
}

/* Featured badge for top pick */

.crypto-betting-widget .qv-category.featured {
    border-color: rgba(255, 107, 53, 0.2);
    box-shadow:
        0 0 0 1px rgba(255, 107, 53, 0.1),
        2px 2px 4px rgba(0, 0, 0, 0.03),
        -2px -2px 4px rgba(255, 255, 255, 0.9);
}

.crypto-betting-widget .qv-category.featured::before {
    content: "TOP PICK";
    position: absolute;
    top: -1px;
    right: 20px;
    background: linear-gradient(135deg, #ff6b35, #ff8c61);
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 2px 4px rgba(255, 107, 53, 0.2);
    z-index: 1;
}

/* Responsive Design */

@media  (max-width: 768px)  {
    
    
    .crypto-betting-widget .quick-verdict {
        padding: 1.25rem !important;
        overflow-x: hidden !important;
    }
    

    
    .crypto-betting-widget .qv-categories {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    

    
    .crypto-betting-widget .qv-category {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    

    
    .crypto-betting-widget .qv-category-body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    

    
    /* FIX: Reduce trust signal gaps on tablets */
    
    
    .crypto-betting-widget .qv-trust-signals {
        gap: 1rem !important;
        max-width: 100% !important;
    }
    

    
    /* FIX: Reduce winner name font size */
    
    
    .crypto-betting-widget .qv-winner-name {
        font-size: 1rem !important;
        max-width: 100% !important;
    }
    

    
    .crypto-betting-widget .qv-winner-rating {
        max-width: 100px !important;
        flex-shrink: 0 !important;
    }
    

    
    .crypto-betting-widget .qv-rating-stars {
        max-width: 50px !important;
        flex-shrink: 0 !important;
    }
    

}

@media  (max-width: 480px)  {
    
    
    /* MOBILE FIX: Aggressive container constraints */
    
    
    .crypto-betting-widget .quick-verdict {
        padding: 1rem !important;
        border-radius: 10px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    

    
    .crypto-betting-widget .qv-title {
        font-size: 1.25rem !important;
    }
    

    
    /* FIX: Category containers - prevent all overflow */
    
    
    .crypto-betting-widget .qv-category {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    

    
    /* FIX: Category header mobile padding */
    
    
    .crypto-betting-widget .qv-category-header {
        padding: 0.75rem 0.875rem 0.5rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    

    
    /* FIX: Category body mobile padding */
    
    
    .crypto-betting-widget .qv-category-body {
        padding: 0.75rem 0.875rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    

    
    /* FIX: Winner name mobile sizing */
    
    
    .crypto-betting-widget .qv-winner-name {
        font-size: 0.9375rem !important;
        gap: 0.375rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    

    
    /* FIX: Allow winner name text to wrap on mobile */
    
    
    .crypto-betting-widget .qv-winner-name > span:first-child {
        white-space: normal !important;
        max-width: calc(100% - 60px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    

    
    /* FIX: Winner rating mobile sizing */
    
    
    /* NITROPACK FIX: Stronger mobile rules with container constraints */
    
    
    .crypto-betting-widget .qv-winner-rating {
        font-size: 0.8125rem !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        max-width: 80px !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }
    

    
    /* FIX: Stars mobile sizing */
    
    
    /* NITROPACK FIX: Prevent star misalignment and overflow */
    
    
    .crypto-betting-widget .star {
        width: 7px !important;
        height: 7px !important;
        min-width: 7px !important;
        min-height: 7px !important;
        font-size: 7px !important; /* For text stars (★/☆) */
        line-height: 1 !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
        overflow: visible !important;
    }
    

    
    .crypto-betting-widget .qv-rating-stars {
        display: inline-flex !important;
        gap: 1px !important;
        flex-shrink: 0 !important;
        max-width: 45px !important;
        overflow: visible !important;
    }
    

    
    /* FIX: Trust signals mobile spacing */
    
    
    /* NITROPACK FIX: Maintain proper alignment with strict containment */
    
    
    .crypto-betting-widget .qv-trust-signals {
        gap: 0.75rem !important;
        padding-top: 0.875rem !important;
        margin-top: 0.875rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    

    
    /* FIX: Trust item mobile sizing */
    
    
    .crypto-betting-widget .qv-trust-item {
        font-size: 0.6875rem !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.375rem !important;
        flex-shrink: 0 !important;
        max-width: calc(50% - 0.5rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    

    
    /* FIX: Trust icon mobile sizing */
    
    
    .crypto-betting-widget .qv-trust-icon {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
    }
    

    
    /* FIX: Arrows mobile sizing */
    
    
    .crypto-betting-widget .qv-arrow {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
    }
    

    
    /* FIX: View details mobile sizing */
    
    
    .crypto-betting-widget .qv-view-details {
        font-size: 0.6875rem !important;
        gap: 0.375rem !important;
        display: flex !important;
        align-items: center !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    

    
    /* FIX: TOP PICK badge mobile adjustment */
    
    
    .crypto-betting-widget .qv-category.featured::before {
        right: 10px;
        font-size: 0.5625rem;
        padding: 0.1875rem 0.625rem;
    }
    

    
    /* FIX: Compare button mobile sizing */
    
    
    .crypto-betting-widget .qv-compare-btn {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
        gap: 0.375rem;
    }
    

}

/* FIX: Extra Small Devices (< 360px) */

@media  (max-width: 360px)  {
    
    
    /* FIX: Stack trust signals vertically on very small screens */
    
    
    /* NITROPACK FIX: Ensure vertical stacking is preserved */
    
    
    .crypto-betting-widget .qv-trust-signals {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        display: flex !important;
    }
    

    
    /* FIX: Stack winner name and rating vertically */
    
    
    .crypto-betting-widget .qv-winner-name {
        flex-direction: column !important;
        align-items: flex-start !important;
        display: flex !important;
    }
    

    
    /* Extra small screen - even tighter constraints */
    
    
    .crypto-betting-widget .qv-trust-item {
        max-width: 100% !important;
    }
    

    
    .crypto-betting-widget .star {
        width: 6px !important;
        height: 6px !important;
        min-width: 6px !important;
        min-height: 6px !important;
        font-size: 6px !important; /* For text stars (★/☆) */
        line-height: 1 !important;
    }
    

    
    .crypto-betting-widget .qv-rating-stars {
        max-width: 40px !important;
    }
    

}

/* ===================================
   MOBILE DISPLAY SIMPLIFICATION
   Hide decorative elements, show text-only on mobile
   Solves NitroPack overflow issues by removing complex visuals
   =================================== */

@media  (max-width: 768px)  {
    
    
    /* MOBILE SIMPLIFICATION: Hide visual star icons, show text rating only */
    
    
    .crypto-betting-widget .star {
        display: none !important;
    }
    

    
    .crypto-betting-widget .qv-rating-stars {
        display: none !important;
    }
    

    
    /* Make text rating more prominent since stars are hidden */
    
    
    .crypto-betting-widget .qv-winner-rating {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #ff6b35 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0.25rem 0.5rem !important;
        background: rgba(255, 107, 53, 0.1) !important;
        border-radius: 4px !important;
        margin-top: 0.5rem !important;
    }
    

    
    /* Simplify winner name layout without stars */
    
    
    .crypto-betting-widget .qv-winner-name {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    

    
    /* MOBILE SIMPLIFICATION: Hide trust icon checkmarks */
    
    
    .crypto-betting-widget .qv-trust-icon {
        display: none !important;
    }
    

    
    /* Adjust trust items to work without icons */
    
    
    .crypto-betting-widget .qv-trust-item {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 4px !important;
    }
    

    
    /* MOBILE SIMPLIFICATION: Hide arrows */
    
    
    .crypto-betting-widget .qv-arrow {
        display: none !important;
    }
    

    
    /* Adjust links that had arrows */
    
    
    .crypto-betting-widget .qv-view-details,
    .crypto-betting-widget .qv-compare-btn {
        justify-content: center !important;
        text-align: center !important;
    }
    

    
    /* Add more spacing to category body without logo */
    
    
    .crypto-betting-widget .qv-category-body {
        padding-top: 1rem !important;
    }
    

    
    /* Simplify highlight badges on mobile */
    
    
    .crypto-betting-widget .qv-highlight-badge {
        font-size: 0.625rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    

    
    /* Hide table star ratings, show text only */
    
    
    .crypto-betting-widget .platform-table .rating-stars,
    .crypto-betting-widget table .rating-stars,
    .crypto-betting-widget td .rating-stars {
        display: none !important;
    }
    

    
    /* Make table rating text more visible without stars */
    
    
    .crypto-betting-widget .platform-table .platform-rating,
    .crypto-betting-widget table .platform-rating,
    .crypto-betting-widget td .platform-rating {
        font-weight: 600 !important;
        color: #ff6b35 !important;
        font-size: 0.875rem !important;
    }
    

}

/* ===================================
   MOBILE OVERFLOW PREVENTION
   Additional safeguards for Elementor + NitroPack
   =================================== */

/* Target Elementor mobile viewport classes */

@media  (max-width: 767px)  {
    
    
    /* Elementor mobile-specific targeting */
    
    
    .crypto-betting-widget .elementor-widget-container,
    .crypto-betting-widget .elementor-element,
    .crypto-betting-widget [class*="elementor"] {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    

    
    /* Force all star and icon SVGs to stay within bounds */
    
    
    .crypto-betting-widget .star svg,
    .crypto-betting-widget .qv-trust-icon svg,
    .crypto-betting-widget .qv-arrow svg {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
    }
    

    
    /* Ensure all flex containers have proper constraints */
    
    
    .crypto-betting-widget .qv-winner-name,
    .crypto-betting-widget .qv-winner-rating,
    .crypto-betting-widget .qv-rating-stars,
    .crypto-betting-widget .qv-trust-signals,
    .crypto-betting-widget .qv-trust-item,
    .crypto-betting-widget .qv-view-details,
    .crypto-betting-widget .platform-rating,
    .crypto-betting-widget .rating-stars {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    

    
    /* Category footer needs constraints too */
    
    
    .crypto-betting-widget .qv-category-footer {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
    

    
    /* Global mobile container safety */
    
    
    .crypto-betting-widget .qv-category,
    .crypto-betting-widget .quick-verdict,
    .crypto-betting-widget .platform-card,
    .crypto-betting-widget .table-container,
    .crypto-betting-widget .content-section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    

}

/* ===================================
   END MOBILE OVERFLOW PREVENTION
   =================================== */

/* ===================================
   END OF QUICK VERDICT SECTION
   =================================== */

/* ===================================
   PLATFORM COMPARISON TABLE
   Light Skeuomorphic with Orange Accent
   INCLUDES MOBILE FIXES FOR RATINGS
   =================================== */

/* Table Container */

.crypto-betting-widget .table-container {
    background: linear-gradient(145deg, #ffffff, #fafafa);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    box-sizing: border-box; /* FIX: Consistent sizing */
}

/* Table Header Section */

.crypto-betting-widget .table-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

.crypto-betting-widget .table-header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #ff6b35 0%, #ff8c61 100%);
}

.crypto-betting-widget .table-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.01em;
}

.crypto-betting-widget .table-subtitle {
    font-size: 0.875rem;
    color: #515154;
    margin: 0;
}

/* Responsive Table Wrapper */

.crypto-betting-widget .table-responsive {
    overflow-x: auto;
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 107, 53, 0.2) transparent;
}

.crypto-betting-widget .table-responsive::-webkit-scrollbar {
    height: 6px;
}

.crypto-betting-widget .table-responsive::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 3px;
}

.crypto-betting-widget .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.3);
    border-radius: 3px;
}

.crypto-betting-widget .table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.4);
}

/* Platform Comparison Table */

.crypto-betting-widget .platform-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Table Head */

.crypto-betting-widget .platform-table thead {
    background: linear-gradient(180deg, #f8f8f9 0%, #f0f0f2 100%);
}

.crypto-betting-widget .platform-table thead th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid rgba(255, 107, 53, 0.1);
    white-space: nowrap;
}

.crypto-betting-widget .platform-table thead th:first-child {
    border-top-left-radius: 8px;
}

.crypto-betting-widget .platform-table thead th:last-child {
    border-top-right-radius: 8px;
}

/* Table Body */

.crypto-betting-widget .platform-table tbody tr {
    transition: all 0.2s ease;
    position: relative;
}

.crypto-betting-widget .platform-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(255, 107, 53, 0.03) 0%, rgba(255, 107, 53, 0.05) 100%);
    transform: scale(1.01);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.crypto-betting-widget .platform-table tbody tr::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.04);
}

.crypto-betting-widget .platform-table tbody tr:last-child::after {
    display: none;
}

.crypto-betting-widget .platform-table tbody td {
    padding: 1rem;
    color: #424245;
    vertical-align: middle;
}

/* Platform Name Column */

.crypto-betting-widget .platform-table tbody td:first-child {
    font-weight: 600;
    color: #1d1d1f;
    min-width: 140px;
}

/* Highlight Important Values */

.crypto-betting-widget .platform-table .highlight {
    color: #ff6b35;
    font-weight: 600;
}

/* Platform Badge */

.crypto-betting-widget .platform-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    margin-left: 0.5rem;
}

.crypto-betting-widget .platform-badge.best-overall {
    background: rgba(74, 222, 128, 0.1);
    color: #22c55e;
}

.crypto-betting-widget .platform-badge.lowest-fees {
    background: rgba(255, 107, 53, 0.1);
    color: #ff6b35;
}

.crypto-betting-widget .platform-badge.beginner {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* FIX: Rating Display - Prevent wrapping */

/* NITROPACK FIX: Enhanced containment for table ratings */

.crypto-betting-widget .platform-rating,
.crypto-betting-widget .platform-table .platform-rating,
.crypto-betting-widget table .platform-rating,
.crypto-betting-widget td .platform-rating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    flex-wrap: nowrap !important; /* FIX: Prevent wrapping */
    max-width: 100% !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

/* FIX: Rating Stars */

/* NITROPACK FIX: Stronger containment for stars */

.crypto-betting-widget .rating-stars,
.crypto-betting-widget .platform-table .rating-stars,
.crypto-betting-widget table .rating-stars,
.crypto-betting-widget td .rating-stars {
    display: inline-flex !important;
    gap: 2px !important;
    flex-shrink: 0 !important; /* FIX: Prevent stars from shrinking */
    overflow: visible !important;
}

.crypto-betting-widget .rating-stars .star,
.crypto-betting-widget .platform-table .rating-stars .star,
.crypto-betting-widget table .rating-stars .star,
.crypto-betting-widget td .rating-stars .star {
    width: 12px !important;
    height: 12px !important;
    fill: #ff6b35 !important;
    color: #ff6b35 !important; /* For text stars (★) */
    font-size: 12px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important; /* FIX: Prevent individual stars from shrinking */
    display: inline-block !important;
}

.crypto-betting-widget .rating-stars .star.empty,
.crypto-betting-widget .platform-table .rating-stars .star.empty,
.crypto-betting-widget table .rating-stars .star.empty {
    fill: #e5e5e7 !important;
    color: #e5e5e7 !important; /* For empty text stars (☆) */
}

.crypto-betting-widget .rating-value,
.crypto-betting-widget .platform-table .rating-value,
.crypto-betting-widget table .rating-value,
.crypto-betting-widget td .rating-value {
    margin-left: 0.25rem !important;
    font-size: 0.75rem !important;
    color: #515154 !important;
    white-space: nowrap !important;
}

/* NITROPACK FIX: Ensure table cells accommodate ratings */

.crypto-betting-widget .platform-table td,
.crypto-betting-widget table td {
    overflow: visible !important;
    position: relative !important;
}

/* Feature Check/Cross */

.crypto-betting-widget .feature-yes {
    color: #22c55e;
    font-weight: 700;
    font-size: 1rem;
}

.crypto-betting-widget .feature-no {
    color: #ef4444;
    font-weight: 700;
    font-size: 1rem;
}

/* Action Button */

.crypto-betting-widget .table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #ff6b35, #ff8c61);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow:
        0 2px 4px rgba(255, 107, 53, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.crypto-betting-widget .table-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(255, 107, 53, 0.25);
}

.crypto-betting-widget .table-action.secondary {
    background: #ffffff;
    color: #ff6b35;
    border: 1px solid rgba(255, 107, 53, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.crypto-betting-widget .table-action.secondary:hover {
    background: rgba(255, 107, 53, 0.05);
    transform: translateY(-1px);
}

/* Responsive Design */

@media  (max-width: 768px)  {
    
    
    .crypto-betting-widget .table-container {
        padding: 1.25rem;
    }
    

    
    .crypto-betting-widget .table-responsive {
        margin: 0 -1.25rem;
        padding: 0 1.25rem;
    }
    

    
    .crypto-betting-widget .platform-table {
        min-width: 700px;
    }
    

    
    .crypto-betting-widget .table-header {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }
    

}

@media  (max-width: 480px)  {
    
    
    .crypto-betting-widget .table-container {
        padding: 1rem !important;
        border-radius: 10px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    

    
    .crypto-betting-widget .table-responsive {
        margin: 0 -1rem !important;
        padding: 0 1rem !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        box-sizing: border-box !important;
    }
    

    
    .crypto-betting-widget .table-title {
        font-size: 1.125rem !important;
    }
    

    
    .crypto-betting-widget .table-subtitle {
        font-size: 0.8125rem !important;
    }
    

    
    .crypto-betting-widget .platform-table thead th {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.6875rem !important;
    }
    

    
    .crypto-betting-widget .platform-table tbody td {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.8125rem !important;
        overflow: visible !important;
        position: relative !important;
    }
    

    
    .crypto-betting-widget .table-action {
        padding: 0.3125rem 0.625rem !important;
        font-size: 0.7rem !important;
    }
    

    
    /* FIX: Rating stars mobile sizing in tables */
    
    
    /* MOBILE FIX: Stronger constraints for table ratings */
    
    
    .crypto-betting-widget .platform-table .rating-stars,
    .crypto-betting-widget table .rating-stars,
    .crypto-betting-widget .rating-stars {
        display: inline-flex !important;
        gap: 1px !important;
        flex-shrink: 0 !important;
        max-width: 60px !important;
        overflow: visible !important;
    }
    

    
    .crypto-betting-widget .platform-table .rating-stars .star,
    .crypto-betting-widget table .rating-stars .star,
    .crypto-betting-widget .rating-stars .star {
        width: 10px !important;
        height: 10px !important;
        min-width: 10px !important;
        min-height: 10px !important;
        font-size: 10px !important; /* For text stars (★/☆) */
        line-height: 1 !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }
    

    
    .crypto-betting-widget .platform-table .platform-rating,
    .crypto-betting-widget table .platform-rating,
    .crypto-betting-widget td .platform-rating {
        max-width: 120px !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }
    

}

/* ===================================
   END OF PLATFORM COMPARISON TABLE
   =================================== */

/* ===================================
   SIMPLIFIED PLATFORM REVIEW CARDS
   Light Skeuomorphic with Orange Accent
   INCLUDES MOBILE FIXES FOR RATING BADGES
   =================================== */

/* Platform Review Card Container - Enhanced */

.crypto-betting-widget .platform-card {
    background: linear-gradient(145deg, #ffffff, #f8f9ff);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(59, 130, 246, 0.1);
    margin-bottom: 2.5rem;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.crypto-betting-widget .platform-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
}

/* Card Header with Vibrant Gradient Background */

.crypto-betting-widget .card-header {
    position: relative;
    min-height: 200px;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px 25px;
    overflow: hidden;
}

.crypto-betting-widget .card-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: 1;
}

.crypto-betting-widget .header-content {
    text-align: center;
    z-index: 2;
    position: relative;
}

.crypto-betting-widget .platform-logo {
    background: rgba(255, 255, 255, 0.75);
    padding: 4px 4px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    min-height: 70px; /* CLS FIX: Reserve space for logo container */
}

.crypto-betting-widget .platform-logo h2 {
    color: #1d1d1f;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

/* CLS FIX: Enhanced image targeting for WordPress/Elementor */

/* Target images directly and within Elementor containers */

.crypto-betting-widget .platform-logo img,
.crypto-betting-widget .platform-logo .elementor-widget-container img,
.crypto-betting-widget .platform-logo picture img,
.crypto-betting-widget .platform-logo figure img {
    border-radius: 8px !important;
    display: block !important;
    max-width: 90px !important;
    max-height: 90px !important;
    width: 90px !important; /* CLS FIX: Explicit width reserves space before image loads */
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: 1/5 !important; /* CLS FIX: Reserve space for images to prevent layout shift */
}

/* Ensure Elementor containers don't interfere */

.crypto-betting-widget .platform-logo .elementor-widget-container {
    width: 90px;
    min-height: 90px;
}

.crypto-betting-widget .platform-tagline {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin: 0;
}

/* FIX: Platform Rating Badge - Adjust for mobile */

.crypto-betting-widget .platform-rating {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: 700;
    color: #ff6b35;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 3;
    font-size: 0.875rem; /* FIX: Ensure readable size */
    white-space: nowrap; /* FIX: Prevent text wrapping */
}

/* Quick Stats Bar - Colorful */

.crypto-betting-widget .stats-bar {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 18px;
    border-bottom: 2px solid #bae6fd;
}

.crypto-betting-widget .stat-item {
    text-align: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.3s ease;
}

.crypto-betting-widget .stat-item:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
}

.crypto-betting-widget .stat-label {
    font-size: 0.75rem;
    color: #0c4a6e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    display: block;
    font-weight: 600;
}

.crypto-betting-widget .stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #3b82f6;
    display: block;
}

.crypto-betting-widget .stat-value.highlight {
    color: #ff6b35;
    font-size: 1.25rem;
}

.crypto-betting-widget .stat-value.highlight {
    color: #ff6b35;
}

/* CTA Section */

.crypto-betting-widget .cta-section {
    padding: 20px;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.crypto-betting-widget .cta-button {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b35, #ff8c61);
    color: #fff;
    padding: 14px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.3);
    width: 100%;
    max-width: 400px;
    border: none;
    cursor: pointer;
}

.crypto-betting-widget .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
    color: #fff !important;
}

.crypto-betting-widget .cta-note {
    margin: 12px 0 0 0;
    font-size: 0.75rem;
    color: #86868b;
    line-height: 1.4;
}

/* Simplified Tab Navigation */

.crypto-betting-widget .tabs-container {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.crypto-betting-widget .tab-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border-bottom: 3px solid #3b82f6;
}

.crypto-betting-widget .tab-button {
    padding: 16px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 700;
    color: #64748b;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
    position: relative;
    font-family: inherit;
}

.crypto-betting-widget .tab-button:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(96, 165, 250, 0.1) 100%);
    color: #3b82f6;
}

.crypto-betting-widget .tab-button.active {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: #ffffff;
    border-bottom: 4px solid #1d4ed8;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25);
}

/* Tab Content Area */

.crypto-betting-widget .tab-content {
    padding: 24px 20px;
    background: #fff;
}

.crypto-betting-widget .tab-pane {
    display: none;
    animation: fadeIn 0.3s ease;
}

.crypto-betting-widget .tab-pane.active {
    display: block;
}

@keyframes  fadeIn  {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.crypto-betting-widget .tab-pane h4 {
    margin: 0 0 12px 0;
    font-size: 1.125rem;
    color: #1d1d1f;
    font-weight: 600;
}

.crypto-betting-widget .tab-pane p {
    color: #424245;
    line-height: 1.7;
    margin: 0 0 12px 0;
    font-size: 0.9375rem;
}

.crypto-betting-widget .tab-pane p:last-child {
    margin-bottom: 0;
}

/* Fee Table within Tabs */

.crypto-betting-widget .fee-table {
    width: 100%;
    margin: 12px 0;
}

.crypto-betting-widget .fee-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.crypto-betting-widget .fee-row:last-child {
    border-bottom: none;
}

.crypto-betting-widget .fee-label {
    color: #515154;
    font-size: 0.875rem;
}

.crypto-betting-widget .fee-value {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.875rem;
}

.crypto-betting-widget .fee-value.free {
    color: #22c55e;
}

/* Pros and Cons Grid within Tabs - Enhanced */

.crypto-betting-widget .proscons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.crypto-betting-widget .proscons-grid .pros-list,
.crypto-betting-widget .proscons-grid .cons-list {
    padding: 18px;
    list-style: none;
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.crypto-betting-widget .proscons-grid .pros-list {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
}

.crypto-betting-widget .proscons-grid .cons-list {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fca5a5;
}

.crypto-betting-widget .proscons-grid .pros-list h5,
.crypto-betting-widget .proscons-grid .cons-list h5 {
    margin: 0 0 14px 0;
    font-size: 1.125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.crypto-betting-widget .proscons-grid .pros-list h5 {
    color: #15803d;
}

.crypto-betting-widget .proscons-grid .cons-list h5 {
    color: #b91c1c;
}

.crypto-betting-widget .proscons-grid .pros-list li,
.crypto-betting-widget .proscons-grid .cons-list li {
    padding: 6px 0;
    font-size: 0.875rem;
    color: #424245;
    padding-left: 24px;
    position: relative;
    line-height: 1.5;
}

.crypto-betting-widget .proscons-grid .pros-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: 700;
}

.crypto-betting-widget .proscons-grid .cons-list li::before {
    content: "✗";
    position: absolute;
    left: 0;
    color: #ef4444;
    font-weight: 700;
}

/* Risk Warning Bar */

.crypto-betting-widget .risk-warning {
    background: rgba(255, 107, 53, 0.05);
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 107, 53, 0.1);
}

.crypto-betting-widget .risk-warning p {
    margin: 0;
    font-size: 0.75rem;
    color: #92400e;
    line-height: 1.5;
}

.crypto-betting-widget .risk-warning strong {
    font-weight: 600;
}

/* Responsive Design for Platform Cards */

@media  (max-width: 768px)  {
    
    
    .crypto-betting-widget .platform-card {
        margin-bottom: 1.5rem;
    }
    

    
    .crypto-betting-widget .card-header {
        min-height: 150px;
        padding: 20px 15px;
    }
    

    
    .crypto-betting-widget .platform-logo h2 {
        font-size: 1.25rem;
    }
    

    
    .crypto-betting-widget .platform-tagline {
        font-size: 0.875rem;
    }
    

    
    /* FIX: Platform rating mobile positioning */
    
    
    .crypto-betting-widget .platform-rating {
        top: 15px;
        right: 15px;
        padding: 6px 10px;
        font-size: 0.8125rem;
    }
    

    
    .crypto-betting-widget .tab-nav {
        grid-template-columns: repeat(2, 1fr);
    }
    

    
    .crypto-betting-widget .stats-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: 12px;
    }
    

    
    .crypto-betting-widget .proscons-grid {
        grid-template-columns: 1fr;
    }
    

    
    .crypto-betting-widget .cta-section {
        padding: 15px;
    }
    

    
    .crypto-betting-widget .cta-button {
        font-size: 0.9375rem;
        padding: 12px 24px;
    }
    

}

@media  (max-width: 480px)  {
    
    
    .crypto-betting-widget .card-header {
        min-height: 140px;
        padding: 20px 15px; /* FIX: Reduce padding further */
    }
    

    
    .crypto-betting-widget .platform-logo {
        padding: 10px 20px;
    }
    

    
    .crypto-betting-widget .platform-logo h2 {
        font-size: 1.125rem;
    }
    

    
    /* FIX: Platform rating mobile adjustments */
    
    
    .crypto-betting-widget .platform-rating {
        top: 10px;
        right: 10px;
        padding: 5px 8px;
        font-size: 0.75rem;
        max-width: calc(100% - 20px); /* FIX: Prevent overflow */
    }
    

    
    .crypto-betting-widget .tab-button {
        font-size: 0.8125rem;
        padding: 12px 8px;
    }
    

    
    .crypto-betting-widget .tab-content {
        padding: 20px 15px;
    }
    

    
    .crypto-betting-widget .tab-pane h4 {
        font-size: 1rem;
    }
    

    
    .crypto-betting-widget .tab-pane p {
        font-size: 0.875rem;
    }
    

    
    .crypto-betting-widget .stat-label {
        font-size: 0.6875rem;
    }
    

    
    .crypto-betting-widget .stat-value {
        font-size: 0.875rem;
    }
    

}

/* FIX: Extra Small Devices - Remove absolute positioning for rating badge */

@media  (max-width: 360px)  {
    
    
    .crypto-betting-widget .platform-rating {
        position: static;
        display: inline-block;
        margin-bottom: 0.5rem;
    }
    

}

/* ===================================
   END OF SIMPLIFIED PLATFORM REVIEW CARDS
   =================================== */

/* ===================================
   TYPOGRAPHY & CONTENT CONTAINERS
   Light Skeuomorphic with Orange Accent
   =================================== */

/* ===================================
   BASE TYPOGRAPHY
   =================================== */

/* Body Text Default */

.crypto-betting-widget body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #424245;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* CLS FIX: Web Font Loading Recommendation
   If you're using custom web fonts via @font-face, add font-display: swap;
   to prevent invisible text (FOIT) and reduce CLS from font loading:

   @font-face {
       font-family: 'YourFont';
       src: url('your-font.woff2') format('woff2');
       font-display: swap;
   }
*/

/* ===================================
   HEADING STYLES
   =================================== */

/* H2 - Section Headers with Underline */

.crypto-betting-widget h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1d1d1f;
    margin: 2.5rem 0 1.25rem 0;
    letter-spacing: -0.02em;
    position: relative;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.crypto-betting-widget h2::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #ff6b35 0%, #ff8c61 100%);
}

/* H3 - Subsection Headers */

.crypto-betting-widget h3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1d1d1f;
    margin: 2rem 0 1rem 0;
    letter-spacing: -0.01em;
}

/* H4 - Component Headers */

.crypto-betting-widget h4 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1f;
    margin: 1.5rem 0 0.75rem 0;
    letter-spacing: -0.005em;
}

/* H4 with uppercase style */

.crypto-betting-widget h4.uppercase {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #515154;
}

/* ===================================
   CONTENT CONTAINERS
   =================================== */

/* Main Content Section */

.crypto-betting-widget .content-section {
    background: linear-gradient(145deg, #ffffff, #fafafa);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden; /* FIX: Prevent child overflow */
    box-sizing: border-box; /* FIX: Consistent sizing */
}

/* Nested Content Card */

.crypto-betting-widget .content-card {
    background: linear-gradient(145deg, #f8f8f9, #ffffff);
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.03),
        -2px -2px 4px rgba(255, 255, 255, 0.9);
    transition: all 0.2s ease;
}

.crypto-betting-widget .content-card:hover {
    transform: translateY(-1px);
    box-shadow:
        3px 3px 6px rgba(0, 0, 0, 0.04),
        -3px -3px 6px rgba(255, 255, 255, 0.9);
}

/* Info Box */

.crypto-betting-widget .info-box {
    background: rgba(255, 107, 53, 0.03);
    border-left: 3px solid #ff6b35;
    padding: 1.25rem;
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
}

.crypto-betting-widget .info-box h4 {
    color: #ff6b35;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* ===================================
   PARAGRAPH & BODY TEXT
   =================================== */

/* Standard Paragraph */

.crypto-betting-widget p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #424245;
    margin: 0 0 1rem 0;
}

/* Lead Paragraph */

.crypto-betting-widget p.lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #515154;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

/* Small Text */

.crypto-betting-widget p.small {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #86868b;
}

/* Article Content */

.crypto-betting-widget .article-content {
    font-size: 1rem;
    line-height: 1.8;
    color: #424245;
}

.crypto-betting-widget .article-content p {
    margin-bottom: 1.25rem;
}

.crypto-betting-widget .article-content p:last-child {
    margin-bottom: 0;
}

/* ===================================
   LIST STYLES
   =================================== */

/* NITROPACK FIX: Scope list styles to content areas only, exclude navigation */

/* Only apply custom bullets to lists within content containers */

.crypto-betting-widget .content-section ul,
.crypto-betting-widget .content-card ul,
.crypto-betting-widget .article-content ul,
.crypto-betting-widget .tab-content ul,
.crypto-betting-widget .info-box ul,
.crypto-betting-widget .key-points ul,
.crypto-betting-widget .pros-box ul,
.crypto-betting-widget .cons-box ul,
.crypto-betting-widget .summary-box ul,
.crypto-betting-widget article ul,
.crypto-betting-widget main ul:not(nav ul):not(.elementor-icon-list-items):not([class*="menu"]):not([class*="nav"]) {
    margin: 0 0 1.5rem 0;
    padding-left: 0;
    list-style: none !important;
}

.crypto-betting-widget .content-section ul li,
.crypto-betting-widget .content-card ul li,
.crypto-betting-widget .article-content ul li,
.crypto-betting-widget .tab-content ul li,
.crypto-betting-widget .info-box ul li,
.crypto-betting-widget .key-points ul li,
.crypto-betting-widget .pros-box ul li,
.crypto-betting-widget .cons-box ul li,
.crypto-betting-widget .summary-box ul li,
.crypto-betting-widget article ul li,
.crypto-betting-widget main ul:not(nav ul):not(.elementor-icon-list-items):not([class*="menu"]):not([class*="nav"]) li {
    position: relative;
    padding-left: 1.5rem !important;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #424245;
}

.crypto-betting-widget .content-section ul li::before,
.crypto-betting-widget .content-card ul li::before,
.crypto-betting-widget .article-content ul li::before,
.crypto-betting-widget .tab-content ul li::before,
.crypto-betting-widget .info-box ul li::before,
.crypto-betting-widget .key-points ul li::before,
.crypto-betting-widget .pros-box ul li::before,
.crypto-betting-widget .cons-box ul li::before,
.crypto-betting-widget .summary-box ul li::before,
.crypto-betting-widget article ul li::before,
.crypto-betting-widget main ul:not(elementor-nav ul):not(.elementor-icon-list-items):not([class*="menu"]):not([class*="nav"]) li::before {
    content: "•" !important;
    position: absolute;
    left: 0;
    color: #ff6b35;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.4;
}

/* Ordered List - scoped to content areas */

.crypto-betting-widget .content-section ol,
.crypto-betting-widget .content-card ol,
.crypto-betting-widget .article-content ol,
.crypto-betting-widget .tab-content ol,
.crypto-betting-widget .info-box ol,
.crypto-betting-widget .summary-box ol,
.crypto-betting-widget article ol,
.crypto-betting-widget main ol:not(elementor-nav ol):not([class*="menu"]):not([class*="nav"]) {
    counter-reset: list-counter;
    margin: 0 0 1.5rem 0;
    padding-left: 0;
    list-style: none !important;
}

.crypto-betting-widget .content-section ol li,
.crypto-betting-widget .content-card ol li,
.crypto-betting-widget .article-content ol li,
.crypto-betting-widget .tab-content ol li,
.crypto-betting-widget .info-box ol li,
.crypto-betting-widget .summary-box ol li,
.crypto-betting-widget article ol li,
.crypto-betting-widget main ol:not(elementor-nav ol):not([class*="menu"]):not([class*="nav"]) li {
    counter-increment: list-counter;
    position: relative;
    padding-left: 2rem !important;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #424245;
}

.crypto-betting-widget .content-section ol li::before,
.crypto-betting-widget .content-card ol li::before,
.crypto-betting-widget .article-content ol li::before,
.crypto-betting-widget .tab-content ol li::before,
.crypto-betting-widget .info-box ol li::before,
.crypto-betting-widget .summary-box ol li::before,
.crypto-betting-widget article ol li::before,
.crypto-betting-widget main ol:not(elementor-nav ol):not([class*="menu"]):not([class*="nav"]) li::before {
    content: counter(list-counter) !important;
    position: absolute;
    left: 0;
    top: 0.125rem;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #ff6b35, #ff8c61);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(255, 107, 53, 0.15);
}

/* Check List */

.crypto-betting-widget ul.checklist li::before {
    content: "✓";
    color: #22c55e;
    font-weight: 700;
    font-size: 1rem;
}

/* ===================================
   SPECIALIZED CONTENT BLOCKS
   =================================== */

/* Key Points Box */

.crypto-betting-widget .key-points {
    background: linear-gradient(145deg, #f8f8f9, #ffffff);
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.crypto-betting-widget .key-points h3 {
    font-size: 1.125rem;
    color: #1d1d1f;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.crypto-betting-widget .key-points ul {
    margin-bottom: 0;
}

/* Pros and Cons Container */

.crypto-betting-widget .pros-cons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.crypto-betting-widget .pros-box,
.crypto-betting-widget .cons-box {
    background: linear-gradient(145deg, #f8f8f9, #ffffff);
    padding: 1.25rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.crypto-betting-widget .pros-box {
    border-top: 3px solid #22c55e;
}

.crypto-betting-widget .cons-box {
    border-top: 3px solid #ef4444;
}

.crypto-betting-widget .pros-box h4 {
    color: #22c55e;
    margin-top: 0;
}

.crypto-betting-widget .cons-box h4 {
    color: #ef4444;
    margin-top: 0;
}

/* Quote Block */

.crypto-betting-widget .quote-block {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 3rem;
    margin: 1.5rem 0;
    background: linear-gradient(145deg, #f8f8f9, #ffffff);
    border-radius: 10px;
    border-left: 3px solid #ff6b35;
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.03),
        -2px -2px 4px rgba(255, 255, 255, 0.9);
}

.crypto-betting-widget .quote-block::before {
    content: "\"";
    position: absolute;
    left: 1rem;
    top: 1rem;
    font-size: 2.5rem;
    color: #ff6b35;
    opacity: 0.3;
    font-weight: 700;
    line-height: 1;
}

.crypto-betting-widget .quote-block p {
    font-size: 1.0625rem;
    font-style: italic;
    color: #515154;
    margin: 0;
}

.crypto-betting-widget .quote-block cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #86868b;
    font-style: normal;
}

/* Summary Box */

.crypto-betting-widget .summary-box {
    background: rgba(255, 107, 53, 0.02);
    border: 1px solid rgba(255, 107, 53, 0.1);
    border-radius: 10px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.crypto-betting-widget .summary-box h3 {
    color: #ff6b35;
    font-size: 1.25rem;
    margin: 0 0 0.75rem 0;
}

.crypto-betting-widget .summary-box p {
    margin-bottom: 0.75rem;
}

.crypto-betting-widget .summary-box p:last-child {
    margin-bottom: 0;
}

/* ===================================
   RESPONSIVE TYPOGRAPHY
   =================================== */

@media  (max-width: 768px)  {
    
    
    .crypto-betting-widget h2 {
        font-size: 1.75rem;
        margin: 2rem 0 1rem 0;
    }
    

    
    .crypto-betting-widget h3 {
        font-size: 1.375rem;
        margin: 1.75rem 0 0.875rem 0;
    }
    

    
    .crypto-betting-widget h4 {
        font-size: 1.0625rem;
    }
    

    
    .crypto-betting-widget .content-section {
        padding: 1.5rem;
    }
    

    
    .crypto-betting-widget .pros-cons-container {
        grid-template-columns: 1fr;
    }
    

}

@media  (max-width: 480px)  {
    
    
    .crypto-betting-widget h2 {
        font-size: 1.5rem;
        margin: 1.75rem 0 0.875rem 0;
    }
    

    
    .crypto-betting-widget h3 {
        font-size: 1.25rem;
    }
    

    
    .crypto-betting-widget h4 {
        font-size: 1rem;
    }
    

    
    .crypto-betting-widget p {
        font-size: 0.875rem;
    }
    

    
    .crypto-betting-widget p.lead {
        font-size: 1rem;
    }
    

    
    .crypto-betting-widget .content-section {
        padding: 1.25rem;
        border-radius: 10px;
    }
    

    
    .crypto-betting-widget .content-card {
        padding: 1.25rem;
    }
    

}

/* ===================================
   END OF TYPOGRAPHY & CONTENT SECTION
   =================================== */

/* ===================================
   FAQ SECTION STYLING
   Light Skeuomorphic with Orange Accent
   =================================== */

/* FAQ Container */

.crypto-betting-widget .faq-container {
    background: linear-gradient(145deg, #ffffff, #fafafa);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* FAQ Header */

.crypto-betting-widget .faq-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

.crypto-betting-widget .faq-header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #ff6b35 0%, #ff8c61 100%);
}

.crypto-betting-widget .faq-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 0.375rem 0;
    letter-spacing: -0.01em;
}

.crypto-betting-widget .faq-subtitle {
    font-size: 0.9375rem;
    color: #515154;
    margin: 0;
}

/* FAQ List */

.crypto-betting-widget .faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual FAQ Item */

.crypto-betting-widget .faq-item {
    background: linear-gradient(145deg, #f8f8f9, #ffffff);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.03),
        -2px -2px 4px rgba(255, 255, 255, 0.9);
}

.crypto-betting-widget .faq-item:last-child {
    margin-bottom: 0;
}

.crypto-betting-widget .faq-item:hover {
    box-shadow:
        3px 3px 6px rgba(0, 0, 0, 0.04),
        -3px -3px 6px rgba(255, 255, 255, 0.9);
}

/* Active/Open State */

.crypto-betting-widget .faq-item.active {
    border-color: rgba(255, 107, 53, 0.15);
    box-shadow:
        3px 3px 6px rgba(255, 107, 53, 0.05),
        -3px -3px 6px rgba(255, 255, 255, 0.9);
}

/* FAQ Question (Button) */

.crypto-betting-widget .faq-question {
    width: 100%;
    padding: 1.125rem 3rem 1.125rem 1.25rem;
    background: transparent;
    border: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    display: block;
}

.crypto-betting-widget .faq-question:hover {
    padding-left: 1.375rem;
}

.crypto-betting-widget .faq-item.active .faq-question {
    background: rgba(255, 107, 53, 0.02);
    border-bottom: 1px solid rgba(255, 107, 53, 0.08);
}

/* Question Text */

.crypto-betting-widget .faq-question-text {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.4;
    margin: 0;
    display: block;
    padding-right: 1rem;
}

.crypto-betting-widget .faq-item.active .faq-question-text {
    color: #ff6b35;
}

/* Toggle Icon - Simplified */

.crypto-betting-widget .faq-toggle {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ff6b35, #ff8c61);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(255, 107, 53, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.crypto-betting-widget .faq-toggle::before,
.crypto-betting-widget .faq-toggle::after {
    content: "";
    position: absolute;
    background: #ffffff;
    transition: all 0.3s ease;
}

/* Horizontal line */

.crypto-betting-widget .faq-toggle::before {
    width: 12px;
    height: 2px;
}

/* Vertical line */

.crypto-betting-widget .faq-toggle::after {
    width: 2px;
    height: 12px;
}

/* Hide vertical line when active */

.crypto-betting-widget .faq-item.active .faq-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
}

/* FAQ Answer */

.crypto-betting-widget .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.crypto-betting-widget .faq-item.active .faq-answer {
    max-height: 500px;
    padding: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.crypto-betting-widget .faq-answer-content {
    color: #424245;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.crypto-betting-widget .faq-answer-content p {
    margin: 0 0 0.75rem 0;
}

.crypto-betting-widget .faq-answer-content p:last-child {
    margin-bottom: 0;
}

/* Answer with Lists */

.crypto-betting-widget .faq-answer-content ul,
.crypto-betting-widget .faq-answer-content ol {
    margin: 0.75rem 0;
    padding-left: 0;
    list-style: none;
}

.crypto-betting-widget .faq-answer-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.375rem;
}

.crypto-betting-widget .faq-answer-content ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ff6b35;
    font-weight: 700;
}

.crypto-betting-widget .faq-answer-content ol {
    counter-reset: faq-ol-counter;
}

.crypto-betting-widget .faq-answer-content ol li {
    counter-increment: faq-ol-counter;
}

.crypto-betting-widget .faq-answer-content ol li::before {
    content: counter(faq-ol-counter) ".";
    position: absolute;
    left: 0;
    color: #ff6b35;
    font-weight: 600;
}

/* Responsive Design */

@media  (max-width: 768px)  {
    
    
    .crypto-betting-widget .faq-container {
        padding: 1.5rem;
    }
    

    
    .crypto-betting-widget .faq-title {
        font-size: 1.375rem;
    }
    

    
    .crypto-betting-widget .faq-question {
        padding: 1rem 2.5rem 1rem 1rem;
    }
    

    
    .crypto-betting-widget .faq-question-text {
        font-size: 0.9375rem;
    }
    

}

@media  (max-width: 480px)  {
    
    
    .crypto-betting-widget .faq-container {
        padding: 1.25rem;
        border-radius: 10px;
    }
    

    
    .crypto-betting-widget .faq-title {
        font-size: 1.25rem;
    }
    

    
    .crypto-betting-widget .faq-subtitle {
        font-size: 0.875rem;
    }
    

    
    .crypto-betting-widget .faq-item {
        margin-bottom: 0.625rem;
    }
    

    
    .crypto-betting-widget .faq-question {
        padding: 0.875rem 2.25rem 0.875rem 0.875rem;
    }
    

    
    .crypto-betting-widget .faq-question-text {
        font-size: 0.875rem;
        padding-right: 0.5rem;
    }
    

    
    .crypto-betting-widget .faq-toggle {
        width: 20px;
        height: 20px;
        right: 0.875rem;
    }
    

    
    .crypto-betting-widget .faq-toggle::before {
        width: 10px;
    }
    

    
    .crypto-betting-widget .faq-toggle::after {
        height: 10px;
    }
    

    
    .crypto-betting-widget .faq-item.active .faq-answer {
        padding: 1rem 0.875rem;
    }
    

    
    .crypto-betting-widget .faq-answer-content {
        font-size: 0.875rem;
    }
    

}

/* ===================================
   END OF FAQ SECTION
   =================================== */

/* ===================================
   NUMBERED REFERENCE LIST STYLING
   Light Skeuomorphic with Orange Accent
   =================================== */

/* Reference Container */

.crypto-betting-widget .reference-container {
    background: linear-gradient(145deg, #ffffff, #fafafa);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Reference Header */

.crypto-betting-widget .reference-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

.crypto-betting-widget .reference-header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #ff6b35 0%, #ff8c61 100%);
}

.crypto-betting-widget .reference-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 0.375rem 0;
    letter-spacing: -0.01em;
}

.crypto-betting-widget .reference-subtitle {
    font-size: 0.875rem;
    color: #515154;
    margin: 0;
}

/* Reference List */

.crypto-betting-widget .reference-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ref-counter;
}

/* Individual Reference Item */

.crypto-betting-widget .reference-item {
    counter-increment: ref-counter;
    position: relative;
    padding: 1rem 1rem 1rem 2.75rem;
    margin-bottom: 0.875rem;
    background: linear-gradient(145deg, #f8f8f9, #ffffff);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    box-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.02),
        -1px -1px 2px rgba(255, 255, 255, 0.9);
}

.crypto-betting-widget .reference-item:hover {
    transform: translateX(2px);
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.04),
        -2px -2px 4px rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 107, 53, 0.1);
}

.crypto-betting-widget .reference-item:last-child {
    margin-bottom: 0;
}

/* Reference Number */

.crypto-betting-widget .reference-item::before {
    content: "[" counter(ref-counter) "]";
    position: absolute;
    left: 0.75rem;
    top: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ff6b35;
    background: linear-gradient(145deg, #ffffff, #fafafa);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 107, 53, 0.2);
}

/* Reference Content */

.crypto-betting-widget .reference-content {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.crypto-betting-widget .reference-author {
    font-size: 0.875rem;
    color: #1d1d1f;
    font-weight: 600;
}

.crypto-betting-widget .reference-title-text {
    font-size: 0.9375rem;
    color: #424245;
    font-style: italic;
    line-height: 1.4;
}

.crypto-betting-widget .reference-publication {
    font-size: 0.8125rem;
    color: #86868b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.crypto-betting-widget .reference-date {
    font-weight: 500;
}

.crypto-betting-widget .reference-link {
    color: #ff6b35;
    text-decoration: none;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
    margin-top: 0.25rem;
}

.crypto-betting-widget .reference-link:hover {
    color: #ff8c61;
    text-decoration: underline;
}

.crypto-betting-widget .reference-link-icon {
    width: 14px;
    height: 14px;
}

/* Reference Type Badges */

.crypto-betting-widget .reference-type {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: rgba(255, 107, 53, 0.1);
    color: #ff6b35;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.crypto-betting-widget .reference-type.article {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.crypto-betting-widget .reference-type.book {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.crypto-betting-widget .reference-type.website {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.crypto-betting-widget .reference-type.report {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Responsive Design */

@media  (max-width: 768px)  {
    
    
    .crypto-betting-widget .reference-container {
        padding: 1.5rem;
    }
    

    
    .crypto-betting-widget .reference-title {
        font-size: 1.375rem;
    }
    

    
    .crypto-betting-widget .reference-item {
        padding-left: 2.5rem;
    }
    

}

@media  (max-width: 480px)  {
    
    
    .crypto-betting-widget .reference-container {
        padding: 1.25rem;
        border-radius: 10px;
    }
    

    
    .crypto-betting-widget .reference-title {
        font-size: 1.25rem;
    }
    

    
    .crypto-betting-widget .reference-item {
        padding: 0.875rem 0.875rem 0.875rem 2.25rem;
        margin-bottom: 0.75rem;
    }
    

    
    .crypto-betting-widget .reference-item::before {
        font-size: 0.6875rem;
        left: 0.5rem;
        top: 0.875rem;
    }
    

    
    .crypto-betting-widget .reference-author {
        font-size: 0.8125rem;
    }
    

    
    .crypto-betting-widget .reference-title-text {
        font-size: 0.875rem;
    }
    

    
    .crypto-betting-widget .reference-publication {
        font-size: 0.75rem;
    }
    

}

/* ===================================
   END OF NUMBERED REFERENCE LIST
   =================================== */

/* ===================================
   OPTIONAL: SKELETON LOADING STATES
   CLS Prevention - Use for Dynamic Content
   =================================== */

/*
   Skeleton states help prevent CLS when content loads dynamically.
   Add the .skeleton class to elements that will load content later.
   Remove the class when real content is ready.
*/

.crypto-betting-widget .skeleton {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.03) 0%,
        rgba(0, 0, 0, 0.05) 50%,
        rgba(0, 0, 0, 0.03) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
    pointer-events: none;
    user-select: none;
}

@keyframes  skeleton-pulse  {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton variants for specific content types */

.crypto-betting-widget .skeleton-text {
    height: 1em;
    margin: 0.5em 0;
    border-radius: 4px;
}

.crypto-betting-widget .skeleton-heading {
    height: 1.5em;
    width: 60%;
    margin: 0.75em 0;
    border-radius: 4px;
}

.crypto-betting-widget .skeleton-image {
    aspect-ratio: 16/9;
    width: 100%;
    border-radius: 8px;
}

.crypto-betting-widget .skeleton-card {
    min-height: 200px;
    border-radius: 12px;
}

.crypto-betting-widget .skeleton-button {
    height: 40px;
    width: 120px;
    border-radius: 8px;
}

/* Hide actual content when skeleton is active */

.crypto-betting-widget .skeleton > * {
    visibility: hidden;
}

/* Content Image Wrapper - for supporting images in sections */

.crypto-betting-widget .content-image-wrapper {
    margin: 2rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.04);
    background: linear-gradient(145deg, #fafafa, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.crypto-betting-widget .content-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16/9;
}

@media  (max-width: 768px)  {
    
    
    .crypto-betting-widget .content-image-wrapper {
        margin: 1.5rem 0;
        border-radius: 10px;
    }
    

}

@media  (max-width: 480px)  {
    
    
    .crypto-betting-widget .content-image-wrapper {
        margin: 1rem 0;
        border-radius: 8px;
    }
    

}

/* Usage Example:
   <div class="qv-category skeleton">
       <!-- Content will be hidden while skeleton shows -->
   </div>

   When content loads, remove the skeleton class:
   element.classList.remove('skeleton');
*/

/* ===================================
   END OF SKELETON LOADING STATES
   =================================== */

/* ===================================
   SUMMARY
   All mobile display fixes have been integrated:
   - Trust icons now wrap and scale properly
   - Stars use inline-flex for better containment
   - Winner names and ratings have proper gaps and wrapping
   - Platform rating badges adjust positioning on mobile
   - All icons protected with flex-shrink: 0
   - Containers have overflow: hidden for containment
   - Responsive sizing at 768px, 480px, and 360px breakpoints
   - Extra small devices use vertical stacking layout

   CLS (Cumulative Layout Shift) OPTIMIZATIONS:
   - Removed slide-in animation from .qv-header::after
   - Added aspect-ratio to .platform-logo img
   - Added explicit width to images to reserve space
   - Added min-height to flex-wrap containers
   - Included font-display: swap recommendation for web fonts
   - Added optional skeleton loading state classes

   WORDPRESS/ELEMENTOR SPECIFIC FIXES:
   - Enhanced .platform-logo img .elementor-1485 .elementor-element.elementor-element-284ba3es with !important flags
   - Target images within Elementor containers (.elementor-widget-container)
   - Added container min-height to .platform-logo (70px)
   - Target images in picture and figure elements
   - Ensure Elementor wrapper containers have fixed dimensions

   NITROPACK COMPATIBILITY FIXES:
   - Scoped list styles to content areas only (exclude navigation/menus)
   - Added !important flags to mobile media queries
   - Enhanced star rating containment in tables with multiple .elementor-1485 .elementor-element.elementor-element-284ba3es
   - Added overflow: visible to table cells for ratings
   - Strengthened flexbox properties on trust icons, arrows, and stars
   - Added defensive box-sizing and SVG dimension rules
   - Prevented layout shifts from optimization/lazy loading
   - Protected flex-shrink: 0 rules with !important flags

   MOBILE DISPLAY FIX (Enhanced for NitroPack):
   - Added max-width: 100% to ALL mobile containers (@media 768px, 480px, 360px)
   - Added overflow-x: hidden to prevent horizontal scrolling
   - Added box-sizing: border-box to all flex containers
   - Constrained star ratings: max-width 45-60px depending on context
   - Constrained winner ratings: max-width 80px on mobile
   - Constrained trust items: max-width calc(50% - 0.5rem) for wrapping
   - Added min-width/min-height to all icons and stars (prevent shrinking)
   - Added Elementor mobile viewport targeting (@media max-width: 767px)
   - Forced SVG dimensions (width: 100%, height: 100% within containers)
   - Added max-width: 100vw to global containers
   - Table cells: overflow: visible + position: relative for ratings
   - Extra small screens (< 360px): Reduced star size to 6px
   - Trust signals: Added horizontal padding on mobile for spacing
   - Category footer: Explicit padding constraints on mobile
   =================================== */


/* ==========================================================
   ACCESSIBILITY ENHANCEMENTS
   Added to meet WCAG 2.1 Level AA compliance
   ========================================================== */

/* Skip to main content link - hidden until focused */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: 700;
    z-index: 100000;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #ff6b35;
    outline-offset: 2px;
}

/* Visually hidden class - hides content visually but keeps it for screen readers */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus visible styles for keyboard navigation */
.crypto-betting-widget *:focus-visible {
    outline: 3px solid #ff6b35;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Enhanced focus styles for CTA buttons */
.crypto-betting-widget .cta-button:focus,
.crypto-betting-widget .cta-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(255, 107, 53, 0.5), 0 6px 20px rgba(255, 107, 53, 0.4);
}

/* Enhanced focus styles for tab buttons */
.crypto-betting-widget .tab-button:focus,
.crypto-betting-widget .tab-button:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: -3px;
    background: rgba(59, 130, 246, 0.1);
}

/* Focus styles for all links */
.crypto-betting-widget a:focus,
.crypto-betting-widget a:focus-visible {
    outline: 3px solid #ff6b35;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Enhanced focus for top10 links */
.crypto-betting-widget .top10-link:focus,
.crypto-betting-widget .top10-link:focus-visible {
    outline: 3px solid #ff6b35;
    outline-offset: 3px;
}

/* Focus for quick verdict view details links */
.crypto-betting-widget .qv-view-details:focus,
.crypto-betting-widget .qv-view-details:focus-visible {
    outline: 3px solid #ff6b35;
    outline-offset: 2px;
}

/* Ensure focus indicators are never hidden */
.crypto-betting-widget *:focus {
    outline: 2px solid #ff6b35;
    outline-offset: 2px;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .crypto-betting-widget *,
    .crypto-betting-widget *::before,
    .crypto-betting-widget *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Disable hover transforms for users who prefer reduced motion */
    .crypto-betting-widget .top10-item:hover,
    .crypto-betting-widget .cta-button:hover,
    .crypto-betting-widget .platform-card:hover {
        transform: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .crypto-betting-widget {
        border: 2px solid currentColor;
    }
    
    .crypto-betting-widget .cta-button {
        border: 2px solid #fff;
    }
    
    .crypto-betting-widget .tab-button.active {
        border-bottom: 4px solid currentColor;
    }
}

/* Ensure sufficient color contrast for text */
.crypto-betting-widget .qv-trust-item,
.crypto-betting-widget .cta-note {
    color: #515154; /* Ensures WCAG AA contrast ratio */
}

/* Make sure table captions are truly visually hidden */
.crypto-betting-widget table caption.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================
   END ACCESSIBILITY ENHANCEMENTS
   ========================================================== */

/* ==========================================================
   COLOR CONTRAST FIXES for WCAG 2.1 AA Compliance
   Addressing Google PageSpeed Insights color contrast issues
   ========================================================== */

/* Fix .qv-compare-count - was #86868b (too light), now darker for 4.5:1 contrast */
.crypto-betting-widget .qv-compare-count {
    color: #515154 !important; /* Darker gray for better contrast on white */
}

/* Fix .rank-badge default (non-gold/silver/bronze) - ensure sufficient contrast */
.crypto-betting-widget .top10-section .rank-badge {
    background: #d0d0d2 !important; /* Slightly darker background */
    color: #1d1d1f !important; /* Dark text for high contrast */
}

/* Preserve special rank badges (gold, silver, bronze) */
.crypto-betting-widget .top10-section .rank-badge.gold {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%) !important;
    color: #5c4a0d !important; /* Darker gold text for better contrast */
}

.crypto-betting-widget .top10-section .rank-badge.silver {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #c0c0c0 100%) !important;
    color: #2a2a2a !important; /* Darker text for better contrast */
}

.crypto-betting-widget .top10-section .rank-badge.bronze {
    background: linear-gradient(135deg, #cd7f32 0%, #e8a87c 50%, #cd7f32 100%) !important;
    color: #3d1f07 !important; /* Darker bronze text for better contrast */
}

/* Fix .highlight in table cells - was #ff6b35, now darker orange for better contrast */
.crypto-betting-widget .platform-table .highlight,
.crypto-betting-widget .platform-table td.highlight {
    color: #d94f1f !important; /* Darker orange - meets 4.5:1 ratio on white */
    font-weight: 700 !important; /* Bold for emphasis and better readability */
}

/* Fix stat value highlights */
.crypto-betting-widget .stat-value.highlight {
    color: #d94f1f !important; /* Darker orange for better contrast */
}

/* Ensure all light gray text meets contrast requirements */
.crypto-betting-widget .cta-note,
.crypto-betting-widget .qv-trust-item {
    color: #515154 !important; /* Changed from #86868b for better contrast */
}

/* Fix any other potentially low-contrast elements */
.crypto-betting-widget .platform-table tbody td {
    color: #2a2a2a !important; /* Darker than original #424245 for better contrast */
}

/* ==========================================================
   END COLOR CONTRAST FIXES
   ========================================================== */
   
   /* ==========================================================
   FIX: FAQ ACCORDION & RATINGS OVERRIDES
   Appends to Stylesheet.css to fix Elementor cut-off issues
   ========================================================== */

/* 1. Force FAQ Content to Show When Open */
.crypto-betting-widget details.faq-item[open] .faq-answer {
    max-height: none !important; /* Overrides the '0' limit */
    padding: 1.5rem !important;
    opacity: 1 !important;
    overflow: visible !important;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* 2. Style the Summary (Question) */
.crypto-betting-widget summary.faq-question {
    list-style: none !important; /* Hides default browser triangle */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    outline: none !important;
}
/* Hide default marker in Webkit */
.crypto-betting-widget summary.faq-question::-webkit-details-marker {
    display: none !important;
}

/* 3. Add Custom Plus/Minus Icons */
.crypto-betting-widget summary.faq-question::after {
    content: "+" !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    color: #ff6b35 !important;
    margin-left: 1rem !important;
    line-height: 1 !important;
}

/* Change to Minus when Open */
.crypto-betting-widget details.faq-item[open] summary.faq-question::after {
    content: "-" !important;
    color: #dc3545 !important;
}

/* 4. Visual Fixes for Stars (Ensure they show 5, not 10) */
.crypto-betting-widget .qv-rating-stars .star,
.crypto-betting-widget .rating-stars .star {
    width: 14px !important; /* Make stars slightly larger */
    height: 14px !important;
}
/* ==========================================================
   FIX: IN-CONTENT LINK STYLING
   Restores site settings for links inside paragraphs and lists
   ========================================================== */

/* Target links inside text content only (excludes buttons/tabs) */
.crypto-betting-widget p a,
.crypto-betting-widget li a {
    font-weight: 700 !important;          /* Bold */
    color: inherit !important;            /* Inherit text color (don't force orange yet) */
    text-decoration: underline !important;
    text-decoration-color: #ff6b35 !important; /* Orange accent underline */
    text-decoration-thickness: 2px !important; /* Make the accent visible */
    text-underline-offset: 3px !important;     /* clear spacing */
    transition: color 0.2s ease, text-decoration-color 0.2s ease !important;
}

/* Hover State - Text turns Orange */
.crypto-betting-widget p a:hover,
.crypto-betting-widget li a:hover {
    color: #ff6b35 !important;
    text-decoration-color: #ff6b35 !important;
}

/* EXCEPTION: Protect your CTA Buttons and UI Links from this style */
.crypto-betting-widget a.cta-button,
.crypto-betting-widget a.tab-button,
.crypto-betting-widget a.qv-view-details,
.crypto-betting-widget a.top10-link,
.crypto-betting-widget a.table-action {
    text-decoration: none !important;
    font-weight: 700 !important; /* Keep buttons bold */
}

/* Exception for Reference List Links (usually need to be simpler) */
.crypto-betting-widget .reference-link {
    text-decoration: none !important;
}
.crypto-betting-widget .reference-link:hover {
    text-decoration: underline !important;
}/* End custom CSS */