/* Operator checkout styles. Extends style.css + console.css design tokens. */

.checkout-panel {
  max-width: 560px;
  margin: 0 auto;
}

.checkout-panel .subtitle {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin: 0.25rem 0 1.25rem;
}

/* Plan picker */
.checkout-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.checkout-plan {
  display: block;
  position: relative;
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 0.15s;
}

.checkout-plan:hover {
  border-color: var(--primary);
}

.checkout-plan.is-selected {
  border-color: var(--primary);
}

/* The native radio is replaced visually by the card highlight. */
.checkout-plan input[type="radio"] {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.checkout-plan-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.checkout-plan-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.checkout-plan-price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.checkout-plan-period {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-tertiary);
}

.checkout-plan-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Stripe Payment Element wrapper */
#payment-element {
  margin: 1rem 0 1.5rem;
}

#payment-step .btn,
#plan-step .btn {
  margin-right: 0.5rem;
}