/* Companion styles layered on top of the compiled Tailwind (app.css).
   Loaded after app.css so these rules win. Added 2026-07-02 for the rates-UI
   refinements: sort chips, carrier grouping, logos, weight units, save-address. */

/* ---- Rate results: sort chips ---- */
.rate-sort { display: flex; gap: 6px; margin-left: auto; }
.sort-chip {
  font-family: var(--font-body); cursor: pointer;
  border: 1.5px solid var(--color-line); background: var(--color-card-2); color: var(--color-muted);
  border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 700;
  transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s;
}
.sort-chip:hover { border-color: var(--color-cyan); color: var(--color-cyan); }
.sort-chip.is-active { background: var(--color-cyan); border-color: var(--color-cyan); color: #06121a;
  box-shadow: 0 0 14px -3px rgba(46,242,255,.6); }

/* ---- Carrier group headers (full-width row inside the rate grid) ---- */
.carrier-group-head {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  margin: 10px 0 2px; padding-bottom: 8px; border-bottom: 2px dashed var(--color-line);
}
.carrier-group-head:first-child { margin-top: 0; }
.carrier-group-name { font-family: var(--font-display); color: var(--color-pine); font-size: 16px; font-weight: 800; }
.carrier-group-count { font-family: var(--font-mono); color: var(--color-muted); font-size: 12px; margin-left: auto; }

/* ---- Carrier logos ---- */
.carrier-logo { height: 20px; width: auto; display: block; }
.carrier-logo.lg { height: 26px; }
.rate-card-top { display: flex; align-items: center; gap: 8px; min-height: 24px; }

/* ---- Uniform rate cards: anchor the buy button to the bottom ---- */
.rate-card .btn { margin-top: auto; }

/* ---- Weight: number + unit selector ----
   The dims row is L / W / H / Weight. Weight also carries the unit <select>, so
   give it a wider cell (span 2 of a 5-col grid) and a real min-width on the
   number input so its value shows, not just the spinner arrows. */
.dims { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dims .weight-field { grid-column: span 2; }
.weight-input { display: flex; gap: 6px; align-items: stretch; }
.weight-input input { flex: 1 1 auto; min-width: 3.5rem; }
.weight-input select { flex: 0 0 auto; width: auto; padding-inline: 8px 24px; }
@media (max-width: 720px) {
  .dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dims .weight-field { grid-column: span 2; }  /* full-width row on phones */
}

/* ---- Save-to-address-book checkbox ---- */
.grid-fields label.save-addr {
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 9px;
  color: var(--color-ink); font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 2px;
}
.grid-fields label.save-addr input[type=checkbox] {
  appearance: auto; -webkit-appearance: auto;
  width: 17px; height: 17px; flex: none; padding: 0; border: 0; border-radius: 0;
  background: initial; accent-color: var(--color-pine);
}

/* ---- Ship-from / Ship-to: side-by-side grid row-mates ----
   These are adjacent .panel siblings, so the global `.panel + .panel
   { margin-top:18px }` rule (meant for vertically-stacked panels) wrongly
   shoved #to-section down 18px — misaligning the two panels' tops and, when
   combined with a forced height, spilling its bottom onto the Package panel
   below. Zero that stray margin; the grid's default align-items:stretch then
   equalizes their heights on its own. */
#from-section, #to-section { margin-top: 0; }

/* ---- Always-on debug error surface ---- */
.debug-error .debug-detail { margin-top: 6px; font-weight: 600; }
.debug-details { margin-top: 10px; }
.debug-details summary {
  cursor: pointer; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--color-alert);
}
.debug-trace {
  margin-top: 8px; max-height: 320px; overflow: auto; white-space: pre;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.45; color: #ffd0d7;
  background: #17102a; border: 1px solid rgba(255,92,116,.35); border-radius: 8px; padding: 10px 12px;
}

/* ---- Get-rates loading indicator + disabled button ---- */
.htmx-indicator { opacity: 0; transition: opacity .15s ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.rates-spinner { display: inline-flex; align-items: center; gap: 8px; color: var(--color-muted); font-weight: 600; font-size: 14px; }
.rates-spinner .spin {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block;
  border: 2.5px solid var(--color-line); border-top-color: var(--color-pine);
  animation: rates-spin .7s linear infinite;
}
@keyframes rates-spin { to { transform: rotate(360deg); } }
.btn:disabled, .btn[disabled] { opacity: .6; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .rates-spinner .spin { animation: none; } }