:root{
  --bg1:#090814;
  --bg2:#140b1f;
  --bg3:#240f2c;

  --soft:#f2c6d4;
  --soft2:#ffd6e6;
  --muted: rgba(242,198,212,0.75);

  --card: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --shadow: 0 18px 60px rgba(0,0,0,0.35);
}

.romantic-bg{
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,105,180,0.16), transparent 60%),
              radial-gradient(900px 500px at 90% 30%, rgba(173,99,255,0.14), transparent 60%),
              linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
  color: white;
}

.glass-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.title-glow{
  font-weight: 800;
  letter-spacing: 0.2px;
  text-shadow: 0 0 18px rgba(255, 153, 204, 0.25);
}

.text-soft{ color: var(--soft2); }
.text-muted-soft{ color: var(--muted); }

.soft-input{
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: white !important;
  padding: 14px 14px;
  border-radius: 14px;
}

.badge-soft{
  background: rgba(255, 182, 193, 0.16);
  border: 1px solid rgba(255, 182, 193, 0.22);
  color: var(--soft2);
}

.btn-love{
  background: linear-gradient(135deg, rgba(255,105,180,0.92), rgba(173,99,255,0.88));
  border: none;
  color: white;
  box-shadow: 0 12px 30px rgba(255,105,180,0.18);
  border-radius: 16px;
}
.btn-love:hover{ filter: brightness(1.06); }

.btn-outline-love{
  border: 1px solid rgba(255, 182, 193, 0.55);
  color: var(--soft2);
  background: rgba(0,0,0,0.15);
  border-radius: 16px;
}
.btn-outline-love:hover{
  background: rgba(255, 182, 193, 0.12);
  border-color: rgba(255, 182, 193, 0.85);
  color: white;
}

.map-box{
  height: 360px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

/* Hero typography optimized for phone */
.hero-title{
  font-size: clamp(2.1rem, 5vw, 3.2rem);
}
.hero-sub{
  font-size: clamp(1.05rem, 2.8vw, 1.25rem);
}
.hero-card{
  position: relative;
}
.mini-tag{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 182, 193, 0.22);
  background: rgba(0,0,0,0.18);
  color: rgba(255, 240, 246, 0.92);
  font-weight: 600;
}

/* Accordion style (make it match the theme) */
.romantic-accordion .accordion-item{
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.romantic-acc-btn{
  background: transparent !important;
  color: rgba(255, 240, 246, 0.95) !important;
  border-radius: 18px !important;
}
.romantic-accordion .accordion-button::after{
  filter: invert(1);
  opacity: 0.8;
}
.romantic-accordion .accordion-button:focus{
  box-shadow: none;
}



/* Prevent content being hidden behind sticky buttons */
@media (max-width: 767.98px){
  .map-box{ height: 280px; }
}

/* Floating hearts background */
.hearts-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.floating-heart{
  position: absolute;
  bottom: -40px;
  opacity: 0.0;
  filter: drop-shadow(0 6px 18px rgba(255, 105, 180, 0.12));
  animation-name: floatUp;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

@keyframes floatUp{
  0%   { transform: translate3d(0, 0, 0) scale(0.95); opacity: 0; }
  10%  { opacity: 0.22; }
  50%  { opacity: 0.14; transform: translate3d(var(--drift), -52vh, 0) scale(1.05); }
  90%  { opacity: 0.18; }
  100% { transform: translate3d(calc(var(--drift) * -0.3), -105vh, 0) scale(1.08); opacity: 0; }
}

/* Keep your content above the hearts */
main, .container { position: relative; z-index: 1; }

.heart-burst{
  position: fixed;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  animation: burstPop 1.2s ease forwards;
  filter: drop-shadow(0 10px 22px rgba(255,105,180,0.18));
}

@keyframes burstPop{
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  15%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(calc(-50% + (var(--dx, 0px))), calc(-50% - 160px)) scale(1.2); }
}

@media (max-width: 575.98px){
  .hero-card{ padding: 20px !important; }
  .mini-tag{ font-size: 0.92rem; }
  .hero-sub{ line-height: 1.35; }
  .btn-love, .btn-outline-love{ width: 100%; }
  .story-line{ padding: 10px 12px; }
  .glass-card{ border-radius: 16px; }
}