:root{--primary:#0077ff;--accent:#00f2fe;--bg-dark:#0a0f1d;--card-bg:rgba(255,255,255,0.05);--card-border:rgba(255,255,255,0.12);--text-main:#f0f4f8;--text-muted:#94a3b8;--radius:16px;--transition:all 0.3s ease}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',system-ui,sans-serif}
html{font-size:14px} body{background:var(--bg-dark);color:var(--text-main);overflow-x:hidden;line-height:1.5;padding-top:52px}
.glow-bg{position:fixed;width:400px;height:400px;background:radial-gradient(circle,rgba(0,119,255,0.2) 0%,rgba(0,0,0,0) 70%);top:-100px;left:-100px;z-index:-1;pointer-events:none}

/* HEADER - 52px COMPACT */
header{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:52px;background:rgba(10,15,29,0.98);backdrop-filter:blur(12px);border-bottom:1px solid #1e293b}
.brand-container{display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo-wrapper{width:40px;height:0px;overflow:visible;display:flex;align-items:center;justify-content:center}
.logo-wrapper img{width:70%;height:70% !important;object-fit:contain;transform:scale(1.9) }
.brand-info{line-height:1}
.brand-name{font-size:.95rem;font-weight:800;background:linear-gradient(45deg,#fff,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.gst-tag{font-size:.5rem;color:var(--accent);opacity:.8}
nav{display:flex;align-items:center;gap:12px;margin-left:auto;overflow-x:auto;white-space:nowrap} nav::-webkit-scrollbar{display:none}
nav a{color:var(--text-main);text-decoration:none;font-size:.7rem;padding:4px 6px;flex-shrink:0}
nav a:hover{color:var(--accent)}
#themeToggle{flex-shrink:0;margin-left:8px;height:28px;padding:0 10px;border-radius:20px;border:1px solid var(--card-border);background:rgba(255,255,255,.08);color:var(--text-main);font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* TRUST BAR */
.trust-bar{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;background:pink !important;padding:7px 2%!important;font-size:.72rem;color:#0077ff;}
.highlight-badge{background:rgba(0,242,254,.2);border:1px solid var(--accent);padding:4px 12px;border-radius:20px;font-weight:bold;color:#000}
#searchDrawer{display:none;width:100%;padding:10px 2.5%;background;pink;border-bottom:1px solid #1e293b}


/* SECTION */
.section-container{padding:2rem 3%}
.section-title{text-align:center;margin-bottom:.3rem;font-size:1.5rem}
.section-subtitle{text-align:center;color:var(--text-muted);margin-bottom:1.4rem;font-size:.8rem}

/* PRODUCT - REAL PROFESSIONAL */
.products-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.product-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:7px;display:flex;flex-direction:column;transition:var(--transition);cursor:pointer}
.product-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 18px rgba(0,119,255,.15)}
.product-img-box{width:100%;height:92px;border-radius:8px;background:rgba(255,255,255,.03);border:1px dashed var(--card-border);margin-bottom:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.product-img-box img{width:100%;height:100%;object-fit:cover}
.product-title{font-size:.72rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.product-desc{font-size:.6rem;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;flex-grow:1;margin-bottom:4px}
.product-footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.product-price{font-size:.8rem;font-weight:bold;color:var(--accent)}

.reviews-grid{display:flex;overflow-x:auto;gap:12px;padding-bottom:10px;scroll-snap-type:x mandatory}.reviews-grid::-webkit-scrollbar{display:none}
.review-badge-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:6px;min-width:170px;scroll-snap-align:start}
.review-img-holder{width:100%;height:105px;border-radius:10px;overflow:hidden;background:#000}
.review-img-holder img{width:100%;height:100%;object-fit:cover}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px}
.trust-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:16px}
.trust-card h3{font-size:1rem;color:var(--accent);margin-bottom:6px}.trust-card p{font-size:.8rem;color:var(--text-muted)}
 
/* MODAL FIX - NOT GOING DOWN */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.88);backdrop-filter:blur(10px);display:none;align-items:flex-start;justify-content:center;z-index:9999;padding:60px 12px 20px;overflow-y:auto}
.modal-overlay[style*="flex"]{display:flex!important}
.modal-box{background:#0d1527;border:1px solid var(--card-border);border-radius:18px;padding:20px;max-width:520px;width:100%;max-height:88vh;overflow-y:auto;position:relative;margin:0 auto;box-shadow:0 25px 50px rgba(0,0,0,.5)}
.modal-box.modal-lg{max-width:860px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.modal-close{position:absolute;top:10px;right:12px;width:32px;height:32px;background:#1e293b;border:1px solid #334155;color:#fff;font-size:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10}
.modal-thumbnails{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-group{margin-bottom:10px}.form-group label{display:block;font-size:.75rem;color:var(--text-muted);margin-bottom:4px}
.form-group input,#checkoutModal select,#checkoutModal input{width:100%;padding:9px;background:rgba(255,255,255,.05);border:1px solid var(--card-border);border-radius:8px;color:#fff;outline:none}
.btn-gps{width:100%;padding:9px;background:rgba(0,242,254,.15);border:1px solid var(--accent);color:var(--accent);border-radius:8px;cursor:pointer;font-size:.8rem}
#paymentSummary{background:rgba(255,255,255,.04);border:1px solid var(--card-border);border-radius:12px;padding:12px;text-align:center;margin-bottom:12px}
#payAdvanceAmtInput{width:100%;text-align:center;font-weight:800;font-size:1.3rem;background:rgba(0,119,255,.08);border:1px solid rgba(0,242,254,.25);color:var(--accent);border-radius:12px;padding:11px;margin-bottom:10px}
#upiAppBtn{width:100%;padding:13px;background:linear-gradient(90deg,var(--primary),var(--accent));color:#000;border-radius:12px;font-weight:800;border:none;cursor:pointer}
#reviewPopup{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:99999;padding:20px}#reviewPopup.active{display:flex}
#reviewPopup img{width:100%;height:85vh;object-fit:contain}
#reviewPopup .close-popup{position:absolute;top:10px;right:10px;width:36px;height:36px;background:#fff;color:#000;border-radius:50%;border:none;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
footer{text-align:center;padding:1.4rem;border-top:1px solid var(--card-border);color:var(--text-muted);font-size:.75rem}
#searchToggleBtn{position:fixed;bottom:18px;right:14px;z-index:2000;width:50px;height:50px;border-radius:50%;background:var(--accent);color:#000;border:none;font-size:20px;box-shadow:0 4px 14px rgba(0,0,0,.5);cursor:pointer;display:flex!important;align-items:center;justify-content:center}

/* LIGHT MODE - SAME AS YOURS */
body.light-mode{--bg-dark:#f8fafc;--card-bg:#fff;--card-border:#e2e8f0;--text-main:#0f172a;--text-muted:#64748b;background:#f8fafc;color:#0f172a}
body.light-mode header{background:rgba(255,255,255,.96);border-bottom:1px solid #e2e8f0;box-shadow:0 2px 12px rgba(0,0,0,.06)}
body.light-mode .brand-name{background:linear-gradient(45deg,#0f172a,var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
body.light-mode nav a{color:#334155}.body.light-mode #themeToggle{background:#f1f5f9!important;color:#0f172a!important;border-color:#e2e8f0!important}
body.light-mode .product-card,body.light-mode .trust-card,body.light-mode .review-badge-card{background:#fff;border-color:#e2e8f0;box-shadow:0 4px 12px rgba(0,0,0,.05)}
body.light-mode .modal-box{background:#fff;border-color:#e2e8f0;color:#0f172a}
body.light-mode .trust-bar{background-color: white !important;}

/* 1. Force Qty input text number to be black in light mode */
body.light-mode #productQty {
  color: #000000 !important;
}

/* 2. Force customer review author names to be white across all themes */
#custReviewList b {
  color: #ffffff !important;
  
}


/* LIGHT MODE SPECIFIC OVERRIDES FOR REVIEW SUMMARY & VARIANT BUTTONS */
body.light-mode #custReviewList > div:first-child span {
  color: #0f172a !important; /* Makes 'Avg', 'Highest', and count clearly visible on white */
}

body.light-mode #custReviewList > div:first-child b {
  color: #0077ff !important; /* Highlights numbers like 3.8 and 5.0 in clean primary blue */
}

body.light-mode button[id^="varBtn"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}

body.light-mode button[id^="varBtn"] span:first-of-type {
  color: #0f172a !important; /* Variant name dark and readable */
}

body.light-mode button[id^="varBtn"] span:last-of-type {
  color: #0077ff !important; /* Price tag in crisp blue */
}




@media(max-width:768px){
 header{height:52px;padding:0 10px}
 .logo-wrapper{width:36px;height:36px}.logo-wrapper img{transform:scale(1.7)}
 .hero{grid-template-columns:1fr;text-align:center;padding:1.2rem 3%}
 .products-grid{grid-template-columns:repeat(3,1fr);gap:8px}
 .product-img-box{height:80px}
 .modal-box.modal-lg{grid-template-columns:1fr!important}
 .form-row{grid-template-columns:1fr}
}
/* ===== OLD DAYS BOX BUTTON - PROCEED / PREPAID ===== */
.btn-submit,
#upiAppBtn {
  width: 100% !important;
  padding: 12px 10px !important;
  background: #0f172a !important;
  background-image: none !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 8px !important;
  color: var(--text-main) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

.btn-submit:hover,
#upiAppBtn:hover {
  background: #1e293b !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Light mode same box */
body.light-mode .btn-submit,
body.light-mode #upiAppBtn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
body.light-mode .btn-submit:hover,
body.light-mode #upiAppBtn:hover {
  background: #f1f5f9 !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Qty - + box also old */
#checkoutModal button[onclick*="changeQty"] {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #fff !important;
  border-radius: 6px !important;
}
/* HEADER - 2 LINES : TOP = logo + toggle, BOTTOM = nav */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  padding:6px 12px 0 12px;
  background:rgba(10,15,29,0.98); backdrop-filter:blur(12px);
  border-bottom:1px solid #1e293b;
  height:auto;
}
.brand-container{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
.logo-wrapper{width:40px; height:40px; overflow:visible; display:flex; align-items:center; justify-content:center}
.logo-wrapper img{width:100%; height:100%; object-fit:contain; transform:scale(1.9)}
.brand-name{font-size:.95rem; font-weight:800; background:linear-gradient(45deg,#fff,#00f2fe); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.gst-tag{font-size:.5rem; color:#00f2fe; opacity:.8}

#themeToggle{margin-left:auto; height:28px; padding:0 12px; border-radius:20px; border:1px solid var(--card-border); background:rgba(255,255,255,.08); color:var(--text-main); font-size:.7rem; cursor:pointer; display:flex; align-items:center; justify-content:center}

/* NAV BELOW - FULL WIDTH SECOND LINE */
nav{
  flex:0 0 100%; width:100%;
  display:flex; align-items:center; gap:14px;
  overflow-x:auto; white-space:nowrap;
  padding:8px 0 8px 0;
  border-top:1px solid rgba(255,255,255,0.06);
  margin-top:5px;
 
}
nav::-webkit-scrollbar{display:none}
nav a{color:var(--text-main); text-decoration:none; font-size:.60rem; flex-shrink:0; padding:2px 0; margin-left: 3%; }
nav a:hover{color:var(--accent)}

body{padding-top:84px !important;} /* 52 top + 32 nav = 84 */

@media(max-width:768px){
  body{padding-top:82px !important;}
}





.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: -10px;
  height: 220px;
}

#heroSlider {
  display: grid;
  grid-template-columns: 1fr; /* All slides stack in the exact same space */
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-slide {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-slide.active-slide {
  opacity: 1;
  visibility: visible;
  position: relative; /* Keeps container height stable */
}

.hero-slide img, 
.hero-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .hero {
    height: 400px; 
  }
}


#sliderDots span { transition: 0.3s; }
#sliderDots span.active { width: 10px !important; }








@keyframes rotate-forever {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.rotating-object {
  animation: rotate-forever 5s linear infinite;
}



.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  width: 100%;
}

@keyframes brandPulse {
  0% { 
    transform: scale(1); 
    opacity: 0.4; 
    filter: brightness(0.7); 
  }
  50% { 
    transform: scale(0.92); /* Subtle shrink */
    opacity: 1; 
    filter: brightness(1.3); /* Brightening effect */
  }
  100% { 
    transform: scale(1); 
    opacity: 0.4; 
    filter: brightness(0.7); 
  }
}

.logo-loader {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain;
  animation: brandPulse 2s infinite ease-in-out;
  display: block;
  margin: 0 auto;
}



/*trustbar marqure*/
@keyframes scrollLeft {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.trust-bar {
  background: #0f172a;
  padding: 12px 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.marquee-row {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.marquee-track-left {
  display: flex;
  gap: 20px;
  white-space: nowrap;
  animation: scrollLeft 15s linear infinite;
}

.marquee-track-right {
  display: flex;
  gap: 20px;
  white-space: nowrap;
  animation: scrollRight 15s linear infinite;
}


#modalMainMedia {
  transition: opacity 0.2s ease-in-out;
}
.media-fade {
  opacity: 0;
}

/* PRODUCT DETAIL MODAL DESKTOP & MOBILE GRID LAYOUT */
.modal-box.modal-lg {
  max-width: 860px !important;
  width: 100% !important;
  padding: 24px !important;
}

.product-modal-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  width: 100%;
}

.modal-media-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.modal-info-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

@media(max-width: 768px){
  .product-modal-layout {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}


/* ==========================================================
   PURE ICON-ONLY TRANSLATE BUTTON (🌐 ONLY)
   ========================================================== */

/* 1. Ensure control container keeps buttons aligned */
.header-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

/* 2. Compact Globe Button Wrapper */
#google_translate_element {
  position: relative !important;
  width: 32px !important;
  height: 28px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--card-border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

/* 3. Hide all text inside Google Translate (No "Select Language" or language names) */
.goog-te-gadget-simple span,
.goog-te-menu-value span,
.goog-te-combo option,
.goog-te-gadget {
  font-size: 0 !important;
  color: transparent !important;
}

/* Hide Google 'G' logo icon */
.goog-te-gadget-icon,
.goog-te-gadget img {
  display: none !important;
}

/* 4. Make Google's clickable overlay transparent and fit inside the 32px button */
.goog-te-gadget-simple,
.goog-te-combo {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important; /* Makes Google's text invisible while keeping click functionality */
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Light mode styling for the Globe button */
body.light-mode #google_translate_element {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

/* Kill top banner frame completely */
.goog-te-banner-frame,
.skiptranslate > iframe {
  display: none !important;
}

body {
  top: 0px !important;
}