/* ════════════════════════════════════════
   Hess Air Quote Form v2 — Styles
   Prefix: .hessqf- (wrap/components) and .hqf- (helpers/states)
════════════════════════════════════════ */

.hessqf-form-wrap {
  --hqf-navy:      #1a3a5c;
  --hqf-pink:      #f79cbe;
  --hqf-pink-dark: #e0608a;
  --hqf-pink-deep: #c0457a;
  --hqf-light:     #f4f5f7;
  --hqf-mid:       #dde1e7;
  --hqf-text:      #222;
  --hqf-muted:     #666;
  --hqf-white:     #ffffff;
  --hqf-green:     #2a7a3b;
  --hqf-gold:      #c9960c;
  --hqf-radius:    6px;
  --hqf-shadow:    0 2px 8px rgba(0,0,0,0.10);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--hqf-text);
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* ── Step Indicator ── */
.hessqf-step-indicator {
  background: var(--hqf-white);
  border: 1px solid var(--hqf-mid);
  border-radius: var(--hqf-radius);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 22px;
  box-shadow: var(--hqf-shadow);
}
.hessqf-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--hqf-muted);
  padding: 6px 16px 6px 10px;
  border-radius: 20px;
  transition: background 0.2s, color 0.2s;
}
.hessqf-step-pill.active  { background: var(--hqf-navy); color: var(--hqf-white); }
.hessqf-step-pill.done    { background: #e0f0e8; color: var(--hqf-green); }
.hessqf-step-number {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
  background: var(--hqf-mid); color: var(--hqf-muted);
}
.hessqf-step-pill.active .hessqf-step-number { background: var(--hqf-pink); color: var(--hqf-navy); }
.hessqf-step-pill.done   .hessqf-step-number { background: var(--hqf-green); color: var(--hqf-white); }
.hessqf-step-connector { width: 32px; height: 2px; background: var(--hqf-mid); flex-shrink: 0; }

/* ── Step Panels ── */
.hessqf-step-panel { display: none; }
.hessqf-step-panel.active { display: block; animation: hessqfFadeIn 0.25s ease; }
@keyframes hessqfFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card ── */
.hessqf-card {
  background: var(--hqf-white);
  border-radius: var(--hqf-radius);
  box-shadow: var(--hqf-shadow);
  padding: 22px 20px;
  margin-bottom: 20px;
}
.hessqf-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hqf-navy);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--hqf-pink);
  display: inline-block;
}

/* ── Filters ── */
.hessqf-filters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.hessqf-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 140px;
  min-width: 120px;
}
.hessqf-filter-group label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--hqf-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.hessqf-filter-group select {
  border: 1px solid var(--hqf-mid);
  border-radius: var(--hqf-radius);
  padding: 8px 28px 8px 10px;
  font-size: 0.88rem;
  background: var(--hqf-white);
  color: var(--hqf-text);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.hessqf-filter-group select:focus {
  outline: none;
  border-color: var(--hqf-navy);
  box-shadow: 0 0 0 2px rgba(26,58,92,0.12);
}
.hessqf-filter-actions { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }

/* ── Buttons ── */
.hessqf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--hqf-radius);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}
.hessqf-btn:active { transform: scale(0.98); }

.hessqf-btn-primary       { background: var(--hqf-navy); color: var(--hqf-white); }
.hessqf-btn-primary:hover { background: #143060; box-shadow: 0 2px 6px rgba(26,58,92,0.3); }

.hessqf-btn-pink          { background: var(--hqf-pink); color: var(--hqf-navy); }
.hessqf-btn-pink:hover    { background: var(--hqf-pink-dark); color: var(--hqf-white); box-shadow: 0 2px 6px rgba(247,156,190,0.45); }

.hessqf-btn-ghost         { background: transparent; color: var(--hqf-muted); border: 1px solid var(--hqf-mid); }
.hessqf-btn-ghost:hover   { background: var(--hqf-light); border-color: #bbb; }

.hessqf-btn-sm { padding: 6px 12px; font-size: 0.82rem; }
.hessqf-btn-lg { padding: 12px 28px; font-size: 1rem; }
.hessqf-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Product Table ── */
.hessqf-table-wrapper {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--hqf-radius);
  border: 1px solid var(--hqf-mid);
}
.hessqf-form-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  table-layout: fixed;  /* equal-share columns that fit container width */
}
.hessqf-form-wrap thead th {
  background: var(--hqf-navy);
  color: var(--hqf-white);
  padding: 10px 14px 10px 10px;  /* extra right padding for resize handle */
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.25;
  word-wrap: break-word;
  overflow-wrap: break-word;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.hessqf-form-wrap thead th:hover { background: #1e4570; }
.hessqf-sort-icon { margin-left: 4px; opacity: 0.5; font-size: 0.7rem; }
.hessqf-form-wrap tbody tr { border-bottom: 1px solid var(--hqf-mid); transition: background 0.1s; }
.hessqf-form-wrap tbody tr:last-child { border-bottom: none; }
.hessqf-form-wrap tbody tr:hover { background: #f0f4f9; }
.hessqf-form-wrap tbody tr.hqf-selected-row { background: #e8f0f8; }
.hessqf-form-wrap tbody td {
  padding: 9px 10px;
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.hessqf-form-wrap tbody td code {
  word-break: break-all;
}

/* Reserve space for the Action column — last column is the Add/Selected button.
   Only on desktop; the mobile card layout (≤700px) handles sizing differently. */
@media (min-width: 701px) {
  .hessqf-form-wrap thead th:last-child,
  .hessqf-form-wrap tbody td:last-child {
    width: 140px;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
  }
  .hessqf-form-wrap tbody td:last-child .hessqf-btn {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.78rem;
    justify-content: center;
  }
}
.hqf-no-results { text-align: center; padding: 28px 14px; color: var(--hqf-muted); font-style: italic; }
.hqf-no-results.hqf-prompt { padding: 44px 20px; font-style: normal; }
.hqf-prompt-icon  { font-size: 1.8rem; margin-bottom: 8px; }
.hqf-prompt-title { font-size: 1rem; font-weight: 700; color: var(--hqf-navy); margin-bottom: 6px; }
.hqf-prompt-sub   { font-size: 0.85rem; color: var(--hqf-muted); }

/* ── Column Resize Handle ── */
.hqf-col-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  background: rgba(255,255,255,0.12);
  transition: background 0.15s;
  z-index: 2;
}
.hqf-col-resizer:hover,
.hqf-col-resizer.hqf-resizing { background: var(--hqf-pink); }

/* ── Mobile Card Layout ── */
@media (max-width: 700px) {
  .hessqf-table-wrapper {
    overflow-x: visible;
    border: none;
    background: transparent;
  }
  .hessqf-form-wrap table,
  .hessqf-form-wrap tbody { display: block; width: 100%; }
  .hessqf-form-wrap thead { display: none; }

  .hessqf-form-wrap tbody tr {
    display: block;
    border: 1px solid var(--hqf-mid);
    border-radius: var(--hqf-radius);
    margin-bottom: 10px;
    background: var(--hqf-white);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }
  .hessqf-form-wrap tbody tr:hover        { background: #f0f4f9; }
  .hessqf-form-wrap tbody tr.hqf-selected-row {
    background: #e8f0f8;
    border-color: var(--hqf-navy);
  }

  .hessqf-form-wrap tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.88rem;
    text-align: right;
    gap: 8px;
  }
  .hessqf-form-wrap tbody td:last-child {
    border-bottom: none;
    justify-content: flex-end;
    padding: 11px 14px;
  }
  .hessqf-form-wrap tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.74rem;
    color: var(--hqf-muted);
    text-transform: uppercase;
    letter-spacing: 0.35px;
    text-align: left;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .hessqf-form-wrap tbody td:last-child::before { display: none; }
}

@media (max-width: 520px) {
  .hessqf-step-pill { padding: 5px 10px 5px 8px; font-size: 0.82rem; }
  .hessqf-quote-number-banner { flex-direction: column; gap: 4px; }
  .hessqf-quote-number-banner > div:last-child { display: none; }
  .hessqf-selection-bar { gap: 10px; }
  .hessqf-btn-lg { padding: 11px 20px; font-size: 0.92rem; }
}

/* ── Tier Badges (4 tiers) ── */
.hqf-tier-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* Make sure the Stars column in the units table is wide enough to fit the
   6-star badge without overlapping its neighbors. The parent table uses
   `table-layout: fixed`, so we MUST set an explicit width on the header
   (min-width is ignored under fixed layout). */
#hessqfProductTable th[data-key="tier"] {
  width: 130px !important;
}
#hessqfProductTable th[data-key="tier"],
#hessqfProductTable td[data-key="tier"] {
  white-space: nowrap;
  overflow: visible;
}
#hessqfProductTable td[data-key="tier"] .hqf-tier-badge {
  display: inline-block;
  max-width: none;
}
/* Tighten letter-spacing on the highest-tier pills so 5/6 stars fit in the
   same visual footprint as the lower-tier pills. */
.hqf-tier-badge.hqf-t5,
.hqf-tier-badge.hqf-t6 {
  letter-spacing: 0 !important;
}
/* Keep the monthly/daily money columns on a single line. */
#hessqfProductTable th[data-key="monthly"],
#hessqfProductTable td[data-key="monthly"],
#hessqfProductTable th[data-key="daily"],
#hessqfProductTable td[data-key="daily"],
#hessqfProductTable th[data-key="price"],
#hessqfProductTable td[data-key="price"] {
  white-space: nowrap;
}

/* Make the per-row Compare button compact so the Action column doesn't eat
   horizontal space the Stars column needs for the 6-star pill. */
#hessqfProductTable .hqf-add-btn {
  padding: 4px 10px !important;
  font-size: 0.74rem !important;
  min-height: 0;
  line-height: 1.4;
  border-radius: 14px;
}

/* Trim the Action column width by ~32px since the Compare button is now
   compact. Targets the last column header + cells in the units table. */
#hessqfProductTable thead th:last-child,
#hessqfProductTable tbody td:last-child {
  width: 88px;
  max-width: 88px;
  padding-left: 6px;
  padding-right: 6px;
}
.hqf-t6 { background: #f8bbd0; color: #880e4f; border: 1px solid #f48fb1; letter-spacing: 1px; }
.hqf-t5 { background: #f8d7da; color: #842029; border: 1px solid #f1aeb5; letter-spacing: 1px; }
.hqf-t4 { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.hqf-t3 { background: #d0e8ff; color: #0a4fa6; border: 1px solid #6aadff; }
.hqf-t2 { background: #d4edda; color: #155724; border: 1px solid #6cbf7e; }
.hqf-t1 { background: #e9ecef; color: #495057; border: 1px solid #ced4da; }
.hqf-t0 { background: #f8f9fa; color: #6b7280; border: 1px solid #d8dde6; font-style: italic; }

/* ── Tier Cards ── */
.hessqf-tier-cards-section { margin-top: 4px; }
/* Matrix renders inside this container as a full-width table */
.hessqf-tier-cards-grid { display: block; }

.hqf-tier-card {
  border-radius: var(--hqf-radius);
  border: 2px solid var(--hqf-mid);
  background: var(--hqf-white);
  padding: 16px 14px;
  transition: box-shadow 0.2s;
}
.hqf-tier-card:hover             { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.hqf-tier-card.hqf-selected-card { box-shadow: 0 0 0 3px var(--hqf-pink-dark); }
.hqf-tier-card.hqf-unavailable   { opacity: 0.5; background: #f7f7f7; }
.hqf-tier-card.hqf-gold          { border-color: #c9960c; }
.hqf-tier-card.hqf-blue          { border-color: #1a6fc9; }
.hqf-tier-card.hqf-green         { border-color: #2a7a3b; }
.hqf-tier-card.hqf-gray          { border-color: #adb5bd; }

.hqf-tier-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hqf-tier-card-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.hqf-tier-card.hqf-gold  .hqf-tier-card-label { color: #8a6200; }
.hqf-tier-card.hqf-blue  .hqf-tier-card-label { color: #0a4fa6; }
.hqf-tier-card.hqf-green .hqf-tier-card-label { color: #155724; }
.hqf-tier-card.hqf-gray  .hqf-tier-card-label { color: #495057; }
.hqf-tier-card-badge { font-size: 1.05rem; }
.hqf-tier-card-model { font-size: 0.86rem; font-weight: 600; color: var(--hqf-navy); margin-bottom: 8px; }
.hqf-tier-card-price { margin: 10px 0 12px; font-size: 1.2rem; font-weight: 700; color: var(--hqf-navy); }
.hqf-tier-card-price small { font-size: 0.72rem; font-weight: 400; color: var(--hqf-muted); }
.hqf-tier-card-rows  { font-size: 0.8rem; }
.hqf-tier-card-row   { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #f0f0f0; gap: 8px; }
.hqf-tier-card-row:last-of-type { border-bottom: none; }

/* ─── Tier Comparison Matrix (rendered inside .hessqf-tier-cards-grid) ─── */
.hqf-tc-wrap { overflow-x: auto; }
.hqf-tc {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.85rem;
  table-layout: fixed;
}
.hqf-tc th, .hqf-tc td {
  padding: 10px 12px;
  border: 1px solid #e3e8ef;
  vertical-align: middle;
  text-align: center;
}

/* Column header (tier title + stars + model) */
.hqf-tc-corner {
  background: #fff !important;
  border-top: 0 !important;
  border-left: 0 !important;
  width: 20%;
}
.hqf-tc-col-head {
  padding: 16px 10px !important;
  width: 20%; /* 5 cols × 20% = 100% — guarantees all 4 tier columns match */
}
.hqf-tc-tier-label { font-size: 0.9rem; font-weight: 800; color: #1a3a5c; letter-spacing: 0.5px; }
.hqf-tc-tier-stars { font-size: 1rem; color: #c0457a; letter-spacing: 2px; margin: 4px 0; }
.hqf-tc-tier-model { font-size: 0.78rem; color: #555; font-weight: 500; }
.hqf-tc-img-disclaimer { font-size: 0.68rem; color: #9aa1ad; font-style: italic; margin: 3px 0 4px; text-align: center; }

/* Column tints */
.hqf-tc-col-head.hqf-blue   { background: #e8f1fa; }
.hqf-tc-col-head.hqf-green  { background: #e9f6ef; }
.hqf-tc-col-head.hqf-yellow { background: #fdf4df; }
.hqf-tc-col-head.hqf-gray   { background: #f1f3f6; }
.hqf-tc-col-head.hqf-gold   { background: #fdf4df; } /* legacy */
.hqf-tc-col-head.hqf-tc-unavail { background: #f0f0f0; color: #999; }

/* When the tier column header is hovered (theme turns bg dark blue),
   flip the inner text white so it stays readable. */
.hqf-tc-col-head:hover .hqf-tc-tier-label,
.hqf-tc-col-head:hover .hqf-tc-tier-stars,
.hqf-tc-col-head:hover .hqf-tc-tier-model {
  color: #ffffff !important;
}

/* Compare table: per-unit column header (no tier color tint) */
.hqf-tc-col-head.hqf-tc-unit-head {
  background: #f7fafc;
  position: relative;
  padding-top: 26px !important;
}
.hqf-tc-col-head.hqf-tc-unit-head .hqf-tc-brand-img {
  display: block;
  margin: 0 auto 6px;
  max-width: 110px;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 760px) {
  .hqf-tc-col-head.hqf-tc-unit-head .hqf-tc-brand-img {
    max-width: 80px;
    max-height: 50px;
  }
}
.hqf-tc-col-head.hqf-tc-unit-head .hqf-tc-tier-label {
  font-size: 0.82rem;
  text-transform: none;
  word-break: break-word;
  text-align: center;
}
.hqf-tc-col-head.hqf-tc-unit-head .hqf-tc-tier-stars {
  text-align: center;
}
.hqf-tc-col-head.hqf-tc-unit-head .hqf-tc-tier-model {
  font-size: 0.7rem;
  color: #6b7280;
  text-align: center;
}

/* × remove button on each compared-unit column */
.hqf-tc-remove {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: 0;
  color: #9aa1ad;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  width: 18px;
  height: 18px;
  padding: 8px 8px 16px 8px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hqf-tc-remove:hover {
  background: #fde2ec;
  color: #c0457a;
}
button.hqf-tc-remove {
  padding: 8px 8px 16px 8px !important;
}

/* Signature pad */
.hessqf-optional {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
  margin-left: 4px;
}
.hessqf-signature-wrap {
  position: relative;
  border: 1px dashed #c6d8ee;
  background: #fafbfc;
  border-radius: 6px;
  padding: 8px;
}
.hessqf-signature-canvas {
  display: block;
  width: 100%;
  height: 160px;
  background: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 4px;
  cursor: crosshair;
  touch-action: none;
}
.hessqf-signature-clear {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #fff;
  border: 1px solid #d8dde6;
  color: #6b7280;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.hessqf-signature-clear:hover {
  background: #fde2ec;
  color: #c0457a;
  border-color: #f0c4d6;
}

/* Empty state for compare table */
.hqf-tc-empty {
  text-align: center;
  color: var(--hqf-muted);
  font-size: 0.88rem;
  font-style: italic;
  padding: 28px 16px;
  background: #fafbfc;
  border: 1px dashed #d8dde6;
  border-radius: 6px;
}

/* Label column (left) */
.hqf-tc-label {
  text-align: right !important;
  background: #fafbfc;
  color: #333;
  font-weight: 600;
  font-size: 0.82rem;
  width: 20%;
}

/* Value cells */
.hqf-tc-cell { color: #1a3a5c; font-weight: 600; }
.hqf-tc-dash { color: #c7ccd3; }

/* Unit details row (spans all 4) */
.hqf-tc-details-cell {
  background: #f5f7fa !important;
  font-weight: 600;
  text-align: center !important;
  color: #1a3a5c;
}

/* Editable $ input cell — $ shown inside value on blur */
.hqf-tc-input-cell { padding: 6px 8px !important; }
.hqf-tc-input {
  width: 100%;
  max-width: 110px;
  padding: 6px 8px;
  border: 1px solid #c6d8ee;
  border-radius: 4px;
  font-size: 0.85rem;
  text-align: right;
  background: #fff;
  vertical-align: middle;
  display: inline-block;
  box-sizing: border-box;
}
.hqf-tc-input:focus { outline: 2px solid #c0457a; outline-offset: -1px; border-color: #c0457a; }

/* Total investment row (bold highlight) */
.hqf-tc-total-row th,
.hqf-tc-total-row td {
  background: #eef3f9;
  font-weight: 800;
  color: #1a3a5c;
  font-size: 0.95rem;
  padding: 13px 12px;
}

/* Feature rows — slim, alternating */
.hqf-tc-feat-row th,
.hqf-tc-feat-row td { padding: 7px 10px; font-size: 0.78rem; }
.hqf-tc-feat-label { font-weight: 500 !important; color: #444 !important; }
.hqf-tc-feat-cell { background: #fff; }
.hqf-tc-feat-row:nth-child(even) .hqf-tc-feat-cell,
.hqf-tc-feat-row:nth-child(even) .hqf-tc-feat-label { background: #f4f7fb; }

/* Check icon */
.hqf-feat-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #22a559;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
}
.hqf-feat-empty { color: transparent; }
.hqf-feat-text  { color: #1a3a5c; font-size: 0.78rem; font-weight: 600; }

/* Select buttons row — all buttons fill their column so they match width */
.hqf-tc-select-row td { padding: 14px 10px; border-top: 2px solid #d9dde3; background: #fff; }
.hqf-tc-select-row td:first-child { background: transparent; border-top: 0; border-left: 0; }
.hqf-tc-select-row .hqf-tier-select-btn,
.hqf-tc-select-row .hqf-unit-select-btn,
.hqf-tc-select-row .hqf-pkg-select-btn {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  min-height: 44px;
  min-width: 130px;
  padding: 10px 12px !important;
  white-space: nowrap;
  text-align: center;
}

/* Force equal column widths for compare-unit columns and package columns
   so every Select button comes out identical width within its table. */
#hessqfTierCardsGrid .hqf-tc,
#hessqfPackageGrid .hqf-tc { table-layout: fixed; }
#hessqfTierCardsGrid .hqf-tc .hqf-tc-corner,
#hessqfPackageGrid  .hqf-tc .hqf-tc-corner { width: 170px; }
#hessqfTierCardsGrid .hqf-tc .hqf-tc-col-head,
#hessqfPackageGrid  .hqf-tc .hqf-tc-col-head { width: auto; }

@media (max-width: 760px) {
  .hqf-tc th, .hqf-tc td { padding: 7px 6px; font-size: 0.75rem; }
  .hqf-tc-label { width: 130px; font-size: 0.72rem; }
  .hqf-tc-input { width: 65px; font-size: 0.75rem; }
  .hqf-tc-tier-label { font-size: 0.75rem; }
  .hqf-tc-tier-model { font-size: 0.7rem; }
}
.hqf-tier-card-row .hqf-row-label { color: var(--hqf-muted); }
.hqf-tier-card-row .hqf-row-value { font-weight: 600; text-align: right; }
.hqf-tier-unavailable-msg { text-align: center; color: var(--hqf-muted); font-size: 0.8rem; font-style: italic; padding: 20px 0; }

/* ── Selection Bar ── */
.hessqf-selection-bar {
  background: #eef3f9;
  border: 1px solid #c6d8ee;
  border-radius: var(--hqf-radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.hessqf-sel-label { font-size: 0.8rem; color: var(--hqf-muted); font-weight: 600; }
.hessqf-sel-value { font-size: 1rem; font-weight: 700; color: var(--hqf-navy); }

/* ── Tax Row ── */
.hessqf-tax-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hessqf-tax-row label { font-size: 0.88rem; font-weight: 600; color: var(--hqf-text); }
.hessqf-tax-row input[type="number"] {
  width: 90px;
  border: 1px solid var(--hqf-mid);
  border-radius: var(--hqf-radius);
  padding: 7px 10px;
  font-size: 0.9rem;
}
.hessqf-tax-row input:focus { outline: none; border-color: var(--hqf-navy); box-shadow: 0 0 0 2px rgba(26,58,92,0.12); }
.hessqf-tax-result { font-size: 0.9rem; color: var(--hqf-pink-deep); font-weight: 700; }
.hessqf-step-nav { display: flex; justify-content: flex-end; padding-top: 8px; }

/* ── Quote Number Banner ── */
.hessqf-quote-number-banner {
  background: var(--hqf-navy);
  color: var(--hqf-white);
  border-radius: var(--hqf-radius);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 8px;
}
.hessqf-qn-label { font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.75; }
.hessqf-qn-value { font-size: 1.05rem; font-weight: 700; color: var(--hqf-pink); letter-spacing: 1px; }

/* ── Contact Form ── */
.hessqf-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .hessqf-form-grid { grid-template-columns: 1fr; } }
.hessqf-form-group { display: flex; flex-direction: column; gap: 4px; }
.hessqf-full-width { grid-column: 1 / -1; }
.hessqf-form-group label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hqf-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.hessqf-required { color: var(--hqf-pink-deep); margin-left: 2px; }
.hessqf-form-group input,
.hessqf-form-group select,
.hessqf-form-group textarea {
  border: 1px solid var(--hqf-mid);
  border-radius: var(--hqf-radius);
  padding: 9px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--hqf-text);
  background: var(--hqf-white);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hessqf-form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.hessqf-form-group input:focus,
.hessqf-form-group select:focus,
.hessqf-form-group textarea:focus { outline: none; border-color: var(--hqf-navy); box-shadow: 0 0 0 2px rgba(26,58,92,0.12); }
.hessqf-form-group input.hqf-error,
.hessqf-form-group select.hqf-error,
.hessqf-form-group textarea.hqf-error { border-color: #c0392b; }
.hessqf-field-error { font-size: 0.76rem; color: #c0392b; }
.hessqf-form-group textarea { resize: vertical; min-height: 88px; }

/* ── Quote Summary (Step 2) ── */
.hessqf-quote-summary {
  background: #eef3f9;
  border-radius: var(--hqf-radius);
  border: 1px solid #c6d8ee;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.hessqf-quote-summary h3 {
  font-size: 0.84rem; font-weight: 700; color: var(--hqf-navy);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px;
}
.hessqf-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.86rem;
  border-bottom: 1px solid #d8e5f5;
  gap: 8px;
}
.hessqf-summary-row:last-child { border-bottom: none; }
.hessqf-summary-row .hqf-slabel { color: var(--hqf-muted); }
.hessqf-summary-row .hqf-svalue { font-weight: 600; text-align: right; }

/* ── Alerts ── */
.hessqf-alert {
  padding: 10px 14px;
  border-radius: var(--hqf-radius);
  font-size: 0.86rem;
  margin-bottom: 14px;
  display: none;
}
.hessqf-alert.hessqf-show { display: block; }
.hessqf-alert-warning { background: #fff3cd; border: 1px solid #ffc107; color: #6d5000; }
.hessqf-alert-error   { background: #fce8e6; border: 1px solid #e57373; color: #7b1a12; }

/* ── Back Nav ── */
.hessqf-back-nav { margin-bottom: 16px; }

/* ── Confirmation Panel ── */
.hessqf-confirmation-panel {
  display: none;
  background: var(--hqf-white);
  border-radius: var(--hqf-radius);
  box-shadow: var(--hqf-shadow);
  padding: 36px 24px;
  text-align: center;
  animation: hessqfFadeIn 0.3s ease;
}
.hessqf-confirmation-panel.hessqf-show { display: block; }
.hessqf-confirm-icon {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #fde8f2;
  border: 2px solid var(--hqf-pink);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 1.6rem;
  color: var(--hqf-pink-deep);
}
.hessqf-confirm-title { font-size: 1.35rem; font-weight: 700; color: var(--hqf-navy); margin-bottom: 6px; }
.hessqf-confirm-sub   { font-size: 0.9rem; color: var(--hqf-muted); margin-bottom: 16px; }
.hessqf-confirm-email-note { font-size: 0.85rem; color: var(--hqf-pink-deep); font-weight: 600; margin-bottom: 20px; }
.hessqf-confirm-details {
  text-align: left;
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) { .hessqf-confirm-details { grid-template-columns: 1fr; } }
.hqf-confirm-block { background: var(--hqf-light); border-radius: var(--hqf-radius); padding: 12px 14px; }
.hqf-confirm-block h4 {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--hqf-muted);
  font-weight: 700;
  margin-bottom: 7px;
}
.hqf-confirm-row { display: flex; justify-content: space-between; font-size: 0.83rem; padding: 2px 0; gap: 8px; }
.hqf-confirm-row .hqf-dl { color: var(--hqf-muted); }
.hqf-confirm-row .hqf-dv { font-weight: 600; text-align: right; }

/* ════════════════════════════════════════
   MOBILE REFINEMENTS
   Progressive enhancement for small screens:
   - Tighten padding to reclaim horizontal space
   - Stack filters + selection bar to full-width rows
   - Ensure all touch targets meet 44px minimum
   - Make primary action buttons full-width on narrow screens
════════════════════════════════════════ */

/* Tablet and below */
@media (max-width: 768px) {
  .hessqf-form-wrap { padding: 16px 10px 32px; }
  .hessqf-card      { padding: 16px 14px; margin-bottom: 14px; }
  .hessqf-card-title { font-size: 0.9rem; margin-bottom: 10px; }

  /* Filters: each dropdown takes full width, then actions row fills */
  .hessqf-filters-grid { gap: 10px; }
  .hessqf-filter-group { flex: 1 1 100%; min-width: 0; }
  .hessqf-filter-group select { padding: 11px 30px 11px 12px; font-size: 0.95rem; }
  .hessqf-filter-actions { width: 100%; gap: 10px; }
  .hessqf-filter-actions .hessqf-btn { flex: 1; justify-content: center; padding: 11px 14px; font-size: 0.9rem; }

  /* Selection bar: single-column stack with consistent spacing */
  .hessqf-selection-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 12px 14px;
    gap: 12px 10px;
  }
  .hessqf-selection-bar > div { min-width: 0; }
  .hessqf-sel-label { font-size: 0.72rem; }
  .hessqf-sel-value { font-size: 0.92rem; }

  /* Tax row stays inline but wraps cleanly */
  .hessqf-tax-row { gap: 8px; }
  .hessqf-tax-row input[type="number"] { width: 100px; padding: 10px 10px; font-size: 0.95rem; }
  .hessqf-tax-result { flex: 1 1 100%; }

  /* Continue / Submit buttons full-width — primary actions */
  .hessqf-step-nav { justify-content: stretch; }
  .hessqf-step-nav .hessqf-btn-lg { width: 100%; padding: 14px 20px; font-size: 0.95rem; }

  /* Back nav touch target */
  .hessqf-back-nav .hessqf-btn { padding: 10px 14px; font-size: 0.85rem; }

  /* Contact form inputs: larger touch targets, slightly larger type to prevent iOS auto-zoom */
  .hessqf-form-group input,
  .hessqf-form-group select,
  .hessqf-form-group textarea { padding: 11px 12px; font-size: 16px; }

  /* Quote summary row stacks label above value when values are long */
  .hessqf-summary-row { flex-wrap: wrap; }

  /* Confirmation panel slimmer padding */
  .hessqf-confirmation-panel { padding: 28px 18px; }
  .hessqf-confirm-title { font-size: 1.2rem; }

  /* Quote number banner stacks cleanly */
  .hessqf-quote-number-banner { padding: 11px 16px; }
}

/* Phone portrait */
@media (max-width: 480px) {
  .hessqf-form-wrap { padding: 12px 8px 28px; }
  .hessqf-card      { padding: 14px 12px; border-radius: 8px; }

  /* Step indicator: hide connector, pills go full width */
  .hessqf-step-indicator { padding: 10px 12px; gap: 6px; }
  .hessqf-step-connector { display: none; }
  .hessqf-step-pill { flex: 1 1 0; justify-content: center; padding: 7px 8px; font-size: 0.78rem; }
  .hessqf-step-pill span { display: none; }  /* show just numbers on very narrow */
  .hessqf-step-pill .hessqf-step-number { width: 24px; height: 24px; font-size: 0.8rem; }

  /* Selection bar to single column for tighter layouts */
  .hessqf-selection-bar { grid-template-columns: 1fr; gap: 10px; }

  /* Product-card rows: tighter vertical rhythm */
  .hessqf-form-wrap tbody td { padding: 10px 12px; font-size: 0.9rem; }
  .hessqf-form-wrap tbody td::before { font-size: 0.7rem; }

  /* Tier card internal spacing */
  .hqf-tier-card { padding: 14px 12px; }
  .hqf-tier-card-price { font-size: 1.1rem; margin: 8px 0 10px; }

  /* Add to Quote / Select This Unit buttons: big touch targets */
  .hessqf-form-wrap tbody td:last-child .hessqf-btn,
  .hqf-tier-card .hessqf-btn { padding: 11px 12px; font-size: 0.88rem; min-height: 44px; }

  /* Quote number banner: shrink copy, keep prominent */
  .hessqf-qn-value { font-size: 0.98rem; }
  .hessqf-qn-label { font-size: 0.7rem; }

  /* Prompt state slimmer */
  .hqf-no-results.hqf-prompt { padding: 32px 14px; }
  .hqf-prompt-icon  { font-size: 1.5rem; }
  .hqf-prompt-title { font-size: 0.92rem; }
  .hqf-prompt-sub   { font-size: 0.8rem; }
}

/* Ultra-narrow (small phones) */
@media (max-width: 360px) {
  .hessqf-form-wrap { padding: 10px 6px 24px; }
  .hessqf-card-title { font-size: 0.85rem; }
  .hessqf-filter-group select,
  .hessqf-form-group input,
  .hessqf-form-group select,
  .hessqf-form-group textarea { font-size: 15px; }
}

/* Step 2 summary — emphasized Total Investment row */
.hessqf-summary-row.hqf-summary-total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 2px solid #c0457a;
  font-weight: 700;
}
.hessqf-summary-row.hqf-summary-total .hqf-slabel,
.hessqf-summary-row.hqf-summary-total .hqf-svalue {
  color: #c0457a;
  font-size: 1.05rem;
}