/* VitaFix — Discount popup (TrimFix Drops / ENERgen+ Strips only) */
.vf-dp-overlay {
  position: fixed; inset: 0; background: rgba(7,30,38,0.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.vf-dp-overlay.vf-dp-visible { opacity: 1; pointer-events: auto; }

.vf-dp-modal {
  background: #ffffff; border-radius: 20px; max-width: 420px; width: 100%;
  padding: 36px 32px 32px; text-align: center; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  transform: translateY(16px) scale(0.97); transition: transform 0.25s ease;
  font-family: 'Inter', sans-serif;
}
.vf-dp-overlay.vf-dp-visible .vf-dp-modal { transform: translateY(0) scale(1); }

.vf-dp-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 1.3rem; line-height: 1; color: #6b7c82; cursor: pointer; padding: 4px;
}
.vf-dp-close:hover { color: #071e26; }

.vf-dp-badge {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(78,205,196,0.12);
  border: 1px solid rgba(78,205,196,0.35); color: #0a3d4a;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 20px; margin-bottom: 16px;
}

.vf-dp-modal h2 {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.55rem;
  color: #071e26; line-height: 1.2; margin-bottom: 10px;
}
.vf-dp-modal h2 span { color: #ff6b4a; }

.vf-dp-modal p.vf-dp-sub {
  font-size: 0.92rem; color: #4a5a60; line-height: 1.55; margin-bottom: 22px;
}

.vf-dp-code {
  display: inline-block; background: #071e26; color: #ffffff;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.1rem;
  letter-spacing: 0.08em; padding: 10px 22px; border-radius: 10px;
  border: 2px dashed #4ecdc4; margin-bottom: 20px;
}

.vf-dp-cta {
  display: block; width: 100%; background: #ff6b4a; color: #ffffff;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1rem;
  padding: 15px 20px; border-radius: 10px; text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.vf-dp-cta:hover { background: #d94e30; transform: translateY(-1px); }

.vf-dp-dismiss {
  display: inline-block; margin-top: 14px; font-size: 0.8rem; color: #6b7c82;
  text-decoration: underline; cursor: pointer; background: none; border: none;
}
.vf-dp-dismiss:hover { color: #071e26; }

@media (max-width: 480px) {
  .vf-dp-modal { padding: 30px 22px 26px; border-radius: 16px; }
  .vf-dp-modal h2 { font-size: 1.32rem; }
}