/* ================================================================
   styles.css — Annrae & Jacob Wedding Photo Site
   ================================================================
   TABLE OF CONTENTS
   1.  CSS Custom Properties (design tokens)
   2.  Reset & Base
   3.  Typography
   4.  Utility Classes
   5.  Buttons
   6.  Screens (Login, Expired, Closed)
   7.  Navigation
   8.  Sections & Layout
   9.  Hero
   10. Gallery Grid        (Step 4)
   11. Photo Card          (Step 4)
   12. Most Loved          (Step 5)
   13. Guestbook           (Step 5)
   14. Modals              (Steps 4 & 3)
   15. Comments            (Step 4)
   16. Admin Panel         (Step 6)
   17. States (Loading / Empty / Error)
   18. Rope Divider & Decorative
   19. Responsive / Mobile
================================================================ */


/* ----------------------------------------------------------------
   1. CSS Custom Properties (design tokens)
   All colors, spacing, and font references go through these
   variables. Change a variable here → changes everywhere.
   Colors mirror CONFIG.colors in firebase-config.js.
---------------------------------------------------------------- */
:root {
  /* Brand colors — Pacific Coast palette */
  --color-terracotta: #5BBDD4;   /* primary accent — ocean blue */
  --color-terracotta-dark: #3FA0BC;
  --color-terracotta-light: #88CFE0;
  --color-cream: #F5ECD8;        /* main background — warm sand */
  --color-cream-dark: #EAD9C0;   /* slightly deeper sand for cards */
  --color-surface: #FAF5E8;      /* card & panel backgrounds — warm off-white */
  --color-olive: #6EA89A;        /* seafoam accent */
  --color-olive-light: #8DC0B5;
  --color-leather: #A88B6A;      /* driftwood tan */
  --color-leather-light: #C0A880;
  --color-denim: #5A7A8A;        /* horizon blue — timestamps */

  /* Text */
  --color-text-dark: #1C3245;    /* headings, primary text — deep ocean navy */
  --color-text-mid: #4A6272;     /* body text */
  --color-text-light: #7A9DAA;   /* captions, timestamps, placeholders */

  /* Utility */
  --color-white: #FFFFFF;
  --color-error: #C0392B;
  --color-success: #6EA89A;      /* reuse seafoam */
  --color-border: rgba(91, 189, 212, 0.18);  /* ocean at low opacity */

  /* Shadows — layered + color-tinted (not flat shadow-md) */
  --shadow-card:
    0 1px 2px rgba(28, 50, 69, 0.06),
    0 4px 12px rgba(28, 50, 69, 0.08),
    0 8px 24px rgba(28, 50, 69, 0.04);
  --shadow-elevated:
    0 2px 4px rgba(28, 50, 69, 0.08),
    0 8px 24px rgba(28, 50, 69, 0.12),
    0 16px 48px rgba(28, 50, 69, 0.06);
  --shadow-modal:
    0 4px 8px rgba(28, 50, 69, 0.10),
    0 16px 48px rgba(28, 50, 69, 0.20),
    0 32px 80px rgba(28, 50, 69, 0.10);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;    /* headings */
  --font-brand:   'Dancing Script', cursive;             /* nav logo only */
  --font-body:    'DM Sans', system-ui, sans-serif;      /* everything else */

  /* Spacing tokens — use these rather than arbitrary px values */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Layout */
  --max-width: 1100px;
  --nav-height: 60px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Transitions — only transform and opacity, never transition-all */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ----------------------------------------------------------------
   1b. COLOR PALETTES (multi-tenant themes)
   Each couple picks one of 8 palettes in their Appearance tab; the
   slug becomes a body class (e.g. body.palette-garden-terrace). Each
   block re-defines the brand color tokens. Pacific Coast is the
   default and lives in :root above, so it needs no override.

   Palettes are scoped :not([data-theme="dark"]) so the guest dark-mode
   toggle stays a single consistent theme regardless of palette.
---------------------------------------------------------------- */
body.palette-tropical-bloom:not([data-theme="dark"]) {
  --color-terracotta: #E8735A; --color-terracotta-dark: #D15A42; --color-terracotta-light: #F2998A;
  --color-cream: #FFF8F2; --color-cream-dark: #FBEDE2; --color-surface: #FFFCF8;
  --color-olive: #4DBFBF; --color-olive-light: #7FD4D4;
  --color-text-dark: #3A2A24; --color-text-mid: #6B564E; --color-text-light: #A89289;
  --color-border: rgba(232, 115, 90, 0.18);
  --color-success: #4DBFBF;
}
body.palette-garden-terrace:not([data-theme="dark"]) {
  --color-terracotta: #7DAA8A; --color-terracotta-dark: #5F8E6E; --color-terracotta-light: #A3C7AC;
  --color-cream: #FAF3EC; --color-cream-dark: #EEE2D4; --color-surface: #FFFAF5;
  --color-olive: #D4A5B0; --color-olive-light: #E3C2CA;
  --color-text-dark: #33402F; --color-text-mid: #5A6B54; --color-text-light: #94A18B;
  --color-border: rgba(125, 170, 138, 0.20);
  --color-success: #7DAA8A;
}
body.palette-rustic-oak:not([data-theme="dark"]) {
  --color-terracotta: #B87A50; --color-terracotta-dark: #9C6238; --color-terracotta-light: #CE9C78;
  --color-cream: #F7F0E6; --color-cream-dark: #EADBC6; --color-surface: #FBF8F2;
  --color-olive: #8B6A4A; --color-olive-light: #A98B6B;
  --color-text-dark: #3D2E22; --color-text-mid: #6B5847; --color-text-light: #A28A72;
  --color-border: rgba(184, 122, 80, 0.20);
  --color-success: #8B6A4A;
}
body.palette-wildflower-meadow:not([data-theme="dark"]) {
  --color-terracotta: #C4808E; --color-terracotta-dark: #A8636F; --color-terracotta-light: #D6A3AD;
  --color-cream: #F8F3E8; --color-cream-dark: #EBE0CC; --color-surface: #FDFAF3;
  --color-olive: #7A9A6A; --color-olive-light: #9DB890;
  --color-text-dark: #3E2F33; --color-text-mid: #6B565B; --color-text-light: #A4928F;
  --color-border: rgba(196, 128, 142, 0.20);
  --color-success: #7A9A6A;
}
body.palette-midnight-garden:not([data-theme="dark"]) {
  --color-terracotta: #C9A84C; --color-terracotta-dark: #AE8E36; --color-terracotta-light: #DCC074;
  --color-cream: #1A2535; --color-cream-dark: #243044; --color-surface: #2A3850;
  --color-white: #2A3850;
  --color-olive: #E8E0D0; --color-olive-light: #F2ECE0;
  --color-text-dark: #F2EADA; --color-text-mid: #C9BFAE; --color-text-light: #9A8F7C;
  --color-border: rgba(201, 168, 76, 0.25);
  --color-success: #C9A84C;
}
body.palette-lavender-dusk:not([data-theme="dark"]) {
  --color-terracotta: #9B8EC4; --color-terracotta-dark: #7E6FB0; --color-terracotta-light: #B8AED6;
  --color-cream: #F5F3FA; --color-cream-dark: #E7E3F2; --color-surface: #FAF9FE;
  --color-olive: #B0B8C8; --color-olive-light: #C8CFDB;
  --color-text-dark: #2F2A3D; --color-text-mid: #564F66; --color-text-light: #908AA0;
  --color-border: rgba(155, 142, 196, 0.20);
  --color-success: #9B8EC4;
}
body.palette-golden-harvest:not([data-theme="dark"]) {
  --color-terracotta: #D4943A; --color-terracotta-dark: #B87826; --color-terracotta-light: #E3B36B;
  --color-cream: #FBF4E8; --color-cream-dark: #F0E1C8; --color-surface: #FFFBF3;
  --color-olive: #E8C090; --color-olive-light: #F0D4B0;
  --color-text-dark: #3F2E1A; --color-text-mid: #6B543A; --color-text-light: #A8906F;
  --color-border: rgba(212, 148, 58, 0.20);
  --color-success: #C99A4C;
}


/* ----------------------------------------------------------------
   2. Reset & Base
---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-cream);
  color: var(--color-text-mid);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden; /* required for slide-in section animations */
  /* Subtle grain texture via SVG noise filter for depth */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea {
  font-family: var(--font-body);
  font-size: 1rem;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}


/* ----------------------------------------------------------------
   3. Typography
---------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text-dark);
  line-height: 1.2;
  /* Tight tracking on display headings */
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }

p {
  line-height: 1.7;
  color: var(--color-text-mid);
}

.timestamp {
  font-size: 0.78rem;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
}


/* ----------------------------------------------------------------
   4. Utility Classes
---------------------------------------------------------------- */
.hidden { display: none !important; }

/* Ensure the native [hidden] attribute always wins over class-level display values.
   Without this, .loading-state/.empty-state { display:flex } overrides [hidden]. */
[hidden] { display: none !important; }

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--color-text-dark);
  margin-bottom: var(--space-sm);
}

.section-subtitle {
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
  font-size: 0.95rem;
}

.error-text {
  color: var(--color-error);
  font-size: 0.88rem;
  margin-top: var(--space-sm);
}

.consent-notice {
  font-size: 0.80rem;
  color: var(--color-text-light);
  text-align: center;
  margin-top: var(--space-lg);
  line-height: 1.5;
  max-width: 320px;
}

/* Placeholder used during scaffold — removed as each step builds real UI */
.step-placeholder {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.9rem;
}


/* ----------------------------------------------------------------
   5. Buttons
---------------------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 12px 28px;
  background-color: var(--color-terracotta);
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  box-shadow:
    0 1px 2px rgba(91, 189, 212, 0.3),
    0 4px 12px rgba(91, 189, 212, 0.25);
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn-primary:hover {
  background-color: var(--color-terracotta-dark);
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(91, 189, 212, 0.35),
    0 8px 20px rgba(91, 189, 212, 0.30);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(91, 189, 212, 0.3);
}

.btn-primary:focus-visible {
  outline: 3px solid var(--color-terracotta-light);
  outline-offset: 2px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background-color: transparent;
  color: var(--color-terracotta);
  font-size: 0.95rem;
  font-weight: 600;
  border: 2px solid var(--color-terracotta);
  border-radius: var(--radius-sm);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.btn-secondary:hover {
  background-color: var(--color-terracotta);
  color: var(--color-white);
  transform: translateY(-1px);
}

.btn-secondary:active  { transform: translateY(0); }

.btn-secondary:focus-visible {
  outline: 3px solid var(--color-terracotta-light);
  outline-offset: 2px;
}

.btn-full { width: 100%; }

/* Disabled state — used when login button shows "Entering…" */
.btn-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Subtle text-style button (used for admin entry) */
.btn-text {
  color: var(--color-text-light);
  font-size: 0.85rem;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.btn-text:hover    { color: var(--color-text-mid); }
.btn-text:focus-visible { outline: 2px solid var(--color-terracotta); }

/* Song request button — inline at bottom-right of home section */
.btn-song-request {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--color-terracotta);
  border: 1.5px solid var(--color-terracotta);
  border-radius: 20px;
  cursor: pointer;
  box-shadow:
    0 2px 8px rgba(91, 189, 212, 0.18),
    0 1px 2px rgba(91, 189, 212, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background-color: rgba(245, 236, 216, 0.88);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn-song-request:hover {
  background-color: var(--color-terracotta);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow:
    0 4px 16px rgba(91, 189, 212, 0.28),
    0 2px 4px rgba(91, 189, 212, 0.18);
}

.btn-song-request:active  { transform: translateY(0); }
.btn-song-request:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }

.song-note {
  color: var(--color-terracotta);
  font-size: 1rem;
  display: inline-block;
  animation: noteFloat 2s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

.song-note--right {
  animation-delay: 0.7s;
}

@keyframes noteFloat {
  from { transform: translateY(0) rotate(-10deg); opacity: 0.7; }
  to   { transform: translateY(-4px) rotate(10deg); opacity: 1; }
}

/* Song modal icon */
.song-modal-icon {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: var(--space-sm);
}

/* "optional" label suffix in song form */
.song-optional {
  font-weight: 400;
  color: var(--color-text-light);
  font-size: 0.82rem;
  margin-left: 4px;
}

/* Admin ··· button in nav — intentionally faint so casual guests don't notice it */
.btn-admin-entry {
  font-size: 0.8rem;
  padding: 6px 8px;
  color: var(--color-text-light);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), opacity var(--transition-fast);
  opacity: 0.28;           /* very faint — blends into nav */
  letter-spacing: 0.12em; /* spread the dots for visual balance */
  line-height: 1;
  user-select: none;
}

.btn-admin-entry:hover { opacity: 0.65; color: var(--color-text-mid); }
.btn-admin-entry:focus-visible { outline: 2px solid var(--color-terracotta); opacity: 1; }


/* ----------------------------------------------------------------
   6. Screens (Login, Expired, Closed)
   Screens are full-viewport covers shown before the app loads.
---------------------------------------------------------------- */
.screen {
  display: none;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

/* The active screen is shown via flex */
.screen.active { display: flex; }

/* Login card */
.login-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) clamp(var(--space-lg), 6vw, var(--space-2xl));
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-elevated);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.login-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.login-couple {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  color: var(--color-text-dark);
  text-align: center;
  letter-spacing: -0.03em;
}

.login-date {
  font-size: 0.9rem;
  color: var(--color-terracotta);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login-prompt {
  font-size: 0.9rem;
  color: var(--color-text-light);
  text-align: center;
}

/* Platform brand on the tree login + superadmin sign-in */
.login-brand {
  font-family: var(--font-brand);
  font-size: clamp(2.2rem, 7vw, 3rem);
  color: var(--color-text-dark);
  text-align: center;
  line-height: 1;
}
.login-brand-sub {
  font-size: 0.78rem;
  color: var(--color-terracotta);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-top: calc(-1 * var(--space-xs));
}

/* Tree login: decorative branch motif framing the card */
#screen-login { position: relative; overflow: hidden; }
.login-branch {
  position: absolute;
  color: var(--color-olive);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.login-branch--tl { top: 0; left: 0; }
.login-branch--br { bottom: 0; right: 0; transform: rotate(180deg); }
#screen-login .login-card { position: relative; z-index: 1; }
@media (max-width: 560px) {
  .login-branch { width: 150px; height: auto; opacity: 0.5; }
}

/* Login form */
#login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.field-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-dark);
  letter-spacing: 0.02em;
}

.field-group input,
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  color: var(--color-text-dark);
  font-size: 0.95rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.field-group input:focus,
input:focus,
textarea:focus {
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px rgba(91, 189, 212, 0.15);
}

input::placeholder, textarea::placeholder {
  color: var(--color-text-light);
}

/* Generic message card (expired / closed screens) */
.message-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-elevated);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

.message-icon { font-size: 2.5rem; }

.message-card h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-text-dark);
}

.message-card p {
  color: var(--color-text-mid);
  line-height: 1.7;
}


/* ----------------------------------------------------------------
   7. Navigation
---------------------------------------------------------------- */
#main-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(245, 236, 216, 0.92);
  /* Frosted glass effect on supported browsers */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
  gap: var(--space-lg);
}

.nav-brand {
  font-family: var(--font-brand);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-text-dark);
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
}

.nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-mid);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-link:hover { color: var(--color-text-dark); background: var(--color-cream-dark); }

/* Active nav link — set by router in app.js */
.nav-link.active { color: var(--color-terracotta); font-weight: 600; }

.nav-link:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-sm);
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-dark);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}


/* ----------------------------------------------------------------
   8. Sections & Layout
   Each content section is hidden/shown by the router in app.js.
---------------------------------------------------------------- */
.section {
  display: none;
  min-height: calc(100vh - var(--nav-height));
}

/* Fade + slight upward drift when a section becomes active */
.section.active {
  display: block;
  animation: sectionFadeIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Swipe slide-in overrides — replace the fade with a directional slide */
.section.active.slide-from-right {
  animation: slideFromRight 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.section.active.slide-from-left {
  animation: slideFromLeft  0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slideFromRight {
  from { transform: translateX(100%); opacity: 0.6; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideFromLeft {
  from { transform: translateX(-100%); opacity: 0.6; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* ----------------------------------------------------------------
   Thanks overlay — full-screen celebration after upload
---------------------------------------------------------------- */
#thanks-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  pointer-events: none;
}
#thanks-overlay.visible {
  animation: thanksReveal 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#thanks-overlay.exit {
  animation: thanksExit 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes thanksReveal {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes thanksExit {
  from { opacity: 1; transform: translateX(0)    scale(1); }
  to   { opacity: 0; transform: translateX(-80px) scale(0.95); }
}

.thanks-content {
  text-align: center;
  padding: var(--space-xl);
}
.thanks-icon {
  font-size: 4.5rem;
  display: block;
  animation: thanksHeartbeat 0.7s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes thanksHeartbeat {
  from { transform: scale(1); }
  to   { transform: scale(1.2); }
}
.thanks-text {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 3.5rem);
  color: var(--color-terracotta);
  margin: var(--space-md) 0 var(--space-sm);
  line-height: 1.1;
}
.thanks-sub {
  font-size: 1rem;
  color: var(--color-text-light);
  letter-spacing: 0.01em;
}

@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* App shell fades in after login */
#app-shell.fading-in {
  animation: sectionFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}


/* ----------------------------------------------------------------
   9. Hero
---------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--nav-height));
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  background:
    radial-gradient(ellipse 90% 55% at 15% 85%, rgba(168, 139, 106, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(91, 189, 212, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 120% 70% at 50% 30%, rgba(91, 189, 212, 0.05) 0%, transparent 70%),
    linear-gradient(rgba(245, 236, 216, 0.75), rgba(245, 236, 216, 0.75)),
    url('sunset.avif') center / cover no-repeat;
}

/* When the couple uploads a "Main Page Photo", use it as the hero backdrop.
   The overlay is mixed from the palette background so dark palettes (e.g.
   Midnight Garden) keep their light text legible, and light palettes keep
   dark text legible. */
.hero.hero--has-photo {
  background:
    linear-gradient(
      color-mix(in srgb, var(--color-cream) 68%, transparent),
      color-mix(in srgb, var(--color-cream) 80%, transparent)
    ),
    var(--hero-image) center / cover no-repeat;
}
body[data-theme="dark"] .hero.hero--has-photo {
  background:
    linear-gradient(rgba(13, 31, 45, 0.78), rgba(13, 31, 45, 0.86)),
    var(--hero-image) center / cover no-repeat;
}

.hero-couple {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  color: var(--color-text-dark);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-sm);
  /* Italic style for the ampersand via CSS trick */
  font-style: normal;
}

.hero-date {
  font-size: clamp(0.85rem, 2vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.hero-tagline {
  max-width: 520px;
  font-size: 1.05rem;
  color: var(--color-text-mid);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}


/* ----------------------------------------------------------------
   10. Upload Section
---------------------------------------------------------------- */

/* "Sharing as [Name] · Edit" badge */
.upload-name-badge {
  font-size: 0.9rem;
  color: var(--color-text-mid);
  margin-bottom: var(--space-md);
  min-height: 1.5em; /* prevents layout shift while JS fills it */
}

.upload-name-badge strong { color: var(--color-text-dark); }

/* Accent text button for "Set your display name" prompt */
.btn-text--accent {
  color: var(--color-terracotta);
  font-weight: 600;
  font-size: 0.9rem;
}
.btn-text--accent:hover { text-decoration: underline; }

/* Consent line under the name badge */
.upload-consent {
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
  line-height: 1.5;
}

/* ---- Upload Drop Zone ---- */
.upload-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  cursor: pointer;
  background: var(--color-surface);
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base),
    transform var(--transition-base);
}

@media (hover: hover) {
  .upload-zone:hover {
    border-color: var(--color-terracotta);
    background: rgba(194, 107, 91, 0.03);
  }
}

.upload-zone:focus-visible {
  border-color: var(--color-terracotta);
  background: rgba(194, 107, 91, 0.03);
  outline: none;
}

/* Visual feedback while a file is being dragged over the zone */
.upload-zone.dragover {
  border-color: var(--color-terracotta);
  background: rgba(194, 107, 91, 0.06);
  transform: scale(1.01);
  box-shadow: 0 0 0 4px rgba(91, 189, 212, 0.12);
}

.upload-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  pointer-events: none; /* let clicks fall through to the zone div */
}

/* Allow the label/button to receive clicks even with pointer-events:none on parent */
.upload-zone-content label,
.upload-zone-content input { pointer-events: all; }

/* Side-by-side button row: Choose Photos + Take a Photo */
.upload-zone-buttons {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: all;
}

/* Camera button is slightly smaller than the primary */
.upload-camera-btn {
  font-size: 0.9rem;
  padding: 10px 18px;
}

.upload-zone-icon { font-size: 2.5rem; margin-bottom: var(--space-sm); }

.upload-zone-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-text-dark);
  font-weight: 600;
}

.upload-zone-or {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin: calc(-1 * var(--space-xs)) 0;
}

.upload-zone-hint {
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin-top: var(--space-xs);
}

/* ---- Preview Grid ---- */
.upload-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* Single preview tile */
.preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-cream-dark);
  box-shadow: var(--shadow-card);
}

/* Remove button — top-right of each preview tile.
   44×44px touch target (WCAG minimum) with the visual circle centred inside. */
.preview-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 0 var(--radius-md) 0 50%; /* matches card corner, circle bottom-left */
  background: rgba(44, 36, 22, 0.68);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
  border: none;
  transition: background-color var(--transition-fast), transform var(--transition-spring);
  -webkit-tap-highlight-color: transparent;
}
.preview-remove:hover  { background: rgba(192, 57, 43, 0.88); transform: scale(1.06); }
.preview-remove:active { transform: scale(0.94); }
.preview-remove:focus-visible { outline: 2px solid #fff; }

/* Pop-out animation — brief scale-up then shrink to nothing */
@keyframes popRemove {
  0%   { transform: scale(1);    opacity: 1; }
  25%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(0);    opacity: 0; }
}

.preview-item.removing {
  animation: popRemove 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none; /* prevent double-tap during animation */
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay shows upload status on top of the thumbnail */
.preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  opacity: 0;
  transition: opacity var(--transition-base);
}

/* Uploading state: semi-dark + spinner */
.preview-item.uploading .preview-overlay {
  background: rgba(44, 36, 22, 0.5);
  opacity: 1;
}

.preview-item.uploading .preview-overlay::after {
  content: '';
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Success state: green tint + checkmark */
.preview-item.success .preview-overlay {
  background: rgba(90, 107, 77, 0.55);
  opacity: 1;
}
.preview-item.success .preview-overlay::after { content: '✓'; color: white; font-size: 1.6rem; font-weight: 700; }

/* Error state: red tint + X */
.preview-item.error .preview-overlay {
  background: rgba(192, 57, 43, 0.55);
  opacity: 1;
}
.preview-item.error .preview-overlay::after { content: '✕'; color: white; font-size: 1.4rem; font-weight: 700; }

/* ---- Upload Actions ---- */
.upload-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

/* ---- Status Line ---- */
.upload-status {
  margin-top: var(--space-md);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text-mid);
  text-align: center;
}

.upload-status.is-error { color: var(--color-error); }
.upload-status.is-success { color: var(--color-olive); }

/* ---- Upload Progress Bar ---- */
#upload-progress-wrap {
  margin-top: var(--space-md);
}

.upload-progress-track {
  width: 100%;
  height: 6px;
  background: var(--color-cream-dark);
  border-radius: 3px;
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-terracotta), var(--color-olive));
  border-radius: 3px;
  /* Animate width smoothly as XHR progress events fire */
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-progress-label {
  font-size: 0.78rem;
  color: var(--color-text-light);
  text-align: center;
  margin-top: var(--space-xs);
}

/* ---- Composition Tips ---- */
.tips-section {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

.tips-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-mid);
  padding: var(--space-sm) 0;
  width: 100%;
  text-align: left;
  transition: color var(--transition-fast);
}

.tips-toggle:hover { color: var(--color-text-dark); }
.tips-toggle:focus-visible { outline: 2px solid var(--color-terracotta); border-radius: var(--radius-sm); }

.tips-arrow {
  margin-left: auto;
  display: inline-block;
  transition: transform var(--transition-base);
}

/* Rotate arrow when open */
.tips-toggle[aria-expanded="true"] .tips-arrow { transform: rotate(180deg); }

.tips-content {
  padding: var(--space-md) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
  animation: sectionFadeIn 0.2s ease both;
}

.tips-content li {
  font-size: 0.88rem;
  color: var(--color-text-mid);
  line-height: 1.6;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-terracotta-light);
}

.tips-content li strong { color: var(--color-text-dark); }


/* ----------------------------------------------------------------
   11. Gallery Grid  (Step 4 — styles stubbed, fleshed out later)
---------------------------------------------------------------- */
.gallery-grid {
  columns: 3;
  column-gap: 11px;
  /* Built out in Step 4 */
}

@media (min-width: 640px)  { .gallery-grid { columns: 4; column-gap: 11px; } }


/* ----------------------------------------------------------------
   12. Photo Card  (Step 4)
---------------------------------------------------------------- */
.photo-card {
  break-inside: avoid;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--color-cream-dark);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.photo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated);
}

.photo-card:focus-visible {
  outline: 3px solid var(--color-terracotta);
  outline-offset: 2px;
}

.photo-card img {
  width: 100%;
  display: block;
  /* Gradient overlay on images */
}

.photo-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44, 36, 22, 0.6) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.photo-card:hover .photo-card-overlay { opacity: 1; }

.photo-card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.photo-card:hover .photo-card-footer {
  opacity: 1;
  transform: translateY(0);
}

/* Heart / like button */
.like-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-white);
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 4px 10px;
  min-height: 44px;   /* accessible touch target */
  backdrop-filter: blur(4px);
  transition:
    background-color var(--transition-fast),
    transform var(--transition-spring);
}

.like-btn:hover  { background: rgba(255,255,255,0.25); transform: scale(1.05); }
.like-btn:active { transform: scale(0.95); }
.like-btn:focus-visible { outline: 2px solid var(--color-white); }

/* ♥ heart icon — CSS-styled, not emoji */
.heart-icon {
  font-size: 1.05em;
  line-height: 1;
  display: inline-block;
  /* Faint muted red when not yet liked */
  color: rgba(139, 58, 58, 0.35);
  transition: color var(--transition-fast);
}

/* Liked state — darker, less-saturated red (not emoji-bright) */
.heart-icon--liked {
  color: #8B3A3A;
}

/* Uploader name shown in photo card footer on hover */
.photo-uploader {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;          /* keeps it from pushing the like button off screen */
  letter-spacing: 0.01em;
}


/* ----------------------------------------------------------------
   12. Most Loved  (Step 5)
---------------------------------------------------------------- */
.most-loved-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.most-loved-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-card);
}

.most-loved-item:hover { transform: scale(1.02); }

.most-loved-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.most-loved-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 6px 8px;
  gap: var(--space-xs);
}

.most-loved-overlay-name {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.most-loved-overlay-likes {
  color: #e53e3e;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}


/* ----------------------------------------------------------------
   13. Guestbook / Messages  (Step 5)
---------------------------------------------------------------- */
.guestbook-form {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-card);
}

.guestbook-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.guestbook-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  border-left: 3px solid var(--color-terracotta);
  /* Gentle fade-in on appear */
  animation: fadeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Subtle hover lift on guestbook cards */
.guestbook-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Author + heart on the same row */
.guestbook-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.guestbook-author {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-dark);
}

.guestbook-message {
  color: var(--color-text-mid);
  line-height: 1.7;
}

/* Guestbook like button — same feel as comment hearts */
.guestbook-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-text-light);
  font-size: 0.85rem;
  line-height: 1;
  min-height: 36px;
  min-width: 36px;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
.guestbook-like-btn:hover {
  color: var(--color-terracotta);
  transform: scale(1.12);
}
.guestbook-like-btn:active {
  transform: scale(0.92);
}
.guestbook-like-btn.liked {
  color: var(--color-terracotta);
}

.guestbook-heart {
  font-size: 0.95rem;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.guestbook-like-btn.liked .guestbook-heart {
  transform: scale(1.15);
}

.guestbook-like-count {
  font-variant-numeric: tabular-nums;
  min-width: 10px;
}

/* Guestbook textarea */
.guestbook-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  color: var(--color-text-dark);
  font-size: 0.95rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  display: block;
  margin-bottom: var(--space-sm);
}

.guestbook-textarea:focus {
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px rgba(91, 189, 212, 0.15);
}

/* Footer row: char count + submit button */
.guestbook-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Character counter */
.char-count {
  font-size: 0.78rem;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
}

/* Turns amber when approaching the limit (80%) */
.char-count--near { color: var(--color-leather); font-weight: 600; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ----------------------------------------------------------------
   14. Modals  (Steps 3, 4)
---------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

/* When a modal is shown, remove [hidden] via JS (don't use display:none) */
.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(44, 36, 22, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none; /* clicks pass through to nav buttons + modal content */
}

.modal-content {
  position: relative;
  z-index: 2;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.modal-content--narrow { max-width: 380px; padding: var(--space-xl); text-align: center; }
.modal-content--narrow h3 { margin-bottom: var(--space-sm); }
.modal-content--narrow p  { margin-bottom: var(--space-lg); font-size: 0.9rem; color: var(--color-text-light); }
.modal-content--narrow form { display: flex; flex-direction: column; gap: var(--space-md); }

/* Two-field name row: First name (flex-grow) + Last initial (fixed narrow) */
.name-form-row {
  display: flex;
  gap: var(--space-sm);
}
.name-form-row #name-first {
  flex: 1 1 auto;
  min-width: 0;
}
.name-form-row #name-last {
  flex: 0 0 88px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-style: italic;
}
.name-form-row #name-last::placeholder {
  font-style: italic;
  text-transform: none;
  letter-spacing: normal;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-text-mid);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.modal-close:hover { background: var(--color-cream-dark); color: var(--color-text-dark); }
.modal-close:focus-visible { outline: 2px solid var(--color-terracotta); }

.modal-image-wrap {
  background: var(--color-text-dark);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  max-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-image-wrap img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
}

.modal-image-area { position: relative; }

.modal-like-btn {
  position: absolute;
  bottom: 20px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: rgba(44, 36, 22, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  z-index: 10;
  transition: background-color 150ms ease, transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-like-btn:hover  { background: rgba(44, 36, 22, 0.75); transform: scale(1.06); }
.modal-like-btn:active { transform: scale(0.95); transition-duration: 100ms; }
.modal-like-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.modal-like-btn.liked { background: rgba(139, 58, 58, 0.55); border-color: rgba(200, 100, 100, 0.4); }
.modal-like-btn .heart-icon { font-size: 1.35rem; color: rgba(255, 255, 255, 0.80); transition: color 150ms ease, transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.modal-like-btn .heart-icon--liked { color: rgba(230, 100, 100, 0.95); transform: scale(1.25); }
.modal-like-btn #modal-like-count { font-variant-numeric: tabular-nums; font-size: 0.92rem; color: rgba(255, 255, 255, 0.90); }

.modal-meta {
  padding: var(--space-md) var(--space-lg) 0;
  font-size: 0.85rem;
  color: var(--color-text-light);
}


/* ----------------------------------------------------------------
   15. Comments  (Step 4)
---------------------------------------------------------------- */
.modal-comments {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.comment-item {
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  animation: fadeSlideIn 0.25s ease both;
}

/* Row: author name on the left, heart button on the right */
.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 2px;
}

.comment-author {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-text-dark);
}

.comment-text {
  font-size: 0.9rem;
  color: var(--color-text-mid);
  word-break: break-word;
}

/* Comment like button — mirrors .like-btn but smaller */
.comment-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text-light);
  font-size: 0.78rem;
  line-height: 1;
  min-height: 32px;
  min-width: 32px;
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.comment-like-btn:hover {
  color: var(--color-terracotta);
  transform: scale(1.12);
}
.comment-like-btn:active {
  transform: scale(0.92);
}
.comment-like-btn.liked {
  color: var(--color-terracotta);
}

.comment-heart {
  font-size: 0.85rem;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.comment-like-btn.liked .comment-heart {
  transform: scale(1.15);
}

.comment-like-count {
  font-variant-numeric: tabular-nums;
  min-width: 10px;
  text-align: left;
}

.comment-form {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.comment-form input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  background: var(--color-cream);
}

.comment-form input:focus {
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px rgba(91, 189, 212, 0.15);
  outline: none;
}

/* Shown when the 3-comment session limit is reached */
.comment-limit-msg {
  font-size: 0.82rem;
  color: var(--color-text-light);
  text-align: center;
  padding: var(--space-md) 0 var(--space-sm);
  font-style: italic;
  line-height: 1.5;
}


/* ----------------------------------------------------------------
   16. Admin Panel  (Step 6)
---------------------------------------------------------------- */
.admin-auth {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.admin-controls-grid {
  display: grid;
  gap: var(--space-lg);
}

.admin-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

.admin-card h3 {
  margin-bottom: var(--space-md);
  font-size: 1.1rem;
}

.admin-auth-prompt {
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
  font-size: 0.9rem;
}

/* Header row: title + sign-out button */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.admin-signed-in-label {
  font-weight: 600;
  color: var(--color-text-dark);
  font-size: 0.9rem;
}

/* Site settings toggle */
.admin-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.admin-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-md);
  font-size: 0.9rem;
  color: var(--color-text-mid);
}

.admin-toggle-btn {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--color-olive);
  color: #fff;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

.admin-toggle-btn:hover { opacity: 0.85; transform: scale(1.03); }
.admin-toggle-btn--closed { background: var(--color-terracotta); }

/* Save / status feedback */
.admin-status-msg {
  font-size: 0.82rem;
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

.admin-status-msg--success { color: var(--color-olive); background: rgba(90,107,77,0.08); }
.admin-status-msg--error   { color: var(--color-error); background: rgba(192,57,43,0.08); }

/* Photo/message rows in admin lists */
.admin-photo-row,
.admin-message-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-photo-row:last-child,
.admin-message-row:last-child { border-bottom: none; }

.admin-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--color-cream-dark);
}

.admin-row-meta {
  flex: 1;
  min-width: 0;
}

.admin-row-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text-dark);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-row-sub {
  font-size: 0.75rem;
  color: var(--color-text-light);
  display: block;
}

.admin-row-text {
  font-size: 0.82rem;
  color: var(--color-text-mid);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Action button group — Hide + Delete sit side by side */
.admin-row-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* Hide / Show action buttons */
.admin-action-btn {
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  min-height: 36px;   /* safer tap target on mobile */
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.admin-action-btn:hover  { opacity: 0.8; transform: scale(1.04); }
.admin-action-btn:active { transform: scale(0.97); }
.admin-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.admin-action-btn--hide {
  background: rgba(192, 57, 43, 0.1);
  color: var(--color-error);
}

.admin-action-btn--show {
  background: rgba(90, 107, 77, 0.1);
  color: var(--color-olive);
}

.admin-action-btn--delete {
  background: rgba(192, 57, 43, 0.06);
  color: var(--color-error);
  border: 1px solid rgba(192, 57, 43, 0.2);
}
.admin-action-btn--delete:hover {
  background: rgba(192, 57, 43, 0.15);
  opacity: 1;
}

/* Admin email shown next to panel title */
.admin-signed-in-email {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-light);
  font-weight: 400;
  margin-top: 2px;
}

/* Archive collapsible subsection */
.admin-archive-section {
  margin-top: var(--space-md);
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-md);
}

.admin-archive-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-light);
  padding: var(--space-xs) 0;
  width: 100%;
  text-align: left;
  transition: color var(--transition-fast);
  letter-spacing: 0.01em;
}

.admin-archive-toggle:hover { color: var(--color-text-dark); }
.admin-archive-toggle:focus-visible {
  outline: 2px solid var(--color-terracotta);
  border-radius: var(--radius-sm);
}

.admin-archive-arrow {
  font-size: 0.65rem;
  display: inline-block;
  transition: transform var(--transition-base);
  line-height: 1;
}

.admin-archive-count {
  background: rgba(139, 99, 71, 0.12);
  color: var(--color-leather);
  font-size: 0.70rem;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 2px;
  font-weight: 700;
}

.admin-archive-list {
  margin-top: var(--space-sm);
}

/* Encouragement note at the bottom of the admin panel */
.admin-encouragement {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-text-light);
  font-style: italic;
  padding: var(--space-md) 0 var(--space-sm);
}

/* ---- Guest List ---- */
/* Shown in the admin panel: one row per guest with photo/message/heart counts */
.guest-list-header,
.guest-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}

.guest-list-row:last-child { border-bottom: none; }

.guest-list-header {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.guest-list-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Header label for the name column */
.guest-list-header .guest-list-name {
  color: var(--color-text-light);
  font-weight: 700;
}

.guest-list-stat {
  min-width: 32px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-text-mid);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.guest-list-total {
  font-size: 0.75rem;
  color: var(--color-text-light);
  text-align: right;
  margin-top: var(--space-sm);
  font-style: italic;
}


/* ----------------------------------------------------------------
   17. States: Loading, Empty, Error
   Every data-driven section must handle these three states.
   Never show a blank screen — always communicate status.
---------------------------------------------------------------- */
.loading-state,
.empty-state,
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.95rem;
}

.error-state { color: var(--color-error); }

/* CSS-only spinner */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-terracotta);
  border-radius: 50%;
  /* Animate transform only — never transition-all */
  animation: spin 0.8s linear infinite;
}

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


/* ----------------------------------------------------------------
   18. Wave Divider & Decorative Elements
   Coastal touches — used sparingly.
---------------------------------------------------------------- */
.rope-divider {
  width: 80px;
  height: 2px;
  margin: var(--space-lg) auto;
  /* Woven rope look via repeating gradient */
  background: repeating-linear-gradient(
    90deg,
    var(--color-leather-light)    0px,
    var(--color-leather-light)    4px,
    var(--color-cream-dark)       4px,
    var(--color-cream-dark)       8px
  );
  border-radius: 2px;
  opacity: 0.6;
}

/* Fringe bar decoration — vertical bars that taper toward the edges */
.hero-fringe {
  display: block;
  margin: 0 auto var(--space-md);
}

/* Wildflower SVG divider */
.hero-wildflower {
  margin: var(--space-sm) 0 var(--space-md);
  display: block;
}

/* Personal stats card — inline at bottom-left of home section */
.hero-stats-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed var(--color-leather);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.78rem;
  color: var(--color-text-mid);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.hero-stats-dot {
  color: var(--color-leather);
  opacity: 0.6;
}
#personal-stats-likes {
  font-weight: 600;
}
.stats-heart {
  color: #e53e3e;
}

.home-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xl) 0 var(--space-lg);
  gap: var(--space-md);
}

/* Gallery stats footer — global totals, small and soft at the bottom of the gallery */
.gallery-stats-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-bottom: var(--space-lg);
  font-size: 0.76rem;
  color: var(--color-text-light);
  opacity: 0.65;
  letter-spacing: 0.03em;
}

/* ----------------------------------------------------------------
   Lightbox navigation — prev / next arrows on photo modal
---------------------------------------------------------------- */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(245, 236, 216, 0.88);
  border: 1.5px solid var(--color-leather);
  color: var(--color-text-dark);
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 2px 8px rgba(44, 31, 20, 0.15),
    0 1px 2px rgba(44, 31, 20, 0.1);
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    opacity var(--transition-fast);
  /* keep above backdrop, below modal-content */
}
.lightbox-nav--prev { left: 12px; }
.lightbox-nav--next { right: 12px; }

.lightbox-nav:hover {
  background: rgba(91, 189, 212, 0.9);
  color: #fff;
  border-color: var(--color-terracotta);
  transform: translateY(-50%) scale(1.06);
}
.lightbox-nav:active { transform: translateY(-50%) scale(0.96); }
.lightbox-nav:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }
.lightbox-nav[hidden] { display: none !important; }


/* ----------------------------------------------------------------
   19. Responsive / Mobile-First Breakpoints
---------------------------------------------------------------- */
@media (max-width: 640px) {

  /* Nav: collapse links behind hamburger toggle */
  .nav-toggle { display: flex; }
  #btn-admin-entry { margin-left: 0; }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: var(--space-md);
    gap: var(--space-xs);
    box-shadow: 0 8px 24px rgba(44, 36, 22, 0.08);
  }

  /* app.js toggles this class to open the mobile menu */
  .nav-links.open { display: flex; }

  .nav-link {
    padding: var(--space-sm) var(--space-md);
    font-size: 1rem;
  }

  /* Hero adjustments */
  .hero { padding: var(--space-xl) var(--space-md); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { width: 100%; text-align: center; }

  /* Three-column gallery on mobile */
  .gallery-grid { columns: 3; column-gap: 7px; }

  /* Stack home bottom row vertically on mobile */
  .home-bottom-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }

  /* Modal full-screen on mobile */
  .modal-content {
    max-height: 95vh;
    border-radius: var(--radius-md);
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .gallery-grid { columns: 4; column-gap: 11px; }
}


/* ----------------------------------------------------------------
   20. Touch Device Overrides  (hover: none = phones & tablets)
   Fixes:
   1. Gallery footer (likes + uploader) always visible — hover doesn't
      exist on touch, so we can't hide it behind a hover state.
   2. Subtle "tap to view" indicator on each card.
   3. (Touch targets already handled above via min-height values.)
---------------------------------------------------------------- */
@media (hover: none) {

  /* Always show the card footer and dim the overlay slightly */
  .photo-card-footer {
    opacity: 1;
    transform: translateY(0);
    /* Strengthen the gradient so text stays legible without hover */
    background: linear-gradient(to top, rgba(44, 36, 22, 0.72) 0%, transparent 100%);
  }

  .photo-card-overlay {
    opacity: 0.15;   /* very subtle permanent vignette */
  }

  /* Prevent hover transforms from sticking after a tap */
  .most-loved-item:hover  { transform: none; }
  .btn-song-request:hover { transform: none; background-color: rgba(245, 236, 216, 0.88); color: var(--color-terracotta); }
  .modal-like-btn:hover   { transform: none; background: rgba(44, 36, 22, 0.55); }
  .guestbook-card:hover   { transform: none; box-shadow: var(--shadow-card); }

}


/* ================================================================
   FEATURE: ANIMATED HERO WAVES
   The two SVG wave paths in .hero-fringe undulate continuously.
   Front wave is faster, back wave slower + reversed for layered depth.
================================================================ */
.hero-fringe path:first-child {
  animation: waveFlow 3s ease-in-out infinite alternate;
  transform-origin: center;
}
.hero-fringe path:last-child {
  animation: waveFlow 4.5s ease-in-out infinite alternate-reverse;
  transform-origin: center;
}
@keyframes waveFlow {
  from { transform: translateX(0px); }
  to   { transform: translateX(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fringe path { animation: none; }
}


/* ================================================================
   FEATURE: TOAST NOTIFICATION
   Slides up from the bottom of the screen. Used for personalized
   welcome messages on login and after setting a display name.
================================================================ */
.app-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(90px);
  z-index: 700;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-left: 3px solid var(--color-terracotta);
  border-radius: var(--radius-md);
  padding: 13px 20px;
  box-shadow: var(--shadow-elevated);
  font-size: 0.92rem;
  color: var(--color-text-mid);
  max-width: min(90vw, 360px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  /* Only animate transform and opacity — never transition-all */
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s ease;
}
.app-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.app-toast.is-hiding {
  transform: translateX(-50%) translateY(90px);
  opacity: 0;
  pointer-events: none;
}
/* Keep toast above the song request pill on mobile */
@media (max-width: 600px) {
  .app-toast { bottom: 70px; }
}


/* ================================================================
   FEATURE: DARK MODE TOGGLE BUTTON
================================================================ */
.btn-dark-mode {
  font-size: 1rem;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  opacity: 0.45;
  line-height: 1;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}
.btn-dark-mode:hover   { opacity: 1; transform: scale(1.15); }
.btn-dark-mode:active  { transform: scale(0.95); }
.btn-dark-mode:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
  opacity: 1;
}

/* ----------------------------------------------------------------
   DARK THEME — applied when body[data-theme="dark"]
   Redefines all color tokens + overrides hardcoded RGB values.
---------------------------------------------------------------- */
body[data-theme="dark"] {
  --color-cream:           #0D1F2D;
  --color-cream-dark:      #162636;
  --color-white:           #1A2E3E;
  --color-text-dark:       #E8D8C0;
  --color-text-mid:        #C0B0A0;
  --color-text-light:      #7A98AA;
  --color-border:          rgba(100, 180, 210, 0.13);
  --shadow-card:
    0 1px 2px rgba(0,0,0,0.24),
    0 4px 12px rgba(0,0,0,0.32),
    0 8px 24px rgba(0,0,0,0.18);
  --shadow-elevated:
    0 2px 4px rgba(0,0,0,0.28),
    0 8px 24px rgba(0,0,0,0.38),
    0 16px 48px rgba(0,0,0,0.22);
  background-color: #0D1F2D;
}
/* Nav uses a hardcoded RGBA — must override directly */
body[data-theme="dark"] #main-nav {
  background: rgba(13, 31, 45, 0.94);
}
/* Hero uses a hardcoded cream gradient overlay */
body[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse 90% 55% at 15% 85%, rgba(168,139,106,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(74,143,168,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 120% 70% at 50% 30%, rgba(74,143,168,0.04) 0%, transparent 70%),
    linear-gradient(rgba(13,31,45,0.84), rgba(13,31,45,0.84)),
    url('sunset.avif') center / cover no-repeat;
}
/* Form inputs need an explicit background override */
body[data-theme="dark"] input,
body[data-theme="dark"] textarea {
  background: #162636;
}
/* Song request pill */
body[data-theme="dark"] .btn-song-request {
  background-color: rgba(13, 31, 45, 0.90);
}
/* Thanks overlay */
body[data-theme="dark"] #thanks-overlay {
  background: #0D1F2D;
}
/* Toast in dark mode */
body[data-theme="dark"] .app-toast {
  background: #162636;
}
/* Login / message cards use --color-white, already covered by token override */


/* ================================================================
   FEATURE: GALLERY SLIDESHOW
================================================================ */
.slideshow-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-md);
}
.btn-slideshow {
  font-size: 0.80rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--color-text-light);
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  padding: 6px 15px;
  background: transparent;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}
.btn-slideshow:hover {
  color: var(--color-terracotta);
  border-color: var(--color-terracotta);
  background-color: rgba(91, 189, 212, 0.06);
  transform: translateY(-1px);
}
.btn-slideshow:active  { transform: translateY(0); }
.btn-slideshow:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

/* Slideshow active state — hide comments so the modal is clean for display */
.modal.slideshow-active .modal-comments {
  display: none;
}
/* Pause / stop button overlaid on the modal */
.slideshow-pause-btn {
  position: absolute;
  top: 60px;
  right: 16px;
  z-index: 20;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-body);
  padding: 6px 13px;
  background: rgba(0, 0, 0, 0.48);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  cursor: pointer;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  letter-spacing: 0.03em;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}
.slideshow-pause-btn:hover {
  background: rgba(0, 0, 0, 0.65);
  transform: scale(1.05);
}
.slideshow-pause-btn:active { transform: scale(0.97); }
.slideshow-pause-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 2px;
}


/* ================================================================
   CUSTOM PAGES
   Sections created dynamically by the admin via the Custom Pages tool.
================================================================ */

/* Hero image with gradient overlay */
.custom-page-hero-wrap {
  position: relative;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.custom-page-hero-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,50,69,0.35) 0%, transparent 60%);
  pointer-events: none;
}

.custom-page-hero {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  display: block;
}

/* Body text */
.custom-page-body {
  max-width: 640px;
  margin: 0 auto var(--space-xl);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-text-mid);
}

.custom-page-body p {
  margin: 0 0 1em;
}

.custom-page-body p:last-child {
  margin-bottom: 0;
}

/* CTA link button */
.custom-page-link {
  display: inline-flex;
  margin-top: var(--space-md);
  text-decoration: none;
}


/* ================================================================
   ADMIN: CUSTOM PAGES MANAGEMENT
================================================================ */

.admin-page-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-page-row:last-of-type {
  border-bottom: none;
}

/* ▲ / ▼ order buttons */
.admin-page-order-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.admin-page-order-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  width: 24px;
  height: 18px;
  font-size: 0.55rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.admin-page-order-btn:hover:not(:disabled) {
  background: var(--color-cream-dark);
}

.admin-page-order-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* Edit button variant */
.admin-action-btn--edit {
  background: var(--color-cream-dark);
  color: var(--color-text-dark);
}

.admin-action-btn--edit:hover {
  background: var(--color-seafoam);
  color: #fff;
}

/* "Add a Page" button */
.admin-add-page-btn {
  margin-top: 14px;
  width: 100%;
}

/* Page form */
.admin-page-form {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--color-cream-dark);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.admin-page-form .field-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-mid);
}

/* Image preview inside admin page form */
.admin-page-image-preview {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  margin-top: 8px;
}

/* Ideas helper text */
.admin-page-ideas {
  font-size: 0.8rem;
  color: var(--color-text-light);
  font-style: italic;
  line-height: 1.6;
  padding: 10px 12px;
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--color-border);
}

/* Form action buttons row */
.admin-page-form-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Dark mode overrides */
body[data-theme="dark"] .admin-page-ideas {
  background: rgba(255,255,255,0.04);
}

body[data-theme="dark"] .custom-page-body {
  color: var(--color-text-mid);
}

/* ================================================================
   ADMIN TABS
================================================================ */
.admin-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--color-border);
}

.admin-tab {
  padding: 0.55rem 1.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-light);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.admin-tab:hover {
  color: var(--color-text-mid);
}

.admin-tab.active {
  color: var(--color-terracotta);
  border-bottom-color: var(--color-terracotta);
  font-weight: 600;
}

.admin-tab:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
  border-radius: 2px 2px 0 0;
}

/* ================================================================
   GALLERY — ALBUM STRIP
================================================================ */
.album-strip {
  margin-bottom: 1.5rem;
}

.album-cards {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  /* Hide scrollbar on webkit but keep scroll functionality */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.album-cards::-webkit-scrollbar {
  display: none;
}

.album-card {
  flex: 0 0 160px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 3px rgba(28,50,69,0.08),
    0 4px 12px rgba(28,50,69,0.07);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.album-card:hover,
.album-card:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 4px 8px rgba(28,50,69,0.10),
    0 12px 28px rgba(28,50,69,0.12);
  outline: none;
}

.album-card:active {
  transform: translateY(-1px);
}

.album-card-thumb {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  background: var(--color-cream-dark);
}

.album-card-thumb--empty {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream-dark);
  font-size: 2rem;
}

.album-card-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-dark);
  margin: 8px 10px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-card-count {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin: 0 10px 8px;
}

/* ================================================================
   GALLERY — ALBUM BACK BAR
================================================================ */
.album-back-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
}

.btn-album-back {
  padding: 6px 14px;
  background: var(--color-cream-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-mid);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn-album-back:hover {
  background: var(--color-olive-light);
  color: var(--color-white);
  border-color: transparent;
}

.btn-album-back:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

.btn-album-back:active {
  transform: scale(0.97);
}

.album-view-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================================
   ADMIN — ALBUM ROW
================================================================ */
.admin-album-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-album-row:last-of-type {
  border-bottom: none;
}

.admin-album-thumb-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-cream-dark);
}

.admin-album-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-album-thumb-wrap--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

/* ================================================================
   ADMIN — ALBUM PHOTO PICKER
================================================================ */
.admin-photo-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
}

.admin-photo-picker-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  background: var(--color-cream-dark);
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
}

.admin-photo-picker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.admin-photo-picker-item.selected {
  border-color: var(--color-terracotta);
}

.picker-check-overlay {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,0.9);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picker-check {
  width: 14px;
  height: 14px;
  accent-color: var(--color-terracotta);
  cursor: pointer;
  pointer-events: none;
}

.picker-cover-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(255,255,255,0.85);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
  opacity: 0.65;
}

.picker-cover-btn:hover {
  background: rgba(255,255,255,1);
  opacity: 1;
  transform: scale(1.1);
}

.picker-cover-btn--active {
  opacity: 1;
  background: #ffe066;
}

/* ================================================================
   DARK MODE — ALBUMS & TABS
================================================================ */
body[data-theme="dark"] .album-card {
  background: var(--color-card-bg, rgba(255,255,255,0.06));
}

body[data-theme="dark"] .album-card-thumb--empty {
  background: rgba(255,255,255,0.06);
}

body[data-theme="dark"] .btn-album-back {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: var(--color-text-mid);
}

body[data-theme="dark"] .admin-album-thumb-wrap {
  background: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .admin-photo-picker-item {
  background: rgba(255,255,255,0.06);
}

body[data-theme="dark"] .picker-check-overlay {
  background: rgba(0,0,0,0.55);
}

body[data-theme="dark"] .picker-cover-btn {
  background: rgba(0,0,0,0.5);
}

body[data-theme="dark"] .picker-cover-btn--active {
  background: rgba(200,165,0,0.8);
}


/* ----------------------------------------------------------------
   20. Super Admin Dashboard  (/superadmin)
---------------------------------------------------------------- */
.superadmin-wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg);
}
#screen-superadmin { align-items: flex-start; }
#screen-superadmin.active { display: flex; }
#superadmin-auth { margin: 10vh auto 0; }

.sa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.sa-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--color-text-dark);
  letter-spacing: -0.03em;
}

.sa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
@media (max-width: 760px) {
  .sa-grid { grid-template-columns: 1fr; }
}

.sa-card { background: var(--color-surface); }
.sa-form { display: flex; flex-direction: column; gap: var(--space-md); }
.sa-hint { color: var(--color-text-light); font-weight: 400; font-size: 0.78rem; }
.sa-help-text { font-size: 0.85rem; color: var(--color-text-mid); margin-bottom: var(--space-sm); }

.sa-claim-out {
  margin-top: var(--space-sm);
  background: var(--color-cream-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--color-text-dark);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.sa-empty { color: var(--color-text-light); font-size: 0.9rem; }

.sa-client {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}
.sa-client:last-child { border-bottom: none; }
.sa-client-id { display: flex; align-items: center; gap: var(--space-sm); }
.sa-client-couple {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-text-dark);
}
.sa-client-badge {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
}
.sa-badge--on  { background: color-mix(in srgb, var(--color-success) 22%, transparent); color: var(--color-success); }
.sa-badge--off { background: color-mix(in srgb, var(--color-text-light) 22%, transparent); color: var(--color-text-light); }

.sa-client-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--color-text-mid);
}
.sa-client-meta a { color: var(--color-terracotta); text-decoration: none; font-weight: 500; }
.sa-client-meta a:hover { text-decoration: underline; }
.sa-stat { white-space: nowrap; }

.sa-client-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.sa-client-actions .btn-secondary { padding: 6px 12px; font-size: 0.82rem; }


/* ----------------------------------------------------------------
   21. Appearance Tab (palette picker, hero photo, QR)
---------------------------------------------------------------- */
.admin-card-sub {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}
.admin-card-tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-terracotta);
  background: color-mix(in srgb, var(--color-terracotta) 14%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
}
.btn-text {
  background: none;
  border: none;
  color: var(--color-text-light);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.btn-text:hover { color: var(--color-terracotta); }
.btn-text:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }

/* Palette picker */
.palette-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-sm);
}
.palette-swatch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-sm);
  background: var(--color-cream-dark);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.palette-swatch:hover { transform: translateY(-2px); }
.palette-swatch:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }
.palette-swatch--active { border-color: var(--color-terracotta); }
.palette-swatch-colors {
  display: flex;
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.palette-swatch-colors span { flex: 1; }
.palette-swatch-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-dark);
}

/* Hero photo preview */
.hero-photo-preview { margin-bottom: var(--space-md); }
.hero-photo-preview img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  box-shadow: var(--shadow-card);
}
.hero-photo-empty {
  padding: var(--space-lg);
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-light);
  background: var(--color-cream-dark);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
}

/* QR card */
.admin-qr-wrap { text-align: center; }
.admin-qr-img {
  width: 200px; height: 200px;
  border-radius: var(--radius-md);
  background: #fff;
  padding: var(--space-sm);
  box-shadow: var(--shadow-card);
}
.admin-qr-url {
  font-size: 0.82rem;
  color: var(--color-text-mid);
  margin: var(--space-sm) 0;
  word-break: break-all;
}
.admin-qr-actions { display: flex; gap: var(--space-sm); justify-content: center; }


/* ----------------------------------------------------------------
   22. Setup Wizard
---------------------------------------------------------------- */
.wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: rgba(28, 50, 69, 0.55);
  backdrop-filter: blur(4px);
  animation: wizard-fade var(--transition-base);
}
@keyframes wizard-fade { from { opacity: 0; } to { opacity: 1; } }
.wizard-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-modal);
  max-height: 90vh;
  overflow-y: auto;
}
.wizard-progress {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-lg);
}
.wizard-dot {
  width: 36px;
  height: 5px;
  border-radius: 999px;
  background: var(--color-cream-dark);
  transition: background var(--transition-base);
}
.wizard-dot--active { background: var(--color-terracotta); }
.wizard-dot--done   { background: var(--color-terracotta-light); }
.wizard-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}
.wizard-sub {
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}
.wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}