/* ════════════════════════════════════════════════════════════
   Wedding Memories — Premium Frontend Styles v1.3.0
   Palette: Romantic Rose  |  Fonts: Playfair Display + Lato
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Lato:wght@300;400;700&display=swap');

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --wm-rose:        #c2677a;
  --wm-rose-dark:   #7a2d40;
  --wm-rose-deep:   #4a1525;
  --wm-blush:       #fdf0f3;
  --wm-blush2:      #fce8ed;
  --wm-cream:       #fdf8f5;
  --wm-gold:        #c9a070;
  --wm-gold-lt:     #f0d8bc;
  --wm-gold-dk:     #a07040;
  --wm-text:        #3d1a24;
  --wm-text-light:  #9a7080;
  --wm-white:       #ffffff;
  --wm-glass:       rgba(253,240,243,0.88);

  /* Aliases */
  --wm-deep:        var(--wm-text);
  --wm-mid:         var(--wm-rose-dark);
  --wm-soft:        var(--wm-text-light);
  --wm-ink:         var(--wm-rose-deep);
  --wm-ivory:       var(--wm-cream);

  --wm-display:     'Playfair Display', Georgia, serif;
  --wm-body:        'Lato', system-ui, sans-serif;

  --wm-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --wm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --wm-r:           14px;
  --wm-r-sm:        10px;
  --wm-r-lg:        20px;

  --wm-shadow-sm:   0 4px 20px rgba(194,103,122,0.08);
  --wm-shadow-md:   0 8px 32px rgba(194,103,122,0.14);
  --wm-shadow-lg:   0 24px 64px rgba(122,45,64,0.22);
}

/* ── Reset ──────────────────────────────────────────────────── */
.wm-page *, .wm-popup-overlay *, .wm-lightbox *,
.wm-standalone-wrap *, .wm-card-grid-wrap *, .wm-wish-btn-wrap * {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ── Full-width page ────────────────────────────────────────── */
.wm-page {
  font-family: var(--wm-body);
  color: var(--wm-text);
  background: var(--wm-cream);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* ════════════════════════════════════════════════════════════
   HERO SLIDER
   ════════════════════════════════════════════════════════════ */
.wm-hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
}

.wm-hero--banner-only { min-height: 480px; height: 60vh; }

.wm-slides { position: absolute; inset: 0; }

.wm-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.2s var(--wm-ease), transform 7s linear;
  will-change: opacity, transform;
}
.wm-slide--active  { opacity: 1; transform: scale(1); }
.wm-slide--exit    { opacity: 0; transform: scale(0.98); transition: opacity 1.2s var(--wm-ease), transform 1.2s var(--wm-ease); }
.wm-slide--fallback {
  background: linear-gradient(160deg, var(--wm-rose-deep) 0%, #9a3050 45%, var(--wm-rose) 100%);
}
.wm-slide-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.35; pointer-events: none;
}

.wm-hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(74,21,37,0.55) 100%);
}
.wm-hero-gradient-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 55%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(40,8,18,0.88) 0%, rgba(40,8,18,0.4) 60%, transparent 100%);
}

/* Corner ornaments */
.wm-corner {
  position: absolute; width: 52px; height: 52px; z-index: 3; pointer-events: none; opacity: 0.5;
}
.wm-corner::before { content:''; position:absolute; background:var(--wm-gold-lt); width:100%; height:1px; }
.wm-corner::after  { content:''; position:absolute; background:var(--wm-gold-lt); width:1px; height:100%; }
.wm-corner-tl { top:24px; left:24px; }
.wm-corner-tr { top:24px; right:24px; transform:scaleX(-1); }
.wm-corner-bl { bottom:24px; left:24px; transform:scaleY(-1); }
.wm-corner-br { bottom:24px; right:24px; transform:scale(-1); }

/* Hero content */
.wm-hero-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 24px 120px; color: var(--wm-white);
}

.wm-hero-eyebrow {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
  animation: wm-fade-down 1s 0.2s var(--wm-ease) both;
}
.wm-eyebrow-line { display:block; width:44px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.55)); }
.wm-eyebrow-line:last-child { background:linear-gradient(90deg,rgba(255,255,255,0.55),transparent); }
.wm-eyebrow-text { font-family:var(--wm-body); font-size:0.7rem; font-weight:400; letter-spacing:0.28em; text-transform:uppercase; color:var(--wm-gold-lt); }

.wm-hero-title {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: wm-fade-up 1s 0.35s var(--wm-ease) both;
}
.wm-name-a, .wm-name-b {
  display: block;
  font-family: var(--wm-display);
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: var(--wm-white);
  text-shadow:
    0 0 40px rgba(194,103,122,0.9),
    0 0 80px rgba(194,103,122,0.5),
    0 4px 24px rgba(0,0,0,0.5);
}
.wm-ampersand {
  display: block;
  font-family: var(--wm-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  color: var(--wm-gold-lt); line-height: 1.2; margin: 4px 0; opacity: 0.9;
}

.wm-hero-date-wrap { margin-top: 20px; animation: wm-fade-up 1s 0.5s var(--wm-ease) both; }
.wm-hero-date { font-family:var(--wm-body); font-size:0.76rem; font-weight:300; letter-spacing:0.22em; color:rgba(255,255,255,0.55); }

.wm-hero-actions {
  display: flex; align-items: center; gap: 14px; margin-top: 40px; flex-wrap: wrap; justify-content: center;
  animation: wm-fade-up 1s 0.65s var(--wm-ease) both;
}

/* Buttons in hero */
.wm-wish-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--wm-rose), var(--wm-rose-dark));
  border: none; border-radius: 50px; color: var(--wm-white);
  font-family: var(--wm-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em;
  cursor: pointer; transition: all 0.3s var(--wm-ease); overflow: hidden; position: relative;
  box-shadow: 0 6px 24px rgba(194,103,122,0.4);
}
.wm-wish-trigger:hover { background: linear-gradient(135deg, var(--wm-rose-dark), var(--wm-rose-deep)); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(194,103,122,0.5); }
.wm-wish-trigger--outline { background: transparent; border: 1.5px solid var(--wm-rose); color: var(--wm-rose-dark); box-shadow: none; }
.wm-wish-trigger--outline:hover { background: var(--wm-blush); }
.wm-wish-trigger--dark { background: var(--wm-rose-deep); color: var(--wm-gold-lt); border: 1px solid rgba(201,160,112,0.3); box-shadow: none; }
.wm-wish-trigger--dark:hover { background: #3a0f1c; color: var(--wm-gold-lt); }

.wm-scroll-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); border-radius: 50px;
  color: rgba(255,255,255,0.85); font-family: var(--wm-body); font-size: 0.82rem; font-weight: 400; letter-spacing: 0.1em;
  cursor: pointer; backdrop-filter: blur(8px); transition: all 0.3s;
}
.wm-scroll-cta:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45); transform: translateY(-2px); }
.wm-scroll-cta svg { animation: wm-bob 2s ease-in-out infinite; }
@keyframes wm-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }

/* Slider controls */
.wm-slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%;
  width: 52px; height: 52px; color: rgba(255,255,255,0.8);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); transition: all 0.3s;
}
.wm-slider-btn:hover { background: rgba(194,103,122,0.3); border-color: var(--wm-rose); color: var(--wm-blush2); transform: translateY(-50%) scale(1.08); }
.wm-slider-prev { left: 28px; }
.wm-slider-next { right: 28px; }

.wm-slider-dots { position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; align-items: center; }
.wm-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.35); border: none; cursor: pointer; transition: all 0.4s var(--wm-ease); padding: 0; }
.wm-dot--active { width: 28px; border-radius: 3px; background: var(--wm-rose); }

.wm-slider-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.12); z-index: 3; }
.wm-progress-fill { height: 100%; background: var(--wm-gold); width: 0%; transition: width 0.1s linear; }

/* ════════════════════════════════════════════════════════════
   RIBBON
   ════════════════════════════════════════════════════════════ */
.wm-ribbon { background: var(--wm-rose-deep); }
.wm-ribbon-track { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 28px 20px; }
.wm-ribbon-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; text-align: center; }
.wm-ribbon-item strong { font-family: var(--wm-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 400; color: var(--wm-gold); line-height: 1; }
.wm-ribbon-item span   { font-size: 0.67rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,216,188,0.55); }
.wm-ribbon-sep { font-size: 0.6rem; color: rgba(201,160,112,0.3); padding: 0 32px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   WISHES SECTION
   ════════════════════════════════════════════════════════════ */
.wm-wishes-section {
  background: var(--wm-blush);
  padding: 100px 40px 80px;
  max-width: 100%;
}

.wm-section-header { text-align: center; margin-bottom: 64px; }
.wm-overline { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--wm-rose); margin-bottom: 14px; font-weight: 700; }
.wm-section-title { font-family: var(--wm-display); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 400; color: var(--wm-rose-dark); line-height: 1.15; letter-spacing: -0.01em; }
.wm-title-ornament { width: 140px; margin: 20px auto 0; color: var(--wm-rose); }

/* ── Guest Grid ─────────────────────────────────────────────── */
.wm-guest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px,100%), 1fr));
  gap: 22px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1200px) { .wm-guest-grid { grid-template-columns: repeat(4,1fr); } }

/* ── Guest Card ─────────────────────────────────────────────── */
.wm-guest-card {
  opacity: 0;
  transform: translateY(20px);
  animation: wm-card-in 0.6s var(--delay, 0s) var(--wm-ease) forwards;
}
@keyframes wm-card-in { to { opacity:1; transform:translateY(0); } }

.wm-card-inner {
  background: var(--wm-white);
  border-radius: var(--wm-r-lg);
  overflow: hidden;
  box-shadow: var(--wm-shadow-sm);
  border: 1px solid #f0d8df;
  transition: transform 0.4s var(--wm-ease), box-shadow 0.4s var(--wm-ease);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wm-guest-card:hover .wm-card-inner { transform: translateY(-6px); box-shadow: var(--wm-shadow-lg); }

.wm-card-media { position: relative; overflow: hidden; flex-shrink: 0; }
.wm-card-photo { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.6s var(--wm-ease); }
.wm-guest-card:hover .wm-card-photo { transform: scale(1.06); }

.wm-expand-btn {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.9); border: none; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--wm-rose-dark); opacity: 0; transform: scale(0.8);
  transition: opacity 0.3s, transform 0.3s var(--wm-ease-spring);
  backdrop-filter: blur(4px);
}
.wm-guest-card:hover .wm-expand-btn { opacity: 1; transform: scale(1); }

.wm-card-body { padding: 18px 18px 10px; display: flex; gap: 13px; align-items: flex-start; flex: 1; }

.wm-card-avatar {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wm-display); font-size: 1.2rem; font-weight: 500;
  flex-shrink: 0; box-shadow: var(--wm-shadow-sm);
}
.wm-card-content { flex: 1; min-width: 0; }
.wm-card-name { font-family: var(--wm-display); font-size: 1.05rem; font-weight: 500; color: var(--wm-rose-dark); margin-bottom: 7px; }
.wm-card-wish { font-size: 0.875rem; color: var(--wm-text-light); line-height: 1.65; font-weight: 300; word-break: break-word; }
.wm-card-date { display: block; margin-top: 10px; font-size: 0.68rem; color: #c8a0b0; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Reaction button ────────────────────────────────────────── */
.wm-card-footer { padding: 0 18px 14px; display: flex; justify-content: flex-end; }
.wm-react-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1.5px solid #f0d8df; border-radius: 50px;
  padding: 5px 12px 5px 9px; cursor: pointer;
  font-family: var(--wm-body); font-size: 0.78rem; color: var(--wm-text-light);
  transition: all 0.25s var(--wm-ease); user-select: none;
}
.wm-react-btn:hover { border-color: var(--wm-rose); color: var(--wm-rose); background: var(--wm-blush); }
.wm-react-heart { transition: transform 0.3s var(--wm-ease-spring), fill 0.25s, stroke 0.25s; flex-shrink: 0; }
.wm-react-btn.wm-reacted { border-color: var(--wm-rose); background: var(--wm-blush2); color: var(--wm-rose-dark); cursor: default; }
.wm-react-btn.wm-reacted .wm-react-heart { fill: var(--wm-rose); stroke: var(--wm-rose); }
.wm-react-btn.wm-react-pop .wm-react-heart { animation: wm-heart-pop 0.45s var(--wm-ease-spring); }
@keyframes wm-heart-pop { 0%{transform:scale(1)} 40%{transform:scale(1.55)} 70%{transform:scale(0.88)} 100%{transform:scale(1)} }

/* ── Card love hover icon ───────────────────────────────────── */
.wm-card-love {
  position: absolute; bottom: 14px; right: 14px; color: var(--wm-rose);
  opacity: 0; transform: scale(0) rotate(-15deg);
  transition: all 0.35s var(--wm-ease-spring);
}
.wm-guest-card:hover .wm-card-love { opacity: 1; transform: scale(1) rotate(0); }

/* ── Load More ──────────────────────────────────────────────── */
.wm-load-more-wrap { text-align: center; margin-top: 52px; }
.wm-load-more-btn {
  padding: 14px 52px; background: transparent; border: 1.5px solid var(--wm-rose); border-radius: 50px;
  color: var(--wm-rose-dark); font-family: var(--wm-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em;
  cursor: pointer; transition: all 0.3s var(--wm-ease);
}
.wm-load-more-btn:hover { background: var(--wm-rose); color: var(--wm-white); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(194,103,122,0.3); }
.wm-lm-loader span { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--wm-rose); animation:wm-dot-pulse 1.2s ease-in-out infinite; margin:0 2px; }
.wm-lm-loader span:nth-child(2){animation-delay:0.2s} .wm-lm-loader span:nth-child(3){animation-delay:0.4s}
@keyframes wm-dot-pulse { 0%,80%,100%{transform:scale(0.6);opacity:0.4} 40%{transform:scale(1);opacity:1} }

/* ── CTA Banner ─────────────────────────────────────────────── */
.wm-cta-banner-outer { max-width: 1400px; margin: 0 auto; padding: 40px 40px 80px; }
.wm-cta-banner {
  border-radius: var(--wm-r-lg);
  background: linear-gradient(135deg, var(--wm-rose-dark) 0%, var(--wm-rose-deep) 100%);
  overflow: hidden; position: relative;
}
.wm-cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(201,160,112,0.18) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(194,103,122,0.12) 0%, transparent 60%);
}
.wm-cta-banner-inner { position:relative; z-index:1; padding:56px 48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.wm-cta-sub { font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--wm-gold-lt); margin-bottom:10px; }
.wm-cta-heading { font-family:var(--wm-display); font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:400; font-style:italic; color:var(--wm-white); }

/* ── Empty state ────────────────────────────────────────────── */
.wm-empty-state { text-align:center; padding:80px 20px; color:var(--wm-text-light); }
.wm-empty-heart { color:var(--wm-rose); margin-bottom:24px; opacity:0.5; animation:wm-float 3s ease-in-out infinite; }
.wm-empty-state h3 { font-family:var(--wm-display); font-size:1.6rem; font-weight:400; color:var(--wm-rose-dark); margin-bottom:10px; }
.wm-empty-state p { font-size:0.95rem; margin-bottom:28px; }
@keyframes wm-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ════════════════════════════════════════════════════════════
   POPUP MODAL
   ════════════════════════════════════════════════════════════ */
.wm-popup-overlay {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.wm-popup-backdrop {
  position: absolute; inset: 0;
  background: rgba(74,21,37,0.78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer;
}
.wm-popup-panel {
  position: relative; z-index: 1;
  display: flex; width: 100%; max-width: 900px; max-height: 92vh;
  border-radius: var(--wm-r-lg); overflow: hidden;
  box-shadow: 0 40px 100px rgba(74,21,37,0.4);
  animation: wm-popup-in 0.45s var(--wm-ease-spring) both;
}
@keyframes wm-popup-in { from{opacity:0;transform:scale(0.92) translateY(24px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes wm-popup-out { from{opacity:1;transform:scale(1) translateY(0)} to{opacity:0;transform:scale(0.94) translateY(16px)} }

/* Decorative left column */
.wm-popup-deco { width: 260px; flex-shrink: 0; position: relative; overflow: hidden; }
.wm-popup-deco-bg {
  position: absolute; inset: 0;
  background: linear-gradient(165deg, var(--wm-rose-deep) 0%, #7a2d40 60%, #4a1525 100%);
}
.wm-popup-deco-bg::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(201,160,112,0.22) 0%, transparent 55%),
              radial-gradient(ellipse at 70% 80%, rgba(194,103,122,0.15) 0%, transparent 50%);
}
.wm-popup-deco-content {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 28px; text-align: center; color: var(--wm-white);
}
.wm-deco-rings { width: 90px; margin-bottom: 28px; }
.wm-deco-quote { font-family:var(--wm-display); font-style:italic; font-size:1.05rem; font-weight:400; line-height:1.6; color:rgba(255,255,255,0.72); margin-bottom:24px; }
.wm-deco-couple { font-family:var(--wm-display); font-size:1rem; font-weight:400; color:var(--wm-gold-lt); letter-spacing:0.05em; }
.wm-deco-date   { font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.32); margin-top:6px; }

/* Animated petals in deco panel */
.wm-deco-petals { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.wm-deco-petals span { position:absolute; color:rgba(194,103,122,0.18); font-size:1.2rem; animation:wm-deco-fall linear infinite; }
.wm-dp-0{left:10%;animation-duration:6s;animation-delay:0s;font-size:0.8rem}
.wm-dp-1{left:30%;animation-duration:9s;animation-delay:1s}
.wm-dp-2{left:55%;animation-duration:7s;animation-delay:2.5s;font-size:1rem}
.wm-dp-3{left:75%;animation-duration:11s;animation-delay:0.5s;font-size:0.7rem}
.wm-dp-4{left:20%;animation-duration:8s;animation-delay:3s}
.wm-dp-5{left:45%;animation-duration:10s;animation-delay:1.5s;font-size:0.9rem}
.wm-dp-6{left:65%;animation-duration:6.5s;animation-delay:4s}
.wm-dp-7{left:85%;animation-duration:8.5s;animation-delay:2s;font-size:0.75rem}
.wm-dp-8{left:5%;animation-duration:12s;animation-delay:0.8s}
.wm-dp-9{left:90%;animation-duration:7.5s;animation-delay:3.5s}
@keyframes wm-deco-fall { 0%{top:-10%;opacity:0;transform:rotate(0deg)} 10%{opacity:1} 90%{opacity:0.6} 100%{top:110%;opacity:0;transform:rotate(540deg)} }

/* Form column */
.wm-popup-form-col {
  flex: 1; background: var(--wm-white);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 52px 44px; position: relative;
}
.wm-popup-close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; background: var(--wm-blush2); border: none; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--wm-rose-dark); transition: all 0.25s; z-index: 2;
}
.wm-popup-close:hover { background: var(--wm-blush); transform: rotate(90deg); }

/* Popup form header */
.wm-popup-form-header { margin-bottom: 32px; }
.wm-popup-overline { font-size:0.68rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--wm-rose); margin-bottom:10px; font-weight:700; }
.wm-popup-title { font-family:var(--wm-display); font-size:clamp(1.8rem,4vw,2.6rem); font-weight:400; color:var(--wm-rose-dark); line-height:1.15; }

/* ── Form fields ────────────────────────────────────────────── */
.wm-form { display: flex; flex-direction: column; gap: 22px; }
.wm-field { display: flex; flex-direction: column; gap: 7px; }
.wm-field label { font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--wm-text-light); }
.wm-label-optional { font-weight:300; text-transform:none; letter-spacing:0; color:var(--wm-text-light); opacity:0.7; }
.wm-input-wrap { position: relative; }

.wm-field input, .wm-field textarea {
  width: 100%; padding: 13px 15px;
  background: var(--wm-cream); border: 1.5px solid #f0d8df; border-radius: var(--wm-r-sm);
  font-family: var(--wm-body); font-size: 0.95rem; color: var(--wm-text);
  outline: none; transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  -webkit-appearance: none;
}
.wm-field input::placeholder, .wm-field textarea::placeholder { color: #c8a0b0; font-weight: 300; }
.wm-field input:focus, .wm-field textarea:focus {
  border-color: var(--wm-rose); background: var(--wm-white);
  box-shadow: 0 0 0 3px rgba(194,103,122,0.13);
}
.wm-field textarea { resize: none; min-height: 108px; line-height: 1.6; }
@media (max-width: 600px) { .wm-field input, .wm-field textarea { font-size: 16px; } }

.wm-field-footer { display:flex; justify-content:space-between; align-items:center; }
.wm-field-error  { font-size:0.75rem; color:var(--wm-rose-dark); min-height:1em; }
.wm-char-counter { font-size:0.72rem; color:var(--wm-text-light); flex-shrink:0; margin-left:auto; }

/* Upload zone */
.wm-upload-zone {
  position: relative; border: 1.5px dashed #f0d8df; border-radius: var(--wm-r-sm);
  background: var(--wm-cream); min-height: 128px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.3s var(--wm-ease); overflow: hidden;
}
.wm-upload-zone:hover, .wm-upload-zone.wm-drag-over { border-color: var(--wm-rose); background: var(--wm-blush2); }
.wm-file-input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; z-index:2; }
.wm-upload-placeholder { text-align:center; padding:22px 16px; pointer-events:none; color:var(--wm-text-light); display:flex; flex-direction:column; align-items:center; gap:8px; }
.wm-upload-placeholder p  { font-size:0.87rem; }
.wm-upload-placeholder span { color:var(--wm-rose); font-weight:700; text-decoration:underline; }
.wm-upload-placeholder small { font-size:0.72rem; color:var(--wm-text-light); opacity:0.7; }
.wm-preview-img   { width:100%; height:175px; object-fit:cover; display:block; }
.wm-remove-image  { position:absolute; top:10px; right:10px; width:28px; height:28px; background:var(--wm-white); border:1px solid #f0d8df; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--wm-text-light); z-index:3; box-shadow:var(--wm-shadow-sm); transition:all 0.2s; }
.wm-remove-image:hover { background:var(--wm-rose-dark); color:var(--wm-white); transform:scale(1.1); }

/* Form error */
.wm-form-error { padding:12px 15px; background:var(--wm-blush2); border:1px solid #f0d8df; border-radius:var(--wm-r-sm); color:var(--wm-rose-dark); font-size:0.85rem; animation:wm-shake 0.4s var(--wm-ease); }
@keyframes wm-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

/* Submit button */
.wm-submit-btn {
  position: relative; width: 100%; padding: 15px 32px;
  background: linear-gradient(135deg, var(--wm-rose) 0%, var(--wm-rose-dark) 50%, var(--wm-rose) 100%);
  background-size: 200% 200%; background-position: left center;
  border: none; border-radius: 50px; color: var(--wm-white);
  font-family: var(--wm-body); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.12em;
  cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all 0.4s var(--wm-ease); box-shadow: 0 4px 20px rgba(194,103,122,0.4); margin-top: 4px;
}
.wm-submit-btn:hover { background-position: right center; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(194,103,122,0.5); }
.wm-submit-btn:disabled { opacity:0.7; cursor:not-allowed; transform:none; }
.wm-btn-shine {
  position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(to right,transparent 0%,rgba(255,255,255,0.18) 50%,transparent 100%);
  transform:skewX(-20deg); animation:wm-btn-shine 3.5s ease-in-out infinite;
}
@keyframes wm-btn-shine { 0%{left:-75%} 100%{left:125%} }
.wm-btn-loader { display:inline-flex; gap:4px; }
.wm-btn-loader span { display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; animation:wm-dot-pulse 1.2s ease-in-out infinite; }
.wm-btn-loader span:nth-child(2){animation-delay:0.2s} .wm-btn-loader span:nth-child(3){animation-delay:0.4s}

/* Popup success */
.wm-popup-success { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 20px; animation:wm-pop-in 0.5s var(--wm-ease-spring) both; min-height:340px; }
@keyframes wm-pop-in { from{opacity:0;transform:scale(0.8)} to{opacity:1;transform:scale(1)} }
.wm-ps-heart { color:var(--wm-rose); margin-bottom:22px; animation:wm-heartbeat 1.5s ease-in-out infinite; }
@keyframes wm-heartbeat { 0%,100%{transform:scale(1)} 15%{transform:scale(1.18)} 30%{transform:scale(1)} 45%{transform:scale(1.1)} }
.wm-ps-title { font-family:var(--wm-display); font-size:2rem; font-weight:400; color:var(--wm-rose-dark); margin-bottom:10px; }
.wm-ps-name  { font-family:var(--wm-display); font-style:italic; font-size:1.1rem; color:var(--wm-rose); margin-bottom:8px; }
.wm-ps-sub   { color:var(--wm-text-light); font-size:0.9rem; margin-bottom:22px; }
.wm-ps-dots  { display:flex; gap:5px; justify-content:center; }
.wm-ps-dots span { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--wm-rose); animation:wm-dot-pulse 1.2s ease-in-out infinite; }
.wm-ps-dots span:nth-child(2){animation-delay:0.2s} .wm-ps-dots span:nth-child(3){animation-delay:0.4s}

/* ════════════════════════════════════════════════════════════
   LIGHTBOX
   ════════════════════════════════════════════════════════════ */
.wm-lightbox { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; animation:wm-lb-in 0.3s var(--wm-ease); }
@keyframes wm-lb-in  { from{opacity:0} to{opacity:1} }
@keyframes wm-lb-out { from{opacity:1} to{opacity:0} }
.wm-lightbox-backdrop { position:absolute; inset:0; background:rgba(40,8,18,0.92); backdrop-filter:blur(10px); cursor:pointer; }
.wm-lightbox-stage { position:relative; z-index:1; max-width:min(92vw,1100px); max-height:92vh; display:flex; flex-direction:column; align-items:center; animation:wm-lb-stage-in 0.4s var(--wm-ease-spring); }
@keyframes wm-lb-stage-in { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
.wm-lb-figure { display:flex; flex-direction:column; align-items:center; gap:14px; }
.wm-lb-image  { max-width:100%; max-height:82vh; object-fit:contain; border-radius:var(--wm-r); box-shadow:0 40px 100px rgba(0,0,0,0.6); }
.wm-lb-caption { font-family:var(--wm-display); font-style:italic; font-size:1.1rem; color:rgba(255,255,255,0.6); letter-spacing:0.06em; }
.wm-lightbox-close { position:absolute; top:-50px; right:0; width:40px; height:40px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:50%; color:var(--wm-white); cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:all 0.25s; }
.wm-lightbox-close:hover { background:rgba(255,255,255,0.22); transform:rotate(90deg) scale(1.1); }
.wm-lb-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:50%; color:rgba(255,255,255,0.8); cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:all 0.25s; }
.wm-lb-arrow:hover { background:rgba(194,103,122,0.3); border-color:var(--wm-rose); color:var(--wm-blush2); }
.wm-lb-prev { left:-72px; }
.wm-lb-next { right:-72px; }

/* ════════════════════════════════════════════════════════════
   STANDALONE FORM [wedding_form]
   ════════════════════════════════════════════════════════════ */
.wm-standalone-wrap { position:relative; font-family:var(--wm-body); color:var(--wm-text); max-width:900px; margin:48px auto; padding:0 16px; overflow:hidden; }
.wm-ambient-petals  { position:absolute; inset:-40px; pointer-events:none; z-index:0; }
.wm-ambient-petals span { position:absolute; color:rgba(194,103,122,0.1); font-size:1.5rem; animation:wm-deco-fall linear infinite; }
.wm-ap-0{left:5%;animation-duration:10s;animation-delay:0s}  .wm-ap-1{left:18%;animation-duration:13s;animation-delay:1.5s;font-size:1rem}
.wm-ap-2{left:32%;animation-duration:8s;animation-delay:3s}  .wm-ap-3{left:48%;animation-duration:11s;animation-delay:0.8s;font-size:1.2rem}
.wm-ap-4{left:62%;animation-duration:9s;animation-delay:2s}  .wm-ap-5{left:75%;animation-duration:14s;animation-delay:1s;font-size:0.9rem}
.wm-ap-6{left:88%;animation-duration:7s;animation-delay:3.5s}.wm-ap-7{left:22%;animation-duration:12s;animation-delay:4s;font-size:1.1rem}
.wm-ap-8{left:55%;animation-duration:9.5s;animation-delay:2.5s}.wm-ap-9{left:92%;animation-duration:11s;animation-delay:0.5s}

.wm-standalone-card { position:relative; z-index:1; display:flex; border-radius:22px; overflow:hidden; box-shadow:0 32px 80px rgba(122,45,64,0.18); min-height:520px; flex-direction:column; }
@media (min-width: 640px) { .wm-standalone-card { flex-direction: row; } }

.wm-standalone-deco { width:100%; min-height:200px; flex-shrink:0; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; }
@media (min-width: 640px) { .wm-standalone-deco { width:220px; min-height:unset; } }

.wm-standalone-subtitle { font-size:0.9rem; color:var(--wm-text-light); margin-top:8px; font-weight:300; }
.wm-standalone-form-col { flex:1; background:var(--wm-white); padding:clamp(24px,5vw,52px); }

/* ════════════════════════════════════════════════════════════
   [wedding_card_grid] SHORTCODE
   ════════════════════════════════════════════════════════════ */
.wm-card-grid-wrap { font-family:var(--wm-body); color:var(--wm-text); max-width:1400px; margin:0 auto; padding:40px 20px; }
.wm-cg-header { text-align:center; margin-bottom:48px; }

.wm-card-grid-cols-1 .wm-guest-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
.wm-card-grid-cols-2 .wm-guest-grid { grid-template-columns:repeat(2,1fr); }
.wm-card-grid-cols-3 .wm-guest-grid { grid-template-columns:repeat(3,1fr); }
.wm-card-grid-cols-4 .wm-guest-grid { grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px) { .wm-card-grid-cols-4 .wm-guest-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:768px)  { .wm-card-grid-cols-3 .wm-guest-grid,.wm-card-grid-cols-4 .wm-guest-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px)  { .wm-card-grid-cols-2 .wm-guest-grid,.wm-card-grid-cols-3 .wm-guest-grid,.wm-card-grid-cols-4 .wm-guest-grid{grid-template-columns:1fr} }

/* ════════════════════════════════════════════════════════════
   [wedding_wish_button] SHORTCODE
   ════════════════════════════════════════════════════════════ */
.wm-wish-btn-wrap { font-family:var(--wm-body); line-height:1; }
.wm-wish-btn { display:inline-flex; align-items:center; gap:9px; border-radius:50px; font-family:var(--wm-body); font-weight:700; letter-spacing:0.08em; cursor:pointer; border:none; transition:all 0.3s var(--wm-ease); position:relative; overflow:hidden; text-decoration:none; }
.wm-wish-btn-icon { flex-shrink:0; transition:transform 0.3s var(--wm-ease-spring); }
.wm-wish-btn:hover .wm-wish-btn-icon { transform:scale(1.2); }
.wm-wish-btn--sm { font-size:0.78rem; padding:10px 22px; }
.wm-wish-btn--md { font-size:0.88rem; padding:14px 32px; }
.wm-wish-btn--lg { font-size:1rem;    padding:18px 44px; }
.wm-wish-btn--rose    { background:linear-gradient(135deg,var(--wm-rose),var(--wm-rose-dark)); color:var(--wm-white); box-shadow:0 6px 24px rgba(194,103,122,0.35); }
.wm-wish-btn--rose:hover    { background:linear-gradient(135deg,var(--wm-rose-dark),var(--wm-rose-deep)); transform:translateY(-2px); box-shadow:0 10px 32px rgba(194,103,122,0.5); }
.wm-wish-btn--gold    { background:linear-gradient(135deg,var(--wm-gold),var(--wm-gold-dk)); color:var(--wm-white); box-shadow:0 6px 24px rgba(201,160,112,0.35); }
.wm-wish-btn--gold:hover    { transform:translateY(-2px); box-shadow:0 10px 32px rgba(201,160,112,0.5); }
.wm-wish-btn--outline { background:transparent; border:1.5px solid var(--wm-rose); color:var(--wm-rose-dark); }
.wm-wish-btn--outline:hover { background:var(--wm-blush); transform:translateY(-2px); }
.wm-wish-btn--dark    { background:var(--wm-rose-deep); color:var(--wm-gold-lt); border:1px solid rgba(201,160,112,0.25); }
.wm-wish-btn--dark:hover    { background:#3a0f1c; transform:translateY(-2px); box-shadow:0 8px 24px rgba(74,21,37,0.4); }
.wm-wish-btn--ghost   { background:rgba(194,103,122,0.08); color:var(--wm-rose-dark); border:1px solid rgba(194,103,122,0.2); }
.wm-wish-btn--ghost:hover   { background:var(--wm-blush2); border-color:var(--wm-rose); transform:translateY(-2px); }

/* ════════════════════════════════════════════════════════════
   GLOBAL ANIMATIONS
   ════════════════════════════════════════════════════════════ */
@keyframes wm-fade-up   { from{opacity:0;transform:translateY(28px)}  to{opacity:1;transform:translateY(0)} }
@keyframes wm-fade-down { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }

/* ════════════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .wm-hero-slider   { height:100svh; }
  .wm-slider-btn    { display:none; }
  .wm-slider-dots   { bottom:80px; }
  .wm-corner        { width:34px; height:34px; }
  .wm-corner-tl,.wm-corner-tr { top:14px; }
  .wm-corner-tl,.wm-corner-bl { left:14px; }
  .wm-corner-tr,.wm-corner-br { right:14px; }
  .wm-corner-bl,.wm-corner-br { bottom:14px; }
  .wm-ribbon-track  { padding:18px 14px; }
  .wm-ribbon-sep    { padding:0 14px; }
  .wm-wishes-section { padding:60px 0 60px; }
  .wm-guest-grid    { grid-template-columns:1fr; padding:0 16px; }
  .wm-popup-panel   { flex-direction:column; max-height:96svh; }
  .wm-popup-deco    { width:100%; min-height:190px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
  .wm-popup-deco-content { padding:24px 20px; }
  .wm-deco-rings    { width:64px; margin-bottom:14px; }
  .wm-deco-quote    { font-size:0.95rem; margin-bottom:14px; }
  .wm-deco-petals span { font-size:0.9rem; }
  .wm-popup-form-col { padding:32px 20px 28px; overflow-y:auto; flex:1; }
  .wm-lb-prev       { left:-38px; }
  .wm-lb-next       { right:-38px; }
  .wm-cta-banner-outer { padding:20px 16px 60px; }
  .wm-cta-banner-inner { padding:36px 24px; flex-direction:column; text-align:center; }
  .wm-hero-actions  { flex-direction:column; width:100%; }
  .wm-wish-trigger, .wm-scroll-cta { width:100%; justify-content:center; }
}

@media (max-width: 480px) {
  .wm-lb-prev,.wm-lb-next { display:none; }
  .wm-lightbox-close { top:-44px; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-slide,.wm-slide--active,.wm-slide--exit,.wm-guest-card,.wm-card-inner,.wm-popup-panel {
    animation-duration:0.01ms!important; transition-duration:0.01ms!important;
  }
}

@media (hover: none) {
  .wm-expand-btn { opacity:1; transform:scale(1); }
  .wm-card-love  { opacity:1; transform:scale(1) rotate(0); }
}