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

/* Pip Value Calculator v3 overrides */
.pip-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}

.pair-control{display:grid;gap:7px}
.pip-position-grid{grid-template-columns:1.15fr .85fr 1fr}
.pip-move-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.conversion-grid{grid-template-columns:1fr 1.15fr .85fr;align-items:start}
.conversion-grid>.field{grid-template-rows:auto 42px auto auto auto;align-content:start}
.pip-breakdown{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.pip-breakdown article{padding:12px;border:1px solid rgba(77,151,235,.2);border-radius:10px;background:rgba(4,24,52,.42)}
.pip-breakdown small{display:block;color:#9fb3cc;font-size:11px}
.pip-breakdown strong{display:block;margin-top:4px;overflow:hidden;color:#fff;font-size:15px;text-overflow:ellipsis;white-space:nowrap}

/* Pip size is automatic by default and can be explicitly overridden. */
.field[for="pipSize"]>span:first-child{display:flex;align-items:center;gap:8px}
.field[for="pipSize"]>span:first-child::after{content:"Automatic";padding:2px 7px;border:1px solid rgba(88,173,255,.38);border-radius:999px;color:#8bc8ff;background:rgba(22,131,255,.1);font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.field[for="pipSize"].is-custom-pip-size>span:first-child::after{content:"Custom";color:#ffe0b8;border-color:rgba(255,172,74,.5);background:rgba(255,135,24,.12)}
#pipSize[readonly]{cursor:default;color:#09213f!important;background:rgba(219,232,245,.92)!important;border-color:rgba(142,180,220,.86)!important;box-shadow:none!important;font-weight:800}
.field[for="pipSize"].is-custom-pip-size #pipSize{color:#09213f!important;background:#f4f7fb!important;border-color:#69a8e8!important;box-shadow:0 0 0 2px rgba(22,131,255,.12)!important}
#pipSize[readonly]::-webkit-inner-spin-button,#pipSize[readonly]::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important}
#pipSize[readonly]{-moz-appearance:textfield!important;appearance:textfield!important}
.field[for="pipSize"].is-custom-pip-size #pipSize::-webkit-inner-spin-button,.field[for="pipSize"].is-custom-pip-size #pipSize::-webkit-outer-spin-button{-webkit-appearance:auto!important;margin:0!important}
.field[for="pipSize"].is-custom-pip-size #pipSize{-moz-appearance:auto!important;appearance:auto!important}
.pip-size-toggle{justify-self:start;min-height:28px;margin-top:7px;padding:0 10px;border:1px solid rgba(69,151,255,.46);border-radius:7px;color:#d9ebff;font-size:10px;font-weight:750;background:rgba(7,42,88,.72);cursor:pointer}
.pip-size-toggle:hover{border-color:rgba(105,180,255,.8);background:rgba(12,67,137,.82)}
.pip-size-toggle[aria-pressed="true"]{color:#ffe0b8;border-color:rgba(255,172,74,.55);background:rgba(121,61,11,.5)}

.rate-control-row{display:contents}
.rate-control-row input{width:100%;min-width:0;grid-row:2}
.rate-button,.comparison-refresh{min-height:35px;padding:0 13px;border:1px solid rgba(69,151,255,.5);border-radius:7px;color:#f4f8ff;font-size:11px;font-weight:750;white-space:nowrap;background:linear-gradient(145deg,rgba(14,72,148,.9),rgba(8,42,91,.9));cursor:pointer}
.rate-button{grid-row:4;justify-self:end;min-height:28px;padding:0 10px;font-size:10px}
.rate-button:hover,.comparison-refresh:hover{background:linear-gradient(145deg,rgba(22,105,210,.95),rgba(10,55,116,.95))}
.rate-button:disabled,.comparison-refresh:disabled{cursor:not-allowed;opacity:.5}
.rate-status{grid-row:5;min-height:0!important;color:#527093!important;line-height:1.35}
.rate-status.is-error{color:#a3462b!important}

.pip-comparison-card{margin-top:16px;padding:22px}
.pip-comparison-header{display:flex;justify-content:space-between;align-items:flex-start;gap:22px}
.pip-comparison-header h2{margin:4px 0 7px;color:#fff;font-size:21px}
.pip-comparison-header p{max-width:720px;margin:0;color:#a9b9d2;font-size:12px}
.comparison-status{min-height:18px;margin:14px 0 10px;color:#8fb5e2;font-size:10px}
.pip-table-wrap{overflow-x:auto;border:1px solid rgba(77,151,235,.2);border-radius:11px;background:rgba(2,17,39,.52)}
.pip-table{width:100%;min-width:820px;border-collapse:collapse}
.pip-table th,.pip-table td{padding:14px;border-bottom:1px solid rgba(77,151,235,.12);color:#dce8f7;font-size:13px;line-height:1.35;text-align:right;white-space:nowrap}
.pip-table thead th{color:#86bfff;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:rgba(9,43,91,.58)}
.pip-table th:first-child,.pip-table td:first-child{text-align:left}
.pip-table tbody th{color:#fff;font-size:13.5px}
.pip-table tbody tr:last-child th,.pip-table tbody tr:last-child td{border-bottom:0}
.pip-table tbody tr:hover{background:rgba(22,131,255,.05)}
.comparison-error{color:#ffb49a!important;text-align:left!important}

@media(max-width:768px){
  .pip-hero{width:84%!important;right:-22%!important;opacity:.5!important;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.36) 24%,#000 100%)!important}
  .pip-position-grid,.pip-move-grid,.conversion-grid,.pip-breakdown{grid-template-columns:1fr}
  .conversion-grid>.field{grid-template-rows:auto 44px auto auto auto}
  .rate-button,.pip-size-toggle{width:100%;justify-self:stretch}
  .pip-comparison-header{display:grid}
  .comparison-refresh{width:100%}
}