/* BetRepublic mini · 35-en - 2-step wizard (casino or sports → offer); Red Hat Display + Plus Jakarta Sans */
:root {
  --ground: #0e1830;
  --surface: #15264a;
  --raised: #1d3260;
  --stroke: #304b7c;
  --ink: #f0f4fb;
  --muted: #9eb1d0;
  --lemon: #fbd440;
  --lemon-2: #e7b51a;
  --peri: #a3c1f3;
  --tp: #04b87c;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: conic-gradient(from 200deg at 80% 0%, #1b2d55, var(--ground) 30%, #0b1426 70%, #1b2d55);
  color: var(--ink); font: 400 15px/1.6 "Plus Jakarta Sans", system-ui, sans-serif;
}
a { color: inherit; }
button { font: inherit; color: inherit; }

.wiz { width: 100%; max-width: 520px; background: var(--surface); border-radius: 26px; padding: 20px; border: 1px solid var(--stroke); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.wiz__head { display: flex; justify-content: space-between; align-items: center; }
.wiz__logo { font: 900 22px/1 "Red Hat Display", sans-serif; letter-spacing: -.03em; color: #fff; text-decoration: none; }
.wiz__logo i { font-style: normal; color: var(--lemon); }
.wiz__steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; position: relative; }
.wiz__steps::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; background: var(--stroke); }
.wiz__steps li { position: relative; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 800 12px/1 "Red Hat Display", sans-serif; background: var(--raised); border: 2px solid var(--stroke); color: var(--muted); }
.wiz__steps li.is-on { background: var(--lemon); border-color: var(--lemon); color: #14100a; }

.wiz__ask h1 { margin: 22px 0 6px; font: 800 25px/1.2 "Red Hat Display", sans-serif; }
.wiz__hint { margin: 0; color: var(--muted); font-size: 14px; }
.pick { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick__opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; cursor: pointer;
  padding: 16px 14px; border-radius: 18px; background: var(--raised); border: 2px solid var(--stroke); transition: border-color .15s, transform .15s;
}
.pick__opt svg { width: 34px; height: 34px; color: var(--peri); margin-bottom: 6px; }
.pick__opt b { font: 800 18px/1.1 "Red Hat Display", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.pick__opt span { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.pick__opt:hover, .pick__opt:focus-visible { border-color: var(--lemon); transform: translateY(-2px); outline: none; }
.pick__opt:hover svg { color: var(--lemon); }

.wiz__res { margin-top: 16px; padding: 18px; border-radius: 18px; background: linear-gradient(160deg, #213a6c, #182b52); border: 1px solid var(--stroke); }
.res__tag { margin: 0; display: inline-block; font: 800 11px/1 "Red Hat Display", sans-serif; text-transform: uppercase; letter-spacing: .14em; color: #0f1c3a; background: var(--peri); padding: 6px 10px; border-radius: 20px; }
.wiz__res h2 { margin: 12px 0 6px; font: 900 26px/1.15 "Red Hat Display", sans-serif; color: var(--lemon); }
.wiz__res p { margin: 0; color: #d1dcee; font-size: 14.5px; }
.res__cta {
  display: block; text-align: center; margin-top: 16px; text-decoration: none; text-transform: uppercase; font: 900 15px/1 "Red Hat Display", sans-serif; letter-spacing: .05em;
  color: #171100; background: linear-gradient(180deg, #ffe36a, var(--lemon) 55%, var(--lemon-2)); padding: 15px 24px; border-radius: 14px;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px #4b67a0;
}
.res__cta:hover { filter: brightness(1.06); }
.res__back { display: none; margin: 14px 0 0; padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--peri); }
.res__back:hover { text-decoration: underline; }

/* JS mode: one view at a time */
.wiz--js .wiz__res { display: none; }
.wiz--js .res__back { display: block; }
.wiz--js[data-view="casino"] .wiz__ask, .wiz--js[data-view="sports"] .wiz__ask { display: none; }
.wiz--js[data-view="casino"] [data-panel="casino"], .wiz--js[data-view="sports"] [data-panel="sports"] { display: block; animation: rise .25s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tp-badge { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; text-decoration: none; font-weight: 600; font-size: 13.5px; padding: 10px; border-radius: 12px; background: rgba(4,184,124,.08); border: 1px dashed rgba(4,184,124,.55); }
.tp-badge__stars { display: inline-flex; gap: 2px; }
.tp-badge__stars svg { width: 16px; height: 16px; display: block; }
.tp-badge:hover { background: rgba(4,184,124,.16); }

.wiz__foot { margin-top: 14px; text-align: center; font-size: 11.5px; color: var(--muted); }
.wiz__foot p { margin: 2px 0; }

@media (min-width: 480px) { .wiz { padding: 26px 28px; } .wiz__ask h1 { font-size: 28px; } }