/* Custom styles for Moda Elegante
	 This file provides small helpers on top of Tailwind and can be customized.
*/

/* Ensure responsive layout and viewport optimization */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: clamp(14px, 2vw, 16px);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* Ensure images cover their container */
.img-cover { object-fit: cover; width: 100%; height: 100%; }

/* WhatsApp button subtle shadow and focus */
.whatsapp-btn { box-shadow: 0 6px 18px rgba(37,211,102,0.12); }
.whatsapp-btn:focus { outline: 3px solid rgba(37,211,102,0.18); outline-offset: 2px; }

/* Active filter visual (used by JS) */
.filter-active { box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }

/* Mobile responsiveness */
@media (max-width: 640px) {
  .grid {
    gap: 0.75rem;
  }
  
  main {
    padding: 1rem;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  .max-w-md {
    width: 90vw !important;
    max-width: 90vw !important;
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  .grid {
    gap: 1.25rem;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .grid {
    gap: 1.5rem;
  }
  
  header .logo-text { display: block; }
}

/* Improve button gradient fallback */
.btn-gradient { background-image: linear-gradient(90deg,#3b82f6 0%, #2563eb 100%); }

/* Reduce map iframe border on small screens */
iframe { border: 0; }

/* Garantir padding adequado em todos os breakpoints */
@media (max-width: 640px) {
  header, main, footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Scroll-to-top button styles */
.scroll-top-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(15,23,42,0.15);
  backdrop-filter: blur(4px);
}
.scroll-top-btn:focus { outline: 3px solid rgba(59,130,246,0.18); outline-offset: 3px; }
.scroll-top-hidden { opacity: 0; transform: translateY(10px) scale(0.95); pointer-events: none; }
.scroll-top-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.scroll-top-transition { transition: transform 180ms ease, opacity 180ms ease; }

/* ============================================================================
   Otimização de Imagens - Lazy Loading & Progressive Rendering
   ============================================================================ */

/* Placeholder para imagens a carregar */
img[data-src] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  min-height: 200px;
}

/* Animação shimmer/skeleton loading */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Estado de carregamento */
.img-loading {
  opacity: 0.7;
  filter: blur(4px);
  transition: opacity 200ms ease, filter 200ms ease;
}

/* Estado de erro */
.img-error {
  background-color: #fee2e2;
  opacity: 0.6;
}

/* Estado carregado com blur-up effect */
.img-loaded {
  opacity: 1;
  filter: blur(0);
  animation: blurFadeIn 300ms ease-out;
}

/* Animação blur-up (progredindo de imagem borrada para nítida) */
@keyframes blurFadeIn {
  0% {
    opacity: 0;
    filter: blur(8px);
  }
  50% {
    opacity: 0.8;
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* Garantir aspect ratio para evitar CLS (Cumulative Layout Shift) */
.product-image-container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
}

.product-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Imagens responsivas */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Otimizar renderização em mobile */
@media (max-width: 640px) {
  img[data-src] {
    min-height: 150px;
  }
  
  .img-loading {
    filter: blur(2px);
  }
}

/* Reduzir animação em dispositivos com preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  img,
  .img-loading,
  .img-loaded {
    animation: none !important;
    transition: none !important;
  }
}