/* Shared Bankful checkout form styling.
   Inherits the brand's layout chrome (header/footer) but provides
   its own form layout, spacing, and input treatment.
   Brand-specific color accents use CSS custom properties:
     --checkout-accent       (defaults to #E8550F for ember/orange brands)
     --checkout-accent-glow  (defaults to rgba(232,85,15,0.15) — focus ring)
     --checkout-bg           (defaults to transparent)
     --checkout-text         (defaults to inherit)                    */

.bankful-checkout {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.bankful-checkout__header {
  margin-bottom: 32px;
}

.bankful-checkout__heading {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.bankful-checkout__lede {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.75;
  margin: 0;
}

.bankful-checkout__lede strong {
  opacity: 1;
  font-weight: 600;
}

.bankful-checkout__errors {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 0 24px;
  list-style: none;
  font-size: 14px;
  color: #DC2626;
}

.bankful-checkout__errors li + li {
  margin-top: 6px;
}

.bankful-checkout__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bankful-checkout__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.bankful-checkout__field label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.65;
}

.bankful-checkout__field input {
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 6px;
  background: var(--checkout-bg, rgba(255, 255, 255, 0.05));
  color: var(--checkout-text, inherit);
  transition: border-color 200ms ease, box-shadow 200ms ease;
  font-family: inherit;
}

.bankful-checkout__field input:focus {
  outline: none;
  border-color: var(--checkout-accent, #E8550F);
  box-shadow: 0 0 0 3px var(--checkout-accent-glow, rgba(232, 85, 15, 0.15));
}

.bankful-checkout__field input::placeholder {
  opacity: 0.4;
}

.bankful-checkout__row {
  display: flex;
  gap: 16px;
}

@media (max-width: 560px) {
  .bankful-checkout__row {
    flex-direction: column;
  }
}

.bankful-checkout__actions {
  margin-top: 12px;
}

.bankful-checkout__submit {
  display: block;
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 200ms ease, transform 100ms ease;
  background: var(--checkout-accent, #E8550F);
  color: #fff;
  font-family: inherit;
}

.bankful-checkout__submit:hover {
  filter: brightness(1.1);
}

.bankful-checkout__submit:active {
  transform: scale(0.99);
}