/* ═══════════════════════════════════════════════════════════════════════
   ANANAS GAMING — brand layer
   Loaded after pro.css, so everything here wins.

   Palette sampled from the brand GFX (pineapple mascot + banner):
     gold        #ffc011  primary accent (banner lettering / pineapple body)
     gold light  #ffd447  hover + highlights
     gold deep   #ef9c0a  gradient foot, pressed states
     leaf        #4ade80  kept for success / "in stock" (mascot leaves)
     ink         #1c1403  text that sits ON gold — never white, see below
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --an-gold: #ffc011;
  --an-gold-light: #ffd447;
  --an-gold-deep: #ef9c0a;
  --an-gold-pale: #f5e1a9;
  --an-ink: #1c1403;
}

/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background: var(--an-gold-deep);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--an-gold);
}

/* ── Text selection ─────────────────────────────────────────────────── */
::selection {
  background: var(--an-gold);
  color: var(--an-ink);
}

/* ── Ink on gold ────────────────────────────────────────────────────────
   pro.css pairs `background: var(--cl-accent)` with `color: #ffffff` in a
   dozen places. That was borderline on the old cyan; on gold it lands near
   1.7:1 and is unreadable. Every accent-filled surface gets dark ink. */

.btn-primary {
  --bs-btn-color: var(--an-ink);
  --bs-btn-hover-color: var(--an-ink);
  --bs-btn-active-color: var(--an-ink);
  --bs-btn-disabled-color: var(--an-ink);
}

.btn-outline-primary {
  --bs-btn-hover-color: var(--an-ink);
  --bs-btn-active-color: var(--an-ink);
}

.dropdown-menu,
.dropdown-menu-dark {
  --bs-dropdown-link-active-color: var(--an-ink);
}

.nav-pills {
  --bs-nav-pills-link-active-color: var(--an-ink);
}

.pagination {
  --bs-pagination-active-color: var(--an-ink);
}

.list-group {
  --bs-list-group-active-color: var(--an-ink);
}

.announcement,
.announcement a,
.navbar .cart .btn .count,
.hero .search-modal .product .image .badges div,
.socials .list .social .left svg,
.products .card .card-img-top .badges div,
.product-wrapper .badges div,
.product-wrapper .badges a,
.products .card .card-img-top .overlay .btn:hover,
.progress-bar {
  color: var(--an-ink);
}

/* ── Focus rings ────────────────────────────────────────────────────── */
:focus-visible {
  outline-color: var(--an-gold);
}