/* ======================================================
   NEPTUNE – FINAL SELLAUTH CUSTOM CSS (STABLE)
   ====================================================== */

/* ---------------- ROOT COLORS ---------------- */

:root {
  --nep-accent: 95,168,255;
  --nep-bg: 5,10,20;
  --nep-card: 10,18,32;
  --nep-border: rgba(255,255,255,.08);
}

/* ---------------- GLOBAL TEXT ---------------- */

body {
  color: rgb(225,235,255);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------------- STICKY NAVBAR ---------------- */

nav[data-component-id="navbar"] {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Navbar background */
nav[data-component-id="navbar"] > div {
  background: linear-gradient(
    180deg,
    rgba(5,10,20,0.95),
    rgba(5,10,20,0.82)
  ) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(95,168,255,.18);
}

/* Center navbar content */
nav[data-component-id="navbar"] .flex.items-center {
  max-width: 85rem;
  margin-inline: auto;
}

/* Navbar links */
nav[data-component-id="navbar"] a {
  color: rgba(220,230,255,.75);
  transition: color .2s ease, transform .2s ease;
}

nav[data-component-id="navbar"] a:hover {
  color: rgb(140,180,255);
  transform: translateY(-1px);
}

/* Active link */
nav[data-component-id="navbar"] a.text-t-primary {
  color: rgb(160,195,255) !important;
}

/* Login button */
nav[data-component-id="navbar"] button {
  background: rgba(30,60,120,.35);
  border: 1px solid rgba(120,160,255,.35);
  border-radius: 12px;
  padding: 8px 18px;
  color: rgb(230,240,255);
  transition: all .2s ease;
}

nav[data-component-id="navbar"] button:hover {
  background: rgba(60,100,200,.35);
  border-color: rgba(150,190,255,.6);
}

/* Cart icon */
nav[data-component-id="navbar"] .fa-cart-shopping {
  color: rgb(150,185,255);
}

/* ---------------- PAGE OFFSET ---------------- */

/* Push content under sticky navbar */
#app > .flex {
  padding-top: 88px;
}

/* Mobile */
@media (max-width: 1024px) {
  #app > .flex {
    padding-top: 76px;
  }
}

/* Center all pages */
.max-w-\[85rem\] {
  margin-inline: auto !important;
}

/* Remove phantom background strip */
.component[data-component-id="navbar"] + * {
  background: transparent !important;
  margin-top: 0 !important;
}

/* ---------------- PRODUCT CARDS ---------------- */

.h-full.transform.transition-colors {
  background: linear-gradient(
    180deg,
    rgba(10,18,32,.95),
    rgba(6,12,22,.98)
  );
  border-radius: 20px;
  border: 1px solid var(--nep-border);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.h-full.transform.transition-colors:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 40px 80px rgba(0,0,0,.6),
    0 0 0 1px rgba(95,168,255,.4);
  border-color: rgba(95,168,255,.45);
}

/* Price */
.text-base.font-semibold span {
  font-size: 2.2rem;
  font-weight: 700;
  color: rgb(160,195,255);
  text-shadow: 0 0 18px rgba(95,168,255,.4);
}

/* View Details button */
.border.border-accent-500 {
  border-radius: 14px;
  background: rgba(95,168,255,.15);
  transition: background .2s ease, box-shadow .2s ease;
}

.border.border-accent-500:hover {
  background: rgba(95,168,255,.28);
  box-shadow: 0 0 24px rgba(95,168,255,.55);
}

/* ---------------- LIFETIME CARD EMPHASIS ---------------- */

.h-full.transform.transition-colors:has(.badges) {
  border-color: rgba(95,168,255,.55);
  box-shadow:
    0 0 0 1px rgba(95,168,255,.45),
    0 40px 80px rgba(95,168,255,.3);
  transform: translateY(-6px);
}

/* Hover-out effect */
.h-full.transform.transition-colors:has(.badges):hover {
  transform: translateY(-2px) scale(.995);
  box-shadow: 0 20px 40px rgba(0,0,0,.55);
}

/* ---------------- FEATURE STATS ---------------- */

.text-center.bg-card\/75 {
  background: rgba(10,16,30,.65) !important;
  backdrop-filter: blur(12px);
  border-radius: 18px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.text-center.bg-card\/75:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 25px 50px rgba(95,168,255,.35);
}

/* Average rating stays centered */
.text-center.border-b-2.border-white\/5 {
  grid-column: auto;
}

.text-center.border-b-2.border-white\/5:last-child {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
  text-align: center;
}

/* ---------------- SMOOTH SCROLL ---------------- */

html {
  scroll-behavior: smooth;
}