/**
 * CrossBridge Lucky Wheel - Optimized CSS
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&display=swap');

/* Main Wrapper */
.cb-wheel-outer-wrapper { 
    width: 100%; 
    max-width: 500px; 
    margin: 20px auto; 
    font-family: 'Outfit', sans-serif; 
    text-align: center; 
}

/* Premium Card Design */
.cb-game-card { 
    background: #ffffff; 
    border-radius: 40px; 
    padding: 40px 20px; 
    border: 1px solid #e2e8f0; 
    box-shadow: 0 30px 60px rgba(0,0,0,0.05); 
}

/* Outer Ring */
.cb-wheel-box { 
    position: relative; 
    width: 320px; 
    height: 320px; 
    margin: 40px auto; 
    border-radius: 50%; 
    border: 12px solid #1e293b; 
    background: #1e293b;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* The Wheel Engine */
.cb-wheel-canvas { 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    position: relative; 
    overflow: hidden; 
    transition: transform 5s cubic-bezier(0.1, 0, 0.1, 1); 
    background: conic-gradient(
        #ff6600 0deg 45deg,   
        #1e293b 45deg 90deg,  
        #ff6600 90deg 135deg, 
        #1e293b 135deg 180deg,
        #ff6600 180deg 225deg,
        #1e293b 225deg 270deg,
        #ff6600 270deg 315deg, 
        #1e293b 315deg 360deg 
    );
}

/* Number Container (Matched with Shortcode) */
.cb-segments-container {
    position: absolute;
    width: 100%; 
    height: 100%;
    top: 0; left: 0;
}

.cb-segments-container span {
    position: absolute;
    top: 20px; 
    left: 50%;
    transform: translateX(-50%);
    color: #fff; 
    font-weight: 900; 
    font-size: 24px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    transform-origin: 50% 140px; /* Aligns rotation to the center */
    display: block;
}

/* Position each number based on --i variable or individual classes */
.cb-segments-container span[style*="--i:0"] { transform: translateX(-50%) rotate(22.5deg); }
.cb-segments-container span[style*="--i:1"] { transform: translateX(-50%) rotate(67.5deg); }
.cb-segments-container span[style*="--i:2"] { transform: translateX(-50%) rotate(112.5deg); }
.cb-segments-container span[style*="--i:3"] { transform: translateX(-50%) rotate(157.5deg); }
.cb-segments-container span[style*="--i:4"] { transform: translateX(-50%) rotate(202.5deg); }
.cb-segments-container span[style*="--i:5"] { transform: translateX(-50%) rotate(247.5deg); }
.cb-segments-container span[style*="--i:6"] { transform: translateX(-50%) rotate(292.5deg); }
.cb-segments-container span[style*="--i:7"] { transform: translateX(-50%) rotate(337.5deg); }

/* Pointer UI */
.cb-wheel-pointer { 
    position: absolute; 
    top: -42px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 100; 
    font-size: 60px; 
    color: #ff6600; 
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
}

/* Center Pin */
.cb-wheel-center-pin { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 55px; 
    height: 55px; 
    background: #fff; 
    border: 6px solid #ff6600; 
    border-radius: 50%; 
    z-index: 10; 
}

/* Buttons and Messages */
.cb-wheel-msg { margin: 25px 0; font-weight: 900; font-size: 24px; color: #1e293b; min-height: 40px; }
.cb-btn { width: 100%; padding: 18px; border-radius: 20px; font-size: 18px; font-weight: 900; border: none; cursor: pointer; color: #fff; text-transform: uppercase; margin-bottom: 10px; }
.cb-btn-main { background: linear-gradient(135deg, #ff6600, #ff8533); transition: transform 0.2s; }
.cb-btn-main:active { transform: scale(0.95); }
.cb-btn-success { background: linear-gradient(135deg, #22c55e, #10b981); }

/* Banner Ads Styling */
.cb-ad-container { margin-bottom: 20px; }
.cb-banner-box { padding: 15px; border-radius: 15px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: white; }
.top-gradient { background: linear-gradient(90deg, #6366f1, #a855f7); }
.bottom-dark { background: #1e293b; }
.cb-banner-btn { background: white; color: black; padding: 5px 15px; border-radius: 8px; font-weight: bold; font-size: 12px; }

/* Responsive Mobile Fix */
@media (max-width: 480px) {
    .cb-wheel-box { width: 280px; height: 280px; }
    .cb-segments-container span { 
        font-size: 20px !important; 
        transform-origin: 50% 120px; 
    }
}