/*
 * ═══════════════════════════════════════════════════════════
 *  BLUE / BLACK  DESIGN SYSTEM
 *  Accent: #4a8fd4   Background: #000000   Card: #0d0d0f
 *
 *  Design language taken from the Stats-Bar:
 *    • Dark translucent container
 *    • Thin blue border  (rgba(74,143,212,0.14))
 *    • Blue icon  +  bold white value  +  muted uppercase label
 *    • Subtle blue glow on hover / focus
 * ═══════════════════════════════════════════════════════════
*/

/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: #000 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────── */
::-webkit-scrollbar          { width: 4px; height: 4px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: rgba(74,143,212,.25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(74,143,212,.55); }

/* ─────────────────────────────────────────
   DESIGN-SYSTEM TOKENS  (reusable classes)
───────────────────────────────────────── */

/* ds-card — the core building block of everything */
.ds-card,
.bg-card {
  background: #0d0d0f !important;
  border: 1px solid rgba(74,143,212,.1) !important;
  border-radius: 14px !important;
  transition: border-color .2s, box-shadow .2s;
}
.ds-card:hover,
.ds-card-hover:hover {
  border-color: rgba(74,143,212,.25) !important;
  box-shadow: 0 0 28px rgba(74,143,212,.07), 0 6px 20px rgba(0,0,0,.5);
}

/* ds-section-title — section headings */
.ds-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
  margin-bottom: 1.25rem;
}
.ds-section-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 1.2em;
  background: linear-gradient(180deg, #4a8fd4 0%, rgba(74,143,212,.3) 100%);
  border-radius: 99px;
  flex-shrink: 0;
}

/* ds-label — field labels */
.ds-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.35);
  margin-bottom: .5rem;
}

/* ds-input — text inputs, selects */
.ds-input {
  background: rgba(74,143,212,.03) !important;
  border: 1px solid rgba(74,143,212,.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  transition: border-color .2s, box-shadow .2s;
}
.ds-input:focus,
.ds-input:focus-within {
  border-color: rgba(74,143,212,.5) !important;
  box-shadow: 0 0 0 3px rgba(74,143,212,.1) !important;
  outline: none !important;
}
.ds-input::placeholder { color: rgba(255,255,255,.25); }

/* ds-divider — horizontal separator */
.ds-divider {
  border: none;
  border-top: 1px solid rgba(74,143,212,.08);
  margin: .75rem 0;
}

/* ds-badge — small pill badges */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid rgba(74,143,212,.3);
  background: rgba(74,143,212,.1);
  color: #4a8fd4;
}

/* ds-icon-box — blue icon container (like stats-bar icon) */
.ds-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: rgba(74,143,212,.08);
  border: 1px solid rgba(74,143,212,.15);
  color: #4a8fd4;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────
   NAVBAR
───────────────────────────────────────── */
header .shop-logo-name {
  background: linear-gradient(90deg, #4a8fd4 0%, #7ab8f5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: -.025em;
}

header .nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(74,143,212,.04);
  border: 1px solid rgba(74,143,212,.1);
  border-radius: 10px;
  color: rgba(255,255,255,.6);
  transition: border-color .2s, background .2s, box-shadow .2s, color .2s;
}
header .nav-icon-btn:hover,
header .nav-icon-btn.active {
  border-color: rgba(74,143,212,.45);
  background: rgba(74,143,212,.08);
  box-shadow: 0 0 14px rgba(74,143,212,.18);
  color: #4a8fd4;
}

header .cart-badge {
  background: #4a8fd4;
  color: #fff;
  font-weight: 800;
  font-size: .58rem;
}

nav a.nav-active {
  color: #fff;
  position: relative;
}
nav a.nav-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: #4a8fd4;
  border-radius: 99px;
  box-shadow: 0 0 8px rgba(74,143,212,.9);
}

/* ─────────────────────────────────────────
   STATS BAR  (the reference component)
───────────────────────────────────────── */
.stats-bar {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(74,143,212,.13);
  border-radius: 14px;
  background: rgba(74,143,212,.035);
  backdrop-filter: blur(6px);
  margin: 10px 0 6px;
}
.stats-bar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  flex: 1;
  justify-content: center;
}
.stats-bar-item + .stats-bar-item {
  border-left: 1px solid rgba(74,143,212,.09);
}
.stats-bar-icon  { color: #4a8fd4; opacity: .85; flex-shrink: 0; }
.stats-bar-value { font-size: 1.2rem; font-weight: 800; color: #fff; letter-spacing: -.025em; line-height: 1.1; }
.stats-bar-label { font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .09em; }

@media (max-width: 640px) {
  .stats-bar-item { padding: 10px 14px; gap: 8px; }
  .stats-bar-value { font-size: 1rem; }
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */

/* Primary — solid blue */
button[class*="bg-accent-500"]:not([class*="border-accent-500"][class*="text-accent-500"]),
a[class*="bg-accent-500"]:not([class*="border-accent-500"][class*="text-accent-500"]) {
  background: linear-gradient(135deg,#4a8fd4 0%,#3a7fc4 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 0 22px rgba(74,143,212,.28), 0 2px 8px rgba(0,0,0,.4);
  transition: opacity .18s, box-shadow .18s, transform .15s;
}
button[class*="bg-accent-500"]:hover:not(:disabled),
a[class*="bg-accent-500"]:hover {
  opacity: .88;
  box-shadow: 0 0 36px rgba(74,143,212,.5), 0 4px 14px rgba(0,0,0,.5);
  transform: translateY(-1px);
}
button[class*="bg-accent-500"]:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 0 14px rgba(74,143,212,.3);
}

/* Secondary — outline blue */
button[class*="border-accent-500"][class*="text-accent-500"],
a[class*="border-accent-500"][class*="text-accent-500"] {
  background: transparent !important;
  border: 1px solid rgba(74,143,212,.45) !important;
  color: #4a8fd4 !important;
  font-weight: 600 !important;
  transition: background .18s, box-shadow .18s, transform .15s, border-color .18s;
}
button[class*="border-accent-500"][class*="text-accent-500"]:hover:not(:disabled),
a[class*="border-accent-500"][class*="text-accent-500"]:hover {
  background: rgba(74,143,212,.07) !important;
  border-color: rgba(74,143,212,.8) !important;
  box-shadow: 0 0 18px rgba(74,143,212,.2);
  transform: translateY(-1px);
}

/* Quantity ± buttons */
button[class*="hover:bg-accent-500"]:hover {
  background-color: #4a8fd4 !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────
   PRODUCT CARDS  (inline + hover)
───────────────────────────────────────── */
.bg-card.border.rounded-xl,
.bg-card.border.rounded-lg {
  background: #0d0d0f !important;
  border-color: rgba(74,143,212,.1) !important;
  border-radius: 14px !important;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.bg-card.border.rounded-xl:hover,
.bg-card.border.rounded-lg:hover {
  border-color: rgba(74,143,212,.28) !important;
  box-shadow: 0 0 28px rgba(74,143,212,.07), 0 6px 20px rgba(0,0,0,.5);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────
   FORMS & INPUTS
───────────────────────────────────────── */

/* All generic inputs */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background: rgba(74,143,212,.025) !important;
  border: 1px solid rgba(74,143,212,.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  transition: border-color .2s, box-shadow .2s;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: rgba(74,143,212,.5) !important;
  box-shadow: 0 0 0 3px rgba(74,143,212,.1) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.2) !important; }

/* bg-white/[0.025] input fields inside components */
.bg-white\/\[0\.025\] {
  background: rgba(74,143,212,.025) !important;
}
.bg-white\/5 {
  background: rgba(74,143,212,.04) !important;
}

/* Focus ring utility */
.focus-within\:ring-accent-500:focus-within,
*:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(74,143,212,.18) !important;
}

/* Variant selector active state */
button.border-accent-500 {
  border-color: #4a8fd4 !important;
  background: rgba(74,143,212,.07) !important;
}

/* Product form sections — field groups */
.border-b.border-y-white\/5,
.border-b.border-white\/5 {
  border-bottom-color: rgba(74,143,212,.07) !important;
}

/* ─────────────────────────────────────────
   CHOICES / SELECT DROPDOWNS
───────────────────────────────────────── */
.choices__inner {
  background: rgba(74,143,212,.025) !important;
  border: 1px solid rgba(74,143,212,.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
}
.choices.is-open .choices__inner,
.currency-selector .choices.is-open .choices__inner,
.language-selector .choices.is-open .choices__inner {
  border-color: rgba(74,143,212,.5) !important;
  box-shadow: 0 0 0 3px rgba(74,143,212,.1) !important;
}
.choices__list--dropdown {
  background: #0d0d0f !important;
  border: 1px solid rgba(74,143,212,.15) !important;
  border-radius: 0 0 12px 12px !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: rgba(74,143,212,.1) !important;
  color: #4a8fd4 !important;
}

/* ─────────────────────────────────────────
   SPLIDE CAROUSEL
───────────────────────────────────────── */
.splide__arrow {
  background: rgba(74,143,212,.1) !important;
  border: 1px solid rgba(74,143,212,.2) !important;
  transition: background .2s;
}
.splide__arrow:hover { background: rgba(74,143,212,.22) !important; }
.splide__arrow svg  { fill: #4a8fd4 !important; }

/* ─────────────────────────────────────────
   EDITOR CONTENT
───────────────────────────────────────── */
.editor .e-quote   { border-left-color: #4a8fd4 !important; }
.editor .e-link    { color: #4a8fd4 !important; }
.editor .e-hr, .editor hr { border-top-color: rgba(74,143,212,.25) !important; }

/* ─────────────────────────────────────────
   TAILWIND ACCENT UTILITIES  (override)
───────────────────────────────────────── */
.text-accent-500            { color: #4a8fd4 !important; }
.border-accent-500          { border-color: #4a8fd4 !important; }
.border-accent-500\/40      { border-color: rgba(74,143,212,.4) !important; }
.bg-accent-500\/10,
.bg-accent-500\/15          { background: rgba(74,143,212,.1) !important; }
.ring-accent-500            { --tw-ring-color: rgba(74,143,212,.5); }

/* ─────────────────────────────────────────
   PULSATING STATUS DOT
───────────────────────────────────────── */
.pulsating { background-color: rgba(74,143,212,.4); }

/* ─────────────────────────────────────────
   SECTION HEADINGS  (h2 with border-l)
───────────────────────────────────────── */
h1.text-2xl.font-bold,
h2.text-2xl.font-bold,
h2.text-xl.font-bold {
  letter-spacing: -.02em;
}

/* Border-left accent on section titles */
.border-l-accent-500,
.border-l-4.border-l-accent-500 {
  border-left-color: #4a8fd4 !important;
}

/* ─────────────────────────────────────────
   PAGINATION
───────────────────────────────────────── */
.pagination a, .pagination button {
  background: rgba(74,143,212,.04) !important;
  border: 1px solid rgba(74,143,212,.1) !important;
  color: rgba(255,255,255,.6) !important;
  border-radius: 8px !important;
  transition: border-color .2s, background .2s, color .2s;
}
.pagination a:hover, .pagination button:hover,
.pagination .active a, .pagination .active button {
  background: rgba(74,143,212,.1) !important;
  border-color: rgba(74,143,212,.4) !important;
  color: #4a8fd4 !important;
}

/* ─────────────────────────────────────────
   MODAL OVERLAYS
───────────────────────────────────────── */
.bg-background {
  background: #000 !important;
}
[class*="border-white/5"],
.border-white\/5 {
  border-color: rgba(74,143,212,.08) !important;
}
[class*="rounded-lg"].bg-background,
[class*="rounded-xl"].bg-background {
  border: 1px solid rgba(74,143,212,.12) !important;
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer .footer-logo-name {
  background: linear-gradient(90deg,#4a8fd4 0%,#7ab8f5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

/* ─────────────────────────────────────────
   ERROR STATES
───────────────────────────────────────── */
.bg-red-500 {
  background: rgba(239,68,68,.1) !important;
  border: 1px solid rgba(239,68,68,.35) !important;
  color: #fca5a5 !important;
  border-radius: 10px !important;
}