/* ZipKart Custom Styles & Animations */

/* Custom Scrollbar hide utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Category Pill Styling */
.category-pill.active div {
  background-color: #fef08a !important;
  border-color: #eab308 !important;
  color: #854d0e !important;
}

.category-pill.active .pill-indicator {
  display: block !important;
}

/* Product Card & Fixed Uniform Image Styling */
.product-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.1);
}

/* Strictly Uniform 1:1 Auto-Adjusting Product Image Box (Flipkart Style) */
.product-image-box {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.product-image-box img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
  transition: transform 0.25s ease-in-out !important;
}

.product-card:hover .product-image-box img {
  transform: scale(1.05) !important;
}

/* Wide Web View Mode for Desktop Toggle */
.wide-mode {
  max-width: 1024px !important;
  border-radius: 20px !important;
  border: 1px solid #334155 !important;
}

.wide-mode #productGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.wide-mode #simulatedStatusBar {
  display: none !important;
}

/* Mobile App Frame & Checkout Viewport Lock (Prevents any blank overflow scrolling) */
@media (max-width: 640px) {
  #appContainer {
    height: 100dvh !important;
    max-height: 100dvh !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  #checkoutModal {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100vw !important;
    z-index: 60 !important;
    overflow: hidden !important;
  }

  #productDetailModal {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100vw !important;
    z-index: 50 !important;
    overflow: hidden !important;
  }
}

/* Ensure Checkout Modal and its Steps NEVER overflow with blank space */
#checkoutModal {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

#checkoutStep1,
#checkoutStep3 {
  height: 100%;
  max-height: 100%;
}

#checkoutStep2 {
  height: 100%;
  max-height: 100%;
}

/* Coupon Modal Animation */
@keyframes couponPop {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  70% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-enter {
  animation: couponPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Claimed green banner slide */
@keyframes slideDownBanner {
  0% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    max-height: 80px;
    opacity: 1;
    transform: translateY(0);
  }
}

.banner-visible {
  display: flex !important;
  animation: slideDownBanner 0.4s ease-out forwards;
}

/* Glowing active badge */
@keyframes greenPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 137, 62, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(16, 137, 62, 0);
  }
}

.active-pulse {
  animation: greenPulse 2s infinite;
}

/* Wheel Rotation styling */
.spinning {
  transition: transform 3.5s cubic-bezier(0.15, 0.9, 0.2, 1);
}

/* Custom shimmer loading or offer tag */
.shimmer-badge {
  background: linear-gradient(90deg, #ff9f00 0%, #ffe500 50%, #ff9f00 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ================= THEMES ENGINE ================= */
/* 1. Flipkart Blue (Default) */
body.theme-flipkart-blue {
  --primary: #2874f0;
  --secondary: #fb641b;
}

/* 2. Amazon Festive Gold */
body.theme-amazon-gold #appContainer {
  background-color: #eaeded !important;
}
body.theme-amazon-gold .bg-zipBlue {
  background-color: #131921 !important;
}
body.theme-amazon-gold .bg-gradient-to-r.from-\[\#2874f0\] {
  background: linear-gradient(to right, #131921, #232f3e) !important;
}
body.theme-amazon-gold .text-amber-500, body.theme-amazon-gold .text-orange-600 {
  color: #ff9900 !important;
}
body.theme-amazon-gold .bg-gradient-to-r.from-\[\#fb641b\] {
  background: linear-gradient(to right, #ff9900, #e68a00) !important;
}

/* 3. Zepto / Quick Commerce Neon */
body.theme-zepto-neon #appContainer {
  background-color: #f0fdf4 !important;
}
body.theme-zepto-neon .bg-zipBlue {
  background-color: #0f172a !important;
}
body.theme-zepto-neon .bg-gradient-to-r.from-\[\#2874f0\] {
  background: linear-gradient(to right, #0f172a, #1e293b) !important;
}
body.theme-zepto-neon .bg-gradient-to-r.from-\[\#fb641b\] {
  background: linear-gradient(to right, #10b981, #059669) !important;
}
body.theme-zepto-neon .text-orange-600 {
  color: #059669 !important;
}

/* 4. Midnight Luxury Dark */
body.theme-midnight-luxury #appContainer {
  background-color: #18181b !important;
  color: #f4f4f5 !important;
}
body.theme-midnight-luxury .bg-white {
  background-color: #27272a !important;
  color: #f4f4f5 !important;
  border-color: #3f3f46 !important;
}
body.theme-midnight-luxury h1, 
body.theme-midnight-luxury h2, 
body.theme-midnight-luxury h3, 
body.theme-midnight-luxury h4 {
  color: #ffffff !important;
}
body.theme-midnight-luxury .bg-zipBlue {
  background-color: #09090b !important;
}
body.theme-midnight-luxury .bg-gradient-to-r.from-\[\#2874f0\] {
  background: linear-gradient(to right, #09090b, #18181b) !important;
}
body.theme-midnight-luxury .bg-gradient-to-r.from-\[\#fb641b\] {
  background: linear-gradient(to right, #e11d48, #be123c) !important;
}

/* 5. Royal Purple (Diwali) */
body.theme-royal-purple #appContainer {
  background-color: #faf5ff !important;
}
body.theme-royal-purple .bg-zipBlue {
  background-color: #581c87 !important;
}
body.theme-royal-purple .bg-gradient-to-r.from-\[\#2874f0\] {
  background: linear-gradient(to right, #581c87, #6b21a8) !important;
}
body.theme-royal-purple .bg-gradient-to-r.from-\[\#fb641b\] {
  background: linear-gradient(to right, #f59e0b, #d97706) !important;
}

/* ================= PRODUCT DETAIL GALLERY SLIDER & 4 BOLD DOTS ================= */
.product-gallery-wrapper {
  width: 100% !important;
  height: 380px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 1rem !important;
  background-color: #f8f9fa !important;
  touch-action: pan-y !important;
}

@media (min-width: 640px) {
  .product-gallery-wrapper {
    height: 420px !important;
  }
}

.product-gallery-track {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: transform;
}

.product-gallery-slide {
  width: 100% !important;
  height: 100% !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffffff !important;
  padding: 12px !important;
}

.product-gallery-slide img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 4 Bold Carousel Dots */
.product-gallery-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding: 4px 0 !important;
}

.product-gallery-dot {
  height: 10px !important;
  width: 10px !important;
  border-radius: 9999px !important;
  background-color: #cbd5e1 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  outline: none !important;
}

.product-gallery-dot:hover {
  background-color: #94a3b8 !important;
}

.product-gallery-dot.active {
  width: 28px !important;
  height: 10px !important;
  background-color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25) !important;
}

/* ================= 3-STEP CHECKOUT & REALISTIC TRUCK ANIMATION ================= */
.delivery-stage-box {
  position: relative;
  width: 100%;
  height: 68px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #fef9e7 0%, #fef3c7 60%, #fed7aa 100%);
  border: 1.5px solid #fde68a;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

/* Road surface */
.road-lane-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18px;
  background-color: #334155;
  border-top: 2px solid #475569;
}

.road-dashed-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(90deg, #ffffff 0px, #ffffff 12px, transparent 12px, transparent 24px);
  background-size: 24px 2px;
  animation: roadLaneMove 4.8s linear infinite;
}

@keyframes roadLaneMove {
  0% { background-position-x: 0px; }
  30% { background-position-x: 0px; }
  85% { background-position-x: -260px; }
  100% { background-position-x: -260px; }
}

/* Parcel loading animation (Drops into truck cargo on left) */
.animated-loading-parcel {
  position: absolute;
  z-index: 25;
  animation: parcelLoadIntoTruck 4.8s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes parcelLoadIntoTruck {
  0% {
    top: 4px;
    left: 12px;
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  8% {
    top: 6px;
    left: 20px;
    transform: scale(1) translateY(0);
  }
  16% {
    top: 14px;
    left: 48px;
    opacity: 1;
    transform: scale(0.95) translateY(2px);
  }
  20% {
    top: 18px;
    left: 54px;
    opacity: 0;
    transform: scale(0.4) translateY(6px);
  }
  21% {
    opacity: 0;
  }
  92% {
    top: 4px;
    left: 12px;
    opacity: 0;
    transform: scale(1);
  }
  96% {
    opacity: 1;
  }
  100% {
    top: 4px;
    left: 12px;
    opacity: 1;
  }
}

/* Loaded status badge */
.loaded-check-badge {
  position: absolute;
  top: 6px;
  left: 54px;
  z-index: 30;
  animation: badgePopUp 4.8s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes badgePopUp {
  0%, 18% {
    opacity: 0;
    transform: translateY(4px) scale(0.8);
  }
  22% {
    opacity: 1;
    transform: translateY(-2px) scale(1.05);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
  36% {
    opacity: 0;
    transform: translateY(-8px) scale(0.85);
  }
  100% {
    opacity: 0;
  }
}

/* Truck Unit & Cycle */
.truck-unit-carrier {
  position: absolute;
  bottom: 4px;
  left: 0;
  z-index: 20;
  animation: truckDriveCycle 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
}

@keyframes truckDriveCycle {
  0%, 20% {
    transform: translateX(20px);
  }
  22% {
    transform: translateX(20px) scale(1.02, 0.95);
  }
  26% {
    transform: translateX(20px) scale(1, 1);
  }
  30% {
    transform: translateX(22px);
  }
  42% {
    transform: translateX(80px);
  }
  65% {
    transform: translateX(200px);
  }
  84% {
    transform: translateX(330px);
    opacity: 1;
  }
  88% {
    transform: translateX(410px);
    opacity: 0;
  }
  92% {
    transform: translateX(-60px);
    opacity: 0;
  }
  97% {
    transform: translateX(20px);
    opacity: 1;
  }
  100% {
    transform: translateX(20px);
    opacity: 1;
  }
}

/* Spinning wheels during driving */
.truck-wheel-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: wheelDriveSpin 4.8s linear infinite;
}

@keyframes wheelDriveSpin {
  0%, 30% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(1800deg);
  }
  100% {
    transform: rotate(1800deg);
  }
}

/* Headlight beam */
.truck-headlight-beam {
  animation: headlightGlow 4.8s ease-in-out infinite;
}

@keyframes headlightGlow {
  0%, 22% {
    opacity: 0.4;
  }
  24%, 85% {
    opacity: 1;
    filter: drop-shadow(4px 0 6px #facc15);
  }
  88%, 100% {
    opacity: 0.4;
  }
}

/* Exhaust smoke */
.exhaust-smoke-puff {
  position: absolute;
  left: 6px;
  bottom: 12px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #94a3b8;
  animation: smokePuff 4.8s ease-out infinite;
  pointer-events: none;
}

@keyframes smokePuff {
  0%, 28% {
    opacity: 0;
    transform: scale(0);
  }
  31% {
    opacity: 0.8;
    transform: scale(1) translate(-6px, -3px);
  }
  36% {
    opacity: 0;
    transform: scale(2) translate(-16px, -8px);
  }
  100% {
    opacity: 0;
  }
}

@keyframes slideUpModal {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.animate-slideUp {
  animation: slideUpModal 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stepper Bar */
.checkout-step-circle {
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  transition: all 0.2s ease;
}

.checkout-step-circle.active {
  background-color: #2874f0;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(40, 116, 240, 0.2);
}

.checkout-step-circle.completed {
  background-color: #2874f0;
  color: #ffffff;
}

.checkout-step-circle.pending {
  background-color: #ffffff;
  color: #94a3b8;
  border: 1.5px solid #cbd5e1;
}

/* Yellow Action Buttons */
.btn-flipkart-yellow {
  background-color: #ffc200 !important;
  color: #111827 !important;
  font-weight: 900 !important;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.btn-flipkart-yellow:hover {
  filter: brightness(0.97);
}

.btn-flipkart-yellow:active {
  transform: scale(0.99);
}

/* ================= ORDER SUCCESS ANIMATED CHECKMARK & CELEBRATION ================= */
@keyframes drawSuccessCircle {
  0% { stroke-dashoffset: 230; }
  100% { stroke-dashoffset: 0; }
}

@keyframes drawSuccessCheck {
  0% { stroke-dashoffset: 60; }
  100% { stroke-dashoffset: 0; }
}

.animate-draw-circle {
  stroke-dasharray: 230;
  stroke-dashoffset: 230;
  animation: drawSuccessCircle 0.55s ease-out forwards;
}

.animate-draw-check {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: drawSuccessCheck 0.45s 0.35s ease-out forwards;
}

/* SuperCoin bounce & shine */
@keyframes coinGlowPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px #fbbf24); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 8px #f59e0b); }
}

.supercoin-reward-card {
  animation: coinGlowPulse 2.5s ease-in-out infinite;
}

/* Auto-redirect progress bar */
@keyframes redirectProgressBarAnim {
  0% { width: 100%; }
  100% { width: 0%; }
}

.redirect-progress-bar {
  animation: redirectProgressBarAnim 4s linear forwards;
}

/* Payment Radio Card selection active state */
.payment-radio-card.active {
  border-color: #2563eb !important;
  background-color: #eff6ff !important;
}

.payment-radio-circle.checked {
  border-color: #2563eb !important;
}

/* ================= HIGH-TECH ERROR 505 SCREEN & ANIMATIONS ================= */
.cyber-grid-bg {
  background-color: #060913;
  background-image: 
    radial-gradient(ellipse at 50% 20%, rgba(37, 99, 235, 0.18) 0%, rgba(6, 9, 19, 0.98) 75%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
}

@keyframes glitch505 {
  0% {
    transform: translate(0);
    text-shadow: -2px 0 #06b6d4, 2px 0 #ef4444;
  }
  15% {
    transform: translate(-3px, 1.5px);
    text-shadow: 3px -1.5px #06b6d4, -3px 1.5px #ef4444;
  }
  30% {
    transform: translate(2px, -2px);
    text-shadow: -2px 2px #06b6d4, 2px -2px #ef4444;
  }
  45% {
    transform: translate(-1.5px, -1px);
    text-shadow: 2px 1px #06b6d4, -2px -1px #ef4444;
  }
  60% {
    transform: translate(2px, 1.5px);
    text-shadow: -3px 0 #06b6d4, 3px 0 #ef4444;
  }
  75% {
    transform: translate(0, -1.5px);
    text-shadow: 2px -1px #06b6d4, -2px 1px #ef4444;
  }
  90% {
    transform: translate(-2px, 1px);
    text-shadow: -2px -1px #06b6d4, 2px 1px #ef4444;
  }
  100% {
    transform: translate(0);
    text-shadow: -2px 0 #06b6d4, 2px 0 #ef4444;
  }
}

.glitch-text-505 {
  animation: glitch505 2.2s infinite steps(2, start);
  will-change: transform, text-shadow;
}

@keyframes radarWave {
  0% {
    transform: scale(0.4);
    opacity: 0.85;
  }
  50% {
    opacity: 0.45;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

.radar-wave-1 {
  animation: radarWave 3s cubic-bezier(0.1, 0.7, 0.1, 1) infinite;
}

.radar-wave-2 {
  animation: radarWave 3s cubic-bezier(0.1, 0.7, 0.1, 1) 1s infinite;
}

.radar-wave-3 {
  animation: radarWave 3s cubic-bezier(0.1, 0.7, 0.1, 1) 2s infinite;
}

@keyframes scanlineAnim {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(1200%); }
}

.cyber-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(to bottom, transparent, rgba(56, 189, 248, 0.25), transparent);
  animation: scanlineAnim 7s linear infinite;
  pointer-events: none;
}

@keyframes terminalCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.terminal-cursor {
  animation: terminalCursor 0.9s infinite;
}

/* Retro 505 Computer Illustration Animation */
@keyframes retroFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-9px);
  }
}

@keyframes shadowPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.35;
  }
  50% {
    transform: scale(0.88);
    opacity: 0.16;
  }
}

.retro-505-container {
  animation: retroFloat 3.4s ease-in-out infinite;
  will-change: transform;
}

.retro-505-img {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.07));
}

.retro-505-shadow {
  width: 170px;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.32) 0%, transparent 72%);
  border-radius: 50%;
  margin-top: -12px;
  animation: shadowPulse 3.4s ease-in-out infinite;
}