/* ============================================================
   Easy City Tour – CSS
   Stitch "Digital Field Guide" Design System
   ============================================================ */

/* Ensure [hidden] always wins – critical for app.js view switching */
[hidden] { display: none !important; }

/* ── Material Symbols ────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Gradient CTA button (green pulse) ───────────────────── */
.btn-gradient {
  background: linear-gradient(135deg, #006d37 0%, #2ecc71 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-gradient:hover {
  background: linear-gradient(135deg, #005a2d 0%, #25b862 100%);
}
.btn-gradient:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* ── Atmospheric shadow ──────────────────────────────────── */
.atmospheric-shadow {
  box-shadow: 0 12px 32px rgba(27, 28, 26, 0.06);
}

/* ── Ambient card glow ────────────────────────────────────── */
.ambient-glow {
  box-shadow: 0 0 0 1px rgba(187,203,187,0.3), 0 8px 32px rgba(0,109,55,0.08);
}

/* ── Stubbs bobbing animation ─────────────────────────────── */
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(-8px) rotate(1deg); }
}
.stubbs-bob    { animation: bob 3s ease-in-out infinite; }
.stubbs-bob-sm { animation: bob 3.4s ease-in-out infinite; }
.stubbs-bob-xs { animation: bob 2.8s ease-in-out infinite; }

/* ── Loading dots ─────────────────────────────────────────── */
@keyframes loading-dot {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40%           { transform: scale(1);   opacity: 1; }
}
.loading-dot { display: inline-block; animation: loading-dot 1.4s ease-in-out infinite; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

/* ── Speech bubble tails ──────────────────────────────────── */
.speech-tail-tl {
  position: absolute; top: -10px; left: 18px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 10px solid rgba(64, 198, 179, 0.4);
}
.speech-tail-bl {
  position: absolute; bottom: -10px; left: 18px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid rgba(64, 198, 179, 0.4);
}
/* Tail pointing bottom-left — for Stubbs speech bubbles */
.speech-tail-stubbs {
  position: absolute; bottom: -12px; left: 20px;
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 14px solid transparent;
  border-top: 13px solid #52a86e;
}

/* ── Toast slide-in animation ─────────────────────────────── */
@keyframes toastIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.toast-animate { animation: toastIn 0.28s ease; }

/* ── Hide scrollbar ───────────────────────────────────────── */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Auth tab active state (glass version) ────────────────── */
#tab-login, #tab-register {
  transition: all 0.2s ease;
  border-radius: 9999px;
  color: rgba(255,255,255,0.65);
  background: none;
  border: none;
  cursor: pointer;
}
#tab-login.active, #tab-register.active {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* ── Map containers (Leaflet needs explicit height) ───────── */
#map-preview,
#map-final {
  width: 100%;
  height: 100%;
  min-height: 260px;
  background: #e8ebe4;
}

/* ── Final view: map overlay header positioning ─────────── */
#view-final .lg\:flex-1,
#view-preview .lg\:flex-1 {
  position: relative;
}

/* ── Leaflet overrides ────────────────────────────────────── */
.leaflet-container { outline: none; }
.leaflet-popup-content-wrapper {
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
  padding: 0 !important;
}
.leaflet-popup-content { margin: 12px 14px !important; }
.leaflet-popup-tip-container { display: none; }
.leaflet-control-attribution { font-size: 10px !important; }

/* ── Map popup content ────────────────────────────────────── */
.map-popup { max-width: 210px; }
.map-popup strong {
  display: block; font-size: .88rem; font-weight: 600;
  margin-bottom: 3px; color: #1b1c1a;
}
.map-popup p { font-size: .78rem; color: #3d4a3e; margin: 0; line-height: 1.4; }
.popup-cat {
  display: block; font-size: .72rem; color: #6c7b6d;
  margin-bottom: 3px; text-transform: capitalize;
}

/* ── Custom Leaflet markers ───────────────────────────────── */
.marker-wrap { width: 32px; height: 38px; display: flex; align-items: flex-start; justify-content: center; }
.marker-pin {
  width: 30px; height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  border: 2px solid rgba(255,255,255,.9);
}
.marker-pin span { transform: rotate(45deg); font-size: .65rem; font-weight: 800; color: #fff; line-height: 1; }
.marker-removed .marker-pin { filter: grayscale(1); opacity: .45; }

/* ── Spot item removed state ──────────────────────────────── */
.spot-item.removed { opacity: .38; }
.spot-item.removed .spot-name { text-decoration: line-through; }

/* ══════════════════════════════════════════════════════════
   DESKTOP SIDEBAR NAVIGATION
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Shift all views right of the sidebar */
  .view { margin-left: 180px; }
  /* Shift toast container */
  #toast-container { left: calc(50% + 90px); }
  /* Fixed elements offset for sidebar */
  #view-form header { left: 180px; }
  /* Nav overlay: full-width, guaranteed above everything */
  #nav-overlay { z-index: 9999 !important; }
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3d4a3e;
  text-decoration: none;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-nav-item .material-symbols-outlined { font-size: 20px; }
.sidebar-nav-item:hover { background: #efeeea; color: #1b1c19; }
.sidebar-nav-item--active { background: #e6f4ed; color: #43673a; }
.sidebar-nav-item--active:hover { background: #d8edde; color: #43673a; }

/* ══════════════════════════════════════════════════════════
   BOTTOM NAVIGATION
   ══════════════════════════════════════════════════════════ */
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 12px;
  color: rgba(27, 28, 26, 0.45);
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item span:first-child { font-size: 24px; }
.bottom-nav-item span:last-child  { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.bottom-nav-item:hover            { color: #43673a; }
.bottom-nav-item--active          { color: #43673a; }
.bottom-nav-item--active:hover    { color: #43673a; }

/* ══════════════════════════════════════════════════════════
   PREVIEW / FINAL – CONTENT PANEL
   ══════════════════════════════════════════════════════════ */

/* Mobile: let panel grow naturally, finalize CTA fixed at bottom */
.content-panel-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* room for the fixed CTA on mobile */
  padding-bottom: 6rem;
}

@media (min-width: 1024px) {
  .content-panel-scroll {
    max-height: 100vh;
    padding-bottom: 0;
    overflow-y: auto;
  }
}

/* ── Finalize CTA: fixed on mobile, sticky in panel on desktop ── */
.preview-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 0.75rem 1.25rem 1rem;
  background: rgba(250, 249, 245, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (min-width: 1024px) {
  .preview-cta {
    position: sticky;
    bottom: 0;
    left: auto;
    right: auto;
    z-index: 10;
    padding: 1rem 1.25rem;
    background: rgba(250, 249, 245, 0.97);
    border-top: 1px solid rgba(187, 203, 187, 0.3);
  }
}

/* ══════════════════════════════════════════════════════════
   Dynamically-generated HTML from app.js
   These classes are injected at runtime — Tailwind JIT
   cannot see them, so they must live here.
   ══════════════════════════════════════════════════════════ */

/* ── btn-primary (used in dashboard empty state) ──────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: linear-gradient(135deg, #006d37 0%, #2ecc71 100%);
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.btn-primary:hover   { opacity: 0.9; }
.btn-primary:active  { transform: scale(0.97); }

/* ── Stats (vertical icon rows) ───────────────────────────── */
.stat-row { display: flex; align-items: center; gap: 1rem; }
.stat-icon-wrap {
  width: 44px; height: 44px;
  background: rgba(0,109,55,.15);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #006d37; flex-shrink: 0;
}
.stat-icon-wrap .material-symbols-outlined { font-size: 20px; }
.stat-row-label {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #6c7b6d; line-height: 1; margin-bottom: 2px;
}
.stat-row-value { font-size: 1.1rem; font-weight: 800; color: #1b1c1a; line-height: 1.2; }

/* ── Preview Stubbs hint strip ────────────────────────────── */
.preview-stubbs-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #fffdf7;
  border: 1px solid #fde68a;
  border-radius: 10px;
}

/* ── Preview spot list ────────────────────────────────────── */
.spots-cards-grid { display: flex; flex-direction: column; gap: 10px; }
.spot-item { /* kept for JS querySelectorAll compat */ }

/* Horizontal spot row */
.spot-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 12px;
  background: #ffffff;
  border-radius: 16px;
  border: 1.5px solid rgba(187,203,187,0.5);
  box-shadow: 0 1px 3px rgba(0,109,55,.04);
  transition: box-shadow .15s, transform .15s, opacity .2s;
  position: relative;
}
.spot-row:hover { box-shadow: 0 4px 16px rgba(0,109,55,.10); transform: translateY(-1px); }
.spot-row--removed { opacity: .35; }
.spot-row--removed .spot-row-name { text-decoration: line-through; color: #6c7b6d; }

/* Photo thumbnail */
.spot-row-left { position: relative; flex-shrink: 0; }
.spot-row-img  { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; display: block; background: #efeeea; }
.spot-row-img--fallback { display: flex; align-items: center; justify-content: center; }
.spot-row-num {
  position: absolute; bottom: -5px; right: -5px;
  width: 22px; height: 22px; border-radius: 50%;
  color: #fff; font-size: .68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); line-height: 1;
}

/* Content */
.spot-row-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.spot-row-top     { display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap; }
.spot-row-name    { font-size: .93rem; font-weight: 700; color: #1b1c1a; margin: 0; line-height: 1.3; }
.spot-row-badge   {
  font-size: .6rem; font-weight: 800; padding: 2px 7px;
  border-radius: 99px; border: 1.5px solid; white-space: nowrap;
  flex-shrink: 0; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em;
}
.spot-row-desc {
  font-size: .8rem; color: #3d4a3e; margin: 0; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spot-row-why {
  font-size: .75rem; color: #92400e; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 6px; padding: 3px 8px; margin-top: 2px;
  line-height: 1.4; display: flex; align-items: flex-start; gap: 3px;
}

/* Remove / undo button */
.spot-row-remove {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(187,203,187,0.6); background: #f4f4f0; color: #6c7b6d;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.spot-row-remove .material-symbols-outlined { font-size: 16px; line-height: 1; }
.spot-row-remove:hover  { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.spot-row-remove--undo  { border-color: rgba(0,109,55,.35); background: #edf7f1; color: #006d37; }
.spot-row-remove--undo:hover { background: #006d37; color: #fff; border-color: #006d37; }

/* ── Custom Leaflet markers (lf-marker) ───────────────────── */
.lf-marker {
  width: 32px; height: 32px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); border: 2.5px solid rgba(255,255,255,.9);
}
.lf-marker span { transform: rotate(45deg); font-size: .6rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; }

/* ── Dashboard tour cards — glassmorphism ─────────────────── */
.tour-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.66) 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 12px 32px rgba(27,28,26,0.08),
    0 2px 8px rgba(27,28,26,0.04);
  transition: box-shadow .18s, transform .18s;
}
.tour-card::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 40%);
}
.tour-card:hover { box-shadow: 0 8px 28px rgba(0,109,55,.12), 0 2px 8px rgba(27,28,26,0.04); transform: translateY(-2px); }
.tour-card-map {
  position: relative;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(187,203,187,0.35);
}
.tour-card-eyebrow {
  font-size: 9px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: #006d37; margin: 0 0 4px;
}
.tour-card-city { font-size: 1rem; font-weight: 800; margin-bottom: .15rem; color: #1b1c1a; letter-spacing: -0.02em; }
.tour-card-date { font-size: .72rem; color: #6c7b6d; }
.tour-card-pin {
  position: absolute; top: 1rem; right: 1rem;
  width: 32px; height: 32px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, #006d37, #2ecc71);
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 3px 8px rgba(0,109,55,0.28);
  display: flex; align-items: center; justify-content: center;
}
.tour-card-pin span { transform: rotate(45deg); font-size: 10px; font-weight: 800; color: #fff; }
.tour-card-body { padding: .9rem 1.1rem; }
.tour-card-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .75rem; }
.tour-card-stat {
  font-size: .72rem; font-weight: 700; color: #1b1c1a;
  padding: 3px 10px; border-radius: 99px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(187,203,187,0.45);
  backdrop-filter: blur(6px);
}
.tour-card-stat b { color: #006d37; font-weight: 800; }
.tour-card-intention {
  font-size: .78rem; color: #3d4a3e; margin-bottom: .75rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.45;
}
.tour-card-actions { display: flex; gap: 7px; }
.btn-card-view {
  flex: 1; padding: 9px;
  background: linear-gradient(135deg, #006d37 0%, #2ecc71 100%);
  border: none; border-radius: 99px;
  color: #fff; font-size: .8rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,109,55,0.22);
  transition: opacity .15s, transform .15s;
}
.btn-card-view:hover { opacity: 0.9; }
.btn-card-delete {
  padding: 9px 14px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(187,203,187,0.5); border-radius: 99px;
  color: #6c7b6d; font-size: .85rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-card-delete:hover { background: #ffdad6; border-color: #ba1a1a; color: #ba1a1a; }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state { text-align: center; padding: 4rem 2rem; color: #6c7b6d; grid-column: 1 / -1; }
.empty-state-icon { font-size: 3rem; display: block; margin-bottom: .75rem; }
.empty-state h3  { font-size: 1.1rem; font-weight: 700; margin-bottom: .3rem; color: #1b1c1a; }
.empty-state p   { font-size: .875rem; margin-bottom: 1.25rem; }

/* ── Radius slider ────────────────────────────────────────── */
.radius-slider {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px;
  background: linear-gradient(to right, #006d37 var(--pct, 15%), #d5d9d0 var(--pct, 15%));
  outline: none; cursor: pointer;
}
.radius-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #006d37; border: 3px solid #ffffff;
  box-shadow: 0 1px 6px rgba(0,109,55,0.35); cursor: grab;
}
.radius-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #006d37; border: 3px solid #ffffff;
  box-shadow: 0 1px 6px rgba(0,109,55,0.35); cursor: grab;
}
/* ── Category chips ─────────────────────────────────────── */
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #efeeea; color: #3d4a3e;
  border: 1.5px solid transparent; border-radius: 99px;
  padding: 7px 14px; font-size: .875rem; font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.cat-chip.cat-chip--active {
  background: #e6f4ed !important; color: #006d37 !important; border-color: #006d37 !important;
}

/* ── Final View – compact stat chips ─────────────────────── */
.final-stat-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px 4px 7px; background: #efeeea;
  border: 1px solid rgba(187,203,187,0.6); border-radius: 99px;
  font-size: .78rem; font-weight: 700; color: #3d4a3e;
}
.final-stat-chip .material-symbols-outlined { font-size: 14px; color: #006d37; }

/* ── Final View – spot list items ─────────────────────────── */
.spot-list-item {
  display: flex; gap: 14px; padding: 14px 16px;
  background: #ffffff; border-radius: 14px;
  border: 1px solid rgba(187,203,187,0.5);
  box-shadow: 0 1px 4px rgba(0,109,55,0.05);
  align-items: flex-start; transition: box-shadow .15s, transform .15s;
}
.spot-list-item:hover { box-shadow: 0 4px 16px rgba(0,109,55,.10); transform: translateY(-1px); }
.spot-list-left      { position: relative; flex-shrink: 0; }
.spot-list-photo     { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; display: block; background: #efeeea; }
.spot-list-photo--fallback { display: flex; align-items: center; justify-content: center; }
.spot-list-num {
  position: absolute; bottom: -6px; right: -6px;
  width: 22px; height: 22px; border-radius: 50%;
  color: #ffffff; font-size: .7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.18); line-height: 1;
}
.spot-list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.spot-list-top  { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.spot-list-name { font-size: .95rem; font-weight: 700; color: #1b1c1a; margin: 0; line-height: 1.3; }
.spot-list-badge {
  font-size: .65rem; font-weight: 700; padding: 1px 7px;
  border-radius: 99px; border: 1.5px solid; white-space: nowrap;
  flex-shrink: 0; margin-top: 2px; text-transform: uppercase; letter-spacing: .03em;
}
.spot-list-desc {
  font-size: .82rem; color: #3d4a3e; margin: 0; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.spot-list-why {
  font-size: .78rem; color: #92400e; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 7px; padding: 4px 8px; margin: 2px 0 0;
  line-height: 1.4; display: flex; align-items: flex-start; gap: 3px;
}
.spot-list-nav {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  padding: 5px 11px; background: #edf7f1; color: #006d37;
  border-radius: 99px; font-size: .78rem; font-weight: 700; text-decoration: none;
  transition: background .15s;
}
.spot-list-nav:hover { background: #006d37; color: #ffffff; }

/* ── Form input wrapper ──────────────────────────────────── */
.form-input-wrap {
  background: #f4f4f0;
  border-radius: 16px;
  padding: 10px 16px 12px;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.form-input-wrap--icon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.form-input-wrap:focus-within {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 109, 55, 0.18);
}

/* ══════════════════════════════════════════════════════════
   AUTH CARD & INPUTS — Light-mode surface styles
   ══════════════════════════════════════════════════════════ */

/* Auth card on plain background */
.glass-card {
  background: #ffffff;
  border: 1px solid rgba(187, 203, 187, 0.25);
  box-shadow:
    0 4px 24px rgba(27, 28, 26, 0.07),
    0 1px 4px rgba(27, 28, 26, 0.04);
}

/* Auth input fields */
.glass-input {
  background: #f4f6f2;
  border: 1px solid rgba(141, 181, 128, 0.3);
  border-radius: 16px;
  padding: 10px 16px 12px;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.glass-input:focus-within {
  background: #eef2eb;
  box-shadow: 0 0 0 3px rgba(67, 103, 58, 0.12);
  border-color: rgba(67, 103, 58, 0.4);
}

/* Auth tab bar */
.glass-tabs {
  background: #f0f4ee;
  border: 1px solid rgba(141, 181, 128, 0.2);
  border-radius: 9999px;
  padding: 4px;
}
.glass-tab-active {
  background: #43673a !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(67, 103, 58, 0.25);
}

/* ══════════════════════════════════════════════════════════
   TOUCH & INTERACTION — UX critical fixes
   ══════════════════════════════════════════════════════════ */

/* Ensure all bottom nav items hit 44px touch target */
.bottom-nav-item {
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  touch-action: manipulation;
}

/* All sidebar items: cursor + touch */
.sidebar-nav-item {
  cursor: pointer;
  touch-action: manipulation;
}

/* Category chips: 44px touch target */
.cat-chip-label {
  touch-action: manipulation;
  cursor: pointer;
}
.cat-chip {
  min-height: 44px;
  cursor: pointer;
}

/* Dashboard tour card actions */
.btn-card-view,
.btn-card-delete {
  cursor: pointer;
  touch-action: manipulation;
  min-height: 44px;
}

/* ── Glass input placeholder color (auth view) ────────────── */
.glass-input input::placeholder,
.glass-input textarea::placeholder {
  color: rgba(27, 28, 26, 0.35);
}

/* ── Google Places Autocomplete Dropdown ─────────────────── */
.pac-container {
  border-radius: 16px !important;
  border: 1px solid rgba(187,203,187,0.3) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  font-family: 'Inter', sans-serif !important;
  margin-top: 4px !important;
  overflow: hidden;
  background: #f8f9f4;
}
.pac-item {
  padding: 10px 16px !important;
  font-size: 0.875rem !important;
  color: #3d4a3e !important;
  cursor: pointer;
  border-top: 1px solid rgba(187,203,187,0.2) !important;
}
.pac-item:first-child { border-top: none !important; }
.pac-item:hover, .pac-item-selected { background: #e6f4ed !important; }
.pac-item-query { color: #006d37 !important; font-weight: 600 !important; }
.pac-icon { display: none !important; }
.pac-logo { display: none !important; }

/* ══════════════════════════════════════════════════════════
   LANDING PAGE – desktop sidebar offset
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  #view-landing header { left: 180px; }
}

/* ══════════════════════════════════════════════════════════
   STUBBS SPEECH BUBBLE
   Orange filled (default) or outline variant.
   ══════════════════════════════════════════════════════════ */
.stubbs-speech-bubble {
  position: relative;
  display: inline-block;
  background: #fd8b00;
  border-radius: 16px;
  padding: 10px 18px;
}
.stubbs-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -11px; left: 18px;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 13px solid transparent;
  border-top: 12px solid #fd8b00;
}
.stubbs-speech-bubble--outline {
  background: transparent;
  border: 2.5px solid #fd8b00;
}
.stubbs-speech-bubble--outline::after {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   CORNER BADGE
   Absolute-positioned orange pill, slightly rotated.
   ══════════════════════════════════════════════════════════ */
.corner-badge {
  position: absolute;
  top: -8px; right: -8px;
  background: #fd8b00;
  color: #ffffff;
  font-size: 0.6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 99px;
  transform: rotate(3deg);
  box-shadow: 0 2px 8px rgba(253,139,0,0.35);
  white-space: nowrap;
  z-index: 2;
  font-family: 'Inter', sans-serif;
}
.corner-badge--green {
  background: #006d37;
  box-shadow: 0 2px 8px rgba(0,109,55,0.3);
}
.corner-badge--rot-neg { transform: rotate(-3deg); }

/* ══════════════════════════════════════════════════════════
   DASHED HINT CARD
   Dashed orange border, warm off-white background.
   ══════════════════════════════════════════════════════════ */
.dashed-hint-card {
  position: relative;
  border: 2px dashed #fd8b00;
  border-radius: 24px;
  padding: 24px;
  background: #fffdf9;
}

/* ══════════════════════════════════════════════════════════
   LANDING PAGE COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* Feature chips in hero */
.landing-feature-chip {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 5px 13px;
  border-radius: 99px;
  border: 1.5px solid rgba(27,28,26,0.15);
  color: #3d4a3e;
  background: rgba(255,255,255,0.7);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

/* Tour card (landing preview) */
.landing-tour-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: visible;
  box-shadow: 0 12px 32px rgba(27,28,26,0.07), 0 2px 6px rgba(27,28,26,0.04);
  transition: box-shadow .18s, transform .18s;
}
.landing-tour-card:hover {
  box-shadow: 0 16px 40px rgba(0,109,55,0.12), 0 4px 12px rgba(27,28,26,0.06);
  transform: translateY(-2px);
}
.landing-tour-card-body { padding: 20px 20px 22px; }

/* Stat chips inside landing tour cards */
.landing-stat-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: #3d4a3e;
  padding: 3px 9px; border-radius: 99px;
  background: #f4f4f0;
  border: 1px solid rgba(187,203,187,0.5);
  font-family: 'Inter', sans-serif;
}

/* ── Responsive: stack hero on mobile ─────────────────────── */
@media (max-width: 767px) {
  .landing-hero-inner {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }
  .landing-hero-inner .stubbs-speech-bubble {
    margin-bottom: 0;
  }
  .landing-hero-ctas {
    justify-content: center;
  }
  .landing-brand-explain {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════════
   STUBBS LOADER — Keyframes
   ══════════════════════════════════════════════════════════ */

@keyframes stubbs-dance {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  25%      { transform: rotate(0deg)  translateY(-6px); }
  50%      { transform: rotate(6deg)  translateY(0); }
  75%      { transform: rotate(0deg)  translateY(-4px); }
}

@keyframes hat-wobble {
  0%, 100% { transform: translate(0,   0)  rotate(0deg); }
  20%      { transform: translate(-2px,-1px) rotate(-8deg); }
  45%      { transform: translate(6px,  4px) rotate(22deg); }
  55%      { transform: translate(6px,  4px) rotate(22deg); }
  70%      { transform: translate(-1px, 1px) rotate(-4deg); }
}

@keyframes monocle-swing {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(1px, 2px); }
}

@keyframes feather-fall-1 {
  0%, 45%  { opacity: 0; transform: translate(0, 0)   rotate(0deg); }
  50%      { opacity: 1; transform: translate(0, 0)   rotate(0deg); }
  100%     { opacity: 0; transform: translate(20px,80px) rotate(180deg); }
}

@keyframes feather-fall-2 {
  0%, 50%  { opacity: 0; transform: translate(0, 0)    rotate(0deg); }
  55%      { opacity: 1; transform: translate(0, 0)    rotate(0deg); }
  100%     { opacity: 0; transform: translate(-18px,90px) rotate(-220deg); }
}

@keyframes dot-pulse {
  0%, 80%, 100% { transform: scale(0.6); background: #bbcbbb; }
  40%           { transform: scale(1);   background: #fd8b00; }
}

/* ── Stubbs SVG: whole-body dance ─────────────────────────── */
.loader-stubbs-svg {
  animation: stubbs-dance 2.8s ease-in-out infinite;
  transform-origin: 50% 80%;
  display: block;
}

/* ── Hat group ────────────────────────────────────────────── */
.stubbs-hat-anim {
  animation: hat-wobble 2.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* ── Monocle group ────────────────────────────────────────── */
.stubbs-monocle-anim {
  animation: monocle-swing 2.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* ── Falling feathers ─────────────────────────────────────── */
.feather-1 { animation: feather-fall-1 2.8s ease-in infinite; }
.feather-2 { animation: feather-fall-2 2.8s ease-in infinite; animation-delay: 0.15s; }

/* ── Speech bubble ────────────────────────────────────────── */
.loader-bubble {
  position: relative;
  background: #fd8b00;
  border-radius: 18px;
  padding: 14px 22px 16px;
  max-width: 320px;
  text-align: center;
  min-height: 56px;
  box-shadow: 0 4px 14px rgba(253,139,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 40px;
  border-left: 10px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid #fd8b00;
  transform: rotate(8deg);
}
.loader-bubble-text {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
  transition: opacity 350ms ease;
}
.loader-bubble-text.fading { opacity: 0; }

/* ── Loading dots ─────────────────────────────────────────── */
.loader-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.loader-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #bbcbbb;
  animation: dot-pulse 1.4s ease-in-out infinite;
}
.loader-dot:nth-child(2) { animation-delay: 0.2s; }
.loader-dot:nth-child(3) { animation-delay: 0.4s; }

/* ══════════════════════════════════════════════════════════
   LANDING CTA BANNER — teal background, einziges Teal-Element
   ══════════════════════════════════════════════════════════ */
.landing-cta-banner {
  background: linear-gradient(135deg, #006D37 0%, #40C6B3 100%);
  padding: 40px 32px;
}

/* Speech bubble: dark forest green on teal, tail bottom-left toward Stubbs */
.landing-cta-bubble {
  position: relative;
  background: #005027;
  border-radius: 18px;
  padding: 14px 22px;
  transform: rotate(-2deg);
  max-width: 240px;
}
.landing-cta-bubble::after {
  content: '';
  position: absolute;
  bottom: -11px; left: 22px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 14px solid transparent;
  border-top: 12px solid #005027;
  transform: rotate(2deg);
}

/* CTA button */
.landing-cta-banner-btn {
  background: #fd8b00;
  color: #ffffff;
  padding: 16px 32px;
  box-shadow: 0 16px 40px rgba(253,139,0,0.35);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive: stack + full-width button <768px */
@media (max-width: 767px) {
  .landing-cta-banner {
    padding: 32px 24px;
  }
  .landing-cta-banner-btn {
    width: 100%;
  }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .loader-stubbs-svg,
  .stubbs-hat-anim,
  .stubbs-monocle-anim,
  .feather-1,
  .feather-2,
  .loader-dot {
    animation: none !important;
  }
}