.flot-tip-form { scroll-margin-top: 6rem; }
.tip-mobile-copy { display: none; }

.flot-tip-form [data-form-stepper-target="step"]:not(.hidden) {
  animation: tip-step-enter 220ms ease-out;
}

.flot-tip-form .flot-payment-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.75rem;
  background: white;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.flot-tip-form .flot-payment-option:hover { border-color: #dc2928; background: #fef2f2; }
.flot-tip-form :is(button, a):focus-visible { outline: 3px solid #dc2928; outline-offset: 3px; }
.flot-tip-form [aria-disabled="true"] { opacity: 0.6; cursor: wait; }
.flot-tip-form .flot-payment-icon { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 0.65rem; background: #f9fafb; color: #dc2928; }

@keyframes tip-step-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .flot-tip-form [data-form-stepper-target="step"], .flot-tip-form .flot-payment-option { animation: none; transition: none; }
}

@media (max-width: 639px) {
  body:has(.tip-checkout) > .container { padding: 0; }
  body:has(.tip-checkout) > footer { padding-block: 1rem; }
  body:has(.tip-checkout) > footer .container { font-size: 0.75rem; gap: 1rem; }
  .tip-checkout { min-height: 0; align-items: flex-start; padding: 1.5rem 1rem; background: white; }
  .tip-checkout .tip-checkout-card { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .tip-checkout .tip-checkout-header { justify-content: flex-start; margin-bottom: 1.5rem; }
  .tip-checkout .tip-checkout-symbol, .tip-checkout .tip-desktop-copy { display: none; }
  .tip-checkout .tip-mobile-copy { display: inline; }
  .tip-checkout h1 { font-size: 1.375rem; line-height: 1.35; }
  .tip-checkout .tip-message-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tip-checkout input::placeholder, .tip-checkout textarea::placeholder { color: #6b7280; }
  .flot-tip-form [aria-label="Payment progress"] { justify-content: space-between; gap: 0.75rem; margin-bottom: 1.5rem; }
  .flot-tip-form [data-form-stepper-target="stepIndicator"] { font-size: 0.75rem; white-space: nowrap; }
  .flot-tip-form .stepper-circle { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; flex-shrink: 0; border-width: 1px; }
  .flot-tip-form [data-tip-form-target="stars"] { justify-content: flex-start; }
  .flot-tip-form [data-tip-form-target="stars"] button { width: 2.75rem; height: 2.75rem; }
  .flot-tip-form [data-action="tip-form#applyPreset"] { min-height: 2.75rem; }
  .flot-tip-form .flot-tip-total { padding: 0 0 1rem; border: 0; border-bottom: 1px solid #e5e7eb; border-radius: 0; background: transparent; }
  .flot-tip-form .flot-payment-option { min-height: 3.75rem; padding: 0.75rem; border-width: 1px; gap: 0.75rem; }
  .flot-tip-form .flot-payment-icon { width: 2rem; height: 2rem; background: transparent; }
  .flot-tip-form .flot-ussd-hint { margin-left: 0.25rem; font-size: 0.75rem; font-weight: 500; color: #6b7280; }
  .flot-tip-form [data-form-stepper-target="prevButton"] { width: auto; min-height: 2.75rem; margin-inline: auto; padding: 0.5rem 1.25rem; border: 0; }
  .flot-tip-form [data-form-stepper-target="nextButton"] { box-shadow: none; }
}