/* 1. Basic Settings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background-color: #f4f4f4;
}

/* 2. Header Section with Background Image */
.top-header {
    width: 100%;
    height: 30vh; /* मोबाइल स्क्रीन के हिसाब से ऑटो सेट */
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("img.png");
    background-size: cover;
    background-position: center;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}



.main-logo {
    font-size: 2.5rem;
    font-weight: bold;
    color: #FFD700; /* गोल्डन पीला रंग */
    text-shadow: 0.125rem 0.125rem .25rem rgba(0,0,0,0.5);
}

.tagline {
    font-size: 1rem;
    margin-bottom: 1.25rem;
}


/* 3. Location Bar Style */
.location-bar {
    background: white;
    width: 100%;
    border-radius: 0.5rem;
    padding: 0.625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    margin-bottom: 0.9375rem;
}
.log-text{:#333;}
.change-btn {
    background: none;
    border: 0.062rem solid #ccc;
    color: #333;
    padding: 0.3125rem 0.625rem;
    font-weight: bold;
    cursor: pointer;
}
/* --- Sasta Store Location & Blur System --- */

/* जब लोकेशन बंद हो तो स्क्रीन धुंधली करने के लिए */
.app-blur {
    filter: blur(0.625rem); /* धुंधलापन की ताक़त */
    pointer-events: none; /* पीछे क्लिक न हो पाए */
    transition: filter 0.5s ease;
}

/* लोकेशन बार हमेशा साफ़ और ऊपर दिखेगा */
.location-bar {
    position: relative;
    z-index: 10001; /* सबसे ऊपर */
    transition: all 0.5s ease;
}

/* लोकेशन हाईलाइट एनीमेशन */
@keyframes locationPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.4); transform: scale(1); }
    50% { box-shadow: 0 0 0 1rem rgba(255, 82, 82, 0); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); transform: scale(1); }
}


/* 4. Search Bar Style */
.search-container {
    background: white;
    width: 100%;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    position:sticky;
    top: 0;
    z-index: 1000;
    padding: 0.625rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
}

.search-container i {
    position: absolute;
    right: 0.5rem; /* आइकॉन को थोड़ा दाएं खिसकाने के लिए */
    font-size:1.3rem;
    color: #888; /* आइकॉन का रंग हल्का ग्रे */
    
}

.search-container input {
    padding-right: 2.17rem; /* ताकि टेक्स्ट आइकॉन के ऊपर न चढ़े */
    width: 100%;
}

.search-container input {
    border: none;
    outline: none;
    flex: 1;
    padding-left: 0.625rem;
}

.filter-icon {
    border: none;
    padding: 0.5rem;
    border-radius: 0.312rem;
    color: black;
}

/* 5. Categories Grid */
/* कैटेगरी बार का नया स्क्रॉलिंग स्टाइल */
.categories {
    display: flex; /* ग्रिड को फ्लेक्स बनाया */
    overflow-x: auto; /* यह जादू है: ऑटो-स्क्रॉल चालू */
    padding: 0.625rem;
    gap: 1rem; /* आइटम के बीच जगह */
    margin-top: -1.875rem; 
    white-space: nowrap; /* एक लाइन में रखने के लिए */
    -webkit-overflow-scrolling: touch; /* मोबाइल पर स्मूथ स्क्रॉल के लिए */
}

/* स्क्रॉल बार छुपाने के लिए */
.categories::-webkit-scrollbar {
    display: none;
}

.category-item {
    flex: 0 0 auto; /* बहुत जरूरी: आइटम को सिकुड़ने से रोकेगा */
    width: 5rem; /* फिक्स चौड़ाई */
    height: 4.374rem; /* फिक्स ऊँचाई */
    background: white;
    padding: 0.312rem;
    border-radius: 0.625rem;
    text-align: center;
    font-size: 0.7rem;
    box-shadow: 0 0.125rem 0.312rem rgba(0,0,0,0.1);
    font-weight: bold;
}

.icon-box {
    font-size: 1.5rem;
    margin-bottom: 0.312rem;
    color: #e67e22;
}
.icon-box img {
    height: 2rem; /* आप वैल्यू कम ज़्यादा कर सकते हैं, जैसे 2rem or 4rem */
    width: auto; /* इससे फ़ोटो का अनुपात बना रहेगा */
}
/* लिस्ट का कंटेनर */
.product-list {
    display: grid;
    grid-template-columns:repeat(2,1fr) ;
    gap: 0.75rem;
    padding: .1rem;
}



/* मुख्य कार्ड स्टाइल (Flexbox का जादू यहाँ है) */
.product-card {
    display: grid; /* इससे फोटो और टेक्स्ट अगल-बगल आएंगे */
    background: #fff;
    border-radius: 0.625rem;
    padding: 0.5rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
    align-items: center;
    justify-content: center;
    border: 0.062rem solid #eee;
}

/* हेडर स्टाइल */
.sasta-header {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.2rem;
    border-bottom: 0.062rem solid #f0f0f0;
}

.back-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 0.062rem solid #ccc;
    background: white;
    font-size: 1.2rem;
}

.sasta-logo {
    flex: 1;
    text-align: center;
    color: #e61e2b; /* SASTA STORE RED */
    font-size: 2.4rem;
    font-weight: 900;
    margin: 0;
}

/* बॉडी स्टाइल */
.sasta-body {
    flex: 1;
    padding: 2rem;
}

.watt-text {
    font-size: 3.5rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 1rem;
}

#user-msg {
    width: 100%;
    height: 60%;
    border: none;
    outline: none;
    font-size: 1.4rem;
    resize: none;
}

/* सेंड पट्टी (Footer) */
.sasta-footer {
    padding: 1rem;
    background: #f1f3f9;
}

.footer-box {
    background: white;
    padding: 0.8rem 1.2rem;
    border-radius: 0.5rem;
    border: 0.062rem solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-txt {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
}


/* फोटो की सेटिंग (Left Side) */
.product-card img {
    width: 5.312rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.5rem;
      /* margin-right: 0.937rem; /* फोटो और नाम के बीच की दूरी */
}

/* टेक्स्ट की सेटिंग (Right Side) */
.product-info {
    display: flex;
    flex-direction: column;
    flex: 1; /* बची हुई पूरी जगह यह लेगा */
}

.product-name {
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    color: #333;
}

.product-price {
    font-size: 0.937rem;
    color: #d35400;
    font-weight: 600;
    margin: 0.25rem 0;
}

.store-name {
    font-size: 0.8155rem;
    color: #777;
}

.distance {
    font-size: 0.75rem;
    color: #27ae60;
    margin-bottom: 0.5rem;
}

/* ब्लैक मैप बटन */
.map-btn {
    background: #3477eb;
    color: #fff;
    text-decoration: none;
    padding: 0.375rem 0.937rem;
    border-radius: 0.312rem;
    font-size: 0.75rem;
    width: fit-content;
    text-align: center;
}



/* 7. Bottom Navigation */
.bottom-nav {
    position: fixed;
    justify-content: space-between;
    bottom: 0;
    height: 4rem;
    width: 100%;
    display: flex;
    padding: 0.625rem;
    gap: 0.312rem;
    background: white;
}

.nav-btn {
    flex-grow: 1;
    border: none;
    padding: 1.5rem;
    border-radius: 0.312rem;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.312rem;
    margin: 0.1rem;
}

.compare { background: #1b5e20; }
.map { background: #0277bd; }
.call { background: #ef6c00; }

/* लिस्ट बटन की स्टाइल */
.list-btn {
    border: none;
    background: #f1f1f1;
    padding: 0.5rwm;
    border-radius: 0.312rem;
    color: #6c5ce7;
    margin-left: 0.312rem;
    cursor: pointer;
}

/* सफेद पर्दे की स्टाइल */
#safed-parda {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9999; /* सबसे ऊपर */
}
/* होम पेज के ADD बटन का रंग पक्का करने के लिए */
.nav-btn.add-btn, .nav-btn.active-blue {
    background-color: #0277bd !important; /* नीला रंग */
    color: white !important;
    border: none;
    font-weight: bold;
}

/* बटन दबाने पर थोड़ा गहरा हो जाए */
.nav-btn.add-btn:active {
    background-color: #0277bd !important;
}

/* ==========================================
   ✨ सस्ता स्टोर स्पेशल लोडिंग स्केलेटन स्टाइल 
   ========================================== */

/* १. स्केलेटन वाले कार्ड का बाहरी हिस्सा */
.skeleton-card {
    background: #ffffff !important;
    border: 0.062rem solid #e0e0e0;
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* २. फोटो की जगह जो खाली बॉक्स चमकेगा */
.skeleton-img {
    width: 100%;
    height: 8.75rem;
    background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
    background-size: 200% 100%;
    animation: sastaShimmer 1.5s infinite linear;
    border-radius: 0.375rem;
}

/* ३. टेक्स्ट (नाम, दाम) की जगह चमकने वाली पट्टियां */
.skeleton-text {
    background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
    background-size: 200% 100%;
    animation: sastaShimmer 1.5s infinite linear;
    border-radius: 0.25rem;
}

/* ४. नाम, प्राइस और दुकान के लिए अलग-अलग साइज */
.skeleton-title { 
    width: 85%; 
    height: 1rem; 
    margin-top: 0.5rem; 
}

.skeleton-price { 
    width: 45%; 
    height: 0.875rem; 
    margin-top: 0.375rem;
}

.skeleton-store { 
    width: 65%; 
    height: 0.75rem; 
    margin-top: 0.375rem;
}

/* ५. फ्लिपकार्ट जैसी चमक (Animation) पैदा करने का लॉजिक */
@keyframes sastaShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}