/* ═══════════════════════════════════════════════════════════════════════════════
   NORDESTE RP - CORE DESIGN SYSTEM
   Tokens unificados, keyframes, base styles e animacoes
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── UNIFIED DESIGN TOKENS ─── */
:root {
  /* Colors (paleta original mantida) */
  --nr-bg: #0b0b0f;
  --nr-surface: #101318;
  --nr-surface-hover: #1a1d24;
  --nr-primary: #00E0A4;
  --nr-primary-dim: #00B87A;
  --nr-accent: #FFD24A;
  --nr-accent-dim: #FFC107;
  --nr-text: #EAECEF;
  --nr-text-muted: #A5A9B2;
  --nr-text-light: #D1D5DB;
  --nr-success: #10B981;
  --nr-warning: #F59E0B;
  --nr-danger: #EF4444;
  --nr-info: #3B82F6;
  --nr-border: rgba(234, 236, 239, 0.1);

  /* Gradients */
  --nr-grad-primary: linear-gradient(135deg, #00E0A4, #00B87A);
  --nr-grad-accent: linear-gradient(135deg, #FFD24A, #FFC107);
  --nr-grad-surface: linear-gradient(135deg, #101318, #1a1d24);
  --nr-grad-hero: linear-gradient(135deg, #00E0A4, #FFD24A);

  /* Geometry */
  --nr-radius: 14px;
  --nr-radius-sm: 8px;
  --nr-radius-lg: 20px;
  --nr-radius-xl: 28px;

  /* Shadows */
  --nr-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  --nr-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.35);
  --nr-shadow-glow: 0 0 20px rgba(0, 224, 164, 0.15);
  --nr-shadow-cta: 0 8px 32px rgba(0, 224, 164, 0.25);
  --nr-shadow-hover: 0 16px 40px rgba(0, 224, 164, 0.3);

  /* Easing */
  --nr-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography weights */
  --nr-fw-normal: 400;
  --nr-fw-medium: 500;
  --nr-fw-semibold: 600;
  --nr-fw-bold: 700;
  --nr-fw-black: 800;
}

/* ─── HEADING FONT (Rajdhani - gaming feel) ─── */
.font-display,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.02em;
}

/* ─── BASE RESETS ─── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* ─── SCROLLBAR ─── */
.custom-scrollbar::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--nr-primary);
  border-radius: 0.25rem;
}

/* ─── GRID BACKGROUND ─── */
.grid-background {
  background-image:
    linear-gradient(to right, rgba(0, 224, 164, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 224, 164, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 85% at 40% 30%, #000 0%, #fff0 110%);
  animation: grid-move 25s linear infinite;
}

/* ─── BACKGROUND MASK ─── */
.custom-bg-mask {
  mask-image: linear-gradient(hsl(var(--background)), rgba(0, 0, 0, 0.3), rgb(0, 0, 0, 0));
}

/* ─── DASHED LINE ─── */
.detail-dash {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 50%, hsl(var(--foreground) / 0) 0%);
  background-position: center bottom;
  background-size: 16px;
  background-repeat: repeat-x;
  width: 100%;
  height: 1px;
}

/* ─── IFRAME CONTENT ─── */
.centralcart-content iframe {
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
}

/* ─── FLOATING BLOBS ─── */
.nr-blob {
  animation: float 20s ease-in-out infinite;
}

.nr-blob:nth-child(2) {
  animation-delay: -7s;
  animation-duration: 25s;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Cart drawer */
@keyframes fade-in {
  from { background-color: rgba(0, 0, 0, 0); }
  to { background-color: rgba(0, 0, 0, 0.8); }
}

@keyframes fade-out {
  from { background-color: rgba(0, 0, 0, 0.8); }
  to { background-color: rgba(0, 0, 0, 0); }
}

@keyframes slide-in {
  0% { transform: translateX(100%); opacity: 0; }
  70% { transform: translateX(-6px); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out {
  from { transform: translateX(0px); }
  to { transform: translateX(500px); }
}

/* Dialog */
@keyframes dialog-in {
  from { opacity: 0; scale: 50%; }
  to { opacity: 1; scale: 100%; }
}

@keyframes dialog-out {
  from { opacity: 1; scale: 100%; }
  to { opacity: 0; scale: 50%; }
}

/* Reveal on scroll */
@keyframes card-enter {
  0% { opacity: 0; transform: translateY(24px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Grid movement */
@keyframes grid-move {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* Floating blobs */
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(12px, -12px) scale(1.03); }
  66% { transform: translate(-6px, 8px) scale(0.97); }
}

/* CTA glow pulse */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 224, 164, 0.2); }
  50% { box-shadow: 0 0 40px rgba(0, 224, 164, 0.4); }
}

/* Discount badge pulse */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 210, 74, 0.3); }
  50% { box-shadow: 0 0 15px rgba(255, 210, 74, 0.5); }
}

/* Security badge pulse */
@keyframes pulse-secure {
  0%, 100% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.3); }
  50% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.5); }
}

/* Gradient shift (pay button) */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Shimmer shine effect */
@keyframes shine {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* Trust banner staggered entrance */
@keyframes trust-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Sidebar dropdowns */
@keyframes slideDown {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes slideInMobile {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInSub {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Loading bar */
@keyframes loading {
  0% { left: -50%; }
  to { left: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CART DRAWER ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

#cart-drawer[data-state="open"] {
  animation: fade-in 0.4s forwards;
}

#cart-drawer[data-state="closed"] {
  animation: fade-out 0.4s forwards;
}

#cart-drawer[data-state="open"] > div {
  animation: slide-in 0.5s var(--nr-ease) forwards;
}

#cart-drawer[data-state="closed"] > div {
  animation: slide-out 0.4s forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DIALOG ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.dialog[data-state="open"] {
  animation: fade-in 0.4s forwards;
}

.dialog[data-state="closed"] {
  animation: fade-out 0.4s forwards;
}

.dialog[data-state="open"] > div {
  animation: dialog-in 0.2s forwards;
}

.dialog[data-state="closed"] > div {
  animation: dialog-out 0.2s forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   REVEAL ON SCROLL
   ═══════════════════════════════════════════════════════════════════════════════ */

.reveal-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--nr-ease), transform 0.7s var(--nr-ease);
  transition-delay: var(--delay, 0s);
}

.reveal-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SIDEBAR CATEGORIES
   ═══════════════════════════════════════════════════════════════════════════════ */

.cat-dropdown {
  transition: all 0.2s var(--nr-ease);
  transform-origin: top;
}

.cat-dropdown:not(.hidden) {
  animation: slideDown 0.2s var(--nr-ease);
}

#mobile-categories-dropdown:not(.hidden) {
  animation: slideInMobile 0.2s var(--nr-ease);
}

.mobile-subcategories:not(.hidden) {
  animation: slideInSub 0.2s var(--nr-ease);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DISCOUNT BADGE POSITION
   ═══════════════════════════════════════════════════════════════════════════════ */

.discount-badge-up {
  margin-bottom: 0.75rem;
  position: relative;
  top: -0.75rem;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NUI VISIBILITY — Pause all animations when NUI is hidden to save CPU/GPU
   ═══════════════════════════════════════════════════════════════════════════════ */

.nui-hidden,
.nui-hidden * {
  animation-play-state: paused !important;
  transition: none !important;
}