@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* DriveDock brand palette (v2) — sage green / dark charcoal / off-white */
  --primary: #3E6B57;
  --primary-dark: #305343; /* darkened primary — button hover, success text, header wordmark */
  --dark: #1F2D28;         /* brand dark charcoal — logo badge, dark surfaces */
  --navy: #16324f;
  --navy-dark: #0e2036;
  --accent: #ff8a3d;
  --bg: #F4F6F3;
  --card: #ffffff;
  --text: #1F2D28;
  --muted: #586863;
  --border: #e2e6e2;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

header.topbar .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--primary-dark);
  text-decoration: none;
}

.logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

header.topbar nav a {
  margin-left: 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
}

.admin-nav {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 19;
}

.admin-nav a {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.admin-nav a.active {
  background: var(--primary);
  color: #fff;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
}

.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: var(--radius);
  border: none;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.btn:hover { background: var(--primary-dark); }
.btn.secondary { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.btn.accent { background: var(--accent); }
.btn.full { width: 100%; }
.btn.small { padding: 8px 12px; font-size: 0.85rem; }

/* Welcome / intro screen (welcome.html) — shown once to logged-out
   first-time visitors, see the guard at the top of index.html. */
.welcome-screen {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  text-align: center;
  box-sizing: border-box;
}

.welcome-mark { margin-bottom: 18px; }

.welcome-title {
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.welcome-tagline {
  color: #b9c4bf;
  font-size: 1rem;
  margin: 0 0 56px;
}

.welcome-actions {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.welcome-actions .btn.welcome-btn-secondary {
  background: transparent;
  color: #F4F6F3;
  border: 1.5px solid rgba(244,246,243,0.35);
}

.welcome-actions .btn.welcome-btn-secondary:hover {
  background: rgba(244,246,243,0.08);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  overflow: hidden;
}

input, textarea, select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.95rem;
  margin-bottom: 12px;
  font-family: inherit;
}

/* iOS Safari/WKWebView gives datetime-local inputs an internal layout that
   doesn't always shrink to fit a narrow container the way other inputs do
   — without this it can visually overflow past its own card's rounded
   corners on small screens. */
input[type="datetime-local"] {
  min-width: 0;
}

/* Checkboxes (amenities, etc.) shouldn't inherit the text-input padding/
   border/rounded-corner treatment above — that was squashing the native
   checkmark inside a padded, bordered box, making checked boxes hard or
   impossible to see as checked (looked "broken" even though the value was
   actually toggling). Reset to a normal small checkbox instead. */
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 0;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--primary);
}

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--muted);
}

.map-wrap {
  position: relative;
}

.map-wrap-full {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

#map {
  width: 100%;
  height: 56vh;
  border-radius: var(--radius);
  overflow: hidden;
}

.map-wrap-full #map {
  height: 100%;
  border-radius: 0;
}

/* The map now fills the whole screen, so Mapbox's own bottom-left
   attribution control renders right under our fixed .tabbar and is hidden
   behind it. Shift it up to clear the tabbar (same 76px the listing sheet
   uses) so the little "i" icon is actually visible above the nav bar. */
.map-wrap-full .mapboxgl-ctrl-bottom-left {
  bottom: calc(76px + env(safe-area-inset-bottom));
}

.search-bar {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.search-bar input {
  border: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  flex: 1;
}

.search-bar input:focus { outline: none; }

.search-bar .icon { color: var(--muted); display: flex; align-items: center; }

.search-suggestions {
  position: absolute;
  top: 58px;
  left: 12px;
  right: 12px;
  z-index: 11;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  overflow: hidden;
  display: none;
}

.suggestion-row {
  padding: 11px 14px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.suggestion-row:last-child { border-bottom: none; }
.suggestion-row:hover, .suggestion-row:active { background: var(--bg); }

.price-pill {
  background: #fff;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.78rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  position: relative;
}

.price-pill::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--primary);
}

.price-pill.bumped { color: var(--accent); border-color: var(--accent); }
.price-pill.bumped::after { border-top-color: var(--accent); }

.top-row {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.top-row .thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}

.top-row .info { flex: 1; min-width: 0; }
.top-row .info .distance { font-size: 0.75rem; color: var(--muted); }
.top-row .info .price { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.top-row .info .price span { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.top-row .info .title { font-size: 0.85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.listing-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(76px + env(safe-area-inset-bottom)); /* clears the fixed tabbar (which itself grows on notched devices) so nav stays reachable while open */
  max-height: 36vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
  padding: 16px;
  overflow-y: auto;
  z-index: 25;
  transform: translateY(115%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.listing-sheet.open { transform: translateY(0); }

.listing-sheet .sheet-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: var(--bg);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
}

.spot-tags { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }

.spot-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 999px;
}

.spot-tag svg { flex-shrink: 0; }

.detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 20;
}

.detail-topbar .back { color: var(--text); display: flex; }
.detail-topbar .title { font-size: 0.95rem; font-weight: 600; }
.detail-topbar .actions { display: flex; gap: 16px; color: var(--text); }
.detail-topbar button { background: none; border: none; padding: 0; cursor: pointer; color: inherit; display: flex; }

.hero-photo {
  position: relative;
  height: 170px;
  border-radius: var(--radius);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  overflow: hidden;
  margin-bottom: 14px;
}

.hero-photo .walk-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 999px;
}

/* Swipeable photo gallery on listing.html — plain CSS scroll-snap, no JS
   library needed. Falls back to .hero-photo (the placeholder icon box)
   when a listing has no photos yet. */
.hero-gallery {
  position: relative;
  height: 170px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
}

.hero-gallery-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.hero-gallery-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.hero-gallery-dots {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
}

.hero-gallery-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
}

.hero-gallery-dots .dot.active { background: #fff; }

.hero-gallery .walk-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 999px;
}

/* Small square thumbnail used both in the map's listing-sheet (scoped via
   .top-row .thumb above) and standalone on the host dashboard listing
   cards — shared sizing/rounding, with an <img> variant that fills it. */
.thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photo upload grid on host-new-listing.html */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}

.photo-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.feature-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.88rem;
}

.feature-row svg { color: var(--muted); flex-shrink: 0; }

.price-boxes { display: flex; gap: 10px; margin: 10px 0; }

.price-box {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  text-align: center;
}

.price-box .amount { font-size: 1.1rem; font-weight: 700; }
.price-box .unit { font-size: 0.72rem; color: var(--muted); }

.host-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Booking card on listing.html tends to be the thing users have to scroll
   for — trim its internal spacing a bit so more of it fits without
   scrolling, without shrinking the inputs themselves (still full touch
   target size). */
#bookingCard h3 { margin-bottom: 10px; }
#bookingCard label { margin-bottom: 2px; }
#bookingCard input { margin-bottom: 8px; }

.host-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.listing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.muted { color: var(--muted); font-size: 0.85rem; }

.badge {
  display: inline-block;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge.event { background: #fff3e0; color: #b45309; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.stat-card .stat-value { font-size: 1.4rem; font-weight: 700; color: var(--primary-dark); }
.stat-card .stat-label { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th, .admin-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.admin-table th { color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
}

.error-text { color: #b91c1c; font-size: 0.85rem; margin: -6px 0 12px; }
.success-text { color: var(--primary-dark); font-size: 0.85rem; margin: -6px 0 12px; }

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 8px 0 max(20px, calc(8px + env(safe-area-inset-bottom)));
  z-index: 30;
}

.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.7rem;
}

.tabbar a.active { color: var(--primary); font-weight: 500; }
.tabbar a.active svg { stroke: var(--primary); }