/* styles.css */

body {
    /* padding-top: 56px; */ /* यह लाइन हटा दें या कमेंट कर दें यदि main-content का उपयोग कर रहे हैं */
    background-color: #f8f9fa;
    font-family: sans-serif;
}

.main-content {
    padding-top: 0px; /* Navbar की अनुमानित ऊंचाई + थोड़ी अतिरिक्त स्पेस, इसे एडजस्ट करें */
    /* उदाहरण: यदि navbar की ऊंचाई 56px है, तो 56px + 14px = 70px */
}



.footer {
    /* यदि आप फिक्स्ड फुटर चाहते हैं */
    /* position: fixed;
    bottom: 0;
    width: 100%; */
    padding: 1rem 0; /* थोड़ी पैडिंग */
    line-height: 60px;
    background-color: #859aaf; /* फुटर का बैकग्राउंड */
    margin-top: 30px; /* कंटेंट और फुटर के बीच स्पेस */
}

/* प्रोडक्ट कार्ड स्टाइलिंग */
.product-image {
    height: 180px; /* थोड़ा एडजस्ट किया */
    object-fit: contain;
    padding: 10px;
    margin: 0 auto; /* इमेज को कार्ड में सेंटर करने के लिए */
    display: block; /* इमेज को कार्ड में सेंटर करने के लिए */
}

.card {
    border: 1px solid #eee; /* हल्का बॉर्डर */
    border-radius: 8px; /* थोड़े गोल कोने */
    transition: box-shadow .3s; /* होवर पर शैडो के लिए ट्रांजीशन */
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,.1); /* होवर पर हल्का शैडो */
}

.card-body {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* कंटेंट को वर्टिकली फैलाएं */
    min-height: 220px; /* कार्ड बॉडी के लिए न्यूनतम ऊंचाई */
}

.card-title {
    font-size: 1rem; /* थोड़ा एडजस्ट किया */
    margin-bottom: 0.5rem;
    min-height: 40px; /* सुनिश्चित करें कि दो लाइन का टाइटल फिट हो सके */
}

.card-title a {
    color: #212529; /* गहरा ग्रे */
    font-weight: 500; /* थोड़ा कम बोल्ड */
    text-decoration: none;
}

.card-title a:hover {
    color: #007bff; /* Bootstrap प्राइमरी ब्लू */
}

.product-description {
    font-size: 0.85em; /* थोड़ा छोटा */
    color: #6c757d; /* मध्यम ग्रे */
    min-height: 3.5em; /* लगभग 2-3 लाइन का विवरण */
    margin-bottom: 0.75rem;
    overflow: hidden; /* यदि विवरण लंबा है तो उसे छिपाएं */
    text-overflow: ellipsis; /* ... दिखाएं */
    /* आप display -webkit-box के साथ मल्टी-लाइन इलिप्सिस भी कर सकते हैं, लेकिन वह थोड़ा जटिल है */
}

.price-section {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column; /* कीमतों को एक के नीचे एक रखें */
    align-items: center;
}

.price-line {
    display: flex;
    align-items: baseline; /* कीमतों को बेसलाइन पर अलाइन करें */
    justify-content: center;
    flex-wrap: wrap; /* यदि जगह कम हो तो रैप करें */
}

.original-price {
    text-decoration: line-through;
    color: #6c757d; /* मध्यम ग्रे */
    font-size: 0.9em;
    margin-right: 8px;
}

.current-price {
    font-weight: bold;
    color: #dc3545; /* Bootstrap डेंजर रेड */
    font-size: 1.25em; /* थोड़ा बड़ा */
}

.discount-badge {
    background-color: #28a745; /* Bootstrap सक्सेस ग्रीन */
    color: white;
    padding: 0.25em 0.5em;
    border-radius: 0.25rem;
    font-size: 0.75em;
    margin-left: 8px;
    font-weight: bold;
}

.special-tag-badge { /* .special_tag के लिए */
    font-size: 0.8em;
    font-weight: bold;
    color: #17a2b8; /* Bootstrap इन्फो सियान */
    margin-bottom: 0.5rem;
}

.card-footer {
    background-color: transparent; /* कार्ड फुटर का बैकग्राउंड ट्रांसपेरेंट */
    border-top: none; /* ऊपर का बॉर्डर हटाएं */
    font-size: 0.8em;
}

.btn-block {
    font-size: 0.9rem; /* बटन का टेक्स्ट साइज़ */
    padding: 0.5rem; /* बटन की पैडिंग */
}

.btn-danger { /* BUY NOW बटन */
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-secondary { /* ADD TO CART बटन */
    color: #6c757d;
    border-color: #6c757d;
}
.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Navbar के लिए थोड़ी स्टाइल (यदि आवश्यक हो) */
.navbar-brand {
    font-weight: bold;
}

nav.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}