/* Bahor gullari — floral, yumshoq pushti-yashil */

:root {
  --bg: #fdf5f6;
  --ink: #4a3f42;
  --rose: #d47f96;
  --rose-deep: #b95f78;
  --green: #8faf8b;
  --card: #ffffff;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Lora", serif;
  font-size: 1.05rem;
}

/* Overlay */
.invite-overlay { background: linear-gradient(160deg, #fdf5f6, #f8e7ec); }
.overlay-flower { margin-bottom: 10px; animation: sway 4s ease-in-out infinite; }
@keyframes sway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
.overlay-kicker { letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.72rem; color: var(--rose-deep); margin-bottom: 12px; }
.overlay-names { font-family: "Great Vibes", cursive; font-weight: 400; font-size: clamp(2.2rem, 9vw, 3.2rem); color: var(--rose-deep); }
.overlay-names em { font-style: normal; font-size: 0.6em; color: var(--green); }
.overlay-open-btn { background: var(--rose); color: #fff; }

/* Tushayotgan gulbarglar */
.petals { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.petals span {
  position: absolute; top: -20px; width: 12px; height: 12px;
  background: #f4c1ce; border-radius: 12px 0 12px 0; opacity: 0.8;
  animation: fall linear infinite;
}
.petals span:nth-child(1) { left: 8%;  animation-duration: 11s; animation-delay: 0s; }
.petals span:nth-child(2) { left: 25%; animation-duration: 14s; animation-delay: 3s; width: 9px; height: 9px; }
.petals span:nth-child(3) { left: 45%; animation-duration: 12s; animation-delay: 6s; }
.petals span:nth-child(4) { left: 62%; animation-duration: 15s; animation-delay: 1s; width: 10px; height: 10px; background: #f8dce3; }
.petals span:nth-child(5) { left: 78%; animation-duration: 13s; animation-delay: 4s; }
.petals span:nth-child(6) { left: 92%; animation-duration: 16s; animation-delay: 7s; width: 8px; height: 8px; background: #f8dce3; }
@keyframes fall {
  0% { transform: translateY(-5vh) rotate(0deg); }
  100% { transform: translateY(105vh) rotate(540deg); }
}

/* Kartalar */
.card {
  background: var(--card); border-radius: 22px; padding: 34px 24px;
  box-shadow: 0 6px 24px rgba(185, 95, 120, 0.09);
  margin-bottom: 26px; position: relative;
}
.invite { padding-top: 30px; }
section.card, header.card { padding: 34px 24px; }
section { padding: 0; margin-bottom: 26px; }
.countdown-sec { padding: 14px 0 30px; }

/* Hero */
.hero { text-align: center; padding-top: 60px; overflow: hidden; }
.corner { position: absolute; width: 110px; height: 110px; }
.corner-tl { top: -4px; left: -4px; }
.corner-br { bottom: -4px; right: -4px; transform: rotate(180deg); }
.kicker { letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.7rem; color: var(--green); }
.names { margin: 16px 0 10px; line-height: 1.1; }
.names .name {
  display: block; font-family: "Great Vibes", cursive; font-weight: 400;
  font-size: clamp(2.4rem, 10vw, 3.4rem); color: var(--rose-deep);
}
.names .amp { display: block; font-size: 1rem; color: var(--green); font-style: italic; margin: 4px 0; }
.date-line { font-style: italic; color: var(--ink); }

/* Matn */
.invite-text { text-align: center; font-style: italic; line-height: 1.9; }

/* Countdown */
.section-heading { font-size: 1.25rem; font-weight: 600; color: var(--rose-deep); }
.cd-item { background: var(--card); box-shadow: 0 4px 14px rgba(185,95,120,0.10); }
.cd-item span { color: var(--rose-deep); }
.cd-item small { color: var(--green); }
.countdown-done { color: var(--rose-deep); }

/* Xarita */
.btn-directions { background: var(--green); color: #fff; }
.map-wrap { border-radius: 16px; }

/* Tabriklar */
.greet-form input, .greet-form textarea {
  border-color: #f0d4dc; background: #fdfafb;
}
.greet-form input:focus, .greet-form textarea:focus { border-color: var(--rose); }
.greet-form button { background: var(--rose); color: #fff; }
.greet-item { background: #fdf5f6; }
.greet-item b { color: var(--rose-deep); }

/* Musiqa */
.music-btn { background: var(--rose); color: #fff; }