/* =========================================
   FX Tools - Bonus Calculator Specific CSS
   All selectors scoped under .fx-tool-wrap
   ========================================= */

/* --- Result Highlight --- */
.fx-tool-wrap .result-highlight{background:var(--primary-bg);border:1px solid var(--border-light);border-radius:6px;padding:20px 24px;margin-bottom:20px;color:var(--text)}
.fx-tool-wrap .result-highlight-label{font-size:12px;color:var(--text-sub);margin-bottom:4px}
.fx-tool-wrap .result-highlight-row{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px}
.fx-tool-wrap .result-highlight-amount{font-size:28px;font-weight:bold;line-height:1.2;color:var(--accent)}
.fx-tool-wrap .result-highlight-pct{font-size:14px;font-weight:bold;color:var(--accent)}
.fx-tool-wrap .result-highlight-sub{font-size:12px;color:var(--text-sub);margin-top:8px;line-height:1.5}
.fx-tool-wrap .result-highlight-compare{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.fx-tool-wrap .result-compare-item{flex:1;min-width:120px;background:var(--white);border:1px solid var(--border-light);border-radius:6px;padding:10px 12px}
.fx-tool-wrap .result-compare-label{font-size:10px;color:var(--text-light);margin-bottom:2px}
.fx-tool-wrap .result-compare-val{font-size:16px;font-weight:bold;line-height:1.3;color:var(--text)}
.fx-tool-wrap .result-compare-val.highlight{color:var(--accent)}
.fx-tool-wrap .result-zero-deposit{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;padding:8px 12px;margin-top:10px;font-size:12px;color:var(--accent);font-weight:bold;line-height:1.4}

/* --- Broker Card --- */
.fx-tool-wrap .broker-card{border:1px solid var(--border-light);border-radius:6px;padding:20px;margin-bottom:12px;position:relative;box-shadow:var(--shadow)}
.fx-tool-wrap .broker-card.rank-1{border:2px solid var(--primary);background:var(--primary-bg)}
.fx-tool-wrap .broker-card.rank-2,.fx-tool-wrap .broker-card.rank-3{border-left:3px solid var(--primary)}
.fx-tool-wrap .card-rank{position:absolute;top:12px;right:14px;font-size:11px;font-weight:bold;color:var(--text-light)}
.fx-tool-wrap .card-rank.rank-1st{color:var(--accent);font-size:13px}
.fx-tool-wrap .card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.fx-tool-wrap .card-broker{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fx-tool-wrap .card-broker img{width:80px;height:auto;object-fit:contain}
.fx-tool-wrap .card-broker-name{font-size:16px;font-weight:bold;color:var(--text)}
.fx-tool-wrap .recommend-badge{font-size:12px;font-weight:bold;color:var(--white);background:var(--primary);border-radius:3px;padding:2px 8px;line-height:1.4;display:inline-block;margin-bottom:4px}
.fx-tool-wrap .recommend-badge.rank-2nd,.fx-tool-wrap .recommend-badge.rank-3rd{background:var(--primary)}
.fx-tool-wrap .card-bonus-total{font-size:24px;font-weight:bold;color:var(--accent);white-space:nowrap}
.fx-tool-wrap .card-bonus-total.zero{color:var(--text-light);font-size:16px;font-weight:500}
.fx-tool-wrap .exclusive-tag{display:inline-block;font-size:11px;font-weight:bold;color:var(--white);background:#dc2626;border-radius:3px;padding:1px 6px;margin-left:8px;vertical-align:middle;line-height:1.4}

/* --- Bonus List --- */
.fx-tool-wrap .bonus-list{margin-bottom:14px}
.fx-tool-wrap .bonus-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg-alt);border-radius:6px;margin-bottom:4px}
.fx-tool-wrap .rank-1 .bonus-row{background:rgba(255,255,255,0.6)}
.fx-tool-wrap .bonus-row.exclusive-row{background:#fdf2f2;border-left:3px solid #dc2626;padding-left:9px}
.fx-tool-wrap .bonus-info{flex:1;min-width:0}
.fx-tool-wrap .bonus-name{font-size:13px;font-weight:bold;color:var(--text)}
.fx-tool-wrap .bonus-exclusive-label{display:inline-block;font-size:10px;font-weight:bold;color:var(--white);background:#dc2626;border-radius:2px;padding:1px 5px;margin-left:6px;vertical-align:middle;line-height:1.4}
.fx-tool-wrap .bonus-desc{font-size:11px;color:var(--text-light)}
.fx-tool-wrap .bonus-val{font-size:14px;font-weight:bold;color:var(--accent);white-space:nowrap;margin-left:12px}
.fx-tool-wrap .bonus-val.none{color:var(--text-light);font-weight:400}

/* --- Benefit Section --- */
.fx-tool-wrap .benefit-section{margin-bottom:14px}
.fx-tool-wrap .benefit-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.fx-tool-wrap .benefit-label{font-size:12px;color:var(--text-sub)}
.fx-tool-wrap .benefit-pct{font-size:18px;font-weight:bold;color:var(--accent)}
.fx-tool-wrap .benefit-pct.zero{font-size:14px;font-weight:500;color:var(--text-light)}
.fx-tool-wrap .benefit-text{font-size:12px;color:var(--text-sub);line-height:1.5;margin-bottom:6px}
.fx-tool-wrap .benefit-text strong{color:var(--text);font-weight:bold}
.fx-tool-wrap .benefit-bar-track{width:100%;height:8px;background:var(--bg-alt);border-radius:3px;overflow:hidden}
.fx-tool-wrap .rank-1 .benefit-bar-track{background:rgba(255,255,255,0.5)}
.fx-tool-wrap .benefit-bar-fill{height:100%;background:#16a34a;border-radius:3px;min-width:2px;transition:width .3s}

/* --- Zero Deposit Note & Card CTA --- */
.fx-tool-wrap .zero-deposit-note{font-size:11px;color:var(--link);font-weight:bold;margin-bottom:10px;text-decoration:none;display:block}
.fx-tool-wrap .zero-deposit-note:hover{text-decoration:underline}
.fx-tool-wrap .card-cta-btn{display:block;width:100%;padding:12px 16px;background:var(--primary);color:var(--white);font-family:inherit;font-size:13px;font-weight:bold;text-align:center;text-decoration:none;border:none;border-radius:80px;cursor:pointer;transition:background .15s ease;box-shadow:0 2px 8px rgba(69,108,28,.2);min-height:44px}
.fx-tool-wrap .card-cta-btn:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(69,108,28,.3);text-decoration:none}
.fx-tool-wrap .card-cta{display:block;text-align:right;font-size:13px;color:var(--link);text-decoration:none;font-weight:bold}
.fx-tool-wrap .card-cta:hover{text-decoration:underline}
.fx-tool-wrap .badge-limited{display:inline-block;font-size:10px;font-weight:bold;color:var(--white);background:#dc2626;border-radius:2px;padding:2px 6px;line-height:1.3;vertical-align:middle;margin-left:6px}

/* --- More Section / Toggle --- */
.fx-tool-wrap .more-section{display:none}
.fx-tool-wrap .more-section.show{display:block}
.fx-tool-wrap .toggle-more-wrap{text-align:center;margin-bottom:20px}
.fx-tool-wrap .toggle-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 .toggle-more-btn:hover{background:var(--primary);color:var(--white)}

/* --- Bottom CTA Section --- */
.fx-tool-wrap .bottom-cta-section{border:2px solid var(--primary);border-radius:6px;overflow:hidden;margin-bottom:20px}
.fx-tool-wrap .bottom-cta-header{background:var(--primary);padding:12px 20px;text-align:center}
.fx-tool-wrap .bottom-cta-header-text{font-size:14px;font-weight:bold;color:var(--white)}
.fx-tool-wrap .bottom-cta-body{padding:20px;background:var(--white)}
.fx-tool-wrap .bottom-cta-broker{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px}
.fx-tool-wrap .bottom-cta-logo{width:64px;height:auto;object-fit:contain}
.fx-tool-wrap .bottom-cta-info{text-align:center}
.fx-tool-wrap .bottom-cta-name{font-size:16px;font-weight:bold;color:var(--text);margin-bottom:2px}
.fx-tool-wrap .bottom-cta-bonus{font-size:20px;font-weight:bold;color:var(--accent)}
.fx-tool-wrap .bottom-cta-merits{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.fx-tool-wrap .bottom-cta-merit{font-size:12px;font-weight:bold;color:var(--text);background:var(--primary-bg);border:1px solid var(--border-light);border-radius:6px;padding:4px 10px;line-height:1.3}
.fx-tool-wrap .bottom-cta-buttons{display:flex;gap:8px}
.fx-tool-wrap .bottom-cta-buttons .btn-cta{flex:1}
.fx-tool-wrap .bottom-cta-note{text-align:center;font-size:11px;color:var(--text-light);margin-top:10px}

/* --- Responsive (max-width: 768px) --- */
@media(max-width:768px){
  .fx-tool-wrap .card-header{flex-direction:column;align-items:flex-start}
  .fx-tool-wrap .card-bonus-total{font-size:22px}
  .fx-tool-wrap .broker-card{padding:16px}
  .fx-tool-wrap .result-highlight-amount{font-size:24px}
  .fx-tool-wrap .result-highlight{padding:16px 18px}
}