/* Estilos mínimos complementarios a Tailwind.
 * Los colores de marca llegan como variables CSS que setea app.js
 * desde STORE_CONFIG (no editar acá por cliente). */

:root {
  --primary: #D4A84B;
  --on-primary: #111111;
  --primary-soft: rgba(212, 168, 75, .14);
  --header-bg: #0B0B0B;
}

html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { overscroll-behavior-y: none; }
body.no-scroll { overflow: hidden; }

/* --- Colores de marca --- */
.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.text-on-primary { color: var(--on-primary); }
.border-primary { border-color: var(--primary); }
.ring-primary { --tw-ring-color: var(--primary); }
.bg-primary-soft { background-color: var(--primary-soft); }
.header-bg {
  background:
    radial-gradient(120% 140% at 100% 0%, var(--primary-soft), transparent 60%),
    var(--header-bg);
}
.focus-ring:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Píldoras de categoría */
.pill { transition: background-color .2s, color .2s, border-color .2s; }
.pill.is-active { background-color: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Opciones (entrega / pago) seleccionadas */
.option.is-selected { border-color: var(--primary); background-color: var(--primary-soft); }
.option.is-selected .option-dot { border-color: var(--primary); box-shadow: inset 0 0 0 4px #fff; background: var(--primary); }

/* Campos con error */
.field.has-error { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }

/* --- Scrollbars --- */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.thin-scrollbar { scrollbar-width: thin; scrollbar-color: #d6d3d1 transparent; }
.thin-scrollbar::-webkit-scrollbar { width: 6px; }
.thin-scrollbar::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 9999px; }

/* --- Safe areas (iPhone) --- */
.pb-safe { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
.pb-safe-4 { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

/* --- Placeholder de imagen --- */
.img-placeholder {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 55%),
    var(--primary-soft);
  color: var(--primary);
}

/* --- Animaciones --- */
#checkout.is-open #checkout-overlay { opacity: 1; }
#checkout.is-open #checkout-panel { transform: translateY(0); }
#cart-bar.is-visible { transform: translateY(0); }
#toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.bump { animation: bump .3s ease-out; }

/* --- Carteles luminosos --- */
@property --banner-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.banner {
  --bc: var(--primary);
  position: relative;
  display: block;
  width: 100%;
  border-radius: 1.1rem;
  padding: 2px;
  background: conic-gradient(from var(--banner-angle), var(--bc), transparent 25%, transparent 50%, var(--bc) 75%, transparent 90%, var(--bc));
  animation: banner-spin 3.5s linear infinite, banner-glow 1.8s ease-in-out infinite alternate;
  text-align: left;
}
.banner-inner {
  position: relative;
  overflow: hidden;
  border-radius: calc(1.1rem - 2px);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--bc) 35%, transparent), transparent 60%),
    #111;
  color: #fff;
}
.banner-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: banner-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
.banner-title { color: var(--bc); text-shadow: 0 0 12px color-mix(in srgb, var(--bc) 70%, transparent); }
.banner-emoji { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--bc) 80%, transparent)); animation: banner-bounce 1.6s ease-in-out infinite; }
@keyframes banner-spin { to { --banner-angle: 360deg; } }
@keyframes banner-glow {
  from { box-shadow: 0 0 6px -2px var(--bc); }
  to   { box-shadow: 0 0 22px 0 color-mix(in srgb, var(--bc) 65%, transparent); }
}
@keyframes banner-shine { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes banner-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.08); } }
.banner-dot { width: 6px; height: 6px; border-radius: 9999px; background: #d6d3d1; transition: all .2s; }
.banner-dot.is-active { width: 18px; background: var(--primary); }

/* Anclas con offset para la barra sticky */
.menu-section { scroll-margin-top: var(--sticky-h, 120px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}