/* ============================================================================
   JugaadBox Moments - Love & Proposal Studio Styles
   Deep Velvet Wine, Crimson, Rose Gold & Starlight
   ============================================================================ */

:root {
  --love-bg: radial-gradient(ellipse at 50% 0%, #3d081b 0%, #1a030c 55%, #0a0104 100%);
  --love-ink: #fff7fa;
  --love-muted: #ffb3c6;
  --love-crimson: #e62a4d;
  --love-rose: #ff4d79;
  --love-gold: #ffd166;
  --love-card: rgba(26, 4, 12, 0.65);
  --love-card-border: rgba(255, 77, 121, 0.45);
  --love-shadow: 0 20px 50px rgba(230, 42, 77, 0.15);
}

body.moments-site-body {
  background: var(--love-bg) !important;
  color: var(--love-ink) !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

.moments-site-shell::before {
  background: rgba(230, 42, 77, 0.25) !important;
  filter: blur(100px) !important;
}

.moments-site-shell::after {
  background: rgba(255, 209, 102, 0.15) !important;
  filter: blur(110px) !important;
}

/* Nav */
.moments-brand-mark {
  font-size: 1.6rem;
  filter: drop-shadow(0 4px 12px rgba(255, 77, 121, 0.5));
}
.moments-brand strong { color: var(--love-ink) !important; }
.moments-brand small { color: var(--love-muted) !important; }
.moments-nav-links a { color: var(--love-muted) !important; font-weight: 600; }
.moments-nav-links a:hover { color: var(--love-rose) !important; }

/* Hero Section */
.moments-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 77, 121, 0.2), rgba(230, 42, 77, 0.1)) !important;
  color: #ff8fa3 !important;
  border: 1px solid rgba(255, 77, 121, 0.4) !important;
  font-size: .85rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem;
  box-shadow: 0 0 20px rgba(255, 77, 121, 0.2);
}

.moments-title--builder {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem) !important;
  line-height: 1.1 !important;
  color: var(--love-ink) !important;
  max-width: 14ch !important;
  text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.moments-description--builder {
  color: var(--love-muted) !important;
  font-size: 1.15rem !important;
  line-height: 1.75 !important;
  max-width: 36rem !important;
}

/* Buttons */
.moments-btn--primary, .btn--primary.om-btn-coral {
  background: linear-gradient(135deg, #e62a4d 0%, #ff4d79 100%) !important;
  box-shadow: 0 14px 34px rgba(230, 42, 77, 0.4) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}

.moments-btn--primary:hover, .btn--primary.om-btn-coral:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 18px 40px rgba(230, 42, 77, 0.5) !important;
}

.moments-btn--ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid var(--love-card-border) !important;
  color: var(--love-ink) !important;
  font-weight: 600 !important;
}

/* Phone Mockup for Love/Proposal */
.moments-preview-phone {
  background: #080103 !important;
  border: 4px solid #4a0d24 !important;
  box-shadow: 0 25px 60px rgba(230, 42, 77, 0.35), 0 0 0 1px rgba(255, 77, 121, 0.3) inset !important;
  border-radius: 36px !important;
  overflow: hidden;
}

.moments-preview-screen--love {
  background: radial-gradient(circle at 50% 25%, #6e0d2e 0%, #290310 60%, #0c0105 100%) !important;
  color: #fff !important;
  padding: 1.4rem 1.1rem !important;
  text-align: center;
}

.phone-mock-ring {
  font-size: 3.8rem;
  margin: .4rem 0;
  animation: floatRing 3s ease-in-out infinite;
  filter: drop-shadow(0 10px 20px rgba(255, 209, 102, 0.4));
}
@keyframes floatRing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.phone-mock-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.phone-mock-sub {
  font-size: .85rem;
  color: #ffb3c6;
  margin: .4rem 0 .9rem;
}

/* 5-Step Studio Cards */
.om-card, .builder-card {
  background: var(--love-card) !important;
  border: 1.5px solid var(--love-card-border) !important;
  border-radius: 26px !important;
  box-shadow: var(--love-shadow) !important;
  backdrop-filter: blur(20px) !important;
}

.om-card-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.85rem !important;
  color: var(--love-ink) !important;
  font-weight: 700 !important;
  margin-bottom: .4rem !important;
}

.om-card-sub { color: var(--love-muted) !important; font-size: 1.05rem !important; }

.form-group label { color: var(--love-ink) !important; }

.mo-input, .om-select, .om-balloon-input, .om-letter-textarea {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1.5px solid rgba(255, 77, 121, 0.35) !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-size: 1rem !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

.mo-input:focus, .om-balloon-input:focus, .om-letter-textarea:focus {
  border-color: var(--love-rose) !important;
  box-shadow: 0 0 0 4px rgba(255, 77, 121, 0.2) !important;
  outline: none !important;
}

.mo-input::placeholder, .om-letter-textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Feature Showcase Grid Below */
.bday-features-wrap { margin: 3.5rem auto 2rem; width: 100%; }
.bday-features-header { text-align: center; max-width: 38rem; margin: 0 auto 2.2rem; }
.bday-features-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 5vw, 3rem);
  color: var(--love-ink);
  line-height: 1.15;
}
.bday-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.bday-feature-card {
  background: var(--love-card);
  border: 1.5px solid var(--love-card-border);
  border-radius: 22px;
  padding: 1.8rem 1.6rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}
.bday-feature-icon { font-size: 2.6rem; margin-bottom: .8rem; display: inline-block; filter: drop-shadow(0 4px 12px rgba(255,77,121,0.4)); }
.bday-feature-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  color: var(--love-ink);
  margin-bottom: .4rem;
}
.bday-feature-card p {
  color: var(--love-muted);
  font-size: 1rem;
}
