/* =========================================================
   BrightPay Online Checkout — Stripe Elements + stepper.
   Brand tokens come from app.css.
   ========================================================= */

#card-element {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bp-gray-300);
  border-radius: var(--bp-radius);
  background: #fff;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#card-element:focus-within {
  border-color: var(--bp-blue-300);
  box-shadow: 0 0 0 0.25rem rgba(0, 112, 191, 0.25);
}

#card-element.StripeElement--invalid {
  border-color: var(--bp-red-500);
  box-shadow: 0 0 0 0.25rem rgba(219, 44, 50, 0.25);
}

/* Stepper connectors (Signup / Checkout wizards) */
.step-connector { position: relative; }

.step-connector:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% + 1rem);
  right: calc(-50% + 1rem);
  height: 2px;
  background: var(--bp-gray-300);
}

.step-connector.completed:not(:last-child)::after {
  background: var(--bp-green-500);
}

.step-connector.active:not(:last-child)::after {
  background: var(--bp-blue-500);
}