/* ==============================================
   Theme 1 — Neon Dark Skin (Void Edition)
   Author: ChatGPT (GPT-5 Pro) & Gemini
   Purpose: A deeper, darker, cleaner transformation
            of the Neon layout.
   Notes:
   - "Void" background update applied.
   - Grid noise reduced for cleanliness.
   - Navbar Dashboard Button Color FIXED (Pink Restore).
   - ALL original code preserved (Motion, Announcement Bar).
   =============================================== */

/* ---------- Color System ---------- */
:root {
  --cl-primary: #ff009F;
  --cl-primary-rgb: 255, 86, 192;
  --cl-primary-contrast: #000000; /* High contrast text on primary */
  
  /* UPDATED: Void Dark Backgrounds */
  --cl-background-primary: #050505;
  --cl-background-primary-rgb: 5, 5, 5;
  --cl-background-secondary: #0a0a0a;
  --cl-background-secondary-rgb: 10, 10, 10;
  
  --cl-border: rgba(255,255,255,0.06);
  --cl-text: #eae6ee;
  --cl-text-dim: #9ca3af;
  
  /* UPDATED: Smoked Glass (Dark) instead of White Glass */
  --card-bg: rgba(12, 12, 14, 0.6);
  --card-bg-hover: rgba(25, 25, 28, 0.8);
  
  --glow: 0 0 0 transparent;

  /* Motion & Easing */
  --ease-out-3: cubic-bezier(.16,.84,.24,1);
  --ease-spring-1: cubic-bezier(.2,.8,.2,1);
  --dur-1: .55s;
  --dur-2: .75s;
  --dur-3: 1s;
  --stagger-step: .06s;
}

/* ---------- Background: grid + cosmic glows (Cleaner) ---------- */
html, body {
  background-color: var(--cl-background-primary);
}
body {
  color: var(--cl-text);
  /* UPDATED: Reduced opacity on glows for cleaner void look */
  background-image:
    radial-gradient(1200px 600px at 78% 8%, rgba(var(--cl-primary-rgb), .08), transparent 40%),
    radial-gradient(900px 500px at 6% 30%, rgba(var(--cl-primary-rgb), .05), transparent 45%),
    radial-gradient(700px 500px at 50% 120%, rgba(105, 65, 198, .08), transparent 40%),
    linear-gradient(180deg, #050505 0%, #020202 100%);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}
/* Grid overlay (Cleaner - Reduced Opacity) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.03)),
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 29px,
      rgba(255,255,255,.02) 30px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 29px,
      rgba(255,255,255,.02) 30px
    );
  mix-blend-mode: overlay;
  opacity: .05; /* Much cleaner than original .12 */
  z-index: 0;
}

/* ---------- General ---------- */
.component { position: relative; z-index: 1; }
.section-title h2, .section-title .h2 {
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}
.section-subtitle p { color: var(--cl-text-dim); }

/* ---------- Navbar (glass, pill icons) ---------- */
.navbar.component{
  margin-top: .75rem;
  background: transparent;           /* was rgba(255,255,255,.02) */
  border: 0;                          /* remove full-width border */
  border-radius: 14px;
  backdrop-filter: none;              /* keep it clean per request */
  box-shadow: none;
}
.navbar .navbar-brand {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700;
}
.navbar .navbar-brand img { height: 28px; width: 28px; border-radius: 8px; }
.navbar .nav-link {
  color: #dcd6e3; font-weight: 500;
}
.navbar .nav-link:hover, .navbar .nav-link:focus {
  color: var(--cl-primary);
}

/* Generic Navbar Buttons - Dark Glass */
.navbar .btn, .navbar .icon-btn {
  border-radius: 9px;
  border: 1px solid var(--cl-border);
  background: var(--card-bg);
  color: #fff;
}

/* FIX: Navbar Primary Button (Dashboard) Specific Override */
/* This ensures the primary button keeps its pink gradient despite the generic rule above */
.navbar .btn.btn-primary {
  background: linear-gradient(180deg, #ff64c8 0%, #ff009f 100%) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(255, 0, 159, 0.35);
}
.navbar .btn.btn-primary:hover {
  background: linear-gradient(180deg, #ff82d3 0%, #ff21ab 100%) !important;
  box-shadow: 0 4px 25px rgba(255, 0, 159, 0.5);
  transform: translateY(-1px);
}

.navbar .icon-btn { display: inline-flex; align-items: center; gap:.4rem; padding:.4rem .6rem; color:#fff; }
.navbar .icon-btn .count {
  top: -6px; right: -6px;
  background: var(--cl-primary);
  color: #000;
}

/* ---------- Buttons (SellAuth theme) ---------- */
/* Base theme tokens (safe fallbacks if not already defined elsewhere) */
:root {
  --cl-primary: #FF009F;
  --cl-primary-rgb: 255, 0, 159; /* derived from #FF009F */
  --cl-border: rgba(255,255,255,0.08);        /* matches primary_border_color */
}

/* Solid primary */
.btn-primary {
  --bs-btn-color: #fff;
  /* Gradient built from theme pink with lighter → base stops */
  --bs-btn-bg: linear-gradient(180deg, #ff64c8 0%, #ff009f 100%);
  --bs-btn-border-color: var(--cl-border, rgba(255,255,255,.15));
  --bs-btn-hover-bg: linear-gradient(180deg, #ff82d3 0%, #ff21ab 100%);
  --bs-btn-active-bg: linear-gradient(180deg, #ff49be 0%, #e60094 100%);
  box-shadow:
    0 8px 24px rgba(var(--cl-primary-rgb, 255,0,159), .25),
    inset 0 1px 0 rgba(255,255,255,.25);
  border: 0;
}

/* Outline primary */
.btn-outline-primary {
  color: var(--cl-primary, #FF009F);
  border-color: rgba(var(--cl-primary-rgb, 255,0,159), .50);
  background: transparent;
}
.btn-outline-primary:hover {
  background: rgba(var(--cl-primary-rgb, 255,0,159), .12);
  border-color: rgba(var(--cl-primary-rgb, 255,0,159), .65);
  color: #fff;
}

/* Optional: dark background harmony (keeps edges subtle on #0a0a0a / #141414) */
.btn-primary,
.btn-outline-primary {
  --bs-btn-focus-shadow-rgb: var(--cl-primary-rgb, 255,0,159);
}


/* ---------- Hero ---------- */
.hero {
  padding-top: 5rem;
  padding-bottom: 3rem;
  background: transparent !important;
}
.hero .bg-overlay { display:none; }
.hero .content h1 {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
}
.hero .content h1 .accent { color: var(--cl-primary); }
.hero .content p {
  max-width: 850px;
  color: var(--cl-text-dim);
}
.hero .actions .btn { padding: .9rem 1.1rem; }

/* KPI tiles under hero */
.hero .stats {
  gap: 1rem;
}
.hero .stats .tile {
  padding: 1rem 1.2rem;
  background: var(--card-bg);
  border: 1px solid var(--cl-border);
  border-radius: 14px;
  min-width: 146px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
}

/* ---------- Products Grid (Shop) ---------- */
.products .card {
  background: var(--card-bg);
  border: 1px solid var(--cl-border);
  border-radius: 16px;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.products .card:hover {
  background: var(--card-bg-hover);
  transform: translateY(-4px);
  border-color: rgba(var(--cl-primary-rgb), .4);
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--cl-primary-rgb), .15) inset;
}
.products .card .card-img-top {
  background: rgba(0,0,0,0.3);
  display: grid; place-items: center;
  height: 190px;
  position: relative;
}
.products .card .card-img-top .overlay {
  opacity: 0; transition: opacity .25s ease;
}
.products .card:hover .card-img-top .overlay { opacity: 1; }
.products .card .price {
  color: #fff; font-weight: 700;
}
.products .card .stock {
  color: var(--cl-primary); font-weight: 600;
}
.products .card .stock-out { color: #ff6b6b; }
.products .card .stock-unlimited { color: #8bdc7b; }
.products .card .card-title { color: #fff; font-weight: 600; }

/* ---------- Product Page ---------- */
.product-wrapper .product {
  background: transparent;
}
.product-wrapper .product .product-preview .image {
  background: var(--card-bg);
  border: 1px solid var(--cl-border);
  border-radius: 16px;
}
.product-wrapper .product .product-details .name {
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}
.product-wrapper .product .badge-price {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--cl-border);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 700;
}
.product-wrapper .product .badge-stock {
  background: rgba(139, 220, 123, .15);
  color: #8bdc7b;
  border: 1px solid rgba(139, 220, 123, .25);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-weight: 600;
}
.product-wrapper .product .stepper {
  background: var(--card-bg);
  border: 1px solid var(--cl-border);
  border-radius: 12px;
  overflow: hidden;
}
.product-wrapper .product .stepper input {
  background: #000;
  color: #fff;
}
.product-wrapper .product .cta {
  gap: .75rem;
}
.product-wrapper .product .cta .btn {
  height: 48px; padding: 0 1.1rem; font-weight: 700;
}

/* ---------- Features Grid ---------- */
.component[data-component-id="features"] .feature {
  background: var(--card-bg);
  border: 1px solid var(--cl-border);
  border-radius: 16px;
  padding: 24px;
  height: 100%;
  transition: border-color .25s ease, transform .25s ease;
}
.component[data-component-id="features"] .feature i {
  font-size: 28px;
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(var(--cl-primary-rgb), .12);
  color: var(--cl-primary);
  margin-bottom: 14px;
}
.component[data-component-id="features"] .feature:hover {
  border-color: rgba(var(--cl-primary-rgb), .4);
  transform: translateY(-3px);
  background: var(--card-bg-hover);
}

/* =========================================================
   Footer — Neon/Glass Upgrade
   ========================================================= */
.footer {
  --beam: linear-gradient(90deg,
            rgba(var(--cl-primary-rgb), .0) 0%,
            rgba(var(--cl-primary-rgb), .45) 35%,
            rgba(255,255,255,.35) 50%,
            rgba(var(--cl-primary-rgb), .45) 65%,
            rgba(var(--cl-primary-rgb), .0) 100%);
  background: transparent;
  border-top: 1px solid var(--cl-border);
  position: relative;
  overflow: clip;
}

/* top neon beam */
.footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0; height: 2px;
  background: var(--beam);
  opacity: .7;
}

/* subtle ambient halo */
.footer__halo {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 220px;
  background: radial-gradient(60% 80% at 50% 0%,
              rgba(var(--cl-primary-rgb), .18) 0%,
              rgba(var(--cl-primary-rgb), .06) 40%,
              transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}

/* brand card */
.footer-brand {
  border: 1px solid var(--cl-border);
}
.footer-brand__logo {
  height: 32px; width: 32px; border-radius: 8px; flex: 0 0 auto;
}
.footer-brand__name {
  color: #fff;
  font-weight: 800;
  letter-spacing: -.01em;
}
.footer-brand__tag { color: var(--cl-text-dim); }

/* groups */
.footer-group { }
.footer-group__title {
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: .75rem;
  opacity: .9;
}

/* links */
.footer-links .footer-link {
  color: var(--cl-text-dim);
  padding: .25rem 0;
  position: relative;
  transition: color .2s ease, transform .2s ease;
}
.footer-links .footer-link:hover {
  color: #fff;
  transform: translateX(2px);
}
.footer-links .footer-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%; height: 1px;
  background: rgba(var(--cl-primary-rgb), .6);
  transition: width .2s ease;
}
.footer-links .footer-link:hover::after { width: 100%; }

/* socials: icon buttons */
.footer-socials .btn-icon {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  color: #fff;
  background: var(--card-bg);
  border: 1px solid var(--cl-border);
  box-shadow:
    0 8px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.footer-socials .btn-icon:hover,
.footer-socials .btn-icon:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--cl-primary-rgb), .4);
  box-shadow:
    0 12px 36px rgba(0,0,0,.45),
    0 0 0 6px rgba(var(--cl-primary-rgb), .12),
    inset 0 1px 0 rgba(255,255,255,.06);
  outline: none;
}

/* bottom bar badges */
.footer-bottom {
  border-top: 1px dashed var(--cl-border);
}
.badge-soft {
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--cl-border);
  font-size: .75rem;
  color: #fff;
  font-weight: 600;
}

/* Previous minimal footer overrides (kept for compatibility) */
.footer .logo img { height: 26px; width: 26px; border-radius: 8px; }
.footer .links a, .footer .socials a { color: var(--cl-text-dim); }
.footer .links a:hover, .footer .socials a:hover { color: #fff; }

/* ---------- Announcement (Ticker) ---------- */
.announcement.component {
  position: fixed;
  bottom: 8px; left: 8px; right: 8px;
  z-index: 50;
  background: rgba(12,12,14,.8); /* Darker announcement bg */
  border: 1px solid var(--cl-border);
  border-radius: 10px;
  padding: .4rem .75rem;
  overflow: hidden;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}
.announcement.component > * { display: inline-block; padding-right: 1.5rem; }
.announcement.component a { color: var(--cl-primary); font-weight: 600; }

/* ---------- Utilities ---------- */
.text-accent { color: var(--cl-primary) !important; }
.bg-glass { background: var(--card-bg); border: 1px solid var(--cl-border); border-radius: 16px; }
.shadow-glow { box-shadow: 0 0 0 1px rgba(var(--cl-primary-rgb), .15) inset, 0 18px 50px rgba(0,0,0,.5); }
.rounded-14 { border-radius: 14px !important; }
.rounded-16 { border-radius: 16px !important; }

/* Dotted star field overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 34%, rgba(255, 153, 213, .45) 0, transparent 60%),
    radial-gradient(2px 2px at 72% 18%, rgba(255, 153, 213, .45) 0, transparent 60%),
    radial-gradient(2px 2px at 30% 72%, rgba(255, 153, 213, .35) 0, transparent 60%),
    radial-gradient(2px 2px at 90% 70%, rgba(255, 153, 213, .35) 0, transparent 60%),
    radial-gradient(2px 2px at 8% 82%, rgba(255, 153, 213, .15) 0, transparent 60%),
    radial-gradient(2px 2px at 56% 64%, rgba(255, 153, 213, .15) 0, transparent 60%);
  opacity: .2;
  z-index: 0;
}
/* =========================================================
   Enhancements — Text blend, FAQ, Search
   ========================================================= */

/* General text blend inside components */
.component p,
.component li,
.component .editor,
.component .editor p {
  color: var(--cl-text-dim);
}
.component h1, .component h2, .component h3, .component h4, .component h5 {
  color: #fff;
}

/* FAQ accordion styling (neon theme) */
.faq .accordion,
.accordion-neon {
  --acc-bg: var(--card-bg);
  --acc-border: var(--cl-border);
}
.accordion-neon .accordion-item {
  background: var(--acc-bg);
  border: 1px solid var(--acc-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: .75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
.accordion-neon .accordion-button {
  background: transparent;
  color: #fff;
  font-weight: 600;
  padding: .9rem 1rem;
  box-shadow: none;
}
.accordion-neon .accordion-button.collapsed {
  color: #dcd6e3;
}
.accordion-neon .accordion-button:focus {
  border-color: rgba(var(--cl-primary-rgb), .35);
  box-shadow: 0 0 0 3px rgba(var(--cl-primary-rgb), .25);
}
.accordion-neon .accordion-button::after {
  filter: invert(1) brightness(1.2);
  opacity: .7;
}
.accordion-neon .accordion-body {
  background: rgba(255,255,255,.02);
  color: var(--cl-text);
  border-top: 1px dashed var(--cl-border);
}

/* Search bar (hero fake search + modal) */
.fake-searchbar {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: .65rem;
  padding: .65rem .85rem;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--cl-border);
  color: var(--cl-text-dim);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.fake-searchbar:hover {
  background: var(--card-bg-hover);
  border-color: rgba(var(--cl-primary-rgb), .35);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 4px rgba(var(--cl-primary-rgb), .08);
  transform: translateY(-1px);
}
.fake-searchbar .form-control {
  background: transparent !important;
  border: 0;
  color: var(--cl-text-dim);
  pointer-events: none;
}

/* Modal search UI */
.search-modal .modal-content {
  background: rgba(10,10,12,.95); /* Darker modal bg */
  border: 1px solid var(--cl-border);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  color: var(--cl-text);
}
.search-modal .searchbar {
  display: flex;
  gap: .6rem;
  padding: .6rem;
  background: rgba(0,0,0,0.3); /* Darker input area */
  border: 1px solid var(--cl-border);
  border-radius: 12px;
}
.search-modal .searchbar input.form-control {
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
}
.search-modal .searchbar input::placeholder { color: var(--cl-text-dim); }
.search-modal .results .result-item {
  padding: .6rem .75rem;
  border-radius: 10px;
  transition: background .2s ease, transform .2s ease;
}
.search-modal .results .result-item:hover {
  background: var(--card-bg-hover);
  transform: translateX(2px);
}

/* Form controls across theme */
.form-control, .form-select, input[type="text"], input[type="email"], input[type="password"] {
  background: #0b0a10;
  border: 1px solid var(--cl-border);
  color: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--cl-primary-rgb), .45);
  box-shadow: 0 0 0 3px rgba(var(--cl-primary-rgb), .15);
  background: #0c0a12;
  color: #fff;
}

/* Stats row spacing tweaks */
.hero .stats { margin-top: 1.25rem; }

/* === NAV + HERO BLEND (no template edits) === */
:root { --nav-height: 100px; } /* SellAuth default nav height used in pro.css' .py-5-nav */
nav.navbar.component,
.navbar,
.navbar[data-component-id="navbar"] {
  background: transparent !important;
  border: 0 !important;             /* remove any full-width bottom line */
  box-shadow: none !important;
  position: relative;
  z-index: 30;                       /* keep the nav above hero overlays */
}

/* Pull the hero up under the navbar so its background begins at page top */
.hero.component {
  margin-top: calc(var(--nav-height) * -1) !important;
  padding-top: calc(var(--nav-height) + 5rem) !important; /* 5rem = your existing .hero top padding */
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

/* If any thin line still appears from other rules, nuke it defensively */
.header, .site-header, .navbar-wrapper, .navbar::after, .navbar::before {
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   FOOTER LOCK — Keep the homepage footer look on all pages
   (additive; does not change the design, only enforces it)
   ========================================================= */
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) {
  --beam: linear-gradient(90deg,
            rgba(var(--cl-primary-rgb), .0) 0%,
            rgba(var(--cl-primary-rgb), .45) 35%,
            rgba(255,255,255,.35) 50%,
            rgba(var(--cl-primary-rgb), .45) 65%,
            rgba(var(--cl-primary-rgb), .0) 100%);
  background: transparent !important;
  border-top: 1px solid var(--cl-border) !important;
  position: relative !important;
  overflow: clip !important;
  color: var(--cl-text) !important;
  box-shadow: none !important;
  padding-top: 2.25rem;
  padding-bottom: 1.75rem;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"])::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0; height: 2px;
  background: var(--beam);
  opacity: .7;
  pointer-events: none;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer__halo {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 220px;
  background: radial-gradient(60% 80% at 50% 0%,
              rgba(var(--cl-primary-rgb), .18) 0%,
              rgba(var(--cl-primary-rgb), .06) 40%,
              transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer-brand {
  border: 1px solid var(--cl-border) !important;
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: .85rem;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer-brand__logo {
  height: 32px; width: 32px; border-radius: 8px; flex: 0 0 auto;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer-brand__name {
  color: #fff;
  font-weight: 800;
  letter-spacing: -.01em;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer-brand__tag {
  color: var(--cl-text-dim);
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer-group__title {
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: .75rem;
  opacity: .9;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer-links .footer-link,
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .links a {
  color: var(--cl-text-dim) !important;
  padding: .25rem 0;
  position: relative;
  transition: color .2s ease, transform .2s ease;
  text-decoration: none !important;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer-links .footer-link:hover,
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .links a:hover {
  color: #fff !important;
  transform: translateX(2px);
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer-links .footer-link::after,
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%; height: 1px;
  background: rgba(var(--cl-primary-rgb), .6);
  transition: width .2s ease;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer-links .footer-link:hover::after,
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .links a:hover::after {
  width: 100%;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer-socials .btn-icon,
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .socials a {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  color: #fff !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--cl-border) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer-socials .btn-icon:hover,
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .socials a:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--cl-primary-rgb), .4) !important;
  box-shadow:
    0 12px 36px rgba(0,0,0,.45),
    0 0 0 6px rgba(var(--cl-primary-rgb), .12),
    inset 0 1px 0 rgba(255,255,255,.06);
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .footer-bottom {
  border-top: 1px dashed var(--cl-border) !important;
  margin-top: 1.25rem;
  padding-top: .9rem;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .logo img {
  height: 26px; width: 26px; border-radius: 8px;
}
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .card,
:where(.footer, footer.footer, .site-footer, .component[data-component-id="footer"]) .widget {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   ✨ Motion System — Professional Text Animations
   (Subtle, GPU-friendly; respects reduced motion)
   ========================================================= */

/* Keyframes */
@keyframes rise-fade {
  from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);   filter: blur(0); }
}
@keyframes slide-left-fade {
  from { opacity: 0; transform: translate3d(16px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes slide-right-fade {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes underline-in {
  from { transform: scaleX(0); opacity: .0; }
  to   { transform: scaleX(1); opacity: .9; }
}
@keyframes sheen {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Base reveal utilities (add to any element) */
.reveal    { opacity: 0; will-change: opacity, transform; }
.reveal-up { animation: rise-fade var(--dur-1) var(--ease-out-3) both; }
.reveal-left { animation: slide-right-fade var(--dur-1) var(--ease-out-3) both; }
.reveal-right{ animation: slide-left-fade var(--dur-1) var(--ease-out-3) both; }

/* Stagger helper: apply to a container, children auto-delay */
.stagger > * { animation-delay: 0s; }
.stagger > * { animation-duration: var(--dur-1); animation-timing-function: var(--ease-out-3); animation-fill-mode: both; opacity: 0; transform: translate3d(0, 16px, 0); filter: blur(6px); }
.stagger > * { animation-name: rise-fade; }
.stagger > *:nth-child(1) { animation-delay: calc(0 * var(--stagger-step)); }
.stagger > *:nth-child(2) { animation-delay: calc(1 * var(--stagger-step)); }
.stagger > *:nth-child(3) { animation-delay: calc(2 * var(--stagger-step)); }
.stagger > *:nth-child(4) { animation-delay: calc(3 * var(--stagger-step)); }
.stagger > *:nth-child(5) { animation-delay: calc(4 * var(--stagger-step)); }
.stagger > *:nth-child(6) { animation-delay: calc(5 * var(--stagger-step)); }
.stagger > *:nth-child(7) { animation-delay: calc(6 * var(--stagger-step)); }
.stagger > *:nth-child(8) { animation-delay: calc(7 * var(--stagger-step)); }

/* Animated underline utility (attach to headings/links) */
.underline-animate {
  position: relative;
}
.underline-animate::after {
  content: "";
  position: absolute;
  left: 0; bottom: -.35rem;
  height: 2px; width: 100%;
  background: linear-gradient(90deg,
     rgba(var(--cl-primary-rgb), 0) 0%,
     rgba(var(--cl-primary-rgb), .8) 20%,
     #fff 50%,
     rgba(var(--cl-primary-rgb), .8) 80%,
     rgba(var(--cl-primary-rgb), 0) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: .8;
  animation: underline-in .9s var(--ease-spring-1) .2s both;
}

/* Text sheen utility (SellAuth theme colors) */
.text-sheen {
  background-image: linear-gradient(
    90deg,
    #ffffff 0%,
    #FF99D9 25%,  /* light tint of #FF009F */
    #ffffff 50%,
    #FF99D9 75%,
    #ffffff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-sheen.shine-on { animation: sheen 2.2s linear 1; }
.text-sheen.hover-sheen:hover { animation: sheen 2.2s linear 1; }

/* Optional typing caret (append element with class = type-caret) */
.type-caret {
  display: inline-block;
  width: .08em; height: 1em;
  background: currentColor;
  vertical-align: -0.15em;
  margin-left: .1em;
  animation: caret-blink 1.2s steps(1, end) infinite;
  opacity: .8;
}

/* ===== Auto-apply tasteful animations to key theme areas ===== */

/* Hero load-in */
.hero .content h1 {
  animation: rise-fade var(--dur-2) var(--ease-out-3) .05s both;
}
.hero .content h1 .accent {
  /* allow optional sheen on hover without forcing animation */
  background-image: linear-gradient(90deg, #ffffff 0%, #ffb3e6 50%, #ffffff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .content h1 .accent:hover { animation: sheen 2s linear 1; }
.hero .content p {
  animation: rise-fade var(--dur-2) var(--ease-out-3) .18s both;
}
.hero .actions .btn {
  animation: rise-fade var(--dur-1) var(--ease-out-3) .28s both;
}
.hero .stats.stagger > * { /* bonus stagger for tiles if container has .stagger */
  /* already defined by .stagger rules above */
}

/* Section titles & subtitles */
.section-title h2, .section-title .h2 {
  position: relative;
  animation: rise-fade var(--dur-1) var(--ease-out-3) .08s both;
}
.section-title h2.underline-animate::after,
.section-title .h2.underline-animate::after { /* use .underline-animate to enable animated line */
  /* already handled by utility */
}
.section-subtitle p {
  animation: rise-fade var(--dur-1) var(--ease-out-3) .16s both;
}

/* Feature headings */
.component[data-component-id="features"] .feature h5,
.component[data-component-id="features"] .feature .title,
.component[data-component-id="features"] .feature strong {
  animation: rise-fade var(--dur-1) var(--ease-out-3) .06s both;
}

/* Product name + price reveal */
.product-wrapper .product .product-details .name {
  animation: rise-fade var(--dur-1) var(--ease-out-3) .05s both;
}
.product-wrapper .product .badge-price,
.product-wrapper .product .badge-stock {
  animation: slide-left-fade var(--dur-1) var(--ease-out-3) .12s both;
}

/* Product cards: title on hover + subtle load-in */
.products .card .card-title {
  transition: transform .25s var(--ease-out-3);
  animation: rise-fade var(--dur-1) var(--ease-out-3) .04s both;
}
.products .card:hover .card-title {
  transform: translateY(-1px);
}

/* Footer group titles gentle entrance (first time) */
.footer-group__title {
  animation: rise-fade var(--dur-1) var(--ease-out-3) .05s both;
}

/* =========================================================
   Reduced Motion — Respect user preferences
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
    filter: none !important;
  }
}

/* =========================================================
   End Motion System
   ========================================================= */


/* Container – still as a bottom popup; same position as before */
.announcement-popup {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 60;
  width: 100%;
  max-width: 1100px;
  padding: 0 1.5rem;
  pointer-events: none;
}

.announcement-popup-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 9999px; /* extra round for perfect pill */
  /* overflow: hidden;  <-- REMOVED so the remind menu is visible */
  padding: 0.75rem 1.25rem;
  /* Updated to Void Dark Gradient */
  background:
    linear-gradient(
      90deg,
      var(--cl-primary) 0%,
      rgba(255, 0, 159, 0.3) 35%,
      rgba(10, 10, 12, 0.98) 60%,
      rgba(10, 10, 12, 0.98) 100%
    );
  box-shadow: 0 0 35px rgba(255, 0, 159, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Left section */
.announcement-popup-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.announcement-popup-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}

.announcement-popup-label-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cl-primary);
}

.announcement-popup-label-text {
  font-weight: 600;
}

.announcement-popup-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right section: copy / link / close all in same line */
.announcement-popup-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative; /* so reminder menu anchors to this */
}

/* Buttons */
.announcement-popup-btn {
  border-radius: 999px;
  font-size: 0.75rem;
  border: none;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.9rem;
  text-decoration: none;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.announcement-popup-btn-primary {
  background: #fff;
  color: #000;
  font-weight: 600;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.2);
}

.announcement-popup-btn-primary:hover {
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.announcement-popup-btn-ghost {
  background: rgba(0, 0, 0, 0.6);
  color: var(--cl-primary);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.announcement-popup-btn-ghost:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-1px);
}

.announcement-popup-icon svg {
  width: 14px;
  height: 14px;
}

/* Close button on the far right */
.announcement-popup-close {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0 0.2rem;
  line-height: 1;
  transition: color 0.18s ease, transform 0.18s ease;
}

.announcement-popup-close:hover {
  color: #fff;
  transform: scale(1.05);
}

/* Reminder menu (opens upward clean vertical list) */
.announcement-remind-menu {
  position: absolute;
  bottom: 120%;
  right: 0;
  margin-bottom: 0.4rem;

  padding: 0.75rem 0.85rem;

  border-radius: 0.75rem;
  background: rgba(10, 10, 12, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.6);

  width: 170px;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 70;
}

.announcement-remind-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.announcement-remind-title {
  font-weight: 600;
  margin-bottom: 0.45rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
}

/* Vertical list layout */
.announcement-remind-options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Single list item */
.announcement-remind-btn {
  width: 100%;
  text-align: left;
  border-radius: 0.55rem;

  padding: 0.45rem 0.6rem;
  font-size: 0.78rem;
  cursor: pointer;

  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);

  transition: background 0.15s ease, color 0.15s ease;
  border: none;
}

.announcement-remind-btn:hover {
  background: var(--cl-primary);
  color: #000;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .announcement-popup {
    bottom: 1rem;
    padding: 0 0.75rem;
  }

  .announcement-popup-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 1rem;
  }

  .announcement-popup-main {
    width: 100%;
  }

  .announcement-popup-text {
    white-space: normal;
  }

  .announcement-popup-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .announcement-remind-menu {
    right: auto;
    left: 0;
  }
}