/* =========================================================
   FOJI MART - MAIN STYLESHEET (CSS)
   Developed by iGrroww.in
========================================================= */

/* --- 1. मोबाइल ऐप ऑप्टिमाइज़ेशन (Native App Feel) --- */
html {
    /* मोबाइल पर बटन दबाने पर आने वाले नीले डब्बे को हटाता है */
    -webkit-tap-highlight-color: transparent; 
    scroll-behavior: smooth;
}

body {
    /* पेज को ऊपर-नीचे खींचने पर जो फालतू बाउंस होता है, उसे रोकता है */
    overscroll-behavior-y: none; 
}

/* --- 2. स्क्रॉलबार छिपाएं (लेकिन स्क्रॉल काम करेगा) --- */
.hide-scroll::-webkit-scrollbar { 
    display: none; 
}
.hide-scroll { 
    -ms-overflow-style: none;  /* Internet Explorer और Edge के लिए */
    scrollbar-width: none;     /* Firefox के लिए */
}

/* --- 3. प्रीमियम शीशे जैसा लुक (Glassmorphism) --- */
.glass-header {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); /* Apple/Safari के लिए */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* --- 4. बहुत ही हल्की और प्रीमियम परछाई (Soft Shadows) --- */
.shadow-soft { 
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); 
}

/* --- 5. कस्टम एनिमेशन और होवर इफेक्ट्स --- */

/* किसी फोटो या बैनर पर माउस ले जाने पर वो हल्का सा ज़ूम होगा */
.hover-scale { 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.hover-scale:hover { 
    transform: scale(1.03); 
}

/* "Add" बटन दबाने पर रबर की तरह दबने का इफेक्ट */
.active-press { 
    transition: transform 0.1s ease, background 0.2s ease; 
}
.active-press:active { 
    transform: scale(0.92); 
}

/* --- 6. कार्ट बाउंस एनिमेशन (जब आइटम ऐड होगा) --- */
@keyframes popBounce {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.animate-pop { 
    animation: popBounce 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* --- 7. टोस्ट नोटिफिकेशन एनिमेशन (ऊपर से आने वाला मैसेज) --- */
@keyframes slideDownToast {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes slideUpToast {
    from { opacity: 1; transform: translate(-50%, 0); }
    to { opacity: 0; transform: translate(-50%, -20px); }
}

/* मैसेज स्क्रीन पर आएगा */
.toast {
    animation: slideDownToast 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* मैसेज स्क्रीन से वापस जाएगा */
.toast-exit {
    animation: slideUpToast 0.4s ease-in forwards;
}