/* LanternScout — Weekend Planner styles
   Scrollable page · Navy/amber/cream · Playfair Display + DM Sans */

*, *::before, *::after { box-sizing: border-box; }

/* Author display rules (e.g. flex/inline-flex on buttons, shells) must not
   override [hidden] — without this, any class-based `display` declaration
   silently wins over the UA stylesheet's [hidden] rule. */
[hidden] { display: none !important; }

html {
  min-height: 100%;
  background-color: var(--cream);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;   /* so the footer sits at the bottom like Scout */
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--ink);
  font-family: var(--font-body);
  background: transparent;
}
.planner-footer { margin-top: auto; }

/* Loading view: topbar + footer are hidden, so centre the lone card in the
   viewport instead of letting it float at the top with empty space below. */
body.is-loading { justify-content: center; }
body.is-loading .planner-shell { margin-top: auto; margin-bottom: auto; }

/* ── Topbar (kept for results back button) ───────────────────────────────── */

.planner-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms, border-color 160ms;
}
.planner-back svg { width: 18px; height: 18px; flex-shrink: 0; }
.planner-back:hover { background: var(--cream-dark); border-color: var(--border-strong); }

/* ── Shell ──────────────────────────────────────────────────────────────── */

.planner-shell {
  max-width: 680px;
  margin: 1.5rem auto 3rem;
  padding: 2rem 2rem 3rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 8px 32px -8px rgba(29, 58, 94, 0.18);
}

/* ── Title ──────────────────────────────────────────────────────────────── */

.planner-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 1.5rem;
  line-height: 1.2;
}

/* ── Form groups ────────────────────────────────────────────────────────── */

.form-group {
  margin-bottom: 1.75rem;
}

.form-label {
  display: block;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

.form-label .optional {
  font-weight: 400;
  color: var(--muted);
}

/* .form-input base structure moved to base.css; focus accent + variants here.
   Navy focus glow — the planner's blue counterpart to Scout's amber glow. */
.form-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(29, 58, 94, 0.12); }

textarea.form-input {
  resize: vertical;
  min-height: 72px;
}

/* ── Location + autocomplete ────────────────────────────────────────────── */

.plan-address-wrap {
  position: relative;
}

.address-ac-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 8px 24px -4px rgba(29,58,94,0.18);
  list-style: none;
  padding: 4px;
  margin: 0;
  z-index: 500;
  overflow: hidden;
}

.address-ac-item {
  padding: 0.6rem 0.85rem;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  line-height: 1.35;
}

.address-ac-item:hover,
.address-ac-item--active {
  background: var(--navy-light);
  color: var(--navy);
}

.geo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  background: var(--amber-soft);
  color: var(--amber-strong);
  border: 1.5px solid rgba(245,158,11,0.35);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
  margin-top: 0.5rem;
}
.geo-btn:hover { background: #fde68a; }
.geo-btn:disabled { opacity: 0.6; cursor: default; }
.geo-btn svg { width: 16px; height: 16px; }

/* ── Radius row ─────────────────────────────────────────────────────────── */

.planner-radius-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.planner-radius-row .form-input {
  width: 6rem;
}

.planner-radius-unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

/* Distance unit toggle (km / mi) — navy accent to match the planner. */
.planner-unit-group { display: inline-flex; gap: 0.35rem; }
.planner-unit-btn {
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--card-bg);
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.planner-unit-btn:hover { border-color: var(--border-strong); }
.planner-unit-btn--active { background: var(--navy); border-color: var(--navy); color: #fff; }
.planner-radius-hint { font-size: 0.78rem; color: var(--muted); margin: 0.5rem 0 0; }

/* ── Age tags ───────────────────────────────────────────────────────────── */

.age-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.age-input-row .form-input {
  width: 7rem;
  flex-shrink: 0;
}

.age-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
  white-space: nowrap;
}
.age-add-btn:hover { background: var(--navy-light); border-color: var(--navy); }

.age-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.age-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-body);
}

.age-tag-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 0.1rem;
  transition: color 120ms;
}
.age-tag-remove:hover { color: #fff; }

/* ── Chip groups ────────────────────────────────────────────────────────── */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
  user-select: none;
}
.chip:hover { background: var(--navy-light); border-color: var(--border-strong); }
.chip.chip--active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Intent-first hero: the "what kind of weekend?" box is the main input. */
.form-label--hero {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
}
.form-input--hero {
  font-size: 1rem;
  line-height: 1.55;
  border-width: 1.5px;
}
.form-input--hero:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(29, 58, 94, 0.15); }

/* Optional-refinements disclosure */
.more-options {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 1rem;
  margin-bottom: 1.25rem;
  background: rgba(255,255,255,0.5);
}
.more-options__summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 0;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.more-options__summary::-webkit-details-marker { display: none; }
.more-options__summary::before {
  content: '▸';
  color: var(--muted);
  transition: transform 150ms;
}
.more-options[open] .more-options__summary::before { transform: rotate(90deg); }
.more-options__hint { font-weight: 500; color: var(--muted); font-size: 0.82rem; }
.more-options__body { padding-bottom: 0.5rem; }

/* Quick-add chips sit under the free-text box and write a sentence into it. */
.quick-add-hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0.85rem 0 0.5rem;
}
.char-count {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: end;
}
.char-count--limit { color: var(--amber-strong); font-weight: 700; }
.chip--quickadd {
  font-size: 0.82rem;
  padding: 0.4rem 0.85rem;
}
.chip--quickadd.chip--active {
  background: var(--amber-soft);
  border-color: var(--amber);
  color: var(--amber-strong);
}

/* ── Error message ──────────────────────────────────────────────────────── */

.form-error {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  color: #b91c1c;
  margin-bottom: 1.25rem;
}

/* ── Button row (Back + Submit) ─────────────────────────────────────────── */

.planner-btn-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}

.planner-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms, border-color 160ms;
}
.planner-secondary-btn svg { width: 16px; height: 16px; }
.planner-secondary-btn:hover { background: var(--navy-light); border-color: var(--border-strong); }

.plan-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  border: none;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 160ms;
}
.plan-submit-btn:hover { opacity: 0.88; }
.plan-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.plan-submit-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Loading (inside the card) ──────────────────────────────────────────── */

#planner-view-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  text-align: center;
  min-height: 46vh;
  gap: 0.5rem;
}

/* The lantern floats over a soft, pulsing amber halo — no hard box. The source
   clip is 16:9 with the lantern centred, so we crop to a square with
   object-fit:cover (dropping the empty sides → the lantern fills the frame) and
   fade the square's edges out with a radial mask so only the lantern shows. */
.planner-loading-video-wrap {
  position: relative;
  width: min(340px, 78vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto 1rem;
  line-height: 0;
}
.planner-loading-video-wrap::before {
  content: '';
  position: absolute;
  inset: 8%;
  background: radial-gradient(circle at 50% 52%,
    rgba(245, 158, 11, 0.32) 0%, rgba(245, 158, 11, 0.12) 48%, transparent 72%);
  filter: blur(12px);
  border-radius: 50%;
  z-index: 0;
  animation: lantern-glow 2.6s ease-in-out infinite;
}
@keyframes lantern-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
.planner-loading-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Ellipse (narrow + tall): fades the cropped empty sides hard while keeping
     the tall lantern's full height (ring + base) visible. */
  -webkit-mask-image: radial-gradient(ellipse 54% 82% at 50% 50%, #000 62%, transparent 88%);
          mask-image: radial-gradient(ellipse 54% 82% at 50% 50%, #000 62%, transparent 88%);
}

/* Navy text with a warm amber highlight that sweeps across — an on-brand
   "working…" shimmer. The message itself still cross-fades on each change
   (opacity handled from JS), which coexists with the background sweep. */
/* Size/weight only — the navy→amber shimmer comes from the shared
   .ls-loading-shimmer class (base.css), also used by the Scout loading text. */
.planner-loading-text {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 0;
  transition: opacity 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .planner-loading-video-wrap::before { animation: none; }
}

/* ── Results ────────────────────────────────────────────────────────────── */

.results-logo-wrap {
  text-align: center;
  margin-bottom: 1.5rem;
}

.results-logo {
  height: 92px;
  width: auto;
  display: inline-block;
  filter: drop-shadow(0 2px 6px rgba(29, 58, 94, 0.12));
}
@media (max-width: 600px) {
  .results-logo { height: 64px; }
}

.results-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.results-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.results-back:hover { background: var(--cream-dark); border-color: var(--border-strong); }

.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: background 160ms;
}
.print-btn:hover { background: var(--amber-soft); border-color: var(--amber-strong); }
.print-btn svg { width: 16px; height: 16px; }

.plan-summary {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 0.85rem;
}

.plan-why {
  background: var(--navy-light);
  border-left: 3px solid var(--navy);
  border-radius: 0 10px 10px 0;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  color: var(--navy);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

/* Bold, concise "why this plan" at the top of the results (replaces the box
   that used to sit under the map). */
.plan-why__label {
  display: block;
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.3rem;
}
.plan-why--chosen ul { list-style: none; margin: 0; padding: 0; }
.plan-why--chosen li {
  position: relative; padding-left: 1.35rem;
  font-size: 0.95rem; font-weight: 700; color: var(--navy);
  line-height: 1.5; margin-top: 0.2rem;
}
.plan-why--chosen li:first-child { margin-top: 0; }
.plan-why--chosen li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--teal); font-weight: 800;
}

.plan-backup-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--amber-strong);
  margin: 0 0 0.75rem;
}

/* ── Weather bar ────────────────────────────────────────────────────────── */

.weather-bar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.weather-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--navy-light);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--navy);
  font-weight: 600;
}

.weather-chip--rainy { background: #dbeafe; }
.weather-chip--sunny { background: var(--amber-soft); }

/* ── Day sections ───────────────────────────────────────────────────────── */

.day-section { margin-bottom: 2.5rem; }

.day-heading {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--cream-dark);
}

.day-heading .day-date {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.5rem;
}

/* ── Slot cards ─────────────────────────────────────────────────────────── */

.slots { display: flex; flex-direction: column; gap: 0.85rem; }

/* Browse phase uses a grid (like the main search's result cards) since it's
   a menu to scan, not a sequential schedule; the detail phase keeps the
   single-column list since there are only a few, richer cards by then. */
.slots--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Drive segment between two consecutive detail-phase stops (or home to the
   first one) — a real duration/distance from the Routes API, not a guess. */
.drive-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: -0.35rem auto;
  padding: 0.35rem 0.9rem;
  color: var(--navy-mid);
  background: var(--navy-light);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  width: fit-content;
}
.drive-connector svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ══ Itinerary view — the ready-made day plan ════════════════════════════════ */

#plan-itinerary { margin-top: 0.5rem; }

/* On the results view with a map, widen the shell so the plan + route map sit
   side by side. Narrow screens stay single-column (see .itin-layout below). */
.planner-shell--wide { max-width: 1040px; }

.itin-layout { display: block; }
.itin-side { margin-top: 1.5rem; }
.itin-side > * + * { margin-top: 1.25rem; }
.itin-map__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.itin-map__expand {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  background: var(--amber);
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 3px 10px -2px rgba(245, 158, 11, 0.5);
  transition: background 0.15s, transform 0.1s;
}
.itin-map__expand:hover { background: #d97706; transform: translateY(-1px); }
/* Click-to-enlarge preview: the iframe still pans, but a hint invites opening
   the big overlay. The transparent overlay catches the click. */
.itin-map__framewrap { position: relative; cursor: zoom-in; }
.itin-map__framewrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
}
.itin-map__hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px -2px rgba(245, 158, 11, 0.6);
  pointer-events: none;
}
.itin-map__frame {
  width: 100%;
  height: 420px;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: block;
}
.itin-map__static {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: block;
}
.itin-map__static[hidden], .itin-map__frame[hidden] { display: none; }

/* Numbered legend under the embed — the map can't show numbered pins, so this
   ties each 1/2/3 to a stop, matching the itinerary rail's numbered dots. */
.itin-map__legend {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.itin-map__legrow { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.itin-map__legnum {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itin-map__legnum--food  { background: var(--amber); }
.itin-map__legnum--event { background: var(--teal); }
.itin-map__legname { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Full-screen map overlay (opened from the preview) */
.itin-map-modal[hidden] { display: none; }
.itin-map-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.itin-map-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 36, 58, 0.55);
  backdrop-filter: blur(2px);
}
.itin-map-modal__panel {
  position: relative;
  background: var(--card-bg);
  border-radius: 20px;
  width: min(1000px, 100%);
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(18, 36, 58, 0.5);
}
.itin-map-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(18,36,58,0.25);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
}
.itin-map-modal__grid { display: grid; grid-template-columns: 1fr; }
.itin-map-modal__mapwrap { position: relative; background: var(--navy-light); }
.itin-map-modal__frame { width: 100%; height: 46vh; border: 0; display: block; }
.itin-map-modal__js { width: 100%; height: 46vh; display: block; background: var(--navy-light); }
.itin-map-modal__js[hidden] { display: none; }
.itin-map-modal__static {
  width: 100%; height: 46vh; display: block; object-fit: contain;
  background: var(--navy-light);
}
.itin-map-modal__legend { padding: 1rem 1.25rem 1.25rem; overflow-y: auto; }
.itin-map-modal__legend h4 {
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--muted); margin: 0 0 0.6rem;
}
.itin-map-modal__legend ol { list-style: none; margin: 0; padding: 0; }
.itin-map-modal__legend li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.92rem; color: var(--ink); margin-bottom: 0.5rem;
}
.itin-map-legend__num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 0.82rem; font-weight: 800; color: #fff;
  background: var(--navy-mid);
}
.itin-map-legend__num--food  { background: var(--amber); }
.itin-map-legend__num--event { background: var(--teal); }
.itin-map-legend__note { font-size: 0.75rem; color: var(--muted); margin: 0.4rem 0 0; }

/* Legend rows are tappable → focus the matching pin on the interactive map. */
.itin-map-modal__legend li.itin-map-legend__row { cursor: pointer; border-radius: 8px; padding: 0.2rem 0.35rem; margin-left: -0.35rem; transition: background 130ms; }
.itin-map-legend__row:hover { background: var(--navy-light); }
.itin-map-legend__row--active { background: var(--amber-soft); }

/* Colour key — explains what the pin/badge colours mean (they encode category). */
.itin-map-legend__key {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
  margin: 0.7rem 0 0.2rem; font-size: 0.78rem; color: var(--muted);
}
.itin-map-legend__key span { display: inline-flex; align-items: center; gap: 0.35rem; }
.itin-map-legend__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.itin-map-legend__dot--activity { background: var(--navy-mid); }
.itin-map-legend__dot--food     { background: var(--amber); }
.itin-map-legend__dot--event    { background: var(--teal); }

/* Pin mini-card (Google InfoWindow content). */
.itin-mapinfo { font-family: var(--font-body); min-width: 140px; max-width: 220px; padding: 0.1rem 0.15rem; }
.itin-mapinfo__name { display: block; color: var(--navy); font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.itin-mapinfo__meta { color: var(--ink); font-size: 0.82rem; margin-top: 0.2rem; }
.itin-mapinfo__drive { color: var(--muted); font-size: 0.78rem; margin-top: 0.2rem; }
.itin-map-modal__gmaps {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 1rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  font-size: 0.88rem; font-weight: 700; color: var(--navy);
  text-decoration: none;
  transition: background 140ms, border-color 140ms;
}
.itin-map-modal__gmaps:hover { background: var(--cream-dark); border-color: var(--border-strong); }
@media (min-width: 720px) {
  .itin-map-modal__grid { grid-template-columns: 1.6fr 1fr; }
  .itin-map-modal__frame,
  .itin-map-modal__js,
  .itin-map-modal__static { height: 70vh; }
  .itin-map-modal__legend { max-height: 70vh; }
}

/* Swap hint replacing the old "different plan" button */
.itin-swap-hint {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  background: var(--navy-light);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  margin: 0;
}
.itin-swap-hint b { color: var(--navy); }

/* Two columns once there's room: the plan on the left, and on the right the
   route map + "why we chose this" + "different plan" (so the right column is
   always filled — no dead space beside a short map). */
@media (min-width: 860px) {
  .itin-layout {
    display: grid;
    /* minmax(0,1fr) lets the left column shrink below its content's min-width;
       a bare 1fr can't, so wide content (cards, long venue names) would blow the
       grid out and push the right column (map + boxes) past the card margin. */
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 1.75rem;
    align-items: start;
  }
  .itin-main { min-width: 0; }
  .itin-side { margin-top: 0; min-width: 0; position: sticky; top: 1.5rem; }
  .itin-map__frame { height: 460px; }
}

/* Hero "Best pick" card */
.itin-hero {
  background: linear-gradient(150deg, #fff 0%, var(--amber-soft) 140%);
  border: 1.5px solid var(--amber);
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 8px 26px -10px rgba(245, 158, 11, 0.4);
  margin-bottom: 1.5rem;
}

/* Google Places photos (streamed via /api/place-photo). A skeleton bg keeps the
   image loading even before it's visible; the photo fades in on load, and a
   failed/absent photo is hidden from JS so no broken-image box remains. */
.photo-wrap { background: var(--navy-light); overflow: hidden; position: relative; }
.place-photo { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; }
.photo-wrap--loaded .place-photo { opacity: 1; }
.photo-credit {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.itin-hero__photo {
  margin: -1.4rem -1.5rem 1rem;
  height: 190px;
  border-radius: 17px 17px 0 0;
}
.itin-stop__photo {
  float: right;
  width: 76px;
  height: 76px;
  margin: 0.15rem 0 0.4rem 0.7rem;
  border-radius: 10px;
}
.itin-hero__badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--amber-strong);
  background: rgba(255, 255, 255, 0.7);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.7rem;
}
.itin-hero__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.2rem;
  line-height: 1.15;
}
.itin-hero__venue {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy-mid);
  text-decoration: none;
  margin-bottom: 0.7rem;
}
.itin-hero__venue:hover { text-decoration: underline; }

/* Compact emoji meta-chip rows (replace verbose badges) */
.meta-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.55rem 0 0; }
.meta-chip {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

/* "Why you'll love it" / "Why we chose this" bullets */
.itin-why { margin-top: 0.85rem; }
.itin-why__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.itin-why ul { list-style: none; margin: 0; padding: 0; }
.itin-why li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.itin-why li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 800;
}

/* Timed rail: activity → lunch → activity → coffee */
.itin-rail { position: relative; margin: 0 0 1.4rem; }
.itin-stop {
  display: grid;
  grid-template-columns: 64px 40px 1fr;
  align-items: start;
  gap: 0.5rem;
}
.itin-stop__time {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy-mid);
  text-align: right;
  padding-top: 0.5rem;
  white-space: nowrap;
}
.itin-stop__dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--navy-light);
  border-radius: 50%;
  z-index: 1;
}
/* Big step number for clear 1,2,3 sequencing (cross-references the route map). */
.itin-stop__num {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}
.itin-stop--food .itin-stop__num  { color: var(--amber-strong); }
.itin-stop--event .itin-stop__num { color: var(--teal); }
/* Category emoji rides as a small badge on the dot's corner. */
.itin-stop__emojibadge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  font-size: 0.72rem;
  background: #fff;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(29,58,94,0.25);
}
.itin-stop__body {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.75rem 0.95rem;
  margin-bottom: 0.2rem;
}
.itin-stop__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  display: inline-block;
}
.itin-stop__title:hover { text-decoration: underline; }

.itin-stop__dirlink {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--amber-strong);
  text-decoration: none;
}
.itin-stop__dirlink svg { flex-shrink: 0; }
.itin-stop__dirlink:hover { text-decoration: underline; }

/* Colour language: food slots are warm/amber, activity slots cool/navy — so
   "where to eat" reads as visually distinct from "things to do". */
.itin-stop--activity .itin-stop__dot { background: var(--navy-light); }
.itin-stop--activity .itin-stop__body { border-left: 3px solid var(--navy-mid); }
.itin-stop--food .itin-stop__dot { background: var(--amber-soft); }
.itin-stop--food .itin-stop__body {
  border-left: 3px solid var(--amber);
  background: linear-gradient(180deg, #fff 0%, rgba(254, 243, 199, 0.35) 100%);
}
.itin-stop--food .itin-stop__time { color: var(--amber-strong); }

/* Events — the "this weekend only" highlight, teal accent so they pop as
   special/time-limited, distinct from both activities and food. */
.itin-stop--event .itin-stop__dot { background: var(--teal-soft); }
.itin-stop--event .itin-stop__body {
  border-left: 3px solid var(--teal);
  background: linear-gradient(180deg, #fff 0%, rgba(204, 251, 241, 0.4) 100%);
}
.itin-stop--event .itin-stop__time { color: var(--teal); }

/* Per-slot swap boxes */
.itin-swaps { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.itin-swaps__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.itin-swaps__row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.itin-swap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  transition: border-color 140ms, transform 100ms, box-shadow 140ms;
  max-width: 100%;
}
.itin-swap:hover {
  border-color: var(--navy-mid);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px -4px rgba(29, 58, 94, 0.3);
}
.itin-swap:active { transform: translateY(0); }
.itin-stop--food .itin-swap:hover { border-color: var(--amber); }
.itin-swap__emoji { font-size: 0.95rem; }
.itin-swap__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12ch; }
.itin-swap__rating { color: var(--amber-strong); font-weight: 700; flex-shrink: 0; }

/* Drive connector between stops — sits under the icon column */
.itin-drive {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.35rem 0 0.35rem 74px;
}
/* Drive from the searcher's own place to the first stop — slightly emphasised. */
.itin-drive--home { color: var(--navy-mid); font-weight: 700; }

/* Totals + why-chosen block */
.itin-totals { margin-bottom: 1.25rem; }
.itin-total-chip {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--navy-light);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  margin-bottom: 0.85rem;
}
.itin-why--chosen {
  background: var(--navy-light);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
}

/* Other options + regenerate */
.itin-controls { margin-top: 0.5rem; }
.itin-alts { margin-bottom: 1.1rem; }
.itin-alts__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.itin-alts__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.itin-alt {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  text-decoration: none;
}
.itin-alt:hover { border-color: var(--navy-mid); }
.itin-regen { width: 100%; justify-content: center; }

@media (max-width: 480px) {
  .itin-stop { grid-template-columns: 52px 34px 1fr; }
  .itin-stop__dot { width: 34px; height: 34px; font-size: 1rem; }
  .itin-drive { padding-left: 60px; }
  .itin-hero__title { font-size: 1.3rem; }
}

/* ── Detail-phase icon timeline — at-a-glance route overview above the full
   cards below. One badge per stop, connected by a line with real drive time;
   tapping a stop scrolls to its card. ────────────────────────────────────── */
.plan-timeline-strip {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1.35rem 1.1rem 1rem;
  margin: 0 0 1.5rem;
  background: linear-gradient(180deg, var(--navy-light) 0%, rgba(232, 238, 245, 0.45) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  scrollbar-width: thin;
}

.timeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 84px;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

.timeline-node__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--navy-mid), var(--navy));
  color: #fff;
  box-shadow: 0 4px 14px -3px rgba(29, 58, 94, 0.45);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.timeline-node__badge svg { width: 22px; height: 22px; }

.timeline-node:hover .timeline-node__badge,
.timeline-node:focus-visible .timeline-node__badge {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px -4px rgba(29, 58, 94, 0.5);
}

.timeline-node__step {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 50%;
  border: 2px solid var(--cream);
}

.timeline-node__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Connecting line between two stops — a dotted rail at badge-centre height
   (25px = half the 50px badge) with the real drive time floating on top. */
.timeline-connector {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 32px;
  min-width: 32px;
  height: 50px;
}
.timeline-connector::before {
  content: '';
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 11px);
}
.timeline-connector span {
  position: relative;
  top: 25px;
  transform: translateY(-50%);
  background: var(--cream);
  border: 1px solid var(--border-strong);
  color: var(--navy-mid);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .plan-timeline-strip { padding: 1.1rem 0.85rem 0.85rem; border-radius: 14px; }
  .timeline-node { width: 68px; }
  .timeline-node__badge { width: 44px; height: 44px; }
  .timeline-node__badge svg { width: 19px; height: 19px; }
  .timeline-connector span { display: none; } /* keep the line, drop the label — too tight for both */
}

.plan-activities-hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin: -0.75rem 0 1.25rem;
  font-style: italic;
}

.slot-card {
  position: relative;
  display: flex;
  gap: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  transition: box-shadow 160ms;
}
.slot-card:hover { box-shadow: 0 4px 16px -4px rgba(29, 58, 94, 0.14); }

/* ── Selectable activity cards (browse phase) ──────────────────────────── */

.slot-card--selectable {
  cursor: pointer;
  border-color: rgba(29, 58, 94, 0.18);
  padding-right: 2.75rem; /* room for the badge */
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
    opacity 180ms ease, transform 200ms ease;
}

.slot-card--selectable:not(.slot-card--selected):not(.slot-card--select-dimmed):hover {
  border-color: var(--amber);
}

.slot-card--selected {
  background: linear-gradient(135deg, var(--amber-soft) 0%, #fffbeb 100%) !important;
  border: 2px solid var(--amber) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3), 0 4px 16px -4px rgba(29, 58, 94, 0.14) !important;
  transform: translateY(-1px);
}

.slot-card--select-dimmed {
  opacity: 0.38;
  pointer-events: none;
  cursor: default;
  filter: grayscale(0.2);
}

.slot-card__badge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease;
  pointer-events: none;
}

.slot-card__badge svg { width: 0.75rem; height: 0.75rem; stroke: transparent; transition: stroke 150ms ease; }

.slot-card--selected .slot-card__badge { background: var(--amber); border-color: var(--amber); }
.slot-card--selected .slot-card__badge svg { stroke: white; }

/* ── Selection toolbar ──────────────────────────────────────────────────── */

.activity-select-bar {
  position: sticky;
  bottom: 0.75rem;
  z-index: 20;
  margin: 1.25rem 0;
  padding: 0.85rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 28px -6px rgba(29, 58, 94, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.activity-select-bar__count { margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--navy); }

.activity-select-bar__btn { padding: 0.6rem 1.5rem; }
.activity-select-bar__btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Weather note / backup section / detail-phase loading ─────────────── */

.plan-weather-note {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.55;
  margin: -0.75rem 0 1.5rem;
}

#plan-weather-backup { margin-top: 2rem; }

.plan-empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--muted);
  font-size: 0.92rem;
  background: var(--navy-light);
  border-radius: 14px;
}

.plan-details-loading {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

#plan-details-back-btn { margin-bottom: 1rem; }

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

.slot-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.2rem;
}

.slot-venue {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 0.4rem;
  word-break: break-word;
}

.slot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.slot-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--navy-light);
  transition: background 140ms;
}
.slot-link:hover { background: #d0dde8; }
.slot-link svg { width: 11px; height: 11px; flex-shrink: 0; }

.slot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.6rem;
}

.slot-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.slot-badge--price    { background: var(--teal-soft);  color: var(--teal); }
.slot-badge--booking  { background: var(--navy-light);  color: var(--navy); }
.slot-badge--duration { background: var(--navy-light);  color: var(--navy); }
.slot-badge--rating   { background: var(--amber-soft);  color: var(--amber-strong); }

.slot-tip {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
}

/* ── Print / Save as PDF ────────────────────────────────────────────────── */

@media print {
  #planner-view-form,
  #planner-view-loading,
  .results-actions,
  .results-logo-wrap,
  .activity-select-bar,
  .wrapup-row,
  .plan-summary-feedback,
  .tip-modal-overlay,
  .photo-wrap,
  .planner-topbar,
  .planner-footer,
  .slot-card__badge { display: none !important; }

  html, body { background: #fff; color: #000; }

  .planner-shell {
    max-width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    box-shadow: none;
    margin: 0;
  }

  .plan-summary  { margin-bottom: 0.5rem; }
  .plan-why      { margin-bottom: 0.75rem; }
  .weather-bar   { margin-bottom: 1rem; }

  .slot-card { break-inside: avoid; border: 1px solid #ddd; margin-bottom: 0.6rem; }
  .day-section { break-inside: avoid; }

  /* Replace full URL with short label */
  .slot-link[href]::after { content: none; }
  .slot-link {
    border: 1px solid #999;
    color: #000;
    background: #f5f5f5;
  }

  a { color: #000; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
  .planner-hero { gap: 0.85rem; }
  .planner-logo { height: min(56px, 14vw); }

  .slot-card--selectable { padding-right: 1.25rem; }
  .slot-card__badge { top: 0.6rem; right: 0.6rem; }
}

/* ── Wrap-up: feedback + support (matches Scout results) ─────────────────── */

.wrapup-row {
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
  max-width: 820px;
}
@media (max-width: 640px) { .wrapup-row { grid-template-columns: 1fr; } }

.wrapup-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1rem;
}

.wrapup-feedback {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.ls-textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff;
}
.ls-textarea:focus { outline: none; border-color: var(--navy); }
.ls-textarea::placeholder { color: #94a3b8; }
.ls-textarea--sm { min-height: 68px; }
.ls-checkbox { accent-color: var(--navy); }

.wrapup-feedback__textarea { margin-top: 0.65rem; resize: none; text-align: start; }
.share-label { display: flex; align-items: flex-start; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted); cursor: pointer; text-align: start; }
.wrapup-feedback__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1rem;
}
.wrapup-feedback__send {
  padding: 0.55rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 700;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.wrapup-feedback__send:hover { background: var(--navy-mid); }
.wrapup-feedback__send:disabled { background: var(--muted); cursor: default; }
.wrapup-feedback__skip {
  font-size: 0.78rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wrapup-feedback__skip:hover { color: var(--navy); }
.feedback-status {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--amber-strong);
}


.wrapup-support {
  background: linear-gradient(145deg, #fffbeb 0%, #fde68a 100%);
  border: 2px solid rgba(245, 158, 11, 0.5);
  border-radius: 18px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.wrapup-support__body { flex: 1; width: 100%; }
.wrapup-support__eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber-strong);
  margin: 0 0 0.65rem;
}
.wrapup-support__text {
  font-size: 0.9rem;
  color: var(--navy);
  line-height: 1.7;
  margin: 0;
}
.wrapup-support__btn {
  display: block;
  margin-top: 1.25rem;
  padding: 0.75rem 1.25rem;
  background: var(--amber);
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 14px -2px rgba(245, 158, 11, 0.45);
  transition: background 0.15s, transform 0.1s;
}
.wrapup-support__btn:hover { background: #d97706; transform: translateY(-1px); }
.wrapup-support__icon { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); vertical-align: middle; margin-right: 0.35rem; }

/* ── Donation prompt shown when leaving a finished plan (mirrors Scout) ──── */

.tip-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1.5rem;
}
.tip-modal-overlay[hidden] { display: none; }
.tip-modal-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 2.25rem 2rem 1.75rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px -10px rgba(10, 22, 40, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.tip-modal-icon { width: 56px; height: 56px; object-fit: contain; margin: 0 0 0.25rem; }
.tip-modal-btn-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: 0.4rem; }
.tip-modal-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--navy); margin: 0; line-height: 1.25; }
.tip-modal-body { font-size: 0.92rem; color: var(--muted); line-height: 1.6; margin: 0.25rem 0 0.5rem; }
.tip-modal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: var(--amber);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 14px -2px rgba(245, 158, 11, 0.45);
  transition: background 0.15s, transform 0.1s;
}
.tip-modal-cta:hover { background: #d97706; transform: translateY(-1px); }
.tip-modal-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tip-modal-dismiss:hover { color: var(--navy); }

/* ── Inline "Was this plan helpful?" summary feedback (mirrors Scout) ────── */

.plan-summary-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0 1.25rem;
}
.plan-summary-feedback__q { font-size: 0.9rem; font-weight: 600; color: var(--navy); margin: 0; }
.plan-feedback-btns { display: flex; gap: 0.4rem; }
.plan-fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  background: #fff;
  border: 2px solid var(--border-strong);
  color: var(--muted);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.plan-fb-btn:hover { background: var(--navy-light); }
.plan-fb-btn--active { border-color: var(--navy); color: var(--navy); background: var(--navy-light); }
.plan-fb-thanks { width: 100%; font-size: 0.85rem; color: var(--amber-strong); margin: 0.15rem 0 0; }

/* ── RTL (Arabic / Persian) ──────────────────────────────────────────────
   The i18n loader sets dir="rtl" on <html>; the form is flex/gap-based so it
   flips automatically. These fix the few explicitly-directional bits (accent
   borders, icon/photo sides, paddings) so results also read correctly. */
html[dir="rtl"] .age-tag-remove { margin-left: 0; margin-right: 0.1rem; }
html[dir="rtl"] .itin-stop__body { border-left: none; }
html[dir="rtl"] .itin-stop--activity .itin-stop__body { border-right: 3px solid var(--navy-mid); }
html[dir="rtl"] .itin-stop--food     .itin-stop__body { border-right: 3px solid var(--amber); }
html[dir="rtl"] .itin-stop--event    .itin-stop__body { border-right: 3px solid var(--teal); }
html[dir="rtl"] .itin-drive { padding-left: 0; padding-right: 60px; }
html[dir="rtl"] .itin-stop__photo { float: left; margin: 0.15rem 0.7rem 0.4rem 0; }
html[dir="rtl"] .itin-map__hint,
html[dir="rtl"] .photo-credit { left: auto; right: 6px; }

/* ── Topbar: just the brand logo (left, like Scout), form view only. ─────── */
.planner-topbar {
  max-width: 680px;
  margin: 1.5rem auto 0.5rem;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.planner-brand { display: inline-flex; align-items: center; }
.lang-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  color: var(--muted);
}
.lang-select-icon { width: 16px; height: 16px; flex-shrink: 0; }
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  padding: 0 1.1rem 0 0;
  line-height: 1.4;
}
.lang-select:hover, .lang-select:focus { color: var(--navy); outline: none; }
.lang-select-caret { position: absolute; right: 0; width: 14px; height: 14px; pointer-events: none; color: var(--muted); }
html[dir="rtl"] .lang-select { padding: 0 0 0 1.1rem; }
html[dir="rtl"] .lang-select-caret { right: auto; left: 0; }

.planner-footer {
  padding: 2rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.planner-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
}
.footer-copyright { font-size: 0.75rem; color: var(--muted); text-align: center; }

/* Clickwrap agreement (matches Scout). */
.clickwrap-notice {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  margin: 0.9rem 0 0;
  line-height: 1.5;
}
.clickwrap-notice a { color: var(--navy); font-weight: 600; }

/* Compact optional-refinement rows (energy / budget / length) — inline label
   + chips on one line to keep the form short. */
/* One chip cloud: three single-select groups stacked with the same gap as the
   chips themselves, so energy / budget / length read as a single set of chips
   (each type wraps onto its own line) rather than three labelled rows. */
.planner-refinements {
  margin-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}