/* ==========================================================================
   ACCRA TENNIS ACADEMY — SWEETALERT2 VISUAL OVERRIDES
   Pairs with ata-sweetalert-theme.js. Load after sweetalert2.min.css
   and after ata-design-system.css.
   ========================================================================== */

.ata-swal-popup {
  font-family: var(--ata-font-body);
  border-radius: var(--ata-radius-xl) !important;
  padding: var(--ata-space-6) var(--ata-space-5) var(--ata-space-5) !important;
  box-shadow: var(--ata-shadow-lg);
}

.ata-swal-title {
  font-family: var(--ata-font-display) !important;
  font-weight: 700 !important;
  font-size: var(--ata-text-xl) !important;
  color: var(--ata-ink) !important;
  margin-top: var(--ata-space-3) !important;
}

.ata-swal-text {
  font-family: var(--ata-font-body) !important;
  font-size: var(--ata-text-base) !important;
  color: var(--ata-ink-soft) !important;
  line-height: 1.55 !important;
}

.ata-swal-actions {
  gap: var(--ata-space-3) !important;
  margin-top: var(--ata-space-5) !important;
}

/* Bounce-in — the one deliberate motion moment in the whole system,
   a small nod to a tennis ball landing. Everywhere else stays still. */
@keyframes ata-swal-bounce-in {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { transform: scale(1); }
}
.ata-swal-show { animation: ata-swal-bounce-in 320ms var(--ata-ease); }
/* The exit needs its OWN keyframes: re-using bounce-in with `reverse` doesn't restart the
   animation (same animation-name), so `animationend` never fires and SweetAlert never removes
   its overlay — the page looks frozen. */
@keyframes ata-swal-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92); }
}
.ata-swal-hide { animation: ata-swal-fade-out 160ms var(--ata-ease) forwards; }

@media (prefers-reduced-motion: reduce) {
  .ata-swal-show, .ata-swal-hide { animation: none; }
}

/* Icon ring softened to match brand roundness rather than SweetAlert's default */
.ata-swal-popup .swal2-icon {
  border-width: 3px !important;
}

/* Toast variant */
.ata-swal-toast {
  border-radius: var(--ata-radius-md) !important;
  box-shadow: var(--ata-shadow-md) !important;
  padding: var(--ata-space-3) var(--ata-space-4) !important;
}
.ata-swal-toast .ata-swal-title {
  font-size: var(--ata-text-sm) !important;
  margin: 0 !important;
}

/* Loading state: keep the yellow off a spinner (yellow = action only) */
.ata-swal-popup .swal2-loader {
  border-color: var(--ata-sky) transparent var(--ata-sky) transparent !important;
}

/* Form modal (ATA.alert.form) — left-aligned fields, admin radius */
.ata-swal-form .ata-swal-text { text-align: left !important; margin: var(--ata-space-4) 0 0 !important; }
.ata-swal-form .ata-field { margin-bottom: var(--ata-space-3); }
.ata-swal-form .swal2-validation-message { border-radius: var(--ata-radius-sm); }

/* Stacked actions (ATA.alert.choice): full-width primary, secondary pair underneath */
.ata-swal-actions-stack { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; padding: 0 var(--ata-space-2); }
.ata-swal-actions-stack .ata-swal-wide { grid-column: 1 / -1; order: -1; width: 100%; }
.ata-swal-actions-stack .ata-btn { margin: 0 !important; }

/* In-page checkout summary (simulation + confirmation) */
.ata-pay-summary { text-align: left; margin-top: var(--ata-space-3); }
.ata-pay-summary .ata-pay-amount { font-family: var(--ata-font-display); font-size: var(--ata-text-3xl); font-weight: 800; color: var(--ata-ink); text-align: center; margin: var(--ata-space-2) 0 var(--ata-space-4); }
.ata-pay-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ata-text-xs); font-weight: 700; color: var(--ata-ink-soft); background: var(--ata-bg); border-radius: var(--ata-radius-pill); padding: 4px 12px; }