/* Prematch odds — scheduled fixtures (match_detail Odds tab). Tokens from theme.css. */

.po-section {
  padding: 0;
}

.po-header {
  margin-bottom: 1rem;
}

.po-badge {
  font-size: var(--te-label-size);
  font-weight: 700;
  letter-spacing: var(--te-label-spacing);
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-left: auto;
}

.po-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

.po-loading-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--on-surface-variant);
  font-size: 0.9rem;
}

.po-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--te-border);
  border-top-color: var(--primary-container);
  border-radius: 50%;
  animation: po-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes po-spin {
  to { transform: rotate(360deg); }
}

.po-alert {
  border-radius: var(--te-radius-md);
  padding: 1rem 1.25rem;
}

.po-alert-title {
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  letter-spacing: var(--te-label-spacing);
  text-transform: uppercase;
  color: var(--on-surface);
}

.po-text-dim {
  color: var(--on-surface-variant);
}

.po-markets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .po-markets {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .po-markets {
    grid-template-columns: repeat(3, 1fr);
  }
}

.po-market {
  border-radius: var(--te-radius-lg);
  overflow: hidden;
  background: var(--surface-container);
  box-shadow: var(--te-shadow-ambient);
}

.po-market-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  background: var(--surface-container-low);
}

.po-market-name {
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  letter-spacing: var(--te-label-spacing);
  text-transform: uppercase;
  color: var(--on-surface);
}

.po-market-body {
  padding: 0.6rem 0.9rem;
}

.po-bookmaker-label {
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  letter-spacing: var(--te-label-spacing);
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 0.35rem;
  margin-top: 0.5rem;
}

.po-bookmaker-label:first-child {
  margin-top: 0;
}

.po-outcomes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.po-outcome-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0;
}

.po-outcome-label {
  font-size: 0.85rem;
  color: var(--on-surface);
  font-weight: 600;
}

.po-outcome-odd {
  font-size: 0.9rem;
  font-weight: var(--te-data-weight);
  font-variant-numeric: tabular-nums;
  color: var(--primary-container);
  letter-spacing: 0.01em;
  padding: 0.15rem 0.4rem;
  border-radius: var(--te-radius-sm);
  background: color-mix(in srgb, var(--primary-container) 10%, transparent);
}

.po-outcome-row.po-suspended .po-outcome-odd {
  color: var(--on-surface-variant);
  background: color-mix(in srgb, var(--outline) 12%, transparent);
  text-decoration: line-through;
}

.po-disclaimer {
  font-size: var(--te-label-size);
  line-height: 1.4;
  padding-top: 0.75rem;
  margin-top: 1rem;
}

.theme-dark .po-spinner {
  border-color: color-mix(in srgb, var(--on-surface) 14%, transparent);
  border-top-color: var(--primary-fixed);
}

.theme-dark .po-outcome-odd {
  color: var(--primary-fixed);
  background: color-mix(in srgb, var(--primary-fixed) 12%, transparent);
}