/* Water Tank Shop — supplementary styles (Tailwind handles utilities) */

:root {
  --ink: #0f172a;
  --amber: #62beb2;
}

/* Smooth scrolling and viewport safety */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden; /* Prevents unwanted horizontal mobile scrolling */
}

/* Dimmed hero background image overrides */
.hero-bg {
  background:
    linear-gradient(rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.92)),
    url('/static/images/bg-tanks.jpg') center / cover no-repeat;
}

.section-bg {
  background:
    linear-gradient(rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.96)),
    url('/static/images/bg-tanks.jpg') center / cover no-repeat;
}

/* Glassmorphism utility */
.glass {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.card-hover { 
  transition: transform .2s ease, box-shadow .2s ease; 
}
.card-hover:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35); 
}

/* Custom Webkit Scrollbars for Cart Drawer */
#cart-items {
  -webkit-overflow-scrolling: touch;
}

#cart-items::-webkit-scrollbar {
  width: 5px;
}

#cart-items::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

#cart-items::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
}

#cart-items::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.6);
}

/* Pulse animation for floating WhatsApp button */
@keyframes softpulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); 
  }
  50% { 
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); 
  }
}

.fab-pulse { 
  animation: softpulse 2.4s infinite; 
}

/* Pulse animation for floating Red Phone button */
@keyframes phonepulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); 
  }
  50% { 
    box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); 
  }
}

.phone-pulse { 
  animation: phonepulse 2.8s infinite; 
}

/* Universal Product Image Fit Fix (High specificity overrides Tailwind) */
img,
img.w-full,
.glass img,
.product-card img,
.card-hover img,
div > img {
  width: 100% !important;
  max-height: 220px !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0.5rem !important;
  background-color: rgba(15, 23, 42, 0.3) !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

/* Mobile Responsive Optimizations */
@media (max-width: 640px) {
  .hero-bg, .section-bg { 
    background-attachment: scroll !important; 
  }
  
  /* Prevents text from pushing past phone boundaries */
  h1, h2, h3, p {
    word-break: break-word;
  }

  img,
  img.w-full,
  .glass img,
  .product-card img,
  .card-hover img,
  div > img {
    max-height: 180px !important; /* Compact height on mobile for clean scrolling */
  }
}