/* ==========================================================================
   Alaa & Yasmina — Wedding Invitation Luxury Styles
   Refined Muted Palette (Eye-Soothing Antique Bronze & Warm Silk Ivory)
   ========================================================================== */

:root {
  --color-gold: #9E7D47;
  --color-gold-hover: #856733;
  --color-gold-light: #F4ECE1;
  --color-silk: #FAF8F5;
  --color-sand: #F3EEE7;
  --color-ink: #23211F;
  --color-ink-muted: #6B655F;
}

/* Custom Scrollbar - Gentle & Muted */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #FAF8F5;
}
::-webkit-scrollbar-thumb {
  background: #C4AD88;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9E7D47;
}

/* Floating Petals Canvas */
#petals-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 25;
}

/* Soft Navigation Bar on Scroll */
#mainNav.scrolled {
  background-color: rgba(250, 248, 245, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px -2px rgba(35, 33, 31, 0.04);
  border-bottom: 1px solid rgba(158, 125, 71, 0.15);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

/* Attendance Selected Card */
.attendance-card:has(input:checked) {
  border-color: #9E7D47;
  background-color: rgba(244, 236, 225, 0.45);
  box-shadow: 0 2px 12px rgba(158, 125, 71, 0.12);
}

/* Soft Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Smooth Accordion */
.faq-answer {
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Traditional Arabic Typography & Calligraphy Engine (RTL)
   ========================================================================== */
html[dir="rtl"] {
  font-family: 'Amiri', serif !important;
  line-height: 1.85 !important;
}

html[dir="rtl"] * {
  letter-spacing: normal !important;
}

html[dir="rtl"] .font-serif,
html[dir="rtl"] .font-cinzel,
html[dir="rtl"] .font-sans {
  font-family: 'Amiri', serif !important;
}

html[dir="rtl"] .font-script {
  font-family: 'Amiri', serif !important;
  font-weight: 700;
  font-style: normal;
}

html[dir="rtl"] h1 {
  line-height: 1.4 !important;
}