/* Public quote-flow responsive refinements. */
.mobile-hero-summary,
.mobile-progress-summary,
.mobile-progress-track,
.mobile-quote-action {
  display: none;
}

/* Mobile quote-rate contract: keep the service and total readable without
   squeezing the price off-screen or turning every field into an unrelated row. */
@media (max-width: 760px) {
  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .hero-copy {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0 4px;
  }

  .hero-copy > :not(.mobile-hero-summary) {
    display: none;
  }

  .mobile-hero-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 11px 13px;
    border: 1px solid rgba(19, 47, 86, 0.1);
    border-radius: 10px;
    color: var(--blue-dark);
    background: rgba(255, 255, 255, 0.8);
  }

  .mobile-hero-summary strong {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1.25;
  }

  .mobile-hero-summary span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.3;
    text-align: right;
  }

  .quote-flow {
    scroll-margin-top: 76px;
    padding-bottom: 52px;
  }

  .progress-rail {
    position: relative;
    display: block;
    min-height: 42px;
    padding: 0 2px;
  }

  .progress-rail .step-tab {
    display: none;
  }

  .mobile-progress-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    color: var(--blue-dark);
  }

  .mobile-progress-summary strong {
    font-size: 13px;
  }

  .mobile-progress-summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
  }

  .mobile-progress-track {
    display: block;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf3;
  }

  .mobile-progress-track span {
    display: block;
    width: 25%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--orange-dark), #ef9a69);
    transition: width 0.24s ease;
  }

  .flow-panel {
    padding: 16px 14px;
  }

  .step-panel.active {
    gap: 16px;
  }

  .step-panel[data-panel="2"] .panel-heading {
    gap: 10px;
  }

  .step-panel[data-panel="2"] .panel-heading .eyebrow {
    margin-bottom: 5px;
    font-size: 10px;
  }

  .step-panel[data-panel="2"] .panel-heading h2 {
    font-size: 27px;
  }

  .item-mix-card {
    gap: 12px;
    padding: 14px;
  }

  .item-mix-head strong {
    font-size: 20px;
  }

  .item-mix-head p {
    font-size: 12px;
  }

  .item-mix-row {
    min-height: 62px;
    padding: 9px 10px;
  }

  .item-mix-row p,
  .item-mix-footer {
    display: none;
  }

  .item-mix-special {
    margin-top: 4px;
  }

  .item-mix-special > summary {
    min-height: 48px;
    padding: 10px 12px;
  }

  .size-summary {
    gap: 9px;
    padding: 12px;
  }

  .size-summary p {
    font-size: 12px;
  }

  .ai-guidance {
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: #f7fbff;
  }

  .ai-guidance .note {
    border-bottom: 1px solid rgba(47, 102, 201, 0.12);
  }

  .ai-guidance .note:last-child {
    border-bottom: 0;
  }

  .ai-guidance .note summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
  }

  .ai-guidance .note summary::-webkit-details-marker {
    display: none;
  }

  .ai-guidance .note summary strong {
    margin: 0;
    font-size: 13px;
  }

  .ai-guidance .note summary i {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease;
  }

  .ai-guidance .note[open] summary i {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  .ai-guidance .note > span {
    display: block;
    padding: 0 12px 12px;
    color: var(--muted);
    font-size: 12px;
  }

  .step-panel[data-panel="2"] .panel-actions .primary-button {
    display: none;
  }

  .step-panel[data-panel="2"] .panel-actions {
    justify-content: flex-start;
  }

  .step-panel[data-panel="2"] .panel-actions .secondary-button {
    width: auto;
    min-height: 40px;
    padding-inline: 4px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-quote-action:not([hidden]) {
    position: fixed;
    z-index: 80;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 66px;
    padding: 9px 9px 9px 15px;
    border: 1px solid rgba(19, 47, 86, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 48px rgba(19, 47, 86, 0.2);
    backdrop-filter: blur(14px);
  }

  .mobile-quote-action span {
    min-width: 0;
    color: var(--blue-dark);
    font-size: 13px;
    font-weight: 900;
  }

  .mobile-quote-action button {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--orange-dark);
    box-shadow: 0 10px 24px rgba(200, 76, 35, 0.22);
    font-size: 14px;
    font-weight: 900;
  }

  .rate-card {
    grid-template-columns: 44px minmax(0, 1fr) max-content;
    grid-template-areas:
      "visual badge badge"
      "visual date price"
      "meta meta meta"
      "source source select";
    align-items: start;
    gap: 9px 11px;
    width: 100%;
    min-width: 0;
    padding: 16px;
    overflow: hidden;
  }

  .rate-card .rate-visual {
    grid-area: visual;
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .rate-card > .badge {
    grid-area: badge;
    justify-self: start;
    max-width: 100%;
  }

  .rate-card .rate-date {
    grid-area: date;
    min-width: 0;
  }

  .rate-card .rate-date strong {
    font-size: 16px;
    overflow-wrap: anywhere;
  }

  .rate-card .rate-date span {
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .rate-card .price,
  .rate-card.estimated .price {
    grid-area: price;
    align-self: start;
    justify-self: end;
    max-width: 100%;
    font-size: clamp(25px, 7.5vw, 32px);
    white-space: nowrap;
  }

  .rate-card .meta {
    grid-area: meta;
    min-width: 0;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .rate-card .rate-source {
    grid-area: source;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .rate-card .select-line {
    grid-area: select;
    align-self: center;
    justify-self: end;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .rate-card {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "visual badge"
      "visual date"
      "price price"
      "meta meta"
      "source source"
      "select select";
  }

  .rate-card .price,
  .rate-card.estimated .price,
  .rate-card .select-line {
    justify-self: start;
  }
}

/* Visual system refinement: reserve cards for decisions and primary actions. */
.hero h1,
.instant-quote h2,
.panel-heading h2 {
  font-weight: var(--weight-hero);
}

.hero-journey-card {
  padding: 16px 0 16px 18px;
  border: 0;
  border-left: 2px solid var(--color-brand);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero-journey-card strong,
.item-mix-head strong,
.rate-card .rate-date strong {
  font-weight: var(--weight-card-title);
}

.journey-bag {
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: none;
}

.instant-quote,
.flow-panel {
  border-radius: var(--radius-panel);
}

.instant-quote {
  box-shadow: var(--shadow-float);
}

.flow-panel {
  box-shadow: var(--shadow-light);
}

.instant-quote::before {
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}

.route-form input,
.route-form select,
.quote-flow input,
.quote-flow select,
.quote-flow textarea,
.quote-flow button,
.primary-button,
.secondary-button,
.step-tab {
  border-radius: var(--radius-control);
}

.item-mix-card,
.item-mix-row,
.item-mix-special,
.rate-card,
.mode-card,
.recommendation-card,
.protection-panel,
.contents-panel {
  border-radius: var(--radius-card);
  box-shadow: none;
}

.size-summary,
.ai-guidance {
  padding-inline: 2px;
  border: 0;
  border-top: 1px solid rgba(20, 47, 88, 0.13);
  border-bottom: 1px solid rgba(20, 47, 88, 0.13);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ai-guidance {
  gap: 0;
  padding-block: 5px;
}

.ai-guidance .note {
  padding: 11px 2px;
  border-bottom: 1px solid rgba(20, 47, 88, 0.08);
}

.ai-guidance .note:last-child {
  border-bottom: 0;
}

.rate-card:hover {
  box-shadow: var(--shadow-light);
}

.rate-card.selected,
.rate-card.estimated.selected {
  box-shadow: 0 0 0 3px rgba(232, 93, 42, 0.1), var(--shadow-light);
}

.badge,
.soft-pill,
.tiny-note,
.step-pill {
  border-radius: var(--radius-pill);
}

.primary-button,
.secondary-button,
.header-action,
.track-order-link,
.panel-actions button {
  font-weight: var(--weight-card-title);
}

@media (max-width: 760px) {
  .mobile-hero-summary {
    border: 0;
    border-bottom: 1px solid rgba(20, 47, 88, 0.12);
    border-radius: 0;
    background: transparent;
  }

  .mobile-quote-action:not([hidden]) {
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-float);
  }

  .mobile-quote-action button {
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-light);
    font-weight: var(--weight-card-title);
  }

  .ai-guidance {
    padding-inline: 0;
    background: transparent;
  }
}