/* casino-bonus-v2.css
   /casino-bonus/ Option B (v2 Quiet Card rebuild, 2026-08).
   The offer list reuses the toplist card vocabulary from us-state.css
   (.usst-casino / .usst-stage / .usst-det / .usst-bon) and the geo country
   picker from banking.css (.bnk-geoline / .bnk-country). This sheet layers the
   bonus-specific pieces on top: the geo "show all" escape, the controls bar,
   the offer heading + type pill, the compact Did-It-Work voting, the expandable
   terms, and the wagering action panel. All values consume the --bji-* tokens. */

.cbv2 { font-family: var(--bji-font-sans); color: var(--bji-text); }
.cbv2 *, .cbv2 *::before, .cbv2 *::after { box-sizing: border-box; }

/* ---------- Geo line (matches .bnk-geoline on the toplist / hub pages) ---------- */
.cbv2-geoline { margin-bottom: var(--bji-space-4); }
.cbv2-geoline-lead { font-weight: var(--bji-weight-medium); }
.cbv2-geoline-lead strong { font-weight: var(--bji-weight-bold); }
.cbv2-geoline-all { font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); color: var(--bji-link); text-decoration: none; white-space: nowrap; }
.cbv2-geoline-all:hover { color: var(--bji-link-hover); text-decoration: underline; }

/* ---------- Controls bar ---------- */
.cbv2-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--bji-space-3); padding: var(--bji-space-3) var(--bji-space-4); background: var(--bji-surface-sunken); border: 1px solid var(--bji-gray-200); border-radius: 12px; margin-bottom: var(--bji-space-3); }
.cbv2-controls-left { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--bji-space-3); }
.cbv2-field { display: flex; flex-direction: column; gap: 4px; }
.cbv2-field > label { font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--bji-text-faint); }
.cbv2-select { appearance: none; -webkit-appearance: none; font-family: inherit; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-medium); color: var(--bji-text); background-color: var(--bji-surface); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2371809b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 11px; border: 1px solid var(--bji-gray-300); border-radius: var(--bji-radius-pill); padding: .5rem 2rem .5rem .95rem; cursor: pointer; min-width: 11rem; }
.cbv2-select:focus-visible { outline: 2px solid var(--bji-brand); outline-offset: 1px; }
.cbv2-pill { display: inline-flex; align-items: center; gap: var(--bji-space-2); font-family: inherit; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); color: var(--bji-text-muted); background: var(--bji-surface); border: 1px solid var(--bji-gray-300); border-radius: var(--bji-radius-pill); padding: .5rem .95rem; cursor: pointer; height: fit-content; }
.cbv2-pill:hover { border-color: var(--bji-gray-400); }
.cbv2-pill-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--bji-gray-300); background: var(--bji-surface); position: relative; flex: none; }
.cbv2-pill[aria-pressed="true"] { color: var(--bji-green-700); border-color: var(--bji-green-500); background: var(--bji-green-100); }
.cbv2-pill[aria-pressed="true"] .cbv2-pill-check { background: var(--bji-green-600); border-color: var(--bji-green-600); }
.cbv2-pill[aria-pressed="true"] .cbv2-pill-check::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(40deg); }

/* ---------- Offer card: bonus-specific pieces inside the .usst-det zone ---------- */
.cbv2-list .usst-det { display: flex; flex-direction: column; gap: var(--bji-space-2); justify-content: center; }
.cbv2-offer-name { line-height: var(--bji-leading-snug); }
.cbv2-offer-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .25rem; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.cbv2-offer-at a { color: var(--bji-link); text-decoration: none; font-weight: var(--bji-weight-semibold); }
.cbv2-offer-at a:hover { text-decoration: underline; }
.cbv2-type { display: inline-block; font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold); text-transform: uppercase; letter-spacing: .03em; color: var(--bji-gray-700); background: var(--bji-gray-100); border-radius: var(--bji-radius-pill); padding: 2px 9px; }
.cbv2-type--no-deposit-bonus, .cbv2-type--free-spins { color: var(--bji-green-700); background: var(--bji-green-100); }
.cbv2-type--bitcoin-bonus { color: var(--bji-amber-700); background: var(--bji-amber-100); }
.cbv2-type--sign-up-bonus, .cbv2-type--welcome-bonus { color: var(--bji-blue-800); background: var(--bji-blue-050); }

/* Feedback row (compact Did-It-Work voting + demoted claim count) */
.cbv2-offer-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cbv2-claims { font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.cbv2 .bonus-voting { margin: 0; padding: 0; background: none; border: none; box-shadow: none; }
.cbv2 .voting-stats { display: none !important; }
.cbv2 .voting-question-display { display: none; }
.cbv2 .voting-horizontal { display: flex; gap: 6px; align-items: center; margin: 0; padding: 0; }
.cbv2 .vote-btn-group { display: flex; gap: 6px; }
.cbv2 .vote-btn { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold); background: var(--bji-surface); border: 1px solid var(--bji-gray-300); border-radius: var(--bji-radius-pill); padding: .28rem .6rem; cursor: pointer; color: var(--bji-text-muted); line-height: 1; }
.cbv2 .vote-btn i { font-size: .9em; }
.cbv2 .vote-btn.worked { color: var(--bji-green-700); border-color: var(--bji-green-500); }
.cbv2 .vote-btn.worked:hover { background: var(--bji-green-100); }
.cbv2 .vote-btn.failed { color: var(--bji-red-700); border-color: var(--bji-red-500); }
.cbv2 .vote-btn.failed:hover { background: var(--bji-red-100); }
.cbv2 .vote-btn:disabled, .cbv2 .vote-btn.voting { opacity: .55; cursor: default; }
.cbv2 .voting-message { font-size: var(--bji-text-xs); color: var(--bji-text-muted); margin: 0; flex-basis: 100%; }
.cbv2 .voting-message.success { color: var(--bji-green-700); }
.cbv2 .voting-message.error { color: var(--bji-red-700); }

/* Expandable terms */
.cbv2-terms-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: .1rem; padding: 0; background: none; border: none; font-family: inherit; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); color: var(--bji-link); cursor: pointer; }
.cbv2-terms-toggle:hover { color: var(--bji-link-hover); }
.cbv2-terms-less { display: none; }
.cbv2-card.cbv2-open .cbv2-terms-more { display: none; }
.cbv2-card.cbv2-open .cbv2-terms-less { display: inline; }
.cbv2-terms-caret { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 5px solid currentColor; transition: transform var(--bji-duration) var(--bji-ease); }
.cbv2-card.cbv2-open .cbv2-terms-caret { transform: rotate(180deg); }
.cbv2-terms-panel { margin-top: .2rem; }
.cbv2-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--bji-space-5); margin: 0; padding: var(--bji-space-3); background: var(--bji-surface-sunken); border: 1px solid var(--bji-gray-100); border-radius: 10px; }
.cbv2-terms > div { display: flex; justify-content: space-between; gap: var(--bji-space-3); padding: .35rem .1rem; border-bottom: 1px dashed var(--bji-gray-200); font-size: var(--bji-text-sm); }
.cbv2-terms dt { color: var(--bji-text-faint); margin: 0; }
.cbv2-terms dd { margin: 0; font-weight: var(--bji-weight-semibold); text-align: right; overflow-wrap: anywhere; }
.cbv2-terms-verified dd { color: var(--bji-green-700); }

/* ---------- Action panel: wagering stat (reuses .usst-bon dark panel) ---------- */
.cbv2-wager-head { font-variant-numeric: tabular-nums; }
.cbv2-wager-head--raw { font-size: var(--bji-text-base); font-weight: var(--bji-weight-bold); line-height: 1.25; }
.cbv2-action .cbv2-nocode { font-size: var(--bji-text-xs); color: #aab6cf; }
.cbv2 .usst-code.is-copied b { color: #fff; border-style: solid; border-color: var(--bji-green-500); background: rgb(31 162 84 / .35); }
.cbv2 .usst-code.is-copied { color: #d8ffe6; }

/* ---------- Load more ---------- */
.cbv2-load-more-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--bji-space-2); margin-top: var(--bji-space-4); }
.cbv2-load-more-count { font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.cbv2-load-more { font-family: inherit; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); color: var(--bji-link); background: var(--bji-surface); border: 1px solid var(--bji-gray-300); border-radius: var(--bji-radius-pill); padding: .6rem 1.4rem; cursor: pointer; }
.cbv2-load-more:hover { background: var(--bji-blue-050); border-color: var(--bji-blue-300); }

/* ---------- Responsive ---------- */
@media (max-width: 780px) {
  .cbv2-controls { flex-direction: column; align-items: stretch; }
  .cbv2-controls-left { justify-content: space-between; }
  .cbv2-field { flex: 1; }
  .cbv2-select { min-width: 0; width: 100%; }
  /* The card collapses to a single column via us-state.css @780; keep the det
     content flowing and let the action panel sit full width below it. */
  .cbv2-list .usst-det { padding-top: var(--bji-space-4); }
  .cbv2-action { text-align: center; }
  .cbv2-terms { grid-template-columns: 1fr; }
  /* The stage becomes an 8rem strip on mobile; shrink the fallback logo to fit
     (the --fallback rule's 8.4rem overrides the toplist's mobile 5.4rem). */
  .cbv2-list .usst-stage--fallback .usst-logochip { width: 5rem; height: 5rem; }
}