/* Odds Builder: an ask box, fine-tune controls and the booked slip. */
.ob-hero h1 { line-height: 1.08; }
.ob-ask { margin-top: 22px; padding: 20px; border: 1px solid var(--line, #24485f); border-radius: 20px; background: linear-gradient(160deg, rgba(19,48,74,.9), rgba(13,34,53,.9)); }
.ob-label { display: block; margin-bottom: 10px; font: 700 18px/1.2 var(--sp-display, "Space Grotesk", system-ui); color: var(--ink, #f4fbff); }
.ob-input { display: flex; gap: 10px; align-items: stretch; }
.ob-input textarea { flex: 1; min-width: 0; resize: vertical; min-height: 64px; padding: 14px 16px; border: 1px solid var(--line-strong, #2f6a80); border-radius: 14px; background: #07192a; color: var(--ink, #f4fbff); font: 500 16px/1.45 var(--sp-body, "Manrope", system-ui); }
.ob-input textarea:focus { outline: 2px solid #69e1dc; outline-offset: 1px; border-color: transparent; }
.ob-go { flex: none; padding: 0 22px; border: 0; border-radius: 14px; background: #f5b54a; color: #2a1d05; font: 800 15px/1 var(--sp-body, "Manrope", system-ui); cursor: pointer; }
.ob-go:hover { filter: brightness(1.06); }
.ob-go:disabled { opacity: .7; cursor: progress; }
.ob-examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.ob-examples span { color: var(--muted, #9db7c8); font-size: 13px; font-weight: 700; }
.ob-examples button { padding: 7px 12px; border: 1px solid var(--line, #24485f); border-radius: 999px; background: rgba(255,255,255,.03); color: #c9dbe7; font: 600 13px/1.2 var(--sp-body, system-ui); cursor: pointer; }
.ob-examples button:hover { border-color: #69e1dc; color: #fff; }

.ob-tune { margin-top: 16px; border-top: 1px solid var(--line, #24485f); padding-top: 12px; }
.ob-tune summary { cursor: pointer; font-weight: 800; color: var(--ink, #f4fbff); list-style-position: outside; }
.ob-tune summary small { display: block; margin-top: 4px; color: #69e1dc; font-weight: 700; font-size: 13px; }
.ob-grid { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 820px) { .ob-grid { grid-template-columns: 1fr 1fr; } .ob-row { grid-column: 1 / -1; } }
.ob-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.ob-field legend { margin-bottom: 8px; padding: 0; color: var(--muted, #9db7c8); font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.ob-field legend small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.ob-row { display: flex; flex-wrap: wrap; gap: 16px 22px; }
.ob-odds { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ob-field input[type=number] { width: 96px; padding: 9px 12px; border: 1px solid var(--line-strong, #2f6a80); border-radius: 10px; background: #07192a; color: var(--ink, #f4fbff); font: 700 15px/1.2 var(--sp-body, system-ui); }
.ob-chips, .ob-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-chips button, .ob-seg button { padding: 8px 12px; border: 1px solid var(--line, #24485f); border-radius: 999px; background: transparent; color: #c9dbe7; font: 700 13px/1.1 var(--sp-body, system-ui); cursor: pointer; }
.ob-seg button { border-radius: 10px; }
.ob-chips button:hover, .ob-seg button:hover { border-color: #69e1dc; }
.ob-chips button.is-on, .ob-seg button.is-on { background: #69e1dc; border-color: #69e1dc; color: #072530; }
.ob-help { margin: 12px 0 0; color: var(--muted, #9db7c8); font-size: 12.5px; line-height: 1.5; }
.ob-help b { color: #c9dbe7; }
.ob-plan { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(245,181,74,.08); color: #f3dcae; font-size: 13px; }
.ob-plan a { color: #f5b54a; font-weight: 800; }

#ob-result { scroll-margin-top: 90px; }
.ob-loading { margin-top: 20px; padding: 22px; border-radius: 16px; border: 1px dashed var(--line, #24485f); color: #c9dbe7; text-align: center; animation: ob-pulse 1.4s ease-in-out infinite; }
@keyframes ob-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ob-loading { animation: none; } }
.ob-answer { margin-top: 20px; padding: 20px; border-radius: 20px; border: 1px solid #6b4d16; background: linear-gradient(160deg, #1c2a1a00, #13304a 30%, #0d2235); }
.ob-answer h2 { margin: 0 0 10px; font: 700 20px/1.25 var(--sp-display, "Space Grotesk", system-ui); }
.ob-answer p { margin: 0 0 8px; color: #c9dbe7; line-height: 1.55; font-size: 14.5px; }
.ob-code { margin-top: 14px; padding: 14px; border-radius: 14px; background: #07192a; border: 1px solid var(--line-strong, #2f6a80); }
.ob-code-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.ob-code-label { color: var(--muted, #9db7c8); font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.ob-code-value { padding: 6px 12px; border-radius: 10px; background: rgba(105,225,220,.12); color: #69e1dc; font: 700 22px/1.1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 1.5px; user-select: all; }
.ob-copy, .ob-open { padding: 9px 14px; border-radius: 10px; font: 800 13.5px/1 var(--sp-body, system-ui); text-decoration: none; cursor: pointer; }
.ob-copy { border: 1px solid #69e1dc; background: transparent; color: #69e1dc; }
.ob-open { background: #f5b54a; color: #2a1d05 !important; border: 0; }
.ob-code-note { margin: 10px 0 0 !important; font-size: 13px !important; color: var(--muted, #9db7c8) !important; }
.ob-slip { margin-top: 18px; }
.ob-agree { color: #4fd69c !important; font-weight: 800; }
.ob-gate { margin-top: 20px; padding: 22px; border-radius: 16px; border: 1px solid #6b4d16; background: rgba(245,181,74,.06); text-align: center; }
.ob-gate p { margin: 0 0 12px; color: #f4fbff; }
.ob-gate-cta { display: inline-block; padding: 11px 18px; border-radius: 12px; background: #f5b54a; color: #2a1d05 !important; font-weight: 800; text-decoration: none; }
@media (max-width: 640px) {
  .ob-ask { padding: 16px; border-radius: 16px; }
  .ob-input { flex-direction: column; }
  .ob-go { padding: 14px; }
  .ob-answer { padding: 16px; }
  .ob-code-value { font-size: 20px; }
}

/* Market panels: exact markets per sport. */
.ob-wide { grid-column: 1 / -1; }
.ob-panels { display: grid; gap: 12px; }
@media (min-width: 980px) { .ob-panels { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .ob-panels > .ob-panel:only-child { grid-column: 1 / -1; max-width: 760px; } }
.ob-panel { padding: 12px 14px 14px; border: 1px solid var(--line, #24485f); border-radius: 14px; background: rgba(7,25,42,.55); min-width: 0; }
.ob-panel[hidden] { display: none; }
.ob-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ob-panel-head h4 { margin: 0 auto 0 0; font: 800 15px/1.2 var(--sp-body, system-ui); color: var(--ink, #f4fbff); }
.ob-mini { padding: 5px 10px; border: 1px solid var(--line, #24485f); border-radius: 8px; background: transparent; color: #9db7c8; font: 700 12px/1 var(--sp-body, system-ui); cursor: pointer; }
.ob-mini:hover { color: #fff; border-color: #69e1dc; }
.ob-grid-markets { display: grid; gap: 6px 6px; align-items: center; }
.ob-cols-2 { grid-template-columns: minmax(110px, 1fr) repeat(2, minmax(0, 1fr)); }
.ob-cols-4 { grid-template-columns: minmax(96px, 1.3fr) repeat(4, minmax(0, 1fr)); }
.ob-rowhead { color: #c9dbe7; font-size: 13px; font-weight: 700; }
.ob-colhead { color: var(--muted, #9db7c8); font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; text-align: center; }
.ob-grid-markets button { padding: 8px 6px; border: 1px solid var(--line, #24485f); border-radius: 9px; background: transparent; color: #c9dbe7; font: 700 13px/1.1 var(--sp-body, system-ui); cursor: pointer; min-width: 0; }
.ob-grid-markets button:hover { border-color: #69e1dc; }
.ob-grid-markets button.is-on { background: #69e1dc; border-color: #69e1dc; color: #072530; }
.ob-grid-markets button.is-on::before { content: '✓ '; }
@media (max-width: 640px) {
  .ob-cols-4 { grid-template-columns: minmax(70px, 1.1fr) repeat(4, minmax(0, 1fr)); gap: 5px 4px; }
  .ob-grid-markets button { padding: 8px 2px; font-size: 12px; }
  .ob-grid-markets button.is-on::before { content: ''; }
  .ob-colhead { font-size: 9.5px; letter-spacing: 0; }
  .ob-rowhead { font-size: 12px; }
}

/* Games per sport. */
.ob-counts { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.ob-count { display: flex; align-items: center; gap: 8px; color: #c9dbe7; font-size: 13px; font-weight: 700; }
.ob-count input { width: 74px !important; }
.ob-counts-help { margin: 8px 0 0; color: var(--muted, #9db7c8); font-size: 12px; line-height: 1.45; }
.ob-panel-hockey .ob-grid-markets { grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr); }

/* SportyBet basket status. */
.ob-basket { margin: 18px 0 0; color: #c9dbe7; font-size: 13.5px; line-height: 1.5; }
.ob-basket b { color: #69e1dc; }
.ob-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: #4fd69c; box-shadow: 0 0 0 3px rgba(79,214,156,.18); vertical-align: 1px; }
.ob-admin { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--line, #24485f); border-radius: 10px; font-size: 12.5px; }
.ob-admin summary { cursor: pointer; font-weight: 800; color: #f5b54a; }
.ob-admin p { margin: 6px 0 0; } .ob-admin ul { margin: 6px 0 0; padding-left: 18px; max-height: 260px; overflow: auto; }

/* Premium: badge, locked slip and the unlock pop-up. */
.ob-badge { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: #f5b54a; color: #2a1d05; font-size: 11px; font-weight: 900; letter-spacing: .8px; }
.ob-plan b { color: #f5b54a; }
.ob-locked { border-color: #f5b54a; box-shadow: 0 0 0 1px rgba(245,181,74,.25), 0 18px 40px rgba(0,0,0,.25); }
.ob-locked-legs { display: grid; gap: 6px; margin: 14px 0 0; }
.ob-locked-leg { display: grid; grid-template-columns: minmax(110px, auto) 1fr auto auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: rgba(7,25,42,.7); font-size: 13.5px; }
.ob-ll-meta { color: #9db7c8; white-space: nowrap; }
.ob-ll-blur { color: transparent; text-shadow: 0 0 9px rgba(244,251,255,.85); user-select: none; white-space: nowrap; overflow: hidden; }
.ob-locked-leg strong { color: #f5b54a; font-variant-numeric: tabular-nums; }
.ob-ll-more { margin: 4px 0 0 !important; color: #9db7c8 !important; font-size: 13px !important; }
.ob-code-locked { display: flex; align-items: center; gap: 12px; }
.ob-code-locked .ob-code-value { filter: blur(1px); }
.ob-pw-kicker { margin: 0 0 6px !important; color: #f5b54a !important; font-size: 12px !important; font-weight: 900; letter-spacing: 1px; }
.ob-pw-cta { display: block; margin-top: 14px; padding: 14px 18px; border-radius: 14px; background: #f5b54a; color: #2a1d05 !important; font: 800 16px/1.2 var(--sp-body, system-ui); text-align: center; text-decoration: none; box-shadow: 0 8px 24px rgba(245,181,74,.25); }
.ob-pw-cta:hover { filter: brightness(1.06); }
.ob-paywall { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 22px 18px; border: 1px solid #f5b54a; border-radius: 20px; background: linear-gradient(160deg, #16344f, #0b1f31 65%); color: #f4fbff; font-family: var(--sp-body, "Manrope", system-ui, sans-serif); box-sizing: border-box; }
.ob-paywall::backdrop { background: rgba(3,10,18,.72); backdrop-filter: blur(3px); }
.ob-paywall h2 { margin: 0 0 6px; font: 700 23px/1.2 var(--sp-display, "Space Grotesk", system-ui); }
.ob-pw-sub { margin: 0; color: #c9dbe7; font-size: 14px; line-height: 1.5; }
.ob-pw-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #9db7c8; font-size: 22px; cursor: pointer; }
.ob-pw-perks { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; color: #dbe9f3; }
.ob-pw-later { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 0; background: transparent; color: #9db7c8; font: 700 14px/1 var(--sp-body, system-ui); cursor: pointer; }
.ob-pw-note { margin: 6px 0 0; text-align: center; color: #9db7c8; font-size: 12px; }
@media (max-width: 640px) {
  .ob-locked-leg { grid-template-columns: auto 1fr auto; }
  .ob-locked-leg .ob-ll-pick { display: none; }
  .ob-paywall { padding: 20px 16px 14px; }
}

.pa-free-note { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(62,228,143,.1); border: 1px solid rgba(62,228,143,.3); color: #d8f5e6; font-size: 13px; line-height: 1.4; }
.pa-free-note a { color: #69e1dc; font-weight: 700; }