/**
 * BigPlay — Buttons & Form Controls (WP08)
 * Load AFTER theme.bundle + exchange-theme (+ typography/spacing/radius/parity).
 * Heights: primary/input 40 · secondary 36 · compact 32 · chrome 48
 */

/* ── Shared control contract ────────────────────────────────────────────── */
.exchange-app {
  --ex-ctrl-h-sm: var(--theme-control-height-sm, 32px);
  --ex-ctrl-h-secondary: var(--theme-control-height-secondary, 36px);
  --ex-ctrl-h-primary: var(--theme-control-height-primary, 40px);
  --ex-ctrl-h-lg: var(--theme-control-height-lg, 48px);
  --ex-ctrl-pad-x: var(--theme-space-4, 1rem); /* 16px */
  --ex-ctrl-pad-y: var(--theme-space-2, 0.5rem); /* 8px */
  --ex-ctrl-radius: var(--theme-radius-control, 8px);
  --ex-ctrl-fs: var(--theme-type-button-size, var(--theme-text-base, 0.875rem));
  --ex-ctrl-fw: var(--theme-type-button-weight, var(--theme-weight-semibold, 600));
}

/* ── Primary CTA (Sign In, Deposit-style solid, Place Bet) ──────────────── */
.exchange-app .btn-base,
.exchange-app .btn.btn-primary,
.exchange-app .ex-btn--primary,
.exchange-app .ex-auth-form .btn-base,
.exchange-app.ex-login-wall .btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ex-ctrl-h-primary);
  height: auto;
  padding: var(--ex-ctrl-pad-y) var(--ex-ctrl-pad-x);
  border-radius: var(--ex-ctrl-radius);
  font-size: var(--ex-ctrl-fs);
  font-weight: var(--ex-ctrl-fw);
  line-height: 1.2;
  letter-spacing: 0;
  box-sizing: border-box;
}

.exchange-app .btn-base:focus-visible,
.exchange-app .btn.btn-primary:focus-visible,
.exchange-app .ex-btn--primary:focus-visible {
  outline: var(--theme-focus-ring-width, 2px) solid var(--theme-focus-ring, var(--bp-orange-400));
  outline-offset: var(--theme-focus-offset, 2px);
}

/* ── Secondary CTA (Load more, filter Search, Promo) ────────────────────── */
.exchange-app .ex-load-more-btn,
.exchange-app a.ex-load-more-btn,
.exchange-app button.ex-load-more-btn,
.exchange-app .ex-promo-html__cta,
.exchange-app .btn-base.btn-secondary,
.exchange-app .ex-btn--secondary {
  min-height: var(--ex-ctrl-h-secondary);
  padding: 0.4rem var(--ex-ctrl-pad-x);
  font-size: var(--ex-ctrl-fs);
  font-weight: var(--theme-weight-bold, 700);
  box-sizing: border-box;
}

.exchange-app .ex-load-more-btn:focus-visible,
.exchange-app .ex-promo-html__cta:focus-visible {
  outline: var(--theme-focus-ring-width, 2px) solid var(--theme-focus-ring, var(--bp-orange-400));
  outline-offset: var(--theme-focus-offset, 2px);
}

/* ── Compact (favorite) ─────────────────────────────────────────────────── */
.exchange-app .ex-match-favorite,
.exchange-app .ex-favorite-btn,
.exchange-app button.ex-indibet-row__favorite {
  min-height: var(--ex-ctrl-h-sm);
  min-width: var(--ex-ctrl-h-sm);
  width: var(--ex-ctrl-h-sm);
  height: var(--ex-ctrl-h-sm);
}

/* ── Text inputs / selects ──────────────────────────────────────────────── */
.exchange-app .form-control,
.exchange-app .form-select,
.exchange-app select.form-control,
.exchange-app input.form-control:not([type="checkbox"]):not([type="radio"]),
.exchange-app .ex-input,
.exchange-account-layout .form-control,
.exchange-account-layout .form-select {
  min-height: var(--ex-ctrl-h-primary);
  height: auto;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ex-ctrl-radius);
  border: 1px solid var(--theme-input-border, var(--ex-border));
  background: var(--theme-input-bg, var(--ex-surface-raised));
  color: var(--theme-input-text, var(--ex-text-strong));
  font-size: var(--theme-text-base, 0.875rem);
  font-weight: var(--theme-weight-regular, 400);
  line-height: 1.25;
  box-sizing: border-box;
}

.exchange-app .form-control:focus-visible,
.exchange-app .form-select:focus-visible,
.exchange-account-layout .form-control:focus-visible,
.exchange-account-layout .form-select:focus-visible {
  outline: var(--theme-focus-ring-width, 2px) solid var(--theme-focus-ring, var(--bp-orange-400));
  outline-offset: var(--theme-focus-offset, 2px);
  border-color: var(--theme-input-focus-border, var(--theme-primary));
  box-shadow: none;
}

.exchange-app textarea.form-control {
  min-height: calc(var(--ex-ctrl-h-primary) * 2.5);
  height: auto;
}

/* ── Bet slip: Place Bet + stake field ──────────────────────────────────── */
.exchange-app #betSlipDock .ex-betslip-place,
.exchange-app #betSlipDock .ex-betslip-place.btn-base {
  min-height: var(--ex-ctrl-h-primary) !important;
  height: var(--ex-ctrl-h-primary) !important;
  max-height: var(--ex-ctrl-h-primary) !important;
  padding-inline: var(--ex-ctrl-pad-x) !important;
  font-size: var(--theme-text-base, 0.875rem) !important;
  font-weight: var(--theme-weight-bold, 700) !important;
}

.exchange-app #betSlipDock .ex-betslip-stake-block__input,
.exchange-app #betSlipDock .ex-betslip-vue .form-input,
.exchange-app .ex-betslip-stake-block__input {
  min-height: var(--ex-ctrl-h-primary) !important;
  height: var(--ex-ctrl-h-primary) !important;
  font-size: var(--theme-text-base, 0.875rem) !important;
  font-variant-numeric: tabular-nums;
}

.exchange-app #betSlipDock .ex-betslip-stake-step {
  flex-basis: var(--ex-ctrl-h-primary);
  min-width: var(--ex-ctrl-h-primary);
}

.exchange-app #betSlipDock .ex-betslip-stake-block__input-wrap {
  min-height: var(--ex-ctrl-h-primary);
  border-radius: var(--ex-ctrl-radius);
}

.exchange-app #betSlipDock .ex-betslip-place:focus-visible,
.exchange-app #betSlipDock .ex-betslip-stake-block__input:focus-visible,
.exchange-app #betSlipDock .ex-betslip-stake-step:focus-visible {
  outline: var(--theme-focus-ring-width, 2px) solid var(--theme-focus-ring, var(--bp-orange-400));
  outline-offset: 0;
}

/* ── Exchange checkboxes / radios ───────────────────────────────────────── */
.exchange-app .form-check-input,
.exchange-app input[type="checkbox"]:not(.switch input):not(#ex-theme-slider),
.exchange-app input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  border: 1.5px solid var(--theme-input-border, var(--ex-border));
  background-color: var(--theme-input-bg, var(--ex-surface-raised));
  accent-color: var(--theme-primary, #DD3E42);
  vertical-align: middle;
  cursor: pointer;
}

.exchange-app input[type="checkbox"]:not(.switch input):not(#ex-theme-slider) {
  border-radius: var(--theme-radius-chip, 4px);
}

.exchange-app input[type="radio"] {
  border-radius: var(--theme-radius-pill, 999px);
}

.exchange-app .form-check-input:focus-visible,
.exchange-app input[type="checkbox"]:focus-visible,
.exchange-app input[type="radio"]:focus-visible {
  outline: var(--theme-focus-ring-width, 2px) solid var(--theme-focus-ring, var(--bp-orange-400));
  outline-offset: 2px;
}

.exchange-app .form-check-label,
.exchange-app .ex-check-label {
  font-size: var(--theme-text-base, 0.875rem);
  color: var(--theme-text-body, var(--ex-text));
  cursor: pointer;
}

/* ── Inline error atom ──────────────────────────────────────────────────── */
.exchange-app .ex-field-error,
.exchange-app .invalid-feedback,
.exchange-account-layout .invalid-feedback {
  display: block;
  margin-top: var(--theme-space-1, 0.25rem);
  font-size: var(--theme-text-sm, 0.75rem);
  font-weight: var(--theme-weight-medium, 500);
  line-height: var(--theme-leading-snug, 1.25);
  color: var(--theme-status-danger, var(--bp-danger));
}

.exchange-app .form-control.is-invalid,
.exchange-app .form-select.is-invalid,
.exchange-account-layout .form-control.is-invalid,
.exchange-account-layout .form-select.is-invalid {
  border-color: var(--theme-status-danger, var(--bp-danger));
}

.exchange-app .form-control.is-invalid:focus-visible,
.exchange-app .form-select.is-invalid:focus-visible {
  outline-color: var(--theme-status-danger, var(--bp-danger));
}

/* ── Disabled ───────────────────────────────────────────────────────────── */
.exchange-app .btn-base:disabled,
.exchange-app .ex-load-more-btn:disabled,
.exchange-app .form-control:disabled,
.exchange-app .form-select:disabled {
  opacity: var(--theme-opacity-disabled, 0.5);
  cursor: not-allowed;
  pointer-events: none;
}