/* FlorMellow - Valentines Popup (2026)
   File: assets/campaigns/valentines-2026/valentines-popup.css */

:root{
  --fm-vday-burgundy:#6b1f2a;
  --fm-vday-burgundy-2:#8a2a36;
  --fm-vday-ivory:#fff8f0;
  --fm-vday-gold:#d7b56d;
  --fm-vday-shadow: 0 18px 70px rgba(0,0,0,.55);
}

/* lock scroll when popup open */
body.fm-vday-lock{
  overflow: hidden !important;
  height: 100%;
  touch-action: none;
}

/* overlay */
.fm-vday-overlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.5vw, 28px);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* modal card */
.fm-vday-modal{
  position: relative;
  width: min(1040px, 94vw);
  max-height: 92vh;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--fm-vday-shadow);
  background: #111;
  transform: translateY(6px);
  opacity: 0;
  animation: fmVdayIn .20s ease-out forwards;
}

@keyframes fmVdayIn{
  to { transform: translateY(0); opacity: 1; }
}

/* desktop variant */
.fm-vday-modal[data-variant="desktop"]{
  aspect-ratio: 16 / 9;
}

/* mobile variant */
.fm-vday-modal[data-variant="mobile"]{
  width: min(520px, 92vw);
  aspect-ratio: 3 / 5.3;
  border-radius: 30px;
}

/* background image layer */
.fm-vday-media{
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(1.03) contrast(1.02);
}

/* close button */
.fm-vday-close{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  background: rgba(30,30,30,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}
.fm-vday-close:hover{ background: rgba(30,30,30,.5); }
.fm-vday-close:active{ transform: scale(.98); }

/* content grid */
.fm-vday-content{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  pointer-events: none;
}

/* desktop content layout */
.fm-vday-modal[data-variant="desktop"] .fm-vday-content{
  grid-template-rows: 1fr auto;
  padding: clamp(18px, 2.2vw, 30px);
}

/* mobile content layout */
.fm-vday-modal[data-variant="mobile"] .fm-vday-content{
  grid-template-rows: 1fr auto;
  padding: 16px;
}

/* title block */
.fm-vday-titleblock{
  align-self: start;
  justify-self: end;
  width: min(620px, 74%);
  text-align: center;
  padding-top: clamp(6px, 2vh, 22px);
}

/* mobile: move title down (avoid face), keep it readable with a subtle scrim */
.fm-vday-modal[data-variant="mobile"] .fm-vday-titleblock{
  align-self: end;
  justify-self: center;
  width: 100%;
  margin-bottom: 170px; /* room for CTA panel */
  padding: 0 8px;
}

/* subtle scrim behind text ONLY on mobile */
.fm-vday-modal[data-variant="mobile"] .fm-vday-titleblock::before{
  content:"";
  display:block;
  width: min(420px, 92%);
  margin: 0 auto 10px;
  height: 170px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.10) 55%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.06) 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* typography */
.fm-vday-title{
  font-family: "Fraunces", "Playfair Display", "Georgia", serif;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--fm-vday-burgundy);
  text-shadow: 0 10px 24px rgba(0,0,0,.25);
  font-size: clamp(40px, 5.2vw, 80px);
  line-height: .95;

  /* ✅ premium outline (white stroke) */
  -webkit-text-stroke: 1.4px rgba(255,255,255,.92);
  paint-order: stroke fill;
}

/* fallback if stroke not supported */
@supports not (-webkit-text-stroke: 1px white){
  .fm-vday-title{
    text-shadow:
      -1px -1px 0 rgba(255,255,255,.90),
       1px -1px 0 rgba(255,255,255,.90),
      -1px  1px 0 rgba(255,255,255,.90),
       1px  1px 0 rgba(255,255,255,.90),
       0 10px 24px rgba(0,0,0,.25);
  }
}

.fm-vday-sub{
  margin-top: 6px;
  font-family: "Fraunces", "Playfair Display", "Georgia", serif;
  font-weight: 650;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 24px rgba(0,0,0,.42);
  font-size: clamp(22px, 3.1vw, 46px);
}

/* tag line */
.fm-vday-tag{
  margin-top: 10px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  text-shadow: 0 8px 18px rgba(0,0,0,.35);
}

/* gold ornament underline */
.fm-vday-orn{
  margin: 10px auto 0;
  width: min(340px, 62%);
  height: 20px;
  opacity: .98;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
}

/* CTA panel */
.fm-vday-cta{
  align-self: end;
  justify-self: end;
  pointer-events: auto;
  display: flex;
  gap: 14px;
  align-items: center;

  padding: 14px 14px;
  border-radius: 22px;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}

/* desktop position */
.fm-vday-modal[data-variant="desktop"] .fm-vday-cta{
  margin: 0 10px 10px 0;
}

/* mobile: full-width stacked */
.fm-vday-modal[data-variant="mobile"] .fm-vday-cta{
  width: calc(100% - 6px);
  justify-self: center;
  margin: 0 0 6px 0;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 16px;
}

/* buttons */
.fm-vday-btn{
  appearance: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  user-select: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 52px;
  padding: 0 22px;
  border-radius: 999px;

  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 16px;

  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.fm-vday-btn:active{ transform: translateY(1px) scale(.995); }

/* WhatsApp premium (cream + gold) */
.fm-vday-btn--wa{
  color: #2f241f;
  background: linear-gradient(180deg, #fff7ef 0%, #f1e2d6 100%);
  border: 1px solid rgba(215,181,109,.75);
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
}

/* whatsapp icon + dot */
.fm-vday-wa-ico{
  width: 22px;
  height: 22px;
  display: inline-block;
}

.fm-vday-btn--primary{
  color: var(--fm-vday-ivory);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--fm-vday-burgundy-2) 0%, var(--fm-vday-burgundy) 100%);
  border: 1px solid rgba(215,181,109,.78);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}

.fm-vday-btn:hover{
  filter: brightness(1.02);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}

/* mobile button widths */
.fm-vday-modal[data-variant="mobile"] .fm-vday-btn{
  width: 100%;
  height: 58px;
  font-size: 17px;
}

/* make close bigger on small screens */
@media (max-width: 520px){
  .fm-vday-close{
    width: 48px;
    height: 48px;
    border-radius: 16px;
    top: 12px;
    right: 12px;
  }
}