/* ==========================================================================
   Spread Simulator – spread-specific styles
   All selectors scoped under .fx-tool-wrap
   ========================================================================== */

/* --- Summary Box --- */
.fx-tool-wrap .summary-box{background:var(--primary-bg);border-left:3px solid var(--primary);border-radius:0 4px 4px 0;padding:14px 16px;margin-bottom:20px;font-size:14px;line-height:1.8}
.fx-tool-wrap .summary-box strong{font-weight:bold;color:#c0392b}
.fx-tool-wrap .summary-box .summary-action{display:block;font-size:13px;color:var(--text-sub);margin-top:4px}

/* --- Result Table --- */
.fx-tool-wrap .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:20px}
.fx-tool-wrap .result-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.fx-tool-wrap .result-table th{background:var(--bg-alt);font-weight:bold;text-align:center;padding:10px 12px;border:1px solid var(--border-light);white-space:nowrap;font-size:13px;color:var(--text-sub)}
.fx-tool-wrap .result-table td{padding:10px 12px;border:1px solid var(--border-light);vertical-align:middle;text-align:center}
.fx-tool-wrap .rank-cell{font-weight:bold;color:var(--text-sub);width:36px}
.fx-tool-wrap .rank-1{background:var(--primary-bg);border-left:3px solid var(--primary)}
.fx-tool-wrap .rank-1 .rank-cell{color:var(--primary)}

/* --- Broker Cell --- */
.fx-tool-wrap .broker-cell{display:flex;flex-direction:column;align-items:center;gap:4px}
.fx-tool-wrap .broker-cell img{width:64px;height:auto;object-fit:contain;border-radius:4px}
.fx-tool-wrap .broker-cell span{font-size:12px;font-weight:bold;text-align:center;line-height:1.3}
.fx-tool-wrap .broker-name-link{font-size:12px;font-weight:bold;text-align:center;line-height:1.3;color:var(--link);text-decoration:none}
.fx-tool-wrap .broker-name-link:hover{text-decoration:underline}

/* --- Monthly Cost & Detail Link --- */
.fx-tool-wrap .monthly-cost{font-weight:bold;white-space:nowrap}
.fx-tool-wrap .detail-link{font-size:12px;color:var(--link);text-decoration:none;font-weight:bold;white-space:nowrap}
.fx-tool-wrap .detail-link:hover{text-decoration:underline}

/* --- Hidden Rows / Show All --- */
.fx-tool-wrap .hidden-row{display:none}
.fx-tool-wrap .show-all .hidden-row{display:table-row}

/* --- More Button --- */
.fx-tool-wrap .more-btn-wrap{text-align:center;margin-top:8px;margin-bottom:24px}
.fx-tool-wrap .more-btn{display:inline-block;font-size:13px;font-weight:bold;color:var(--primary);background:none;border:1px solid var(--primary);border-radius:80px;padding:8px 24px;cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease}
.fx-tool-wrap .more-btn:hover{background:var(--primary);color:var(--white)}

/* --- Bottom CTA Section --- */
.fx-tool-wrap .bottom-cta-section{background:var(--bg-alt);border-radius:6px;padding:20px;margin-bottom:20px;text-align:center}
.fx-tool-wrap .bottom-cta-title{font-size:15px;font-weight:bold;color:var(--text);margin-bottom:6px}
.fx-tool-wrap .bottom-cta-sub{font-size:12px;color:var(--text-sub);margin-bottom:14px;line-height:1.5}
.fx-tool-wrap .cta-note{font-size:11px;color:var(--text-light);margin-top:8px}

/* --- Responsive --- */
@media(max-width:768px){
  .fx-tool-wrap .result-table{font-size:12px}
  .fx-tool-wrap .result-table th,.fx-tool-wrap .result-table td{padding:8px 6px}
}