/*
  Theme: "The Digital Architect" (Hackverse design system, HACKVERSE-DESIGN.md).
  High-contrast dark editorial UI: tonal layering instead of borders/shadows,
  Space Grotesk display type, Inter body type, neon-green primary accent.

  Tokens explicitly given in the spec are used as-is (surface, surface-container-low,
  surface-container-highest, primary, primary-container). Tokens the spec didn't spell
  out an exact value for (on-primary-container, outline-variant, secondary-container,
  error*) are derived to fit the same palette — flagged below so they're easy to swap
  if you have exact values for them.
*/

:root {
  /* --- explicit tokens from HACKVERSE-DESIGN.md --- */
  --surface: #131313;
  --surface-container-lowest: #0e0e0e;
  --surface-container-low: #1c1b1b;
  --surface-container-highest: #353534;
  --primary: #f0ffe9;
  --primary-container: #33ff57;

  /* --- derived: not given an exact value in the spec, chosen to fit --- */
  --on-surface: #e5e2e1;
  --on-surface-variant: #a3a19f;
  --on-primary-container: #0b1f0f;
  --outline-variant: rgba(255, 255, 255, 0.15); /* "Ghost Border" rule: outline-variant @ 15% */
  --secondary-container: rgba(51, 255, 87, 0.12);
  --on-secondary-container: #94e39f;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  --font-display: "Space Grotesk", ui-sans-serif, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
}

/* Level 2 (Cards/Modules): surface-container-highest, to pull focus. */
.card {
  width: 100%;
  max-width: 420px;
  background: var(--surface-container-highest);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  /* Ambient shadow, never pure black, per the Elevation rules */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-primary-container);
  background: var(--primary-container);
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}

.card h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--on-surface);
}

.card .subtitle {
  color: var(--on-surface-variant);
  font-size: 14px;
  margin: 0 0 24px;
}

.amount-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.amount {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

.amount-original {
  font-size: 15px;
  color: var(--on-surface-variant);
  text-decoration: line-through;
}

/* "Tech-Spec" chip, e.g. for the applied coupon code */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
}

/* No divider lines between rows (the "No-Line" rule) — separation comes from
   vertical rhythm alone. */
.detail-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

.detail-list .label {
  color: var(--on-surface-variant);
}

.detail-list .value {
  color: var(--on-surface);
  text-align: right;
  word-break: break-word;
}

button.pay {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}

button.pay:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 0 1px rgba(51, 255, 87, 0.4), 0 8px 24px rgba(51, 255, 87, 0.25);
}

button.pay:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}

/* Status banners use tonal fills, never lines/shadows for emphasis. */
.status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: 20px;
}

.status-banner.success {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.status-banner.error {
  background: var(--error-container);
  color: var(--on-error-container);
}

.loading {
  text-align: center;
  color: var(--on-surface-variant);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 24px 0;
}

.footer-note {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--on-surface-variant);
}

.hidden {
  display: none !important;
}