/**
 * Promotion Wheel Popup System
 * Spinning wheel with tier-based color coding and animations
 */

/* Overlay and Modal */
.promotion-wheel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.promotion-wheel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.promotion-wheel-popup {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
    border-radius: 20px;
    padding: 30px;
    max-width: 650px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    color: white;
    animation: wheelPopupSlideIn 0.5s ease-out;
}

@keyframes wheelPopupSlideIn {
    from {
        transform: scale(0.8) translateY(50px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.wheel-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: rgba(220, 38, 38, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

.wheel-close-btn:hover {
    background: rgba(220, 38, 38, 1);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.wheel-close-btn:active {
    transform: scale(0.95);
}

/* Header */
.wheel-header {
    margin-bottom: 15px;
    padding-right: 60px; /* Ensure text doesn't overlap close button */
}

.wheel-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 191, 36, 0.6);
    animation: brightTitleGlow 2s ease-in-out infinite alternate;
    line-height: 1.1;
    white-space: nowrap;
}

@keyframes brightTitleGlow {
    0% {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 191, 36, 0.6);
    }
    50% {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 30px rgba(251, 191, 36, 0.8), 0 0 50px rgba(253, 224, 71, 0.4);
    }
    100% {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(251, 191, 36, 0.7), 0 0 45px rgba(252, 211, 77, 0.5);
    }
}

.wheel-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

/* Spinning Wheel Container */
.wheel-container {
    position: relative;
    margin: 15px auto;
    width: 350px;
    height: 350px;
}

.wheel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The actual spinning wheel */
.spinning-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 60px rgba(59, 130, 246, 0.3);
    transition: transform 4s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* SVG Wheel styling */
.spinning-wheel svg {
    border-radius: 50%;
}

/* High tier segments get DRAMATIC animation */
.spinning-wheel path[fill*="goldGradient"] {
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.9)) drop-shadow(0 0 40px rgba(245, 158, 11, 0.6));
    animation: dramaticGoldGlow 1.5s ease-in-out infinite alternate;
}

/* High tier text - black with smooth thickness animation */
.spinning-wheel text[fill="#000000"] {
    fill: #000000;
    stroke: #000000;
    animation: textThickness 1.2s ease-in-out infinite alternate;
}

@keyframes dramaticGoldGlow {
    0% {
        filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.9)) 
                drop-shadow(0 0 40px rgba(245, 158, 11, 0.6))
                drop-shadow(0 0 60px rgba(251, 191, 36, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(251, 191, 36, 1)) 
                drop-shadow(0 0 60px rgba(245, 158, 11, 0.8))
                drop-shadow(0 0 100px rgba(251, 191, 36, 0.5));
    }
    100% {
        filter: drop-shadow(0 0 40px rgba(245, 158, 11, 1)) 
                drop-shadow(0 0 80px rgba(251, 191, 36, 0.9))
                drop-shadow(0 0 120px rgba(245, 158, 11, 0.6));
    }
}

/* Removed scaling animation as requested */

@keyframes dramaticTextGlow {
    0% {
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) 
                drop-shadow(0 0 8px rgba(251, 191, 36, 0.8))
                drop-shadow(0 0 15px rgba(245, 158, 11, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1)) 
                drop-shadow(0 0 12px rgba(251, 191, 36, 1))
                drop-shadow(0 0 25px rgba(245, 158, 11, 0.8))
                drop-shadow(0 0 40px rgba(251, 191, 36, 0.4));
    }
    100% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)) 
                drop-shadow(0 0 16px rgba(251, 191, 36, 1))
                drop-shadow(0 0 35px rgba(245, 158, 11, 1))
                drop-shadow(0 0 60px rgba(251, 191, 36, 0.6));
    }
}

@keyframes textThickness {
    0% {
        stroke-width: 0.1;
        opacity: 0.9;
    }
    50% {
        stroke-width: 0.4;
        opacity: 0.95;
    }
    100% {
        stroke-width: 0.7;
        opacity: 1;
    }
}

/* Add sparkle effect around high tier segment */
.spinning-wheel::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(251, 191, 36, 0.1) 45deg,
        rgba(245, 158, 11, 0.3) 90deg,
        rgba(251, 191, 36, 0.1) 135deg,
        transparent 180deg,
        transparent 225deg,
        rgba(251, 191, 36, 0.1) 270deg,
        rgba(245, 158, 11, 0.3) 315deg,
        rgba(251, 191, 36, 0.1) 360deg
    );
    animation: sparkleRotate 4s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes sparkleRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Wheel center */
.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1f2937, #374151);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fbbf24;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* Pointer */
.wheel-pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid #dc2626;
    z-index: 20;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Spin button */
.spin-button {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    margin: 15px 0 10px 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
    position: relative;
    overflow: hidden;
}

.spin-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6);
}

.spin-button:disabled {
    background: #6b7280;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.spin-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.spin-button:hover::before {
    left: 100%;
}

/* Result display */
.wheel-result {
    margin-top: 20px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    display: none;
}

.wheel-result.show {
    display: block;
    animation: resultSlideIn 0.5s ease-out;
}

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

.result-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: #fbbf24;
    line-height: 1.2;
}

.result-description {
    font-size: 1.2rem;
    margin: 0 0 25px 0;
    opacity: 0.9;
    line-height: 1.4;
}

.result-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.result-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.result-btn-primary {
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
}

.result-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
}

.result-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.result-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Mobile responsiveness - Tablet */
@media (max-width: 768px) and (min-width: 481px) {
    .promotion-wheel-popup {
        padding: 25px;
        margin: 20px;
        max-height: 90vh;
        max-width: 95%;
    }
    
    .wheel-title {
        /* Font size will be dynamically adjusted by JavaScript */
        line-height: 1.1;
        white-space: nowrap;
    }
    
    .wheel-subtitle {
        font-size: 1rem;
    }
    
    .wheel-container {
        width: 300px;
        height: 300px;
        margin: 15px auto;
    }
    
    .wheel-center {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    
    .spin-button {
        padding: 12px 30px;
        font-size: 1.1rem;
        margin: 15px 0;
    }
    
    .result-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }
    
    .result-description {
        font-size: 1rem !important;
    }
    
    .skill-question h4 {
        font-size: 1.2rem !important;
        margin: 18px 0 10px 0 !important;
    }
    
    .skill-question p {
        font-size: 1rem !important;
        margin: 8px 0 !important;
    }
    
    .option-btn {
        padding: 12px 20px !important;
        font-size: 1rem !important;
        min-width: 65px !important;
    }
    
    .question-options {
        gap: 12px !important;
    }
    
    .phone-collection h4 {
        font-size: 1.2rem !important;
    }
    
    .phone-collection p {
        font-size: 1rem !important;
    }
    
    .phone-input-group input {
        width: 220px !important;
        padding: 14px 18px !important;
        font-size: 1.1rem !important;
    }
}

/* Mobile responsiveness - Phone */
@media (max-width: 480px) {
    .promotion-wheel-popup {
        padding: 15px;
        margin: 10px;
        max-height: 95vh;
        max-width: 98%;
        border-radius: 15px;
    }
    
    .wheel-title {
        /* Font size will be dynamically adjusted by JavaScript */
        white-space: nowrap;
        line-height: 1;
    }
    
    .wheel-subtitle {
        font-size: 0.8rem;
        margin: 0 0 10px 0;
    }
    
    .wheel-header {
        margin-bottom: 10px;
    }
    
    .wheel-container {
        width: 220px !important;
        height: 220px !important;
        margin: 10px auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
    }
    
    .wheel-wrapper {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
    }
    
    .spinning-wheel {
        width: 220px !important;
        height: 220px !important;
        position: relative !important;
    }
    
    .spinning-wheel svg {
        width: 220px !important;
        height: 220px !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .wheel-center {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .spin-button {
        padding: 10px 20px;
        font-size: 0.95rem;
        margin: 10px 0;
    }
    
    .wheel-result {
        padding: 15px;
        margin-top: 10px;
    }
    
    .result-title {
        font-size: 1.4rem !important;
        line-height: 1.1 !important;
        margin: 0 0 10px 0 !important;
    }
    
    .result-description {
        font-size: 0.85rem !important;
        margin: 0 0 15px 0 !important;
    }
    
    .skill-question h4 {
        font-size: 1rem !important;
        margin: 12px 0 8px 0 !important;
    }
    
    .skill-question p {
        font-size: 0.85rem !important;
        margin: 5px 0 !important;
        line-height: 1.3 !important;
    }
    
    .option-btn {
        padding: 10px 15px !important;
        font-size: 0.9rem !important;
        min-width: 50px !important;
        margin: 2px !important;
    }
    
    .question-options {
        gap: 6px !important;
        margin: 12px 0 !important;
    }
    
    .question-feedback {
        font-size: 0.9rem !important;
        margin-top: 8px !important;
        min-height: 18px !important;
    }
    
    .phone-collection h4 {
        font-size: 1rem !important;
        margin: 15px 0 10px 0 !important;
    }
    
    .phone-collection p {
        font-size: 0.8rem !important;
        margin: 8px 0 !important;
        line-height: 1.3 !important;
    }
    
    .phone-input-group {
        margin: 15px 0 !important;
    }
    
    .phone-input-group input {
        width: 180px !important;
        padding: 12px 15px !important;
        font-size: 1rem !important;
    }
    
    .phone-actions {
        margin-top: 15px !important;
    }
    
    .result-btn {
        width: 160px !important;
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .promotion-wheel-popup {
        padding: 15px;
        margin: 10px;
    }
    
    .wheel-container {
        width: 250px;
        height: 250px;
    }
    
    .wheel-title {
        /* Font size will be dynamically adjusted by JavaScript */
        white-space: nowrap;
    }
    
    .wheel-subtitle {
        font-size: 0.8rem;
    }
    
    .result-title {
        font-size: 1.3rem !important;
    }
    
    .result-description {
        font-size: 0.85rem !important;
    }
    
    .skill-question h4 {
        font-size: 1rem !important;
    }
    
    .skill-question p {
        font-size: 0.85rem !important;
    }
    
    .option-btn {
        padding: 8px 14px !important;
        font-size: 0.9rem !important;
        min-width: 50px !important;
    }
    
    .wheel-close-btn {
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
        top: 8px !important;
        right: 12px !important;
        background: rgba(220, 38, 38, 0.9) !important;
    }
    
    .wheel-header {
        padding-right: 70px !important;
    }
}

/* Animation classes for spinning */
.spinning-wheel.spinning {
    pointer-events: none;
}

/* Skill Question Styles */
.option-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 70px !important;
    display: inline-block !important;
    text-align: center !important;
    line-height: 1 !important;
}

.option-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.option-btn.correct {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    border-color: #10b981 !important;
    color: white !important;
    animation: correctPulse 0.5s ease;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5) !important;
}

.option-btn.incorrect {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    border-color: #ef4444 !important;
    color: white !important;
    animation: incorrectShake 0.5s ease;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5) !important;
}

@keyframes correctPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes incorrectShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Phone Input Styles */
.phone-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.phone-input-group input:focus {
    outline: none;
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

/* Celebration effects */
.celebration-confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fbbf24;
    animation: confettiFall 3s linear infinite;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}