/* ==========================================================================
   Experiencia Pamplona – Huamantla · residual styles
   Most styling comes from Tailwind (Play CDN, see index.html). This file
   only carries rules that Tailwind can't express inline or that are
   consumed by script.js.
   ========================================================================== */

/* ---------- Selection + custom scrollbar (matches reference) --------------- */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #FAF7F2; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #7A2A34; border-radius: 3px; }

/* ---------- Reference-parity utility classes ------------------------------ */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(223, 201, 168, 0.4);
}

/* ---------- CTA data-state hooks (script.js drives) ----------------------- */
/* The button ships enabled=false with data-state="loading". script.js flips
   data-state per computeCTAState(). Tailwind handles disabled styling; the
   rules below add subtle per-state affordances that Tailwind can't target. */
#compra-cta[data-state="loading"] {
  cursor: progress;
}
#compra-cta[data-state="reserving"] {
  cursor: progress;
  animation: ctaPulse 1.6s ease-in-out infinite;
}
#compra-cta[data-state="paused"],
#compra-cta[data-state="sold_out"],
#compra-cta[data-state="ended"],
#compra-cta[data-state="unavailable"],
#compra-cta[data-state="over_stock"] {
  background: #B89B74; /* sand-dark: read as disabled without being invisible */
  color: #180A0C;
}

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

/* ---------- Inline retry button inside #compra-status --------------------- */
.compra__retry {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(223, 201, 168, 0.5);
  color: #DFC9A8;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 0.5rem;
  transition: background 150ms ease, border-color 150ms ease;
}
.compra__retry:hover,
.compra__retry:focus-visible {
  background: rgba(223, 201, 168, 0.12);
  border-color: #DFC9A8;
  outline: none;
}

/* ---------- Focus visibility (Tailwind's default is subtle) --------------- */
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid #DFC9A8;
  outline-offset: 3px;
}

/* ---------- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}