/* ==========================================================================
   stake-v46.css — Stake-level polish (visual only, no mechanics touched)
   - Manual / Auto segmented control  -> exact Stake pill styling
   - Standard / Side Bet segmented control -> same Stake pill language
   - Bet selection buttons + Bet CTA + Autobet/Settings -> flatter, richer
   ========================================================================== */

:root {
  --stk-track: #0f212e;
  --stk-seg: #2f4553;
  --stk-seg-hi: #3a5364;
  --stk-line: rgba(255, 255, 255, 0.07);
  --stk-blue: #1a80f5;
  --stk-blue-2: #0e63d0;
}

/* ---------------- Manual / Auto (icon rail segmented control) ------------- */
section:has(> div:last-child > button[aria-label="Game rules"]) > div:nth-last-child(2) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  padding: 4px !important;
  border-radius: 9999px !important;
  background: var(--stk-track) !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px var(--stk-line) !important;
  margin-top: 8px !important;
}

section:has(> div:last-child > button[aria-label="Game rules"]) > div:nth-last-child(2) > button {
  padding: 9px 0 !important;
  border-radius: 9999px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.62) !important;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease !important;
}

section:has(> div:last-child > button[aria-label="Game rules"])
  > div:nth-last-child(2)
  > button::after {
  font-family: "Chakra Petch", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Active (Manual) segment — Stake grey-blue pill with hairline edge */
section:has(> div:last-child > button[aria-label="Game rules"])
  > div:nth-last-child(2)
  > button:last-child {
  background: var(--stk-seg) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 8px -4px rgba(0, 0, 0, 0.6) !important;
}

section:has(> div:last-child > button[aria-label="Game rules"])
  > div:nth-last-child(2)
  > button:last-child:hover {
  background: var(--stk-seg-hi) !important;
}

section:has(> div:last-child > button[aria-label="Game rules"])
  > div:nth-last-child(2)
  > button:first-child:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* ---------------- Standard / Side Bet (same pill language) ---------------- */
section:has(> div:last-child > button[aria-label="Game rules"]) > div:first-child {
  gap: 0 !important;
  padding: 4px !important;
  background: var(--stk-track) !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px var(--stk-line) !important;
}

section:has(> div:last-child > button[aria-label="Game rules"]) > div:first-child > button {
  padding: 9px 0 !important;
  font-family: "Chakra Petch", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.62) !important;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease !important;
}

section:has(> div:last-child > button[aria-label="Game rules"]) > div:first-child > button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* active segment: app paints a blue gradient — repaint as Stake grey pill.
   Inactive segments are identified by their muted text class. */
section:has(> div:last-child > button[aria-label="Game rules"]) > div:first-child > button {
  background: var(--stk-seg) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 8px -4px rgba(0, 0, 0, 0.6) !important;
}

section:has(> div:last-child > button[aria-label="Game rules"])
  > div:first-child
  > button[class*="text-white/45"] {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.62) !important;
}

section:has(> div:last-child > button[aria-label="Game rules"])
  > div:first-child
  > button[class*="text-white/45"]:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* ---------------- Bet CTA — Stake blue, flat and confident --------------- */
section:has(> div:last-child > button[aria-label="Game rules"]) button[class*="#3a9bff"] {
  background: var(--stk-blue) !important;
  background-image: linear-gradient(180deg, #2a8bf7 0%, var(--stk-blue) 100%) !important;
  border-radius: 8px !important;
  box-shadow:
    0 10px 24px -14px rgba(26, 128, 245, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  letter-spacing: 0.01em !important;
}

section:has(> div:last-child > button[aria-label="Game rules"]) button[class*="#3a9bff"]:hover {
  filter: brightness(1.08) !important;
}

/* ---------------- Selection buttons — cleaner Stake surfaces ------------- */
section:has(> div:last-child > button[aria-label="Game rules"]) button[class*="#38505f"] {
  background-image: none !important;
  background: var(--stk-seg) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px var(--stk-line) !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

section:has(> div:last-child > button[aria-label="Game rules"]) button[class*="#38505f"]:hover {
  background: var(--stk-seg-hi) !important;
}

/* keep the active/selected states punchy but flatter */
section:has(> div:last-child > button[aria-label="Game rules"]) button[class*="#2f93f5"],
section:has(> div:last-child > button[aria-label="Game rules"]) button[class*="#38ff3c"],
section:has(> div:last-child > button[aria-label="Game rules"]) button[class*="#f0405e"] {
  border-radius: 8px !important;
}

/* Inputs: crisper wells */
section:has(> div:last-child > button[aria-label="Game rules"]) div[class*="#0b1a24"] {
  border-radius: 8px !important;
}

/* ---- Specificity escalation: beat the older v43 overrides -------------- */
html body main section[class*="linear-gradient(180deg,#2f4f61"]
  > div:first-child[class][class]
  > button[class][class][class][class][class*="linear-gradient(180deg,#2f93f5"] {
  background: var(--stk-seg) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 8px -4px rgba(0, 0, 0, 0.6) !important;
}

html body main section[class*="linear-gradient(180deg,#2f4f61"]
  > div:first-child[class][class]
  > button[class][class][class][class][class*="linear-gradient(180deg,#2f93f5"]:hover {
  background: var(--stk-seg-hi) !important;
  background-image: none !important;
}

/* Standard / Side Bet track */
html body main section[class*="linear-gradient(180deg,#2f4f61"] > div:first-child[class][class] {
  background: var(--stk-track) !important;
  gap: 0 !important;
  padding: 4px !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px var(--stk-line) !important;
}

/* Bet CTA */
html body main section[class*="linear-gradient(180deg,#2f4f61"]
  button[class][class][class][class][class*="linear-gradient(180deg,#3a9bff"] {
  background: var(--stk-blue) !important;
  background-image: linear-gradient(180deg, #2a8bf7 0%, var(--stk-blue) 100%) !important;
  border-radius: 8px !important;
  box-shadow:
    0 10px 24px -14px rgba(26, 128, 245, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* ---- Manual / Auto: Manual on the left, only active segment filled ------ */
html body main section[class*="linear-gradient(180deg,#2f4f61"]
  > div:nth-last-child(2)[class][class]
  > button[class][class][class]:first-child {
  order: 2 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.62) !important;
}

html body main section[class*="linear-gradient(180deg,#2f4f61"]
  > div:nth-last-child(2)[class][class]
  > button[class][class][class]:first-child:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

html body main section[class*="linear-gradient(180deg,#2f4f61"]
  > div:nth-last-child(2)[class][class]
  > button[class][class][class]:last-child {
  order: 1 !important;
  background: var(--stk-seg) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 8px -4px rgba(0, 0, 0, 0.6) !important;
}

/* v47 fix — "Manual" segment is a plain label: clicking it must do nothing */
section:has(> div:last-child > button[aria-label="Game rules"])
  > div:nth-last-child(2)
  > button:last-child {
  pointer-events: none !important;
  cursor: default !important;
}