/* ═══════════════════════════════════════════════════════════════════
   STAKE-STYLE SIDEBAR SKIN
   Colours and geometry measured from a Stake.com sidebar screenshot:
     column #0e202d · menu box #162b39, 8px radius, 10px gutter
     48px rows · 1px divider #3e586c inset 8px · icons/chevrons #a1bfd6
     bold white labels · top-bar buttons #213545
   Loaded right after sidebar.css (see Sidebar.tsx) and only overrides its
   look. The collapsed-desktop rules in sidebar.css are more specific
   (body:not(.sidebar-open) …) so the 52px rail keeps its own layout.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --sb-icon: #a1bfd6;
  --sb-divider: #3e586c;
  /* Tints the white SVG icon files to --sb-icon (#a1bfd6). */
  --sb-icon-filter: brightness(0) saturate(100%) invert(74%) sepia(13%) saturate(504%) hue-rotate(162deg) brightness(95%) contrast(101%);
}

/* ── Column ── */
.sidebar { background: var(--bg-sidebar); border-right: none; }

/* ── Top bar: same colour as the column, soft shadow underneath ── */
.sidebar-top-nav { position: relative; z-index: 1; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.18); }
.sidebar-menu-btn,
.sidebar-menu-btn:focus { background: transparent; }
.sidebar-top-nav .sidebar-menu-btn { width: 40px; height: 40px; }
@media (hover: hover) and (pointer: fine) {
  .sidebar-menu-btn:hover { opacity: 1; background: var(--bg-secondary); }
}
.sidebar-menu-btn img { filter: var(--sb-icon-filter); }

/* Search: styled like Stake's top-bar "Casino / Sports" buttons */
.sidebar-search-bar { height: 40px; min-height: 40px; background: var(--bg-secondary); border: none; border-radius: var(--radius-md); transition: background var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)); }
@media (hover: hover) { .sidebar-search-bar:hover { background: var(--bg-card); } }
.sidebar-search-bar .search-icon { opacity: 1; filter: var(--sb-icon-filter); }
.sidebar-search-bar input::placeholder { color: #fff; font-family: "RM Neue-Bold", Helvetica, Arial, sans-serif; }

/* ── Menu box ── */
/* Width lives in --sidebar-w (frame.css :root). Box sits 18px below the top
   bar and 14px in from the column edges; rows have 20px side padding. */
@media (min-width: 769px) {
  .sidebar-top-nav { padding: 0 14px; }
  .sidebar-inner { padding: 18px 14px 16px; }
}
.sidebar-inner { gap: 12px; }
/* No inner padding: the first row sits flush with the box's top edge (Stake),
   so an active/hovered first row doesn't leave a strip of box colour above it. */
.sidebar-menu-wrapper { background: var(--bg-primary); border-bottom: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 0; overflow: hidden; flex-shrink: 0; }
/* flex-shrink: 0 — the sidebar column is a flex container, and an overflow:hidden
   flex item may shrink below its content. Without this, opening Slots/Originals/
   Rewards squeezed the box and clipped the rows instead of letting the sidebar scroll. */
.sidebar-nav-menu { gap: 0; }
.sidebar-nav-divider { background: var(--sb-divider); margin: 10px 12px; }

/* Rows */
.sidebar-pc-menu-item,
.sidebar-pc-group-header { min-height: 48px; padding: 0 20px; gap: 12px; border-radius: 0; background: transparent; }
.sidebar-pc-text { color: #fff; font-family: "RM Neue-Bold", Helvetica, Arial, sans-serif; }
@media (hover: hover) and (pointer: fine) {
  .sidebar-pc-menu-item:hover,
  .sidebar-pc-group-header:hover { background: var(--bg-secondary); }
}
.sidebar-pc-menu-item.active { background: var(--bg-secondary); color: #fff; }
.sidebar-pc-menu-item.is-pressed,
.sidebar-pc-group-header.is-pressed,
.sidebar-pc-menu-item.active.is-pressed { background: var(--bg-card); }

/* Icons: Stake blue-grey, white when the row is active/hovered.
   Only top-level rows — submenu rows carry coloured provider logos. */
.sidebar-pc-icon { color: var(--sb-icon); }
.sidebar-nav-menu > .sidebar-pc-menu-item .sidebar-pc-icon img,
.sidebar-pc-group-header .sidebar-pc-icon img,
.sidebar-rewards-link .sidebar-pc-icon img { filter: var(--sb-icon-filter); }
.sidebar-nav-menu > .sidebar-pc-menu-item.active .sidebar-pc-icon img,
.sidebar-rewards-link.active .sidebar-pc-icon img { filter: none; }
/* The main rows' icons are masks now (Sidebar.tsx Glyph): the same blue-grey / white, without a filter. */
.sidebar-pc-glyph { color: var(--sb-icon); }
.sidebar-nav-menu > .sidebar-pc-menu-item.active .sidebar-pc-glyph { color: #fff; }
.sidebar-pc-menu-item.active .sidebar-pc-icon,
.sidebar-rewards-link svg,
.sidebar-rewards-link.active svg { color: var(--sb-icon); }
@media (hover: hover) and (pointer: fine) {
  .sidebar-nav-menu > .sidebar-pc-menu-item:hover .sidebar-pc-icon img,
  .sidebar-pc-group-header:hover .sidebar-pc-icon img,
  .sidebar-rewards-link:hover .sidebar-pc-icon img { filter: none; }
  .sidebar-nav-menu > .sidebar-pc-menu-item:hover .sidebar-pc-glyph,
  .sidebar-pc-group-header:hover .sidebar-pc-glyph { color: #fff; }
  .sidebar-pc-menu-item:hover .sidebar-pc-icon,
  .sidebar-pc-group-header:hover .sidebar-pc-icon,
  .sidebar-rewards-link:hover svg { color: #fff; }
}

/* Groups (Slots / Originals): plain rows inside the box,
   chevron without its own button background. */
.sidebar-pc-menu-group { margin: 0; background: transparent; border: none; border-radius: 0; }
.sidebar-pc-expand,
.sidebar-pc-expand:hover { width: 20px; height: 20px; min-width: 20px; min-height: 20px; background: transparent; }
.sidebar-pc-expand svg { width: 18px; height: 18px; stroke: var(--sb-icon); }
.sidebar-pc-submenu { padding: 0; }
.sidebar-pc-submenu.open { padding: 0 0 4px; }
.sidebar-pc-submenu-inner { gap: 0; }
.sidebar-pc-subitem { min-height: 44px; padding: 0 20px 0 30px !important; border-radius: 0; }

/* ── Footer (currency / language): same box style ── */
.sidebar-section-footer { gap: 12px; }
.sidebar-footer-item-wrap { background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; flex-shrink: 0; }
.sidebar-footer-row { min-height: 48px; padding: 0 20px; gap: 12px; border-radius: 0; }
@media (hover: hover) and (pointer: fine) {
  .sidebar-language-btn:hover { background: var(--bg-secondary); }
}
.sidebar-language-dropdown { background: var(--bg-primary); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.language-option { border-bottom-color: var(--sb-divider); }
@media (hover: hover) and (pointer: fine) {
  .language-option:hover { background: var(--bg-secondary); }
}
.language-option.active { background: var(--bg-secondary); color: #fff; }

/* Collapsed rail (52px), tidy pass 2026-10-10: its tiles and its one divider (rules: the CLOSED
   DESKTOP MENU block in sidebar.css). The site's own colours: the column is --bg-sidebar, hover and
   the current page its next lighter shades. */
:root {
  --sb-tile-hover: var(--bg-primary);    /* #162b39 */
  --sb-tile-active: var(--bg-secondary); /* #213545 */
  --sb-tile-press: var(--bg-card);       /* #2a4152 */
  --sb-rail-divider: var(--border-color);
}


/* "Soon" tag after a menu label (Live Casino, Game Shows: no playable games
   yet). Inside .sidebar-pc-text, so it hides with the label on the collapsed
   rail (the tooltip there says "(Soon)"). Quiet on purpose. */
.sidebar-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  vertical-align: 2px;
}