@import url('/tools/position-size-v3-preview/preview-overrides.css');

/* Forex Lot Size Calculator v3 overrides */
.forex-hero{
  opacity:1!important;
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 0 24px rgba(18,124,255,.3))!important;
  mask-image:linear-gradient(to right,transparent 0%,#000 16%,#000 100%)!important;
}

.validation-note{transition:border-color .16s ease,background .16s ease,color .16s ease}
.validation-note.is-valid{color:#c7dbf1!important;background:rgba(4,23,43,.34)!important;border-color:rgba(94,159,228,.38)!important}
.validation-note.is-error{color:#ffe0d5!important;background:rgba(111,38,16,.24)!important;border-color:rgba(255,106,43,.5)!important}
.validation-note.is-error svg{color:#ff8a5b!important}
.validation-note.is-valid svg{color:#58adff!important}

.result-panel.is-invalid .primary-result strong,
.result-panel.is-invalid .equation-row strong,
.result-panel.is-invalid .secondary-card strong{color:#8ea2bd!important}

.forex-input-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.contract-grid{grid-template-columns:minmax(0,calc((100% - 12px)/2))}
.contract-grid .field small{max-width:680px}
.lot-breakdown{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.lot-breakdown article{padding:12px;border:1px solid rgba(77,151,235,.2);border-radius:10px;background:rgba(4,24,52,.42)}
.lot-breakdown small{display:block;color:#9fb3cc;font-size:11px}
.lot-breakdown strong{display:block;margin-top:4px;color:#fff;font-size:15px}

/* Keep equation labels, values and symbols aligned in clear rows. */
.equation-row{align-items:start!important}
.equation-row>div{display:grid;grid-template-rows:18px 24px 16px;align-items:start}
.equation-row>div>small{grid-row:1;margin:0!important;align-self:start}
.equation-row>div>strong{grid-row:2;margin:0!important;align-self:start;line-height:24px}
.equation-row .equation-detail{grid-row:3;display:block;margin:0;overflow:hidden;color:#9bb7da;font-size:10px;line-height:16px;text-overflow:ellipsis;white-space:nowrap}
.equation-row .equation-symbol{align-self:start;margin-top:18px;height:24px}

@media(max-width:768px){
  .forex-hero{width:84%!important;right:-22%!important;opacity:.52!important;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.36) 24%,#000 100%)!important}
  .forex-input-grid,.contract-grid,.lot-breakdown{grid-template-columns:1fr}
}