/* =========================================================
   Allenberry — Passes landing (/passes)

   Rebuilt from the Claude Design handoff "Summer Pass Landing".
   The page body is inline-styled in components/PagePasses.jsx (a faithful
   port of the design's inline styles); this file holds only what inline
   can't do — interactive hover/focus states — plus the page background.
   Everything is scoped under .passes-page so it never leaks into the rest
   of the SPA. Fonts come from the site tokens (--display Fraunces,
   --body Inter, --mono JetBrains Mono), so no extra font loading is needed.
   ========================================================= */

.passes-page { background: #f4f1ea; }

/* --- Primary CTA (gold), used on hero, the Summer card, and closing --- */
.passes-page .pp-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f3c969;
  color: #1a2530;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 16px 28px;
  border-radius: 2px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.passes-page .pp-cta:hover { background: #ecbb4e; }
.passes-page .pp-cta[aria-busy="true"] { opacity: 0.7; cursor: default; }

/* --- Outline CTA (Day card), a modifier layered on .pp-cta --- */
.passes-page .pp-cta--outline {
  background: transparent;
  color: #21455a;
  border: 1px solid rgba(33, 69, 90, 0.5);
  padding: 14px 24px;
}
.passes-page .pp-cta--outline:hover {
  background: rgba(33, 69, 90, 0.07);
  border-color: #21455a;
}

/* --- Ghost CTA (closing Day Pass, on dark), a modifier on .pp-cta --- */
.passes-page .pp-cta--ghost {
  background: transparent;
  color: #f6f1e8;
  border: 1px solid rgba(246, 241, 232, 0.5);
  padding: 15px 26px;
}
.passes-page .pp-cta--ghost:hover {
  background: rgba(246, 241, 232, 0.12);
  border-color: #f6f1e8;
}

/* --- Hero secondary text link (light, on the dark hero) --- */
.passes-page .pp-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  padding-bottom: 3px;
  transition: border-color 0.2s ease, gap 0.2s ease;
}
.passes-page .pp-textlink--light {
  color: #f6f1e8;
  border-bottom: 1px solid rgba(246, 241, 232, 0.45);
}
.passes-page .pp-textlink--light:hover {
  border-bottom-color: #f6f1e8;
  gap: 12px;
}

/* --- Form fields (gift recipient name/email, Day Pass visit date) --- */
.passes-page .pp-field {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d8d4ca;
  border-radius: 2px;
  font-family: var(--body);
  font-size: 14px;
  color: #1a2530;
  background: #fff;
}
.passes-page .pp-field:focus { border-color: #365d78; outline: none; }

.passes-page .pp-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #365d78;
  cursor: pointer;
  flex: none;
}

/* --- Inline validation message under a card's buy button --- */
.passes-page .pp-error {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #b5704a;
}