/* ==========================================================================
   Checked Bags & Good Vibes — Design Tokens
   ========================================================================== */
:root {
  /* Color */
  --ink:        #16232B;   /* near-black navy, primary text / dark chrome */
  --horizon:    #1B3A4B;   /* deep navy blue, header scrim / secondary dark */
  --coral:      #FF6B4A;   /* primary accent */
  --gold:       #E8A94E;   /* warm gold, luxury footer + tag stamps */
  --sand:       #FBF3E7;   /* cream, text on dark surfaces */
  --teal:       #2E7D6E;   /* secondary accent */

  /* Type */
  --font-display: 'Fraunces', serif;
  --font-body:    'Work Sans', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* Layout */
  --header-h: 84px;
  --edge: clamp(20px, 5vw, 64px);

  --ease-standard: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; } /* native smooth-scroll for nav anchor jumps, no JS needed */

/* bbPress redirects back to a topic with a #post-{id} anchor after a
   successful reply/topic submission (its own native, unmodified behavior --
   confirmed working via a live test). Without this, the fixed site header
   (--header-h, position: fixed, z-index: 100) sits directly over the top of
   whatever the browser scrolls that anchor to, hiding the new post's
   author/timestamp -- confirmed via a live test where the reply landed with
   its top edge at y=0, fully obscured. Scoped to bbPress's own wrapper so
   this can't affect anything outside forum/topic/reply pages. */
#bbpress-forums [id^="post-"] { scroll-margin-top: calc(var(--header-h) + 1rem); }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
body.checkedbags-landing,
body.checkedbags-dashboard {
  font-family: var(--font-body);
  color: var(--sand);
  background: var(--ink);
}

a { color: inherit; }

img { user-select: none; -webkit-user-drag: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Required-field marker -- only applied to fields actually enforced as
   required (HTML `required` attribute, or blocked server-side/JS-disabled
   submit) rather than every field, so it doesn't imply required-ness that
   isn't real. */
.cbv-required {
  color: var(--coral);
  margin-right: 0.15rem;
  font-weight: 700;
}

/* Sitewide dropdown arrow -- confirmed live that plain <select> elements
   render with NO visible arrow at all in this environment (no `appearance`
   was ever set anywhere in this file, and none of our dark-card selects
   like Gate 12's "Your role" showed one), leaving dropdowns indistinguishable
   from static text. `appearance: none` + this background-image chevron
   guarantees one consistent, branded arrow everywhere on the front end,
   regardless of browser/OS default rendering. Scoped to this stylesheet, so
   wp-admin's own selects are untouched. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E8A94E' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 8px;
  padding-right: 2.25rem !important;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(22,35,43,0.75) 0%, rgba(22,35,43,0) 100%);
  pointer-events: none; /* re-enabled on interactive children below */
}
.site-header * { pointer-events: auto; }

.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--edge);
}

.brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  text-decoration: none;
  letter-spacing: 0.01em;
  color: var(--sand);
}
.brand-amp { color: var(--coral); font-style: normal; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.phase-nav-list {
  list-style: none;
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  margin: 0;
  padding: 0;
}

.phase-nav-list a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sand);
  opacity: 0.75;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: opacity 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard);
}
.phase-nav-list a:hover,
.phase-nav-list a:focus-visible {
  opacity: 1;
  border-bottom-color: var(--coral);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border-radius: 2px;
  transition: transform 0.2s var(--ease-standard), background 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
}
.btn-ghost {
  border: 1px solid rgba(251,243,231,0.5);
  color: var(--sand);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid rgba(251,243,231,0.5);
  color: var(--sand);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  border-radius: 2px;
  cursor: pointer;
}
.nav-toggle-bars {
  width: 16px; height: 1px; background: var(--sand);
  box-shadow: 0 5px 0 var(--sand), 0 -5px 0 var(--sand);
}

/* ==========================================================================
   Static photo sections — stacked in normal page flow, no JS required.
   Each section is a full-bleed photo with a soft ink-colored gradient at
   the top and bottom edge, so adjacent sections blend at the seam instead
   of cutting hard from one photo straight into the next.
   ========================================================================== */
.photo-section {
  position: relative;
  min-height: 100vh !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* Fallback gradient shows if a photo URL is ever missing/broken */
.photo-section {
  background-image: var(--img, none), linear-gradient(150deg, var(--fallback-a, var(--horizon)), var(--fallback-b, var(--coral))) !important;
}
.photo-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 20%;
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(22,35,43,0) 100%);
  pointer-events: none;
}
.photo-section::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 26%;
  background: linear-gradient(to top, var(--ink) 0%, rgba(22,35,43,0) 100%);
  pointer-events: none;
}

/* Hero text, centered over the first photo */
.hero-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-welcome {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3rem, 11vw, 8rem);
  margin: 0;
  color: var(--sand);
  letter-spacing: 0.01em;
}
.hero-scroll {
  margin: 0.75rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero-arrow {
  display: inline-block;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-arrow { animation: none; }
}

/* Headline + supporting line on phases 2, 3, 4, 6 — real marketing copy on
   a solid dark card so it stays legible regardless of what's behind it in
   the photo. !important locked in from the start this time — the last two
   rounds of debugging both traced back to Kadence quietly overriding a
   plain (non-!important) background/sizing rule. */
.phase-copy {
  position: absolute !important;
  z-index: 2;
  max-width: 560px;
  padding: 1.85rem 2.1rem !important;
  background: rgba(22,35,43,0.82) !important;
  border-radius: 4px !important;
  box-shadow: 0 20px 44px rgba(0,0,0,0.35);
}
.phase-copy-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  color: var(--sand);
  margin: 0 0 0.85rem;
}
.phase-copy-sub {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important;
  line-height: 1.6;
  color: var(--sand);
  margin: 0;
}

/* Itinerary card on Gate 5 — a concrete sample schedule instead of a
   headline, styled like a printed itinerary/boarding-pass insert. */
.itinerary-card {
  position: absolute !important;
  z-index: 2;
  background: rgba(251,243,231,0.97) !important;
  color: var(--ink);
  border-radius: 6px !important;
  padding: 1.75rem 2.1rem !important;
  max-width: 420px;
  width: 100%;
  text-align: left;
  box-shadow: 0 20px 44px rgba(0,0,0,0.35);
}
.itinerary-day {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--coral);
  margin: 0 0 1rem;
}
.itinerary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.itinerary-list li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}
.itinerary-time {
  font-family: var(--font-mono);
  font-size: 0.85rem !important;
  color: var(--teal);
  flex-shrink: 0;
  width: 68px;
}
.itinerary-label {
  font-family: var(--font-body);
  font-size: 1.02rem !important;
}
.itinerary-list li.is-highlight .itinerary-label {
  font-weight: 700;
  color: var(--coral);
}

/* Per-photo placement — pick whichever sits over the calmest part of
   that specific image. Applied alongside .phase-copy or .itinerary-card.
   Full 3x3 grid so future adjustments are just a class swap. */
.is-top-left     { top: 14%; left: var(--edge); text-align: left; }
.is-top-center   { top: 12%; left: 50%; transform: translateX(-50%); text-align: center; }
.is-top-right    { top: 14%; right: var(--edge); text-align: right; }

.is-mid-left     { top: 50%; left: var(--edge); transform: translateY(-50%); text-align: left; }
.is-mid-center   { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.is-mid-right    { top: 50%; right: var(--edge); transform: translateY(-50%); text-align: right; }

/* bottom-left gets extra clearance since the phase-tag always lives there */
.is-bottom-left   { bottom: calc(var(--edge) + 76px); left: var(--edge); text-align: left; }
.is-bottom-center { bottom: var(--edge); left: 50%; transform: translateX(-50%); text-align: center; }
.is-bottom-right  { bottom: var(--edge); right: var(--edge); text-align: right; }

/* Combinable nudges — stack with any position class above instead of
   needing a brand new class for every small adjustment. */
.nudge-down { margin-top: 96px; } /* roughly 1 inch */

/* Forces a headline onto a single line regardless of length — widens the
   card to fit-content instead of wrapping within the usual max-width.
   Font size stays the same as every other gate's headline; only the
   wrapping behavior changes. */
.phase-copy--nowrap {
  max-width: calc(100vw - 2 * var(--edge));
  width: max-content;
}
.phase-copy--nowrap .phase-copy-headline {
  white-space: nowrap;
}

/* On small screens, absolute per-photo placement gets cramped — fall back
   to plain centered flow (relying on .photo-section's flex centering). */
@media (max-width: 640px) {
  .phase-copy,
  .itinerary-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    max-width: calc(100% - 2 * var(--edge));
    margin: 0 auto;
    text-align: left;
  }
}

/* Boarding-pass style phase tag — the signature element, now a plain
   always-visible static label per section instead of a JS-driven one.
   Rotation pushed from a barely-there -2.5deg to a deliberate -8deg, and the
   punch-hole (::before) moved out of the flex row into a fixed top-left
   spot so a "string" (::after) can hang from it convincingly -- reads as an
   actual luggage tag on a strap, not a rotated card with a decorative dot. */
.phase-tag {
  position: absolute;
  left: var(--edge);
  bottom: var(--edge);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--sand);
  color: var(--ink);
  padding: 0.6rem 0.9rem 0.55rem 1.15rem;
  border-radius: 3px;
  transform: rotate(-8deg);
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}
.phase-tag::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 11px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow:
    -3px 0 0 -2px var(--sand),
    3px 0 0 -2px var(--sand);
}
.phase-tag::after {
  content: "";
  position: absolute;
  top: -25px;
  left: 14.5px;
  width: 2px;
  height: 38px;
  border-radius: 2px;
  background: linear-gradient(to bottom, transparent, var(--gold) 35%, var(--gold));
  opacity: 0.8;
}
.phase-tag-gate {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--coral);
}
.phase-tag-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  border-left: 1px dashed rgba(22,35,43,0.35);
  padding-left: 0.65rem;
}

/* CTA section */
.cta-section {
  position: relative;
  min-height: 70vh !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, var(--horizon) 0%, var(--coral) 55%, var(--gold) 100%) !important;
}
.cta-content { max-width: 640px; padding: 3rem var(--edge); }
.cta-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251,243,231,0.85);
  margin: 0 0 0.75rem;
}
.cta-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  margin: 0;
  color: var(--sand);
}
.cta-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(251,243,231,0.9);
  margin: 0.75rem 0 2.25rem;
}
.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-outline-light {
  border: 1px solid rgba(251,243,231,0.6);
  color: var(--sand);
  padding: 0.85rem 1.6rem;
}
.btn-outline-light:hover { border-color: var(--sand); background: rgba(251,243,231,0.08); }

.btn-ticket {
  position: relative;
  /* Was --sand (cream) -- read fine on the dark Dashboard, but most of
     these buttons (Gate 12 submit, Travel Profile/Intake save, Account
     Continue prompts) sit on the site's light cream page background,
     where cream-on-cream was nearly invisible. Coral holds contrast on
     both. */
  background: var(--coral);
  color: var(--sand);
  padding: 0.85rem 1.6rem;
  font-weight: 700;
  text-decoration: none;
  gap: 0.4rem;
}
.btn-ticket:hover { transform: translateY(-2px); filter: brightness(0.92); }
.ticket-notch {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  /* Was coral, matching the old coral notch-on-cream punch-hole look;
     button background is coral now, so the notch needs to switch to the
     button's old cream to stay visible instead of disappearing into it. */
  background: var(--sand);
  flex-shrink: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--ink);
  border-top: 1px solid rgba(232,169,78,0.35);
  padding: 3rem var(--edge) 2.25rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-brand-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
  color: var(--gold);
}
.footer-tagline {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(251,243,231,0.65);
}
.footer-links {
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
}
.footer-links a { text-decoration: none; color: rgba(251,243,231,0.8); }
.footer-links a:hover { color: var(--gold); }
.footer-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: rgba(251,243,231,0.5);
  text-align: right;
}
.footer-meta p { margin: 0.2rem 0; }
.footer-stamp { color: var(--gold); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .primary-nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    left: 0;
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem var(--edge) 2rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
    border-bottom: 1px solid rgba(232,169,78,0.25);
  }
  .primary-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .primary-nav * {
    pointer-events: none;
  }
  .primary-nav.is-open * {
    pointer-events: auto;
  }
  .phase-nav-list { flex-direction: column; gap: 0.85rem; }
  .nav-toggle { display: inline-flex; }
  .phase-tag { left: var(--edge); right: var(--edge); }
}

@media (max-width: 540px) {
  .cta-actions { flex-direction: column; align-items: stretch; }
  .footer-inner { flex-direction: column; }
  .footer-meta { text-align: left; }
}

/* ==========================================================================
   Member Dashboard shell
   ========================================================================== */
body.checkedbags-dashboard {
  background: var(--ink);
}

.dashboard-main {
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 4rem;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}

.dashboard-hero {
  text-align: center;
  margin-bottom: 3rem;
}
.dashboard-hero-pagelabel {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--coral);
  border: 1px solid rgba(255,107,74,0.4);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  margin: 0 0 0.9rem;
}
.dashboard-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.5rem;
}
.dashboard-hero-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--sand);
  margin: 0 0 0.75rem;
}
.dashboard-hero-sub {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: rgba(251,243,231,0.75);
  margin: 0;
}

.gate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.gate-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.75rem;
  text-decoration: none;
  transition: transform 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard);
}
.gate-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}
.gate-card-number {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--coral);
}
.gate-card-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--sand);
}
.gate-card-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(251,243,231,0.7);
  line-height: 1.5;
}

/* ==========================================================================
   Gate 10 — Discussion Boards
   ========================================================================== */
.board-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.board-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--sand);
  transition: border-color 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
}
.board-row:hover {
  border-color: var(--gold);
  transform: translateX(4px);
}
.board-row-icon {
  color: var(--coral);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.board-row-lounge .board-row-icon {
  color: var(--gold);
}
.board-row-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  flex-grow: 1;
}
.board-row-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(251,243,231,0.6);
}

/* ==========================================================================
   Following page (/following/) -- same dark-card-on-light-page convention
   as Gate 10's .board-row above, reused rather than inventing a new look.
   ========================================================================== */
.following-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 480px;
  margin: 0 auto;
}
.following-list-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  color: var(--sand);
  transition: border-color 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
}
.following-list-item:hover {
  border-color: var(--gold);
  transform: translateX(4px);
}
.following-list-item img {
  border-radius: 50%;
  flex-shrink: 0;
}
.following-list-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
}

/* ==========================================================================
   Find Members (/members/) -- same dark-card-grid convention as the Gate
   dashboard cards (.gate-grid/.gate-card), reused rather than inventing a
   new look for a member directory.
   ========================================================================== */
.member-directory-search {
  display: flex;
  gap: 0.75rem;
  max-width: 480px;
  margin: 0 auto 2rem;
}
.member-directory-search input[type="search"] {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  border: 1px solid rgba(22, 35, 43, 0.2);
  font-family: var(--font-body);
}
.member-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.member-directory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.5rem 1.25rem;
  transition: transform 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard);
}
.member-directory-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}
.member-directory-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.member-directory-card-link img {
  border-radius: 50%;
}
.member-directory-card-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--sand);
  text-align: center;
}

/* ==========================================================================
   Gate 07 — Vacations (trip cards + detail)
   ========================================================================== */
.trip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.trip-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.5rem;
}
.trip-card-type {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral);
}
.trip-card-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--sand);
  margin: 0.15rem 0;
}
.trip-card-dates,
.trip-card-price,
.trip-card-spots {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(251,243,231,0.75);
  margin: 0;
}
.trip-card-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.trip-card-actions .btn[disabled] {
  opacity: 0.5;
  cursor: default;
}
.trip-detail {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.trip-detail-cover {
  height: 280px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}
.trip-detail-type {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.5rem;
}
.trip-detail-section h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.trip-detail-traveler-intake {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.5rem;
}
.cbv-intake-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* display:block, not flex -- a flex container splits each direct text
   run AND each inline element into its OWN flex item, so with
   flex-direction:column a "* Field Name" leading-asterisk pair (a text
   node adjacent to the .cbv-required span, both direct children of this
   label) rendered as two stacked rows instead of one inline line, pushing
   the field's input/select down an extra row -- confirmed live as a
   regression from moving the asterisk in front of the label text. Block
   flow lets the asterisk and label text share one line naturally (normal
   inline layout), while the input/select below still starts its own line
   because it's a block-level element in its own right (margin-top below
   replaces the old flex `gap`). */
.cbv-intake-field label {
  color: rgba(251,243,231,0.85);
  font-size: 0.85rem;
  display: block;
}
.cbv-intake-field label.check-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.cbv-intake-field label.check-row input {
  display: inline-block;
  width: auto;
  margin-top: 0;
}
.cbv-intake-optional-section:not(.cbv-intake-field) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cbv-intake-optional-categories-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}
.cbv-intake-field input, .cbv-intake-field select {
  display: block;
  margin-top: 0.3rem;
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(251,243,231,0.3);
  /* background-color, not the `background` shorthand -- shorthand resets
     background-image too, which silently wiped the sitewide select-arrow
     icon (confirmed live: computed background-image came back "none" here
     despite the base `select` rule setting it). */
  background-color: rgba(251,243,231,0.06);
  color: var(--sand);
  font-family: var(--font-body);
}
.cbv-intake-field a {
  color: var(--gold);
}
/* Required-field validation-error highlight (Trip Details item 7). On an
   input/select/textarea this outlines the field itself; on a checkbox
   group (no single element to outline sensibly) it's added to the whole
   .cbv-intake-field wrapper instead, via a left accent bar. */
.cbv-intake-field input.cbv-field-invalid,
.cbv-intake-field select.cbv-field-invalid,
.cbv-intake-field textarea.cbv-field-invalid {
  border-color: var(--coral) !important;
  box-shadow: 0 0 0 1px var(--coral);
}
.cbv-intake-field.cbv-field-invalid {
  border-left: 3px solid var(--coral);
  padding-left: 0.75rem;
  margin-left: -0.75rem;
}
/* .cb-page-hint's sitewide default (var(--ink), for the light page
   background used on Gate 08/09/10/12/Feed/etc.) is unreadable here --
   this card is dark (var(--horizon) above). Same fix for the boilerplate
   "Why Travel Insurance Matters" paragraph text, which was inheriting
   Kadence's own default <p> color (also dark) instead of this card's
   cream convention -- confirmed live as literally the same color as the
   card background, i.e. fully invisible, not just low-contrast.
   max-width: none overrides .cb-page-hint's sitewide 640px cap so the
   intro paragraph stretches to this card's own full width, matching the
   rest of the content, instead of stopping short partway across. */
.trip-detail-traveler-intake .cb-page-hint,
.cbv-intake-insurance-overview p {
  color: rgba(251,243,231,0.85);
  opacity: 1;
  max-width: none;
}
/* Tightened paragraph spacing, scoped to this card only -- Kadence's
   default <p> margin (sitewide, not something this stylesheet otherwise
   controls) reads too wide across this form's many instructional
   paragraphs. Specificity here (class + descendant tag) beats the
   sitewide bare .cb-page-hint rule's own margin too, so this correctly
   tightens both wpautop output and .cb-page-hint instances within this
   one card without touching paragraph spacing anywhere else on the site. */
.trip-detail-traveler-intake p {
  margin: 0 0 0.75rem;
}
/* "Why Travel Insurance Matters" reads one size too large relative to the
   rest of this form. The h4 selector here is deliberately qualified with
   .trip-detail-traveler-intake (not just .cbv-intake-insurance-overview
   h4) to out-specificity that card's own later .trip-detail-traveler-intake
   h4 rule (font-size: 1rem) -- confirmed live that the unqualified version
   was silently overridden by it (equal specificity, later in the file). */
.trip-detail-traveler-intake .cbv-intake-insurance-overview h4,
.cbv-intake-insurance-overview p {
  font-size: 0.9rem;
}
/* Bulletproof guard: several class-based display rules on this page
   (.cbv-intake-field, .cbv-intake-optional-section) unconditionally set
   display:flex with equal-or-higher specificity than the browser's own
   [hidden]{display:none} default, which an author-origin rule always wins
   over at equal specificity -- silently defeating the hidden attribute
   used to reveal/hide the optional-category sections (confirmed live via
   a standalone reproduction). !important here is deliberate and scoped to
   this one universal safety property, matching the standard fix for this
   exact well-known class of bug. */
[hidden] {
  display: none !important;
}
.trip-roster-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.trip-roster-list li {
  background: rgba(251,243,231,0.08);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}
.trip-detail-min-notice {
  font-size: 0.85rem;
  color: var(--gold);
  margin-top: 0.5rem;
}
.trip-detail-rules {
  border-left: 2px solid var(--coral);
  padding-left: 1rem;
}

.cb-empty {
  color: var(--ink);
  opacity: 0.75;
  padding: 2rem 0;
}
.cb-empty a {
  color: var(--coral);
  text-decoration: underline;
}

/* Shared instructional-copy line -- same muted weight as .cb-empty but
   inline rather than a standalone empty-state block, since this sits above
   real content instead of replacing it. */
.cb-page-hint {
  color: var(--ink);
  opacity: 0.75;
  max-width: 640px;
  margin: 0 0 1.5rem;
}

/* ==========================================================================
   Gate 09 — Payments
   ========================================================================== */
.payment-card {
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.payment-card-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--sand);
  margin: 0 0 0.75rem;
}
.payment-card-balance {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}
.payment-card-balance-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(251,243,231,0.6);
}
.payment-card-balance-amount {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold);
}
.payment-card-paid-badge {
  color: var(--teal);
  font-weight: 600;
}
.payment-history {
  margin-top: 1.25rem;
  border-top: 1px solid rgba(251,243,231,0.15);
  padding-top: 0.75rem;
}
.payment-history h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: rgba(251,243,231,0.6);
  margin: 0 0 0.5rem;
}
.payment-history ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: rgba(251,243,231,0.75);
}

/* ==========================================================================
   Gate 08 — Photo Gallery
   ========================================================================== */
.gallery-section { margin-bottom: 2.5rem; }
.gallery-section-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.gallery-trip-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  /* Was --sand (cream) -- this title sits directly on the page's light
     cream background (Gate template), not a dark card, so cream-on-cream
     was nearly unreadable. Same root cause as the .btn-ticket contrast fix
     from the General batch. */
  color: var(--ink);
  margin: 0 0 0.75rem;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.gallery-empty {
  grid-column: 1 / -1;
  /* Was rgba(251,243,231,0.5) (faint cream) -- same light-page issue as
     .gallery-trip-title above; matches .cb-empty's existing ink/0.75
     convention for muted-but-readable text on this background. */
  color: var(--ink);
  opacity: 0.75;
  font-size: 0.85rem;
}
.photo-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--horizon);
}
.photo-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform 0.2s var(--ease-standard);
}
.photo-tile-img:hover { transform: scale(1.04); }
.photo-like-btn {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(22,35,43,0.6);
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  color: var(--sand);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
}
.photo-like-btn:hover { background: rgba(22,35,43,0.85); }
.photo-like-btn.is-liked,
.photo-like-btn.is-liked:hover {
  color: var(--coral);
}
.photo-like-count { line-height: 1; }

.cb-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.cb-upload-btn.is-uploading {
  opacity: 0.6;
  pointer-events: none;
}

.cb-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: rgba(22,35,43,0.92);
  padding: var(--edge);
}
.cb-lightbox.is-open { display: flex; }
.cb-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}
.cb-lightbox-close {
  position: absolute;
  top: var(--edge);
  right: var(--edge);
  background: none;
  border: 1px solid rgba(251,243,231,0.5);
  border-radius: 999px;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sand);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
}
.cb-lightbox-close:hover { border-color: var(--gold); color: var(--gold); }

.cb-upload-btn {
  color: var(--ink);
  border-color: rgba(22,35,43,0.35);
}
.cb-upload-btn:hover {
  color: var(--coral);
  border-color: var(--coral);
}

.photo-delete-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: rgba(22,35,43,0.6);
  color: var(--sand);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
}
.photo-delete-btn:hover {
  background: var(--coral);
}

.photo-download-btn {
  position: absolute;
  top: 0.4rem;
  right: 2.6rem;
  background: rgba(22,35,43,0.6);
  color: var(--sand);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: none;
}
.photo-download-btn:hover {
  background: var(--gold);
}

/* ==========================================================================
   Gate 11 — Travel Rules
   ========================================================================== */
.rules-agreement {
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--horizon);
  border-radius: 6px;
  border: 1px solid rgba(232,169,78,0.25);
}
.rules-agree-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--sand);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.rules-agreed-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--teal);
  font-weight: 600;
}
.rules-section-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
  margin: 2rem 0 1rem;
}
.rules-trip-card {
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.rules-trip-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--sand);
  margin: 0 0 0.4rem;
}
.rules-group-size {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(251,243,231,0.6);
  display: block;
  margin-bottom: 0.75rem;
}
.rules-addendum-text {
  color: rgba(251,243,231,0.85);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
.rules-addendum-none {
  opacity: 0.5;
  font-style: italic;
}

/* ==========================================================================
   Gate 12 — Vacation Requests
   ========================================================================== */
.requests-section-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
  margin: 2rem 0 1rem;
}
.requests-divider {
  border: none;
  border-top: 1px solid rgba(22,35,43,0.15);
  margin: 2.5rem 0;
}
.requests-empty {
  color: var(--ink);
  opacity: 0.6;
  font-size: 0.9rem;
}
.suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.suggestion-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.suggestion-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--sand);
}
.suggestion-desc {
  font-size: 0.85rem;
  color: rgba(251,243,231,0.7);
  margin: 0.25rem 0 0;
}
.suggestion-vote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(251,243,231,0.08);
  border: none;
  border-radius: 6px;
  color: var(--sand);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
}
.suggestion-vote-btn.is-voted {
  background: var(--coral);
}
.suggestion-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 480px;
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.5rem;
}
.trip-request-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.75rem;
}
.trip-request-form fieldset {
  border: none;
  border-top: 1px solid rgba(251,243,231,0.15);
  padding: 1.25rem 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.trip-request-form fieldset:first-of-type {
  border-top: none;
  padding-top: 0;
}
.trip-request-form legend {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0;
  margin-bottom: 0.25rem;
}
.suggestion-form input, .suggestion-form textarea,
.trip-request-form input, .trip-request-form select, .trip-request-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(251,243,231,0.3);
  /* background-color, not the `background` shorthand -- see the same note
     on .cbv-intake-field above; shorthand here was silently wiping the
     sitewide select-arrow icon's background-image. */
  background-color: rgba(251,243,231,0.06);
  color: var(--sand);
  font-family: var(--font-body);
}
/* display:block, not flex -- same leading-asterisk stacking bug as
   .cbv-intake-field label above, fixed the same way. */
.trip-request-form label {
  color: rgba(251,243,231,0.8);
  font-size: 0.85rem;
  display: block;
}
.trip-request-form label.check-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.trip-request-form label.check-row input {
  display: inline-block;
  width: auto;
  margin-top: 0;
}
.requests-fine-print {
  font-size: 0.78rem;
  color: rgba(251,243,231,0.55);
  font-style: italic;
  line-height: 1.5;
}
.requests-check-group-label {
  font-size: 0.8rem;
  color: rgba(251,243,231,0.7);
  margin: 0.25rem 0 -0.25rem;
}
.request-status-card {
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.request-status-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--sand);
  margin: 0 0 0.5rem;
}
.request-status-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  background: rgba(251,243,231,0.15);
  color: var(--sand);
}
.request-status-badge.status-quoted { background: var(--gold); color: var(--ink); }
.request-status-badge.status-accepted { background: var(--teal); color: var(--sand); }
.request-status-badge.status-declined { background: rgba(255,107,74,0.3); }
.request-quote-box {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(251,243,231,0.15);
}
.request-quote-price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold);
  margin: 0 0 0.5rem;
}
.request-quote-notes {
  color: rgba(251,243,231,0.8);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.request-accepted-note {
  color: var(--teal);
  font-size: 0.9rem;
}
.request-accepted-note a { color: var(--gold); }

/* ==========================================================================
   Trip detail — summary stats + request details (Gate 12 follow-up)
   ========================================================================== */
.trip-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(22,35,43,0.12);
}
.trip-detail-stat {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}
.trip-detail-stat strong {
  color: var(--coral);
}
.request-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.5rem;
}
.request-detail-list li {
  font-size: 0.9rem;
  color: var(--ink);
}
.request-detail-list li strong {
  color: var(--coral);
}
@media (max-width: 640px) {
  .request-detail-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Shared Gate Page template — solid dark header (no hero photo behind it),
   logo-only branding, member nav list
   ========================================================================== */
.site-header.is-solid {
  background: var(--ink);
}
.brand-logo-only img,
.brand-logo-img {
  display: block !important;
  height: 60px !important;
  width: auto !important;
  max-width: none !important;
}
.gate-nav-list {
  list-style: none;
  display: flex;
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
  margin: 0;
  padding: 0;
}
.gate-nav-list a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sand);
  opacity: 0.75;
  transition: opacity 0.2s var(--ease-standard);
}
.gate-nav-list a:hover,
.gate-nav-list a:focus-visible {
  opacity: 1;
  color: var(--gold);
}

/* Nav dropdowns (My Profile / Navigation / Account) -- click-toggled via
   app.js, not CSS :hover, so touch and desktop share one behavior. */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-toggle {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: 0.75;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: opacity 0.2s var(--ease-standard);
}
.nav-dropdown-toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.7;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown.is-open .nav-dropdown-toggle {
  opacity: 1;
  color: var(--gold);
}
.nav-dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}
.nav-dropdown.is-open .nav-dropdown-menu {
  display: block;
}
.nav-dropdown-menu a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sand);
  opacity: 0.75;
  transition: opacity 0.2s var(--ease-standard);
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  opacity: 1;
  color: var(--gold);
}
@media (min-width: 861px) {
  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    border: 1px solid rgba(232,169,78,0.25);
    border-radius: 6px;
    padding: 0.6rem 0;
    min-width: 160px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.3);
    z-index: 20;
  }
  .nav-dropdown-menu li {
    display: block;
  }
  .nav-dropdown-menu a {
    display: block;
    padding: 0.45rem 1rem;
  }
}
@media (max-width: 860px) {
  .nav-dropdown-menu {
    padding-left: 1rem;
    margin-top: 0.6rem;
  }
  .nav-dropdown.is-open .nav-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
}

/* Gate-number hover badge (Navigation dropdown) -- a hanging tag in the
   same boarding-pass style as .phase-tag/.gate-ribbon-number, revealed on
   hover/focus so the dropdown's primary text can be the plain-language
   label. Touch has no hover equivalent, so the badge is shown inline and
   always-visible below the desktop breakpoint instead of hidden entirely. */
.nav-gate-item {
  position: relative;
}
.nav-gate-badge {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%) translateX(6px) scale(0.92);
  transform-origin: left center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--coral);
  background: var(--sand);
  padding: 0.3rem 0.55rem;
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s var(--ease-standard), visibility 0.15s, transform 0.15s var(--ease-standard);
  white-space: nowrap;
  z-index: 30;
}
.nav-gate-item:hover .nav-gate-badge,
.nav-gate-item:focus-within .nav-gate-badge {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(6px) scale(1);
}
@media (max-width: 860px) {
  .nav-gate-badge {
    position: static;
    display: inline-block;
    transform: none;
    opacity: 1;
    visibility: visible;
    margin-left: 0.5rem;
    box-shadow: none;
  }
}

.gate-main {
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 4rem;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}
.gate-page-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ink);
  text-align: center;
  margin: 0 0 2.5rem;
}
@media (max-width: 860px) {
  .gate-nav-list { flex-direction: column; gap: 0.85rem; }
}

/* ==========================================================================
   Homepage hero — subtitle under "Welcome"
   ========================================================================== */
.hero-brand-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 3.2vw, 2.2rem);
  color: var(--sand);
  margin: 0.5rem 0 0;
}

/* ==========================================================================
   Feed — upcoming trips, discussion, tips, destinations
   ========================================================================== */
.feed-section {
  margin-bottom: 2.5rem;
}
.feed-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 860px) {
  .feed-columns {
    grid-template-columns: 1fr;
  }
}
.feed-section-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
  margin: 0 0 1rem;
}
.feed-trip-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
.feed-trip-card {
  flex: 0 0 200px;
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.1rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.feed-trip-type {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral);
}
.feed-trip-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--sand);
}
.feed-trip-spots {
  font-size: 0.8rem;
  color: rgba(251,243,231,0.7);
}
.feed-topic-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.feed-topic-row {
  display: flex;
  justify-content: space-between;
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 0.85rem 1.1rem;
  text-decoration: none;
}
.feed-topic-title {
  color: var(--sand);
  font-size: 0.92rem;
}
.feed-topic-forum {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(251,243,231,0.5);
}
.feed-tip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.tip-card {
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.25rem;
  text-align: center;
}
.tip-card-icon {
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
  display: block;
}
.tip-card-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--sand);
  margin: 0 0 0.4rem;
}
.tip-card-text {
  font-size: 0.82rem;
  color: rgba(251,243,231,0.7);
  margin: 0;
}
.destination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.destination-card {
  height: 140px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--horizon);
  display: flex;
  align-items: flex-end;
  padding: 0.75rem;
  position: relative;
}
.destination-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22,35,43,0.7), transparent 60%);
  border-radius: 6px;
}
.destination-card-name {
  position: relative;
  color: var(--sand);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
}

/* ==========================================================================
   Gate Ribbon — large version of the homepage's small "GATE 01" tag
   ========================================================================== */
.gate-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--sand);
  color: var(--ink);
  padding: 1rem 2rem;
  border-radius: 4px;
  transform: rotate(-1.5deg);
  box-shadow: 0 14px 32px rgba(0,0,0,0.16);
  margin: 0 auto 2.5rem;
  position: relative;
  z-index: 2;
}
.gate-ribbon-number {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--coral);
  white-space: nowrap;
}
.gate-ribbon-divider {
  width: 1px;
  align-self: stretch;
  background: repeating-linear-gradient(to bottom, rgba(22,35,43,0.35) 0 6px, transparent 6px 12px);
}
.gate-ribbon-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 2rem);
  white-space: nowrap;
}
.gate-main {
  text-align: center;
}
.gate-main .gate-page-content {
  text-align: left;
}

/* ==========================================================================
   Per-page background systems
   ========================================================================== */
.gate-bg-frame {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.gate-main.gate-bg-mode-frame {
  background: var(--sand);
  max-width: 1100px;
  margin: 0 auto;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 4rem;
  padding-left: var(--edge);
  padding-right: var(--edge);
  position: relative;
  z-index: 1;
}

.gate-bg-full {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
}
.gate-main.gate-bg-mode-full {
  background: rgba(251,243,231,0.9);
  max-width: 1100px;
  margin: 2rem auto;
  border-radius: 10px;
  padding: 3rem var(--edge) 4rem;
}

.gate-bg-left-video {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: clamp(180px, 18vw, 320px);
  overflow: hidden;
  z-index: -1;
}
.gate-bg-left-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gate-main.gate-bg-mode-left-video {
  max-width: 1100px;
  margin: 0 auto 0 clamp(200px, 20vw, 340px);
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 4rem;
  padding-left: var(--edge);
  padding-right: var(--edge);
}
@media (max-width: 900px) {
  .gate-bg-left-video { display: none; }
  .gate-main.gate-bg-mode-left-video { margin-left: auto; }
}

/* Sticky footer — footer always sits at the bottom of the viewport at
   minimum, even when page content is shorter than one screen */
body.checkedbags-gate .gate-main {
  min-height: calc(100vh - var(--header-h));
}

/* ==========================================================================
   Gate 12 — scattered photo/video decoration (fixed, tilted, margin areas)
   ========================================================================== */
.gate-scatter-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.gate-scatter-item {
  position: absolute;
  width: 220px;
  height: 160px;
  background: var(--sand);
  background-size: cover;
  background-position: center;
  border: 8px solid var(--sand);
  box-shadow: 0 16px 32px rgba(0,0,0,0.22);
  border-radius: 2px;
}
.gate-scatter-video {
  border-color: var(--sand);
}
.gate-scatter-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scatter-pos-1 { top: 6%;  left: 2%;  transform: rotate(-9deg); }
.scatter-pos-2 { top: 24%; left: 1%;  transform: rotate(5deg); }
.scatter-pos-3 { top: 44%; left: 2%;  transform: rotate(-4deg); }
.scatter-pos-4 { top: 63%; left: 1%;  transform: rotate(7deg); }
.scatter-pos-5 { top: 81%; left: 3%;  transform: rotate(-6deg); }

.scatter-pos-video-1 { top: 14%; right: 2%; transform: rotate(4deg); width: 260px; height: 190px; }
.scatter-pos-video-2 { top: 56%; right: 3%; transform: rotate(-7deg); width: 240px; height: 175px; }

@media (max-width: 1200px) {
  .gate-scatter-field { display: none; }
}

/* WPForms fields on our dark-themed pages (homepage/dashboard) need light
   text/labels — WPForms' own defaults assume a light page background */
body.checkedbags-landing .wpforms-container label,
body.checkedbags-dashboard .wpforms-container label,
body.checkedbags-landing .wpforms-container .wpforms-field-label,
body.checkedbags-dashboard .wpforms-container .wpforms-field-label {
  color: var(--sand) !important;
}
body.checkedbags-landing .wpforms-container input::placeholder,
body.checkedbags-dashboard .wpforms-container input::placeholder,
body.checkedbags-landing .wpforms-container textarea::placeholder,
body.checkedbags-dashboard .wpforms-container textarea::placeholder {
  color: rgba(22,35,43,0.5) !important;
}
body.checkedbags-landing .wpforms-container .wpforms-field-sublabel,
body.checkedbags-dashboard .wpforms-container .wpforms-field-sublabel {
  color: rgba(251,243,231,0.6) !important;
}

/* ==========================================================================
   Dashboard — Trip Guest scoped view + Full Member trip highlight
   (Phase 5 of the trip-invite build)
   ========================================================================== */
.dashboard-highlight-banner {
  background: var(--horizon);
  border: 1px solid var(--coral);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.dashboard-highlight-text {
  font-family: var(--font-body);
  color: var(--sand);
  margin: 0;
  flex: 1 1 240px;
}
.dashboard-highlight-text strong {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.1rem;
}

.dashboard-section-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}

.dashboard-my-trips {
  margin-bottom: 2rem;
}
.dashboard-trip-card {
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.dashboard-trip-card-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--sand);
  margin: 0 0 0.75rem;
}
.dashboard-trip-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.dashboard-invite-result {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(251,243,231,0.75);
  word-break: break-all;
  margin-top: 0.5rem;
  width: 100%;
}
.dashboard-invite-url { margin: 0; }
.dashboard-invite-qr { width: 140px; height: 140px; display: block; border-radius: 4px; }
.dashboard-invite-link-row,
.dashboard-invite-qr-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.dashboard-copy-btn {
  flex-shrink: 0;
  padding: 0.4rem 0.75rem;
}

.dashboard-upgrade-cta {
  background: var(--horizon);
  border: 1px dashed rgba(232,169,78,0.4);
  border-radius: 6px;
  padding: 1.5rem;
  text-align: center;
}
.dashboard-upgrade-cta p {
  font-family: var(--font-body);
  color: rgba(251,243,231,0.85);
  margin: 0 0 1rem;
}

/* ==========================================================================
   "My Trips" sticky note + collapsible trip cards
   ========================================================================== */
.dashboard-hero-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem 3rem;
  margin-bottom: 3rem;
}
.dashboard-hero-row .dashboard-hero {
  margin-bottom: 0;
}

.dashboard-sticky-note {
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  background: linear-gradient(160deg, #fff6bd 0%, #ffe066 100%);
  color: #3a2f0b;
  padding: 2.25rem 1.5rem 1.75rem;
  border-radius: 2px;
  box-shadow: 0 14px 26px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
  transform: rotate(4deg);
  transition: transform 0.2s var(--ease-standard);
}
.dashboard-sticky-note:hover {
  transform: rotate(1deg) scale(1.02);
}
.dashboard-sticky-note::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 24px 24px;
  border-color: transparent transparent rgba(0,0,0,0.18) transparent;
}
.sticky-note-pin {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a75, var(--coral) 60%, #b8341c 100%);
  box-shadow: 0 3px 4px rgba(0,0,0,0.4);
}
.sticky-note-pin::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  width: 2px;
  height: 9px;
  background: #8a8a8a;
  transform: translateX(-50%);
}
.sticky-note-heading {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  margin: 0 0 1.1rem;
  color: #2b230a;
}
.sticky-note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.sticky-note-trip-link {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #3a2f0b;
  text-decoration: none;
  border-bottom: 1px dashed rgba(58,47,11,0.35);
  padding-bottom: 0.4rem;
}
.sticky-note-list li:last-child .sticky-note-trip-link {
  border-bottom: none;
  padding-bottom: 0;
}
.sticky-note-trip-link:hover,
.sticky-note-trip-link.is-active {
  color: var(--horizon);
  font-weight: 600;
}

.dashboard-trip-card.is-collapsed {
  display: none;
}

@media (max-width: 640px) {
  .dashboard-hero-row {
    flex-direction: column;
    align-items: center;
  }
  .dashboard-sticky-note {
    transform: rotate(2deg);
  }
}

/* ==========================================================================
   Cover photo picker on dashboard trip cards (Phase 6)
   ========================================================================== */
.dashboard-trip-cover {
  height: 120px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  margin-bottom: 0.75rem;
}

.dashboard-cover-picker {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(232,169,78,0.25);
}
.dashboard-cover-picker-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251,243,231,0.6);
  margin: 0 0 0.5rem;
}
.dashboard-cover-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.dashboard-cover-preset-btn {
  width: 72px;
  height: 54px;
  border-radius: 4px;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s var(--ease-standard);
}
.dashboard-cover-preset-btn:hover,
.dashboard-cover-preset-btn:focus-visible {
  border-color: var(--gold);
}
.dashboard-cover-upload-label {
  display: inline-flex;
  cursor: pointer;
}
.dashboard-cover-result {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(251,243,231,0.75);
  margin-top: 0.5rem;
}

/* ==========================================================================
   Travel Profile account tab (Phase 8a)
   ========================================================================== */
.cbv-travel-profile fieldset {
  margin-bottom: 1.5rem;
}
.cbv-travel-profile label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.cbv-travel-profile input[type="text"],
.cbv-travel-profile input[type="tel"],
.cbv-travel-profile input[type="date"],
.cbv-travel-profile select {
  max-width: 320px;
}
.cbv-travel-profile textarea {
  max-width: 420px;
  width: 100%;
}
.cbv-tp-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.cbv-tp-row > label {
  flex: 1;
  min-width: 140px;
}
.cbv-travel-profile label.cbv-tp-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.cbv-travel-profile label.cbv-tp-inline input {
  width: auto;
  max-width: 180px;
}
.cbv-travel-profile label.check-row {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.cbv-travel-profile label.check-row input {
  width: auto;
}

/* ==========================================================================
   Per-Traveler Trip Intake (Phase 8c) -- contrast fix + side-by-side fields
   ========================================================================== */
.trip-detail-traveler-intake h3 {
  color: var(--sand);
}
.cbv-intake-field-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}
.cbv-intake-field-row label {
  flex: 1;
  min-width: 160px;
}
.cbv-intake-companions-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 860px) {
  .cbv-intake-companions-columns {
    grid-template-columns: 1fr;
  }
}
.cbv-intake-warning {
  font-size: 0.8rem;
  color: rgba(251,243,231,0.7);
  font-style: italic;
}
.trip-detail-traveler-intake h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--sand);
  margin: 0.5rem 0 0.25rem;
}
.cbv-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.25rem;
}
.cbv-checkbox-row .check-row {
  margin: 0;
}

/* ==========================================================================
   Member Profile (/user/{nicename}/) -- restyles Ultimate Member's own
   header markup rather than replacing it (see checkedbags-member-profile-
   hooks.php). Avatar centered, overlapping the top of the cover banner --
   deliberately not a Facebook-style bottom-left overlap; this profile
   should operate like one (Feed = home, Profile = hub), not look like one.
   ========================================================================== */
.um {
  max-width: 720px;
  margin: 0 auto;
}
.um-cover {
  border-radius: 12px;
  overflow: hidden;
  background: var(--horizon);
}
.um-cover-e {
  border-radius: 12px;
  overflow: hidden;
}
/* .um-cover and .um-header are siblings, not parent/child (confirmed in
   UM's own templates/profile.php -- two separate do_action calls) -- the
   overlap is a normal-flow negative margin pulling .um-header up over the
   cover's bottom edge, not absolute positioning against it. */
.um-header {
  position: relative;
  z-index: 2;
  margin-top: -90px;
  text-align: center;
}
/* !important below: UM's own CSS (um-profile.min.css etc.) is enqueued
   after ours and sets display/float/position on this exact class, so a
   plain override loses on source order despite equal specificity --
   confirmed live via computed style, not assumed. */
.um-profile-photo {
  display: inline-block !important;
  float: none !important;
  position: relative !important;
  width: 190px !important;
  height: 190px !important;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--sand);
  box-shadow: 0 4px 16px rgba(22, 35, 43, 0.25);
}
.um-profile-photo img {
  border-radius: 50%;
  display: block;
}
/* UM's own markup wraps the photo in an <a class="um-profile-photo-img">
   that UM's stylesheet positions with `top: -105px` -- a default meant for
   UM's own header layout, not ours. Left alone, it shifts the real photo
   up out of the circle's clip window, leaving the top of the circle empty
   and cropping the bottom of the source image out of view. Reset to fill
   the circle exactly (confirmed live via computed style, not assumed). */
.um-header .um-profile-photo-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 190px !important;
  height: 190px !important;
}
.um-header .um-title,
.um-header h1 {
  text-align: center;
}
.cb-member-since {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 0.25rem 0 1rem;
}
.member-profile-follow-btn {
  display: block;
  margin: 0 auto 1.5rem;
}
/* UM's own membership-status badge ("account status is Undefined") reflects
   internal enum values our custom registration flow doesn't set -- not
   useful to a viewer, hidden rather than left showing "Undefined". */
.um-profile-status {
  display: none;
}
.um-profile-navbar {
  max-width: 720px;
  margin: 0 auto;
  justify-content: center;
}

.member-profile-composer {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  padding: 1rem;
  border: 1px solid rgba(22, 35, 43, 0.12);
  border-radius: 12px;
}
.member-profile-composer-text {
  width: 100%;
  resize: vertical;
  font-family: var(--font-body);
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(22, 35, 43, 0.2);
}
.member-profile-composer-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.6rem;
}
.member-profile-composer-result {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

.member-profile-timeline {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.member-profile-post {
  padding: 1rem;
  border: 1px solid rgba(22, 35, 43, 0.12);
  border-radius: 12px;
}
.member-profile-post-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.member-profile-post-header img {
  border-radius: 50%;
}
.member-profile-post-byline {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.member-profile-post-author {
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.member-profile-post-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  opacity: 0.6;
}
.member-profile-post-delete {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  padding: 0.25rem;
}
.member-profile-post-delete:hover {
  opacity: 1;
  color: var(--coral);
}
.member-profile-post-content {
  margin: 0.75rem 0 0;
  white-space: pre-line;
}

/* ==========================================================================
   Payment Disclaimer banner (Section 6, Piece B)
   ========================================================================== */
.cbv-payment-disclaimer-banner {
  background: var(--horizon);
  border: 1px solid var(--coral);
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cbv-payment-disclaimer-text {
  color: rgba(251,243,231,0.85);
  max-height: 340px;
  overflow-y: auto;
  padding-right: 0.5rem;
}
.cbv-payment-disclaimer-text p {
  margin: 0 0 0.85rem;
}
.cbv-payment-disclaimer-banner label {
  color: rgba(251,243,231,0.9);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cbv-payment-disclaimer-collapsed {
  margin: 0 0 1.5rem;
}
.cbv-payment-disclaimer-collapsed a {
  color: var(--coral);
  font-weight: 600;
}

/* ==========================================================================
   Exchange Rates section (Section 6, Piece D)
   ========================================================================== */
.cbv-exchange-rates-section {
  background: var(--horizon);
  border-radius: 6px;
  padding: 1.5rem;
  margin: 2rem 0;
  color: rgba(251,243,231,0.85);
}
.cbv-exchange-rates-section h3 {
  margin-top: 0;
  color: rgba(251,243,231,0.85);
}
/* Kadence's default h3 color and .cb-page-hint's sitewide default (both
   var(--ink), meant for the light page background) are unreadable here --
   this section is dark (var(--horizon) above), same class of bug as
   .trip-detail-traveler-intake's own .cb-page-hint fix elsewhere in this
   file. Confirmed live: the intro paragraph was effectively invisible,
   not just low-contrast. */
.cbv-exchange-rates-section .cb-page-hint {
  color: rgba(251,243,231,0.85);
  opacity: 1;
}
.cbv-exchange-rates-table {
  width: 100%;
  max-width: 480px;
  border-collapse: collapse;
  margin-top: 0.75rem;
}
.cbv-exchange-rates-table th,
.cbv-exchange-rates-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(251,243,231,0.2);
}
.cbv-exchange-rates-meta {
  font-size: 0.85rem;
  opacity: 0.75;
  margin: 0.75rem 0 0;
}
.cbv-exchange-rates-stale {
  color: var(--coral);
  font-size: 0.9rem;
}

/* ==========================================================================
   Payment page redesign (Section 6, Piece E)
   ========================================================================== */
.cbv-payments-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cbv-payment-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (max-width: 1024px) {
  .cbv-payment-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cbv-payment-cards-grid { grid-template-columns: 1fr; }
}
.cbv-payment-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.5rem;
}
.cbv-payment-card-title {
  margin: 0 0 0.25rem;
}
.cbv-payment-card-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: rgba(251,243,231,0.85);
  font-size: 0.9rem;
}
.cbv-payment-card-label {
  opacity: 0.75;
}
.cbv-payment-card-value {
  font-weight: 600;
  text-align: right;
}
.cbv-payment-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.cbv-payment-card-toggle {
  background: none;
  border: none;
  color: var(--coral);
  cursor: pointer;
  padding: 0.25rem 0;
  align-self: flex-start;
  font-size: 0.85rem;
}
.cbv-payment-card-toggle.is-open i {
  transform: rotate(180deg);
}
.cbv-payment-card-toggle i {
  transition: transform 0.15s ease;
}
.cbv-payment-card-detail {
  border-top: 1px solid rgba(251,243,231,0.15);
  padding-top: 0.75rem;
  color: rgba(251,243,231,0.85);
  font-size: 0.9rem;
}
.cbv-payment-detail-line {
  margin: 0 0 0.35rem;
}
.cbv-payment-card-detail h4 {
  margin: 0.75rem 0 0.35rem;
}
.cbv-payment-card-detail ul {
  margin: 0;
  padding-left: 1.1rem;
}

.cbv-schedule-appt-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.cbv-schedule-appt-modal-inner {
  background: var(--horizon);
  border: 1px solid var(--coral);
  border-radius: 6px;
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: rgba(251,243,231,0.9);
}
.cbv-schedule-appt-modal-inner label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
}
.cbv-schedule-appt-modal-inner input,
.cbv-schedule-appt-modal-inner textarea {
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(251,243,231,0.3);
  background: rgba(0,0,0,0.2);
  color: #fff;
}
.cbv-schedule-appt-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: rgba(251,243,231,0.8);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* ==========================================================================
   Public Trip Landing Page (Section 12) -- reuses the site's own brand
   tokens/fonts and the existing .phase-tag boarding-pass motif rather than
   introducing a separate visual style.
   ========================================================================== */
.cbv-public-landing {
  max-width: 1100px;
  margin: 0 auto;
  color: var(--ink);
}
.cbv-landing-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  background-color: var(--horizon);
  border-radius: 6px;
  overflow: visible; /* .cbv-landing-badge deliberately hangs below this box's own edge */
  margin-bottom: 3.5rem;
}
.cbv-landing-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px; /* clips the image itself, since the container can't use overflow:hidden without also clipping the badge */
  z-index: 0;
}
.cbv-landing-hero-scrim {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 3rem var(--edge) 2.5rem;
  background: linear-gradient(to top, rgba(22,35,43,0.92), rgba(22,35,43,0.15));
  border-radius: 0 0 6px 6px;
}
.cbv-landing-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--sand);
  margin: 0 0 0.5rem;
}
.cbv-landing-tagline {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: rgba(251,243,231,0.9);
  margin: 0;
  max-width: 640px;
}
.cbv-landing-badge {
  bottom: -1rem;
  left: var(--edge);
}

.cbv-landing-basics {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 0 0 3rem;
  padding: 0 var(--edge);
}
.cbv-landing-basic {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cbv-landing-basic-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
}
.cbv-landing-basic-value {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--ink);
}

.cbv-landing-section {
  padding: 0 var(--edge);
  margin-bottom: 3.5rem;
}
.cbv-landing-section h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.75rem;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

.cbv-landing-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.cbv-landing-highlight-card {
  background: var(--horizon);
  border: 1px solid rgba(232,169,78,0.25);
  border-radius: 6px;
  padding: 1.5rem;
  text-align: center;
}
.cbv-landing-highlight-card i {
  font-size: 1.75rem;
  color: var(--coral);
  margin-bottom: 0.75rem;
  display: inline-block;
}
.cbv-landing-highlight-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.4rem;
  color: var(--sand);
}
.cbv-landing-highlight-card p {
  font-size: 0.9rem;
  color: rgba(251,243,231,0.8);
  margin: 0;
}

.cbv-landing-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.cbv-landing-pricing-card {
  background: var(--horizon);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cbv-landing-pricing-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  margin: 0;
  color: var(--sand);
}
.cbv-landing-pricing-desc {
  font-size: 0.9rem;
  color: rgba(251,243,231,0.8);
  margin: 0;
}
.cbv-landing-pricing-amount {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--coral);
  margin: 0.5rem 0 0;
}
.cbv-landing-pricing-amount span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  color: rgba(251,243,231,0.7);
}

.cbv-landing-cta {
  text-align: center;
  padding: 2.5rem var(--edge);
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.cbv-landing-cta-note {
  font-size: 0.85rem;
  color: rgba(22,35,43,0.65);
  max-width: 480px;
  margin: 0;
}

.cbv-landing-disclaimer {
  text-align: center;
  font-size: 0.78rem;
  color: rgba(22,35,43,0.55);
  padding: 1.5rem var(--edge) 2.5rem;
  margin: 0;
}

@media (max-width: 640px) {
  .cbv-landing-hero { min-height: 45vh; }
  .cbv-landing-basics { gap: 1.25rem; }
}