/* ============================================================
   RENN OS — UI reskin global untuk semua halaman publik
   (var-based: otomatis mengikuti 6 atmosfera tema)
   ============================================================ */

::selection { background: color-mix(in srgb, var(--primary) 55%, transparent); color: #fff; }
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--primary) 60%, transparent) transparent; }
body::-webkit-scrollbar { width: 9px; }
body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--glow-a, #8b5cf6), var(--brand, #ff4d8d)); border-radius: 99px; border: 2px solid var(--bg-base); }
body::-webkit-scrollbar-track { background: transparent; }

/* ---------- Form controls ---------- */
.input, select, textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"],
input[type="time"], input[type="datetime-local"], input[type="search"] {
  background: color-mix(in srgb, var(--bg-base) 45%, transparent);
  border: 1px solid var(--line-strong) !important;
  border-radius: 12px;
  color: var(--text);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.input:focus, select:focus, textarea:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="tel"]:focus,
input[type="date"]:focus, input[type="search"]:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--primary) 20%, transparent) !important;
  background: color-mix(in srgb, var(--bg-base) 25%, transparent);
}
.input::placeholder, textarea::placeholder { color: var(--dim); }

select option { background: var(--bg-elev); color: var(--text); }

/* ---------- Kartu ---------- */
.card {
  backdrop-filter: blur(10px);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s, box-shadow .3s;
}
.card:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }

/* ---------- Badge status seragam ---------- */
.badge { border-radius: 99px !important; font-weight: 700; letter-spacing: .03em; }
.badge-success, .badge-ok { background: rgba(16,185,129,.13) !important; color: #6ee7b7 !important; border: 1px solid rgba(16,185,139,.32) !important; }
.badge-warning, .badge-warn { background: rgba(245,158,11,.13) !important; color: #fcd34d !important; border: 1px solid rgba(245,158,11,.32) !important; }
.badge-info, .badge-proses { background: color-mix(in srgb, var(--cyan) 14%, transparent) !important; color: var(--cyan) !important; border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent) !important; }
.badge-danger, .badge-fail { background: rgba(239,68,68,.13) !important; color: #fca5a5 !important; border: 1px solid rgba(239,68,68,.32) !important; }

/* ---------- Tabel ---------- */
table { border-collapse: separate; border-spacing: 0 7px; }
thead th {
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--muted) !important;
}
tbody tr td { background: var(--bg-card); border: 0 !important; }
tbody tr td:first-child { border-radius: 12px 0 0 12px; }
tbody tr td:last-child { border-radius: 0 12px 12px 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--primary) 9%, var(--bg-card)); }

/* ---------- Navbar HUD ---------- */
.navbar, header.nav {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 45%, transparent), transparent) 1;
}
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute; left: 10%; right: 10%; bottom: -4px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--brand));
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.nav-link:hover::after { transform: scaleX(1); }

/* ---------- Footer garis atas gradien ---------- */
footer.footer, .site-footer { position: relative; overflow: hidden; }
footer.footer::before, .site-footer::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 60%, transparent), transparent);
}

/* ---------- Order steps & produk ---------- */
.order-step.active .order-step-num,
.order-step.done .order-step-num {
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 50%, transparent);
}

/* ---------- Auth pages ---------- */
.auth-wrap h1, .auth-card h1 { font-family: var(--font-hero, 'Unbounded', sans-serif); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}