/* Shared checkout toast — rendered by /js/checkout-toast.js on both
   landing + dashboard for success / cancel / error states. */

.checkout-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: min(540px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 14px 20px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary);
  background: rgba(22, 22, 28, 0.96);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 50px -16px rgba(0,0,0,0.5);
  animation: checkoutToastIn 240ms cubic-bezier(.22,.61,.36,1) both;
}

.checkout-toast-body { flex: 1; min-width: 0; }
.checkout-toast strong { font-weight: 600; }

.checkout-toast-success { border-color: rgba(232,168,23,0.40); }
.checkout-toast-success strong { color: var(--accent-amber); }

.checkout-toast-cancel  { border-color: rgba(255,255,255,0.10); }
.checkout-toast-cancel strong { color: var(--text-primary); }

.checkout-toast-error   { border-color: rgba(239,68,68,0.45); }
.checkout-toast-error strong { color: var(--accent-red, #ef4444); }

.checkout-toast-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent-amber);
  border: 1px solid var(--accent-amber);
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.checkout-toast-cta:hover { background: var(--accent-amber); color: #0c0c10; }

.checkout-toast-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.checkout-toast-close:hover { color: var(--text-primary); }

.checkout-toast-leaving { animation: checkoutToastOut 200ms ease-in forwards; }

@keyframes checkoutToastIn  {
  from { transform: translate(-50%, 16px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}
@keyframes checkoutToastOut {
  from { transform: translate(-50%, 0);    opacity: 1; }
  to   { transform: translate(-50%, 16px); opacity: 0; }
}

/* Inline spinner for buttons in a loading state (e.g., "Opening checkout…").
   Inherits currentColor so it matches whichever button it lives inside. */
.checkout-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 8px;
  animation: checkoutSpin 0.6s linear infinite;
}
@keyframes checkoutSpin {
  to { transform: rotate(360deg); }
}

/* Slightly dim the disabled button to confirm "click registered". */
button[data-checkout-busy="1"],
a[data-checkout-busy="1"] {
  opacity: 0.85;
  cursor: progress;
}