/* =============================================================================
   VAJ WEDDING WEBSITE - STYLESHEET
   
   This file controls all the visual styling of your wedding website.
   The styles are organized into clear sections so you can easily find and
   modify what you need.
   
   QUICK CUSTOMIZATION GUIDE:
   - To change colors: Edit the :root section below
   - To change fonts: Edit the @import line and font-family values
   - To adjust spacing: Look for padding and margin values
   ============================================================================= */

/* Import Google Fonts - Change these URLs to use different fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Open+Sans:wght@400;500;600&display=swap');

/* =============================================================================
   COLOR PALETTE
   Change these values to customize your wedding colors!
   Use a color picker tool to find hex codes for your chosen colors.
   ============================================================================= */
:root {
  /* Background colors */
  --background: #f5f5f5;        /* Fallback background behind collage */
  --surface: #ffffff;           /* Card and header background - white */

  /* Text colors */
  --text: #211b1c;              /* Main text color - deep charcoal */
  --muted: #4a3a3a;             /* Secondary text - warm brown */

  /* Accent colors */
  --accent: #c8aa7a;            /* Soft accent - muted gold */
  --accent-dark: #7b001b;       /* Primary accent - wine red */
  --header-bg: #7b001b;         /* Header background */
  --header-text: #fbeff4;       /* Header text color */

  /* Hero frame styling */
  --hero-surface: rgba(255, 255, 255, 0.92);
  --hero-corner-size: 72px;
  --hero-border-thickness: 6px;

  /* Collage controls */
  --collage-tile-size: 960px;

  /* Status colors */
  --success: #2f7a67;           /* Success messages - green */
  --warning: #c67b30;           /* Warning messages - orange */
  --error: #b24b4b;             /* Error messages - red */
  
  /* Design elements */
  --radius: 14px;               /* Border radius for cards and buttons */
  --shadow: 0 8px 18px rgba(47, 42, 40, 0.08);  /* Card shadow */
}

/* =============================================================================
   GLOBAL STYLES
   Basic styling applied to all elements
   ============================================================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: var(--background);
  background-image: url('/static/images/background-collage.png');
  background-position: center top;
  background-size: var(--collage-tile-size) var(--collage-tile-size);
  background-repeat: repeat;
}

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: linear-gradient(
    rgba(255, 255, 255, 0.78),
    rgba(255, 255, 255, 0.82)
  );
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 720px) {
  :root {
    --collage-tile-size: 720px;
  }
}

/* Links */
a {
  color: var(--accent-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* =============================================================================
   LAYOUT CONTAINERS
   Controls page width and spacing
   ============================================================================= */
.container {
  max-width: 960px;           /* Maximum width of content */
  margin: 0 auto;             /* Center the container */
  padding: 0 1.5rem;          /* Side padding for mobile */
}

main {
  padding: 3rem 0 4rem;       /* Top and bottom spacing for main content */
  flex: 1;                    /* Ensures footer sits at the bottom */
}

/* =============================================================================
   HEADER & NAVIGATION
   Top section with logo and menu
   ============================================================================= */
header {
  background: var(--header-bg);
  border-bottom: 4px solid #38000d;
  position: sticky;           /* Stays at top when scrolling */
  top: 0;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(28, 0, 8, 0.35);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
}

/* Logo styling */
.logo {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--header-text);
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
}

.logo-mark {
  display: inline-flex;
  gap: 0;
  font-size: 1.7rem;
  letter-spacing: 0.1em;
}

.logo-mark span {
  display: inline-block;
}

.logo-mark span + span {
  margin-left: 0.32rem;
}

.logo-mark .ampersand {
  font-size: 1.45rem;
  letter-spacing: 0;
  display: inline-block;
  transform: translateY(0.08rem);
}

.logo,
.logo-mark {
  align-items: center;
}

.logo {
  text-align: center;
}

.logo-subtitle {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: rgba(255, 240, 245, 0.75);
}

/* Navigation links */
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  align-items: center;
}

.menu-toggle {
  display: none;
  background: rgba(255, 240, 245, 0.05);
  border: 1px solid rgba(255, 240, 245, 0.18);
  color: var(--header-text);
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 245, 0.08);
  backdrop-filter: blur(6px);
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.menu-toggle:hover {
  background: rgba(255, 240, 245, 0.1);
  transform: translateY(-1px) scale(1.01);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 245, 0.18), 0 4px 14px rgba(12, 0, 4, 0.28);
}

.menu-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 0.28rem;
}

.menu-icon span {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--header-text);
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-text {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 240, 245, 0.85);
}

.nav-links a {
  color: rgba(255, 240, 245, 0.78);
}

.nav-links a.active {
  color: var(--header-text);
  font-weight: 500;
}

.nav-links a:hover {
  color: #ffffff;
}

.nav-links .btn,
.nav-links .btn-outline {
  letter-spacing: 0.08em;
}

/* =============================================================================
   HERO SECTION
   Large header area on pages
   ============================================================================= */
.hero {
  text-align: center;
  padding: 3rem 2.25rem;
  margin: 3.5rem auto 2.5rem;
  max-width: 720px;
  background: var(--hero-surface);
  border-radius: 0;
  box-shadow: 0 20px 40px rgba(30, 10, 10, 0.18);
  position: relative;
  color: var(--text);
  background:
    linear-gradient(#111, #111) top left / var(--hero-corner-size) var(--hero-border-thickness) no-repeat,
    linear-gradient(#111, #111) top left / var(--hero-border-thickness) var(--hero-corner-size) no-repeat,
    linear-gradient(#111, #111) top right / var(--hero-corner-size) var(--hero-border-thickness) no-repeat,
    linear-gradient(#111, #111) top right / var(--hero-border-thickness) var(--hero-corner-size) no-repeat,
    linear-gradient(#111, #111) bottom left / var(--hero-corner-size) var(--hero-border-thickness) no-repeat,
    linear-gradient(#111, #111) bottom left / var(--hero-border-thickness) var(--hero-corner-size) no-repeat,
    linear-gradient(#111, #111) bottom right / var(--hero-corner-size) var(--hero-border-thickness) no-repeat,
    linear-gradient(#111, #111) bottom right / var(--hero-border-thickness) var(--hero-corner-size) no-repeat,
    var(--hero-surface);
  background-clip: padding-box;
}

.hero-overline {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-dark);
  font-size: 0.75rem;
  font-weight: 600;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  margin: 0.75rem 0 1rem;
  color: #120c0d;
}

.hero p {
  max-width: 540px;
  margin: 0.5rem auto;
  color: #2f2525;
}

.hero-details {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-weight: 500;
  color: #3c141e;
  margin: 1rem 0;
}

.content-panel {
  position: relative;
  margin: 2.5rem 0 1.5rem;
  padding: 1.8rem 1.6rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 248, 0.9));
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 18px 34px rgba(30, 10, 10, 0.12);
  border: 1px solid rgba(123, 0, 27, 0.12);
  overflow: hidden;
  display: grid;
  gap: 0.75rem;
}

.content-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(200, 170, 122, 0.08), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(123, 0, 27, 0.08), transparent 35%);
  pointer-events: none;
}

.content-panel > * {
  position: relative;
  z-index: 1;
}

.content-panel h1,
.content-panel h2 {
  font-family: 'Playfair Display', serif;
  color: var(--accent-dark);
  margin: 0;
}

.content-panel p {
  margin: 0;
  color: var(--muted);
}

.content-panel p + p {
  margin-top: 0.25rem;
}

/* =============================================================================
   WEDDING BANNER
   Banner section with image and event details
   ============================================================================= */
.wedding-banner {
  margin: 3rem 0 2.5rem;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
}

.banner-content {
  display: flex;
  background: var(--surface);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(30, 10, 10, 0.18);
  min-height: 320px;
  width: 100%;
}

.banner-text {
  flex: 1;
  padding: 2.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  background: var(--surface);
  border: 3px solid #211b1c;
  border-right: none;
}

.banner-date {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-dark);
  font-size: 0.7rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.banner-heading {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 0.35rem 0 1rem;
  color: #120c0d;
}

.banner-venue {
  color: #2f2525;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.banner-image {
  flex: 0 0 40%;
  position: relative;
  overflow: hidden;
  border: 3px solid #211b1c;
  border-left: none;
}

.banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =============================================================================
   ACTION CARDS
   Clickable cards on the home page
   ============================================================================= */
.action-grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.action-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  color: inherit;
  display: block;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}

.action-card:hover {
  transform: translateY(-4px);  /* Lift effect on hover */
  text-decoration: none;
}

/* =============================================================================
   FAQ ACCORDION
   Expandable FAQ layout with rich typography
   ============================================================================= */
.faq-section {
  margin-top: 2rem;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.faq-item {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(47, 42, 40, 0.08);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--accent-dark);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-size: 1.75rem;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  content: '−';
  transform: rotate(180deg);
}

.faq-question {
  margin: 0;
  flex: 1;
}

.faq-answer {
  padding: 0 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--muted);
  line-height: 1.65;
}

.faq-paragraph {
  margin: 0;
}

.faq-list {
  margin: 0;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-bullet {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.faq-timing {
  font-weight: 600;
  color: var(--accent-dark);
  min-width: 4rem;
}

.faq-detail {
  display: block;
}

.faq-footnote {
  color: var(--muted);
  line-height: 1.5;
  font-size: 1rem;
  display: block;
}

.faq-answer .faq-footnote:first-of-type {
  margin-top: 1.25rem;
}

.faq-footnote + .faq-footnote {
  margin-top: 0.35rem;
}

/* =============================================================================
   CARDS
   General card component used throughout the site
   ============================================================================= */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 2rem 0;
  overflow: hidden;
}

.card-header {
  background: rgba(123, 0, 27, 0.12);
  padding: 1rem 1.5rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--accent-dark);
}

.card-body {
  padding: 1.5rem;
  color: #3a2c2c;
}

/* Detail lists (used in wedding details) */
.detail-list {
  list-style: none;
  display: grid;
  gap: 1rem;
}

.detail-list > li {
  display: grid;
  grid-template-columns: minmax(0, 160px) 1fr;
  column-gap: 1.25rem;
  align-items: start;
  row-gap: 0.1rem;
}

.detail-list > li > strong {
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 0.2rem;
  display: inline-flex;
}

.detail-list > li > span,
.detail-list > li > ul {
  margin: 0;
}

.detail-list > li > ul {
  padding-left: 0;
  display: grid;
  gap: 0.35rem;
}

@media (max-width: 600px) {
  .detail-list > li {
    grid-template-columns: 1fr;
    row-gap: 0.35rem;
  }

  .detail-list > li > strong {
    font-size: 0.75rem;
  }
}

/* Timeline list */
.timeline-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: grid;
  gap: 0.4rem;
}

.timeline-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  column-gap: 0.75rem;
  align-items: start;
  padding: 0.35rem 0;
}

.timeline-time {
  font-weight: 700;
  color: var(--accent-dark);
  min-width: 4.5rem;
  font-variant-numeric: tabular-nums;
}

.timeline-description {
  color: #3a2c2c;
  line-height: 1.5;
}

.detail-note {
  font-size: 0.9rem;
  color: var(--muted);
}

/* =============================================================================
   LOGIN & FORMS
   Form styling and login page
   ============================================================================= */
.login-container {
  display: flex;
  justify-content: center;
}

.login-card {
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  max-width: 360px;
  width: 100%;
}

.login-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Form elements */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

label {
  font-weight: 500;
}

input,
select,
textarea {
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(47, 42, 40, 0.16);
  font: inherit;
}

textarea {
  min-height: 120px;
}

/* =============================================================================
   BUTTONS
   Button styles used throughout the site
   ============================================================================= */
.btn {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;         /* Fully rounded corners */
  background: var(--accent-dark);
  color: #fff;
  border: none;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease;
}

.btn:hover {
  background: #540013;          /* Darker shade on hover */
  text-decoration: none;
}

.btn-outline {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--accent-dark);
  color: var(--accent-dark);
  font-weight: 500;
}

.btn-outline:hover {
  background: var(--accent-dark);
  color: #fff;
  text-decoration: none;
}

.w-full {
  width: 100%;
}

/* =============================================================================
   RSVP PAGE
   Special styles for the RSVP page
   ============================================================================= */
.group-overview {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.group-overview-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  color: var(--accent-dark);
  margin-bottom: 0.5rem;
}

.group-overview-header p {
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.group-count {
  font-weight: 600;
  color: var(--accent-dark);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.group-members {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.group-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid rgba(47, 42, 40, 0.08);
  background: rgba(255, 255, 255, 0.75);
  gap: 1rem;
}

.group-member-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
  color: var(--accent-dark);
}

.group-member-self {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(176, 140, 125, 0.18);
  color: var(--accent-dark);
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
}

.guest-forms {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin: 2.5rem 0;
}

.guest-form {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
}

.guest-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.guest-form-header h3 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--accent-dark);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-pill.attending {
  color: var(--success);
  background: rgba(47, 122, 103, 0.18);
}

.status-pill.not-attending {
  color: var(--error);
  background: rgba(178, 75, 75, 0.18);
}

.status-pill.pending {
  color: var(--muted);
  background: rgba(176, 140, 125, 0.18);
}

.guest-form .status-pill {
  margin-bottom: 0.25rem;
}

@media (max-width: 640px) {
  .group-overview {
    padding: 1.5rem;
  }

  .group-member {
    flex-direction: column;
    align-items: flex-start;
  }

  .guest-form {
    padding: 1.5rem;
  }

  .guest-form-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================================================
   SPOTIFY EMBEDS
   Styling for embedded Spotify playlists
   ============================================================================= */
.spotify-embed {
  margin: 1.5rem 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* =============================================================================
   SONG SEARCH
   Styling for the song suggestion search feature
   ============================================================================= */

/* Search section container */
.song-search-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(123, 0, 27, 0.04);
  border-radius: 12px;
  border: 2px dashed rgba(123, 0, 27, 0.2);
}

.song-search-section h4 {
  font-family: 'Playfair Display', serif;
  color: var(--accent-dark);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

/* Search controls (input + button) */
.search-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.search-controls input {
  flex: 1;
  min-width: 0;
}

.search-controls .btn-secondary {
  flex-shrink: 0;
  background: var(--accent-dark);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.search-controls .btn-secondary:hover {
  background: #540013;
}

/* Search status messages */
#song-search-status {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: rgba(123, 0, 27, 0.06);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent-dark);
  min-height: 1.5rem;
}

#song-search-status:empty {
  display: none;
}

/* Loading indicator */
.loading-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(123, 0, 27, 0.2);
  border-top-color: var(--accent-dark);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Search results container */
.search-results {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
  max-height: 400px;
  overflow-y: auto;
}

.search-results:empty {
  display: none;
}

/* Individual search result */
.search-result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: white;
  border: 2px solid rgba(123, 0, 27, 0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.search-result:hover {
  background: rgba(123, 0, 27, 0.04);
  border-color: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(123, 0, 27, 0.1);
}

.search-result:active {
  transform: translateY(0);
}

.result-artwork {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.result-info {
  flex: 1;
  min-width: 0;
}

.result-title {
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-artist {
  font-size: 0.9rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selected song display */
.selected-song-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(123, 0, 27, 0.1) 0%, rgba(123, 0, 27, 0.05) 100%);
  border: 2px solid var(--accent-dark);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(123, 0, 27, 0.15);
}

.selected-song-artwork {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.selected-song-info {
  flex: 1;
  min-width: 0;
}

.selected-song-info h5 {
  margin: 0 0 0.25rem 0;
  font-family: 'Playfair Display', serif;
  color: var(--accent-dark);
  font-size: 1.1rem;
}

.selected-song-info p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.clear-selection-btn {
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid rgba(123, 0, 27, 0.3);
  border-radius: 8px;
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.clear-selection-btn:hover {
  background: rgba(123, 0, 27, 0.1);
  border-color: var(--accent-dark);
}

/* Manual entry section */
.manual-entry-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(123, 0, 27, 0.15);
}

.manual-entry-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-dark);
  cursor: pointer;
  font-weight: 500;
  margin-bottom: 1rem;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.manual-entry-toggle:hover {
  background: rgba(123, 0, 27, 0.06);
}

.manual-entry-toggle svg {
  transition: transform 0.2s ease;
}

.manual-entry-toggle.expanded svg {
  transform: rotate(90deg);
}

.manual-entry-fields {
  display: none;
}

.manual-entry-fields.visible {
  display: block;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .search-controls {
    flex-direction: column;
  }

  .search-controls .btn-secondary {
    width: 100%;
  }

  .selected-song-card {
    flex-direction: column;
    text-align: center;
  }

  .clear-selection-btn {
    width: 100%;
  }
}

/* =============================================================================
   ADMIN DASHBOARD
   Statistics cards and admin page styling
   ============================================================================= */
.stats-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 2rem 0;
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  text-align: center;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.stat-number {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--accent-dark);
}

.stat-label {
  color: var(--muted);
  margin-top: 0.5rem;
}

/* =============================================================================
   FOOTER
   Bottom section of the page
   ============================================================================= */
footer {
  border-top: 2px solid rgba(60, 20, 30, 0.2);
  padding: 1.5rem 0;
  color: #3f3032;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
}

/* =============================================================================
   UTILITY CLASSES
   Helpful spacing and display utilities
   ============================================================================= */
.error {
  color: var(--error);
}

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-3 { margin-top: 1rem; }

/* =============================================================================
   RESPONSIVE DESIGN
   Adjustments for mobile devices
   ============================================================================= */
@media (max-width: 720px) {
  /* Stack header elements vertically on mobile */
  .header-content {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: 0;
    padding: 1rem;
    background: rgba(46, 6, 14, 0.95);
    border: 1px solid rgba(255, 240, 245, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 28px rgba(10, 0, 4, 0.32);
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
    z-index: 15;
  }

  body.nav-open .nav-links {
    display: flex;
  }

  body.nav-open .menu-toggle {
    background: rgba(255, 240, 245, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 240, 245, 0.24), 0 4px 14px rgba(12, 0, 4, 0.28);
  }

  body.nav-open .menu-icon span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }

  body.nav-open .menu-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.5);
  }

  body.nav-open .menu-icon span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  .nav-links a {
    width: 100%;
  }

  .nav-links .btn,
  .nav-links .btn-outline {
    width: 100%;
    justify-content: center;
  }

  .hero {
    margin: 2.5rem 1rem 2rem;
    padding: 2.5rem 1.5rem;
    --hero-corner-size: 56px;
  }

  /* Stack hero details vertically on mobile */
  .hero-details {
    flex-direction: column;
    gap: 0.5rem;
  }

  .content-panel {
    margin: 1.8rem 0 1.2rem;
    padding: 1.4rem 1.2rem;
  }

  .content-panel h1 {
    font-size: 2rem;
  }

  /* Stack banner vertically on mobile */
  .wedding-banner {
    margin: 2rem auto;
    padding: 0;
  }

  .banner-content {
    flex-direction: column;
    border-radius: 0;
    min-height: auto;
    width: 100%;
  }

  .banner-text {
    border: 3px solid #211b1c;
    border-bottom: none;
    padding: 2.25rem 1.75rem;
    align-items: center;
    text-align: center;
  }

  .banner-heading {
    font-size: 1.7rem;
  }

  .banner-image {
    flex: 0 0 auto;
    min-height: 250px;
    border: 3px solid #211b1c;
    border-top: none;
  }

  .logo {
    text-align: center;
  }
}

@media (max-width: 520px) {
  header {
    box-shadow: 0 4px 14px rgba(28, 0, 8, 0.28);
  }

  .header-content {
    padding: 0.75rem 0 0.85rem;
    gap: 0.65rem;
  }

  .nav-links {
    gap: 0.65rem;
  }

  main {
    padding: 2.5rem 0 3rem;
  }

  .hero {
    margin: 1.75rem 0.75rem 1.5rem;
    padding: 1.9rem 1.15rem;
    --hero-corner-size: 44px;
    --hero-border-thickness: 4px;
    box-shadow: 0 16px 32px rgba(30, 10, 10, 0.16);
  }

  .hero h1 {
    font-size: 2.3rem;
  }

  .hero-details {
    align-items: center;
    text-align: center;
    gap: 0.65rem;
  }

  body::before {
    background-size: 900px auto;
    filter: saturate(85%) brightness(0.95);
    opacity: 0.35;
  }

  body::after {
    background: linear-gradient(
      rgba(255, 255, 255, 0.88),
      rgba(255, 255, 255, 0.92)
    );
  }

  .login-card {
    padding: 1.5rem;
    box-shadow: 0 10px 24px rgba(47, 42, 40, 0.12);
  }
}

/* =============================================================================
   TOAST NOTIFICATIONS
   Pop-up messages for user feedback
   ============================================================================= */
.toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1100;  /* Above sticky header */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 380px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--accent);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.toast-visible {
  opacity: 1;
  transform: translateX(0);
}

.toast.toast-hiding {
  opacity: 0;
  transform: translateX(100%);
}

.toast-message {
  flex: 1;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.4;
}

.toast-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.toast-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}

/* Toast type variants */
.toast-success {
  border-left-color: var(--success);
}

.toast-success .toast-message {
  color: var(--success);
}

.toast-error {
  border-left-color: var(--error);
}

.toast-error .toast-message {
  color: var(--error);
}

.toast-warning {
  border-left-color: var(--warning);
}

.toast-warning .toast-message {
  color: var(--warning);
}

.toast-info {
  border-left-color: var(--accent-dark);
}

.toast-info .toast-message {
  color: var(--accent-dark);
}

/* Tablet responsive toasts */
@media (max-width: 720px) {
  .toast-container {
    right: 1rem;
    max-width: 340px;
  }
}

/* Mobile responsive toasts */
@media (max-width: 520px) {
  .toast-container {
    top: auto;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    max-width: none;
    /* Safe area padding for iOS notches and home indicators */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .toast {
    transform: translateY(100%);
    padding: 0.875rem 1rem;
    gap: 0.875rem;
  }

  .toast-message {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .toast-close {
    font-size: 1.15rem;
  }

  .toast.toast-visible {
    transform: translateY(0);
  }

  .toast.toast-hiding {
    transform: translateY(100%);
  }
}