:root {
  --primary-text: #5D4037; /* Deep brown */
  --secondary-text: #795548;
  --gold-dark: #A1887F;
  --gold-main: #C5A059; /* Rich Gold */
  --gold-shine: #F2D088;
  --bg-page: #FDE8E9; /* Richer Pink/Peach base */
  --bg-card: rgba(255, 250, 245, 0.90); /* Creamy white paper */
  --input-bg: #FBEFE4;
  --border-radius-lg: 16px;
  --border-radius-sm: 8px;
  --font-serif: "Playfair Display", serif;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shadow-gold: 0 4px 15px rgba(197, 160, 89, 0.3);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  /* Ornate Sparkle Texture */
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 5%),
    radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.4) 0%, transparent 3%),
    radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.4) 0%, transparent 3%),
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"),
    linear-gradient(to bottom right, #f8cdda 0%, #fbe4eb 50%, #f8cdda 100%);
  background-size: 150px 150px, 200px 200px, 180px 180px, 300px 300px, cover;
  color: var(--primary-text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

/* Main Container */
.app-container {
  width: 100%;
  max-width: 550px;
  padding: 30px 20px;
  position: relative;
}

/* Corner Decorations (Simulated) */
.app-container::before {
  content: " ";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 150px;
  background: radial-gradient(circle at 0 0, rgba(212, 175, 55, 0.4) 0%, transparent 60%),
              radial-gradient(circle at 100% 0, rgba(212, 175, 55, 0.4) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 0;
  color: var(--primary-text);
}

.text-center { text-align: center; }

/* --- Header Section --- */
.header {
  text-align: center;
  margin-bottom: 35px;
  padding-top: 10px;
}

.couple-names {
  font-size: 2.8rem;
  margin-bottom: 10px;
  /* More elegant text rendering */
  color: #6D4C41;
  text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
  font-weight: 400;
}

.page-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: #795548;
  margin-bottom: 12px;
  font-style: italic;
}

.subtitle {
  font-size: 0.95rem;
  color: #8D6E63;
  line-height: 1.5;
  font-family: var(--font-sans);
  max-width: 90%;
  margin: 0 auto;
}

/* --- Gold Card Component (Ornate) --- */
.gold-card {
  /* Rich Gold Border Frame effect */
  background: linear-gradient(135deg, #FAD961 0%, #F76B1C 100%); /* Base gold gradient */
  background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); /* Metallic Gold */
  border-radius: var(--border-radius-lg);
  padding: 4px; /* Thickness of gold frame */
  box-shadow: 0 10px 25px rgba(109, 76, 65, 0.2);
  margin-bottom: 40px;
  position: relative;
}

.gold-card-inner {
  background: linear-gradient(to bottom, #FFF8E7, #FFF0D6);
  border-radius: 12px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border: 1px solid #E6CAA0;
  box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.1);
}

/* Ornate decorative elements inside the card */
.gold-card-inner::before {
  content: '✦';
  position: absolute;
  top: 10px; left: 15px;
  color: #D4AF37;
  font-size: 1.2rem;
  opacity: 0.7;
}
.gold-card-inner::after {
  content: '✦';
  position: absolute;
  top: 10px; right: 15px;
  color: #D4AF37;
  font-size: 1.2rem;
  opacity: 0.7;
}

.coupon-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.gift-icon {
  font-size: 3.5rem;
  margin-bottom: 15px;
  /* Visual of gift box */
  background: linear-gradient(135deg, #e57373, #ef5350);
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  box-shadow: 0 8px 15px rgba(211, 47, 47, 0.2), inset 0 0 10px rgba(255,255,255,0.3);
  color: #fff;
  border: 2px solid #fff;
  position: relative;
}
/* Ribbon Effect */
.gift-icon::before {
  content: "";
  position: absolute;
  width: 100%; height: 10px;
  background: #FFD54F;
  top: 50%; transform: translateY(-50%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.gift-icon::after {
  content: "";
  position: absolute;
  height: 100%; width: 10px;
  background: #FFD54F;
  left: 50%; transform: translateX(-50%);
  box-shadow: 1px 0 2px rgba(0,0,0,0.1);
}

.coupon-text h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  margin-bottom: 8px;
  text-align: center;
  color: #5D4037;
}

.coupon-text p {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  text-align: center;
  margin-bottom: 25px;
  line-height: 1.5;
  color: #795548;
}

/* Email Input Group */
.email-input-group {
  display: flex;
  width: 100%;
  background-color: #FFF;
  border-radius: 8px;
  padding: 5px;
  border: 1px solid #D7CCC8;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
}

.email-input-group input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 15px;
  font-family: var(--font-sans);
  color: var(--primary-text);
  font-size: 1rem;
  outline: none;
}
.email-input-group input::placeholder {
  color: #BCAAA4;
}

.email-input-group button {
  background: linear-gradient(to bottom, #FDD835, #FBC02D);
  border: 1px solid #F9A825;
  color: #fff;
  width: 45px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.2rem;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- Main Content Panel (The Paper Look) --- */
.content-panel {
  background-color: rgba(255, 252, 248, 0.95);
  border-radius: var(--border-radius-lg);
  padding: 30px;
  box-shadow: 0 5px 20px rgba(93, 64, 55, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
}

/* --- FAQ / Dropdown Section --- */
.section-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 18px;
  margin-top: 10px;
  color: #4E342E;
  position: relative;
  display: inline-block;
}

.dropdown-container {
  background: #FFF;
  border: 1px solid #EFEBE9;
  border-radius: var(--border-radius-sm);
  margin-bottom: 30px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.dropdown-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
  background-color: #FFFAF8;
  color: #6D4C41;
}

.dropdown-item {
  padding: 14px 16px;
  background-color: #FFF;
  border-bottom: 1px solid #fafafa;
  font-size: 0.95rem;
  color: #795548;
}

.dropdown-item.active {
  background-color: #EFEBE9; /* Use a darker highlight for active */
  background: linear-gradient(to right, #F3E5F5, #FCE4EC); /* Subtle gradient for selected */
  color: #4E342E;
  font-weight: 600;
  border-left: 4px solid #D4AF37;
}

.solution-box {
  background: linear-gradient(to right, #FFF3E0, #FFE0B2);
  border: 1px solid #FFCC80;
  border-radius: var(--border-radius-sm);
  padding: 18px;
  margin-bottom: 40px;
  position: relative;
}

.solution-box p {
  margin: 0;
  font-size: 1rem;
  color: #5D4037;
  line-height: 1.6;
  font-style: italic;
  font-family: var(--font-serif);
}

/* --- Events Grid --- */
.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
}

@media (min-width: 550px) {
  .events-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.event-card {
  /* Ornate Border for Events */
  background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); /* Gold frame */
  padding: 3px;
  border-radius: 14px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  position: relative;
}

.event-card-inner {
  background: linear-gradient(to bottom, #FFF8F0, #FFF3E0);
  border-radius: 11px;
  padding: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.event-card h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #4E342E;
  border-bottom: 1px solid #E6D6C8;
  padding-bottom: 8px;
}

.date-badge {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #E0E0E0;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 0.9rem;
  color: #6D4C41;
  font-weight: 500;
}

.date-badge span {
  margin-left: auto;
  opacity: 0.5;
}

/* Attire List */
.attire-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 15px;
  font-size: 0.95rem;
}

.attire-label {
  color: #5D4037;
  font-weight: 700;
  border-bottom: 1px dashed rgba(141, 110, 99, 0.2);
  padding: 5px 0;
  font-family: var(--font-serif);
}

.attire-value {
  color: #795548;
  border-bottom: 1px dashed rgba(141, 110, 99, 0.2);
  padding: 5px 0;
}

/* Scrollbar hide for clean look if needed */
::-webkit-scrollbar {
  width: 0px;
}