/* ═══════════════════════════════════════════════════════════════
   HawaiiGuide Trip Planner — Styles
   ═══════════════════════════════════════════════════════════════ */

/* ─── Sitewide utility bar ─────────────────────────────────── */
.hg-ubar {
  background: linear-gradient(135deg, #1e2e22 0%, #2a3e2e 100%);
  font-size: 14px;
  font-family: inherit;
  line-height: 1;
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 3%;
}

.hg-ubar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Match main nav max-width on wide screens */
@media (min-width: 1211px) {
  .hg-ubar-inner {
    max-width: 1280px;
    margin: 0 auto;
  }
}

/* Maps link: show desktop on 768px+, mobile below */
.hg-ubar-maps-mobile { display: inline-flex; }
.hg-ubar-maps-desktop { display: none; }
@media (min-width: 768px) {
  .hg-ubar-maps-mobile { display: none; }
  .hg-ubar-maps-desktop { display: inline-flex; }
}

.hg-ubar-left,
.hg-ubar-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.hg-ubar-link {
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none;
  padding: 9px 14px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hg-ubar-link i { margin-right: 5px; font-size: 13px; }
.hg-ubar-link:hover {
  background: rgba(255,255,255,0.12);
  color: #fff !important;
}

.hg-ubar-match {
  border-radius: 4px;
  margin: 4px 4px 4px 0;
}
.hg-ubar-match i { color: #f0932b; }

.hg-ubar-maps {
  border-radius: 4px;
  margin: 4px 4px 4px 0;
}
.hg-ubar-maps i { color: #e74c3c; }

.hg-ubar-weather {
  border-radius: 4px;
  margin: 4px 4px 4px 0;
}
.hg-ubar-weather i { color: #f39c12; }

.hg-ubar-concierge {
  border-radius: 4px;
  margin: 4px 4px 4px 0;
}
.hg-ubar-concierge i { color: #90EE90; font-size: 16px; }

/* ─── "More" dropdown trigger (shaka + chevron) ─────────── */
.hg-ubar-more-btn {
  border-radius: 4px;
  margin: 4px 4px 4px 0;
  padding-left: 6px !important;
  padding-right: 4px !important;
  position: relative;
  cursor: pointer;
}
.hg-ubar-more-btn i.fa-shaka { color: #f5c842; font-size: 20px !important; margin-right: 0; }
.hg-ubar-chevron {
  font-size: 9px;
  margin-left: 2px;
  opacity: 0.6;
  vertical-align: middle;
  transition: transform 0.2s ease;
  display: inline-block;
}
.hg-ubar-more-btn.is-open .hg-ubar-chevron {
  transform: rotate(180deg);
}

/* ─── Dropdown panel ────────────────────────────────────── */
.hg-ubar-dropdown {
  position: absolute;
  top: 100%;
  background: linear-gradient(135deg, #1e2e22 0%, #2a3e2e 100%);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 0 8px 8px;
  padding: 6px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  min-width: 240px;
  max-width: 280px;
  z-index: 10001;
}
/* On mobile, go full-width */
@media (max-width: 600px) {
  .hg-ubar-dropdown {
    left: 0;
    right: 0;
    max-width: none;
    border-radius: 0;
  }
}
.hg-ubar-dd-link {
  display: block;
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s;
  white-space: nowrap;
}
.hg-ubar-dd-link:hover {
  background: rgba(255,255,255,0.1);
  color: #fff !important;
}
.hg-ubar-dd-link i {
  width: 22px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
}
.hg-ubar-dd-link .fa-shaka { color: #f5c842; }
.hg-ubar-dd-link .fa-surf { color: #45aaf2; }
.hg-ubar-dd-link .fa-hiking { color: #a3cb38; }
.hg-ubar-dd-link .fa-sun { color: #f5c842; }
.hg-ubar-dd-link .fa-boat { color: #45aaf2; }
.hg-ubar-dd-link .fa-star { color: #f0932b; }
.hg-ubar-dd-link .fa-sun-hollow { color: #f7943e; }
.hg-ubar-dd-link .fa-exclamation-circle { color: #e056a0; }
.hg-ubar-dd-link .fa-hawaii { color: #22a6b3; }
.hg-ubar-dd-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 6px 14px;
}
.hg-ubar-dd-hawaii-toggle {
  font-style: italic;
  opacity: 0.85;
}
.hg-ubar-dd-hawaii-toggle:hover { opacity: 1; }

/* ─── Mode-aware dropdown items ──────────────────────────
   Dropdown items tagged with data-mode="local" only show
   when the toolbar is in local mode (the geo-toolbar JS
   adds .hg-ubar-local to #hg-ubar). Items tagged with
   data-mode="visitor" only show when the toolbar is NOT
   in local mode. Items with no data-mode show in both. */
.hg-ubar-dd-link[data-mode="local"] { display: none; }
#hg-ubar.hg-ubar-local .hg-ubar-dd-link[data-mode="visitor"] { display: none; }
#hg-ubar.hg-ubar-local .hg-ubar-dd-link[data-mode="local"] { display: block; }

/* ─── Maps dropdown (mirrors More dropdown) ─────────────── */
.hg-ubar-maps .hg-ubar-chevron {
  font-size: 10px;
  margin-left: 2px;
  display: inline-block;
  transition: transform 0.2s;
}
.hg-ubar-maps.is-open .hg-ubar-chevron {
  transform: rotate(180deg);
}
#hg-ubar-maps-dropdown .fa-oahu { color: #F27A24 !important; }
#hg-ubar-maps-dropdown .fa-maui { color: #1866B4 !important; }
#hg-ubar-maps-dropdown .fa-big-island { color: #c3232f !important; }
#hg-ubar-maps-dropdown .fa-kauai { color: #1D9771 !important; }

/* ─── International / language dropdown (mirrors Maps) ──── */
.hg-ubar-intl .hg-ubar-chevron {
  font-size: 10px;
  margin-left: 2px;
  display: inline-block;
  transition: transform 0.2s;
}
.hg-ubar-intl.is-open .hg-ubar-chevron {
  transform: rotate(180deg);
}
.hg-ubar-intl-dropdown {
  /* Slightly wider so longer native names (Nederland · Nederlands)
     don't wrap awkwardly. */
  min-width: 260px;
  max-width: 320px;
}
.hg-ubar-intl-link {
  display: flex !important;
  align-items: baseline;
  gap: 10px;
}
.hg-ubar-intl-flag {
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.hg-ubar-intl-name {
  flex: 1 1 auto;
  font-weight: 600;
}
.hg-ubar-intl-sub {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.7;
  white-space: nowrap;
}
.hg-ubar-intl-link.is-current {
  /* Highlight the active country for readers already on /de, /jp, etc. */
  background: rgba(255, 255, 255, 0.08);
  position: relative;
}
.hg-ubar-intl-link.is-current::before {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #1D9771;
  font-weight: 700;
  font-size: 12px;
}

/* Shaka wave animation — plays on load, repeats every 30s */
@-webkit-keyframes shakaWave {
  0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  15% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
  30% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); }
  45% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
  60% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); }
  70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); }
  80%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@keyframes shakaWave {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(15deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }
  70% { transform: rotate(3deg); }
  80%, 100% { transform: rotate(0deg); }
}
.shaka-wave {
  display: inline-block;
  -webkit-animation: shakaWave 0.6s ease-in-out;
  animation: shakaWave 0.6s ease-in-out;
  -webkit-transform-origin: 50% 85%;
  transform-origin: 50% 85%;
  -webkit-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}
a:hover .shaka-wave {
  -webkit-animation: shakaWave 0.6s ease-in-out;
  animation: shakaWave 0.6s ease-in-out;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

.hg-ubar-clock {
  border-radius: 4px;
  margin: 4px 4px 4px 0;
}
.hg-ubar-clock i { color: #45aaf2; font-size: 16px; }
.hg-ubar-clock-time {
  color: #45aaf2;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  display: inline;
  margin-left: 2px;
}

.hg-ubar-itin {
  background: rgba(46,134,222,0.25);
  border-radius: 4px;
  margin: 4px 0;
}
.hg-ubar-itin:hover {
  background: rgba(46,134,222,0.4) !important;
}
.hg-ubar-itin.has-items {
  color: #fff !important;
  font-weight: 700;
  background: rgba(46,134,222,0.35);
}

.hg-ubar-total-badge {
  display: inline-block;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9px;
  margin-left: 6px;
  min-width: 18px;
  text-align: center;
  vertical-align: middle;
}

/* Short/full label toggle — full shown by default, short hidden */
.hg-ubar-label-short { display: none; }

/* Tablet tier (601–1023px): full desktop layout of 8 items overflows on iPad
   and similar mid-sized screens. Compress to a sensible subset so the bar
   fits without cutting off My Trip. Keep MyGuide visible since it's the
   headline tool; hide Concierge (still reachable via ✋ More dropdown);
   icon-only for Weather, Accessibility, My Trip.

   Breakpoint set to 1199px (not 1023px) to catch iPad-class landscape
   widths — iPad Mini 1133px, iPad Air / 11" Pro 1180–1194px, iPad 10.2"
   1080px — all sit above 1023px but still don't have room for the full
   text labels. iPad Pro 12.9" at 1366px has enough room and stays on
   the desktop view. */
@media (max-width: 1199px) {
  .hg-ubar-concierge { display: none; }
  .hg-ubar-weather i { margin-right: 0; font-size: 17px; }
  .hg-ubar-weather .hg-ubar-label-full { display: none; }
  .hg-a11y-btn .hg-ubar-label-full { display: none; }
  .hg-a11y-btn .hg-a11y-icon { margin-right: 0; }
  .hg-ubar-itin .hg-ubar-label-full { display: none; }
  .hg-ubar-itin i { margin-right: 0; font-size: 17px; }
}

@media (max-width: 600px) {
  .hg-ubar { padding: 0 2px; font-size: 12px; }
  /* Keep the Cart + My Trip cluster fully on-screen. The right cluster
     never shrinks; the left menu cluster (Maps / Country / More — all
     dropdown triggers that still read fine as icons) gives way first if
     the row can't fit. Fixes My Trip hanging off the right edge. The
     dropdowns are siblings of .hg-ubar-inner, so clipping the left
     cluster never hides the menus themselves. */
  .hg-ubar-left,
  .hg-ubar-right { gap: 0; }
  .hg-ubar-right { flex-shrink: 0; }
  .hg-ubar-left { min-width: 0; overflow: hidden; }
  /* Drop the redundant "Maps" word — the marker icon + chevron already
     read as a maps menu (matching the icon-only Country globe) — which
     buys back the ~35px that was pushing My Trip off-screen on a normal
     phone, so nothing has to clip at typical mobile widths. */
  .hg-ubar-maps > span:not(.hg-ubar-chevron) { display: none; }
  .hg-ubar-link { padding: 8px 5px; }
  .hg-ubar-link i { margin-right: 4px; font-size: 15px; }
  .hg-ubar-maps,
  .hg-ubar-intl,
  .hg-ubar-weather,
  .hg-ubar-clock,
  .hg-ubar-more-btn {
    margin-right: 1px;
  }
  .hg-ubar-more-btn {
    padding-left: 4px !important;
    padding-right: 3px !important;
  }
  .hg-ubar-cart {
    padding-left: 5px;
    padding-right: 5px;
  }
  .hg-ubar-itin { padding: 8px 6px; }
  /* My Trip icon sizing already set by tablet tier; just tweak spacing. */
  .hg-ubar-total-badge { margin-left: 3px; padding: 2px 5px; font-size: 10px; min-width: 16px; }
  .hg-ubar-dd-link { padding: 11px 16px; font-size: 14px; }
  /* "Guide Match" → "Match" (applies to any remaining full labels) */
  .hg-ubar-label-full { display: none; }
  .hg-ubar-label-short { display: inline; }
  /* MyGuide: hidden on mobile only — site-specific tool-finder, less
     universally recognizable than the other entries. Still accessible via
     the ✋ More dropdown where it's listed right below "All Features & Tools". */
  .hg-ubar-match { display: none; }
  /* Clock: keep the time visible on mobile — the icon alone is meaningless,
     the whole point is showing the current HST for mainland visitors. */
  .hg-ubar-clock i { margin-right: 3px; font-size: 14px; }
  .hg-ubar-clock-time { font-size: 12px; }
}

@media (max-width: 374px) {
  .hg-ubar { padding: 0 1px; font-size: 11px; }
  .hg-ubar-link { padding: 8px 5px; }
  .hg-ubar-itin { padding: 8px 5px; }
  .hg-ubar-total-badge { margin-left: 3px; padding: 2px 5px; }
}

/* ─── Geo toolbar: "in Hawaii" local mode ────────────────── */
.hg-ubar-nearme i { color: #22a6b3; }
.hg-ubar-thisweek i { color: #f5c842; }
.hg-ubar-ocean i { color: #45aaf2; }
.hg-ubar-dining i { color: #f0932b; }

/* Mode toggle — planning mode: show Hawaii icon to switch to local */
.hg-ubar-mode-toggle {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.hg-ubar-mode-toggle i {
  margin-right: 0 !important;
  font-size: 22px !important;
  color: #22a6b3;
  text-shadow: 0 0 8px rgba(34,166,179,0.5);
}
.hg-ubar-mode-toggle:hover i {
  color: #fff;
  text-shadow: 0 0 12px rgba(34,166,179,0.8);
}

/* Pulse glow animation to draw attention */
@keyframes geoTogglePulse {
  0%, 100% { text-shadow: 0 0 6px rgba(34,166,179,0.3); }
  50% { text-shadow: 0 0 14px rgba(34,166,179,0.8), 0 0 20px rgba(34,166,179,0.4); }
}
.hg-ubar-mode-toggle.hg-pulse i {
  animation: geoTogglePulse 2s ease-in-out 3;
}

/* Local mode: plane toggle is smaller/subtle (already chose local) */
.hg-ubar-local .hg-ubar-mode-toggle i {
  font-size: 13px !important;
  color: rgba(255,255,255,0.5);
  text-shadow: none;
  animation: none;
}
.hg-ubar-local .hg-ubar-mode-toggle:hover i {
  color: #fff;
  text-shadow: none;
}

/* Local mode accent bar */
.hg-ubar-local {
  background: linear-gradient(135deg, #1a3a2a 0%, #234a32 100%);
  border-bottom: 2px solid rgba(34,166,179,0.4);
}

/* ─── Mobile compact header when sticky ──────────────────── */
@media (max-width: 1023px) {
  /* Shrink logo when header is sticky */
  .goUS-header.is-sticky a.hover.logo img {
    height: 35px;
    width: auto;
  }
  .goUS-header.is-sticky a.hover.logo {
    height: 35px;
  }

  /* Tighten header padding when sticky */
  .goUS-header.is-sticky .goUS-nav-main {
    height: 48px;
  }
  .goUS-header.is-sticky {
    padding-top: 4px;
  }

  /* Keep progress bar aligned with shorter header */
  .goUS-header.is-sticky .progress-container {
    top: 42px;
  }
}

/* ─── Save button (all page types) ────────────────────────── */
.hg-itinerary-btn-wrap {
  margin: 10px 0 15px;
}

.hg-itinerary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 2px solid #27ae60;
  background: #fff;
  color: #27ae60;
  font-size: 14px;
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  line-height: 1.4;
}

.hg-itinerary-btn:hover {
  background: #27ae60;
  color: #fff;
}

.hg-itinerary-btn.is-added {
  background: #27ae60;
  border-color: #27ae60;
  color: #fff;
}

.hg-itinerary-btn.is-added:hover {
  background: #c0392b;
  border-color: #c0392b;
}

/* ─── Card-level save button (tour/hotel listings) ──────────
   Top-right placement keeps the button clear of the rank badge
   (top-left on hotel cards) and the photo credit (bottom-right,
   which can grow leftward when a photographer display name is long). */
.hg-card-save {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.95);
  color: #2e86de;
  border: 2px solid rgba(46,134,222,0.5);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
  line-height: 1;
}

.hg-card-save i {
  font-size: 11px;
}

.hg-card-save:hover {
  background: #2e86de;
  color: #fff;
  border-color: #2e86de;
}

.hg-card-save.is-added {
  background: rgba(39,174,96,0.95);
  border-color: rgba(39,174,96,0.6);
  color: #fff;
}

.hg-card-save.is-added:hover {
  background: rgba(192,57,43,0.95);
  border-color: rgba(192,57,43,0.6);
}

@media (max-width: 640px) {
  .hg-card-save {
    padding: 5px 12px;
    font-size: 11px;
  }
}

/* ─── Side widget (replaces floating FABs) ────────────────── */
.hg-side-widget {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 9990;
  transition: opacity 0.3s;
}

/* ── Separate tabs container (two small stacked tabs) ────── */
.hg-sw-tabs {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 9991;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* When panel is open, tabs slide right to sit at panel edge */
.hg-sw-tabs:not(.is-collapsed) {
  left: 270px;
}

/* ── Individual tab (shared base) ───────────────────────── */
.hg-sw-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  color: #fff;
  border: none;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.18);
  transition: background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  text-decoration: none;
}
.hg-sw-tab:hover {
  box-shadow: 2px 2px 16px rgba(0,0,0,0.25);
  color: #fff;
  text-decoration: none;
}
.hg-sw-tab > * {
  display: block;
}
.hg-sw-tab .hg-sw-tab-icon {
  font-size: 15px;
}
.hg-sw-tab-label {
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── My Trip tab (blue) ─────────────────────────────────── */
.hg-sw-tab-trip {
  background: linear-gradient(180deg, #1a6fbe 0%, #2e86de 100%);
}
.hg-sw-tab-trip:hover {
  background: linear-gradient(180deg, #155da0 0%, #1a6fbe 100%);
}

.hg-sw-tab-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: #e74c3c;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  line-height: 1;
}
.hg-sw-tab-badge:empty { display: none; }

/* ── Concierge tab (green) ──────────────────────────────── */
.hg-sw-tab-concierge {
  background: linear-gradient(180deg, #1e8449 0%, #27ae60 100%);
}
.hg-sw-tab-concierge:hover {
  background: linear-gradient(180deg, #196f3d 0%, #1e8449 100%);
}

/* ── Email Tips tab (teal) ──────────────────────────────── */
.hg-sw-tab-email {
  background: linear-gradient(180deg, #00838f 0%, #00acc1 100%);
}
.hg-sw-tab-email:hover {
  background: linear-gradient(180deg, #006064 0%, #00838f 100%);
}

/* ── The slide-out panel ─────────────────────────────────── */
.hg-sw-panel {
  width: 270px;
  background: #fff;
  border-radius: 0;
  box-shadow: 6px 0 28px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s;
}

/* Collapsed: panel slides off-screen to the left */
.hg-side-widget.is-collapsed .hg-sw-panel {
  margin-left: -270px;
  opacity: 0;
  pointer-events: none;
}

.hg-sw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #eee;
}
.hg-sw-header-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  display: flex;
  align-items: center;
  gap: 7px;
}
.hg-sw-header-title i { color: #2e86de; font-size: 16px; }
.hg-sw-header-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2e86de;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
}
.hg-sw-header-badge:empty { display: none; }

.hg-sw-view-link {
  font-size: 13px;
  font-weight: 600;
  color: #2e86de !important;
  text-decoration: none;
}
.hg-sw-view-link:hover { text-decoration: underline; }

/* ── Page action (save/remove current page) ──────────────── */
.hg-sw-page-action {
  padding: 14px 18px;
  border-bottom: 1px solid #f0f0f0;
}
.hg-sw-page-label {
  font-size: 11px;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.hg-sw-save-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #2e86de;
  background: #fff;
  color: #2e86de;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  line-height: 1;
  text-align: left;
}
.hg-sw-save-btn:hover {
  background: #2e86de;
  color: #fff;
}
.hg-sw-save-btn.is-added {
  background: #27ae60;
  border-color: #27ae60;
  color: #fff;
}
.hg-sw-save-btn.is-added:hover {
  background: #c0392b;
  border-color: #c0392b;
}
.hg-sw-save-btn i { font-size: 14px; }

.hg-sw-save-btn-pulse {
  animation: hg-sw-pop 0.35s ease;
}
@keyframes hg-sw-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ── Quick counts row ────────────────────────────────────── */
.hg-sw-counts {
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hg-sw-count-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #555;
  font-weight: 500;
}
.hg-sw-count-item i { font-size: 13px; color: #888; }
.hg-sw-count-num {
  font-weight: 700;
  color: #1a1a2e;
}
.hg-sw-count-link {
  text-decoration: none;
  color: #555 !important;
  transition: color 0.15s;
}
.hg-sw-count-link:hover { color: #2e86de !important; }
.hg-sw-count-link i { color: #27ae60; }

/* ── Empty state ─────────────────────────────────────────── */
.hg-sw-empty {
  padding: 18px 16px;
  text-align: center;
  color: #999;
  font-size: 13px;
  line-height: 1.5;
}
.hg-sw-empty i {
  display: block;
  font-size: 28px;
  color: #ccc;
  margin-bottom: 8px;
}

/* ── Full trip link (bottom bar) ─────────────────────────── */
.hg-sw-footer {
  padding: 12px 18px 14px;
  border-top: 1px solid #eee;
  margin-top: auto;
}
.hg-sw-footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  background: linear-gradient(135deg, #1a6fbe 0%, #2e86de 100%);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  transition: background 0.2s, transform 0.15s;
}
.hg-sw-footer-link:hover {
  background: linear-gradient(135deg, #155da0 0%, #1a6fbe 100%);
  transform: translateY(-1px);
}
.hg-sw-footer-link i { font-size: 14px; }

/* ── Responsive ──────────────────────────────────────────── */
/* Hide old side tabs everywhere — replaced by FAB */
.hg-sw-tabs,
.hg-side-widget { display: none !important; }

/* ── FAB + pill (all devices) ───────────────────────────── */
.hg-sw-fab {
  display: flex;
  position: fixed;
  bottom: 160px;
  left: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a6fbe 0%, #155da0 100%);
  border: 3px solid #fff;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  z-index: 9992;
  align-items: center;
  justify-content: center;
  animation: hg-sw-fab-pulse 2.5s infinite;
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
}
.hg-sw-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.hg-sw-fab.is-open {
  animation: none;
  background: linear-gradient(135deg, #444 0%, #333 100%);
}
.hg-sw-fab .hg-sw-fab-icon {
  transition: transform 0.25s ease, opacity 0.25s ease;
  font-size: 22px;
}
.hg-sw-fab .hg-sw-fab-close {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -11px;
  margin-left: -7px;
  opacity: 0;
  transform: rotate(-90deg) scale(0);
  transition: transform 0.25s ease, opacity 0.25s ease;
  font-size: 22px;
  font-style: normal;
}
.hg-sw-fab.is-open .hg-sw-fab-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0);
}
.hg-sw-fab.is-open .hg-sw-fab-close {
  opacity: 1;
  transform: rotate(0) scale(1);
}
.hg-sw-fab .hg-sw-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid #fff;
}
.hg-sw-fab .hg-sw-fab-badge:empty { display: none; }

@keyframes hg-sw-fab-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 0 0 rgba(26,111,190,0.4); }
  50% { box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 0 10px rgba(26,111,190,0); }
}

/* The expandable pill */
.hg-sw-pill {
  display: flex;
  position: fixed;
  bottom: 220px;
  left: 16px;
  z-index: 9991;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  transform-origin: bottom left;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.hg-sw-pill.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.hg-sw-pill-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 26px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
  line-height: 1;
}
.hg-sw-pill-item:hover {
  transform: scale(1.04);
  box-shadow: 0 5px 18px rgba(0,0,0,0.28);
  color: #fff;
  text-decoration: none;
}
.hg-sw-pill-item i { font-size: 16px; }

.hg-sw-pill-trip { background: linear-gradient(135deg, #1a6fbe 0%, #2e86de 100%); }
.hg-sw-pill-concierge { background: linear-gradient(135deg, #1e8449 0%, #27ae60 100%); }
.hg-sw-pill-email { background: linear-gradient(135deg, #00838f 0%, #00acc1 100%); }

.hg-sw-pill-badge {
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
}
.hg-sw-pill-badge:empty { display: none; }

/* ─── Toast notification ───────────────────────────────────── */
.hg-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a2e;
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  z-index: 99999;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
}

.hg-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hg-toast i {
  color: #27ae60;
  margin-right: 6px;
}

.hg-toast a {
  color: #7ec8e3 !important;
  text-decoration: none;
  margin-left: 10px;
  font-weight: 600;
}
.hg-toast a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   Summary page (/my-trip)
   ═══════════════════════════════════════════════════════════════ */

.wrapper:has(.itin-hero) {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Narrow banner image at the very top of /my-trip.
   Sits above the logo+title block so the page opens with a
   visual anchor instead of going straight into form chrome.
   Inner img is 40% taller than the container; a small JS rAF
   loop transforms it between roughly -25% and -15% as the
   banner crosses the viewport for a subtle parallax. */
.itin-hero-banner {
  position: relative;
  width: 100%;
  height: 220px;
  margin: 16px 0 0;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  background: #eaeef1;
}
.itin-hero-banner img {
  display: block;
  width: 100%;
  height: 140%;
  object-fit: cover;
  object-position: center 40%;
  transform: translate3d(0, -20%, 0);
  will-change: transform;
}
@media (max-width: 900px) {
  .itin-hero-banner { height: 170px; }
}
@media (max-width: 640px) {
  .itin-hero-banner {
    height: 130px;
    margin-top: 12px;
    border-radius: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .itin-hero-banner img { transform: translate3d(0, -20%, 0) !important; }
}
@media print {
  .itin-hero-banner { display: none; }
}

.itin-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0 12px;
  flex-wrap: wrap;
}

.itin-hero-logo {
  height: 85px;
  width: auto; /* keep native portrait aspect — don't squash */
  flex-shrink: 0;
  display: block;
}

.itin-hero-text {
  flex: 1 1 220px;
  min-width: 0;
}

.itin-hero h1 {
  font-size: 2.8rem;
  margin: 0 0 4px;
}

.itin-hero p {
  color: #666;
  font-size: 1.5rem;
  margin: 0;
}

/* ─── Sponsor callout ─────────────────────────────────────── */
.itin-sponsor {
  text-align: center;
  margin: -5px 0 18px;
}

.itin-sponsor-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  background: linear-gradient(135deg, #f8f9fa 0%, #eef1f5 100%);
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  text-decoration: none !important;
  font-size: 13px;
  transition: all 0.2s;
}

.itin-sponsor-link:hover {
  background: linear-gradient(135deg, #eef1f5 0%, #e3e8ef 100%);
  border-color: #ccc;
}

.itin-sponsor-label {
  color: #999;
  font-weight: 500;
}

.itin-sponsor-name {
  color: #1a1a2e;
  font-weight: 700;
}

.itin-sponsor-shaka {
  font-size: 16px;
}

/* ─── Tabs ─────────────────────────────────────────────────── */
.itin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e8e8e8;
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.itin-tab {
  flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  font-family: inherit;
  text-align: center;
  margin-bottom: -2px;
}

.itin-tab i {
  margin-right: 5px;
  font-size: 13px;
}

.itin-tab:hover {
  color: #444;
}

.itin-tab.is-active {
  color: #2e86de;
  border-bottom-color: #2e86de;
}

.itin-tab-count {
  display: inline-block;
  background: #eee;
  color: #666;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9px;
  margin-left: 4px;
  vertical-align: middle;
  min-height: 14px;
}

.itin-tab-count:empty {
  display: none;
}

.itin-tab.is-active .itin-tab-count {
  background: #2e86de;
  color: #fff;
}

/* Vertical divider between "trip items" tab cluster (places / hotels /
   tours / saved / restaurants) and "planning tools" (itineraries /
   map views / quizzes). Helps users see why summed tab badges don't
   match the headline My Trip count — tools are tracked separately. */
.itin-tab-divider {
  display: inline-block;
  flex: 0 0 1px;
  width: 1px;
  align-self: center;
  height: 22px;
  background: #d4d8d6;
  margin: 0 6px;
}

/* Tools (itineraries / map views / quizzes) sit muted relative to
   trip items — they're meta-state, not vacation contents. Hover and
   active states still highlight them clearly when selected. */
.itin-tab--tool { color: #a0a8a3; }
.itin-tab--tool:hover { color: #6a7a71; }
.itin-tab--tool.is-active { color: #2e86de; }

@media (max-width: 500px) {
  .itin-tab { font-size: 12px; padding: 10px 10px; }
  .itin-tab i { display: none; }
  .itin-tab-divider { margin: 0 3px; height: 18px; }
}

/* ─── Island sub-tabs ─────────────────────────────────────── */
.itin-island-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.itin-island-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  background: #f4f5f7;
  border: 2px solid transparent;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: inherit;
  line-height: 1.3;
}

.itin-island-tab i {
  font-size: 14px;
  opacity: 0.7;
}

.itin-island-tab:hover {
  background: #eaecf0;
  color: #444;
}

.itin-island-tab.is-active {
  background: #fff;
  border-color: var(--tab-color, #2e86de);
  color: var(--tab-color, #2e86de);
}

.itin-island-tab.is-active i {
  opacity: 1;
}

.itin-island-tab-count {
  display: inline-block;
  background: #e8e8e8;
  color: #888;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
}

.itin-island-tab.is-active .itin-island-tab-count {
  background: var(--tab-color, #2e86de);
  color: #fff;
}

@media (max-width: 500px) {
  .itin-island-tabs {
    gap: 6px;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .itin-island-tab {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* ─── Actions bar ──────────────────────────────────────────── */
.itin-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
/* Wrapper around the secondary buttons (Send, Print, Clear) so we can
   keep them clustered together regardless of whether the Build New
   Itinerary CTA is present. Without this wrapper, gap rules + flex-wrap
   would pull the buttons apart on narrow screens. */
.itin-actions-secondary {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
/* On the Itineraries tab the Build button shares the toolbar — switch
   to space-between so secondary cluster sits left, primary CTA right.
   Other tabs keep the original right-aligned secondary cluster. */
.itin-actions--has-create {
  justify-content: space-between;
}
.itin-actions--has-create .itin-actions-secondary {
  /* margin-left:auto would push the secondary cluster right, which we
     don't want when the Build button is present — leave at default. */
  margin-left: 0;
}

.itin-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #d0d5dd;
  font-family: inherit;
  transition: all 0.2s ease;
  background: #fff;
  color: #555;
}

.itin-actions button:hover {
  background: #f5f5f5;
  border-color: #bbb;
  color: #333;
}

.itin-actions button i {
  font-size: 11px;
  opacity: 0.7;
}

.itin-btn-share {
  color: #2e86de !important;
  border-color: #bdd5f0 !important;
}
.itin-btn-share:hover {
  background: #f0f6ff !important;
}

.itin-btn-print {
  background: #fff;
  color: #555 !important;
}

.itin-btn-clear {
  color: #999 !important;
  border-color: #e0e0e0 !important;
}
.itin-btn-clear:hover {
  color: #c0392b !important;
  border-color: #f0c0b8 !important;
  background: #fef5f3 !important;
}

/* ─── Search bar ──────────────────────────────────────────── */
.itin-search {
  max-width: 480px;
  margin: 4px auto 18px;
}
.itin-search-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #d9e0e6;
  border-radius: 999px;
  padding: 4px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.itin-search-inner:hover {
  border-color: #ccd3dc;
}
.itin-search-inner:focus-within {
  border-color: #2e86de;
  box-shadow: 0 0 0 3px rgba(46, 134, 222, 0.12);
}
.itin-search-icon {
  color: #999;
  font-size: 14px;
  flex-shrink: 0;
}
.itin-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 10px;
  font-size: 14px;
  font-family: inherit;
  background: transparent;
  min-width: 0;
}
.itin-search-input::placeholder {
  color: #aab;
}
.itin-search-count {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
  padding-right: 4px;
}
.itin-search-clear {
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  flex-shrink: 0;
  display: none;
}
.itin-search-clear:hover {
  color: #c0392b;
}
.itin-search.has-query .itin-search-clear {
  display: block;
}
.itin-item.itin-search-hidden {
  display: none !important;
}
.itin-island-group.itin-search-hidden,
.itin-day-group.itin-search-hidden {
  display: none !important;
}
.itin-item-mapview.itin-search-hidden {
  display: none !important;
}

@media print {
  .itin-search { display: none !important; }
}

/* ─── Empty state ──────────────────────────────────────────── */
.itin-empty {
  text-align: center;
  padding: 50px 20px;
}

.itin-empty > i {
  font-size: 4rem;
  color: #ccc;
  display: block;
  margin-bottom: 15px;
}

.itin-empty h2 {
  font-size: 2.2rem;
  color: #555;
  margin-bottom: 10px;
}

.itin-empty p {
  color: #888;
  font-size: 1.5rem;
  max-width: 460px;
  margin: 0 auto 25px;
}

.itin-empty a.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 25px;
  font-weight: 600;
  text-decoration: none;
}

.itin-empty-cta2 {
  display: block;
  margin-top: 12px;
  color: #2e86de;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.itin-empty-cta2:hover {
  text-decoration: underline;
}

/* ─── Island groups ────────────────────────────────────────── */
.itin-island-group {
  margin-bottom: 24px;
}

.itin-island-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #eee;
}

.itin-island-header h2 {
  font-size: 2.2rem;
  margin: 0;
  color: #333;
}

.itin-island-count {
  background: #eee;
  color: #666;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.itin-map-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}
.itin-map-toggle:hover {
  background: #f5f5f5;
}
.itin-map-toggle i {
  font-size: 11px;
}

.itin-island-map-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, margin 0.35s ease;
  margin-bottom: 0;
}
.itin-island-map-wrap.is-open {
  max-height: 300px;
  margin-bottom: 14px;
}

.itin-island-map {
  width: 100%;
  height: 250px;
  border-radius: 10px;
  background: #e8eee8;
  border: 1px solid #ddd;
}

/* ─── Item cards (shared) ──────────────────────────────────── */
.itin-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: box-shadow 0.2s;
  align-items: flex-start;
  position: relative;
  cursor: pointer;
}

.itin-item:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.itin-item-img {
  width: 90px;
  height: 68px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f0f0f0;
}

.itin-item-body {
  flex: 1;
  min-width: 0;
}

.itin-item-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
}

.itin-item-title a {
  color: #222;
  text-decoration: none;
}
.itin-item-title a:hover { color: #2e86de; }

/* Stretch the title link over the entire card so the whole tile is clickable */
.itin-item-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Keep interactive elements above the title-link ::after overlay */
.itin-item-remove,
.itin-item-map-link,
.itin-item-actions,
.itin-day-btns,
.itin-item-move-up,
.itin-item-move-down {
  position: relative;
  z-index: 2;
}

.itin-item-meta {
  font-size: 1.2rem;
  color: #888;
  margin-bottom: 4px;
}

.itin-item-desc {
  font-size: 1.3rem;
  color: #555;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.itin-item-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #ccc;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s;
  align-self: center;
}

.itin-item-remove:hover { color: #c0392b; }

.itin-item-map-link {
  font-size: 1.2rem;
  color: #2e86de;
  text-decoration: none;
  margin-left: 8px;
}
.itin-item-map-link:hover { text-decoration: underline; }

/* ─── Type-specific card accents ───────────────────────────── */
.itin-item-hotel { border-left: 3px solid #2e86de; }
.itin-item-tour { border-left: 3px solid #f39c12; }
.itin-item-article { border-left: 3px solid #8e44ad; }

/* ─── Responsive cards ─────────────────────────────────────── */
@media (max-width: 600px) {
  .itin-item {
    flex-direction: column;
    gap: 10px;
  }
  .itin-item-img {
    width: 100%;
    height: 150px;
  }
  .itin-island-map {
    height: 200px;
  }
  .itin-item-remove {
    align-self: flex-end;
    margin-top: -30px;
  }
}

/* ─── Share button ─────────────────────────────────────────── */
.itin-btn-share {
  background: #fff;
  color: #2e86de !important;
}
.itin-btn-share:hover {
  background: #2e86de;
  color: #fff !important;
}

/* ─── Share modal ─────────────────────────────────────────── */
.itin-share-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.itin-share-modal.is-active { display: flex; }
.itin-share-modal-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
}
.itin-share-modal-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  z-index: 1;
  animation: hgShareIn 0.25s ease-out;
}
@keyframes hgShareIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.itin-share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e8e8e8;
}
.itin-share-modal-header h4 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #222;
}
.itin-share-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.itin-share-modal-close:hover { color: #333; }
.itin-share-modal-body {
  padding: 18px;
}
.itin-share-modal-body > p {
  font-size: 1.4rem;
  color: #555;
  margin: 0 0 14px;
  line-height: 1.5;
}
.itin-share-url-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.itin-share-url {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #f8f8f8;
  color: #333;
  min-width: 0;
}
.itin-share-copy {
  padding: 10px 18px;
  background: #2e86de;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.2s;
}
.itin-share-copy:hover { background: #1a6fbe; }
.itin-share-note {
  font-size: 1.2rem !important;
  color: #999 !important;
  margin: 0 !important;
}

/* ─── Import banner ───────────────────────────────────────── */
.itin-import-banner {
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}
.itin-import-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.itin-import-banner-inner > i {
  font-size: 18px;
  flex-shrink: 0;
}
.itin-import-banner-inner > span { flex: 1; }
.itin-import-dismiss {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.6;
}
.itin-import-dismiss:hover { opacity: 1; }
.itin-import-success {
  background: #d4edda;
  color: #155724;
}
.itin-import-success .itin-import-dismiss { color: #155724; }
.itin-import-info {
  background: #d1ecf1;
  color: #0c5460;
}
.itin-import-info .itin-import-dismiss { color: #0c5460; }
.itin-import-error {
  background: #f8d7da;
  color: #721c24;
}
.itin-import-error .itin-import-dismiss { color: #721c24; }

/* ─── Map Views items on itinerary page ─────────────────────── */
.itin-item-mapview {
  border-left: 4px solid #2e86de;
}

.itin-mapview-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  background: #2e86de;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}

.itin-mapview-open:hover {
  background: #1a6fbe;
}

/* ═══════════════════════════════════════════════════════════════
   Print styles
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .goUS-header, .social-bar, footer, .cd-overlay,
  .menu-bg, .progress-container, .noprint,
  .itin-actions, .itin-island-tabs, .itin-item-remove,
  .hg-itinerary-btn, .hg-fab, .hg-trip-fab,
  .hg-ubar, .hg-toast,
  .hgads, .adthr-content,
  aside, .aside, .sidebar,
  .modals, #modal,
  .itin-share-modal, .itin-import-banner { display: none !important; }

  body { background: #fff !important; }
  section.content { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

  .itin-hero h1 { font-size: 22pt; }
  .itin-hero p { font-size: 11pt; color: #555; }

  /* Show all tabs' content when printing */
  .itin-tabs { border-bottom: 1px solid #ccc; }
  .itin-tab { font-size: 10pt; }

  .itin-item {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #ccc;
    margin-bottom: 8px;
    padding: 10px;
  }

  .itin-item-img {
    width: 80px;
    height: 60px;
    border-radius: 4px;
  }

  .itin-item-desc { -webkit-line-clamp: unset; }

  .itin-island-map {
    height: 200px;
    border: 1px solid #ccc;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .itin-island-group {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .itin-item-title a::after {
    content: " (" attr(href) ")";
    position: static;
    font-weight: 400;
    font-size: 9pt;
    color: #888;
  }

  #itin-suggestions { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Trip Suggestions — intelligent recommendations for tours/hotels/restaurants
   ═══════════════════════════════════════════════════════════════ */

.itin-suggestions-wrap {
  /* Sits BELOW the saved-items list now (was above). Generous top
     margin separates the user's primary content from the secondary
     "you might also like" — without it, the suggestion banner
     visually rear-ends the last saved item. */
  margin-top: 28px;
}

.itin-suggestions-header {
  text-align: left;
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8f9fa;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  transition: background 0.2s;
  user-select: none;
}
.itin-suggestions-header:hover {
  background: #f0f1f3;
}

.itin-suggestions-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.itin-suggestions-toggle {
  font-size: 12px;
  color: #999;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.itin-suggestions-wrap.is-expanded .itin-suggestions-toggle {
  transform: rotate(180deg);
}

.itin-suggestions-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
}
.itin-suggestions-title i {
  margin-right: 6px;
  opacity: 0.7;
}

.itin-suggestions-subtitle {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.itin-suggestions-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.itin-suggestions-wrap.is-expanded .itin-suggestions-body {
  max-height: 2000px;
}

.itin-suggestions-island {
  margin-bottom: 16px;
}
.itin-suggestions-island h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 12px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
}

.itin-suggestions-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.itin-sug-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.itin-sug-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.itin-sug-img-wrap {
  position: relative;
  width: 80px;
  height: 64px;
  overflow: hidden;
  background: #f0f0f0;
  flex-shrink: 0;
}
.itin-sug-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.itin-sug-body {
  padding: 8px 10px;
  flex: 1;
  min-width: 0;
}

.itin-sug-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itin-sug-name a {
  color: #1a1a2e;
  text-decoration: none;
}
.itin-sug-name a:hover {
  color: #2e86de;
}

.itin-sug-meta {
  font-size: 11px;
  color: #888;
  margin-bottom: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itin-sug-meta i { color: #f0932b; }

.itin-sug-highlights {
  font-size: 11px;
  color: #999;
  line-height: 1.3;
  display: none;
}

.itin-sug-save {
  flex-shrink: 0;
  margin: 0 10px 0 0;
  padding: 5px 12px;
  border: 1px solid #2e86de;
  border-radius: 6px;
  background: transparent;
  color: #2e86de;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.itin-sug-save:hover {
  background: #2e86de;
  color: #fff;
}
.itin-sug-save.is-saved {
  background: #27ae60;
  border-color: #27ae60;
  color: #fff;
  cursor: default;
}
.itin-sug-save i {
  margin-right: 3px;
}

/* ─── Suggestion tag badges ──────────────────────────────────── */

.itin-sug-tags {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.itin-sug-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  background: #f0f0f0;
  color: #666;
  line-height: 1.4;
}
.itin-sug-tag-match {
  background: #e8f4fd;
  color: #2e86de;
  font-weight: 600;
}

/* ─── Trip tab "Complete Your Trip" section ───────────────────── */

.itin-trip-suggestions {
  margin-top: 16px;
  border-top: none;
  padding-top: 0;
}
.itin-trip-sug-section {
  margin-bottom: 16px;
}
.itin-trip-sug-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-top: 12px;
}
.itin-trip-sug-section-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
}
.itin-trip-sug-section-header h3 i {
  margin-right: 6px;
  opacity: 0.7;
}
.itin-trip-sug-browse {
  font-size: 12px;
  font-weight: 600;
  color: #2e86de;
  text-decoration: none;
}
.itin-trip-sug-browse:hover {
  text-decoration: underline;
}
.itin-trip-sug-browse i {
  font-size: 10px;
  margin-left: 3px;
}

/* ─── Drag handles & numbering ──────────────────────────────── */

.itin-item-drag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  color: #ccc;
  cursor: grab;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  transition: color 0.2s;
  position: relative;
  z-index: 2;
  touch-action: none;
}
.itin-item-drag:hover {
  color: #888;
}
.itin-item-drag:active {
  cursor: grabbing;
}

.itin-item-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #555;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* Dragging state */
.itin-item-dragging {
  opacity: 0.4;
  box-shadow: none;
}

.itin-item[draggable="true"] {
  touch-action: auto;
}

/* Drop indicators */
.itin-drop-above {
  box-shadow: 0 -3px 0 0 #2e86de !important;
}
.itin-drop-below {
  box-shadow: 0 3px 0 0 #2e86de !important;
}
.itin-drop-zone-active {
  background: rgba(46, 134, 222, 0.06);
  border-radius: 8px;
}

/* Touch clone */
.itin-touch-clone {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.85;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  border-radius: 10px;
  transform: rotate(1.5deg);
}

/* Drop zone wrapper */
.itin-drop-zone {
  min-height: 20px;
  transition: background 0.2s;
}

@media (max-width: 600px) {
  .itin-item-drag {
    width: 18px;
    font-size: 14px;
  }
  .itin-item-num {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

/* ─── Quizzes tab ─────────────────────────────────────────── */

.itin-item-quiz {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: default;
}
.itin-item-quiz .itin-item-body {
  flex: 1;
  min-width: 0;
}
.itin-item-quiz .itin-item-desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: #666;
}

.itin-quiz-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}

.itin-quiz-status {
  font-size: 12px;
  margin-top: 6px;
  font-weight: 600;
}
.itin-quiz-status i {
  margin-right: 4px;
}
.itin-quiz-completed {
  color: #27ae60;
}
.itin-quiz-progress {
  color: #f0932b;
}

.itin-quiz-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, box-shadow 0.15s;
}
.itin-quiz-btn-results {
  background: #27ae60;
  color: #fff !important;
}
.itin-quiz-btn-results:hover {
  background: #219a52;
  box-shadow: 0 2px 8px rgba(39,174,96,0.3);
}
.itin-quiz-btn-continue {
  background: #f0932b;
  color: #fff !important;
}
.itin-quiz-btn-continue:hover {
  background: #d98425;
  box-shadow: 0 2px 8px rgba(240,147,43,0.3);
}
.itin-quiz-btn-start {
  background: #2e86de;
  color: #fff !important;
}
.itin-quiz-btn-start:hover {
  background: #2578c9;
  box-shadow: 0 2px 8px rgba(46,134,222,0.3);
}

@media (max-width: 600px) {
  .itin-item-quiz {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
  }
  .itin-quiz-icon {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }
  .itin-quiz-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
  }
}

/* ─���─ Saved Itineraries tab ───────────────────────────────── */

.itin-create-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.itin-btn-create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #059669;
  color: #fff;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.itin-btn-create:hover {
  background: #047857;
  color: #fff;
  text-decoration: none;
}

.itin-itinerary-card {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  transition: box-shadow 0.2s;
}
.itin-itinerary-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Stale-itinerary nudge — amber strip placed between the card header
   and the actions row. Fires when detectItinStaleness() returns reasons
   (missing days from PR #2379 era, or missing transition day from
   PR #2391 era). Layout is icon · message column · CTA button — same
   visual rhythm as the in-page weather banners. */
.itin-itinerary-stale {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff8e6;
  border: 1px solid #ead08a;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 13px;
  color: #4a3d24;
  line-height: 1.4;
}
.itin-itinerary-stale-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: #d4a72c;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.itin-itinerary-stale-body {
  flex: 1;
  min-width: 0;
}
.itin-itinerary-stale-body strong {
  color: #1a1a1a;
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}
.itin-itinerary-stale-cta {
  flex-shrink: 0;
  background: #d4a72c;
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s;
}
.itin-itinerary-stale-cta:hover {
  background: #b08423;
  color: #fff !important;
}
@media (max-width: 600px) {
  .itin-itinerary-stale {
    flex-wrap: wrap;
  }
  .itin-itinerary-stale-cta {
    width: 100%;
    text-align: center;
    margin-top: 6px;
  }
}

.itin-itinerary-header {
  margin-bottom: 12px;
}
.itin-itinerary-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.itin-itinerary-title {
  font-size: 19px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px;
  line-height: 1.3;
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: color 0.15s;
}
.itin-itinerary-title:hover {
  color: #059669;
  text-decoration: none;
}
h3.itin-itinerary-title {
  cursor: default;
}
.itin-itinerary-remove {
  background: none;
  border: none;
  font-size: 22px;
  color: #9ca3af;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}
.itin-itinerary-remove:hover {
  color: #ef4444;
}

.itin-itinerary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.itin-itinerary-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 3px 10px;
  border-radius: 20px;
}
.itin-itinerary-badge i {
  font-size: 12px;
}

.itin-itinerary-islands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.itin-itinerary-island-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 10px;
  border: 1.5px solid;
  border-radius: 20px;
  background: #fff;
}

.itin-itinerary-created {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

/* Drag-handle on each saved-itinerary card. The whole card is
   draggable, but the handle is the visual cue that the row is
   reorderable. Anchored to the LEFT edge of the card so it doesn't
   fall inside iOS's 44×44px tap-target zone for the X delete button
   in the top-right (previously sat at right:36px → centers ~28px
   apart, well below the iOS minimum). Larger hit area now too. */
.itin-itinerary-card {
  position: relative;
  /* Make room for the left-edge drag handle so the colored island
     border + content doesn't visually fight with the handle. */
  padding-left: 36px !important;
}
.itin-itinerary-drag {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: grab;
  padding: 10px 8px;
  font-size: 16px;
  border-radius: 6px;
  line-height: 1;
  /* iOS minimum tap target is 44x44 — pad enough that even a glancing
     touch lands the handle, not the card itself. */
  min-width: 28px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Disable native iOS callout/touch-resize behavior on the handle. */
  -webkit-touch-callout: none;
  touch-action: none;
  transition: color 0.15s, background 0.15s;
}
.itin-itinerary-drag:hover {
  color: #1e293b;
  background: #f1f5f9;
}
.itin-itinerary-drag:active { cursor: grabbing; }
.itin-itinerary-card.itin-itinerary-dragging {
  opacity: 0.4;
}
/* Touch-drag clone pinned to the finger. Mirrors .itin-touch-clone
   styling for the saved-place drag (above) so the two surfaces feel
   the same on mobile. */
.itin-itinerary-touch-clone {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.95;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  transform: scale(1.02);
  transition: transform 0.08s ease-out;
  background: #fff;
}
/* Drop indicator lines — subtle blue rule at the chosen edge */
.itin-itinerary-card.itin-itinerary-drop-above {
  box-shadow: 0 -3px 0 -1px #2e86de inset, 0 1px 4px rgba(0,0,0,0.08);
}
.itin-itinerary-card.itin-itinerary-drop-below {
  box-shadow: 0 3px 0 -1px #2e86de inset, 0 1px 4px rgba(0,0,0,0.08);
}

.itin-itinerary-actions {
  display: flex;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.itin-itinerary-toggle,
.itin-itinerary-share,
.itin-itinerary-edit,
.itin-itinerary-clone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  transition: background 0.15s, border-color 0.15s;
}
.itin-itinerary-toggle:hover,
.itin-itinerary-share:hover,
.itin-itinerary-edit:hover,
.itin-itinerary-clone:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  text-decoration: none;
  color: #374151;
}

/* Day-by-day detail (expanded view) */
.itin-itinerary-detail {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}
.itin-itinerary-day {
  padding: 12px 0 12px 16px;
  margin-bottom: 10px;
}
.itin-itinerary-day-header {
  font-size: 15px;
  color: #1f2937;
  margin-bottom: 8px;
}
.itin-itinerary-day-date {
  color: #6b7280;
  font-size: 13px;
}
.itin-itinerary-day-theme {
  color: #6b7280;
  font-size: 13px;
  font-style: italic;
}

.itin-itinerary-day-activities {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.itin-itinerary-activity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.itin-itinerary-activity-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.itin-itinerary-activity-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.itin-itinerary-activity-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itin-itinerary-activity-name:hover {
  color: #059669;
  text-decoration: underline;
}
.itin-itinerary-activity-meta {
  font-size: 12px;
  color: #9ca3af;
}
.itin-itinerary-dining {
  opacity: 0.85;
}
.itin-itinerary-dining .itin-itinerary-activity-name {
  color: #92400e;
}

/* ─── Master "Trip Details" container ────────────────────── */
/* Wraps two sub-sections (dates + lodging) so the reader has one
   collapsible parent for everything trip-related. Matches the My Trip
   drawer pattern (.hg-td-trip there) so the two surfaces feel like the
   same UI on two devices. */

.itin-trip {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
  border: 1px solid #d8e0e8;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.itin-trip-toggle {
  width: 100%;
  background: transparent;
  border: none;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  color: #1f2937;
  text-align: left;
  letter-spacing: 0.1px;
  transition: background 0.15s;
}
.itin-trip-toggle:hover { background: rgba(59, 130, 246, 0.05); }
.itin-trip-toggle:active { background: rgba(59, 130, 246, 0.10); }
.itin-trip-toggle-icon { color: #3b82f6; margin-right: 4px; font-size: 16px; }
.itin-trip-toggle-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.itin-trip-toggle-arrow { color: #3b82f6; font-size: 14px; }
.itin-trip-inner {
  /* Sub-sections sit inside; their own borders give the visual seam. */
  padding: 0;
}

/* ─── Sub 1: dates / travelers / budget / notes ──────────── */

.itin-overview {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  margin-bottom: 0;
  overflow: hidden;
}
.itin-overview-toggle {
  width: 100%;
  background: transparent;
  border: none;
  padding: 12px 18px 12px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  text-align: left;
  transition: background 0.15s;
}
.itin-overview-toggle:hover { background: #f1f5f9; }
.itin-overview-toggle:active { background: #e2e8f0; }
.itin-overview-toggle-icon { color: #3b82f6; margin-right: 4px; font-size: 13px; }
.itin-overview-toggle-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.itin-overview-toggle-arrow { color: #64748b; font-size: 12px; }
.itin-overview-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 12px 18px 16px 30px;
}
/* Per-island date rows — surfaces above the global date inputs when the
   reader has saved itineraries on 2+ islands. Read-only display derived
   from the saved itineraries themselves. */
.itin-overview-islands {
  grid-column: 1 / -1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
}
.itin-overview-island-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}
.itin-overview-island-row + .itin-overview-island-row {
  border-top: 1px dashed #e2e8f0;
}
.itin-overview-island-label {
  font-weight: 700;
  font-size: 14px;
  color: #1f2937;
  letter-spacing: 0.2px;
}
.itin-overview-island-dates {
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
}
.itin-overview-island-note {
  margin-top: 6px;
  font-size: 11px;
  color: #64748b;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.itin-overview-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.itin-overview-field label i {
  margin-right: 3px;
  font-size: 11px;
}
.itin-overview-dates {
  display: flex;
  align-items: center;
  gap: 6px;
}
.itin-overview-to {
  font-size: 13px;
  color: #94a3b8;
}
.itin-overview-field input[type="date"],
.itin-overview-field input[type="text"],
.itin-overview-field select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 15px;
  color: #1f2937;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.itin-overview-field input[type="date"]:hover,
.itin-overview-field input[type="text"]:hover,
.itin-overview-field select:hover {
  border-color: #94a3b8;
}
.itin-overview-field input[type="date"]:focus,
.itin-overview-field input[type="text"]:focus,
.itin-overview-field select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
  outline: none;
}
.itin-overview-field input[type="date"] {
  width: auto;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.itin-overview-dates .itin-trip-duration {
  font-size: 12px;
  color: #3b82f6;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 2px;
}
@media (max-width: 640px) {
  /* Bigger tap targets on mobile so the collapse/expand affordance is
     unmistakable. */
  .itin-trip-toggle { padding: 16px 14px; min-height: 52px; font-size: 16px; }
  .itin-trip-toggle-arrow { font-size: 16px; }
  .itin-overview-toggle,
  .hg-lp-trip-toggle { padding: 14px 14px 14px 24px; min-height: 48px; font-size: 14px; }
  .itin-overview-toggle-arrow,
  .hg-lp-trip-toggle-arrow { font-size: 13px; }
  .itin-overview-inner {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px 14px 24px;
  }
  .hg-lp-trip-inner {
    padding: 10px 14px 14px 24px;
  }
}

/* ─── Full-screen itinerary detail view ──────────────────── */

.itin-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}
.itin-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s;
}
.itin-detail-back:hover {
  background: #f3f4f6;
}
.itin-detail-topbar-actions {
  display: flex;
  gap: 8px;
}
.itin-detail-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s;
}
.itin-detail-action:hover {
  background: #f9fafb;
}

.itin-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.itin-detail-title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  line-height: 1.3;
}
.itin-detail-rename {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.itin-detail-rename:hover {
  color: #374151;
  background: #f3f4f6;
}
.itin-detail-rename-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.itin-detail-rename-row input {
  flex: 1;
  padding: 8px 12px;
  border: 2px solid #059669;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  outline: none;
  min-width: 0;
}
.itin-detail-rename-save,
.itin-detail-rename-cancel {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.itin-detail-rename-save {
  background: #059669;
  color: #fff;
}
.itin-detail-rename-save:hover {
  background: #047857;
}
.itin-detail-rename-cancel {
  background: #f3f4f6;
  color: #374151;
}
.itin-detail-rename-cancel:hover {
  background: #e5e7eb;
}

.itin-detail-meta {
  margin-bottom: 24px;
}

.itin-detail-day {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 20px;
  padding: 20px 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid #e5e7eb;
}
.itin-detail-day-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.itin-detail-day-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}
.itin-detail-day-date {
  font-size: 14px;
  color: #6b7280;
}
.itin-detail-day-theme {
  font-size: 14px;
  color: #059669;
  font-weight: 600;
}

.itin-detail-activity {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid #f3f4f6;
}
.itin-detail-activity:first-child {
  border-top: none;
  padding-top: 0;
}
.itin-detail-activity-img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.itin-detail-activity-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.itin-detail-activity-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  text-decoration: none;
}
.itin-detail-activity-name:hover {
  color: #059669;
  text-decoration: underline;
}
.itin-detail-activity-meta {
  font-size: 13px;
  color: #6b7280;
}
.itin-detail-activity-desc {
  font-size: 14px;
  color: #4b5563;
  margin: 2px 0 0;
  line-height: 1.5;
}
.itin-detail-tip {
  font-size: 13px;
  color: #92400e;
  background: #fffbeb;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 4px;
}
.itin-detail-dining .itin-detail-activity-name {
  color: #92400e;
}

@media (max-width: 640px) {
  .itin-detail-topbar {
    flex-direction: column;
    align-items: stretch;
  }
  .itin-detail-topbar-actions {
    justify-content: stretch;
  }
  .itin-detail-action {
    flex: 1;
    justify-content: center;
  }
  .itin-detail-title {
    font-size: 20px;
  }
  .itin-detail-day {
    padding: 14px 16px;
  }
  .itin-detail-activity-img {
    width: 60px;
    height: 60px;
  }
  .itin-detail-rename-row {
    flex-wrap: wrap;
  }
  .itin-detail-rename-row input {
    font-size: 16px;
  }
}

@media print {
  .itin-detail-topbar,
  .itin-detail-rename,
  .itin-detail-rename-row {
    display: none !important;
  }
  .itin-detail-day {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ─── Share email prompt ─────────────────────────────────── */

.itin-share-email {
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.itin-share-email-inner h4 {
  font-size: 17px;
  font-weight: 700;
  color: #065f46;
  margin: 0 0 6px;
}
.itin-share-email-inner h4 i {
  margin-right: 6px;
}
.itin-share-email-inner p {
  font-size: 14px;
  color: #374151;
  margin: 0 0 12px;
}
.itin-share-email-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.itin-share-email-row input[type="email"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 15px;
  color: #1f2937;
  background: #fff;
  transition: border-color 0.15s;
}
.itin-share-email-row input[type="email"]:focus {
  border-color: #059669;
  outline: none;
}
.itin-share-email-submit {
  padding: 10px 20px;
  background: #059669;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.itin-share-email-submit:hover {
  background: #047857;
}
.itin-share-email-actions {
  text-align: center;
}
.itin-share-email-skip {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 0;
}
.itin-share-email-skip:hover {
  color: #374151;
}

@media (max-width: 480px) {
  .itin-share-email-row {
    flex-direction: column;
  }
  .itin-share-email {
    padding: 16px;
  }
}

/* ─── Save Itinerary button on generator ─────────────────── */
.ig-btn-save-itin {
  background: #059669;
  color: #fff;
}
.ig-btn-save-itin:hover {
  background: #047857;
}
.ig-btn-save-itin.is-saved {
  background: #d1fae5;
  color: #065f46;
  cursor: default;
}

/* ─── Responsive: itinerary cards ────────────────────────── */
@media (max-width: 640px) {
  .itin-itinerary-card {
    padding: 14px;
  }
  .itin-itinerary-title {
    font-size: 17px;
  }
  .itin-itinerary-actions {
    flex-direction: column;
  }
  .itin-itinerary-toggle,
  .itin-itinerary-share,
  .itin-itinerary-edit,
  .itin-itinerary-clone {
    width: 100%;
    justify-content: center;
  }
  .itin-create-bar {
    justify-content: center;
  }
  /* On small screens, stack secondary cluster above the Build CTA
     instead of forcing a side-by-side row that wraps awkwardly. */
  .itin-actions--has-create {
    justify-content: stretch;
  }
  .itin-actions--has-create .itin-actions-secondary {
    width: 100%;
    justify-content: flex-start;
  }
  .itin-actions--has-create .itin-btn-create {
    width: 100%;
    justify-content: center;
  }
}

/* ─── Print: itinerary extras ──────────────────────────────── */

@media print {
  .itin-item-drag {
    display: none;
  }
  .itin-item-num {
    background: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .itin-quiz-btn {
    border: 1px solid #ccc;
    color: #333 !important;
    background: none !important;
  }
  .itin-itinerary-remove,
  .itin-itinerary-toggle,
  .itin-itinerary-share,
  .itin-itinerary-edit,
  .itin-itinerary-clone,
  .itin-btn-create {
    display: none !important;
  }
  .itin-itinerary-detail {
    display: block !important;
  }
}