/* ========================================================
  premium-header.css
  Final Custom Styles for STHANKAI Premium Location Header
  --------------------------------------------------------
  INLINE LOADING/SKELETON STYLES ADDED
  ======================================================== */

/* 1. कस्टम चौड़ाई यूटिलिटीज (w-3/5, w-1/5) */
.w-3\/5 { 
    width: 60%; 
} 
/* 🔥 FIX: Count Stat Container width increased to 2/5 for better spacing */
.w-2\/5 {
    width: 40%;
}
/* .w-1\/5 { width: 20%; } <- Removed since we use w-2/5 now */


/* 2. RGBA कलर यूटिलिटी (उपलब्ध टैग का हल्का बैकग्राउंड) */
.bg-brand-growth-light { 
    background-color: rgba(60, 157, 107, 0.1); 
} 

/* 3. आइकॉन का बेसिक स्टाइल (लेआउट फिक्स) */
.icon-circle-bg {
    flex-shrink: 0;
    margin-right: 0.5rem; 
}

/* 4. काउंट टैग बॉर्डर */
.count-tag {
    border: 1px solid rgba(60, 157, 107, 0.3); 
}

/* 5. एनीमेशन और ट्रांज़िशन क्लासेज़ (GPU Accelerated) */

/* Fade-in/Fade-out ट्रांज़िशन बेस */
.address-item-animated, .count-item-animated {
    transition: opacity 0.25s ease-out, transform 0.25s ease-out; 
}

/* डेटा छिपाने के लिए */
.fade-out { 
    opacity: 0;
    transform: translateY(-8px); 
}

/* डेटा दिखाने के लिए */
.slide-in { 
    opacity: 1;
    transform: translateY(0);
}

/* संख्या अपडेट होने पर पल्स इफ़ेक्ट */
@keyframes pulseOnce {
  0%, 100% { transform: scale(1); color: inherit; }
  50% { transform: scale(1.15); color: #F08527; } 
}
.pulse-once { 
    animation: pulseOnce 0.4s ease-in-out; 
    position: relative; 
    z-index: 10; 
}

/* ----------------------------------------------------
   6. 🔥 INLINE LOADING (SPINNER) & ERROR STYLES 🔥
---------------------------------------------------- */

/* डिफ़ॉल्ट रूप से सभी लोडिंग/त्रुटि आइकॉन छिपाएँ */
.stat-icon-holder .loading-spinner, 
.stat-icon-holder .error-icon {
    display: none !important;
}

/* 6.1. 🟢 SKELETON LOADER STATE (LOADING/SPINNER) 🟢 */
/* यह तब होता है जब JS total-value/available-value पर .skeleton-loader जोड़ता है */
.skeleton-loader {
    /* टेक्स्ट को छिपाता है (यानी '0' या '---' को) */
    color: transparent !important; 
    /* आप shimmer इफ़ेक्ट के लिए background भी दे सकते हैं, पर यहाँ केवल Spinner पर फोकस है */
}

/* जब .skeleton-loader सक्रिय हो, तो Spinner दिखाएँ */
/* ध्यान दें: HTML संरचना के अनुसार, .loading-spinner, .skeleton-loader के भाई-बहन (sibling) के अंदर है */
.stat-item .skeleton-loader + .stat-icon-holder .loading-spinner {
    display: inline-block !important;
    /* optional: spinner style tweak */
    opacity: 0.8;
}

/* 6.2. ❌ ERROR STATE (ICON) ❌ */
/* यह तब होता है जब JS #total-stat/#available-stat पर .has-error-icon जोड़ता है */
.stat-item.has-error-icon {
    /* error state में कोई खास container style चाहिए तो यहाँ जोड़ें */
}

/* जब .has-error-icon सक्रिय हो, तो Error Icon दिखाएँ */
.stat-item.has-error-icon .error-icon {
    display: inline-block !important;
    color: var(--brand-error, #DC2626); /* error color */
    cursor: pointer; /* reload icon effect */
}

/* 6.3. STATE CONFLICT RESOLUTION */

/* सुनिश्चित करें कि Error State में Spinner छिपा रहे */
.stat-item.has-error-icon .loading-spinner {
    display: none !important;
}

/* सुनिश्चित करें कि Error State में Error Text (N/A) विज़िबल हो (transparency हट जाए) */
.stat-item.has-error-icon #total-value,
.stat-item.has-error-icon #available-value {
    color: var(--brand-text-dark, #1F2937) !important;
    font-weight: 700;
}


/* 7. स्टेट इंडिकेटर कलर्स (Global Failure State) */

/* फेल स्टेट */
.failed-indicator {
    color: #DC2626; 
    font-weight: 600;
}
.failed-indicator .fa-exclamation-triangle {
    color: #DC2626;
}