@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #FAF6EF;
  --color-bg-band: #14213D;
  --color-card: #FFFFFF;
  --color-navy: #1B2A4A;
  --color-navy-deep: #0F1B33;
  --color-gold: #C9A227;
  --color-gold-hover: #A8871F;
  --color-text: #1F2430;
  --color-text-muted: #5B6270;
  --color-border: #E7DFCF;
  --color-error: #B3261E;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --radius: 16px;
  --space-lg: 48px;
  --space-md: 24px;
  --space-sm: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

/* Sticky footer: on short pages (e.g. the quiz intro step) the footer sits
   at the bottom of the viewport instead of floating right under the card
   with a big empty gap below it; on tall pages it just flows normally. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-footer {
  margin-top: auto;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  margin: 0 0 var(--space-sm);
}

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero {
  background: linear-gradient(180deg, var(--color-navy-deep) 0%, var(--color-bg-band) 100%);
  color: #FFFFFF;
  padding: 64px 20px 80px;
  text-align: center;
}

.hero h1 {
  color: #FFFFFF;
  font-size: clamp(28px, 5vw, 42px);
  margin-bottom: var(--space-md);
}

.hero p {
  color: #D8DEEC;
  font-size: 18px;
  max-width: 480px;
  margin: 0 auto var(--space-md);
}

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin: -48px auto var(--space-lg);
  max-width: 560px;
  box-shadow: 0 12px 32px rgba(15, 27, 51, 0.12);
}

.step { display: none; }
.step.active { display: block; animation: fade-in 250ms ease; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.progress-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.progress-bar-fill {
  height: 100%;
  background: var(--color-gold);
  transition: width 300ms ease;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-navy);
}

input[type="date"],
input[type="time"],
input[type="text"],
input[type="email"] {
  width: 100%;
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: var(--font-body);
  background: #FFFFFF;
  color: var(--color-text);
  min-height: 44px;
}

input:focus {
  outline: 3px solid var(--color-gold);
  outline-offset: 1px;
}

.helper-text {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-top: 6px;
}

.error-text {
  color: var(--color-error);
  font-size: 14px;
  margin-top: 6px;
  display: none;
}

/* Fills the space below the intro step's CTA with a "how it works" +
   trust block — shown only on the intro step (nested inside its .step div,
   so it hides itself once the visitor clicks Start, same as every other
   quiz step) instead of floating in the empty area under the card. */
.intro-info {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.intro-info h3 {
  font-size: 17px;
}

.intro-info ol {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  padding-left: 20px;
}

.intro-info li {
  margin-bottom: 8px;
}

.intro-trust {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 0;
}

/* #resultSummary holds one <p> per reading paragraph (assets/js/quiz.js
   setResultSummary()) — override the browser default UA <p> margin (which
   doesn't match this design's spacing scale) so paragraphs sit on the same
   even rhythm as the rest of the card instead of looking like a plain
   double-spaced text dump. */
#resultSummary p {
  margin: 0 0 var(--space-sm);
}

#resultSummary p:last-child {
  margin-bottom: 0;
}

/* Per-planet section headings ("Sun in Capricorn") set by
   assets/js/quiz.js renderReadingBlocks() — smaller and tighter than the
   page h2 so the reading reads as one card with subsections, not a stack of
   separate pages. */
.reading-block-title {
  font-size: 17px;
  margin: var(--space-md) 0 6px;
}

#resultSummary h3.reading-block-title:first-child {
  margin-top: 0;
}

.choice-grid {
  display: grid;
  gap: 12px;
  margin-bottom: var(--space-md);
}

.choice-btn {
  min-height: 44px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.choice-btn:hover { border-color: var(--color-gold); background: #FFFBF0; }
.choice-btn[aria-pressed="true"] {
  border-color: var(--color-gold);
  background: #FFF6DE;
  font-weight: 600;
}

.btn-primary {
  display: inline-block;
  width: 100%;
  min-height: 48px;
  padding: 14px 24px;
  background: var(--color-gold);
  color: #1B1502;
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 150ms ease;
}

.btn-primary:hover { background: var(--color-gold-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-link {
  display: inline-block;
  margin-top: 12px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-body);
}

.place-suggestions {
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  max-height: 200px;
  overflow-y: auto;
}

.place-suggestion {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 15px;
}

.place-suggestion:hover { background: #FFF6DE; }

.buildup-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-md);
  display: block;
  animation: spin 3s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .buildup-icon { animation: none; }
  .step.active { animation: none; }
}

.disclaimer {
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
  padding: 24px 20px 8px;
}

.site-footer-nav {
  text-align: center;
  font-size: 12px;
  padding: 0 20px 32px;
}

.site-footer-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-footer-nav a:hover {
  color: var(--color-navy);
}

.lang-switcher {
  text-align: center;
  padding: 0 20px 24px;
}

.lang-select {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 26px 4px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235B6270'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}

.lang-select:hover {
  border-color: var(--color-gold);
  color: var(--color-navy);
}

.result-chip {
  display: inline-block;
  background: #FFF6DE;
  border: 1px solid var(--color-gold);
  color: var(--color-navy);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  margin: 4px 4px 4px 0;
}

/* Push permission lock overlay (Veltorra SDK) — hide the pointer arrow and
   center the guidance text, matching reference behavior */
.PF-arrow { display: none !important; }
.PF-win-chrome-align {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
}

/* Outbound offer card (result step) — separate from the astrology reading
   itself, styled as a distinct bordered box so it doesn't look like part of
   the reading content. */
.offer-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
}

.offer-card-title {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-navy);
  margin: 0 0 8px;
}

.offer-card-subtitle {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}