/* Botanical Bloom (formerly "Design 1") — colors and the
   "Placeholder Names of weds" script sampled directly from
   design-1-landing-reference.png, not guessed. */
:root {
  --bb-cream: #f6f2e7;
  --bb-cream-deep: #efe9d9;
  --bb-rose: #9f5b4c;
  --bb-rose-soft: #c98f7c;
  --bb-sage: #7f8f5f;
  --bb-ink: #3a3128;
}

html.bb-page, body.bb-page {
  background: var(--bb-cream);
}
body.bb-page {
  margin: 0;
  color: var(--bb-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  line-height: 1.5;
}
body.bb-page * { box-sizing: border-box; }

.bb-script {
  font-family: 'Beau Rivage', cursive;
  color: var(--bb-rose);
}
.bb-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-rose);
  font-size: 0.85rem;
}
.bb-btn {
  display: inline-block;
  border: 1.5px solid var(--bb-rose);
  color: var(--bb-rose);
  background: transparent;
  border-radius: 999px;
  padding: 0.85em 2.4em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.bb-btn:hover { background: var(--bb-rose); color: var(--bb-cream); }

/* ---------- Hero (top of the one continuous scroll) ---------- */
.bb-hero {
  position: relative;
  height: 100vh;
  min-height: 480px;
  padding: 10vh 6vw;
  display: flex;
  align-items: flex-end;
}
.bb-hero-photo,
.bb-hero-photo-placeholder {
  position: absolute;
  inset: 10vh 6vw;
  width: calc(100% - 12vw);
  height: calc(100% - 20vh);
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.bb-hero-photo-placeholder { background: var(--bb-cream-deep); }
.bb-hero-panel {
  position: relative;
  z-index: 1;
  background: rgba(246, 242, 231, 0.88);
  backdrop-filter: blur(2px);
  border-radius: 10px;
  padding: 1.75rem 2rem;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.bb-hero-floral { width: 90px; height: auto; margin-bottom: 0.25rem; }
.bb-hero-names { margin: 0; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1.05; font-weight: 400; }
.bb-hero-meta { margin: 0; }
.bb-hero-panel .bb-btn { align-self: flex-start; margin-top: 0.6rem; }

@media (max-width: 760px) {
  .bb-hero { align-items: flex-end; padding: 6vh 5vw; }
  .bb-hero-photo, .bb-hero-photo-placeholder { inset: 6vh 5vw; width: calc(100% - 10vw); height: calc(100% - 12vh); }
  .bb-hero-panel { max-width: none; width: 100%; }
  .bb-hero-names { font-size: clamp(2rem, 9vw, 2.8rem); }
}

/* ---------- Passcode overlay ----------
   input_8 fix for the muddy #8f887e page-background bug: that color was
   exactly this backdrop's rgba(58,49,40,0.55) composited over the cream
   page, from a fragile [hidden]-attribute/specificity toggle. input_9
   removes the toggle question entirely — the overlay markup is only ever
   in the response at all when the guest is unverified (see
   invitation.ejs), so it can just always be `display: flex` whenever
   it's present. No JS-driven open/close state, no close button: this is
   a real access boundary, not a dismissible modal. */
.bb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 49, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10;
}
/* Belt-and-suspenders: the Hero is 100vh so there's nothing to scroll to
   anyway while unverified (the rest of the page isn't sent at all), but
   lock scrolling explicitly too rather than relying on that. */
body.bb-locked {
  overflow: hidden;
  height: 100vh;
}
.bb-overlay-card {
  background: var(--bb-cream);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  max-width: 360px;
  width: 100%;
  text-align: center;
  position: relative;
}
.bb-overlay-label { margin: 0 0 1rem; }
.bb-overlay-card input[type="text"] {
  width: 100%;
  padding: 0.7em 1em;
  margin-bottom: 1rem;
  border: 1px solid var(--bb-rose-soft);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  text-align: center;
}
.bb-error { color: #b3261e; margin: 0 0 1rem; }

/* ---------- Guest-state area (QR / accept-decline / banners) ----------
   Replaces the old boxed "invitation card" — no border/frame of its own,
   sits directly in the scroll below the hero. */
.bb-state-area { max-width: 480px; margin: 0 auto; padding: 3rem 6vw 1rem; text-align: center; }
.bb-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }
.bb-banner {
  background: var(--bb-cream-deep);
  border: 1px solid var(--bb-rose-soft);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.bb-qr { width: 240px; max-width: 100%; margin: 1.25rem auto 0; display: block; }

/* ---------- Message placeholder ----------
   Admin-authored free text, framed so it reads as a deliberate part of
   the invitation rather than a dumped paragraph. */
.bb-message-frame {
  max-width: 480px;
  margin: 2rem auto;
  padding: 2rem 1.75rem;
  text-align: center;
  border: 1.5px solid var(--bb-rose-soft);
  border-radius: 4px;
  position: relative;
}
.bb-message-frame::before,
.bb-message-frame::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--bb-rose);
}
.bb-message-frame::before { top: -6px; left: -6px; border-right: none; border-bottom: none; }
.bb-message-frame::after { bottom: -6px; right: -6px; border-left: none; border-top: none; }
.bb-message-frame p { margin: 0; font-size: 1.15rem; font-style: italic; }

/* ---------- Square button tiles (Itinerary / Gallery / Other Details) --- */
.bb-tile-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 480px;
  margin: 1.5rem auto 3rem;
  padding: 0 6vw;
}
.bb-tile {
  width: 108px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px solid var(--bb-rose);
  border-radius: 12px;
  color: var(--bb-rose);
  text-decoration: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 0.5rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.bb-tile:hover { background: var(--bb-rose); color: var(--bb-cream); }

/* ---------- Itinerary / Contacts sections (further down the scroll) ----
   Own decorative background rather than repeating the hero photo. */
.bb-section {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: 4rem 6vw;
  text-align: center;
  overflow: hidden;
}
.bb-section-motif {
  position: absolute;
  top: -20px;
  right: -30px;
  width: 160px;
  height: auto;
  opacity: 0.35;
  pointer-events: none;
}
.bb-section h2 { position: relative; }
.bb-section ul { list-style: none; padding: 0; margin: 2rem 0 0; text-align: left; position: relative; }
.bb-section li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--bb-cream-deep);
  font-size: 1.15rem;
}
.bb-section li:last-child { border-bottom: none; }
.bb-section.bb-contacts { background: var(--bb-cream-deep); }

/* ---------- Guest-facing gallery/cameos grid (input_11, input_12) ---------- */
.bb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.6rem;
  margin-top: 1.5rem;
  position: relative;
}
.bb-gallery-cell { position: relative; }
.bb-gallery-grid a { display: block; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; }
.bb-gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-gallery-download {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  aspect-ratio: auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(58, 49, 40, 0.65);
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
  line-height: 1;
}
.bb-cameo-caption {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--bb-rose);
  text-align: center;
}

/* ---------- Per-event admin page (input_9 colors/fonts, input_10 layout) ----
   Reuses the same tokens/fonts as the guest-facing pages so this wedding's
   admin page feels like part of its overall look, not a generic panel.
   input_10: one uniform corner radius for every tile/card/button/input on
   this page (--bb-admin-radius).
   input_20 Phase 4: structural/layout rules (grid, spacing, sizing, form
   dimensions) moved to public/assets/css/admin-shared.css, loaded before
   this file on the shared admin templates (edit-event.ejs, assets.ejs).
   Only this theme's own colors/fonts/backgrounds/borders/radii remain
   here — see admin-shared.css's header comment for the full split. */
:root { --bb-admin-radius: 10px; }

.bb-admin {
  background: var(--bb-cream);
  color: var(--bb-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
}
.bb-admin a { color: var(--bb-rose); }
.bb-admin h1 {
  font-family: 'Beau Rivage', cursive;
  color: var(--bb-rose);
  font-weight: 400;
  font-size: 2.6rem;
}
.bb-admin h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--bb-rose);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1rem;
}

/* Per-event admin header (input_12 Part B) */
.bb-admin-header-inner {
  background: rgba(255, 253, 249, 0.7);
  border: 1px solid var(--bb-cream-deep);
  backdrop-filter: blur(10px);
}
.bb-admin-header-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--bb-ink);
}
.bb-admin-nav a {
  color: var(--bb-rose);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: calc(var(--bb-admin-radius) - 4px);
}
.bb-admin-nav a:hover, .bb-admin-nav a.bb-admin-nav-active { background: rgba(159, 91, 76, 0.12); }

.bb-admin-gallery-caption {
  background: rgba(58, 49, 40, 0.6);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.2;
}

/* Shared tile/card look — every block on this page (quick-action tile,
   detail-field tile, guest-management panel, danger zone) uses this same
   background/border so nothing reads as a different component. */
.bb-admin-card, .bb-admin-tile {
  background: #fffdf9;
  border: 1px solid var(--bb-cream-deep);
}

.bb-admin-photo-panel { background: var(--bb-cream-deep); }

.bb-details-grid label { font-size: 0.85rem; }

.bb-admin-thumb {
  border-radius: calc(var(--bb-admin-radius) - 3px);
  background: var(--bb-cream-deep);
}

.bb-admin label { font-size: 0.95rem; }
.bb-admin input[type="text"],
.bb-admin input[type="date"],
.bb-admin input[type="email"],
.bb-admin input[type="password"],
.bb-admin input[type="color"],
.bb-admin input[type="file"],
.bb-admin textarea,
.bb-admin select {
  border: 1px solid var(--bb-rose-soft);
  border-radius: var(--bb-admin-radius);
  background: #fff;
  color: var(--bb-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
}
.bb-admin input[readonly] { background: var(--bb-cream-deep); }
.bb-admin th, .bb-admin td { border-bottom: 1px solid var(--bb-cream-deep); }
.bb-admin th { color: var(--bb-rose); font-weight: 600; }
.bb-admin .bb-btn { border-radius: var(--bb-admin-radius); font-size: 0.95rem; }
.bb-admin .bb-stats li { font-size: 1rem; }
.bb-admin .bb-stats strong { font-size: 1.6rem; color: var(--bb-rose); font-weight: 400; }
.bb-admin .bb-danger { border-color: var(--bb-rose); }
.bb-admin .bb-error { color: #b3261e; }

/* Gallery management (input_11) */
.bb-admin-gallery-item { border-radius: calc(var(--bb-admin-radius) - 3px); }
.bb-admin-gallery-item button {
  background: rgba(58, 49, 40, 0.7);
  color: #fff;
  font-size: 0.9rem;
}