/* LTL and FTL freight landings (/ltl-freight, /ftl-freight + Spanish).
   Loads after the car page's cs-design.css + cs.css, which hold the shared
   design. Here: the 18 rules the freight design adds (its quote card fields,
   imported as is, phone rules under the same 768px query), then the styles of
   our calculator's freight form (BlogCalc FreightForm) inside the card. */

/* ── design: the quote card's field boxes (shown until the calculator mounts) ── */
.qg{display:grid;gap:8px;margin-top:20px}
.mf{border:1px solid #E4E7EC;border-radius:12px;padding:10px 12px;min-width:0}
.mf .fl{font-size:12px;font-weight:600;color:#475467}
.mv{font-size:15px;font-weight:500;color:#98A2B3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf.set .mv{color:#101828;font-variant-numeric:tabular-nums}
.achips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.vchip.ac{height:40px;padding:0 14px;gap:6px}
.vchip.ac svg{display:none}
.vchip.ac.on svg{display:block}
@media (max-width: 768px){.cs .vchip.ac{height:40px;padding:0 12px}}
.tph .tvid svg{color:#7FA2F0}
.accg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;margin-bottom:24px}
@media (max-width: 768px){.cs .accg{grid-template-columns:minmax(0,1fr);gap:0}}
.accg .achips{margin-bottom:0}
.accg .flabel{display:flex;align-items:center;gap:6px}
.accd{width:8px;height:8px;border-radius:50%;background:#1E57D6;flex:none}
.accd.red{background:#C81E1E}
.accg .vchip.ac{height:36px;padding:0 12px;font-size:13px}
.cs-skel .qg + .qg{margin-top:8px}
.cs-skel .accg{margin:16px 0 0}
.cs-skel .achips{margin-bottom:0}

/* The calculator is taller than the static card it replaces: hold its height
   until it mounts, or the page jumps (measured in Chrome 2026-10-17). */
.cs-ltl .qc>.cs-calc:not([data-mounted]){min-height:795px}
.cs-ftl .qc>.cs-calc:not([data-mounted]){min-height:663px}
@media (min-width:769px) and (max-width:1180px){
  .cs-ltl .qc>.cs-calc:not([data-mounted]){min-height:830px}
  .cs-ltl[data-lang="es"] .qc>.cs-calc:not([data-mounted]){min-height:839px}
}
@media (max-width:768px){
  .cs-ltl .qc>.cs-calc:not([data-mounted]){min-height:855px}
  .cs-ltl[data-lang="es"] .qc>.cs-calc:not([data-mounted]){min-height:907px}
  .cs-ftl .qc>.cs-calc:not([data-mounted]){min-height:665px}
}

/* ── our calculator's freight form ── */
.cs .qc .bc-fr .bc-field-label{font-size:13px;font-weight:600;color:#344054}
.bc-fr-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end}
.bc-fr-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:end}
.bc-fr-row2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:8px;align-items:end}
.bc-fr .bc-field input,.bc-fr .bc-field select{min-width:0;width:100%}
.bc-dims3{display:flex;align-items:center;gap:4px}
.bc-dims3 input{flex:1 1 0;min-width:0;text-align:center;padding-left:4px!important;padding-right:4px!important}
.bc-dims3 span{color:#98A2B3;font-size:13px;flex:none}
.bc-fr-yn{width:100%}
.bc-fr-yn button{flex:1 1 0}
.bc-fr-links{display:flex;justify-content:space-between;align-items:center;gap:6px 14px;flex-wrap:wrap;margin-top:-6px}
.bc-fr-links .bc-vmore{margin:0;font-size:13.5px;text-decoration:none}
.bc-fr-links a.bc-vmore{color:#475467;font-weight:500}
.bc-acc-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.bc-acc-group .bc-field-label{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.bc-acc-dot{width:8px;height:8px;border-radius:50%;background:#1E57D6;flex:none;display:inline-block}
.bc-acc-dot.red{background:#C81E1E}
.bc-acc-chips{display:flex;flex-wrap:wrap;gap:8px}
.bc-acc-chips .bc-vchip{height:36px;padding:0 12px;font-size:13px;gap:6px;width:auto}
.bc-acc-chip svg{display:none;flex:none}
.bc-acc-chip.on svg{display:block}
.bc-eq-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.bc-fr-note{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:#475467}
/* pallets of different sizes: slim spreadsheet rows (FrSheet) */
.bc-sheet{border:1px solid #D0D5DD;border-radius:10px;overflow:hidden;background:#fff}
.bc-sheet-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr) repeat(3,minmax(0,.8fr)) 28px;border-top:1px solid #EAECF0}
.bc-sheet-head{border-top:0;background:#F9FAFB}
.bc-sheet-head span{padding:7px 8px;font:600 11px/1.2 Inter,system-ui,sans-serif;color:#667085;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid #EAECF0}
.bc-sheet-head span:first-child{border-left:0}
.cs .bc-sheet input.bc-sheet-in{height:36px;min-height:0;width:100%;min-width:0;border:0;border-left:1px solid #EAECF0;border-radius:0;background:transparent;padding:0 8px;margin:0;font:500 14px Inter,system-ui,sans-serif;color:#101828;box-shadow:none;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.cs .bc-sheet input.bc-sheet-in:first-child{border-left:0}
.cs .bc-sheet input.bc-sheet-in::placeholder{color:#B4BBC6}
.cs .bc-sheet input.bc-sheet-in:focus{outline:2px solid #1E57D6;outline-offset:-2px;background:#F5F8FF}
.bc-sheet input.bc-sheet-in::-webkit-outer-spin-button,.bc-sheet input.bc-sheet-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bc-sheet-x{border:0;border-left:1px solid #EAECF0;background:transparent;color:#98A2B3;font-size:17px;line-height:1;cursor:pointer;padding:0}
.bc-sheet-x:hover{color:#C81E1E;background:#FEF3F2}
.bc-sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #EAECF0;padding:6px 8px}
.bc-sheet-add{border:0;background:none;padding:4px 0;font:600 13px Inter,system-ui,sans-serif;color:#1E57D6;cursor:pointer}
.bc-sheet-tot{font:500 12px Inter,system-ui,sans-serif;color:#475467;font-variant-numeric:tabular-nums}
@media (max-width: 360px){
  .bc-sheet-head span{padding:7px 5px;font-size:10px}
  .cs .bc-sheet input.bc-sheet-in{padding:0 5px;font-size:13px}
  .bc-fr-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bc-fr-grid3 > :last-child{grid-column:span 2}
  .bc-fr-row2{grid-template-columns:minmax(0,1fr)}
}
/* FTL reefer: the temperature is required (2026-10-18, owner). A tinted panel
   under the trailer chips: quick picks, the exact set point, °F / °C. */
.bc-fr-temp{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid #D6E2FB;border-radius:12px;background:#F7FAFF;transition:border-color .15s,background .15s}
.bc-fr-temp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bc-fr-temp .bc-field-label{margin:0}
.bc-req{color:#C81E1E;margin-left:3px;font-weight:700}
.cs .qc .bc-fr-unit{width:auto;flex:none}
.cs .qc .bc-fr-unit button{min-width:46px;padding:0 10px}
.bc-fr-temp .bc-fr-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bc-fr-temp .bc-fr-presets .bc-vchip{background:#fff;height:46px;padding:0 4px;flex-direction:column;justify-content:center;gap:3px;white-space:nowrap;width:auto;min-width:0}
.bc-fr-pn{font:600 12.5px/1.1 Inter,system-ui,sans-serif;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bc-fr-pt{font:500 11.5px/1 'JetBrains Mono',ui-monospace,monospace;color:#667085}
.bc-fr-temp .bc-vchip.on .bc-fr-pt{color:#1E57D6}
.bc-fr-temp .bc-fr-presets .bc-vchip.on{background:#EEF3FD}
.cs .qc .bc-fr-tin input{-moz-appearance:textfield;appearance:textfield}
.bc-fr-tin input::-webkit-outer-spin-button,.bc-fr-tin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bc-fr-setpoint{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
.bc-fr-setpoint .bc-field-label{margin:0;white-space:nowrap}
.bc-fr-tin{position:relative;display:block}
.cs .qc .bc-fr-tin input{width:100%;padding-right:44px}
.bc-fr-tin b{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:600 13px Inter,system-ui,sans-serif;color:#475467;pointer-events:none}
.bc-fr-temp.bc-missing{border-color:#F04438;background:#FEF3F2}
@media (max-width:380px){.bc-fr-setpoint{grid-template-columns:minmax(0,1fr)}}
@media (max-width:400px){.bc-fr-pn{font-size:11.5px;letter-spacing:-.01em}.bc-fr-temp{padding:10px}}
@media (max-width:340px){.bc-fr-pn{font-size:10.5px}.bc-fr-temp .bc-fr-presets{gap:4px}}
