/* ===================================================================
   FLOWTRIG — roi-calc.css
   Floating ROI button (right edge) + popup calculator modal.
   Reusable: drop the markup anywhere; any [data-open-roi] opens it.
   =================================================================== */

.roi-fab{
  position:fixed; right:0; top:46%; z-index:280; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 14px; border-radius:13px 0 0 13px;
  background:var(--g-btn2); color:#fff;
  font-size:13px; font-weight:700; writing-mode:vertical-rl; text-orientation:mixed;
  box-shadow:-8px 10px 28px -12px rgba(43,232,129,.7); cursor:pointer;
  transition:padding .2s, box-shadow .2s;
}
.roi-fab .ic{ writing-mode:horizontal-tb; display:inline-flex; }
.roi-fab .ic svg{ width:18px; height:18px; }
.roi-fab:hover{ padding-right:18px; box-shadow:-10px 14px 34px -12px rgba(43,232,129,.85); }
@media(max-width:720px){ .roi-fab{ top:auto; bottom:140px; transform:none; writing-mode:horizontal-tb; border-radius:13px 0 0 13px; padding:10px 13px; } .roi-fab span.lbl{ display:none; } }

.roi-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .35s; }
.roi-overlay.open{ opacity:1; pointer-events:auto; }
.roi-scrim{ position:absolute; inset:0; background:rgba(4,10,7,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
[data-theme="light"] .roi-scrim{ background:rgba(16,40,28,.4); }
.roi-modal{ position:relative; z-index:2; width:min(880px,100%); max-height:92vh; overflow:hidden; border-radius:24px; border:1px solid var(--line); background:var(--surface); box-shadow:0 40px 90px -30px rgba(0,0,0,.7); display:grid; grid-template-columns:1fr 1fr; transform:translateY(18px) scale(.98); opacity:0; transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.roi-overlay.open .roi-modal{ transform:none; opacity:1; }
@media(max-width:760px){ .roi-modal{ grid-template-columns:1fr; max-height:94vh; overflow-y:auto; } }

.roi-inputs{ padding:26px 26px 28px; }
.roi-head h4{ font-family:var(--font-d); font-size:21px; font-weight:600; letter-spacing:-.02em; margin:0; }
.roi-head p{ font-size:12.5px; color:var(--tx-mute); margin:6px 0 18px; }
.roi-row{ margin-bottom:18px; }
.roi-row .lab{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:600; color:var(--tx-soft); margin-bottom:9px; }
.roi-row .lab .val{ font-family:var(--font-m); color:var(--neon); font-size:12.5px; }
.roi-rate{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:10.5px; color:var(--tx-mute); margin-top:7px; }
.roi-rate b{ color:var(--tx-soft); font-family:var(--font-m); font-weight:600; white-space:nowrap; }
.roi-free{ font-size:11.5px; color:var(--neon); background:var(--green-soft); border:1px solid rgba(43,232,129,.2); border-radius:10px; padding:9px 12px; margin-top:4px; }
.roi-free b{ font-weight:700; }
.roi-note{ display:flex; gap:9px; align-items:flex-start; font-size:11px; line-height:1.5; color:#9FD9B8; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:11px 12px; margin-top:16px; position:relative; z-index:1; }
.roi-note svg{ width:15px; height:15px; flex:0 0 15px; color:var(--neon); margin-top:1px; }
.roi-note b{ color:#fff; font-weight:600; }
.roi-range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:5px; background:var(--surface-3); outline:none; }
.roi-range::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--g-a160); cursor:pointer; box-shadow:0 3px 10px -3px rgba(43,232,129,.8); border:2px solid var(--surface); }
.roi-range::-moz-range-thumb{ width:18px; height:18px; border:2px solid var(--surface); border-radius:50%; background:var(--green); cursor:pointer; }
.roi-seg{ display:flex; gap:6px; }
.roi-seg button{ flex:1; font-size:12px; padding:8px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); color:var(--tx-soft); font-weight:600; transition:all .18s; }
.roi-seg button.on{ background:var(--green-soft); border-color:rgba(43,232,129,.45); color:var(--neon); }

/* message-type pills (2×2) */
.roi-types{ display:flex; flex-wrap:wrap; gap:6px; }
.roi-types .roi-typebtn{ flex:1 1 calc(50% - 3px); font-size:12.5px; padding:9px 8px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--tx-soft); font-weight:600; cursor:pointer; transition:all .18s; }
.roi-types .roi-typebtn:hover{ border-color:rgba(43,232,129,.4); color:var(--tx); }
.roi-types .roi-typebtn.on{ background:var(--green-soft); border-color:rgba(43,232,129,.5); color:var(--neon); box-shadow:0 2px 12px -5px rgba(43,232,129,.6); }
/* selected type's cost card highlight (right panel) */
.roi-metric{ transition:border-color .18s, background .18s; }
.roi-metric.on{ border-color:rgba(43,232,129,.55); background:rgba(43,232,129,.13); }
.roi-vol{ font-size:11px; color:#7FBF9C; margin-top:12px; position:relative; z-index:1; }

.roi-out{ position:relative; padding:26px; color:#EAFBF1; background:radial-gradient(130% 90% at 100% 0%, #0F3E29, #07140E 70%), #07140E; display:flex; flex-direction:column; }
.roi-out::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(43,232,129,.16) 1px, transparent 1.5px); background-size:22px 22px; -webkit-mask-image:radial-gradient(circle at 90% 10%, #000, transparent 72%); mask-image:radial-gradient(circle at 90% 10%, #000, transparent 72%); }
.roi-out .rh{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--neon); position:relative; z-index:1; }
.roi-big{ font-family:var(--font-d); font-size:clamp(34px,5vw,46px); font-weight:600; letter-spacing:-.03em; margin:6px 0 2px; color:#fff; position:relative; z-index:1; }
.roi-big .cur{ font-size:24px; opacity:.7; }
.roi-sub{ font-size:12px; color:#9FD9B8; position:relative; z-index:1; }
.roi-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; position:relative; z-index:1; }
.roi-metric{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:13px; padding:12px; }
.roi-metric .l{ font-size:10.5px; color:#7FBF9C; }
.roi-metric .v{ font-family:var(--font-d); font-size:20px; font-weight:600; color:#fff; margin-top:3px; }
.roi-cta{ margin-top:auto; padding-top:18px; position:relative; z-index:1; }
.roi-cta a{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; border-radius:12px; background:#fff; color:#07140E; font-weight:700; font-size:14px; transition:transform .2s; }
.roi-cta a:hover{ transform:translateY(-2px); }
.roi-cta a svg{ width:16px; height:16px; }
.roi-close{ position:absolute; top:16px; right:16px; z-index:3; width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; }
.roi-close svg{ width:16px; height:16px; }
@media(prefers-reduced-motion: reduce){ .roi-overlay, .roi-modal, .roi-fab, .roi-cta a{ transition:none; } }