/* PBG Copilot portal. Deep navy, white, gold. Serif headline, Poppins body.
   Premium and quiet. No pills, no gradient blobs, no template hero. Subtle, expensive
   motion. Fully responsive with safe area insets. Light and dark aware, though the portal
   commits to its navy identity in both. */

:root {
  --navy-deep: #06121f;
  --navy: #0a1b2e;
  --panel: #0f2439;
  --panel-2: #12293f;
  --line: #1c3350;
  --white: #ffffff;
  --soft: #c9d4e0;
  --muted: #8697a8;
  --gold: #c9a227;
  --gold-soft: #e7c766;
  --danger: #e2879a;
  --radius: 8px;
  --radius-lg: 14px;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--navy-deep);
  color: var(--white);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

a { color: var(--gold-soft); text-decoration: none; }
a:hover { color: var(--gold); }

.shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 40px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 6px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

.wordmark {
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
}

/* Language toggle. Not a pill: a quiet two state control with an underline indicator. */
.lang {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.lang button[aria-pressed='true'] {
  color: var(--navy-deep);
  background: var(--gold);
  font-weight: 600;
}
.lang button:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }

.card {
  width: 100%;
  max-width: 440px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 38px 34px;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
  animation: rise 0.6s var(--ease) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

h1.title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--white);
}

p.lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--soft);
  margin: 0 0 26px;
}

.field { margin: 0 0 18px; }
.field label {
  display: block;
  font-size: 13px;
  color: var(--soft);
  margin: 0 0 8px;
  letter-spacing: 0.3px;
}
.field input {
  width: 100%;
  background: var(--navy-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px; /* 16px avoids iOS zoom on focus */
  padding: 14px 15px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input::placeholder { color: #5c6b7a; }
.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}
.field input:-webkit-autofill {
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0 40px var(--navy-deep) inset;
}

/* Reveal animation for the email first second step. */
.reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease);
}
.reveal.open { max-height: 260px; opacity: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 15px 20px;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.25s var(--ease), opacity 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.btn-primary { background: var(--gold); color: var(--navy-deep); }
.btn-primary:hover { background: var(--gold-soft); }
.btn[disabled] { opacity: 0.55; cursor: default; }

.btn-google {
  background: var(--white);
  color: #1f2937;
  margin-bottom: 18px;
  gap: 10px;
}
.btn-google:hover { background: #f2f4f7; }
.gicon { width: 18px; height: 18px; display: inline-block; }

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 20px 0;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 22px;
  font-size: 14px;
}

.foot {
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--soft);
  text-align: center;
}

.note {
  min-height: 20px;
  font-size: 14px;
  line-height: 1.5;
  margin: 4px 0 16px;
}
.note.error { color: var(--danger); }
.note.ok { color: var(--gold-soft); }

.status-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--soft);
}
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}
.dot.pending { background: var(--gold-soft); }
.dot.suspended, .dot.cancelled { background: var(--danger); }

.page-footer {
  text-align: center;
  color: #4f5e6d;
  font-size: 12px;
  padding: 20px 0 26px;
}

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(6, 18, 31, 0.35);
  border-top-color: var(--navy-deep);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 8px;
  display: none;
}
.btn.loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .card { padding: 32px 24px 28px; border-radius: 12px; }
  h1.title { font-size: 26px; }
  .topbar { padding: 18px 18px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}