/* ============================================================
   SPACE THEME — PLANET88 / Template-datascripmall
   Visual-only override. Does not alter HTML structure or content.
   Palette: deep space black · navy · electric blue · cyan glow
   ============================================================ */

:root {
  --space-black: #02060f;
  --space-deep: #050b18;
  --space-navy: #0a1628;
  --space-navy-2: #0d1f3c;
  --space-panel: rgba(8, 18, 36, 0.88);
  --space-panel-solid: #0b1830;
  --space-blue: #1565c0;
  --space-blue-mid: #1e88e5;
  --space-blue-light: #42a5f5;
  --space-cyan: #00e5ff;
  --space-violet: #7c4dff;
  --space-text: #e8f4ff;
  --space-text-soft: #b3d4f5;
  --space-text-muted: #7ea8d4;
  --space-border: rgba(66, 165, 245, 0.28);
  --space-border-strong: rgba(0, 229, 255, 0.45);
  --space-glow: rgba(33, 150, 243, 0.35);
  --space-glow-cyan: rgba(0, 229, 255, 0.28);
  --space-star: rgba(255, 255, 255, 0.75);
  --space-btn: linear-gradient(135deg, #0d47a1 0%, #1565c0 42%, #00bcd4 100%);
  --space-btn-hover: linear-gradient(135deg, #1565c0 0%, #1e88e5 45%, #18ffff 100%);
  --space-btn-outline: linear-gradient(135deg, rgba(13, 27, 62, 0.95), rgba(10, 22, 40, 0.95));
  --space-header: linear-gradient(180deg, #0a1630 0%, #0d1b3e 55%, #132a52 100%);
  --space-topbar: radial-gradient(ellipse at 20% 0%, #1a237e 0%, #0a1628 50%, #000814 100%);
  --space-accent-gold: #ffd54f;
}

/* ---- Base / starfield ---- */
html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  background-color: var(--space-black) !important;
  background-image:
    radial-gradient(1px 1px at 8% 18%, var(--space-star) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 72%, rgba(255, 255, 255, 0.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 28%, rgba(66, 165, 245, 0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 58%, rgba(255, 255, 255, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 12%, rgba(0, 229, 255, 0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 44%, rgba(255, 255, 255, 0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 82%, rgba(124, 77, 255, 0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 90%, rgba(255, 255, 255, 0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 22%, rgba(66, 165, 245, 0.6) 0%, transparent 100%),
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(21, 101, 192, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(13, 71, 161, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 10% 80%, rgba(0, 188, 212, 0.1) 0%, transparent 50%),
    linear-gradient(180deg, #000814 0%, #050b18 35%, #0a1628 70%, #02060f 100%) !important;
  background-attachment: fixed;
  color: var(--space-text) !important;
  min-height: 100%;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 25%, rgba(33, 150, 243, 0.07) 0%, transparent 42%),
    radial-gradient(circle at 82% 70%, rgba(0, 229, 255, 0.05) 0%, transparent 38%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
}

/* Decorative planet asset (CSS-only, no HTML change) */
body::after {
  content: "";
  position: fixed;
  right: -8vw;
  bottom: -6vh;
  width: min(52vw, 520px);
  height: min(52vw, 520px);
  pointer-events: none;
  z-index: 0;
  background: url("planet.webp") center / contain no-repeat;
  opacity: 0.14;
  filter: drop-shadow(0 0 40px rgba(0, 229, 255, 0.25)) hue-rotate(10deg);
  animation: planet-drift 28s ease-in-out infinite alternate;
}

@keyframes planet-drift {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(-3vw, -2vh, 0) rotate(6deg);
  }
}

body > * {
  position: relative;
  z-index: 1;
}

/* ---- Global text & links ---- */
#__nuxt,
#main,
main,
footer,
header {
  color: var(--space-text);
}

a {
  transition: color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a:hover {
  opacity: 0.92;
}

h1,
h2,
h3,
.h7,
.font-bold,
.font-semibold {
  color: var(--space-text);
}

h1 span {
  background: linear-gradient(90deg, #e3f2fd 0%, #42a5f5 45%, #00e5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.25));
}

/* ---- Utility color overrides (Tailwind baked-in) ---- */
.bg-white {
  background-color: var(--space-panel-solid) !important;
}

.bg-\[\#F5F5F5\],
.bg-\[\#F7F8FA\] {
  background-color: rgba(10, 22, 40, 0.95) !important;
}

.bg-secondary-900 {
  background: var(--space-topbar) !important;
  color: var(--space-text-soft) !important;
  border-bottom: 1px solid var(--space-border);
}

.bg-primary {
  background: var(--space-btn) !important;
  color: #fff !important;
}

.bg-primary-100,
.bg-primary-200 {
  background: rgba(21, 101, 192, 0.28) !important;
  color: var(--space-cyan) !important;
  border: 1px solid var(--space-border);
}

.max-md\:bg-primary {
  background: var(--space-header) !important;
}

.text-primary,
.font-bold.text-primary,
span.text-primary {
  color: var(--space-cyan) !important;
}

.text-bw-200,
.text-bw-300,
.text-bw-400,
.text-bw-500,
.text-bw-600 {
  color: var(--space-text-muted) !important;
}

.text-bw-700,
.text-bw-800,
.text-bw-900 {
  color: var(--space-text-soft) !important;
}

.text-white {
  color: #fff !important;
}

.border-bw-100,
.border-bw-200,
.border-bw-400,
.border-bw-500,
.border-bw-600,
.border,
.border-\[\#D1D1D1\] {
  border-color: var(--space-border) !important;
}

.border-b {
  border-color: var(--space-border) !important;
}

.bg-black,
.bg-\[\#818181\] {
  background-color: rgba(66, 165, 245, 0.45) !important;
}

hr {
  border-color: var(--space-border) !important;
  background-color: var(--space-border) !important;
  opacity: 0.8;
}

/* ---- Header ---- */
header.fixed,
header {
  background: var(--space-header) !important;
  border-bottom: 1px solid var(--space-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 40px var(--space-glow);
  backdrop-filter: blur(12px);
}

header .text-sm,
header .font-medium {
  color: var(--space-text-soft) !important;
}

header img {
  filter: drop-shadow(0 0 10px rgba(66, 165, 245, 0.45));
}

header .group ul,
header ul.absolute {
  background: var(--space-navy) !important;
  border: 1px solid var(--space-border) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 20px var(--space-glow);
  backdrop-filter: blur(10px);
}

header ul li {
  color: var(--space-text-soft);
}

header ul li:hover,
header ul li.hover\:bg-slate-50:hover {
  background: rgba(21, 101, 192, 0.25) !important;
  color: var(--space-cyan) !important;
}

/* Search / form controls */
.form-rounded,
.form-default,
.form-select,
.form-input,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
textarea {
  background-color: rgba(5, 12, 28, 0.9) !important;
  border-color: var(--space-border) !important;
  color: var(--space-text) !important;
  box-shadow: inset 0 0 0 1px rgba(66, 165, 245, 0.08);
}

.form-rounded::placeholder,
.form-default::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--space-text-muted) !important;
  opacity: 0.85;
}

.form-rounded:focus,
.form-default:focus,
input:focus,
textarea:focus {
  border-color: var(--space-cyan) !important;
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.2), 0 0 16px var(--space-glow-cyan) !important;
  outline: none !important;
}

/* Category chip on search */
header .group.absolute,
header .bg-\[\#F5F5F5\] {
  background: rgba(13, 27, 62, 0.95) !important;
  border-color: var(--space-border) !important;
  color: var(--space-text-soft) !important;
}

/* ---- Buttons ---- */
.btn,
.btn-primary,
button.btn-primary,
a.btn-primary {
  background: var(--space-btn) !important;
  border: 1px solid var(--space-border-strong) !important;
  color: #fff !important;
  box-shadow: 0 0 14px var(--space-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.btn:hover,
.btn-primary:hover,
a.btn-primary:hover {
  background: var(--space-btn-hover) !important;
  box-shadow: 0 0 22px var(--space-glow-cyan), 0 4px 16px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.btn-primary-outline,
a.btn-primary-outline,
button.btn-primary-outline {
  background: var(--space-btn-outline) !important;
  border: 1px solid var(--space-blue-light) !important;
  color: var(--space-cyan) !important;
  box-shadow: 0 0 10px rgba(66, 165, 245, 0.2);
}

.btn-primary-outline:hover,
a.btn-primary-outline:hover {
  background: rgba(21, 101, 192, 0.35) !important;
  color: #fff !important;
  border-color: var(--space-cyan) !important;
}

.btn-icon.btn-primary {
  background: var(--space-btn) !important;
}

/* CTA DAFTAR / LOGIN (custom classes) */
.PLANET88,
.PRIMATOTO {
  gap: 8px;
  margin-bottom: 6px;
}

.login,
.register,
.login-button,
.register-button {
  color: #fff !important;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.login,
.login-button {
  background: linear-gradient(270deg, #02060f 0%, #0d1b3e 18%, #1565c0 42%, #1e88e5 58%, #0d47a1 78%, #02060f 100%) !important;
  border: 1px solid var(--space-border-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 10px rgba(0, 0, 0, 0.45),
    0 0 16px var(--space-glow) !important;
}

.register,
.register-button {
  background: linear-gradient(270deg, #001018 0%, #004d60 18%, #00bcd4 42%, #00e5ff 58%, #0277bd 78%, #001018 100%) !important;
  border: 1px solid rgba(0, 229, 255, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -3px 10px rgba(0, 0, 0, 0.4),
    0 0 18px var(--space-glow-cyan) !important;
}

.login:hover,
.register:hover,
.login-button:hover,
.register-button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* ---- Main content panels ---- */
#main,
main {
  background: transparent !important;
}

#main .container,
main .container {
  position: relative;
}

/* Product card / sticky panels */
#main section,
#main .rounded-2xl,
main section.mb-auto,
main .grid.gap-6 {
  color: var(--space-text);
}

/* Image frames */
img.rounded-2xl,
img.aspect-square,
.rounded-2xl.border {
  border-color: var(--space-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 24px var(--space-glow);
  background: rgba(5, 12, 28, 0.6);
}

/* Tags / chips */
a.rounded-full.bg-primary-200 {
  background: rgba(21, 101, 192, 0.22) !important;
  border: 1px solid var(--space-border);
  color: var(--space-cyan) !important;
  backdrop-filter: blur(6px);
}

a.rounded-full.bg-primary-200:hover {
  background: rgba(0, 229, 255, 0.15) !important;
  border-color: var(--space-cyan);
  box-shadow: 0 0 12px var(--space-glow-cyan);
}

/* Price / stats */
.text-2xl.font-bold.text-primary {
  color: var(--space-cyan) !important;
  text-shadow: 0 0 14px var(--space-glow-cyan);
}

/* ---- Bottom sticky bar ---- */
.fixed.bottom-0 {
  background: linear-gradient(180deg, rgba(5, 11, 24, 0.92), rgba(2, 6, 15, 0.98)) !important;
  border-top: 1px solid var(--space-border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55), 0 0 30px var(--space-glow);
  backdrop-filter: blur(14px);
}

.fixed.bottom-0 .bg-white {
  background: rgba(13, 27, 62, 0.9) !important;
  color: var(--space-text) !important;
  border-color: var(--space-border) !important;
}

/* ---- FAQ (override brown skin) ---- */
.faq-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.12), transparent 48%),
    linear-gradient(145deg, #0a1628 0%, #0d1b3e 40%, #05101f 72%, #02060f 100%) !important;
  border: 1px solid var(--space-border) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 30px var(--space-glow) !important;
  backdrop-filter: blur(18px) !important;
}

.faq-section h2 {
  color: var(--space-cyan) !important;
  text-shadow: 0 0 16px var(--space-glow-cyan) !important;
}

.faq-item {
  background: rgba(5, 12, 28, 0.75) !important;
  border: 1px solid var(--space-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.faq-item:hover {
  border-color: var(--space-border-strong) !important;
  box-shadow: 0 0 18px var(--space-glow) !important;
}

.faq-item.active {
  border-color: var(--space-cyan) !important;
  box-shadow: 0 0 22px var(--space-glow-cyan) !important;
}

.faq-question {
  color: var(--space-text) !important;
}

.faq-item.active .faq-question {
  color: var(--space-cyan) !important;
}

.faq-answer,
.faq-answer p {
  color: var(--space-text-soft) !important;
}

.icon-bar {
  background: var(--space-cyan) !important;
  box-shadow: 0 0 8px var(--space-glow-cyan);
}

/* ---- Reviews / cards ---- */
.v-select,
.vs__dropdown-toggle,
.vs--single {
  background: rgba(5, 12, 28, 0.9) !important;
  border-color: var(--space-border) !important;
  color: var(--space-text) !important;
}

.vs__selected,
.vs__search {
  color: var(--space-text-soft) !important;
}

button.min-w-20.rounded-full {
  background: rgba(10, 22, 40, 0.85) !important;
  border-color: var(--space-border) !important;
  color: var(--space-text-soft) !important;
}

button.min-w-20.rounded-full:hover {
  border-color: var(--space-cyan) !important;
  color: var(--space-cyan) !important;
  box-shadow: 0 0 12px var(--space-glow);
}

/* ---- Footer ---- */
footer {
  background: linear-gradient(180deg, rgba(5, 11, 24, 0.6) 0%, #02060f 40%, #000814 100%) !important;
  border-top: 1px solid var(--space-border) !important;
  color: var(--space-text-soft) !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);
}

footer .font-bold {
  color: var(--space-cyan) !important;
  text-shadow: 0 0 10px var(--space-glow-cyan);
}

footer .link-footer,
.link-footer[data-v-6f6249f3] {
  color: var(--space-text-muted) !important;
}

footer .link-footer:hover,
.link-footer[data-v-6f6249f3]:hover {
  color: var(--space-cyan) !important;
  opacity: 1;
}

footer .border-t {
  border-color: var(--space-border) !important;
}

footer .text-bw-500 {
  color: var(--space-text-muted) !important;
}

footer .aspect-square.rounded-lg,
footer .border.border-bw-600 {
  background: rgba(10, 22, 40, 0.85) !important;
  border-color: var(--space-border) !important;
  box-shadow: 0 0 16px var(--space-glow);
}

/* Social icons: lighten black fills */
footer .nuxt-icon svg path[fill="#000000"],
footer .nuxt-icon svg path[fill="black"],
header .nuxt-icon svg path[fill="black"],
header .nuxt-icon svg path[fill="#000000"],
main .nuxt-icon svg path[fill="black"],
main .nuxt-icon svg path[fill="#000000"],
.fixed.bottom-0 .nuxt-icon svg path[fill="black"],
.fixed.bottom-0 .nuxt-icon svg path[fill="#000000"] {
  fill: var(--space-blue-light) !important;
}

header .nuxt-icon svg path[fill="#D9D9D9"],
.drawer .nuxt-icon svg path[fill="#D9D9D9"] {
  fill: var(--space-text-soft) !important;
}

/* Keep white social glyphs white */
footer .nuxt-icon svg path[fill="white"],
footer .nuxt-icon svg path[fill="#fff"] {
  fill: #fff !important;
}

/* ---- Drawer / mobile menu ---- */
.drawer {
  background: rgba(5, 11, 24, 0.96) !important;
  border-color: var(--space-border) !important;
  color: var(--space-text);
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.55);
}

/* ---- Snackbar container ---- */
#vue3-snackbar--container {
  --success-colour: #00e5ff;
  --error-colour: #ff5252;
  --warning-colour: #ffd54f;
  --info-colour: #42a5f5;
  --base-background-color: #0a1628;
  --message-text-color: #e8f4ff;
}

/* ---- Selection / scrollbar ---- */
::selection {
  background: rgba(0, 229, 255, 0.35);
  color: #fff;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--space-deep);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--space-blue-mid), var(--space-navy));
  border-radius: 8px;
  border: 2px solid var(--space-deep);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--space-cyan);
}

/* ---- Focus a11y ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--space-cyan);
  outline-offset: 2px;
}

/* ---- Subtle nebula pulse on primary CTAs ---- */
@keyframes space-pulse {
  0%,
  100% {
    box-shadow: 0 0 12px var(--space-glow);
  }
  50% {
    box-shadow: 0 0 22px var(--space-glow-cyan), 0 0 40px rgba(21, 101, 192, 0.25);
  }
}

header a.btn-primary,
.fixed.bottom-0 a.btn-primary,
.fixed.bottom-0 button.btn-primary {
  animation: space-pulse 3.2s ease-in-out infinite;
}

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  body {
    background-attachment: scroll;
  }
}

/* ---- Mobile polish ---- */
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }

  header {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  }

  h1 span {
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.3));
  }

  .faq-section {
    margin-left: 12px;
    margin-right: 12px;
  }
}