sa-fee-calc-interactive v2026-06-15

<!-- WIDGET: SA INTERACTIVE FEE COMPARISON - BSG-contextualized 2026-06-15 -->
<div class="sa-fee-container">
<div class="sa-fee-header">
<h3>Attorney Fees</h3>
</div>
<div class="sa-fee-toggle-container">
<div class="sa-fee-toggle-group">
<button class="sa-toggle-btn active" id="btn-lit-fee250k1" onclick="saSetPhase_fee250k1('litigation')" type="button">Litigation</button>
<button class="sa-toggle-btn" id="btn-pre-fee250k1" onclick="saSetPhase_fee250k1('pre-litigation')" type="button">Pre-Litigation</button>
</div>
</div>
<div class="sa-litigation-subtext" id="sa-litigation-subtext-fee250k1">
        Most firms raise their fee percentage when your case goes to litigation. We never do.
    </div>
<div class="sa-fee-sliders">
<div class="sa-slider-box">
<label for="sa-fee-settlement-fee250k1">Total Settlement: <strong id="sa-fee-set-val-fee250k1">$250,000</strong></label>
<input id="sa-fee-settlement-fee250k1" max="1000000" min="10000" oninput="saCalcStandardFee_fee250k1()" step="10000" type="range" value="250000"/>
<div class="sa-slider-feet"><span>$10,000</span><span>$1,000,000</span></div>
</div>
</div>
<div class="sa-fee-comparison-grid">
<div class="sa-fee-card them-card">
<div class="sa-card-top text-center-red"><h4>THEM</h4></div>
<div class="sa-fee-row"><span>Total Settlement:</span><span class="sa-dark-text" id="comp-gross-fee250k1">$250,000</span></div>
<div class="sa-fee-row red-text"><span>Their Fee:</span><span id="comp-fee-fee250k1">-$112,500</span></div>
<hr class="sa-divider"/>
<div class="sa-fee-row total red-text"><span>Your Share:</span><span id="comp-takehome-fee250k1">$137,500</span></div>
<div class="sa-banner-saving-red">You PAY an extra <span id="ag-savings-diff-red-fee250k1">$25,000</span></div>
</div>
<div class="sa-fee-card us-card">
<div class="sa-card-top text-center-green"><h4>US</h4></div>
<div class="sa-fee-row"><span>Total Settlement:</span><span class="sa-dark-text" id="ag-gross-fee250k1">$250,000</span></div>
<div class="sa-fee-row"><span>Our Fee:</span><span class="sa-dark-text" id="ag-fee-fee250k1">-$87,500</span></div>
<hr class="sa-divider"/>
<div class="sa-fee-row total green-text"><span>Your Share:</span><span id="ag-takehome-fee250k1">$162,500</span></div>
<div class="sa-banner-saving-green">You KEEP an extra <span id="ag-savings-diff-green-fee250k1">$25,000</span></div>
</div>
</div>
<p class="sa-fee-disclaimer" style="color:#0B212D!important;">*Disclaimer: Calculations are for illustrative purposes. Actual recoveries depend on insurance policy limits and liability variables. Out-of-pocket medical bills and litigation expenses are typically deducted from the client’s share.</p>
</div>
<style>
.sa-main-content .sa-fee-context { font-family:'Poppins',sans-serif; font-size:17px; line-height:1.65; font-weight:500; color:#0B212D; text-align:center; max-width:720px; margin:12px auto 18px; }
.sa-fee-container { font-family: 'Poppins', sans-serif; color: #0B212D; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); padding: 25px; box-sizing: border-box; }
.sa-fee-header { text-align: center; margin-bottom: 25px; }
.sa-fee-header h3 { font-size: 1.75rem; margin: 0; color: #0B212D; font-weight: 600; text-align: center; }
.sa-fee-toggle-container { margin-bottom: 15px; }
.sa-fee-toggle-group { display: flex; gap: 10px; }
.sa-toggle-btn { flex: 1; background: #f1f5f9; border: 1px solid #cbd5e1; color: #475569; padding: 14px 10px; border-radius: 6px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; font-family: 'Poppins', sans-serif; text-align: center; }
.sa-toggle-btn.active { background: #0B212D; color: #ffffff; border-color: #0B212D; }
.sa-toggle-btn:hover:not(.active) { background: #e2e8f0; }
.sa-litigation-subtext { text-align: center; font-size: 0.9rem; font-weight: 500; color: #475569; margin-bottom: 25px; line-height: 1.4; }
.sa-fee-sliders { background: #f8fafc; padding: 20px; border-radius: 8px; margin-bottom: 25px; }
.sa-slider-box label { display: flex; justify-content: space-between; font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
.sa-slider-box input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; outline: none; margin: 4px 0 6px 0; padding: 0; --sa-pct: 24.24%; }
.sa-slider-box input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, #0B212D 0, #0B212D var(--sa-pct), #cbd5e1 var(--sa-pct), #cbd5e1 100%); border: none; }
.sa-slider-box input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: #cbd5e1; border: none; }
.sa-slider-box input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: #0B212D; border: none; }
.sa-slider-box input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 22px; width: 22px; border-radius: 50%; background: #0B212D; border: 3px solid #ffffff; box-shadow: 0 0 0 1px #0B212D, 0 2px 6px rgba(11,33,45,0.35); margin-top: -8px; cursor: pointer; transition: transform 0.15s ease; }
.sa-slider-box input[type="range"]::-webkit-slider-thumb:hover, .sa-slider-box input[type="range"]:focus::-webkit-slider-thumb { transform: scale(1.1); }
.sa-slider-box input[type="range"]::-moz-range-thumb { height: 22px; width: 22px; border-radius: 50%; background: #0B212D; border: 3px solid #ffffff; box-shadow: 0 0 0 1px #0B212D, 0 2px 6px rgba(11,33,45,0.35); cursor: pointer; transition: transform 0.15s ease; }
.sa-slider-box input[type="range"]::-moz-range-thumb:hover, .sa-slider-box input[type="range"]:focus::-moz-range-thumb { transform: scale(1.1); }
.sa-slider-feet { display: flex; justify-content: space-between; font-size: 0.75rem; color: #64748b; margin-top: 5px; font-weight: 500; }
.sa-fee-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sa-fee-card { border-radius: 8px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; background: #ffffff; box-sizing: border-box; }
.sa-fee-card.us-card { border: 2px solid #047857; }
.sa-fee-card.them-card { border: 2px solid #b91c1c; }
.sa-card-top { text-align: center; margin-bottom: 15px; }
.sa-card-top h4 { margin: 0; font-size: 1.5rem; font-weight: 600; text-align: center; }
.text-center-green h4 { color: #047857; }
.text-center-red h4 { color: #b91c1c; }
.sa-fee-row { display: flex; justify-content: space-between; font-size: 0.95rem; margin-bottom: 12px; font-weight: 500; gap: 8px; }
.sa-dark-text { color: #0B212D; font-weight: 600; }
.red-text { color: #b91c1c; font-weight: 600; }
.green-text { color: #047857; font-weight: 600; }
.sa-fee-row.total { font-size: 1.05rem; font-weight: 600; margin-top: 10px; }
.sa-divider { border: 0; border-top: 1px dashed #cbd5e1; margin: 10px 0; }
.sa-banner-saving-green { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; padding: 10px; border-radius: 6px; text-align: center; font-size: 0.9rem; font-weight: 600; margin-top: 15px; }
.sa-banner-saving-red { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; padding: 10px; border-radius: 6px; text-align: center; font-size: 0.9rem; font-weight: 600; margin-top: 15px; }
.sa-fee-disclaimer { font-size: 0.7rem; color: #94a3b8; line-height: 1.4; margin-top: 25px; text-align: center; font-weight: 500; }
@media (max-width: 768px) {
    .sa-fee-container { padding: 16px; margin: 1.25rem auto; max-width: none; width: calc(100vw - 32px); margin-left: 50%; transform: translateX(-50%); box-sizing: border-box; }
    .sa-fee-comparison-grid { grid-template-columns: 1fr; gap: 14px; }
    .sa-fee-card.us-card { order: 1; }
    .sa-fee-card.them-card { order: 2; }
    .sa-fee-toggle-group { flex-direction: column; gap: 8px; }
    .sa-fee-header h3 { font-size: 1.35rem; }
    .sa-fee-card { padding: 18px; }
    .sa-fee-row { font-size: 0.9rem; }
    .sa-fee-row.total { font-size: 1rem; }
    .sa-slider-box label { font-size: 0.9rem; }
    .sa-litigation-subtext { font-size: 0.85rem; padding: 0 4px; }
    .sa-banner-saving-green, .sa-banner-saving-red { font-size: 0.85rem; }
}


/* sa-live-qa-leftover-fix-20260603 */
.sa-page-wrapper a.sa-sidebar-btn,
.sa-page-wrapper .sa-sidebar-btn {
  background: #FFFFFF !important;
  color: #0B212D !important;
  border: 2px solid #D97706 !important;
  text-decoration: none !important;
}
.sa-page-wrapper a.sa-sidebar-btn:hover,
.sa-page-wrapper .sa-sidebar-btn:hover,
.sa-page-wrapper a.sa-sidebar-btn:focus,
.sa-page-wrapper .sa-sidebar-btn:focus {
  background: #0B212D !important;
  color: #FFFFFF !important;
  border-color: #0B212D !important;
}
.sa-page-wrapper .sa-fee-disclaimer,
.sa-page-wrapper .sal-asib-heading {
  color: #0B212D !important;
}
.sa-page-wrapper .sa-rb-stars,
.sa-page-wrapper .sa-mhr-stars,
.sa-page-wrapper .sa-rb-cite,
.sa-page-wrapper .sa-mhr-cite {
  color: #D97706 !important;
}
.sa-page-wrapper .sa-toc-wrap a,
.sa-page-wrapper details.sa-toc-wrap a,
.sa-page-wrapper .sa-toc-body a,
.sa-page-wrapper .sa-toc-list a {
  color: #0B212D !important;
  text-decoration-color: #D97706 !important;
}
</style>
<script>
(function(){
    var uid = 'fee250k1';
    var saCurrentPhase = 'litigation';
    window['saSetPhase_' + uid] = function(phase) {
        saCurrentPhase = phase;
        document.getElementById('btn-lit-' + uid).classList.toggle('active', phase === 'litigation');
        document.getElementById('btn-pre-' + uid).classList.toggle('active', phase === 'pre-litigation');
        document.getElementById('sa-litigation-subtext-' + uid).style.display = (phase === 'litigation') ? 'block' : 'none';
        window['saCalcStandardFee_' + uid]();
    };
    window['saCalcStandardFee_' + uid] = function() {
        var slider = document.getElementById('sa-fee-settlement-' + uid);
        var s = parseInt(slider.value);
        var min = parseInt(slider.min) || 10000;
        var max = parseInt(slider.max) || 1000000;
        var pct = ((s - min) / (max - min)) * 100;
        slider.style.setProperty('--sa-pct', pct + '%');
        document.getElementById('sa-fee-set-val-' + uid).textContent = '$' + s.toLocaleString();
        var agRate = 0.35;
        var agFee = s * agRate;
        var compRate = (saCurrentPhase === 'litigation') ? 0.45 : 0.40;
        var compFee = s * compRate;
        document.getElementById('ag-gross-' + uid).textContent = '$' + s.toLocaleString();
        document.getElementById('ag-fee-' + uid).textContent = '-$' + Math.round(agFee).toLocaleString();
        document.getElementById('ag-takehome-' + uid).textContent = '$' + Math.round(s - agFee).toLocaleString();
        document.getElementById('comp-gross-' + uid).textContent = '$' + s.toLocaleString();
        document.getElementById('comp-fee-' + uid).textContent = '-$' + Math.round(compFee).toLocaleString();
        document.getElementById('comp-takehome-' + uid).textContent = '$' + Math.round(s - compFee).toLocaleString();
        var extra = Math.max(0, compFee - agFee);
        document.getElementById('ag-savings-diff-green-' + uid).textContent = '$' + Math.round(extra).toLocaleString();
        document.getElementById('ag-savings-diff-red-' + uid).textContent = '$' + Math.round(extra).toLocaleString();
    };
    window['saCalcStandardFee_' + uid]();
})();
</script>

/* CSS is included in the stored HTML style block so the preview and copy-paste snippet stay self-contained. */