/* ==========================================
   🌟 1. CSS VARIABLES (वेबसाइट का रिमोट कंट्रोल)
   यहाँ जो रंग सेट करेंगे, वो पूरी वेबसाइट पर लागू होगा।
   ========================================== */
:root {
    /* 🎨 BACKGROUND: यह साइट का बैकग्राउंड है। #F8FAFC हल्का स्लेटी है। 
       टेस्ट के लिए इसे #000000 (Black) करके देखें, पूरी साइट डार्क मोड में चली जाएगी! */
    --bg-color: #F8FAFC; 
    
    /* 📝 TEXT COLOR: मुख्य हेडिंग्स का रंग। काले (#000000) से बेहतर डार्क स्लेट (#0F172A) लगता है। */
    --text-dark: #0F172A; 
    --text-light: #475569; /* पैराग्राफ का हल्का ग्रे रंग */
    
    /* 👑 PRIMARY THEME (सबसे ज़रूरी): 
       अगर आप यहाँ #4F46E5 को हटाकर कोई भी रंग (जैसे हरा या गुलाबी) डालेंगे, 
       तो पूरी वेबसाइट के सारे मुख्य बटन्स और डिज़ाइन अपने आप बदल जाएंगे! */
    --primary-color: #4F46E5; 
    
    /* 👆 HOVER THEME: जब उंगली/माउस बटन पर जाएगा, तो रंग कैसा होगा। इसे हमेशा प्राइमरी से थोड़ा डार्क रखें। */
    --primary-hover: #4338CA; 
    
    /* 🚨 SOS/EMERGENCY: यह सिर्फ खतरे वाले बटन्स (Active SOS) के लिए लाल रंग है। */
    --danger-color: #E11D48; 
    --danger-hover: #BE123C;
    
    --font-main: 'Inter', sans-serif;
}

/* ==========================================
   🌍 2. GLOBAL RESET (वेबसाइट का बेस)
   ========================================== */
body {
    background-color: var(--bg-color); /* ऊपर दिए गए रिमोट कंट्रोल से रंग उठा रहा है */
    color: var(--text-dark);
    font-family: var(--font-main);
    
    /* 📏 MARGIN 0: यह ब्राउज़र की डिफ़ॉल्ट सफ़ेद किनारी को हटाकर साइट को 'कोने से कोने' तक कर देता है। */
    margin: 0; 
    padding: 0;
    
    /* ✨ SMOOTH TEXT: यह आपके टेक्स्ट को Apple की वेबसाइट्स की तरह एकदम HD और स्मूथ दिखाता है। */
    -webkit-font-smoothing: antialiased; 
}

/* ==========================================
   🔤 3. TYPOGRAPHY (टेक्स्ट का डिज़ाइन)
   ========================================== */
h1, h2, h3 {
    margin: 0 0 10px 0;
    font-weight: 800; /* 800 मतलब मोटा/बोल्ड टेक्स्ट */
    
    /* ↔️ LETTER SPACING: माइनस (-0.5px) करने से अक्षर पास-पास आ जाते हैं और प्रीमियम लगते हैं। 
       इसे 5px करके देखें, अक्षर बहुत दूर-दूर हो जाएंगे! */
    letter-spacing: -0.5px; 
}
p {
    color: var(--text-light);
    
    /* ↕️ LINE HEIGHT: यह 2 लाइनों के बीच की दूरी है। 1.6 पढ़ने में सबसे आसान होता है। */
    line-height: 1.6; 
    font-size: 14px;
}

/* ==========================================
   🔘 4. GLOBAL BUTTONS (बटनों का 3D जादू)
   ========================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* ↔️ GAP: यह बटन के अंदर आइकॉन (Icon) और टेक्स्ट (Text) के बीच की दूरी है। */
    gap: 8px; 
    
    padding: 12px 24px; /* अंदर की जगह (Top-Bottom 12px, Left-Right 24px) */
    border-radius: 8px; /* बटन के कोनों को हल्का गोल करने के लिए */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase; /* सारे अक्षर CAPITAL (बड़े) कर देगा */
    text-decoration: none; /* लिंक के नीचे आने वाली लाइन को हटाता है */
    cursor: pointer;
    
    /* 🎬 ANIMATION: यह 0.3 सेकंड में स्मूथ तरीके से रंग बदलने और ऊपर उठने का काम करता है। */
    transition: all 0.3s ease; 
    border: none;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
    /* 🌑 SHADOW: बटन के नीचे हल्की परछाई (0.25 मतलब बहुत हल्की डार्कनेस) */
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.25); 
}

.btn-primary:hover { 
    background-color: var(--primary-hover); 
    /* 🚀 3D HOVER: माउस ले जाने पर बटन 2px हवा में ऊपर उठ जाएगा! */
    transform: translateY(-2px); 
}

.btn-secondary {
    background-color: transparent; /* बैकग्राउंड खाली (Transparent) */
    color: var(--primary-color);
    border: 2px solid var(--primary-color); /* सिर्फ बॉर्डर का डिज़ाइन */
}
.btn-secondary:hover { background-color: #EEF2FF; }

.btn-danger {
    background-color: var(--danger-color);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.25);
}
.btn-danger:hover { background-color: var(--danger-hover); transform: translateY(-2px); }

/* ==========================================
   📦 5. GLOBAL CARDS (डिब्बों का डिज़ाइन)
   ========================================== */
.card-soft {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #F1F5F9; 
    
    /* ⬇️ BOTTOM BORDER: यही लाइन डिब्बे को 'क्यूट' और नीचे से मोटा बनाती है। */
    border-bottom: 4px solid #C7D2FE; 
    
    /* ☁️ FLOATING EFFECT: बहुत ही हल्का शैडो (0.03) जिससे कार्ड हवा में तैरता हुआ लगता है। */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03); 
    transition: transform 0.3s ease;
}
.card-soft:hover { transform: translateY(-4px); } /* टच करने पर 4px ऊपर उठेगा */

/* ==========================================
   🛠️ 6. UTILITY CLASSES
   ========================================== */
.text-center { text-align: center !important; } 
.mt-20 { margin-top: 20px !important; } 
.mb-20 { margin-bottom: 20px !important; } 

/* 🚫 IMPORTANT: !important ब्राउज़र को आदेश देता है कि वो किसी और की बात न सुने, सिर्फ इसी को लागू करे। */
.hidden { display: none !important; } 

/* ==========================================
   🎁 7. THEMED SECTION WRAPPERS (Flipkart Nested Layout)
   ========================================== */
.theme-section-wrapper {
    background-color: #EEF2FF; /* बाहरी डिब्बे का हल्का रंग */
    border-radius: 16px; /* बड़े गोल कोने */
    padding: 20px 15px 25px 15px; 
    margin-bottom: 40px; 
    border: 1px solid #E0E7FF; 
}

.theme-section-title {
    font-size: 18px;
    font-weight: 900;
    color: #0F172A;
    margin: 0 0 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center; /* हेडिंग और तीर को एकदम आमने-सामने (सीध में) रखता है */
}

.theme-title-arrow {
    background-color: #0F172A;
    color: #ffffff;
    width: 24px;
    height: 24px;
    /* ⭕ 50% BORDER RADIUS: यह चौकोर डिब्बे को एकदम परफेक्ट गोल (Circle) बना देता है। */
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none;
}

.theme-cards-grid {
    display: grid;
    
    /* 📱 MAGIC GRID CODE: यह लाइन अपने आप तय करती है कि डेस्कटॉप पर 3 कार्ड दिखाने हैं और मोबाइल पर एक के नीचे एक (Stack) करना है। आपको अलग से मीडिया क्वेरी (Media Query) नहीं लिखनी पड़ती! */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px; /* कार्ड्स के बीच ऊपर-नीचे की दूरी */
    padding-bottom: 5px;
}

.theme-inner-card {
    background-color: #ffffff; 
    border-radius: 12px;
    
    /* ✂️ OVERFLOW HIDDEN: अगर कार्ड के अंदर की इमेज कोनों से बाहर निकलने की कोशिश करेगी, तो यह उसे काट कर गोल डिब्बे के अंदर ही रखेगा। */
    overflow: hidden; 
    
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); 
    transition: transform 0.3s ease;
}

.theme-inner-card:hover {
    transform: translateY(-4px); 
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.1); 
}

.theme-inner-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    
    /* ⚓ FLEX 1: यह कार्ड के अंदर बचे हुए सारे स्पेस को कवर कर लेता है, 
       ताकि बटन हमेशा कार्ड के एकदम नीचे (Bottom) चिपका रहे, चाहे टेक्स्ट कम हो या ज़्यादा। */
    flex: 1;
}