/* public/design/hm-trips.css
 * ─────────────────────────────────────────────────────────────────────────
 * "Your trips" family (site redesign, step 2): bookings, watchlist, rebook /
 * watch detail, rebook confirmation, shared deal. Requires hm-tokens.css.
 *
 * CONTRACT: every selector is scoped to `body.hm-trips`, so this file styles
 * nothing until a page opts in by carrying that class. It restyles the
 * classes those pages already use -- the markup keeps every JS hook, test
 * selector (.booking-card, [data-hm-saving-claim], .rebook-btn, .wl-*,
 * [data-sparkline-id], [data-hmmc-*]) and server-rendered value.
 *
 * The look is the approved prototype's account vocabulary: cream ground,
 * white cards at 18px radius, Instrument Serif headings, green actions, quiet
 * muted metadata, a verified-price band with a green rule, and offer rows.
 * Production features the prototype does not show (sparklines, demand badges,
 * velocity notices, the deal bar) are kept and styled to match.
 *
 * Every var() carries the approved literal as its fallback, as in the shell.
 */

/* ── Page ground ───────────────────────────────────────────────────────── */
body.hm-trips {
  background: var(--hm-cream, #faf9f6);
  color: var(--hm-ink, #0d2135);
  font-family: var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}
body.hm-trips .bookings-page-wrap,
body.hm-trips .page {
  max-width: var(--hm-max-content, 1200px);
  margin: 0 auto;
  padding: 0 var(--hm-gutter, 40px) 70px;
  box-sizing: border-box;
}

/* ── Intro: eyebrow, serif headline, supporting line, primary action ───── */
/* Headline and its supporting line stack; the primary action sits beside them. */
body.hm-trips .page-hero,
body.hm-trips .hero {
  max-width: var(--hm-max-content, 1200px);
  margin: 0 auto;
  padding: 39px var(--hm-gutter, 40px) 0;
  background: none;
  color: var(--hm-ink, #0d2135);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'eyebrow action'
    'title   action'
    'lede    action';
  align-items: center;
  justify-items: start;
  gap: 0 24px;
  box-sizing: border-box;
}
body.hm-trips .page-hero h1,
body.hm-trips .hero h1 { grid-area: title; }
body.hm-trips .page-hero p,
body.hm-trips .hero p { grid-area: lede; }
body.hm-trips .hero .eyebrow { grid-area: eyebrow; }
body.hm-trips .page-hero .monitor-cta { grid-area: action; justify-self: end; }
body.hm-trips .page-hero h1,
body.hm-trips .hero h1 {
  font: 400 54px/1.1 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  letter-spacing: -1.1px;
  color: var(--hm-ink, #0d2135);
  margin: 0 0 13px;
  text-wrap: balance;
}
body.hm-trips .page-hero p,
body.hm-trips .hero p {
  margin: 0;
  max-width: 560px;
  color: var(--hm-muted, #586976);
  font-size: 14px;
  line-height: 1.6;
}
body.hm-trips .hero .eyebrow {
  margin-bottom: 12px;
  color: var(--hm-green, #1a6b4a);
  font: 700 10px/1.4 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
body.hm-trips .page-hero .monitor-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hm-control-min, 44px);
  padding: 11px 20px;
  border: 1px solid var(--hm-green, #1a6b4a);
  border-radius: 9px;
  background: var(--hm-green, #1a6b4a);
  color: var(--hm-white, #fff);
  font: 600 12px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--hm-fast, 150ms);
}
body.hm-trips .page-hero .monitor-cta:hover { background: var(--hm-green-dark, #125038); }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
body.hm-trips .tab-bar {
  display: flex;
  justify-content: flex-start;
  gap: 31px;
  margin: 29px 0 27px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--hm-line, #e3e6e2);
  background: none;
  overflow-x: auto;
}
body.hm-trips .tab-btn {
  flex-shrink: 0;
  padding: 13px 0 15px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--hm-muted, #586976);
  font: 500 13px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  position: relative;
  cursor: pointer;
}
body.hm-trips .tab-btn.active {
  color: var(--hm-green, #1a6b4a);
  font-weight: 700;
  background: none;
}
body.hm-trips .tab-btn.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--hm-green, #1a6b4a);
}
body.hm-trips .tab-btn:focus-visible { outline: 2px solid var(--hm-green, #1a6b4a); outline-offset: 3px; }

/* ── Summary strip ─────────────────────────────────────────────────────── */
body.hm-trips .dash-stats {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: 0;
  margin-bottom: 27px;
  padding: 20px 26px;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 13px;
  background: var(--hm-white, #fff);
  box-shadow: var(--hm-shadow-card, 0 1px 2px rgba(13, 33, 53, .06), 0 8px 24px rgba(13, 33, 53, .08));
}
body.hm-trips .dash-stat {
  padding: 0 24px;
  border-left: 1px solid var(--hm-line, #e3e6e2);
  background: none;
  text-align: left;
}
body.hm-trips .dash-stat:first-child { padding-left: 0; border-left: 0; }
body.hm-trips .dash-stat .ds-val {
  margin: 3px 0;
  font: 500 27px/1.3 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: -.8px;
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .dash-stat .ds-val.terra { color: var(--hm-green, #1a6b4a); }
body.hm-trips .dash-stat .ds-val.gold { color: var(--hm-ink, #0d2135); }
body.hm-trips .dash-stat .ds-label { font-size: 11px; color: var(--hm-muted, #586976); }

/* ── Savings banner: the verified-price band ───────────────────────────── */
body.hm-trips .savings-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 27px;
  padding: 16px 20px;
  border: 1px solid #cfe0d6;
  border-left: 3px solid var(--hm-green, #1a6b4a);
  border-radius: 13px;
  background: var(--hm-mint, #edf3ee);
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .savings-banner .label {
  color: var(--hm-green, #1a6b4a);
  font: 600 11px/1.4 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}
body.hm-trips .savings-banner .big-num {
  font: 500 34px/1.3 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: -1px;
}

body.hm-trips .savings-banner-note {
  max-width: 280px;
  color: #315c42;
  font-size: 12px;
  line-height: 1.6;
}
body.hm-trips .monitoring-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 27px;
  padding: 13px 16px;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 13px;
  background: var(--hm-white, #fff);
  color: var(--hm-muted, #586976);
  font-size: 12px;
}

/* Lifetime totals (what has been saved and scanned), below the current-state strip */
body.hm-trips .savings-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 27px;
}
body.hm-trips .savings-summary-item {
  padding: 16px 18px;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 13px;
  background: var(--hm-white, #fff);
}
body.hm-trips .savings-summary .ss-label {
  margin-bottom: 4px;
  color: var(--hm-muted, #586976);
  font-size: 11px;
}
body.hm-trips .savings-summary .ss-val {
  font: 500 24px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: -.6px;
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .savings-summary .ss-val.saved { color: var(--hm-green, #1a6b4a); }

/* ── Notices: velocity (rising/falling) and per-card advice ────────────── */
body.hm-trips .velocity-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 13px 15px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.6;
}
body.hm-trips .velocity-alert.rising { background: var(--hm-amber-bg, #fbf5e9); border: 1px solid #ecdcc0; color: var(--hm-amber, #875519); }
body.hm-trips .velocity-alert.falling { background: var(--hm-mint, #edf3ee); border: 1px solid #cfe0d6; color: #315c42; }
body.hm-trips .velocity-alert strong { display: block; margin-bottom: 3px; font-weight: 600; }
body.hm-trips .card-advice {
  margin: 0 23px 18px;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.6;
}

/* ── Booking / watch card ──────────────────────────────────────────────── */
body.hm-trips .bookings-grid { display: grid; gap: 0; }
body.hm-trips .booking-card {
  margin-bottom: 20px;
  padding: 0;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 18px;
  background: var(--hm-white, #fff);
  box-shadow: var(--hm-shadow-card, 0 1px 2px rgba(13, 33, 53, .06), 0 8px 24px rgba(13, 33, 53, .08));
  overflow: hidden;
}
body.hm-trips .booking-card.alert { border-color: #cfe0d6; }
body.hm-trips .card-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 23px 23px 20px;
  border: 0;
  background: none;
}
body.hm-trips .hotel-row { display: flex; gap: 18px; align-items: flex-start; flex: 1; min-width: 0; }
body.hm-trips .hotel-icon {
  width: 109px;
  height: 107px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--hm-mint, #edf3ee);
  color: #47674d;
  font-family: var(--hm-font-display, 'Instrument Serif', Georgia, serif);
  font-size: 30px;
}
body.hm-trips .hotel-details { min-width: 0; }
body.hm-trips .hotel-row h3 {
  margin: 0 0 8px;
  font: 400 28px/1.12 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  color: var(--hm-ink, #0d2135);
  letter-spacing: -.4px;
}
body.hm-trips .booking-meta { display: flex; flex-wrap: wrap; gap: 7px; font-size: 12px; color: #465b67; }
body.hm-trips .meta-chip {
  padding: 4px 8px;
  border: 0;
  border-radius: 5px;
  background: #f1f3f4;
  color: var(--hm-muted, #586976);
  font-size: 10px;
  font-weight: 500;
}
body.hm-trips .chain-badge,
body.hm-trips .status-drop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 0;
  border-radius: 5px;
  background: var(--hm-mint, #edf3ee);
  color: var(--hm-green, #1a6b4a);
  font: 500 10px/1.4 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  vertical-align: middle;
}
body.hm-trips .chain-badge { background: #f1f3f4; color: var(--hm-muted, #586976); }

/* What the customer paid, and the terms that bound the decision */
body.hm-trips .trip-paid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding: 12px 23px;
  border-top: 1px solid #eff1ed;
  border-bottom: 1px solid #eff1ed;
  background: #f7f8f6;
  color: var(--hm-muted, #586976);
  font-size: 11px;
}
body.hm-trips .trip-paid b { color: var(--hm-ink, #0d2135); font-size: 13px; font-weight: 600; }

/* Price block: paid vs current, saving marked by the template, never by CSS */
body.hm-trips .card-price-block { text-align: right; flex-shrink: 0; }
body.hm-trips .card-price-block .was-price { font-size: 11px; color: var(--hm-muted, #586976); }
body.hm-trips .card-price-block .now-price {
  font: 500 34px/1.3 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: -1px;
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .card-price-block .now-price.neutral { color: var(--hm-ink, #0d2135); }
body.hm-trips .card-price-block .price-sub { margin-top: 4px; font-size: 11px; color: var(--hm-muted, #586976); }
body.hm-trips .card-price-block .price-sub .save-highlight {
  display: inline-block;
  margin-top: 4px;
  padding: 5px 10px;
  border-radius: 5px;
  background: #e3f0e5;
  color: #155939;
  font-size: 12px;
  font-weight: 600;
}

/* The saving band: green rule, quiet ground, one claim (template-marked) */
body.hm-trips .card-savings-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 23px 20px;
  padding: 13px 16px;
  border: 0;
  border-left: 3px solid var(--hm-green, #1a6b4a);
  border-radius: 0 9px 9px 0;
  background: var(--hm-mint, #edf3ee);
  color: #315c42;
  font-size: 12px;
}
body.hm-trips .savings-bar-text .amt { font-weight: 700; color: #155939; }
body.hm-trips .scan-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hm-muted, #586976);
  font-size: 10px;
  white-space: nowrap;
}
body.hm-trips .scan-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hm-green, #1a6b4a); }

/* Primary action */
body.hm-trips .book-deal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: calc(100% - 46px);
  margin: 0 23px 20px;
  padding: 14px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--hm-green, #1a6b4a);
  color: var(--hm-white, #fff);
  font-family: var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  cursor: pointer;
  transition: background-color var(--hm-fast, 150ms);
}
body.hm-trips .book-deal-bar:hover { background: var(--hm-green-dark, #125038); }
body.hm-trips .book-deal-bar .bdb-price { font: 600 16px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif); }
body.hm-trips .book-deal-bar .bdb-pn { font-size: 11px; font-weight: 400; opacity: .85; }
body.hm-trips .book-deal-bar .bdb-sub { display: block; margin-top: 3px; font-size: 11px; opacity: .85; }
body.hm-trips .book-deal-bar .bdb-go { font-size: 12px; font-weight: 600; white-space: nowrap; }
body.hm-trips .rebook-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hm-control-min, 44px);
  padding: 11px 20px;
  border: 1px solid var(--hm-green, #1a6b4a);
  border-radius: 9px;
  background: var(--hm-green, #1a6b4a);
  color: var(--hm-white, #fff);
  font: 600 12px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  cursor: pointer;
}
body.hm-trips .rebook-btn:hover { background: var(--hm-green-dark, #125038); }

/* Card foot: quiet controls, evidence and the sparkline */
body.hm-trips .card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 23px;
  border-top: 1px solid var(--hm-line, #e3e6e2);
  background: none;
  font-size: 10px;
  color: var(--hm-muted, #586976);
}
body.hm-trips .icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 7px;
  background: var(--hm-white, #fff);
  color: var(--hm-muted, #586976);
  font: 500 11px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  cursor: pointer;
  transition: border-color var(--hm-fast, 150ms), color var(--hm-fast, 150ms);
}
body.hm-trips .icon-btn:hover { border-color: #b4cbbd; color: var(--hm-ink, #0d2135); }
body.hm-trips .icon-btn.danger:hover { border-color: var(--hm-error, #b42318); color: var(--hm-error, #b42318); }
body.hm-trips .card-footer-divider { display: none; }
body.hm-trips .card-footer-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
body.hm-trips .share-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--hm-green, #1a6b4a);
  font: 600 11px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
body.hm-trips .card-sparkline {
  padding: 0 23px 16px;
  border: 0;
  background: none;
}
body.hm-trips .sparkline-wrap { display: flex; align-items: center; gap: 10px; }
body.hm-trips .sparkline-label { font-size: 10px; color: var(--hm-muted, #586976); }
body.hm-trips .demand-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 5px;
  background: #f1f3f4;
  color: var(--hm-muted, #586976);
  font-size: 10px;
  font-weight: 500;
}
body.hm-trips .demand-badge.peak { background: var(--hm-amber-bg, #fbf5e9); color: var(--hm-amber, #875519); }
body.hm-trips .demand-badge.off-peak { background: var(--hm-mint, #edf3ee); color: var(--hm-green, #1a6b4a); }

/* ── Email gate, session bar, empty state ──────────────────────────────── */
body.hm-trips .email-gate {
  max-width: 590px;
  margin: 29px auto 0;
  padding: 30px;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 16px;
  background: var(--hm-white, #fff);
  box-shadow: var(--hm-shadow-card, 0 1px 2px rgba(13, 33, 53, .06), 0 8px 24px rgba(13, 33, 53, .08));
  text-align: left;
}
body.hm-trips .email-gate h2 {
  margin: 0 0 10px;
  font: 400 30px/1.1 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .email-gate p { margin: 0 0 18px; color: var(--hm-muted, #586976); font-size: 13px; line-height: 1.7; }
body.hm-trips .email-gate-row { display: flex; gap: 10px; flex-wrap: wrap; }
body.hm-trips .email-gate-row input {
  flex: 1;
  min-width: 200px;
  min-height: var(--hm-control-min, 44px);
  padding: 11px 13px;
  border: 1px solid var(--hm-field-edge, #7f8c84);
  border-radius: var(--hm-radius-control, 8px);
  background: var(--hm-white, #fff);
  color: var(--hm-ink, #0d2135);
  font: 14px/1.3 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}
body.hm-trips .email-gate-row input:focus {
  outline: none;
  border-color: var(--hm-green, #1a6b4a);
  box-shadow: 0 0 0 3px var(--hm-focus-glow, rgba(26, 107, 74, .16));
}
body.hm-trips .email-gate-row button,
body.hm-trips .lookup-btn,
body.hm-trips .submit-btn {
  min-height: var(--hm-control-min, 44px);
  padding: 11px 20px;
  border: 1px solid var(--hm-green, #1a6b4a);
  border-radius: 9px;
  background: var(--hm-green, #1a6b4a);
  color: var(--hm-white, #fff);
  font: 600 12px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  cursor: pointer;
  transition: background-color var(--hm-fast, 150ms);
}
body.hm-trips .email-gate-row button:hover,
body.hm-trips .lookup-btn:hover,
body.hm-trips .submit-btn:hover { background: var(--hm-green-dark, #125038); }
body.hm-trips .session-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  color: var(--hm-muted, #586976);
}
body.hm-trips .session-email { padding: 0; border: 0; background: none; color: var(--hm-muted, #586976); }
body.hm-trips .forget-btn {
  min-height: 36px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--hm-green, #1a6b4a);
  font: 600 11px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
body.hm-trips .empty-state,
body.hm-trips .empty-watches {
  padding: 55px 25px;
  border: 1px dashed #ccd8ce;
  border-radius: 13px;
  background: var(--hm-white, #fff);
  color: var(--hm-muted, #586976);
  text-align: center;
}
body.hm-trips .empty-state h3 {
  margin-bottom: 12px;
  font: 400 30px/1.1 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .empty-state p { color: var(--hm-muted, #586976); font-size: 13px; }
body.hm-trips .empty-state .big-icon { color: #93ae97; }

/* ── Watchlist page ────────────────────────────────────────────────────── */
body.hm-trips .card {
  margin-bottom: 20px;
  padding: 27px;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 15px;
  background: var(--hm-white, #fff);
  box-shadow: var(--hm-shadow-card, 0 1px 2px rgba(13, 33, 53, .06), 0 8px 24px rgba(13, 33, 53, .08));
}
body.hm-trips .card-title {
  margin-bottom: 16px;
  font: 400 30px/1.1 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  color: var(--hm-ink, #0d2135);
}
body.hm-trips label {
  color: var(--hm-ink, #0d2135);
  font: 600 11px/1.3 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: none;
}
body.hm-trips input[type="text"],
body.hm-trips input[type="email"],
body.hm-trips input[type="number"],
body.hm-trips input[type="date"],
body.hm-trips select {
  min-height: var(--hm-control-min, 44px);
  border: 1px solid var(--hm-field-edge, #7f8c84);
  border-radius: var(--hm-radius-control, 8px);
  background: var(--hm-white, #fff);
  color: var(--hm-ink, #0d2135);
  font: 14px/1.3 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}
body.hm-trips input:focus,
body.hm-trips select:focus {
  outline: none;
  border-color: var(--hm-green, #1a6b4a);
  box-shadow: 0 0 0 3px var(--hm-focus-glow, rgba(26, 107, 74, .16));
}
body.hm-trips .consent-row label { font-weight: 400; font-size: 12px; color: var(--hm-muted, #586976); }
body.hm-trips .alert { border-radius: 9px; font-size: 13px; }
body.hm-trips .alert-success { background: var(--hm-mint, #edf3ee); border: 1px solid #cfe0d6; color: #315c42; }
body.hm-trips .alert-error { background: var(--hm-error-bg, #fef3f2); border: 1px solid #f3c9c4; color: var(--hm-error, #b42318); }
body.hm-trips .lookup-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
body.hm-trips .watch-card {
  margin-bottom: 12px;
  padding: 20px 22px;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 14px;
  background: var(--hm-white, #fff);
}
body.hm-trips .watch-hotel {
  margin-bottom: 6px;
  font: 400 25px/1.15 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .watch-meta { margin-bottom: 14px; font-size: 12px; color: var(--hm-muted, #586976); }
body.hm-trips .watch-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 14px; }
body.hm-trips .watch-price-item {
  padding: 16px;
  border: 1px solid #dfe7df;
  border-radius: 10px;
}
body.hm-trips .watch-price-item .label {
  margin-bottom: 4px;
  color: var(--hm-muted, #586976);
  font: 500 10px/1.4 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.hm-trips .watch-price-item .value {
  font: 500 24px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .watch-price-item .value.hit { color: var(--hm-green, #1a6b4a); }
body.hm-trips .status-badge {
  padding: 4px 8px;
  border-radius: 5px;
  font: 500 10px/1.4 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: normal;
  text-transform: none;
}
body.hm-trips .badge-watching { background: var(--hm-mint, #edf3ee); color: var(--hm-green, #1a6b4a); }
body.hm-trips .badge-alerted { background: var(--hm-amber-bg, #fbf5e9); color: var(--hm-amber, #875519); }
body.hm-trips .stop-btn {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 7px;
  background: var(--hm-white, #fff);
  color: var(--hm-muted, #586976);
  font: 500 11px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}
body.hm-trips .stop-btn:hover { border-color: var(--hm-error, #b42318); color: var(--hm-error, #b42318); }
body.hm-trips .skeleton {
  background: linear-gradient(90deg, var(--hm-surface-muted, #eef2ef) 25%, var(--hm-cream, #faf9f6) 50%, var(--hm-surface-muted, #eef2ef) 75%);
  background-size: 200% 100%;
}

/* ── Rebook / watch detail (rebook.html serves both) ───────────────────── */
/* The page paints this header as a dark rounded panel with an overlay
   gradient and its own padding; the redesign uses an editorial heading on the
   page ground, so the panel, its clipping and the overlay are all cleared. */
body.hm-trips .booking-header {
  margin-bottom: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--hm-ink, #0d2135);
  overflow: visible;
}
body.hm-trips .booking-header::before { content: none; }
body.hm-trips .booking-header .eyebrow {
  margin-bottom: 12px;
  color: var(--hm-green, #1a6b4a);
  font: 700 10px/1.4 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
body.hm-trips .booking-header h1 {
  margin: 0 0 13px;
  font: 400 48px/1.1 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  letter-spacing: -1px;
  color: var(--hm-ink, #0d2135);
  text-wrap: balance;
}
body.hm-trips .booking-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  font-size: 12px;
  color: var(--hm-muted, #586976);
}
body.hm-trips .booking-meta strong { color: var(--hm-ink, #0d2135); font-weight: 600; }

/* The saving statement: the page's single headline claim, on the green rule */
body.hm-trips .saving-alert {
  gap: 14px;
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 0;
  border-left: 3px solid var(--hm-green, #1a6b4a);
  border-radius: 0 13px 13px 0;
  background: var(--hm-mint, #edf3ee);
  color: #315c42;
}
body.hm-trips .saving-alert-text h2 {
  margin: 0 0 4px;
  font: 400 30px/1.1 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  letter-spacing: -.5px;
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .saving-alert-text p { font-size: 12px; color: #315c42; }

body.hm-trips .section-label {
  margin-bottom: 10px;
  color: var(--hm-muted, #586976);
  font: 600 11px/1.4 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Offer rows: provider, total, what it means, one action */
body.hm-trips .price-list,
body.hm-trips .chart-card,
body.hm-trips .instructions,
body.hm-trips .confirm-card {
  margin-bottom: 20px;
  padding: 0;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 18px;
  background: var(--hm-white, #fff);
  box-shadow: var(--hm-shadow-card, 0 1px 2px rgba(13, 33, 53, .06), 0 8px 24px rgba(13, 33, 53, .08));
  overflow: hidden;
}
body.hm-trips .chart-card,
body.hm-trips .instructions,
body.hm-trips .confirm-card { padding: 23px; }
body.hm-trips .price-row {
  gap: 15px;
  align-items: center;
  min-height: 77px;
  padding: 14px 23px;
  border: 0;
  border-top: 1px solid #e9ede8;
  background: none;
}
body.hm-trips .price-row:first-child { border-top: 0; }
body.hm-trips .price-row.best-row { background: var(--hm-mint, #edf3ee); }
body.hm-trips .source-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/1.3 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .best-badge {
  padding: 4px 8px;
  border: 0;
  border-radius: 5px;
  background: #e3f0e5;
  color: #155939;
  font: 600 10px/1.4 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: normal;
  text-transform: none;
}
body.hm-trips .direct-badge {
  padding: 4px 8px;
  border: 0;
  border-radius: 5px;
  background: #f1f3f4;
  color: var(--hm-muted, #586976);
  font: 500 10px/1.4 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: normal;
  text-transform: none;
}
body.hm-trips .price-amount {
  font: 600 18px/1.3 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: -.4px;
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .price-saving { font-size: 12px; font-weight: 600; color: #155939; }
body.hm-trips .price-saving.nil { color: var(--hm-muted, #586976); font-weight: 400; }
body.hm-trips .book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid var(--hm-field-border, #d4ded4);
  border-radius: 9px;
  background: var(--hm-white, #fff);
  color: var(--hm-ink, #0d2135);
  font: 600 11px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--hm-fast, 150ms), border-color var(--hm-fast, 150ms);
}
body.hm-trips .book-btn:hover { border-color: var(--hm-green, #1a6b4a); }
body.hm-trips .book-btn.primary {
  border-color: var(--hm-green, #1a6b4a);
  background: var(--hm-green, #1a6b4a);
  color: var(--hm-white, #fff);
}
body.hm-trips .book-btn.primary:hover { background: var(--hm-green-dark, #125038); }
body.hm-trips .empty-prices {
  padding: 40px 23px;
  color: var(--hm-muted, #586976);
  font-size: 13px;
  text-align: center;
}
body.hm-trips .prices-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  color: var(--hm-muted, #586976);
}
body.hm-trips .prices-meta-bar .refresh-btn {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 7px;
  background: var(--hm-white, #fff);
  color: var(--hm-muted, #586976);
  font: 500 11px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}
body.hm-trips .prices-meta-bar .refresh-btn:hover { border-color: #b4cbbd; color: var(--hm-ink, #0d2135); }
body.hm-trips .prices-disclaimer { margin-bottom: 12px; font-size: 11px; color: var(--hm-muted, #586976); line-height: 1.6; }

/* Chart panel and its three figures */
body.hm-trips .chart-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 18px; }
body.hm-trips .chart-stat { padding: 0; border: 0; background: none; }
body.hm-trips .chart-stat-label { font-size: 11px; color: var(--hm-muted, #586976); }
body.hm-trips .chart-stat-val {
  margin-top: 3px;
  font: 500 24px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: -.6px;
}
body.hm-trips .chart-status { font-size: 12px; color: var(--hm-muted, #586976); }

/* Numbered steps: what to do, in order */
body.hm-trips .instructions h3,
body.hm-trips .confirm-card h3 {
  margin: 0 0 14px;
  font: 400 25px/1.15 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .steps { display: grid; gap: 0; }
body.hm-trips .step { display: flex; gap: 14px; align-items: flex-start; padding: 0 0 17px; }
body.hm-trips .step:last-child { padding-bottom: 0; }
body.hm-trips .step-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid #b4cbbd;
  border-radius: 50%;
  background: none;
  color: var(--hm-green, #1a6b4a);
  font: 600 10px/1 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}
body.hm-trips .step-text { font-size: 12px; line-height: 1.7; color: var(--hm-muted, #586976); }
body.hm-trips .step-text strong { color: var(--hm-ink, #0d2135); font-weight: 600; }

body.hm-trips .confirm-card p { margin-bottom: 14px; font-size: 12px; line-height: 1.7; color: var(--hm-muted, #586976); }
body.hm-trips .confirm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.hm-trips .confirm-prefix { color: var(--hm-muted, #586976); font-size: 14px; }
body.hm-trips .confirm-row input {
  flex: 1;
  min-width: 160px;
  min-height: var(--hm-control-min, 44px);
  padding: 11px 13px;
  border: 1px solid var(--hm-field-edge, #7f8c84);
  border-radius: var(--hm-radius-control, 8px);
  background: var(--hm-white, #fff);
  color: var(--hm-ink, #0d2135);
  font: 14px/1.3 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}
body.hm-trips .confirm-btn {
  min-height: var(--hm-control-min, 44px);
  padding: 11px 20px;
  border: 1px solid var(--hm-green, #1a6b4a);
  border-radius: 9px;
  background: var(--hm-green, #1a6b4a);
  color: var(--hm-white, #fff);
  font: 600 12px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  cursor: pointer;
}
body.hm-trips .confirm-btn:hover { background: var(--hm-green-dark, #125038); }
body.hm-trips .confirm-btn:disabled { cursor: progress; opacity: .7; }
body.hm-trips .confirm-success {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--hm-mint, #edf3ee);
  color: #315c42;
  font-size: 12px;
}

/* ── Rebook confirmation and shared deal (centred single-card pages) ───── */
/* Both pages move their centred/padded body layout to .hm-page-body (step 1e),
   so the shell stays full-width while the card keeps its own centring. */
body.hm-trips .hm-page-body > .card,
body.hm-trips .deal-card,
body.hm-trips .state-card {
  padding: 32px;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 18px;
  background: var(--hm-white, #fff);
  box-shadow: var(--hm-shadow-card, 0 1px 2px rgba(13, 33, 53, .06), 0 8px 24px rgba(13, 33, 53, .08));
}
body.hm-trips .hm-page-body > .card h1,
body.hm-trips .state-card h2 {
  margin: 0 0 10px;
  font: 400 34px/1.1 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  letter-spacing: -.6px;
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .subtitle,
body.hm-trips .state-card p {
  color: var(--hm-muted, #586976);
  font-size: 13px;
  line-height: 1.7;
}
body.hm-trips .hotel-name { color: var(--hm-green, #1a6b4a); font-weight: 600; }
body.hm-trips .logo-mark {
  border-radius: 13px 13px 15px 15px;
  background: var(--hm-ink, #0d2135);
  font-family: Georgia, 'Times New Roman', serif;
}
body.hm-trips .logo-name { font-family: var(--hm-font-display, 'Instrument Serif', Georgia, serif); font-weight: 400; font-size: 20px; }
body.hm-trips .prefix span { color: var(--hm-muted, #586976); }
body.hm-trips .saving-preview {
  border: 0;
  border-left: 3px solid var(--hm-green, #1a6b4a);
  border-radius: 0 10px 10px 0;
  background: var(--hm-mint, #edf3ee);
}
body.hm-trips .saving-preview .label {
  color: var(--hm-green, #1a6b4a);
  font: 600 11px/1.4 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: normal;
}
body.hm-trips .saving-preview .amount {
  font: 500 34px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: -1px;
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .saving-preview .detail { color: #315c42; font-size: 12px; }
body.hm-trips .success .tick { font-size: 44px; }
body.hm-trips .success h2 {
  font: 400 30px/1.1 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .success .saving-big {
  margin: 14px 0;
  font: 500 44px/1.1 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: -1.4px;
  color: var(--hm-green, #1a6b4a);
}
body.hm-trips .share-prompt {
  margin-top: 24px;
  padding: 18px;
  border-radius: 13px;
  background: var(--hm-surface-muted, #eef2ef);
}
body.hm-trips .share-prompt p { color: var(--hm-ink, #0d2135); font-size: 12px; font-weight: 600; }
body.hm-trips .share-link,
body.hm-trips .share-btn {
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--hm-field-border, #d4ded4);
  border-radius: 9px;
  background: var(--hm-white, #fff);
  color: var(--hm-ink, #0d2135);
  font: 600 12px/1.2 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}
body.hm-trips .back-link a { color: var(--hm-green, #1a6b4a); font-size: 13px; }

/* Shared deal card: destination, hotel, the saving and the terms it rests on */
body.hm-trips .deal-card { padding: 0; overflow: hidden; }
body.hm-trips .deal-card .card-header {
  display: block;
  padding: 23px 23px 16px;
  border-bottom: 1px solid var(--hm-line, #e3e6e2);
}
body.hm-trips .card-dest {
  color: var(--hm-green, #1a6b4a);
  font: 700 10px/1.4 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
body.hm-trips .card-hotel {
  margin-top: 8px;
  font: 400 28px/1.12 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .card-stars { margin-top: 6px; font-size: 12px; color: var(--hm-muted, #586976); }
body.hm-trips .deal-card .card-body { padding: 20px 23px 23px; }
body.hm-trips .saving-pill {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 10px;
  border-radius: 5px;
  background: #e3f0e5;
  color: #155939;
  font: 600 12px/1.4 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}
body.hm-trips .price-row { display: flex; align-items: baseline; gap: 10px; padding: 0; border: 0; min-height: 0; }
body.hm-trips .price-now {
  font: 500 40px/1.1 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: -1.2px;
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .price-unit { color: var(--hm-muted, #586976); font-size: 13px; }
body.hm-trips .price-was { color: var(--hm-muted, #586976); font-size: 13px; text-decoration: line-through; }
body.hm-trips .price-total { margin-top: 6px; color: var(--hm-muted, #586976); font-size: 13px; }
body.hm-trips .details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin: 20px 0;
  padding: 18px 0;
  border-block: 1px solid var(--hm-line, #e3e6e2);
}
body.hm-trips .detail-label { color: var(--hm-muted, #586976); font-size: 11px; }
body.hm-trips .detail-value { margin-top: 3px; color: var(--hm-ink, #0d2135); font-size: 13px; font-weight: 600; }
body.hm-trips .deal-card .card-footer {
  padding: 14px 23px;
  border-top: 1px solid var(--hm-line, #e3e6e2);
  font-size: 11px;
  color: var(--hm-muted, #586976);
}
body.hm-trips .share-section { margin-top: 20px; }
body.hm-trips .share-label { margin-bottom: 10px; color: var(--hm-muted, #586976); font-size: 12px; }
body.hm-trips .share-btns { display: flex; flex-wrap: wrap; gap: 9px; }
body.hm-trips .explore-link { margin-top: 18px; text-align: center; }
body.hm-trips .explore-link a { color: var(--hm-green, #1a6b4a); font-size: 13px; }

/* ── Market comparison panel (server-gated; restyled, not restructured) ── */
body.hm-trips .hmmc { margin: 0 23px 20px; padding-top: 16px; border-top: 1px solid var(--hm-line, #e3e6e2); }
body.hm-trips .hmmc h4 {
  margin: 0 0 6px;
  font: 600 13px/1.3 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .hmmc-best {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 0;
  border-left: 3px solid var(--hm-green, #1a6b4a);
  border-radius: 0 10px 10px 0;
  background: var(--hm-mint, #edf3ee);
}
body.hm-trips .hmmc-best .hmmc-total {
  font: 500 34px/1.3 var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
  letter-spacing: -1px;
  color: var(--hm-ink, #0d2135);
}
body.hm-trips .hmmc-cta {
  min-height: var(--hm-control-min, 44px);
  border-radius: 9px;
  background: var(--hm-green, #1a6b4a);
  font-weight: 600;
}
body.hm-trips .hmmc-cta:hover { background: var(--hm-green-dark, #125038); }
body.hm-trips .hmmc-signals {
  border: 1px solid #e5e6df;
  border-radius: 10px;
  background: #f7f7f4;
}
body.hm-trips .hmmc-note,
body.hm-trips .hmmc-disc { color: var(--hm-muted, #586976); }

/* ── Breakpoints: 1050 / 750 / 500 (hm-tokens.css) ─────────────────────── */
@media (max-width: 1050px) {
  body.hm-trips .dash-stats { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  body.hm-trips .dash-stat:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 750px) {
  body.hm-trips .bookings-page-wrap,
  body.hm-trips .page,
  body.hm-trips .page-hero,
  body.hm-trips .hero { padding-left: var(--hm-gutter-mobile, 20px); padding-right: var(--hm-gutter-mobile, 20px); }
  body.hm-trips .page-hero,
  body.hm-trips .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'eyebrow' 'title' 'lede' 'action';
    justify-items: start;
    gap: 0;
  }
  body.hm-trips .page-hero .monitor-cta { grid-area: action; justify-self: start; margin-top: 16px; }
  body.hm-trips .page-hero h1,
  body.hm-trips .hero h1 { font-size: 39px; letter-spacing: -.6px; }
  body.hm-trips .card-header { flex-wrap: wrap; padding: 18px 16px; gap: 12px; }
  body.hm-trips .hotel-icon { width: 72px; height: 86px; font-size: 22px; }
  body.hm-trips .hotel-row h3 { font-size: 25px; }
  body.hm-trips .card-price-block { text-align: left; width: 100%; }
  body.hm-trips .card-savings-bar,
  body.hm-trips .book-deal-bar { margin-left: 16px; margin-right: 16px; }
  body.hm-trips .book-deal-bar { width: calc(100% - 32px); }
  body.hm-trips .card-footer { padding: 12px 16px; }
  body.hm-trips .card-sparkline { padding: 0 16px 14px; }
  body.hm-trips .hmmc { margin-left: 16px; margin-right: 16px; }
  body.hm-trips .card-advice { margin-left: 16px; margin-right: 16px; }
  /* Rebook / watch detail */
  body.hm-trips .booking-header h1 { font-size: 36px; letter-spacing: -.6px; }
  /* Keep each meta fact whole rather than letting a lone icon wrap alone. */
  body.hm-trips .booking-meta { gap: 6px 12px; }
  body.hm-trips .booking-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  body.hm-trips .saving-alert { padding: 15px 16px; }
  body.hm-trips .saving-alert-text h2 { font-size: 25px; }
  body.hm-trips .price-row { padding: 14px 16px; }
  body.hm-trips .chart-card,
  body.hm-trips .instructions,
  body.hm-trips .confirm-card { padding: 18px 16px; }
  body.hm-trips .chart-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  body.hm-trips .chart-stat-val { font-size: 20px; }
  body.hm-trips .confirm-row input { min-width: 120px; }
}
@media (max-width: 500px) {
  body.hm-trips .dash-stats { grid-template-columns: 1fr 1fr; padding: 15px 13px; }
  body.hm-trips .dash-stat { padding: 0 12px; }
  body.hm-trips .watch-prices { grid-template-columns: 1fr; }
  body.hm-trips .savings-banner { flex-wrap: wrap; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  body.hm-trips .book-deal-bar,
  body.hm-trips .icon-btn,
  body.hm-trips .rebook-btn,
  body.hm-trips .email-gate-row button,
  body.hm-trips .lookup-btn,
  body.hm-trips .submit-btn { transition: none; }
  body.hm-trips .skeleton { animation: none; }
}