/* ================================================================
   PFA Trading Tools — standalone plugin CSS
   ================================================================ */

/* ── Wrapper ── */
.pfa-tool-wrap { max-width: 900px; margin: 0 auto; padding: 48px 0; }
.pfa-tool-wrap + .pfa-tool-wrap { border-top: 1px solid rgba(255,255,255,.06); }

/* ── Head ── */
.pfa-tool-head { text-align: center; margin-bottom: 28px; }
.pfa-tool-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #F4B400; border: 1px solid rgba(244,180,0,.35);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 14px;
  font-family: 'Inter', sans-serif;
}
.pfa-tool-head h2 {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 700;
  color: #E8ECF4; margin: 6px 0 0; line-height: 1.25;
}
.pfa-tool-desc { color: #8A9BB8; font-size: .95rem; max-width: 540px; margin: 10px auto 0; line-height: 1.6; }
.pfa-hl { color: #F4B400; }

/* ── Calculator grid ── */
.pfa-calc {
  background: #111C2E; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 32px;
}
@media (max-width: 820px) { .pfa-calc { grid-template-columns: 1fr; } }

/* ── Labels ── */
.pfa-label {
  display: block; font-weight: 600; font-size: .9rem; color: #E8ECF4;
  margin: 18px 0 6px; font-family: 'Inter', sans-serif;
}
.pfa-label:first-child { margin-top: 0; }
.pfa-sub2 { display: block; font-weight: 400; color: #8A9BB8; font-size: .78rem; margin-top: 2px; }

/* ── Inputs ── */
.pfa-input {
  display: block; width: 100%; background: #0A1628; border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; color: #E8ECF4; padding: 12px 14px; font: 600 1rem 'Inter', sans-serif; margin-top: 6px;
  box-sizing: border-box;
}
.pfa-input:focus { outline: none; border-color: #F4B400; }
select.pfa-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A9BB8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer;
}
select.pfa-input option { background: #0A1628; color: #E8ECF4; }

/* ── Range slider ── */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 999px; background: rgba(255,255,255,.12); outline: none;
  margin: 18px 0 6px; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px;
  border-radius: 50%; background: #F4B400; border: 3px solid #0A1628;
  box-shadow: 0 0 0 1px #F4B400; cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #F4B400;
  border: 3px solid #0A1628; box-shadow: 0 0 0 1px #F4B400; cursor: pointer;
}
.pfa-range-labels { display: flex; justify-content: space-between; font-size: .85rem; color: #E8ECF4; font-weight: 600; }
.pfa-preset-note { color: #8A9BB8; font-size: .72rem; margin-left: 4px; }

/* ── Pill buttons ── */
.pfa-size-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pfa-size-pill {
  background: transparent; border: 1px solid rgba(255,255,255,.08); color: #8A9BB8;
  border-radius: 999px; padding: 6px 16px; cursor: pointer; transition: all .15s ease;
  font: 600 .85rem 'Inter', sans-serif;
}
.pfa-size-pill.active, .pfa-size-pill:hover { background-color: #1E5BA8; border-color: #1E5BA8; color: #fff; }

/* ── Result panel ── */
.pfa-calc-result { display: flex; flex-direction: column; justify-content: center; }
.pfa-calc-big {
  font-family: 'Space Grotesk', sans-serif; font-size: 3.4rem; font-weight: 800;
  color: #F4B400; line-height: 1;
}
.pfa-calc-big .pfa-pct-unit { font-size: 1.6rem; color: #8A9BB8; font-weight: 600; }
.pfa-calc-status {
  display: inline-block; align-self: flex-start; margin-top: 12px; font-size: .78rem;
  font-weight: 700; text-transform: uppercase; padding: 5px 13px; border-radius: 999px;
}
.pfa-calc-status.ok { background: rgba(103,198,124,.12); color: #67c67c; border: 1px solid rgba(103,198,124,.35); }
.pfa-calc-status.warn { background: rgba(244,180,0,.12); color: #F4B400; border: 1px solid rgba(244,180,0,.35); }
.pfa-calc-status.edge { background: rgba(232,86,79,.12); color: #e0564f; border: 1px solid rgba(232,86,79,.4); }

/* ── Progress bar ── */
.pfa-calc-bar { position: relative; height: 10px; background: rgba(255,255,255,.06); border-radius: 999px; margin-top: 22px; }
.pfa-calc-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #F4B400; border-radius: 999px; transition: width .2s ease; }
.pfa-calc-bar-fill.over { background: #e0564f; }
.pfa-calc-bar-scale { display: flex; justify-content: space-between; color: #8A9BB8; font-size: .72rem; margin-top: 6px; }

/* ── Rows & tips ── */
.pfa-result-why { color: #8A9BB8; font-size: .85rem; margin-top: 6px; }
.pfa-result-rows { margin-top: 18px; }
.pfa-result-row {
  display: flex; justify-content: space-between; gap: 14px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08); font-size: .9rem;
}
.pfa-result-row span:first-child { color: #8A9BB8; }
.pfa-result-row span:last-child { color: #E8ECF4; font-weight: 600; }
.pfa-result-row.highlight span:last-child { color: #F4B400; font-weight: 800; }
.pfa-result-note { color: #8A9BB8; font-size: .8rem; margin-top: 16px; line-height: 1.6; }
.pfa-result-note b { color: #F4B400; }
.pfa-calc-tip { color: #8A9BB8; font-size: .9rem; margin-top: 16px; line-height: 1.7; }
.pfa-calc-tip b { color: #E8ECF4; }

/* ── Quiz ── */
.pfa-tool-card { background: #111C2E; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 28px 24px; }
.pfa-quiz-card { display: block; }
.pfa-quiz-progress { height: 6px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin-bottom: 26px; }
.pfa-quiz-progress-fill { height: 100%; background: #F4B400; border-radius: 999px; transition: width .25s ease; }
.pfa-quiz-q-count { color: #8A9BB8; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pfa-quiz-question { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 700; margin: 8px 0 22px; color: #E8ECF4; }
.pfa-quiz-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; }
.pfa-quiz-opt {
  text-align: left; background: #0A1628; border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; color: #E8ECF4; padding: 14px 18px; cursor: pointer;
  transition: all .15s ease; font: 500 .95rem 'Inter', sans-serif;
}
.pfa-quiz-opt:hover { border-color: #F4B400; transform: translateY(-2px); }
.pfa-quiz-nav { display: flex; justify-content: space-between; margin-top: 24px; gap: 12px; }
.pfa-quiz-restart {
  background: transparent; border: 1px solid rgba(255,255,255,.08); color: #8A9BB8;
  border-radius: 6px; padding: 10px 18px; cursor: pointer;
  font: 600 .85rem 'Inter', sans-serif; transition: all .15s ease;
}
.pfa-quiz-restart:hover { color: #E8ECF4; border-color: #F4B400; }
.pfa-quiz-result-head { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; color: #E8ECF4; }
.pfa-quiz-result-head .pfa-pct { color: #F4B400; }
.pfa-quiz-match { font-size: .85rem; color: #8A9BB8; margin-bottom: 22px; }
.pfa-quiz-reco {
  display: flex; gap: 18px; align-items: center; background: rgba(10,22,40,.6);
  border: 1px solid rgba(244,180,0,.35); border-radius: 12px; padding: 22px; margin-bottom: 14px;
}
.pfa-quiz-reco .pfa-big-logo {
  width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 1.1rem; color: #0A1628; flex-shrink: 0;
}
.pfa-quiz-reco h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; color: #E8ECF4; }
.pfa-quiz-reco .pfa-verdict { color: #8A9BB8; font-size: .9rem; margin-top: 4px; line-height: 1.6; }
.pfa-quiz-reco-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ── CTA button ── */
.pfa-btn {
  display: inline-block; background: #F4B400; color: #0A1628; font-weight: 700;
  border: none; border-radius: 6px; padding: 13px 28px; cursor: pointer;
  text-decoration: none; font-size: 16px; transition: background .2s ease, transform .15s ease;
}
.pfa-btn:hover { background: #FFC92E; transform: translateY(-2px); color: #0A1628; }

/* ── Consistency Rule Calculator ── */
.pfa-cr-panel { display: flex; flex-direction: column; gap: 6px; }
.pfa-cr-days { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.pfa-cr-day {
  display: flex; gap: 10px; align-items: center;
  background: rgba(10,22,40,.5); border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; padding: 6px 8px 6px 12px; transition: border-color .15s ease;
}
.pfa-cr-day:focus-within { border-color: rgba(244,180,0,.5); }
.pfa-cr-daynum {
  flex-shrink: 0; min-width: 52px; font: 700 .72rem 'Space Grotesk', sans-serif;
  color: #8A9BB8; letter-spacing: .03em; text-transform: uppercase;
}
.pfa-cr-daynum b { color: #F4B400; font-weight: 700; }
.pfa-cr-day input {
  flex: 1; background: #0A1628; border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; color: #E8ECF4; padding: 11px 14px; font: 600 1rem 'Inter', sans-serif;
  box-sizing: border-box; width: 100%; transition: border-color .15s ease;
}
.pfa-cr-day input:focus { outline: none; border-color: #F4B400; }
.pfa-cr-del {
  flex-shrink: 0; width: 34px; height: 38px; background: transparent;
  border: 1px solid rgba(232,86,79,.4); color: #e0564f; border-radius: 8px;
  cursor: pointer; font-size: 1.15rem; line-height: 1; transition: all .15s ease;
}
.pfa-cr-del:hover { background: rgba(232,86,79,.14); border-color: #e0564f; }
.pfa-cr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 1px dashed rgba(244,180,0,.5); color: #F4B400;
  border-radius: 8px; padding: 9px 16px; cursor: pointer; font: 600 .85rem 'Inter', sans-serif;
  transition: all .15s ease;
}
.pfa-cr-btn:hover { background: rgba(244,180,0,.1); border-style: solid; }
.pfa-cr-actions { display: flex; gap: 8px; margin-top: 4px; }
.pfa-cr-reset { border-color: rgba(255,255,255,.14); color: #8A9BB8; }
.pfa-cr-reset:hover { border-color: rgba(255,255,255,.3); color: #E8ECF4; background: rgba(255,255,255,.05); }
.pfa-cr-export { border-style: solid; border-color: rgba(244,180,0,.35); }
.pfa-cr-export:hover { background: rgba(244,180,0,.12); }
.pfa-cr-capnum {
  font: 700 1rem 'Space Grotesk', sans-serif; color: #F4B400;
  background: rgba(244,180,0,.1); border: 1px solid rgba(244,180,0,.3);
  padding: 1px 9px; border-radius: 999px;
}
/* optional account-size input */
.pfa-cr-acctrow { display: flex; flex-direction: column; gap: 6px; }
.pfa-cr-acct {
  background: #0A1628; border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; color: #E8ECF4; padding: 11px 14px; font: 600 1rem 'Inter', sans-serif;
  box-sizing: border-box; width: 100%; transition: border-color .15s ease;
}
.pfa-cr-acct:focus { outline: none; border-color: #F4B400; }
.pfa-cr-acctnote { font-size: .74rem; color: #8A9BB8; line-height: 1.4; }
/* daily-loss-on-balance block */
.pfa-cr-dl { margin-top: 4px; padding: 12px 14px; border: 1px solid rgba(232,86,79,.22); border-radius: 10px; background: rgba(232,86,79,.05); }
.pfa-cr-dl .pfa-label { color: #e08782; }
.pfa-cr-result {
  background: linear-gradient(180deg, rgba(10,22,40,.25), rgba(10,22,40,.6));
  border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 26px 26px 24px;
}
/* gauge / threshold meter */
.pfa-cr-gauge { margin: 20px 0 4px; }
.pfa-cr-gauge-track {
  position: relative; height: 12px; margin-top: 12px;
  background: linear-gradient(90deg, rgba(103,198,124,.25), rgba(244,180,0,.28), rgba(232,86,79,.3));
  border-radius: 999px; overflow: visible;
}
.pfa-cr-gauge-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #4ec36b, #F4B400); border-radius: 999px;
  transition: width .25s ease;
}
.pfa-cr-gauge-fill.over { background: linear-gradient(90deg, #4ec36b, #F4B400, #e0564f); }
.pfa-cr-gauge-mark {
  position: absolute; top: -5px; bottom: -5px; width: 3px; background: #fff;
  border-radius: 3px; box-shadow: 0 0 0 2px rgba(255,255,255,.18); transition: left .2s ease;
}
.pfa-cr-gauge-scale { display: flex; justify-content: space-between; color: #8A9BB8; font-size: .72rem; margin-top: 8px; }
.pfa-cr-gauge-scale .pfa-cr-gauge-cap { color: #F4B400; font-weight: 700; }
.pfa-cr-gauge-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
/* stat chips */
.pfa-cr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.pfa-cr-stat {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 10px 12px; text-align: center;
}
.pfa-cr-stat .pfa-cr-stat-v { font: 700 1.05rem 'Space Grotesk', sans-serif; color: #E8ECF4; }
.pfa-cr-stat .pfa-cr-stat-k { font-size: .68rem; color: #8A9BB8; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
/* per-day mini bars */
.pfa-cr-bars { margin-top: 18px; }
.pfa-cr-bars-track { display: flex; align-items: flex-end; gap: 4px; height: 60px; margin-top: 8px; }
.pfa-cr-bar { position: relative; flex: 1; max-width: 46px; background: rgba(244,180,0,.7); border-radius: 4px 4px 0 0; min-height: 3px; transition: height .2s ease; }
.pfa-cr-bar.over { background: rgba(232,86,79,.85); }
.pfa-cr-bar.loss { background: rgba(232,86,79,.55); border-radius: 0 0 4px 4px; transform: translateY(4px); }
.pfa-cr-bar .pfa-cr-bar-val {
  position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  font-size: .6rem; color: #8A9BB8; white-space: nowrap; opacity: 0; transition: opacity .15s ease;
}
.pfa-cr-bar:hover .pfa-cr-bar-val { opacity: 1; }
.pfa-cr-bar-rowlabel { font-size: .68rem; color: #8A9BB8; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 560px) {
  .pfa-cr-stats { grid-template-columns: 1fr 1fr; }
  .pfa-cr-daynum { min-width: 44px; font-size: .64rem; }
}

/* ── Position Size Calculator ── */
.pfa-ps-panel { display: flex; flex-direction: column; gap: 6px; }
/* risk-mode segmented control (% vs fixed $) */
.pfa-ps-riskmode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 0; padding: 4px; background: rgba(10,22,40,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
.pfa-ps-rm {
  background: transparent; border: none; color: #8A9BB8; font: 600 .85rem 'Inter', sans-serif;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; transition: all .15s ease;
}
.pfa-ps-rm.active { background: #F4B400; color: #0A1628; }
.pfa-ps-riskwrap { display: flex; flex-direction: column; gap: 6px; }
/* pip-value pair presets */
.pfa-ps-pairpills { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.pfa-ps-pill {
  background: transparent; border: 1px solid rgba(255,255,255,.1); color: #E8ECF4;
  border-radius: 8px; padding: 7px 12px; cursor: pointer; transition: all .15s ease;
  font: 600 .78rem 'Inter', sans-serif;
}
.pfa-ps-pill:hover { border-color: rgba(244,180,0,.5); color: #F4B400; }
.pfa-ps-pill.active { background: rgba(244,180,0,.14); border-color: #F4B400; color: #F4B400; }

/* instrument (market) segmented selector */
.pfa-ps-market { display: flex; gap: 6px; margin: 0 0 4px; padding: 4px; background: rgba(10,22,40,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
.pfa-ps-mm {
  flex: 1; background: transparent; border: none; color: #8A9BB8; font: 600 .85rem 'Inter', sans-serif;
  padding: 9px 10px; border-radius: 7px; cursor: pointer; transition: all .15s ease;
}
.pfa-ps-mm.active { background: #F4B400; color: #0A1628; }
/* market group spacer */
.pfa-ps-mgroup { margin-top: 14px; }
.pfa-ps-mgroup .pfa-label:first-child { margin-top: 0; }

/* ── Pip Value Calculator (+ .pfa-ps-market/.pfa-ps-mm reused from Position Size) ── */
.pfa-pv-panel { display: flex; flex-direction: column; gap: 6px; }
.pfa-pv-mgroup { margin-top: 14px; }
.pfa-pv-mgroup .pfa-label:first-child { margin-top: 0; }

/* ── Profit Split Calculator ── */
.pfa-sp-addon {
  margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(244,180,0,.3);
  border-radius: 10px; background: rgba(244,180,0,.05);
}
.pfa-sp-addon .pfa-label:first-child { margin-top: 0; }

/* ── Daily Loss + Drawdown Simulator ── */
.pfa-dd-panel { display: flex; flex-direction: column; gap: 6px; }
/* static vs trailing drawdown segmented control (reuses .pfa-ps-mm look) */
.pfa-dd-dtype { display: flex; gap: 6px; margin: 0 0 4px; padding: 4px; background: rgba(10,22,40,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
/* gauge captions inside the result card */
.pfa-dd-gauge-label { display: block; font-size: .68rem; color: #8A9BB8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.pfa-cr-gauge .pfa-cr-stat-k { display: block; font-size: .68rem; color: #8A9BB8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .pfa-tool-wrap { padding: 36px 0; }
  .pfa-tool-head h2 { font-size: 1.4rem; }
  .pfa-calc { padding: 24px; gap: 24px; }
  .pfa-calc-big { font-size: 2.4rem; }
  .pfa-calc-big .pfa-pct-unit { font-size: 1.2rem; }
  .pfa-quiz-options { grid-template-columns: 1fr; }
}


/* ── PFA FORCE-WHITE input text (autofill + override safety) */
/* force white text + gold caret on ALL calculator inputs */
.pfa-tool-wrap input, .pfa-tool-wrap select, .pfa-tool-wrap textarea,
.pfa-tool-wrap input[type="text"], .pfa-tool-wrap input[type="number"], .pfa-tool-wrap input[type="tel"], .pfa-tool-wrap input[type="email"], .pfa-tool-wrap input[type="password"] {
  color: #E8ECF4 !important;
  -webkit-text-fill-color: #E8ECF4 !important;
  caret-color: #F4B400 !important;
}
/* reset browser autofill so it does not flip text black on a light bg */
.pfa-tool-wrap input:-webkit-autofill,
.pfa-tool-wrap input:-webkit-autofill:hover,
.pfa-tool-wrap input:-webkit-autofill:focus,
.pfa-tool-wrap select:-webkit-autofill,
.pfa-tool-wrap select:-webkit-autofill:hover,
.pfa-tool-wrap select:-webkit-autofill:focus,
.pfa-tool-wrap textarea:-webkit-autofill,
.pfa-tool-wrap textarea:-webkit-autofill:hover,
.pfa-tool-wrap textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #E8ECF4 !important;
  -webkit-box-shadow: 0 0 0 1000px #0A1628 inset !important;
  box-shadow: 0 0 0 1000px #0A1628 inset !important;
  transition: background-color 9999s ease-in-out 0s;
}
