/* ===== Massage Khiếm Thị Nhật Kha — components =====
   Floating social CTA widget (Phase 4) + promo popup (Phase 5).
   Loaded after styles.css; reuses tokens from :root in styles.css.
   z-index scale: header 100 · float-social 200 · promo overlay 1000.
   (Global prefers-reduced-motion reset lives in styles.css and disables
    all animation/transition automatically — no need to repeat per block.) */

/* ===== Floating social CTA (Phase 4) ===== */
.float-social{
  position:fixed;right:16px;bottom:16px;z-index:200;
  display:flex;flex-direction:column;gap:12px;
}
.float-social .fs-btn{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .2s ease,box-shadow .2s ease;
  animation:fs-pulse 3s ease-in-out infinite;
}
.float-social .fs-btn svg{width:28px;height:28px;display:block;fill:currentColor}
.float-social .fs-btn:hover{transform:scale(1.1);box-shadow:0 10px 24px rgba(0,0,0,.36)}
.float-social .fs-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* stagger so the buttons pulse in sequence */
.float-social .fs-btn:nth-child(2){animation-delay:.4s}
.float-social .fs-btn:nth-child(3){animation-delay:.8s}
/* brand colors */
.fs-zalo{background:#0068ff}
.fs-messenger{background:#0084ff}
.fs-facebook{background:#1877f2}
.fs-phone{background:var(--brown)}

/* attention pulse — loops every 3s; halo ring via box-shadow */
@keyframes fs-pulse{
  0%{box-shadow:0 6px 18px rgba(0,0,0,.28),0 0 0 0 rgba(176,141,87,.55)}
  60%{box-shadow:0 6px 18px rgba(0,0,0,.28),0 0 0 14px rgba(176,141,87,0)}
  100%{box-shadow:0 6px 18px rgba(0,0,0,.28),0 0 0 0 rgba(176,141,87,0)}
}
@media (max-width:860px){
  .float-social{right:12px;bottom:84px}
  .float-social .fs-btn{width:48px;height:48px}
}

/* ===== Promo popup (Phase 5) ===== */
.promo-overlay{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(20,16,12,.62);
  opacity:0;transition:opacity .3s ease;
}
.promo-overlay.is-open{opacity:1}
.promo-overlay[hidden]{display:none}
.promo-dialog{
  position:relative;width:100%;max-width:420px;background:var(--cream);
  border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.4);
  padding:34px 28px 28px;text-align:center;
  transform:translateY(16px) scale(.98);transition:transform .3s ease;
}
.promo-overlay.is-open .promo-dialog{transform:translateY(0) scale(1)}
.promo-close{
  position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;cursor:pointer;
  background:transparent;font-size:1.6rem;line-height:1;color:var(--ink-soft);border-radius:50%;
}
.promo-close:hover{background:rgba(0,0,0,.07);color:var(--ink)}
.promo-badge{
  display:inline-block;background:var(--gold);color:#fff;font-weight:700;
  font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 14px;border-radius:20px;margin-bottom:14px;
}
.promo-dialog h2{font-size:1.5rem;color:var(--brown);margin-bottom:8px;line-height:1.25}
.promo-deal-pct{color:var(--gold);font-weight:800;font-size:1.55em;white-space:nowrap;letter-spacing:.5px}
.promo-scarcity{display:inline-block;background:#c0392b;color:#fff;font-size:.72rem;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin:2px 0 6px}
.promo-dialog .promo-sub{color:var(--ink-soft);font-size:.95rem;margin-bottom:20px}
.promo-form{display:flex;flex-direction:column;gap:12px;text-align:left}
.promo-form label{font-weight:600;font-size:.85rem;color:var(--ink);margin-bottom:-6px}
.promo-form input{
  width:100%;padding:12px 14px;border:1.5px solid rgba(53,106,63,.25);border-radius:12px;
  font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink);
}
.promo-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,87,.18)}
.promo-form .promo-error{color:#c0392b;font-size:.82rem;min-height:1em;margin-top:-4px}
.promo-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.promo-submit{margin-top:6px;width:100%;background:var(--brown);color:#fff;border:0}
.promo-submit:hover{background:var(--ink)}
.promo-submit:disabled{opacity:.6;cursor:default}
.promo-success{display:none;padding:14px 0}
.promo-success h2{color:var(--brown);margin-bottom:8px}
.promo-success p{color:var(--ink-soft)}
.promo-dialog.is-done .promo-form,
.promo-dialog.is-done .promo-badge,
.promo-dialog.is-done > h2,
.promo-dialog.is-done > .promo-sub{display:none}
.promo-dialog.is-done .promo-success{display:block}
@media (max-width:480px){
  .promo-dialog{padding:30px 20px 24px}
  .promo-dialog h2{font-size:1.3rem}
}