/* Frontend styles for ROI Calculator Walt Pro */
:root{ --slider-color:#0063a8; --result-color:#8bc34a; }

.roi-walt-pro-wrap{ max-width:920px; margin:20px auto; background:#fff; padding:22px; border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,0.06); font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
.roi-title{ margin:0 0 18px; font-size:18px; color:#222; }

.roi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center; }
.roi-control{ display:flex; flex-direction:column; }
.roi-label{ margin-bottom:8px; color:#111; font-weight:400; }
.roi-row-control{ display:flex; gap:12px; align-items:center; }
.roi-row-control .roi-slider{ flex:1; accent-color: var(--slider-color); height:6px; border-radius:4px; }
.roi-row-control .roi-number{ width:120px; padding:8px; border-radius:6px; border:1px solid #ddd; }

.roi-helper{ font-size:12px; color:#666; margin-top:6px; }

.roi-results-pro{ margin-top:22px; display:flex; gap:18px; }
.result-item{ flex:1; padding:20px; border-radius:8px; color:#fff; background:var(--result-color); box-shadow:0 2px 6px rgba(0,0,0,0.06); text-align:center; }
.result-title{ font-size:14px; opacity:0.95; margin-bottom:8px; }
.result-value{ font-size:32px; font-weight:700; }
.result-sub{ font-size:12px; opacity:0.9; margin-top:6px; }

.pdf-row{ margin-top:14px; text-align:right; }

@media (max-width:800px){
    .roi-grid{ grid-template-columns:1fr; }
    .roi-row-control{ flex-direction:column; align-items:stretch; }
    .roi-row-control .roi-number{ width:100%; }
    .roi-results-pro{ flex-direction:column; }
}