/* ==========================================================================
   👑 PREMIUM CERULEAN THEME SYNC: ISOLATED CARD UI MATRIX (2026)
   ========================================================================== */

/* जूमला टेम्पलेट ओवरराइड को रोकने के लिए बेस रैपर सेटिंग्स */
.typing-wrapper-2026 {
   
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.typing-wrapper-2026 {
    position: relative !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 15px 30px 25px 30px !important;
    margin: 20px auto !important;
    max-width: 840px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

/* प्रीमियम सर्टिफिकेट कार्ड - हुबहू आपके रिजल्ट बक्से की तरह वाइट-शैडो फिनिश */
.typing-wrapper-2026 .cert-wrapper-card { 
    width: 100%; 
    max-width: 550px; 
    margin: 0 auto !important; 
    background: #ffffff !important; 
    border-radius: 10px !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; /* प्रीमियम सॉफ्ट शैडो */
    overflow: hidden !important; 
    border: 1px solid #e2e8f0 !important; 
    box-sizing: border-box !important;
}

/* हेडर बार - हुबहू आपके कम्पेयर पेज के नीले "Complete Result" बैनर का कड़क सिंक */
.typing-wrapper-2026 .cert-header-bar { 
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; /* आपका वही रॉयल नीला रंग */
    color: #ffffff !important; 
    padding: 18px !important; 
    font-size: 20px !important; 
    font-weight: 700 !important; 
    text-align: center !important; 
    margin: 0 !important; 
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* फॉर्म की अंदरूनी बॉडी */
.typing-wrapper-2026 .cert-body-content { 
    padding: 30px 35px !important; 
}

/* फ्लेक्सिबल फॉर्म ग्रिड रो - समानांतर कतार के लिए */
.typing-wrapper-2026 .form-grid-row { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    margin-bottom: 18px !important; 
    width: 100% !important; 
    box-sizing: border-box !important;
}

/* लेबल्स की कड़क और प्रोफेशनल अलाइनमेंट */
.typing-wrapper-2026 .form-grid-row label { 
    font-size: 14px !important; 
    font-weight: 600 !important; 
    color: #475569 !important; /* स्लेटी सुंदर टेक्स्ट */
    width: 35% !important; 
    text-align: left !important; 
    margin: 0 !important; 
    padding: 0 !important;
}

.typing-wrapper-2026 .field-input-box { 
    width: 65% !important; 
    box-sizing: border-box !important;
}

/* प्रीमियम इनपुट फ़ील्ड्स - आपके प्रोग्रेस डैशबोर्ड ग्रिड जैसी फिनिश */
.typing-wrapper-2026 .input-premium { 
    padding: 10px 14px !important; 
    width: 100% !important; 
    border: 1px solid #cbd5e1 !important; 
    border-radius: 6px !important; 
    font-size: 15px !important; 
    outline: none !important; 
    background-color: #ffffff !important; 
    color: #1e293b !important; 
    box-sizing: border-box !important; 
    transition: border-color 0.2s, box-shadow 0.2s !important; 
}

/* क्लिक करने पर आपके टाइमर बक्से जैसा ब्लू ग्लो */
.typing-wrapper-2026 .input-premium:focus { 
    border-color: #0284c7 !important; 
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2) !important; 
}

/* केवल पढ़ने योग्य (Readonly) इनपुट्स का साफ़ और वीआईपी लुक */
.typing-wrapper-2026 .input-readonly { 
    background-color: #f8fafc !important; 
    color: #64748b !important; 
    border: 1px dashed #cbd5e1 !important; /* डैश बॉर्डर ताकि क्लासी लगे */
    cursor: not-allowed !important; 
    font-weight: 600 !important; 
}

/* जॉब्स रेडियो ग्रुप */
.typing-wrapper-2026 .radio-jobs-group { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 25px !important; 
    margin: 20px 0 10px 0 !important; 
    font-size: 16px !important; 
    color: #1e293b !important; 
}

.typing-wrapper-2026 .radio-premium { 
    width: 18px !important; 
    height: 18px !important; 
    cursor: pointer !important; 
    vertical-align: middle !important; 
    margin: 0 6px 0 0 !important; 
}

/* प्रीमियम सबमिट बटन - हुबहू आपके "Generate Certificate" बटन की तरह कड़क ग्रीन/ब्लू फिनिश */
.typing-wrapper-2026 .btn-submit-premium { 
    width: 100% !important; 
    padding: 12px !important; 
    font-size: 16px !important; 
    font-weight: bold !important; 
    border-radius: 6px !important; 
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; /* आपके ग्रीन बटन का कड़क रिप्ले */
    border: none !important; 
    color: #ffffff !important; 
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important; 
    cursor: pointer !important; 
    transition: transform 0.1s ease, box-shadow 0.2s !important; 
}

.typing-wrapper-2026 .btn-submit-premium:hover { 
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3) !important;
}

.typing-wrapper-2026 .btn-submit-premium:active {
    transform: scale(0.98) !important;
}

/* ==========================================================================
   👑 LUXURY SUCCESS MESSAGE & ACTION BUTTONS TEMPLATE (2026)
   ========================================================================== */

/* 1. सफलतापूर्वक रिकॉर्ड सहेजने वाला प्रीमियम अलर्ट बॉक्स */
.typing-wrapper-2026 .alert-success {
    background: #f0fdf4 !important;           /* हल्का मखमली हरा */
    border: 1px solid #bbf7d0 !important;
    color: #166534 !important;                /* गहरा शाही हरा */
    padding: 24px !important;
    border-radius: 12px !important;
    max-width: 550px !important;              /* आपके फॉर्म बक्से की चौड़ाई से परफेक्ट सिंक */
    margin: 40px auto 20px auto !important;   /* स्क्रीन के बिल्कुल बीच में */
    box-shadow: 0 4px 15px rgba(22, 101, 52, 0.06) !important;
    text-align: center !important;
}

/* अलर्ट बॉक्स के अंदर का मुख्य टेक्स्ट */
.typing-wrapper-2026 .alert-success h4 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* आपका यूनिक लाल रंग का सर्टिफिकेट काउंटर नंबर */
.typing-wrapper-2026 .alert-success strong.text-danger {
    color: #dc2626 !important;                /* शुद्ध गहरा लाल रंग */
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    display: inline-block !important;
    margin-top: 6px !important;
    background: #fee2e2 !important;            /* नंबर के पीछे सुंदर लाइट रेड चिप */
    padding: 2px 10px !important;
    border-radius: 4px !important;
    border: 1px solid #fca5a5 !important;
}

/* 2. एक्शन बटन्स का रैपर कंटेनर */
.typing-wrapper-2026 .success-btn-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;                     /* दोनों बटन्स के बीच का मखमली गैप */
    max-width: 550px !important;
    margin: 0 auto 40px auto !important;
}

/* दोनों बटन्स (View और Get Certificate) का कड़क बेस ढांचा */
.typing-wrapper-2026 .success-btn-container .btn {
    padding: 12px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.1s ease, box-shadow 0.2s !important;
    text-decoration: none !important;
}

/* व्यू सर्टिफिकेट बटन - रॉयल सेरुलियन ब्लू थीम */
.typing-wrapper-2026 .success-btn-container .btn-primary {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
}
.typing-wrapper-2026 .success-btn-container .btn-primary:hover {
    background: linear-gradient(135deg, #0369a1 0%, #0c4a6e 100%) !important;
    box-shadow: 0 6px 14px rgba(2, 132, 199, 0.25) !important;
}

/* गेट सर्टिफिकेट बटन - प्रीमियम वाइब्रेंट ग्रीन थीम */
.typing-wrapper-2026 .success-btn-container .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
}
.typing-wrapper-2026 .success-btn-container .btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.25) !important;
}

/* क्लिक करने पर बटन का हल्का सा दबना */
.typing-wrapper-2026 .success-btn-container .btn:active {
    transform: scale(0.97) !important;
}

/* ==========================================================================
   👑 LUXURY WARNING ALREADY-SAVED TEMPLATE SYSTEM (2026)
   ========================================================================== */

/* 1. पहले से सेव रिकॉर्ड वाली प्रीमियम अलर्ट वॉर्निंग पट्टी */
.typing-wrapper-2026 .alert-warning {
    background: #fffbeb !important;           /* मखमली हल्का पीला रंग */
    border: 1px solid #fef08a !important;
    color: #854d0e !important;                /* गहरा शाही गोल्डन-ब्राउन टेक्स्ट */
    padding: 24px !important;
    border-radius: 12px !important;
    max-width: 550px !important;              /* आपके फॉर्म और सक्सेस बक्से से 100% मैच */
    margin: 40px auto 20px auto !important;   /* स्क्रीन के बिल्कुल बीच में लॉक */
    box-shadow: 0 4px 15px rgba(133, 77, 14, 0.05) !important;
    text-align: center !important;
}

/* वॉर्निंग बॉक्स के अंदर की हेडिंग */
.typing-wrapper-2026 .alert-warning h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* 2. वॉर्निंग बटन का रैपर कंटेनर */
.typing-wrapper-2026 .warning-btn-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 550px !important;
    margin: 0 auto 40px auto !important;
    text-align: center !important;
}

/* गेट सर्टिफिकेट बटन - प्रीमियम वाइब्रेंट ग्रीन थीम */
.typing-wrapper-2026 .warning-btn-container .btn-success {
    padding: 12px 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2) !important;
    transition: transform 0.1s ease, box-shadow 0.2s !important;
    text-decoration: none !important;
}

.typing-wrapper-2026 .warning-btn-container .btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35) !important;
}

.typing-wrapper-2026 .warning-btn-container .btn-success:active {
    transform: scale(0.97) !important;
}
/* ========================================================================== */
/* 👑 YOUR ORIGINAL LOCALHOST CSS - UPDATED FOR LIVE PRODUCTION (2026)      */
/* ========================================================================== */

.typing-wrapper-2026 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
}

.typing-wrapper-2026 #img {
    display: block !important;
    width: 100% !important;
    max-width: 740px !important;
    height: auto !important;
    min-height: 620px !important;
    margin: 0 auto !important;
    padding: 10px !important;
    /* 🚨 LIVE PATH FIXED: लाइव सर्वर के लिए इमेज पाथ सिंक किया */
    background-image: url('/1_typing_test_eng/img/bg2.jpg') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
}

.typing-wrapper-2026 #img #bg {
    width: 100% !important;
    height: 100% !important;
    min-height: 600px !important;
    margin: 0 auto !important;
    padding: 25px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.typing-wrapper-2026 #img #bg table[border='1'] {
    margin: 20px auto !important;
    width: 100% !important;
    max-width: 500px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #cbd5e1 !important;
    border-collapse: collapse !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.typing-wrapper-2026 #img #bg table[border='1'] td {
    padding: 10px 16px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
}

.typing-wrapper-2026 .print-action-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-top: 25px !important;
    width: 100% !important;
}

.typing-wrapper-2026 .print-action-box .btn {
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

.typing-wrapper-2026 .print-action-box .btn-primary {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
}

.typing-wrapper-2026 .print-action-box .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}


/* प्रीमियम वेरिफिकेशन कार्ड - बाहरी जूमला ओवरराइड से पूरी तरह सुरक्षित */
.typing-wrapper-2026 .verify-wrapper-card { 
    width: 100%; 
    max-width: 500px; 
    margin: 0 auto !important; 
    background: #ffffff !important; 
    border-radius: 12px !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important; 
    overflow: hidden !important; 
    border: 1px solid #e2e8f0 !important; 
    box-sizing: border-box !important;
}


.typing-wrapper-2026 .verify-header-bar { 
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; 
    color: #ffffff !important; 
    padding: 18px !important; 
    font-size: 19px !important; 
    font-weight: 700 !important; 
    text-align: center !important; 
    margin: 0 !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.5px !important; 
}

.typing-wrapper-2026 .verify-body-content { 
    padding: 30px 35px !important; 
    text-align: center !important; 
}

.typing-wrapper-2026 .verify-form-group { 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    margin-bottom: 20px !important; 
    width: 100% !important; 
    box-sizing: border-box !important;
}

.typing-wrapper-2026 .verify-form-group label { 
    font-size: 15px !important; 
    font-weight: 600 !important; 
    color: #475569 !important; 
    margin-bottom: 8px !important; 
    padding: 0 !important;
}


.typing-wrapper-2026 .verify-input-premium { 
    padding: 10px 14px !important; 
    width: 100% !important; 
    border: 1px solid #cbd5e1 !important; 
    border-radius: 6px !important; 
    font-size: 16px !important; 
    outline: none !important; 
    background-color: #ffffff !important; 
    color: #1e293b !important; 
    box-sizing: border-box !important; 
    transition: border-color 0.2s, box-shadow 0.2s !important; 
    font-weight: 600 !important; 
    letter-spacing: 0.5px !important; 
    text-transform: uppercase !important; 
}

.typing-wrapper-2026 .verify-input-premium:focus { 
    border-color: #0284c7 !important; 
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2) !important; 
}


.typing-wrapper-2026 .btn-verify-premium { 
    width: 100% !important; 
    padding: 12px !important; 
    font-size: 16px !important; 
    font-weight: bold !important; 
    border-radius: 6px !important; 
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; 
    border: none !important; 
    color: #ffffff !important; 
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important; 
    cursor: pointer !important; 
    transition: transform 0.1s ease, box-shadow 0.2s !important; 
}

.typing-wrapper-2026 .btn-verify-premium:hover { 
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important; 
    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3) !important; 
}

.typing-wrapper-2026 .btn-verify-premium:active { 
    transform: scale(0.98) !important; 
}