/* ═══════════════════════════════════════════════════════════
   My Trip Drawer v1 — right-side slide-out trip hub
   Mirrors the full /my-trip workbench (tabs, trip overview,
   saved itineraries, map views, quizzes) inside a drawer so
   readers can review and act on their saved items without
   navigating away. Scoped to .hg-td-*.
   ═══════════════════════════════════════════════════════════ */

.hg-td-root {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Above Raptive / AdThrive sticky footer ads (which use 2147483645-ish)
     so the drawer overlays the ad instead of sitting alongside it. */
  z-index: 2147483647;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}
.hg-td-root.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.hg-td-root,
.hg-td-root * { box-sizing: border-box; }

.hg-td-backdrop {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
.hg-td-root.is-open .hg-td-backdrop { opacity: 1; }

/* ── Panel ────────────────────────────────────────────────── */
.hg-td-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 440px;
  max-width: calc(100vw - 40px);
  background: linear-gradient(135deg, #f0f7f4 0%, #e3f0e8 50%, #dceee4 100%);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow: hidden;
}
.hg-td-root.is-open .hg-td-panel { transform: translateX(0); }

/* Decorative circles — same vibe as features-cta banner */
.hg-td-panel::before,
.hg-td-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hg-td-panel::before {
  top: 120px;
  right: -80px;
  width: 220px;
  height: 220px;
  background: rgba(26, 107, 74, 0.06);
}
.hg-td-panel::after {
  bottom: 70px;
  left: -70px;
  width: 180px;
  height: 180px;
  background: rgba(26, 107, 74, 0.04);
}
/* Everything inside the panel sits above the circles. */
.hg-td-head,
.hg-td-ov,
.hg-td-lodging,
.hg-td-tabs,
.hg-td-body,
.hg-td-purchases,
.hg-td-sync,
.hg-td-foot { position: relative; z-index: 1; }

/* ── Header ───────────────────────────────────────────────── */
/* Stacked layout: top row has the white HawaiiGuide v17 logo on the left
   and the close X on the right (brands the drawer as a HawaiiGuide
   feature). Bottom row has the "My Trip" title + item count. */
.hg-td-head {
  background: linear-gradient(135deg, #1e2e22 0%, #2a3e2e 100%);
  color: #fff;
  padding: 14px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.hg-td-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hg-td-head-logo {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.hg-td-head-main { flex: 1; min-width: 0; }
.hg-td-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}
.hg-td-title i {
  color: #f5c842;
  margin-right: 8px;
  font-size: 17px;
}
.hg-td-count {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}
.hg-td-close {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.hg-td-close:hover { background: rgba(255, 255, 255, 0.22); }

/* ── Master Trip Details container ────────────────────────── */
/* Wraps the two sub-sections (dates + lodging). Toggle button is the
   visually loudest of the three so it reads as the parent. Once the
   reader has set everything, collapsing the master hides BOTH subs and
   keeps the saved-items tabs as the focal point of the drawer. */
.hg-td-trip {
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.62) 100%);
  border-bottom: 1px solid #c2d1c8;
  flex-shrink: 0;
}
.hg-td-trip-toggle {
  width: 100%;
  background: transparent;
  border: none;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  color: #14241b;
  text-align: left;
  letter-spacing: 0.1px;
}
.hg-td-trip-toggle:hover { background: rgba(26, 107, 74, 0.04); }
.hg-td-trip-toggle:active { background: rgba(26, 107, 74, 0.08); }
.hg-td-trip-toggle-icon { color: #1a6b4a; margin-right: 4px; font-size: 14px; }
.hg-td-trip-toggle-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-td-trip-toggle-arrow { color: #1a6b4a; font-size: 13px; transition: transform 0.15s ease; }
.hg-td-trip-inner {
  /* Sub-sections sit edge-to-edge inside the master; their own borders
     are removed below so the master's bottom border is the only visible
     divider once both subs are open. */
  padding: 0;
}
.hg-td-trip-inner.is-collapsed { display: none; }

/* ── Trip dates sub-section (collapsible) ─────────────────── */
.hg-td-ov {
  background: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(26, 107, 74, 0.10);
  flex-shrink: 0;
}
.hg-td-ov-toggle {
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 18px 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #1e2e22;
  text-align: left;
}
.hg-td-ov-toggle:hover { background: rgba(26, 107, 74, 0.04); }
.hg-td-ov-toggle:active { background: rgba(26, 107, 74, 0.08); }
.hg-td-ov-toggle-icon { color: #1a6b4a; margin-right: 2px; font-size: 13px; }
.hg-td-ov-toggle-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-td-ov-toggle-arrow { color: #5a6b60; font-size: 11px; }
.hg-td-ov-inner {
  padding: 2px 18px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hg-td-ov-inner.is-collapsed { display: none; }
.hg-td-ov-field { display: flex; flex-direction: column; gap: 4px; }
.hg-td-ov-field.full { grid-column: 1 / -1; }
.hg-td-ov-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #5a6b60;
}
.hg-td-ov-input,
.hg-td-ov-select {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 10px;
  border: 1px solid #c8d6cc;
  border-radius: 8px;
  background: #fff;
  color: #1e2e22;
  width: 100%;
  min-width: 0;
  line-height: 1.4;
  min-height: 40px;
}
.hg-td-ov-select {
  /* Strip native select chrome (iOS up/down arrows, etc.) and paint a
     custom chevron so the selected option text never collides with
     the built-in widget. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235a6b60' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}
.hg-td-ov-select::-ms-expand { display: none; }
.hg-td-ov-input:focus,
.hg-td-ov-select:focus {
  outline: none;
  border-color: #1a6b4a;
  box-shadow: 0 0 0 2px rgba(26, 107, 74, 0.18);
}
.hg-td-ov-daterow {
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 1 / -1;
}
.hg-td-ov-daterow .hg-td-ov-input { flex: 1; }
.hg-td-ov-dash {
  color: #8a9690;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Per-island date rows (multi-island trips) ─────────────── */
/* Surfaces above the global date inputs when the reader has saved
   itineraries on 2+ islands. Read-only display derived from the
   saved itineraries themselves — no separate input fields. */
.hg-td-ov-islands {
  grid-column: 1 / -1;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(26, 107, 74, 0.18);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 4px;
}
.hg-td-ov-island-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.hg-td-ov-island-row + .hg-td-ov-island-row {
  border-top: 1px dashed rgba(26, 107, 74, 0.16);
}
.hg-td-ov-island-label {
  font-weight: 600;
  font-size: 13px;
  color: #1a3d2c;
  letter-spacing: 0.2px;
}
.hg-td-ov-island-dates {
  font-size: 13px;
  color: #2c4a3a;
  white-space: nowrap;
}
.hg-td-ov-island-note {
  margin-top: 4px;
  font-size: 11px;
  color: #6f7d76;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ── Lodging sub-section (HGLodgingPicker) ────────────────── */
/* Same indent and hover treatment as .hg-td-ov above — the two subs
   read as siblings inside the master Trip Details container. */
.hg-td-lodging {
  background: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(26, 107, 74, 0.10);
  flex-shrink: 0;
}
.hg-td-lodging-toggle {
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 18px 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #1e2e22;
  text-align: left;
}
.hg-td-lodging-toggle:hover { background: rgba(26, 107, 74, 0.04); }
.hg-td-lodging-toggle:active { background: rgba(26, 107, 74, 0.08); }
.hg-td-lodging-toggle-icon { color: #1a6b4a; margin-right: 2px; font-size: 13px; }
.hg-td-lodging-toggle-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-td-lodging-toggle-arrow { color: #5a6b60; font-size: 11px; }
.hg-td-lodging-inner {
  padding: 2px 18px 14px;
}
.hg-td-lodging-inner.is-collapsed { display: none; }
.hg-td-lodging-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.hg-td-lodging-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: #fff;
  border: 1px solid rgba(26, 107, 74, 0.18);
  border-radius: 8px;
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.12s ease, background 0.12s ease;
  min-width: 0; /* let ellipsis work inside the card */
}
.hg-td-lodging-card:hover {
  border-color: #2a6b4a;
  background: #eef6f1;
}
.hg-td-lodging-card.is-set {
  background: #eef6f1;
  border-color: #2a6b4a;
}
.hg-td-lodging-island {
  font-size: 10px;
  color: #6a7a71;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}
.hg-td-lodging-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e2e22;
  line-height: 1.25;
  /* truncate long hotel names so a card never blows out the drawer width */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-td-lodging-empty {
  font-size: 12px;
  color: #8a9690;
  font-style: italic;
}

/* ── Tabs (wrapping pill row) ────────────────────────────────
   Used to be a 2×4 grid that ate ~140px on mobile. Earlier rev was
   a single horizontal row with overflow-x:auto, but that hid pills
   off the right edge of a 440px panel and mouse users couldn't
   actually scroll horizontally — only trackpads / touch could.
   flex-wrap:wrap lets the row break to 2 rows when it overflows so
   every pill is visible and tappable without scrolling. Worst case
   is ~72px tall (2 rows) vs. the old 140px grid — still recovers
   ~70px of vertical real estate. */
.hg-td-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 12px 7px;
  background: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid #d1ddd5;
  flex-shrink: 0;
}
.hg-td-tab {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(26, 107, 74, 0.12);
  border-radius: 999px;
  padding: 7px 11px 7px 11px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #3a4f42;
  line-height: 1;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.hg-td-tab:hover {
  background: #fff;
  border-color: rgba(26, 107, 74, 0.32);
}
.hg-td-tab i {
  font-size: 13px;
  color: #1a6b4a;
  transition: color 0.12s ease;
}
.hg-td-tab.is-active {
  background: #fff;
  border-color: #2e86de;
  color: #2e86de;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.hg-td-tab.is-active i { color: #2e86de; }
/* Pill-inline badge — sits to the right of the label inside the
   pill rather than floating above the corner of a grid tile. */
.hg-td-tab-badge {
  background: #1a6b4a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 14px;
  line-height: 1.4;
  text-align: center;
}
.hg-td-tab-badge:empty { display: none; }
.hg-td-tab.is-active .hg-td-tab-badge { background: #2e86de; }

/* Vertical divider between "trip items" tab cluster and "planning
   tools" tab cluster. Helps users understand why the header counter
   ("8 items on your trip") doesn't match summed tab badges — tools
   are tracked separately. */
.hg-td-tab-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(26, 107, 74, 0.18);
  flex-shrink: 0;
  align-self: center;
  margin: 0 4px;
}
/* Tools (itineraries / maps / quizzes) sit muted relative to trip
   items. They're meta-state, not vacation contents. */
.hg-td-tab--tool {
  background: rgba(255, 255, 255, 0.45);
  color: #6b7a73;
}
.hg-td-tab--tool i { color: #6b7a73; }
.hg-td-tab--tool.is-active {
  background: #fff;
  color: #2e86de;
}
.hg-td-tab--tool.is-active i { color: #2e86de; }

/* Bootstrap placeholder shown in the body while HGItinerary is still
   loading. Prevents the reader from seeing a blank white body for a
   split-second on slow connections. */
.hg-td-bootstrap {
  padding: 40px 24px;
  text-align: center;
  color: #6a7a71;
  font-size: 14px;
  font-style: italic;
}

/* ── Scrollable body ──────────────────────────────────────── */
.hg-td-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 18px;
}
.hg-td-pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}
.hg-td-pane-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #3a4f42;
}
.hg-td-pane-link {
  font-size: 12px;
  font-weight: 700;
  color: #2e86de;
  text-decoration: none;
}
.hg-td-pane-link:hover { text-decoration: underline; }

.hg-td-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hg-td-item {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #d9e3dc;
  border-radius: 10px;
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color 0.12s ease;
}
.hg-td-item:hover { border-color: #b3c5b8; }
.hg-td-item-link {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #1e2e22 !important;
  text-decoration: none !important;
  font-size: 14px;
  line-height: 1.3;
}
.hg-td-item-link:hover { color: #1e2e22 !important; }
.hg-td-item-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-td-item-meta {
  font-size: 11.5px;
  color: #6b7b72;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-td-item-island {
  font-size: 10.5px;
  color: #889;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.hg-td-item-remove {
  background: transparent;
  border: none;
  color: #8a9690;
  cursor: pointer;
  padding: 0 14px;
  font-size: 14px;
  border-left: 1px solid #e4ebe5;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.hg-td-item-remove:hover {
  color: #c3232f;
  background: rgba(195, 35, 47, 0.08);
}

/* ── Itinerary cards ──────────────────────────────────────── */
.hg-td-itin {
  background: #fff;
  border: 1px solid #d9e3dc;
  border-left: 4px solid #2e86de;
  border-radius: 10px;
  padding: 12px 14px 10px;
  margin-bottom: 8px;
}
.hg-td-itin-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #1e2e22;
  line-height: 1.25;
}
.hg-td-itin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.hg-td-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  background: #eef3ef;
  color: #3a4f42;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.hg-td-chip i { font-size: 10px; opacity: 0.7; }
.hg-td-chip.is-island {
  background: transparent;
  border: 1px solid currentColor;
}
.hg-td-itin-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hg-td-itin-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 7px;
  text-decoration: none !important;
  background: #f4f7f5;
  color: #1e2e22 !important;
  border: 1px solid #d9e3dc;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hg-td-itin-btn:hover {
  background: #eaf0ec;
  border-color: #b3c5b8;
}
.hg-td-itin-btn.is-primary {
  background: #2e86de;
  color: #fff !important;
  border-color: #2e86de;
}
.hg-td-itin-btn.is-primary:hover {
  background: #1f6dc2;
  color: #fff !important;
  border-color: #1f6dc2;
}
.hg-td-itin-btn.is-danger {
  color: #c3232f !important;
  margin-left: auto;
}
.hg-td-itin-btn.is-danger:hover {
  background: rgba(195, 35, 47, 0.08);
  border-color: rgba(195, 35, 47, 0.3);
}
.hg-td-new-itin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 11px 14px;
  background: #2e86de;
  color: #fff !important;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.15s ease;
}
.hg-td-new-itin:hover { background: #1f6dc2; color: #fff !important; }

/* ── Quiz cards ───────────────────────────────────────────── */
.hg-td-quiz {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #d9e3dc;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  text-decoration: none !important;
  color: #1e2e22 !important;
}
.hg-td-quiz:hover { border-color: #b3c5b8; color: #1e2e22 !important; }
.hg-td-quiz-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef3ef;
  color: #1a6b4a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.hg-td-quiz-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hg-td-quiz-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.hg-td-quiz-status {
  display: block;
  font-size: 11.5px;
  color: #6b7b72;
  margin: 0;
  line-height: 1.3;
}
.hg-td-quiz-status.is-done { color: #1a6b4a; font-weight: 600; }
.hg-td-quiz-chev {
  color: #8a9690;
  font-size: 12px;
  flex-shrink: 0;
}

/* ── Empty state ──────────────────────────────────────────── */
.hg-td-empty {
  text-align: center;
  padding: 22px 12px 18px;
  background: #fff;
  border: 1px dashed #c8d6cc;
  border-radius: 14px;
}
.hg-td-empty-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 10px;
  color: #1a6b4a; /* same brand-green the link icons below use */
}
.hg-td-empty h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #1e2e22;
  line-height: 1.3;
}
.hg-td-empty p {
  font-size: 13.5px;
  color: #5a6b60;
  line-height: 1.5;
  margin: 0 0 14px;
}
.hg-td-empty p a {
  color: #2e86de;
  font-weight: 600;
  text-decoration: underline;
}
.hg-td-empty-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.hg-td-empty-link {
  padding: 9px 10px;
  background: #f4f7f5;
  border: 1px solid #dde4df;
  border-radius: 9px;
  color: #1e2e22 !important;
  text-decoration: none !important;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  line-height: 1.2;
}
.hg-td-empty-link:hover {
  background: #eaf0ec;
  border-color: #c7d1c9;
  color: #1e2e22 !important;
}
.hg-td-empty-link i { color: #1a6b4a; font-size: 12px; }
.hg-td-empty-cta {
  display: inline-block;
  padding: 9px 18px;
  background: #2e86de;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none !important;
  font-size: 13.5px;
}
.hg-td-empty-cta:hover { background: #1f6dc2; color: #fff !important; }

/* ── Purchases row ─────────────────────────────────────────── */
/* Mirrors the visual shape of .hg-td-sync-toggle so the two rows read as a
   group. Pure navigation link, no expand panel. */
.hg-td-purchases {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(26, 107, 74, 0.08);
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #1e2e22;
  text-decoration: none;
}
.hg-td-purchases:hover { background: rgba(255, 255, 255, 0.85); color: #1a6b4a; }
.hg-td-purchases:focus { outline: 2px solid #1a6b4a; outline-offset: -2px; }
.hg-td-purchases-icon { color: #1a6b4a; font-size: 13px; }
.hg-td-purchases-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-td-purchases-arrow { color: #5a6b60; font-size: 11px; }

/* ── Sync row (Phase 2 cross-device) ──────────────────────── */
.hg-td-sync {
  background: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(26, 107, 74, 0.08);
  flex-shrink: 0;
}
.hg-td-sync.is-open { background: rgba(255, 255, 255, 0.85); }
.hg-td-sync-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #1e2e22;
  text-align: left;
  -webkit-appearance: none; appearance: none;
}
.hg-td-sync-icon { color: #1a6b4a; font-size: 13px; }
.hg-td-sync-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-td-sync-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #eef2f6;
  color: #556;
  white-space: nowrap;
}
.hg-td-sync[data-state="paired"]   .hg-td-sync-pill { background: #e8f4ee; color: #1a6b4a; }
.hg-td-sync[data-state="unpaired"] .hg-td-sync-pill { background: #fdf1e3; color: #a05e12; }
.hg-td-sync-arrow { color: #5a6b60; font-size: 11px; }

.hg-td-sync-panel {
  padding: 2px 18px 14px;
}
.hg-td-sync-blurb,
.hg-td-sync-paired-msg {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #4a5a51;
  line-height: 1.45;
}
.hg-td-sync-form {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hg-td-sync-input {
  flex: 1 1 160px;
  padding: 8px 10px;
  border: 1.5px solid #d1ddd5;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  -webkit-appearance: none; appearance: none;
}
.hg-td-sync-input:focus { outline: none; border-color: #1a6b4a; }
.hg-td-sync-send {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #1a6b4a;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  white-space: nowrap;
}
.hg-td-sync-send:hover { background: #124d35; }
.hg-td-sync-send:disabled { background: #9aaea3; cursor: wait; }
.hg-td-sync-manage {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: #1a6b4a;
  text-decoration: none;
}
.hg-td-sync-manage:hover { text-decoration: underline; }
.hg-td-sync-feedback {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #4a5a51;
  min-height: 1.2em;
}
.hg-td-sync-feedback[data-tone="ok"]    { color: #1a6b4a; font-weight: 600; }
.hg-td-sync-feedback[data-tone="error"] { color: #8a161f; font-weight: 600; }

/* ── Footer CTAs ──────────────────────────────────────────── */
.hg-td-foot {
  flex-shrink: 0;
  padding: 10px 16px 11px;
  border-top: 1px solid #c8d6cc;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hg-td-cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: #1a6b4a;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.hg-td-cta-primary:hover { background: #145838; color: #fff !important; }
.hg-td-cta-arrow { font-size: 11px; }

/* Compact link row replacing the old Send/Print buttons + Clear link
   stack. Saves ~55px of vertical on mobile. Clear stays subdued
   (gray text, red on hover) so accidental taps remain unlikely. */
.hg-td-foot-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-top: 2px;
}
.hg-td-foot-link {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #3a4f42;
  padding: 4px 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.12s ease;
}
.hg-td-foot-link:hover { color: #1a6b4a; }
.hg-td-foot-link i { font-size: 11px; }
.hg-td-foot-divider {
  color: #b3c5b8;
  font-size: 11px;
  user-select: none;
}
.hg-td-foot-link-danger {
  color: #8a9690;
  font-weight: 500;
}
.hg-td-foot-link-danger:hover { color: #c3232f; }

/* Scroll lock when drawer is open */
body.hg-td-scroll-lock { overflow: hidden; }

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 540px) {
  .hg-td-panel {
    width: 100vw;
    max-width: 100vw;
  }
  .hg-td-head { padding: 14px 16px 12px; }
  .hg-td-body { padding: 12px 14px 16px; }
  .hg-td-foot { padding: 9px 14px 10px; }
  .hg-td-tabs { padding: 8px 12px 6px; }
  .hg-td-tab { font-size: 12px; padding: 6px 10px; }
  .hg-td-ov-inner { padding: 2px 14px 12px; }
  .hg-td-empty-links { grid-template-columns: 1fr; }

  /* Bigger tap targets on mobile so the collapse/expand affordance is
     obvious. The chevrons grow with the row so they read as the action
     hint, not decorative. */
  .hg-td-trip-toggle { padding: 15px 16px; min-height: 50px; font-size: 15px; }
  .hg-td-trip-toggle-arrow { font-size: 15px; }
  .hg-td-ov-toggle,
  .hg-td-lodging-toggle { padding: 13px 16px 13px 28px; min-height: 46px; font-size: 13.5px; }
  .hg-td-ov-toggle-arrow,
  .hg-td-lodging-toggle-arrow { font-size: 13px; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .hg-td-root { display: none !important; }
}