/* --- CLASSZEE THEME (Normal CSS) --- */

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f1f5f9; /* bg-body */
    position: relative; 
}

/* --- 1. WATERMARK (WEB) --- */
#watermark-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    z-index: 0; /* Behind everything */
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    overflow: hidden;
    opacity: 0.4;
}
.watermark-text {
    transform: rotate(-30deg);
    color: rgba(0, 0, 0, 0.03);
    font-size: 1.2rem;
    font-weight: 800;
    user-select: none;
    white-space: nowrap;
    margin: 40px;
    text-transform: uppercase;
}

/* --- 2. NAVBAR & BREADCRUMBS --- */
.cz-navbar { 
    background-color: #0a192f; /* primary */
    border-bottom: 3px solid #d4af37; /* accent */
}
.cz-logo { 
    color: white; 
    font-weight: 800; 
    letter-spacing: 1px; 
}
.cz-logo i { 
    color: #d4af37; 
}

.breadcrumb-container { 
    background-color: white; 
    border-bottom: 1px solid #e2e8f0; 
    padding: 10px 0; 
    font-size: 0.9rem; 
}
.breadcrumb a { 
    color: #0a192f; 
    font-weight: 500; 
    text-decoration: none; 
}
.breadcrumb a:hover { 
    color: #b89628; /* accent-hover */
    text-decoration: underline; 
}
.breadcrumb span { 
    color: #94a3b8; 
    margin: 0 5px; 
    font-size: 0.75rem; 
}
.breadcrumb .active { 
    color: #64748b; 
    font-weight: 600; 
}

/* --- 3. QUIZ STYLING --- */
.slide-animate { 
    animation: slideInRight 0.4s ease-out both; 
}
@keyframes slideInRight { 
    0% { opacity: 0; transform: translateX(30px); } 
    100% { opacity: 1; transform: translateX(0); } 
}

.option-card { 
    transition: all 0.2s ease; 
    border: 2px solid #e2e8f0; 
    position: relative; 
    z-index: 10; 
    background: white; 
}
.option-card:hover { 
    border-color: #d4af37; 
    background-color: #fffbeb; 
}
.option-card.selected { 
    border-color: #0a192f; 
    background-color: #f0f9ff; 
}
.option-dot { 
    border-color: #94a3b8; 
}
.option-card.selected .option-dot { 
    background-color: #0a192f; 
    border-color: #0a192f; 
}

.btn-gold { 
    background-color: #d4af37; 
    color: #0a192f; 
}
.btn-gold:hover { 
    background-color: #b89628; 
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4); 
}

/* Score Circle */
.score-circle {
    width: 150px; 
    height: 150px; 
    border-radius: 50%;
    background: conic-gradient(#d4af37 calc(100% * 1%), #e2e8f0 0deg); /* percentage static example */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto;
}
.score-inner { 
    width: 130px; 
    height: 130px; 
    background: white; 
    border-radius: 50%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}

/* Loading */
#loading-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.7); 
    z-index: 10000; 
    align-items: center; 
    justify-content: center; 
    backdrop-filter: blur(4px); 
}
.spinner { 
    border: 4px solid rgba(255,255,255,0.3); 
    border-top: 4px solid #d4af37; 
    border-radius: 50%; 
    width: 40px; 
    height: 40px; 
    animation: spin 1s linear infinite; 
}
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}



        /* 2. बटन का कंटेनर (Wrapper) */
        .tag-container {
            display: flex;
            flex-wrap: wrap;
            /* यह सबसे ज़रूरी है: जगह कम होने पर बटन नीचे आ जाएंगे */
            gap: 10px;
            /* बटनों के बीच की दूरी */
            align-items: center;
            margin: 50px;
        }

        /* 3. बटन का डिज़ाइन */
        .tag-btn {
            background-color: #ECECF4;
            /* हल्का बैंगनी/ग्रे रंग */
            color: #383854;
            /* टेक्स्ट का गहरा रंग */
            text-decoration: none;
            /* लिंक की अंडरलाइन हटाने के लिए */
            font-size: 14px;
            font-weight: 500;
            padding: 10px 14px;
            /* बटन के अंदर की जगह */
            border-radius: 6px;
            /* कोने गोल करने के लिए */
            display: inline-block;
            border: 1px solid transparent;
            /* बॉर्डर की जगह सुरक्षित रखने के लिए */
        }

        /* 4. होवर इफेक्ट (जब माउस ऊपर जाए) */
        .tag-btn:hover {
            background-color: #dcdce6;
            border: 1px solid;
        }

        /* 5. मोबाइल रिस्पॉन्सिव (छोटी स्क्रीन के लिए) */
        @media (max-width: 400px) {
            .tag-btn {
                font-size: 13px;
                /* मोबाइल पर टेक्स्ट थोड़ा छोटा */
                padding: 8px 12px;
                flex-grow: 1;
                /* मोबाइल पर बटन पूरी चौड़ाई ले सकते हैं */
                text-align: center;
            }
        }