#rtfp-popup-root{position:fixed;z-index:99990;pointer-events:none}

/* ── Desktop: card, bottom-right corner ── */
.rtfp-card{
  position:fixed;
  bottom:20px;
  right:20px;
  left:auto;
  width:330px;
  background:#111827;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:0 12px 40px -8px rgba(0,0,0,.6);
  padding:.9rem 1rem 1rem;
  font-family:'DM Sans',system-ui,sans-serif;
  opacity:0;
  transform:translateY(16px) scale(.97);
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:auto;
}
.rtfp-card.rtfp-visible{opacity:1;transform:translateY(0) scale(1)}
.rtfp-card.rtfp-hiding{opacity:0;transform:translateY(10px) scale(.98)}

/* Content-swap animation - card itself never disappears during this,
   only the inner content briefly fades, so the popup stays put and is
   never gone unless the user explicitly closes it */
.rtfp-card.rtfp-swap-out .rtfp-card-inner,
.rtfp-card.rtfp-swap-out .rtfp-discount-row,
.rtfp-card.rtfp-swap-out .rtfp-btn-row{opacity:0;transition:opacity .2s ease}
.rtfp-card.rtfp-swap-in{animation:rtfpFadeIn .3s ease}
@keyframes rtfpFadeIn{from{opacity:.4}to{opacity:1}}

.rtfp-card.rtfp-cfd{border-left:3px solid #00D4A0}
.rtfp-card.rtfp-futures{border-left:3px solid #F59E0B}

.rtfp-close{
  position:absolute;top:8px;right:10px;
  background:none;border:none;color:#4E5E7A;
  font-size:1.1rem;line-height:1;cursor:pointer;
  padding:.2rem;transition:color .15s;
  z-index:2;
}
.rtfp-close:hover{color:#F0F4FF}

.rtfp-card-inner{display:flex;align-items:flex-start;gap:.7rem}
.rtfp-logo{width:38px;height:38px;border-radius:9px;object-fit:contain;background:#fff;flex-shrink:0;padding:3px;box-sizing:border-box}
.rtfp-logo-fallback{display:flex;align-items:center;justify-content:center;color:#00D4A0;font-weight:800;font-size:.8rem}
.rtfp-futures .rtfp-logo-fallback{color:#F59E0B}

.rtfp-recommended{
  display:inline-block;font-size:.6rem;font-weight:800;
  color:#00D4A0;background:rgba(0,212,160,.12);border:1px solid rgba(0,212,160,.3);
  padding:.12rem .5rem;border-radius:100px;margin-bottom:.3rem;
  text-transform:uppercase;letter-spacing:.03em;
}
.rtfp-futures .rtfp-recommended{color:#F59E0B;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3)}

.rtfp-card-name{font-weight:800;font-size:.85rem;color:#F0F4FF;font-family:'Syne',sans-serif;margin-bottom:.15rem}
.rtfp-card-msg{font-size:.78rem;color:#8B9BBD;line-height:1.4}

/* Discount code + copy button */
.rtfp-discount-row{margin-top:.65rem}
.rtfp-coupon-btn{
  display:inline-flex;align-items:center;gap:0;width:100%;
  background:rgba(0,212,160,.06);border:1.5px dashed rgba(0,212,160,.35);
  border-radius:8px;cursor:pointer;font-family:monospace;
  padding:.4rem .6rem;transition:all .15s;
}
.rtfp-futures .rtfp-coupon-btn{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.35)}
.rtfp-coupon-btn:hover{background:rgba(0,212,160,.14)}
.rtfp-futures .rtfp-coupon-btn:hover{background:rgba(245,158,11,.14)}
.rtfp-coupon-pct{font-weight:800;font-size:.75rem;color:#00D4A0;margin-right:.4rem}
.rtfp-futures .rtfp-coupon-pct{color:#F59E0B}
.rtfp-coupon-btn svg{margin-right:.3rem;color:#8B9BBD;flex-shrink:0}
.rtfp-coupon-code{font-weight:800;font-size:.75rem;color:#F0F4FF;letter-spacing:.04em;flex:1;text-align:left}
.rtfp-coupon-btn.rtfp-coupon-copied{background:rgba(0,212,160,.2)}

/* Dual buttons */
.rtfp-btn-row{display:flex;gap:.5rem;margin-top:.65rem}
.rtfp-btn{
  flex:1;text-align:center;padding:.5rem .4rem;border-radius:8px;
  font-weight:700;font-size:.74rem;text-decoration:none;
  transition:filter .15s,background .15s;
}
.rtfp-btn-ghost{background:rgba(255,255,255,.06);color:#C5CEE0;border:1px solid rgba(255,255,255,.14)}
.rtfp-btn-ghost:hover{background:rgba(255,255,255,.1);color:#F0F4FF}
.rtfp-cfd .rtfp-btn-solid{background:linear-gradient(135deg,#00F0B8,#00AD84);color:#07090F}
.rtfp-futures .rtfp-btn-solid{background:linear-gradient(135deg,#FBBF24,#F59E0B);color:#07090F}
.rtfp-btn-solid:hover{filter:brightness(1.06);color:#07090F}

/* ── Mobile: small bar at the bottom, not full-screen ── */
@media(max-width:640px){
  .rtfp-card{
    left:10px;right:10px;bottom:10px;
    width:auto;max-width:none;
    padding:.7rem .8rem .75rem;
    border-radius:12px;
  }
  .rtfp-card-inner{align-items:center}
  .rtfp-logo{width:32px;height:32px}
  .rtfp-card-name{font-size:.78rem}
  .rtfp-card-msg{font-size:.72rem;line-height:1.35}
  .rtfp-discount-row{margin-top:.5rem}
  .rtfp-btn-row{margin-top:.5rem}
  .rtfp-btn{padding:.42rem .3rem;font-size:.7rem}
  .rtfp-close{top:6px;right:8px;font-size:1rem}
}