/* Matches overview/onboarding-portal/src/index.css so this stays visually
   consistent with the rest of the signup flow, even though it deploys
   separately (Cloudflare Pages, not the AWS onboarding-portal service). */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #e0e0e0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(79, 120, 255, 0.18), transparent 60%),
    radial-gradient(ellipse at 75% 60%, rgba(160, 80, 255, 0.14), transparent 65%),
    #131b3e;
  background-attachment: fixed;
  min-height: 100vh;
}

.glass-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glass-orbs .orb { position: absolute; border-radius: 9999px; filter: blur(80px); }
.glass-orbs .orb-1 { width: 400px; height: 400px; background: rgba(79, 120, 255, 0.25); top: 20%; left: 30%; animation: orb-drift-1 12s ease-in-out infinite alternate; }
.glass-orbs .orb-2 { width: 350px; height: 350px; background: rgba(160, 80, 255, 0.20); top: 50%; right: 20%; animation: orb-drift-2 15s ease-in-out infinite alternate; }
.glass-orbs .orb-3 { width: 300px; height: 300px; background: rgba(50, 180, 255, 0.18); bottom: 15%; left: 15%; animation: orb-drift-3 10s ease-in-out infinite alternate; }
@keyframes orb-drift-1 { from { transform: translate(0, 0); } to { transform: translate(40px, -30px); } }
@keyframes orb-drift-2 { from { transform: translate(0, 0); } to { transform: translate(-30px, 20px); } }
@keyframes orb-drift-3 { from { transform: translate(0, 0); } to { transform: translate(25px, -25px); } }

.page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 4rem 1.5rem; }

.brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 2.5rem; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.3px; color: #fff; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #4f78ff 0%, #6b47ff 100%); box-shadow: 0 0 12px rgba(79, 120, 255, 0.7); }

.glass-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

h1 { font-size: 1.9rem; font-weight: 700; color: #fff; text-align: center; margin: 0 0 0.5rem; }
.subtitle { color: rgba(224, 224, 224, 0.7); text-align: center; margin: 0 0 3rem; font-size: 1.02rem; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; width: 100%; max-width: 980px; }

.plan-card { padding: 2rem 1.75rem; display: flex; flex-direction: column; }
.plan-card.featured { border-color: rgba(79, 120, 255, 0.5); box-shadow: 0 8px 32px rgba(79, 120, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.plan-name { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0 0 0.25rem; }
.plan-price { font-size: 2.1rem; font-weight: 800; color: #fff; margin: 0.5rem 0; }
.plan-price span { font-size: 0.95rem; font-weight: 500; color: rgba(224, 224, 224, 0.6); }
.plan-features { list-style: none; margin: 1.25rem 0; padding: 0; flex: 1; }
.plan-features li { padding: 0.4rem 0; color: rgba(224, 224, 224, 0.85); font-size: 0.92rem; display: flex; gap: 0.5rem; align-items: baseline; }
.plan-features li::before { content: "✓"; color: #4f78ff; font-weight: 700; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.875rem 2rem; background: linear-gradient(135deg, #4f78ff 0%, #6b47ff 100%);
  color: #ffffff; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.3px;
  border: none; border-radius: 12px; box-shadow: 0 4px 16px rgba(79, 120, 255, 0.35);
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; text-decoration: none;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79, 120, 255, 0.45); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.875rem 2rem; background: rgba(255, 255, 255, 0.06); color: #e0e0e0;
  font-weight: 600; font-size: 0.95rem; border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px; cursor: pointer; text-decoration: none; transition: background 0.15s ease;
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }

.status-card { max-width: 480px; width: 100%; padding: 3rem 2.5rem; text-align: center; }
.status-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 1.8rem; }
.status-icon.success { background: rgba(79, 120, 255, 0.18); box-shadow: 0 0 30px rgba(79, 120, 255, 0.35); }
.status-icon.cancel { background: rgba(255, 255, 255, 0.06); }

.error-banner { background: rgba(255, 80, 80, 0.12); border: 1px solid rgba(255, 80, 80, 0.35); color: #ffb3b3; padding: 0.9rem 1.2rem; border-radius: 12px; margin-bottom: 1.5rem; max-width: 600px; width: 100%; text-align: center; font-size: 0.9rem; }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.footnote { margin-top: 2.5rem; color: rgba(224, 224, 224, 0.4); font-size: 0.8rem; text-align: center; }