/* ════════════════════════════════════════
   Custom Properties — Lilac / Lavender
════════════════════════════════════════ */
:root {
  /* сиреневые и лиловые оттенки */
  --pearl:         #FBF7FF;   /* barely-there lavender white   */
  --pearl-dark:    #F0E8FF;   /* soft siren                    */
  --siren:         #E2CEF5;   /* сиреневый — light lilac       */
  --siren-mid:     #CEB0E8;   /* сиреневый — medium            */
  --lilac:         #B48FD8;   /* лиловый — main accent         */
  --lilac-light:   #CAAEED;   /* лиловый — light               */
  --lilac-dark:    #8A5ABF;   /* лиловый — hover/dark          */
  --lilac-deep:    #4A1F7A;   /* deep violet for text          */
  --lilac-mid:     #7A4AAA;   /* medium text / icons           */
  --lilac-soft:    #A878CC;   /* soft accent                   */
  --mauve:         #D8B8EE;   /* mauve ornament                */
  --white:         #FFFFFF;

  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-hero: 'Tangerine', cursive;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-card: 0 8px 40px rgba(58,36,86,0.10), 0 2px 8px rgba(58,36,86,0.06);
}

/* ════════════════════════════════════════
   Reset & Base
════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #1A0A2E; }
body {
  font-family: var(--font-body);
  background: var(--pearl);
  color: var(--lilac-deep);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ════════════════════════════════════════
   Scroll Animations
════════════════════════════════════════ */
.fade-in {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.fade-in.visible { opacity: 1; transform: none; }

/* ════════════════════════════════════════
   Envelope Screen
════════════════════════════════════════ */
.env-screen {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pearl);
  background-image:
    radial-gradient(ellipse at 25% 75%, rgba(180,150,220,0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 25%, rgba(155,125,200,0.2) 0%, transparent 55%);
  transition: opacity 0.55s var(--ease), visibility 0.55s;
}
.env-screen.hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.env-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
}

/* Envelope card */
.env-card {
  width: 340px;
  height: 230px;
  position: relative;
  cursor: pointer;
  filter: drop-shadow(0 18px 40px rgba(58,36,86,0.16));
  transition: filter 0.3s;
}
.env-card:hover { filter: drop-shadow(0 22px 50px rgba(58,36,86,0.22)); }

.env-flap-wrap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 115px;
  perspective: 700px;
  z-index: 3;
  overflow: visible;
}
.env-flap {
  width: 340px;
  height: 115px;
  background: linear-gradient(165deg, #f0eaf8 0%, #ddd0ef 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 0.7s var(--ease);
  backface-visibility: hidden;
}
.env-card.open .env-flap { transform: rotateX(-175deg); }

.env-body {
  position: absolute;
  inset: 0;
  background: #fdfaff;
  border: 1px solid rgba(155,125,200,0.35);
  border-radius: 3px;
  overflow: hidden;
}
.env-fold {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
}
.env-fold-l {
  left: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: linear-gradient(to right, rgba(155,125,200,0.07), transparent);
}
.env-fold-r {
  right: 0;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  background: linear-gradient(to left, rgba(155,125,200,0.07), transparent);
}

/* Wax seal */
.env-seal {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #b89ee0, #9b7dc8 45%, #7a55a8);
  box-shadow: 0 3px 14px rgba(155,125,200,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.env-card.open .env-seal {
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0.2;
}
.env-mono {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 400;
  font-style: italic;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1;
}

.env-cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.env-btn {
  padding: 0.75rem 2.4rem;
  background: var(--lilac);
  color: #fff;
  border: none;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.env-btn:hover { background: var(--lilac-dark); transform: translateY(-1px); }
.env-hint {
  font-size: 0.72rem;
  color: var(--lilac-mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ════════════════════════════════════════
   Main Content
════════════════════════════════════════ */
.main { opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease); }
.main.visible { opacity: 1; visibility: visible; }

/* ════════════════════════════════════════
   Navbar
════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 58px;
  padding: 0 1.8rem;
  background: transparent;
  transition: background 0.3s, box-shadow 0.3s;
}
.navbar.scrolled {
  background: rgba(248,245,255,0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 20px rgba(58,36,86,0.08);
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--lilac);
  letter-spacing: 0.06em;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.8rem;
}
.nav-links a {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lilac-mid);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--lilac); }
.lang-switcher {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.7rem; letter-spacing: 0.1em;
}
/* Default: over dark hero → use ivory/mauve */
.lang-opt {
  padding: 2px 7px; border-radius: 3px;
  color: rgba(247,241,232,0.75);
  transition: background 0.2s, color 0.2s;
}
.lang-opt.active { background: rgba(217,182,231,0.25); color: #F7F1E8; }
.lang-sep { color: #D9B6E7; opacity: 0.55; }
/* Scrolled state: navbar turns light — switch to deep plum */
.navbar.scrolled .lang-opt { color: #5C4373; }
.navbar.scrolled .lang-opt.active { background: var(--lilac); color: #fff; }
.navbar.scrolled .lang-sep { color: var(--lilac); opacity: 0.4; }

@media (max-width: 560px) {
  .nav-links { display: none; }
  .navbar { padding: 0 1.1rem; }
}

/* ════════════════════════════════════════
   Hero
════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  /* Deep plum fill — shows at edges where the blurred portrait doesn't reach */
  background: #1A0A2E;
}
.hero-bg-wrap {
  position: absolute;
  inset: 0;
}
.hero-bg {
  position: absolute;
  inset: 0;
  /* cover fills the full hero on mobile — no gap, no exposed background */
  background: url('/uzatu/bcg12.jpg') center top / cover no-repeat;
  filter: blur(6px);
  transform: scale(1.08);
}
/* Floating hearts */
.heart {
  position: absolute;
  top: -30px;
  pointer-events: none;
  user-select: none;
  animation: heartFall linear infinite;
}
.h1  { left:  8%; font-size:13px; color:rgba(230,160,200,0.55); animation-duration:13s; animation-delay:  0s; }
.h2  { left: 20%; font-size:18px; color:rgba(210,140,185,0.45); animation-duration:16s; animation-delay: -3s; }
.h3  { left: 33%; font-size:10px; color:rgba(240,180,215,0.50); animation-duration:11s; animation-delay: -7s; }
.h4  { left: 47%; font-size:15px; color:rgba(220,150,195,0.55); animation-duration:14s; animation-delay: -1s; }
.h5  { left: 58%; font-size:20px; color:rgba(200,130,175,0.40); animation-duration:18s; animation-delay: -5s; }
.h6  { left: 70%; font-size:11px; color:rgba(235,165,205,0.50); animation-duration:12s; animation-delay: -9s; }
.h7  { left: 82%; font-size:16px; color:rgba(215,145,190,0.45); animation-duration:15s; animation-delay: -2s; }
.h8  { left: 14%; font-size:22px; color:rgba(225,155,200,0.35); animation-duration:19s; animation-delay: -6s; }
.h9  { left: 42%; font-size:12px; color:rgba(240,175,210,0.50); animation-duration:10s; animation-delay: -4s; }
.h10 { left: 90%; font-size:17px; color:rgba(205,135,180,0.45); animation-duration:17s; animation-delay: -8s; }
@keyframes heartFall {
  0%   { transform: translateY(0)      rotate(-10deg) translateX(0);   opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 0.5; }
  100% { transform: translateY(110vh)  rotate(10deg)  translateX(30px); opacity: 0; }
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(26,10,46,0.45) 0%,
    rgba(26,10,46,0.08) 18%,
    rgba(26,10,46,0.08) 82%,
    rgba(26,10,46,0.28) 100%);
}
.hero-content {
  position: relative; z-index: 1;
  padding: 7rem 2rem 5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  animation: heroIn 1.4s var(--ease) both;
}
@keyframes heroIn {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:none; }
}
.hero-event {
  font-family: var(--font-hero);
  font-size: clamp(2rem, 5vw, 2.2rem);
  color: #f1eaff;
  letter-spacing: 0.2em;
  /* layered shadows: near-focus depth + wide diffuse halo */
  text-shadow:
    0 1px 10px rgba(26,10,46,0.42),
    0 3px 30px rgba(26,10,46,0.22);
}
.hero-names {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(5rem, 18vw, 10rem);
  line-height: 1;
  color: #f1eaff;
  letter-spacing: 0.04em;
  /* layered shadows: subtle lift + broad atmospheric bloom */
  text-shadow:
    0 2px 14px rgba(26,10,46,0.38),
    0 5px 52px rgba(26,10,46,0.24);
}
.hero-ornament {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  color: #D9B6E7;
  letter-spacing: 0.28em;
  opacity: 0.88;
  margin: 0.3rem 0;
  text-shadow: 0 1px 14px rgba(26,10,46,0.38);
}
.hero-date {
  font-family: var(--font-hero);
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: rgba(247,241,232,0.82);
  letter-spacing: 0.1em;
}
.hero-arrow {
  position: absolute; bottom: 1.8rem; left: 50%;
  transform: translateX(-50%);
  z-index: 1; color: #D9B6E7; opacity: 0.85;
  animation: arrowBounce 2.2s ease-in-out infinite;
}
.hero-arrow svg { width: 32px; height: 32px; }
@keyframes arrowBounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(8px); }
}

/* ════════════════════════════════════════
   Sections
════════════════════════════════════════ */
.section { padding: 5rem 1.5rem; }
.container { max-width: 1100px; margin: 0 auto; }
.narrow { max-width: 700px; margin: 0 auto; }
.section-title {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3rem);
  text-align: center;
  color: var(--lilac-deep);
  margin-bottom: 2.5rem;
  letter-spacing: 0.04em;
}
/* wave-divider: lines flank the glyph in the inv-section */
.wave-divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.5rem auto;
  width: min(360px, 88vw);
}
.wave-divider::before,
.wave-divider::after {
  content: '';
  flex: 1;
  height: 1px;
}
.wave-divider::before { background: linear-gradient(to right, transparent, rgba(155,125,200,0.52)); }
.wave-divider::after  { background: linear-gradient(to left,  transparent, rgba(155,125,200,0.52)); }
.divider-glyph {
  font-family: var(--font-head);
  font-size: 1rem;
  color: #9B7DC8;
  letter-spacing: 0.2em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ════════════════════════════════════════
   Invitation
════════════════════════════════════════ */
.inv-section { background: var(--pearl); }
.inv-text {
  font-family: var(--font-head);
  /* font-size: clamp(1.05rem, 2.5vw, 1.25rem); */
  font-size: clamp(1.1rem, 2.8vw, 1.3rem);
  font-style: italic;
  line-height: 1.9;
  color: var(--lilac-dark);
  text-align: center;
  margin-bottom: 1rem;
}
.inv-em {
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.1rem, 2.8vw, 1.3rem);
  color: var(--lilac-dark);
  text-align: center;
  margin-top: 0.5rem;
}

/* ════════════════════════════════════════
   Gallery
════════════════════════════════════════ */
.gallery-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 4px;
}
.gallery-item--tall { grid-row: span 2; }
.gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--pearl-dark);
}
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.55s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-overlay {
  position: absolute; inset: 0;
  background: rgba(58,36,86,0);
  transition: background 0.3s;
}
.gallery-item:hover .gallery-overlay { background: rgba(58,36,86,0.18); }
@media (max-width: 600px) {
  .gallery-section { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px; }
  .gallery-item--tall { grid-row: span 2; }
}

/* ════════════════════════════════════════
   Date Section
════════════════════════════════════════ */
.date-section { background: linear-gradient(to bottom, var(--pearl), var(--pearl-dark)); }
.date-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
}
.date-card {
  background: #fff;
  border: 1px solid rgba(155,125,200,0.25);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  text-align: center;
  overflow: hidden;
  min-width: 200px;
}
.date-month {
  background: var(--lilac);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.7rem 2rem;
}
.date-num-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0.7rem; padding: 1.2rem 2rem 0.8rem;
}
.date-day {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--lilac-deep);
}
.date-heart { font-size: 1.1rem; color: var(--lilac-dark); line-height: 1; }
.date-year {
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--lilac-mid);
  letter-spacing: 0.15em;
  padding-bottom: 0.6rem;
}
.date-time-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0.4rem; padding: 0.6rem 1.5rem 0.9rem;
  border-top: 1px solid rgba(155,125,200,0.18);
  font-size: 0.8rem; color: var(--lilac-mid); letter-spacing: 0.06em;
}
.countdown-block { text-align: center; }
.cd-label-top {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1rem;
  color: var(--lilac-mid);
  margin-bottom: 1.2rem;
  letter-spacing: 0.05em;
}
.countdown { display: flex; align-items: center; gap: 0.5rem; }
.cd-item { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.cd-num {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  color: var(--lilac-deep);
  line-height: 1;
}
.cd-lbl {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lilac-mid); margin-top: 3px;
}
.cd-sep { font-family: var(--font-head); font-size: 2rem; color: var(--lilac); opacity: 0.5; padding-bottom: 1rem; }

/* ════════════════════════════════════════
   Venue
════════════════════════════════════════ */
.venue-section { background: var(--pearl); }
.venue-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: start;
}
.venue-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
@media (max-width: 750px) {
  .venue-layout { grid-template-columns: 1fr; }
  .venue-info { align-items: center; text-align: center; }
}
.venue-pin svg { width: 36px; height: 44px; }
.venue-name {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 400;
  color: var(--lilac-deep);
  line-height: 1.2;
}
.venue-address { font-size: 0.88rem; color: var(--lilac-mid); line-height: 1.5; }
.venue-btns { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.3rem; }
.venue-btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  background: var(--lilac);
  color: #fff;
  border-radius: 2px;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.2s;
}
.venue-btn:hover { background: var(--lilac-dark); transform: translateY(-1px); }
.venue-btn-outline {
  background: transparent;
  color: var(--lilac);
  border: 1px solid var(--lilac);
}
.venue-btn-outline:hover { background: var(--lilac); color: #fff; }
.venue-map { border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-card); }
.venue-map iframe { width: 100%; height: 320px; display: block; border: 0; }

/* ════════════════════════════════════════
   RSVP
════════════════════════════════════════ */
.rsvp-section { background: linear-gradient(to bottom, var(--pearl-dark), var(--pearl)); }
.rsvp-deadline {
  text-align: center;
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1rem;
  color: var(--lilac-mid);
  margin-bottom: 2.5rem;
}
.rsvp-choice {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem;
}
.choice-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1.4rem 2.5rem;
  border: 1px solid rgba(155,125,200,0.35);
  border-radius: 6px;
  background: #fff;
  color: var(--lilac-deep);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  transition: background 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
  box-shadow: var(--shadow-card);
  min-width: 180px;
}
.choice-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(58,36,86,0.12); }
.choice-btn.selected { transform: translateY(-3px); }
.choice-icon { font-size: 1.4rem; line-height: 1; }
.choice-yes { border-top: 3px solid var(--lilac); }
.choice-yes.selected { background: rgba(155,125,200,0.1); border-color: var(--lilac); }
.choice-no  { border-top: 3px solid var(--lilac-dark); }
.choice-no.selected  { background: rgba(216,196,236,0.15); border-color: var(--lilac-dark); }

.rsvp-form {
  background: #fff;
  border: 1px solid rgba(155,125,200,0.2);
  border-radius: 6px;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  box-shadow: var(--shadow-card);
  display: none;
}
.rsvp-form.show { display: block; animation: formReveal 0.5s var(--ease) both; }
@keyframes formReveal {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:none; }
}
.form-group { margin-bottom: 1.5rem; }
.form-group label, .form-group > label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lilac-mid);
  margin-bottom: 0.55rem;
}
.form-opt { text-transform: none; letter-spacing: 0; font-style: italic; font-size: 0.88em; margin-left: 0.3em; }
.form-group input[type="text"],
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(155,125,200,0.3);
  border-radius: 5px;
  background: var(--pearl);
  color: var(--lilac-deep);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group textarea:focus {
  border-color: var(--lilac);
  box-shadow: 0 0 0 3px rgba(155,125,200,0.14);
}
.form-group textarea { resize: vertical; min-height: 105px; }
.field-err { display: none; font-size: 0.75rem; color: #8B2FC9; margin-top: 0.35rem; }
.field-err.show { display: block; }

#guestsGroup { display: none; }
#guestsGroup.show { display: block; }
.guests-counter {
  display: flex; align-items: center; width: fit-content;
  border: 1px solid rgba(155,125,200,0.3); border-radius: 5px; overflow: hidden;
}
.counter-btn {
  width: 44px; height: 44px;
  background: var(--pearl); border: none; cursor: pointer;
  font-size: 1.3rem; color: var(--lilac);
  transition: background 0.2s;
}
.counter-btn:hover { background: rgba(155,125,200,0.12); }
.guests-counter input {
  width: 56px; height: 44px; border: none;
  border-left: 1px solid rgba(155,125,200,0.25);
  border-right: 1px solid rgba(155,125,200,0.25);
  text-align: center;
  font-family: var(--font-head); font-size: 1.4rem; font-weight: 300;
  color: var(--lilac-deep); background: #fff; outline: none;
  -moz-appearance: textfield;
}
.guests-counter input::-webkit-inner-spin-button,
.guests-counter input::-webkit-outer-spin-button { -webkit-appearance: none; }
.guests-note { font-size: 0.74rem; color: var(--lilac-mid); font-style: italic; margin-top: 0.35rem; }

.rsvp-choice {
  display: flex; gap: 1rem; justify-content: center;
  flex-wrap: wrap; margin-bottom: 2.5rem;
}
.choice-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1.4rem 2.5rem;
  border: 1px solid rgba(155,125,200,0.3); border-radius: 6px;
  background: #fff; color: var(--lilac-deep); cursor: pointer;
  font-family: var(--font-body); font-size: 0.88rem; letter-spacing: 0.04em;
  transition: background 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
  box-shadow: var(--shadow-card); min-width: 180px;
}
.choice-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(74,31,122,0.12); }
.choice-btn.selected { transform: translateY(-3px); }
.choice-icon { font-size: 1.4rem; line-height: 1; }
.choice-yes { border-top: 3px solid var(--lilac); }
.choice-yes.selected { background: rgba(180,143,216,0.1); border-color: var(--lilac); }
.choice-no  { border-top: 3px solid var(--lilac-soft); }
.choice-no.selected  { background: rgba(168,120,204,0.1); border-color: var(--lilac-soft); }

.form-actions { text-align: center; margin-top: 2rem; }
.submit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 3rem;
  background: var(--lilac); color: #fff; border: none; border-radius: 2px;
  font-family: var(--font-body); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;
  transition: background 0.2s, transform 0.2s; min-width: 180px;
}
.submit-btn:hover:not(:disabled) { background: var(--lilac-dark); transform: translateY(-1px); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-loader { display: none; }
.btn-loader svg { width: 17px; height: 17px; }
.submit-btn.loading .btn-text  { display: none; }
.submit-btn.loading .btn-loader { display: inline-flex; }

.form-msg {
  margin-top: 1.1rem; padding: 0.9rem 1.2rem;
  border-radius: 5px; font-size: 0.88rem; text-align: center; display: none;
}
.form-msg.error {
  display: block;
  background: rgba(139,47,201,0.08);
  border: 1px solid #8B2FC9;
  color: #8B2FC9;
}

/* Post-submit confirmation — replaces the choice + form */
.rsvp-confirm {
  display: none;
  text-align: center;
  padding: 2.4rem 1.5rem;
  animation: formReveal 0.55s var(--ease) both;
}
.rsvp-confirm.show { display: block; }
.rsvp-confirm::before {
  content: '༺ ❦ ༻';
  display: block;
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--lilac);
  letter-spacing: 0.2em;
  opacity: 0.65;
  margin-bottom: 1.1rem;
}
.rsvp-confirm p,
.rsvp-confirm {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  font-style: italic;
  color: var(--lilac-deep);
  line-height: 1.7;
}

/* ════════════════════════════════════════
   Closing
════════════════════════════════════════ */
.closing-section { background: var(--pearl); text-align: center; }
.closing-ornament { font-size: 2rem; color: var(--lilac); opacity: 0.5; display: block; margin-bottom: 1rem; font-family: serif; }
.closing-title {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  color: var(--lilac-deep);
  margin-bottom: 1.2rem;
}
.closing-text {
  font-family: var(--font-head);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.9;
  color: var(--lilac-deep);
  max-width: 600px;
  margin: 0 auto 1.5rem;
}
.closing-sig {
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  color: var(--lilac);
}

/* ════════════════════════════════════════
   Media Sharing
════════════════════════════════════════ */
.media-section { background: linear-gradient(to bottom, var(--pearl), var(--pearl-dark)); }
.media-card {
  background: #fff;
  border: 1px solid rgba(155,125,200,0.2);
  border-radius: 8px;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.media-icon { font-size: 2.6rem; margin-bottom: 1rem; }
.media-title {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 400;
  color: var(--lilac-deep);
  margin-bottom: 0.8rem;
}
.media-text { color: var(--lilac-mid); font-size: 0.9rem; line-height: 1.7; max-width: 480px; margin: 0 auto 1.8rem; }
.media-btn {
  display: inline-block;
  padding: 0.8rem 2.2rem;
  border: 1px solid var(--lilac);
  color: var(--lilac);
  border-radius: 2px;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.media-btn:hover { background: var(--lilac); color: #fff; }
.media-hint { font-size: 0.74rem; color: var(--lilac-mid); font-style: italic; margin-top: 0.8rem; }

/* ════════════════════════════════════════
   Footer
════════════════════════════════════════ */
.footer {
  background: var(--lilac-deep);
  color: rgba(248,245,255,0.65);
  text-align: center;
  padding: 3rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.footer-flower svg { width: 64px; height: 64px; margin-bottom: 0.6rem; }
.footer-names {
  font-family: var(--font-head);
  font-size: 1.7rem; font-weight: 300;
  color: var(--lilac-light);
  letter-spacing: 0.06em;
}
.footer-date {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(179,157,219,0.65);
  letter-spacing: 0.1em;
}
.footer-love { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.4rem; }

/* ════════════════════════════════════════
   Mobile Responsive
════════════════════════════════════════ */

/* Laptops & desktops (≥ 769px) — tile the portrait image horizontally */
@media (min-width: 769px) {
  .hero-bg {
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: left top;
  }
}

/* Tablets & large phones (≤ 768px) */
@media (max-width: 768px) {
  .section { padding: 3.5rem 1.3rem; }
  .hero-content { padding: 5.5rem 1.5rem 4rem; }
  .date-layout { gap: 2.5rem; }
}

/* Small phones (≤ 480px) */
@media (max-width: 480px) {
  .section { padding: 2.8rem 1.1rem; }
  .hero-content { padding: 5rem 1.2rem 3.5rem; }

  /* Envelope — scale down for small screens */
  .env-card { width: min(300px, 88vw); height: calc(min(300px, 88vw) * 0.677); }
  .env-flap-wrap { height: calc(min(300px, 88vw) * 0.338); }
  .env-flap { width: min(300px, 88vw); height: calc(min(300px, 88vw) * 0.338); }

  /* Date section */
  .date-layout { gap: 1.8rem; }
  .date-card { min-width: unset; width: 100%; max-width: 260px; }

  /* Countdown — tighten on small screens */
  .countdown { gap: 0.2rem; }
  .cd-item { min-width: 52px; }
  .cd-sep { font-size: 1.5rem; }

  /* RSVP buttons — stack vertically */
  .rsvp-choice { flex-direction: column; align-items: center; }
  .choice-btn { width: 100%; max-width: 320px; min-width: unset; }

  /* Submit button full width */
  .submit-btn { width: 100%; padding: 0.85rem 1rem; }

  /* Venue map slightly shorter */
  .venue-map iframe { height: 240px; }

  /* Media card */
  .media-btn { width: 100%; text-align: center; }
}

/* Very small phones (≤ 360px) */
@media (max-width: 360px) {
  .section { padding: 2.4rem 1rem; }
  .env-card { width: 88vw; height: calc(88vw * 0.677); }
  .env-flap-wrap { height: calc(88vw * 0.338); }
  .env-flap { width: 88vw; height: calc(88vw * 0.338); }
  .countdown { gap: 0.1rem; }
  .cd-item { min-width: 44px; }
  .cd-sep { font-size: 1.2rem; padding-bottom: 0.8rem; }
  .env-btn { padding: 0.75rem 1.6rem; font-size: 0.72rem; }
}