/* ===============================
   Custom UI – Góngora Joyas
   =============================== */

/* --- 1) Flash messages --- */
@keyframes fade-in-out {
  0%   { opacity: 0; transform: translateY(-6px); }
  10%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}
.animate-fade-in-out {
  animation: fade-in-out 4.2s ease-in-out both;
}

/* Helpers opcionales */
.visible   { visibility: visible; }
.invisible { visibility: hidden; }

/* --- 2) Header fijo: padding global para que el contenido no quede bajo el header --- */
/* Alturas aproximadas: 64px navbar principal + 48px menú secundario en desktop */
:root {
  --header-main-h: 64px;
  --header-sub-h: 48px; /* opcional */
}

/* Solo header principal (navbar fijo), sin sumar submenú */
.has-fixed-header {
  padding-top: var(--header-main-h);
}

/* Si quieres incluir el submenú, ajusta solo si es necesario */
@media (min-width: 768px) {
  .has-fixed-header {
    padding-top: calc(var(--header-main-h) + var(--header-sub-h));
  } 
}

/* --- 3) Cart Overlay / Sidebar (anclado al botón) --- */
/* Backdrop con fade cuando el overlay está "open" */
#cartBackdrop { opacity: 0; transition: opacity .24s ease; }
#cartOverlay.open #cartBackdrop { opacity: 1; }

/* Panel anclado por variables (posicionado por JS con --cart-top/--cart-right) */
#cartSidebar{
  top: var(--cart-top, 72px);
  right: var(--cart-right, 16px);
  transform: translateY(-6px) scale(.97);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .22s;
}
#cartOverlay.open #cartSidebar{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Respeto a usuarios con reduced motion */
@media (prefers-reduced-motion: reduce){
  #cartSidebar,
  #cartBackdrop{
    transition: none !important;
  }
}

/* --- 4) Menús secundarios (hover suave + accesibilidad) --- */
/* Estado base: ya viene con clases Tailwind (opacity-0, pointer-events-none, etc.)
   Complementamos con un movimiento sutil */
.group[data-menu] [role="menu"]{
  transform: translateY(0.5rem) scale(.97);
  transition:
    opacity .15s ease,
    transform .15s ease;
}
.group[data-menu]:hover [role="menu"],
.group[data-menu] [role="menu"].translate-y-0,
.group[data-menu] [role="menu"].scale-100{
  transform: translateY(0) scale(1);
}

/* --- 5) Dropdown de usuario: micro ajuste de transición --- */
#userDropdown{
  transition:
    opacity .2s ease,
    transform .2s ease;
}

/* --- 6) Focus accesible y consistente --- */
:where(a, button, [role="button"], [tabindex]) :focus { outline: none; }
:where(a, button, [role="button"], [tabindex]):focus-visible{
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 2px;
}
header :where(a, button, [role="button"], [tabindex]):focus-visible{
  outline-color: rgba(255,255,255,.9);
}
main :where(a, button, [role="button"], [tabindex]):focus-visible{
  outline-color: #5e0013;
}

/* --- 7) Botón WhatsApp (Tailwind no tiene w-18/h-18) --- */
#whatsappButton{
  width: 72px;   /* 18 * 4px */
  height: 72px;  /* 18 * 4px */
  border-radius: 9999px;
}

/* --- 8) Scrollbar sutil (WebKit) --- */
*::-webkit-scrollbar{
  width: 10px; height: 10px;
}
*::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.22);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background: rgba(0,0,0,.32);
}

/* --- 9) Z-index “guías” (por si agregas nuevos overlays/modals) --- */
/* header nav = 80, secundario = 60, mobile/cart/whatsapp = 100 aprox en HTML */
.z-110 { z-index: 110; }
.z-120 { z-index: 120; }

/* --- 10) Correcciones pequeñas de layout --- */
/* Evitar que el body haga scroll horizontal por sombras/filtros */
html, body { overflow-x: clip; }
/* En vistas con grids de productos, asegurar gap responsivo si Tailwind no lo cubre */
#product-grid{ gap: 1rem; }
@media (min-width: 768px){
  #product-grid{ gap: 1.25rem; }
}

/* Anti-colapso y margen de seguridad */
html, body { margin: 0 !important; padding: 0; }
.has-fixed-header main { display: flow-root; padding-top: 0 !important; margin-top: 0 !important; }
.has-fixed-header main > :first-child { margin-top: 0 !important; }