/* tire-quote.css — [SLICE9] Tire Quick Quote, scoped .tq-* (Phase B tokens:
   light surfaces, 1px #DFE3E8 hairlines, charcoal #14161A, gold #C9A53F
   accent only, Inter, tabular numerals). */
.tq-wrap { max-width: 880px; margin: 0 auto; padding: 4px 2px 24px; font-variant-numeric: tabular-nums; }
.tq-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.tq-head h3 { margin: 0; font-size: 20px; font-weight: 700; color: #1D2733; }
.tq-card { background: #FFFFFF; border: 1px solid #DFE3E8; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.tq-card h4 { margin: 0 0 10px; font-size: 15px; font-weight: 650; color: #1D2733; }
.tq-opt { font-weight: 400; font-size: 12.5px; color: #5D6B78; }
.tq-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 8px; }
.tq-row label, .tq-comp label, .tq-sizegrid > label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #8B96A1; }
.tq-row label { flex: 1 1 130px; }
.tq-wrap input[type="text"], .tq-wrap input[type="tel"], .tq-wrap input[type="number"], .tq-wrap select {
  height: 38px; border: 1px solid #C9D1D9; border-radius: 8px; padding: 0 10px; font-size: 14px; color: #1D2733; background: #FFFFFF; text-transform: none; letter-spacing: normal; font-weight: 400; width: 100%; box-sizing: border-box;
}
.tq-wrap input:focus, .tq-wrap select:focus { outline: 2px solid #C9A53F; outline-offset: 0; }
/* [QQ-INTAKE] concerns/notes textareas + full-width label */
.tq-wrap textarea { border: 1px solid #C9D1D9; border-radius: 8px; padding: 8px 10px; font-size: 14px; color: #1D2733; background: #FFFFFF; text-transform: none; letter-spacing: normal; font-weight: 400; width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; }
.tq-wrap textarea:focus { outline: 2px solid #C9A53F; outline-offset: 0; }
.tq-row label.tq-wide { flex: 1 1 100%; }
.tq-wrap select { width: 100%; height: 38px; }
.tq-sizegrid { margin-bottom: 8px; }
.tq-sizegrid > label { margin-bottom: 8px; }
.tq-comp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tq-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #1D2733; margin: 6px 0; cursor: pointer; }
.tq-check input { width: 18px; height: 18px; accent-color: #14161A; }
.tq-details { margin-top: 10px; border-top: 1px solid #DFE3E8; padding-top: 10px; }
.tq-details summary { cursor: pointer; font-size: 14px; font-weight: 600; color: #1D2733; padding: 4px 0; }
.tq-btn { height: 38px; border-radius: 8px; border: 1px solid #C9D1D9; background: #FFFFFF; color: #1D2733; font-size: 13px; font-weight: 600; padding: 0 16px; cursor: pointer; }
.tq-btn-primary { background: #14161A; border-color: #14161A; color: #FFFFFF; }
.tq-build { height: 46px; font-size: 14px; }
.tq-hint { font-size: 12.5px; color: #5D6B78; flex: 1 1 260px; }
.tq-empty { border: 1px dashed #C9D1D9; border-radius: 8px; padding: 12px; color: #5D6B78; font-size: 13.5px; }
.tq-sug { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tq-sugchip { border: 1px solid #C9A53F; background: #FAF3DD; color: #1D2733; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.tq-sugchip span { font-weight: 400; color: #5D6B78; }
.tq-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tq-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #8B96A1; padding: 6px 8px; border-bottom: 1px solid #DFE3E8; }
.tq-table td { padding: 8px; border-bottom: 1px solid #DFE3E8; vertical-align: middle; }
.tq-table .tq-r, .tq-table th.tq-r { text-align: right; }
.tq-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: #14161A; }
.tq-table .tq-qty { width: 64px; height: 34px; }
.tq-lname { font-weight: 650; color: #1D2733; }
.tq-lsub { font-size: 12.5px; color: #5D6B78; }
.tq-sizechip { background: #E9F2FD; color: #1F6FD6; border-radius: 999px; padding: 2px 8px; font-size: 12.5px; font-weight: 600; }
.tq-axle { font-size: 12px; font-weight: 600; color: #B97A12; }
.tq-low { color: #D64545; font-weight: 600; font-size: 12px; }
.tq-line { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #DFE3E8; font-size: 14px; }
.tq-totals { margin-top: 10px; }
.tq-totals > div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14px; color: #5D6B78; }
.tq-totals .tq-grand { font-size: 16px; font-weight: 700; color: #1D2733; border-top: 1px solid #DFE3E8; padding-top: 8px; }
.tq-ok { background: #E9F6EC; color: #17703C; border-radius: 8px; padding: 10px 12px; font-weight: 600; margin-bottom: 10px; }
.tq-panel-entry { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #C9D1D9; font-size: 13.5px; color: #5D6B78; }
.tq-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: #14161A; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; z-index: 9999; max-width: 92vw; box-shadow: 0 4px 16px rgba(16,24,40,.25); }
.tq-toast-err { background: #D64545; }
@media (max-width: 640px) {
  .tq-comp { grid-template-columns: repeat(2, 1fr); }
  .tq-row label { flex: 1 1 100%; }
  .tq-table { font-size: 13px; }
}