html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* HTMX: hide indicators by default (no-JS friendly) */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
}

.htmx-show-on-request {
  display: none;
}

.htmx-request .htmx-show-on-request,
.htmx-request.htmx-show-on-request {
  display: inline-flex;
}

.htmx-request .htmx-hide-on-request,
.htmx-request.htmx-hide-on-request {
  display: none;
}

.htmx-request .htmx-disable-on-request,
.htmx-request.htmx-disable-on-request {
  pointer-events: none;
  opacity: 0.7;
}

/* Quick amount buttons: pressure hover + pop/confetti click. */
.quick-amount-button {
  position: relative;
  isolation: isolate;
  overflow: visible;
  transform-origin: center;
  will-change: transform;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  --pressure: 0.2;
  --shake-radius: 2.2px;
  --shake-speed: 280ms;
  --burst-radius: 8px;
  --burst-scale: 1.55;
  --confetti-a:
    radial-gradient(circle at 8% 18%, #f59e0b 0 2px, transparent 2.3px),
    radial-gradient(circle at 28% 12%, #22c55e 0 2px, transparent 2.3px),
    radial-gradient(circle at 52% 10%, #3b82f6 0 2px, transparent 2.3px),
    radial-gradient(circle at 76% 14%, #ef4444 0 2px, transparent 2.3px),
    radial-gradient(circle at 92% 24%, #eab308 0 2px, transparent 2.3px),
    radial-gradient(circle at 18% 86%, #fb7185 0 2px, transparent 2.3px),
    radial-gradient(circle at 44% 92%, #14b8a6 0 2px, transparent 2.3px),
    radial-gradient(circle at 64% 88%, #a855f7 0 2px, transparent 2.3px),
    radial-gradient(circle at 86% 82%, #0ea5e9 0 2px, transparent 2.3px);
  --confetti-b:
    radial-gradient(circle at 12% 36%, #f97316 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 34% 30%, #84cc16 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 68% 28%, #38bdf8 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 88% 40%, #f43f5e 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 22% 70%, #a78bfa 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 48% 74%, #06b6d4 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 72% 68%, #facc15 0 1.8px, transparent 2.1px);
}

.quick-amount-button[data-quick-amount="25"] {
  --pressure: 0.2;
  --shake-radius: 2.4px;
  --shake-speed: 280ms;
  --burst-radius: 8px;
  --burst-scale: 1.55;
}

.quick-amount-button[data-quick-amount="50"] {
  --pressure: 0.35;
  --shake-radius: 3px;
  --shake-speed: 240ms;
  --burst-radius: 10px;
  --burst-scale: 1.75;
  --confetti-a:
    radial-gradient(circle at 8% 18%, #f59e0b 0 2px, transparent 2.3px),
    radial-gradient(circle at 20% 8%, #fb7185 0 2px, transparent 2.3px),
    radial-gradient(circle at 28% 12%, #22c55e 0 2px, transparent 2.3px),
    radial-gradient(circle at 52% 10%, #3b82f6 0 2px, transparent 2.3px),
    radial-gradient(circle at 76% 14%, #ef4444 0 2px, transparent 2.3px),
    radial-gradient(circle at 92% 24%, #eab308 0 2px, transparent 2.3px),
    radial-gradient(circle at 18% 86%, #fb7185 0 2px, transparent 2.3px),
    radial-gradient(circle at 44% 92%, #14b8a6 0 2px, transparent 2.3px),
    radial-gradient(circle at 64% 88%, #a855f7 0 2px, transparent 2.3px),
    radial-gradient(circle at 86% 82%, #0ea5e9 0 2px, transparent 2.3px),
    radial-gradient(circle at 58% 96%, #22d3ee 0 2px, transparent 2.3px);
}

.quick-amount-button[data-quick-amount="100"] {
  --pressure: 0.5;
  --shake-radius: 3.8px;
  --shake-speed: 205ms;
  --burst-radius: 12px;
  --burst-scale: 1.95;
  --confetti-a:
    radial-gradient(circle at 8% 18%, #f59e0b 0 2px, transparent 2.3px),
    radial-gradient(circle at 20% 8%, #fb7185 0 2px, transparent 2.3px),
    radial-gradient(circle at 28% 12%, #22c55e 0 2px, transparent 2.3px),
    radial-gradient(circle at 40% 7%, #84cc16 0 2px, transparent 2.3px),
    radial-gradient(circle at 52% 10%, #3b82f6 0 2px, transparent 2.3px),
    radial-gradient(circle at 76% 14%, #ef4444 0 2px, transparent 2.3px),
    radial-gradient(circle at 92% 24%, #eab308 0 2px, transparent 2.3px),
    radial-gradient(circle at 18% 86%, #fb7185 0 2px, transparent 2.3px),
    radial-gradient(circle at 44% 92%, #14b8a6 0 2px, transparent 2.3px),
    radial-gradient(circle at 64% 88%, #a855f7 0 2px, transparent 2.3px),
    radial-gradient(circle at 86% 82%, #0ea5e9 0 2px, transparent 2.3px),
    radial-gradient(circle at 58% 96%, #22d3ee 0 2px, transparent 2.3px),
    radial-gradient(circle at 8% 58%, #60a5fa 0 2px, transparent 2.3px);
  --confetti-b:
    radial-gradient(circle at 12% 36%, #f97316 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 34% 30%, #84cc16 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 68% 28%, #38bdf8 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 88% 40%, #f43f5e 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 22% 70%, #a78bfa 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 48% 74%, #06b6d4 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 72% 68%, #facc15 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 92% 62%, #fbbf24 0 1.8px, transparent 2.1px);
}

.quick-amount-button[data-quick-amount="250"] {
  --pressure: 0.75;
  --shake-radius: 4.8px;
  --shake-speed: 165ms;
  --burst-radius: 15px;
  --burst-scale: 2.15;
  --confetti-a:
    radial-gradient(circle at 8% 18%, #f59e0b 0 2px, transparent 2.3px),
    radial-gradient(circle at 20% 8%, #fb7185 0 2px, transparent 2.3px),
    radial-gradient(circle at 28% 12%, #22c55e 0 2px, transparent 2.3px),
    radial-gradient(circle at 40% 7%, #84cc16 0 2px, transparent 2.3px),
    radial-gradient(circle at 52% 10%, #3b82f6 0 2px, transparent 2.3px),
    radial-gradient(circle at 64% 8%, #60a5fa 0 2px, transparent 2.3px),
    radial-gradient(circle at 76% 14%, #ef4444 0 2px, transparent 2.3px),
    radial-gradient(circle at 92% 24%, #eab308 0 2px, transparent 2.3px),
    radial-gradient(circle at 96% 42%, #f97316 0 2px, transparent 2.3px),
    radial-gradient(circle at 18% 86%, #fb7185 0 2px, transparent 2.3px),
    radial-gradient(circle at 30% 94%, #22d3ee 0 2px, transparent 2.3px),
    radial-gradient(circle at 44% 92%, #14b8a6 0 2px, transparent 2.3px),
    radial-gradient(circle at 64% 88%, #a855f7 0 2px, transparent 2.3px),
    radial-gradient(circle at 86% 82%, #0ea5e9 0 2px, transparent 2.3px),
    radial-gradient(circle at 58% 96%, #22d3ee 0 2px, transparent 2.3px);
  --confetti-b:
    radial-gradient(circle at 12% 36%, #f97316 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 22% 24%, #ef4444 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 34% 30%, #84cc16 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 50% 20%, #22c55e 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 68% 28%, #38bdf8 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 88% 40%, #f43f5e 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 22% 70%, #a78bfa 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 48% 74%, #06b6d4 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 72% 68%, #facc15 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 92% 62%, #fbbf24 0 1.8px, transparent 2.1px);
}

.quick-amount-button[data-quick-amount="500"] {
  --pressure: 1;
  --shake-radius: 6px;
  --shake-speed: 125ms;
  --burst-radius: 19px;
  --burst-scale: 2.45;
  --confetti-a:
    radial-gradient(circle at 6% 16%, #f59e0b 0 2px, transparent 2.3px),
    radial-gradient(circle at 14% 8%, #fb7185 0 2px, transparent 2.3px),
    radial-gradient(circle at 22% 12%, #22c55e 0 2px, transparent 2.3px),
    radial-gradient(circle at 32% 6%, #84cc16 0 2px, transparent 2.3px),
    radial-gradient(circle at 44% 8%, #3b82f6 0 2px, transparent 2.3px),
    radial-gradient(circle at 56% 8%, #60a5fa 0 2px, transparent 2.3px),
    radial-gradient(circle at 68% 10%, #ef4444 0 2px, transparent 2.3px),
    radial-gradient(circle at 78% 14%, #f97316 0 2px, transparent 2.3px),
    radial-gradient(circle at 90% 22%, #eab308 0 2px, transparent 2.3px),
    radial-gradient(circle at 96% 38%, #f43f5e 0 2px, transparent 2.3px),
    radial-gradient(circle at 10% 52%, #60a5fa 0 2px, transparent 2.3px),
    radial-gradient(circle at 18% 84%, #fb7185 0 2px, transparent 2.3px),
    radial-gradient(circle at 30% 94%, #22d3ee 0 2px, transparent 2.3px),
    radial-gradient(circle at 44% 92%, #14b8a6 0 2px, transparent 2.3px),
    radial-gradient(circle at 58% 96%, #22d3ee 0 2px, transparent 2.3px),
    radial-gradient(circle at 70% 90%, #a855f7 0 2px, transparent 2.3px),
    radial-gradient(circle at 82% 82%, #0ea5e9 0 2px, transparent 2.3px),
    radial-gradient(circle at 92% 72%, #facc15 0 2px, transparent 2.3px);
  --confetti-b:
    radial-gradient(circle at 8% 34%, #f97316 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 16% 24%, #ef4444 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 26% 30%, #84cc16 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 36% 18%, #22c55e 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 48% 20%, #06b6d4 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 62% 24%, #38bdf8 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 74% 30%, #60a5fa 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 86% 38%, #f43f5e 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 18% 70%, #a78bfa 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 36% 76%, #fbbf24 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 54% 74%, #06b6d4 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 72% 68%, #facc15 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 90% 62%, #eab308 0 1.8px, transparent 2.1px);
}

.quick-amount-button[data-effects-enabled="true"]:hover,
.quick-amount-button[data-effects-enabled="true"]:focus-visible {
  border-color: #2563eb;
  box-shadow: 0 6px 18px rgba(37, 99, 235, calc(0.18 + (var(--pressure) * 0.1)));
  animation: quick-amount-rattle var(--shake-speed) steps(2, end) infinite;
}

.quick-amount-button[data-effects-enabled="true"]:active {
  transform: scale(0.96);
}

.quick-amount-button[data-effects-enabled="true"].is-popping,
.quick-amount-button[data-effects-enabled="true"].is-popping:hover,
.quick-amount-button[data-effects-enabled="true"].is-popping:focus-visible {
  animation: quick-amount-pop 210ms cubic-bezier(.2, .9, .2, 1) both;
}

.quick-amount-button::before,
.quick-amount-button::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: calc(-18px - var(--burst-radius));
  opacity: 0;
}

.quick-amount-button[data-effects-enabled="true"].is-popping::before,
.quick-amount-button[data-effects-enabled="true"].is-popping::after {
  opacity: 1;
  animation: quick-amount-confetti 330ms ease-out forwards;
}

.quick-amount-button[data-effects-enabled="true"].is-popping::before {
  background: var(--confetti-a);
}

.quick-amount-button[data-effects-enabled="true"].is-popping::after {
  animation-delay: 35ms;
  background: var(--confetti-b);
}

@keyframes quick-amount-rattle {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(calc(var(--shake-radius) * -1), calc(var(--shake-radius) * 0.35), 0) rotate(calc(var(--pressure) * -0.65deg));
  }
  50% {
    transform: translate3d(calc(var(--shake-radius) * 1.1), calc(var(--shake-radius) * -0.35), 0) rotate(calc(var(--pressure) * 0.7deg));
  }
  75% {
    transform: translate3d(calc(var(--shake-radius) * -0.8), calc(var(--shake-radius) * 0.3), 0) rotate(calc(var(--pressure) * -0.45deg));
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes quick-amount-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(calc(1.05 + (var(--pressure) * 0.04)));
  }
  100% {
    transform: scale(0.96);
  }
}

@keyframes quick-amount-confetti {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
    filter: saturate(1.2);
  }
  100% {
    transform: scale(calc(var(--burst-scale) + (var(--pressure) * 0.45)));
    opacity: 0;
    filter: saturate(0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick-amount-button,
  .quick-amount-button:hover,
  .quick-amount-button:focus-visible,
  .quick-amount-button.is-popping {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .quick-amount-button::before,
  .quick-amount-button::after {
    display: none !important;
  }
}