/*
  Citadel Store styling
  Scope: store/cart/checkout routes (body.luna-store)
*/

body.luna-store {
  /* Brighter green accent (requested) */
  --luna-accent: 145 55% 42%;
  --luna-violet: 262 83% 62%;
  --color-primary: var(--luna-accent);

  background:
    radial-gradient(900px circle at 15% -10%, rgba(120, 90, 255, 0.38), transparent 55%),
    radial-gradient(900px circle at 85% 0%, rgba(70, 160, 255, 0.18), transparent 52%),
    linear-gradient(180deg, #0b1220 0%, #070b14 55%, #060a12 100%);
}

body.luna-store .luna-page {
  padding: 0;
}

body.luna-store .luna-shell {
  max-width: none;
  margin: 0;
  min-height: 100vh;
  background: rgba(8, 10, 18, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  border-radius: 0;
  overflow: hidden;
  backdrop-filter: blur(10px);

  display: flex;
  flex-direction: column;
}

body.luna-store .luna-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 12, 20, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.luna-store .luna-main {
  padding: 22px;
}

@media (max-width: 1024px) {
  body.luna-store .luna-main {
    padding: 16px;
  }
}

/* Make Tailwind "container" full-width inside the store */
body.luna-store .container {
  max-width: none !important;
}

/* Widen store content area (store pages were too narrow) */
body.luna-store .luna-container {
  max-width: none;
  width: 100%;
  margin: 0 auto;
}

/* Active state for top navigation */
body.luna-store .luna-nav-active {
  position: relative;
}
body.luna-store .luna-nav-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: hsl(var(--luna-accent));
  border-radius: 999px;
  opacity: 0.85;
}

/* Store cards/panels: subtle violet tint (covers Tailwind opacity variants like bg-background-secondary/80) */
body.luna-store .bg-background-secondary,
body.luna-store [class*="bg-background-secondary/"] {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.12) 0%, rgba(15, 23, 42, 0.88) 100%) !important;
  border-color: rgba(124, 58, 237, 0.16) !important;
}

body.luna-store .bg-background-secondary:hover,
body.luna-store [class*="bg-background-secondary/"]:hover {
  border-color: hsl(var(--luna-accent) / 0.26) !important;
}

/* Buttons: add a gentle glow */
body.luna-store button.bg-primary,
body.luna-store a.bg-primary {
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}



/* Full-width footer bar (shared layout) */
body.luna-store .luna-shell-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

body.luna-store .luna-footer-wrap {
  padding: 16px 22px;
  background: rgba(8, 10, 18, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.luna-store .luna-footer-wrap > * {
  max-width: none;
  margin: 0 auto;
}


/* -------------------------------------------------------------------------- */
/* Store stepper + chips                                                       */
/* -------------------------------------------------------------------------- */
body.luna-store .luna-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body.luna-store .luna-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(10, 12, 20, 0.55);
  color: rgba(255, 255, 255, 0.70);
  font-size: 13px;
  line-height: 1;
  user-select: none;
}

body.luna-store .luna-step .luna-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

body.luna-store .luna-step.is-active {
  border-color: hsl(var(--luna-accent) / 0.45);
  background: hsl(var(--luna-accent) / 0.10);
  color: hsl(var(--luna-accent));
}

body.luna-store .luna-step.is-active .luna-step-dot {
  background: hsl(var(--luna-accent));
}

body.luna-store .luna-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(10, 12, 20, 0.55);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1;
}

body.luna-store .luna-chip:hover {
  border-color: hsl(var(--luna-accent) / 0.35);
}

/* -------------------------------------------------------------------------
   Actions (Store)
   ------------------------------------------------------------------------- */
body.luna-store .luna-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.55rem 1rem;
  border-radius:9999px;
  font-weight:600;
  text-decoration:none;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
  user-select:none;
}
body.luna-store .luna-action--primary{
  background:hsl(var(--luna-accent));
  color:#fff;
  border:1px solid transparent;
}
body.luna-store .luna-action--primary:hover{
  background:hsl(var(--luna-accent) / .90);
}
body.luna-store .luna-action--secondary{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}
body.luna-store .luna-action--secondary:hover{
  background:rgba(255,255,255,.09);
}

/* -------------------------------------------------------------------------
   Store page structure
   ------------------------------------------------------------------------- */
body.luna-store .store-hero{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(1200px circle at 20% 0%, rgba(120,90,255,.22), transparent 55%),
    radial-gradient(900px circle at 85% 15%, rgba(70,160,255,.12), transparent 55%),
    rgba(8,10,18,.55);
  box-shadow:0 22px 60px rgba(0,0,0,.45);
  padding: clamp(18px, 2.6vw, 34px);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

body.luna-store .store-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(120deg, rgba(120,90,255,.12), transparent 42%, rgba(70,160,255,.10));
  opacity:.9;
}

body.luna-store .store-hero > *{ position:relative; z-index:1; }

body.luna-store .store-hero .title{
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.luna-store .store-hero .subtitle{
  margin-top: 10px;
  color: rgba(255,255,255,.70);
  max-width: 56ch;
}

body.luna-store .store-layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
}

@media (max-width: 1024px){
  body.luna-store .store-layout{
    grid-template-columns: 1fr;
  }
}

body.luna-store .store-sidebar{
  position: sticky;
  top: 92px;
  align-self: start;
}

@media (max-width: 1024px){
  body.luna-store .store-sidebar{ position: static; }
}

body.luna-store .product-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1280px){
  body.luna-store .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px){
  body.luna-store .product-grid{ grid-template-columns: 1fr; }
}

body.luna-store .product-card{
  position: relative;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(8,10,18,.48);
  box-shadow: 0 18px 50px rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
  overflow:hidden;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.luna-store .product-card:hover{
  border-color: rgba(120,90,255,.22);
  transform: translateY(-2px);
  box-shadow: 0 24px 72px rgba(0,0,0,.55);
}

/* Subtle top sheen to make cards feel "premium" without being noisy */
body.luna-store .product-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(800px circle at 20% 0%, rgba(120,90,255,.10), transparent 50%);
  opacity:.85;
}

/* Keep card content above the sheen */
body.luna-store .product-card > *{ position:relative; z-index:1; }

body.luna-store .product-card .price{
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.luna-store .product-card .price-row{
  display:flex;
  align-items:baseline;
  gap: 10px;
}

body.luna-store .product-card .price-unit{
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.65);
}

/* Product description fallback */
body.luna-store .product-card .product-desc{
  color: rgba(255,255,255,.74);
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 14.5px;
}

/* Readable "feature rows" instead of bullet dots */
body.luna-store .product-card .product-features{
  display:flex;
  flex-direction:column;
  gap: 10px;
  color: rgba(255,255,255,.74);
  font-size: 14.5px;
  line-height: 1.55;
}

body.luna-store .product-card .product-feature{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  overflow-wrap: anywhere;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.luna-store .store-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

body.luna-store .store-meta .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(8,10,18,.35);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 700;
}


/* Dropdown panels (notifications, language, currency): glass + transparent */
body.luna-store .luna-dropdown-panel {
  background: rgba(12, 14, 26, 0.60);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px);
}