/* ── Global ── */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "DM Sans", sans-serif;
  background-color: #ffffff;
  color: #0b1f3a;
  overflow-x: hidden;
}

/* ── Cover overlay ── */
#cover {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #eaf7ff 0%, #eaf7ff 50%, #f8fcff 100%);
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}
#cover.hidden-cover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Flower SVG decorations ── */
.flower-bg {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* ── Divider line ── */
.ornament-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
}
.ornament-line::before,
.ornament-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #5dadec80, transparent);
}

/* ── Section backgrounds ── */
.section-cream {
  background: #ffffff;
}
.section-blush {
  background: linear-gradient(180deg, #eaf7ff 0%, #eaf7ff 100%);
}
.section-sage {
  background: linear-gradient(180deg, #eaf7ff 0%, #d7f0ff 100%);
}

/* ── Carousel ── */
.carousel-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
}
.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-slide {
  min-width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px #0002;
  transition: background 0.2s;
  z-index: 10;
}
.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.95);
}
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bfe9ff;
  cursor: pointer;
  transition:
    background 0.3s,
    transform 0.3s;
}
.carousel-dot.active {
  background: #5dadec;
  transform: scale(1.3);
}

/* ── RSVP form ── */
.form-input {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1.5px solid #b7ddf2;
  border-radius: 0.75rem;
  background: #ffffff;
  color: #0b1f3a;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.form-input:focus {
  border-color: #5dadec;
  box-shadow: 0 0 0 3px #5dadec20;
}
.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: #12355b;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #5dadec, #bfe9ff);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.75rem 2.2rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px #5dadec40;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #5dadec50;
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #5dadec;
  font-weight: 500;
  padding: 0.7rem 2rem;
  border-radius: 9999px;
  border: 1.5px solid #5dadec;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
}
.btn-outline:hover {
  background: #5dadec;
  color: #fff;
}

/* ── Countdown ── */
.countdown-box {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  border: 1px solid #b7ddf280;
  border-radius: 1.1rem;
  padding: 1rem 0.8rem;
  min-width: 72px;
  text-align: center;
  box-shadow: 0 8px 24px #0b1f3a12;

  @media (max-width: 640px) {
    .countdown-box {
      min-width: 58px;
      padding: 0.7rem 0.45rem;
      border-radius: 0.9rem;
    }

    .countdown-box span:first-child {
      font-size: 1.5rem !important;
      line-height: 1.2;
    }

    .countdown-box span:last-child {
      font-size: 9px;
      letter-spacing: 0.08em;
    }

    #countdown-wrap-card {
      gap: 0.5rem;
    }
  }
}

/* -- Couple profile cards -- */
.couple-photo {
  width: 160px;
  height: 160px;
  border-radius: 9999px;
  object-fit: cover;
  border: 6px solid #ffffff;
  box-shadow: 0 10px 30px #0b1f3a30;
}
.couple-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid #b7ddf260;
  border-radius: 1.75rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 8px 28px #0000000d;
}

/* -- Gift cards -- */
.gift-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid #b7ddf260;
  border-radius: 1.75rem;
  padding: 1.5rem;
  box-shadow: 0 8px 28px #0000000d;
}
.copy-btn {
  border: 1.5px solid #5dadec;
  color: #5dadec;
  border-radius: 9999px;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}
.copy-btn:hover {
  background: #5dadec;
  color: #fff;
}

/* ── Islamic Elegant Floral Theme ── */
:root {
  --navy: #0f2a47;
  --navy-soft: #163b63;
  --sky: #dbeafe;
  --sky-mid: #93c5fd;
  --white: #ffffff;
  --gold: #d6b56d;
  --gold-soft: #f7e8bd;
}

.islamic-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle at 1px 1px,
      rgba(15, 42, 71, 0.7) 1px,
      transparent 0
    ),
    linear-gradient(
      45deg,
      transparent 46%,
      rgba(214, 181, 109, 0.35) 47%,
      rgba(214, 181, 109, 0.35) 53%,
      transparent 54%
    );
  background-size:
    12px 12px,
    24px 24px;
}

.arch-frame {
  position: relative;
  border: 1.5px solid rgba(214, 181, 109, 0.55);
  box-shadow: 0 22px 70px rgba(15, 42, 71, 0.14);
  overflow: hidden;
}

.arch-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(214, 181, 109, 0.35);
  border-radius: 999px 999px 28px 28px;
  pointer-events: none;
}

.islamic-floral {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 14px 24px rgba(15, 42, 71, 0.16));
}

.gold-divider {
  width: 150px;
  height: 1px;
  margin: 18px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  position: relative;
}

.gold-divider::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  color: var(--gold);
  padding: 0 8px;
  font-size: 14px;
  color: var(--gold);
  padding: 0 10px;
  font-size: 18px;
}

.section-blush {
  background: linear-gradient(
    180deg,
    #eff6ff 0%,
    #ffffff 58%,
    #dbeafe 100%
  ) !important;
}

.section-sage {
  background: linear-gradient(180deg, #f8fbff 0%, #dbeafe 100%) !important;
}

.section-cream {
  background: #ffffff !important;
}

.text-rosegold,
.text-coral {
  color: var(--navy) !important;
}

.bg-gradient-to-br.from-peach.to-coral,
.bg-gradient-to-br.from-sagelight.to-sage,
.btn-primary {
  background: linear-gradient(
    135deg,
    var(--navy),
    var(--navy-soft),
    var(--sky-mid)
  ) !important;
}

.btn-outline {
  color: var(--navy) !important;
  border-color: var(--navy) !important;
}

.btn-outline:hover {
  background: var(--navy) !important;
  color: white !important;
}

.countdown-box {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(214, 181, 109, 0.45) !important;
  box-shadow: 0 10px 28px rgba(15, 42, 71, 0.08);
}

.form-input {
  border-color: rgba(147, 197, 253, 0.75) !important;
  background: #ffffff !important;
}

.form-input:focus {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.28) !important;
}

/* ── Enhanced Floral Decorations ── */
.flower-bg {
  filter: drop-shadow(0 10px 20px rgba(30, 64, 175, 0.12));
}

.floral-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  opacity: 0.18;
  pointer-events: none;
}

.floral-card {
  position: absolute;
  width: 120px;
  height: 120px;
  opacity: 0.18;
  pointer-events: none;
}

.petal-float {
  animation: floatPetal 6s ease-in-out infinite;
}

@keyframes floatPetal {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(4deg);
  }
}

/* ── QR placeholder ── */
.qr-frame {
  background: #fff;
  border: 2px solid #b7ddf2;
  border-radius: 1rem;
  padding: 12px;
  display: inline-block;
  box-shadow: 0 4px 20px #0001;
}

/* ── Preview-like Islamic blue decorations ── */
.soft-blue-bg {
  background:
    radial-gradient(
      circle at 8% 30%,
      rgba(147, 197, 253, 0.28),
      transparent 22%
    ),
    radial-gradient(
      circle at 92% 42%,
      rgba(96, 165, 250, 0.2),
      transparent 20%
    ),
    linear-gradient(180deg, #f8fbff 0%, #eef7ff 58%, #dbeafe 100%) !important;
}

.hanging-lantern {
  position: absolute;
  top: 34px;
  width: 92px;
  height: 210px;
  pointer-events: none;
  z-index: 3;
  opacity: 0.92;
  filter: drop-shadow(0 18px 24px rgba(15, 42, 71, 0.18));
}

.hanging-lantern.left {
  left: 32px;
}

.hanging-lantern.right {
  right: 32px;
}

.soft-flower {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 16px 26px rgba(15, 42, 71, 0.14));
}

.hero-flower-left {
  left: 18px;
  bottom: 70px;
  width: 210px;
  opacity: 0.86;
}

.hero-flower-right {
  right: 10px;
  bottom: 54px;
  width: 230px;
  opacity: 0.9;
}

.star-ornament {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  opacity: 0.75;
  filter: drop-shadow(0 10px 18px rgba(15, 42, 71, 0.14));
}

.star-ornament.left {
  left: 56px;
  top: 38%;
  width: 170px;
}

.star-ornament.right {
  right: 64px;
  top: 47%;
  width: 145px;
  opacity: 0.35;
}

@media (max-width: 640px) {
  .hanging-lantern {
    width: 62px;
    height: 150px;
    top: 20px;
    opacity: 0.65;
  }
  .hanging-lantern.left {
    left: 8px;
  }
  .hanging-lantern.right {
    right: 8px;
  }
  .hero-flower-left {
    width: 150px;
    left: -40px;
    bottom: 60px;
    opacity: 0.55;
  }
  .hero-flower-right {
    width: 170px;
    right: -45px;
    bottom: 52px;
    opacity: 0.62;
  }
  .star-ornament.left {
    width: 115px;
    left: -18px;
    top: 48%;
    opacity: 0.45;
  }
  .star-ornament.right {
    width: 105px;
    right: -30px;
    top: 53%;
    opacity: 0.25;
  }
}

/* Responsive Bismillah */
.bismillah-img {
  width: min(560px, 72vw);
  max-width: 560px;
  height: auto;
  display: block;
  margin-inline: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(15, 42, 71, 0.1));
}

@media (max-width: 1024px) {
  .bismillah-img {
    width: min(460px, 78vw);
  }
}

@media (max-width: 640px) {
  .bismillah-img {
    width: min(300px, 82vw);
  }
}
/* ── Music Toggle Button ── */
.music-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  width: 54px;
  height: 54px;
  border-radius: 9999px;
  border: 1.5px solid rgba(214, 181, 109, 0.7);
  background: linear-gradient(135deg, #0f2a47, #163b63, #93c5fd);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(15, 42, 71, 0.28);
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.music-toggle:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 38px rgba(15, 42, 71, 0.35);
}

.music-toggle.playing {
  animation: musicPulse 1.8s ease-in-out infinite;
}

.music-toggle.playing svg {
  animation: musicSpin 4s linear infinite;
}

@keyframes musicPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(214, 181, 109, 0.45),
      0 12px 30px rgba(15, 42, 71, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 12px rgba(214, 181, 109, 0),
      0 16px 38px rgba(15, 42, 71, 0.35);
  }
}

@keyframes musicSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ── Mahogany Theme Override ── */
:root {
  --navy: #4a1f14;
  --navy-soft: #6b2e1e;
  --sky: #f5ece3;
  --sky-mid: #a26749;
  --white: #fffdfb;
  --gold: #c08b5c;
  --gold-soft: #e8d4c2;
}

body {
  background-color: #fffdfb !important;
  color: #3a1c14 !important;
}

#cover,
footer {
  background: linear-gradient(160deg, #f5ece3 0%, #fffdfb 100%) !important;
}

.section-blush {
  background: linear-gradient(
    180deg,
    #faf4ef 0%,
    #fffdfb 58%,
    #e8d4c2 100%
  ) !important;
}

.section-sage {
  background: linear-gradient(180deg, #fff8f3 0%, #ead7c5 100%) !important;
}

.section-cream {
  background: #fffdfb !important;
}

.soft-blue-bg {
  background:
    radial-gradient(
      circle at 8% 30%,
      rgba(162, 103, 73, 0.18),
      transparent 22%
    ),
    radial-gradient(
      circle at 92% 42%,
      rgba(107, 46, 30, 0.14),
      transparent 20%
    ),
    linear-gradient(180deg, #fffdfb 0%, #f8efe8 58%, #e8d4c2 100%) !important;
}

.text-rosegold,
.text-coral,
.text-sage,
.text-peach,
.text-sagelight,
.text-\[\#12355B\],
.text-\[\#0B1F3A\],
.text-\[\#345B7C\],
.text-\[\#5F7FA3\],
.text-\[\#7EAAC8\] {
  color: #4a1f14 !important;
}

.bg-gradient-to-br.from-peach.to-coral,
.bg-gradient-to-br.from-sagelight.to-sage,
.btn-primary,
.music-toggle {
  background: linear-gradient(135deg, #4a1f14, #6b2e1e, #a26749) !important;

  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(74, 31, 20, 0.25) !important;
}

.btn-outline,
.copy-btn {
  color: #6b2e1e !important;
  border-color: #6b2e1e !important;
}

.btn-outline:hover,
.copy-btn:hover {
  background: #6b2e1e !important;
  color: #ffffff !important;
}

.ornament-line::before,
.ornament-line::after,
.gold-divider,
.gold-divider::after {
  color: #c08b5c !important;
  background: linear-gradient(
    90deg,
    transparent,
    #c08b5c,
    transparent
  ) !important;
}

.countdown-box,
.couple-card,
.gift-card,
.bg-white\/75,
.bg-white\/80,
.bg-white\/70,
.bg-white\/60 {
  border-color: rgba(107, 46, 30, 0.12) !important;
  box-shadow: 0 10px 28px rgba(74, 31, 20, 0.08) !important;
}

.form-input {
  border-color: #d6b29a !important;
  background: #fffdfb !important;
  color: #3a1c14 !important;
}

.form-input:focus {
  border-color: #6b2e1e !important;
  box-shadow: 0 0 0 3px rgba(107, 46, 30, 0.12) !important;
}

.carousel-dot {
  background: #d6b29a !important;
}

.carousel-dot.active {
  background: #6b2e1e !important;
}

.qr-frame {
  border-color: #d6b29a !important;
}

svg [fill="#BFE9FF"],
svg [fill="#D7F0FF"],
svg [fill="#EAF7FF"],
svg [fill="#B7DDF2"],
svg [fill="#dbeafe"],
svg [fill="#bfdbfe"],
svg [fill="#93c5fd"],
svg [fill="#60a5fa"],
svg [fill="#f7e8bd"] {
  fill: #e8d4c2 !important;
}

svg [fill="#12355B"],
svg [fill="#0B1F3A"],
svg [fill="#0f2a47"],
svg [fill="#d6b56d"] {
  fill: #6b2e1e !important;
}

svg [stroke="#5DADEC"],
svg [stroke="#12355B"],
svg [stroke="#d6b56d"],
svg [stroke="#93c5fd"],
svg [stroke="#5d8fbd"],
svg [stroke="#0f2a47"] {
  stroke: #7b3f00 !important;
}

.floral-glow {
  background: #c08b5c !important;
  opacity: 0.12 !important;
}

.flower-bg,
.islamic-floral,
.soft-flower,
.star-ornament,
.hanging-lantern {
  filter: drop-shadow(0 12px 22px rgba(74, 31, 20, 0.12)) !important;
}

img,
iframe {
  filter: sepia(12%) saturate(88%);
}