/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f5f7f5;
  color: #2d3a2d;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ── Header ── */
header {
  background:
    linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.52)),
    url('hero.jpg') center/cover no-repeat;
  background-color: #1b5e20; /* fallback if no photo */
  color: white;
  padding: 32px 24px 24px;
  text-align: center;
  transition: padding 0.2s ease;
}
.header-inner { margin-bottom: 20px; transition: margin-bottom 0.2s ease; }
.logo {
  font-size: 2.2rem; font-weight: 800; letter-spacing: -0.5px; transition: font-size 0.2s ease;
  display: inline-flex; align-items: center; gap: 0.35em;
}
.logo-icon {
  height: 1.5em; width: 1.5em; object-fit: contain;
  background: #fff; border-radius: 50%; border: 2px solid #000;
  padding: 3px; box-sizing: border-box;
}
.beta-tag {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #a5d6a7;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 4px;
  padding: 2px 6px;
}
.beta-info-btn {
  background: none; border: none; color: rgba(255,255,255,0.8);
  font-size: 0.55em; cursor: pointer; padding: 0; line-height: 1;
  width: 1.5em; height: 1.5em; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.beta-info-btn:hover { color: #fff; background: rgba(255,255,255,0.15); }
.tagline { font-size: 1rem; opacity: 0.85; margin-top: 6px; transition: opacity 0.15s ease, max-height 0.2s ease, margin 0.2s ease; max-height: 40px; overflow: hidden; }

/* Compact header once results are showing — reclaims vertical space for the map/camps */
header.header-compact { padding: 14px 24px 16px; }
header.header-compact .header-inner { margin-bottom: 12px; }
header.header-compact .logo { font-size: 1.4rem; }
header.header-compact .tagline { opacity: 0; max-height: 0; margin: 0; }
header.header-compact .search-bar-wrap { max-width: 460px; }

.search-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.search-bar-wrap {
  position: relative;
  max-width: 560px;
  flex: 1 1 400px;
}
.suggest-camp-btn {
  padding: 13px 18px;
  font-size: 0.88rem;
}

/* ── Autocomplete suggestions ── */
.camp-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  z-index: 200;
  overflow: hidden;
}
.sug-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  flex-wrap: wrap;
}
.sug-item:last-child { border-bottom: none; }
.sug-item:hover { background: #f0f7f0; }
.sug-name { font-weight: 600; color: #1b5e20; font-size: 0.92rem; flex: 1; }
.sug-location   { font-size: 0.78rem; color: #888; width: 100%; }
.sug-empty { display: block; color: #888; font-size: 0.85rem; cursor: default; }
.sug-empty:hover { background: none; }
.sug-coverage-link {
  display: block; margin-top: 4px;
  background: none; border: none; padding: 0;
  color: #2e7d32; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.sug-coverage-link:hover { text-decoration: underline; }

.search-bar {
  display: flex;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.search-bar input {
  flex: 1;
  padding: 14px 18px;
  font-size: 1rem;
  border: none;
  outline: none;
  color: #2d3a2d;
}
.search-bar input::placeholder { color: #aaa; }
.search-clear-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: none;
  border: none;
  color: #aaa;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}
.search-clear-btn:hover { color: #666; }
.search-clear-btn.visible { display: flex; }
.search-bar button {
  padding: 14px 24px;
  background: #f57f17;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.search-bar button:hover    { background: #e65100; }
.search-bar button:disabled { background: #bbb; cursor: not-allowed; }

/* ── Main ── */
main { flex: 1; max-width: 1200px; margin: 0 auto; width: 100%; padding: 24px 20px; }

/* ── Center states ── */
.center-state {
  text-align: center;
  padding: 80px 20px;
  color: #666;
}
.center-state h2   { font-size: 1.5rem; color: #2e7d32; margin-bottom: 10px; }
.center-state p    { font-size: 1rem; line-height: 1.7; max-width: 420px; margin: 0 auto; }
.prompt-icon       { font-size: 3.5rem; margin-bottom: 16px; }
.prompt-icon-img   { width: 72px; height: 72px; object-fit: contain; }

/* Loading spinner */
.spinner {
  width: 40px; height: 40px;
  border: 4px solid #c8e6c9;
  border-top-color: #2e7d32;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Results layout ── */
.results-layout {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

/* ── Sidebar hover zone ── */
.sidebar-wrap {
  flex-shrink: 0;
  width: 226px;
  transition: width 0.22s ease, opacity 0.22s ease;
  overflow: hidden;
  z-index: 60;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
}
.sidebar-wrap.collapsed {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Filter sidebar ── */
.filter-sidebar {
  width: 210px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e8f0e8;
  box-shadow: 2px 0 12px rgba(0,0,0,0.07);
  padding: 16px;
  max-height: 100vh;
  overflow-y: auto;
}
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2e7d32;
}
.sidebar-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: #888;
  padding: 0;
}
.sidebar-close:hover { color: #333; }
.filters-reopen-btn {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2e7d32;
  background: white;
  border: 1px solid #c8e6c9;
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.filters-reopen-btn:hover { background: #f1f8f1; }
.filter-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f4f0;
}
.filter-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.filter-sidebar select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #dde8dd;
  border-radius: 8px;
  font-size: 0.85rem;
  background: #fafffa;
  cursor: pointer;
  outline: none;
  color: #2d3a2d;
}
.filter-sidebar select:focus { border-color: #43a047; }
.filter-age-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #dde8dd;
  border-radius: 8px;
  font-size: 0.85rem;
  background: #fafffa;
  outline: none;
  color: #2d3a2d;
}
.filter-age-input:focus { border-color: #43a047; }

/* ── Toggle switches (Type filter) ── */
.toggle-row { display: flex; flex-direction: column; gap: 10px; }
.toggle-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle-switch input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.toggle-track {
  position: relative;
  width: 38px; height: 20px;
  background: #ccc;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}
.toggle-switch input[type="checkbox"]:checked + .toggle-track { background: #2e7d32; }
.toggle-switch input[type="checkbox"]:checked + .toggle-track .toggle-knob { transform: translateX(18px); }
.toggle-switch input[type="checkbox"]:focus-visible + .toggle-track { box-shadow: 0 0 0 3px rgba(67,160,71,0.3); }
.toggle-text { font-size: 0.85rem; font-weight: 600; color: #2d3a2d; }

/* ── Cost dual-range slider ── */
.cost-slider-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2e7d32;
  text-align: center;
  margin-bottom: 10px;
}
.cost-slider {
  position: relative;
  height: 20px;
  margin: 0 8px;
}
.cost-slider-track {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: #e0e6e0;
  border-radius: 2px;
}
.cost-slider-range {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: #2e7d32;
  border-radius: 2px;
}
.cost-range-input {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 20px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}
.cost-range-input::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; height: 20px; }
.cost-range-input::-moz-range-track { background: transparent; height: 20px; border: none; }
.cost-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: 16px; height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: white;
  border: 2px solid #2e7d32;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}
.cost-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: white;
  border: 2px solid #2e7d32;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* ── Filter pills (toggle buttons) ── */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-pill {
  padding: 5px 11px;
  border: 1px solid #c8e6c9;
  border-radius: 20px;
  background: white;
  color: #2e7d32;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.filter-pill:hover { background: #f0f7f0; border-color: #66bb6a; }
.filter-pill.active {
  background: #2e7d32;
  border-color: #2e7d32;
  color: white;
}
.filter-pill-full { width: 100%; text-align: center; }

.btn-icon { vertical-align: -2px; margin-right: 2px; }

/* Groups Filters + Sort as one unit so they always wrap together, rather
   than leaving it to flex-wrap to decide item-by-item based on available
   width (which produced inconsistent, sometimes badly-gapped results). */
.results-controls-row { display: flex; align-items: center; gap: 12px; }

/* ── Mobile filter toggle ── */
.filter-toggle {
  display: none;
  height: 38px;
  padding: 0 14px;
  background: white;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2e7d32;
  cursor: pointer;
}
.filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 99;
}

/* ── Results content ── */
.results-content { flex: 1; min-width: 0; padding-left: 12px; }

/* Cards + detail panel sit side by side */
.cards-and-panel {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.cards-area { flex: 1; min-width: 0; }
.results-top { margin-bottom: 8px; }
.results-top h2 { font-size: 1.1rem; color: #2e7d32; }

/* Pinned map — sticks to top while cards scroll naturally with the page */
.map-container { display: none; }
#stateResults.map-open .map-container {
  display: block;
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  padding-bottom: 12px;
  margin-bottom: 0;
  box-shadow: 0 2px 0 white;
}
#stateResults.map-open #campMap { height: 280px; }
#stateResults.map-open .cards-area {
  overflow-y: visible;
}

/* ── Filter chips ── */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  min-height: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #a5d6a7;
  border-radius: 20px;
  padding: 3px 10px 3px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}
.chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: #2e7d32;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}
.chip button:hover { color: #c62828; }
.chip-clear {
  background: none;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.78rem;
  color: #888;
  cursor: pointer;
}
.chip-clear:hover { background: #f5f5f5; color: #333; }

/* ── Camp cards grid ── */
.camp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.camp-card {
  position: relative;
  background: white;
  border-radius: 10px;
  border: 1px solid #e8f0e8;
  padding: 13px 15px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
  /* Grid items default to min-width:auto, which respects their content's
     natural minimum size — a single long unbreakable string anywhere inside
     (a long camp name, an unbroken theme/cost string) can force a `1fr`
     column wider than the grid actually has room for, pushing the right
     column off-screen instead of wrapping. min-width:0 lets the card
     actually shrink to its assigned track width like the layout intends. */
  min-width: 0;
}
.camp-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
.camp-card.camp-highlighted {
  border: 2px solid #1b5e20;
  box-shadow: 0 0 0 3px rgba(27,94,32,0.18), 0 4px 20px rgba(0,0,0,0.15);
  transform: translateY(-3px);
}
.camp-card.camp-highlighted .card-expandable {
  max-height: 600px;
  opacity: 1;
  border-top: 1px solid #f0f4f0;
  padding-top: 6px;
  margin-top: 4px;
}

/* Name row */
.card-top { margin-bottom: 1px; }
/* padding-right clears the absolutely-positioned heart save button (top:8px;
   right:8px; 28px wide — see .card-save-btn) so a long camp name can't
   render underneath it. Narrow single-column cards on mobile made this
   collision visible; wider desktop cards just had enough slack for it to
   go unnoticed. */
.card-name-row { display: flex; align-items: center; gap: 6px; padding-right: 36px; }
.camp-favicon { width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0; object-fit: contain; }
.card-name {
  font-size: 0.93rem; font-weight: 700; color: #1b5e20; line-height: 1.3;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-name a { color: inherit; text-decoration: none; }
.card-name a:hover { text-decoration: underline; }
.card-distance-inline {
  font-size: 0.78rem; font-weight: 700; color: #2e7d32;
  flex-shrink: 0; white-space: nowrap;
}

/* Tags row — type + theme, very compact */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.cat-type {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.cat-type-day       { background: #1565c0; color: white; }
.cat-type-overnight { background: #4527a0; color: white; }
.cat-theme {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
}
.cat-theme-sports { background: #fff3e0; color: #bf360c; border: 1px solid #ffcc80; }
.cat-theme-arts   { background: #fce4ec; color: #880e4f; border: 1px solid #f48fb1; }
.cat-theme-stem   { background: #e8eaf6; color: #283593; border: 1px solid #9fa8da; }
.cat-theme-nature { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.cat-theme-other  { background: #f5f5f5; color: #555;    border: 1px solid #e0e0e0; }
.cat-themes { display: flex; gap: 4px; flex-wrap: wrap; }

/* Ages + distance + rating row */
.card-ages-dist {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: #555;
  flex-wrap: wrap;
}
.card-ages     { font-weight: 600; color: #333; }
.card-dot      { color: #ccc; }
.card-cost     { font-size: 0.78rem; font-weight: 600; color: #2d3a2d; margin-top: 2px; }
.card-stars-inline {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  color: #f57f17;
}
.card-stars-inline .star-value { font-size: 0.72rem; color: #888; font-weight: 600; }
.card-stars-inline.hc-stars { color: #00897b; }
.card-stars-inline.hc-stars .star-value { color: #00695c; }
.card-stars-inline .hc-source { font-size: 0.72rem; color: #00897b; font-weight: 600; }

/* Clear all filters button in sidebar */
.sidebar-clear-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f4f0;
}
.sidebar-clear-btn {
  width: 100%;
  padding: 7px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sidebar-clear-btn:hover { background: #fff0f0; border-color: #ef9a9a; color: #c62828; }

/* 2-line clamp for description in expandable */
.desc-clamped-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Expandable section — hidden by default, shown on hover */
.card-expandable {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 0px solid transparent;
}
.camp-card:hover .card-expandable {
  max-height: 600px;
  opacity: 1;
  border-top: 1px solid #f0f4f0;
  padding-top: 6px;
  margin-top: 4px;
}
.card-reg-inline { margin-top: 0; }

/* card-top, card-name-row, favicon, badges defined in camp cards grid section above */

/* ── Small badge row ── */
.card-badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* Length badge */
.length-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #f3e5f5;
  color: #6a1b9a;
}

/* Attribute badges */
.attr-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.attr-faith   { background: #fff8e1; color: #f57f17; border: 1px solid #ffe082; }
.attr-special { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }

/* Registration status badge */
.reg-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.reg-open     { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.reg-closed   { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.reg-upcoming { background: #fff8e1; color: #f57f17; border: 1px solid #ffe082; }

/* Rating + phone meta row */
.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
}
.card-stars  { display: flex; align-items: center; gap: 4px; color: #f57f17; font-size: 0.88rem; }
.star-value  { font-size: 0.78rem; color: #888; font-weight: 600; }
.review-count { font-size: 0.75rem; color: #aaa; }
.rating-source { font-size: 0.75rem; color: #aaa; text-decoration: none; }
/* 16px height matches Google's own stated minimum for this logo (16-19dp) —
   as small as their attribution guidelines allow. */
.rating-source-logo { height: 16px; width: auto; vertical-align: middle; opacity: 0.75; transition: opacity 0.15s; }
a.rating-source:hover .rating-source-logo { opacity: 1; }
.card-phone  { font-size: 0.82rem; color: #666; white-space: nowrap; }

/* S'more Camps' own parent-rating aggregate — deliberately a different hue
   from Google's amber stars (#f57f17) so the two sources never blend together */
.hc-stars { color: #00897b; }
.hc-stars .star-value { color: #00695c; }
.hc-source { font-size: 0.75rem; color: #00897b; font-weight: 600; }

/* Description source label */
.desc-source { font-size: 0.74rem; color: #bbb; font-style: italic; font-weight: 400; }

/* Description */
.card-description { font-size: 0.88rem; color: #555; line-height: 1.5; }
.desc-text { display: block; }
.desc-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc-expanded { display: block; overflow: visible; }
.desc-toggle {
  background: none;
  border: none;
  color: #2e7d32;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0 0;
  display: block;
}
.desc-toggle:hover { text-decoration: underline; }

/* Card detail rows */
.card-details { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card-detail-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.85rem;
  color: #555;
}
.detail-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 64px;
}
.detail-value { color: #333; }

.card-address {
  font-size: 0.82rem;
  color: #888;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.card-distance {
  font-size: 0.78rem;
  font-weight: 600;
  color: #2e7d32;
  white-space: nowrap;
}
.card-reg-dates {
  font-size: 0.82rem;
  color: #666;
}

.card-website {
  font-size: 0.85rem;
  font-weight: 600;
}
.card-website a { color: #1565c0; text-decoration: none; }
.card-website a:hover { text-decoration: underline; }

/* ── Map ── */
.results-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sort-select {
  height: 38px;
  padding: 0 14px;
  background: white;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2e7d32;
  cursor: pointer;
  outline: none;
}
.sort-select:focus { border-color: #66bb6a; }

/* Same height/padding rhythm as Sort and Table so the row reads as one
   organized group — the solid accent color (vs. their plain white/bordered
   look) is what sets Map apart, not a mismatched size. */
.map-toggle-btn {
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  background: #f57f17;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.map-toggle-btn:hover { background: #e65100; }
.map-toggle-btn.active { background: #1b5e20; }

.map-container {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #c8e6c9;
  margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
#campMap {
  height: 380px;
  width: 100%;
}

/* Home pin popup */
.map-home-popup .leaflet-popup-content-wrapper {
  background: #1b5e20;
  color: white;
  border-radius: 8px;
}
.map-home-popup .leaflet-popup-tip { background: #1b5e20; }

/* ── Footer ── */
footer {
  text-align: center;
  padding: 20px;
  font-size: 0.8rem;
  color: #aaa;
  border-top: 1px solid #e8f0e8;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  header { padding: 24px 16px 20px; }
  .logo  { font-size: 1.8rem; }
  .search-bar input  { padding: 12px 14px; font-size: 0.9rem; }
  .search-bar button { padding: 12px 16px; font-size: 0.9rem; }
  main   { padding: 16px 14px; }
  .camp-grid { grid-template-columns: 1fr; }

  .filter-toggle { display: block; }
  .results-layout { display: block; }
  /* Not display:none — #filterSidebar (the mobile drawer) is a fixed-position
     child of this wrapper, and a display:none ancestor would prevent it from
     rendering at all regardless of its own .open state. Zero it out instead. */
  .sidebar-wrap {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    max-height: none !important;
  }
  .filters-reopen-btn { display: none !important; }
  .results-content { padding-left: 0; }

  .filter-sidebar {
    position: fixed;
    top: 0; left: -260px;
    width: 260px; height: 100vh;
    z-index: 100;
    border-radius: 0;
    border-left: none;
    overflow-y: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: left 0.25s ease;
    box-shadow: none;
  }
  .filter-sidebar.open {
    left: 0;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }
  .filter-overlay.open { display: block; }
  .sidebar-close { display: block; }

  /* Filters + Sort + Map all share one compact row. Filters and Sort
     shrink to icon-only triggers — their full UI only matters once opened
     (the filter drawer slides out on tap; the native select's OS picker
     shows full option text on tap), so the closed/idle state doesn't need
     a text label. That frees up enough width for Map to fit alongside
     them instead of needing its own row. */
  .results-controls-row { width: 100%; justify-content: flex-start; gap: 8px; }

  .filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: 0;
  }
  .filter-toggle .btn-icon { margin-right: 0; }

  /* Hides the select's own text (text-indent, not display:none/color, so
     it stays screen-reader accessible) and shows a small sort icon via
     background-image instead — appearance:none strips the native chrome
     (including the dropdown arrow) so only the custom icon shows. Opening
     it still shows the OS's normal picker with full option labels. */
  .sort-select {
    width: 38px;
    padding: 0;
    text-indent: -9999px;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M3 7h18'/%3E%3Cpath d='M3 12h12'/%3E%3Cpath d='M3 17h6'/%3E%3C/svg%3E") center/18px 18px no-repeat;
    -webkit-appearance: none;
    appearance: none;
  }

  .map-toggle-btn { margin-left: auto; padding: 8px 14px; font-size: 0.9rem; }
}

/* ── Detail panel ── */
.detail-panel {
  flex: 0 0 0;
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: flex-basis 0.25s ease, width 0.25s ease;
  background: #fff;
  border-left: none;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
}
#stateResults.map-open .detail-panel {
  top: 292px;
  height: calc(100vh - 292px);
}
.detail-panel.open {
  flex: 0 0 380px;
  width: 380px;
  border-left: 1px solid #e8f5e9;
  box-shadow: -4px 0 16px rgba(0,0,0,0.07);
}
.detail-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 0;
  flex-shrink: 0;
  position: relative;
}
.detail-drag-handle { display: none; } /* shown only on mobile — see media query below */
.detail-nav-group { display: flex; gap: 6px; }
.detail-nav-btn {
  background: #f5f5f5;
  border: none;
  color: #2e7d32;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
}
.detail-nav-btn:hover:not(:disabled) { background: #e8f5e9; }
.detail-nav-btn:disabled { opacity: 0.35; cursor: default; }
.detail-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #999;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.detail-close:hover { background: #f5f5f5; color: #333; }
.detail-panel-body {
  overflow-y: auto;
  flex: 1;
  touch-action: pan-y; /* hints vertical scroll to the browser; JS still intercepts deliberate horizontal swipes */
  padding: 0 18px 24px;
  /* Scrolling past the bottom of this panel would otherwise chain into
     scrolling the camp grid behind it — contain keeps it inside the panel. */
  overscroll-behavior: contain;
}

/* On mobile the 380px side panel would squeeze the card list into a sliver
   instead of sharing the row with it — turn it into a full-screen sheet over
   the list instead. !important beats the inline max-height clampDetailPanelHeight() sets in JS
   (a plain inline style loses to an !important rule), which exists to keep a
   *sticky-positioned* panel from rendering below the fold — moot here since
   position:fixed removes that whole problem. */
@media (max-width: 768px) {
  .detail-panel.open {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    flex: none !important;
    z-index: 100;
    border-left: none;
    box-shadow: none;
  }
  .detail-panel-header { padding: 18px 14px 0; }
  .detail-drag-handle {
    display: block;
    position: absolute;
    left: 50%; top: 6px;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    border-radius: 2px;
    background: #ddd;
  }
  .detail-nav-btn { padding: 8px 14px; font-size: 0.9rem; min-height: 40px; }
  .detail-close {
    font-size: 1.4rem;
    padding: 8px 12px;
    min-width: 44px; min-height: 44px; /* bigger, reachable tap target */
    display: flex; align-items: center; justify-content: center;
  }

  /* When the map is showing, keep it visible/tappable above the sheet instead
     of covering it entirely — turns the detail panel into a partial-height
     bottom sheet (like Apple/Google Maps) so parents can tap a different pin
     without closing the sheet first. 292px = the map's own 280px height plus
     its container's 12px bottom padding (same number the desktop side-panel
     layout already uses for this). Border-radius + shadow read as a sheet
     resting on top of the map rather than a full second screen. */
  #stateResults.map-open .detail-panel.open {
    top: 292px !important;
    left: 0 !important;
    right: 0 !important;
    /* An explicit height (not auto derived from top+bottom) — .detail-panel-body
       is a flex child with overflow-y:auto, and letting the container's height
       resolve from position math instead of a hard number left it sizing to
       fit all its content instead of clipping+scrolling, defeating the whole
       point of the sheet (found via real device-height testing: the sheet
       rendered taller than the screen with no way to reach anything past the
       fold). Matches the same calc() the desktop side-panel layout already
       uses for this same map-open case. */
    height: calc(100dvh - 292px) !important;
    max-height: none !important;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
  }
}
.dp-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dp-favicon { width: 24px; height: 24px; flex-shrink: 0; }
.dp-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1b5e20;
  line-height: 1.3;
}
.dp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.dp-tag {
  font-size: 0.73rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dp-ages-row {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 8px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dp-distance { font-weight: 700; color: #2e7d32; }
.dp-stars-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.dp-stars { color: #f57f17; font-size: 0.88rem; display: flex; align-items: center; gap: 5px; }
.dp-stars .star-value { font-size: 0.8rem; color: #888; }
.dp-stars .review-count { font-size: 0.78rem; color: #aaa; }
.dp-stars .rating-source { font-size: 0.78rem; color: #aaa; text-decoration: none; }
.dp-stars.hc-stars { color: #00897b; }
.dp-stars.hc-stars .star-value { color: #00695c; }
.dp-stars.hc-stars .hc-source { font-size: 0.78rem; color: #00897b; font-weight: 600; }
.dp-divider { border: none; border-top: 1px solid #f0f0f0; margin: 12px 0; }
.dp-field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.dp-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #aaa; }
.dp-value { font-size: 0.88rem; color: #333; }

/* Half day / full day (or similar) cost breakdown — each tier pairs its own
   hours with its own price so a parent isn't comparing a half-day figure to
   a full-day one without realizing it. */
.dp-cost-tier { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid #eee; }
.dp-cost-tier:first-of-type { border-top: none; padding-top: 3px; }
.dp-cost-tier-label { font-size: 0.88rem; color: #333; }
.dp-cost-tier-hours { font-size: 0.76rem; color: #888; margin-top: 1px; }
.dp-cost-tier-price { font-size: 0.92rem; font-weight: 700; color: #333; }
.dp-description { font-size: 0.86rem; color: #555; line-height: 1.6; margin-bottom: 14px; }
.dp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin-bottom: 2px; }
.dp-attr-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dp-attr-pill {
  font-size: 0.78rem;
  background: #f1f8f1;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

.dp-website-btn {
  display: block;
  background: #2e7d32;
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: 16px;
}
.dp-website-btn:hover { background: #1b5e20; }
.dp-phone { font-size: 0.85rem; color: #555; margin-top: 8px; }

/* When detail panel open: grid drops to 2 columns */

/* Drop to 1 column when detail panel is open */
.cards-and-panel.panel-open .camp-grid {
  grid-template-columns: 1fr;
}

/* Highlighted card in panel mode — subtle left border only, no expand */
.camp-card.camp-highlighted {
  border-left: 3px solid #2e7d32;
}

/* ── Header account area ─────────────────────────────────────────────────── */
header { position: relative; }
/* Flows in its natural DOM position (between tagline and search bar), centered
   and wrapping as needed, rather than floating absolutely over the header —
   an absolutely-positioned, right-anchored bar has no way to avoid overlapping
   the independently-centered logo once its content (button count, email
   length) grows wide enough, which is exactly what happened once a third
   button was added here. */
.header-account {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.account-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.account-btn:hover { background: rgba(255,255,255,0.28); }
.account-btn-primary { background: #2e7d32; border-color: #2e7d32; }
.account-btn-primary:hover { background: #1b5e20; }
.account-email { color: white; font-size: 0.82rem; opacity: 0.85; display: none; }
@media (min-width: 640px) { .account-email { display: inline; } }

/* Mobile: tighter spacing/font size for the same flowing row. */
@media (max-width: 768px) {
  .header-account {
    gap: 6px;
    padding: 10px 12px 0;
    margin-bottom: 10px;
  }
  .account-btn { font-size: 0.72rem; padding: 5px 9px; }
}

/* Username + Log Out — level with the logo, top-right corner, deliberately
   separate from .header-account's My Camps/Family Schedule row. Absolute
   positioning here bit us once before (a prior account row overlapped the
   centered logo on mobile — see the mobile layout fix history) — kept this
   one narrow, right-anchored, and never full-width, and the email text
   itself already hides under 640px via .account-email above, so there's
   nothing wide enough left on mobile to reach the centered logo. */
.header-topright {
  position: absolute;
  top: 32px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
}
header.header-compact .header-topright { top: 14px; }
@media (max-width: 768px) {
  /* A centered logo with a variable-width BETA tag/info icon can grow into
     any fixed corner position, however narrow — so on mobile this drops out
     of absolute positioning entirely and becomes its own flex row above the
     logo instead, which can't overlap it regardless of how wide either
     side gets. */
  .header-topright {
    position: static;
    top: auto; right: auto;
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 8px;
  }
  .header-topright .account-btn { font-size: 0.72rem; padding: 5px 9px; }
}

/* ── Modal (shared by auth + my-camps) ───────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000; padding: 20px;
}
.modal {
  background: white; border-radius: 14px;
  width: 100%; max-width: 420px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px 14px; border-bottom: 1px solid #eee;
}
.modal-header h2 { font-size: 1.15rem; color: #1b5e20; }
.close-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #888; line-height: 1; }
.close-btn:hover { color: #333; }
.modal-body { padding: 20px 22px; }

.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.form-group label { font-size: 0.82rem; font-weight: 600; color: #555; }
.form-group input {
  padding: 10px 12px;
  border: 1px solid #ddd; border-radius: 8px;
  font-size: 0.95rem; outline: none;
}
.form-group input:focus { border-color: #43a047; box-shadow: 0 0 0 3px rgba(67,160,71,0.15); }

/* ── Auth modal ───────────────────────────────────────────────────────────── */
.auth-error { color: #c62828; font-size: 0.85rem; margin: -4px 0 12px; }
.auth-submit-btn {
  width: 100%; padding: 11px;
  background: #2e7d32; color: white;
  border: none; border-radius: 8px;
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.auth-submit-btn:hover { background: #1b5e20; }
.auth-switch { text-align: center; font-size: 0.85rem; color: #666; margin-top: 16px; }
.auth-switch a { color: #2e7d32; font-weight: 600; text-decoration: none; margin-left: 4px; }
.auth-switch a:hover { text-decoration: underline; }

/* ── Save button on camp cards ───────────────────────────────────────────── */
.card-save-btn {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  width: 28px; height: 28px;
  font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.card-save-btn:hover { transform: scale(1.1); }
.card-save-btn.saved { background: #fce4ec; }

/* ── Detail panel: My Camp section ───────────────────────────────────────── */
.dp-mycamp-login-prompt {
  background: #f5f7f5;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.dp-mycamp-login-prompt p { font-size: 0.85rem; color: #555; margin-bottom: 10px; }
.dp-mycamp-login-prompt .auth-submit-btn { width: auto; padding: 9px 18px; }

.dp-save-btn {
  display: block;
  width: 100%;
  padding: 9px;
  background: #f5f7f5;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 14px;
  color: #444;
}
.dp-save-btn.saved { background: #fce4ec; border-color: #f8bbd0; color: #ad1457; }

.dp-mycamp-row { margin-bottom: 14px; }
.dp-star-input { font-size: 1.3rem; letter-spacing: 2px; }
.dp-star { color: #ddd; cursor: pointer; }
.dp-star.filled { color: #f9a825; }
.dp-notes-input {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid #ddd; border-radius: 8px;
  font-size: 0.85rem; font-family: inherit;
  resize: vertical;
}
.dp-notes-input:focus { border-color: #43a047; outline: none; }
.dp-your-review-hint { font-size: 0.72rem; color: #aaa; margin-left: 8px; }
.dp-review-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.dp-review-error { font-size: 0.78rem; color: #c62828; min-height: 1em; }

/* Public reviews from other S'more Camps parents — teal to match the HC
   rating aggregate elsewhere, kept visually distinct from Google's amber.
   Collapsed by default (dp-reviews-list starts [hidden]) so a long list of
   reviews doesn't push the camp description down the page uninvited. */
.dp-reviews { margin-bottom: 4px; }
.dp-reviews-toggle {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 4px 0;
  font: inherit; cursor: pointer; text-align: left;
}
.dp-reviews-arrow { color: #00897b; font-size: 0.7rem; }
.dp-reviews-list { margin-top: 6px; }
.dp-review { padding: 10px 0; border-top: 1px solid #f0f0f0; }
.dp-review:first-of-type { border-top: none; }
.dp-review-stars { color: #00897b; font-size: 0.85rem; }
.dp-review-date { font-size: 0.72rem; color: #aaa; margin-left: 6px; }
.dp-review-text { font-size: 0.85rem; color: #444; margin: 4px 0 0 0; line-height: 1.4; }
.dp-reviews-actions { display: flex; align-items: center; gap: 14px; padding-top: 6px; border-top: 1px solid #f0f0f0; }
.dp-reviews-more, .dp-reviews-close {
  background: none; border: none; padding: 0;
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.dp-reviews-more  { color: #00897b; }
.dp-reviews-more:hover  { text-decoration: underline; }
.dp-reviews-close { color: #999; }
.dp-reviews-close:hover { color: #666; text-decoration: underline; }
.dp-schedule-inputs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dp-schedule-inputs input[type="date"] {
  padding: 7px 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.82rem;
}
.dp-schedule-inputs span { font-size: 0.82rem; color: #888; }
.dp-unschedule-btn {
  background: none; border: none; color: #c62828;
  font-size: 0.78rem; cursor: pointer; padding: 4px;
}

/* ── My Camps modal ──────────────────────────────────────────────────────── */
.my-camps-modal { max-width: 480px; }
.mycamps-empty { color: #777; font-size: 0.9rem; text-align: center; padding: 20px 0; }
.mycamps-section-title {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #999; margin: 16px 0 8px;
}
.mycamps-section-title:first-child { margin-top: 0; }
.mycamps-item {
  border: 1px solid #eee; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  cursor: pointer;
}
.mycamps-item:hover { background: #f5f7f5; }
.mycamps-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mycamps-name { font-weight: 600; font-size: 0.9rem; color: #1b5e20; }
.mycamps-stars { color: #f9a825; font-size: 0.85rem; white-space: nowrap; }
.mycamps-dates { display: block; font-size: 0.78rem; color: #666; margin-top: 4px; }
.mycamps-note { font-size: 0.8rem; color: #555; margin-top: 6px; }
.mycamps-cal-link { float: right; text-transform: none; letter-spacing: normal; font-weight: 600; color: #2e7d32; text-decoration: none; font-size: 0.78rem; }
.mycamps-cal-link:hover { text-decoration: underline; }

/* ── Detail panel: multi-entry schedule list ─────────────────────────────── */
.dp-schedule-entry {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; font-size: 0.82rem; color: #333;
  padding: 6px 0; border-bottom: 1px solid #f0f0f0;
}
.dp-schedule-entry:last-child { border-bottom: none; }
.dp-mycamp-hint { font-size: 0.82rem; color: #777; }
.dp-mycamp-hint a { color: #2e7d32; font-weight: 600; }
.dp-schedule-inputs select {
  padding: 7px 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.82rem;
  font-family: inherit; background: white;
}
.dp-add-schedule-btn {
  background: #2e7d32; color: white; border: none; border-radius: 6px;
  padding: 7px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.dp-add-schedule-btn:hover { background: #1b5e20; }

/* ── Family Schedule modal ───────────────────────────────────────────────── */
.family-modal { max-width: 720px; }
.add-kid-row { display: flex; gap: 8px; margin-bottom: 6px; }
.add-kid-row input {
  flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9rem;
}
.add-kid-row input:focus { border-color: #43a047; outline: none; box-shadow: 0 0 0 3px rgba(67,160,71,0.15); }
.add-kid-btn { width: auto; white-space: nowrap; padding: 10px 16px; }

.kid-calendar { margin-top: 22px; }
.kid-calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kid-calendar-name { font-weight: 700; font-size: 1rem; color: #1b5e20; }
.kid-remove-btn {
  background: none; border: none; color: #c62828; font-size: 0.78rem; cursor: pointer; padding: 4px;
}
.kid-calendar-strip {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px;
}
.cal-week {
  flex: 0 0 84px;
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  font-size: 0.72rem;
}
.cal-week-date { font-weight: 700; color: #666; margin-bottom: 4px; }
.cal-week-open { background: #f5f7f5; border: 1px dashed #ddd; color: #bbb; }
.cal-week-open .cal-week-label { color: #bbb; }
.cal-week-filled { background: #e8f5e9; border: 1px solid #a5d6a7; }
.cal-week-filled .cal-week-camp {
  color: #1b5e20; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Toast notification ──────────────────────────────────────────────────── */
.hc-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #1b5e20; color: white;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 3000;
}
.hc-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Appears once scrolled down (see toggleBackToTopVisibility in public.js) so a
   parent who selects a camp far down a long results list — 97+ camps in the
   pilot area now, not the ~35 this was originally designed around — can get
   back to the search bar/sort controls in one click instead of scrolling
   back up through dozens of cards by hand. Bottom-left avoids the desktop
   detail panel, which sits on the right. */
.back-to-top-btn {
  position: fixed;
  bottom: 20px; left: 20px;
  background: #2e7d32; color: white;
  border: none; border-radius: 24px;
  padding: 10px 18px;
  font-size: 0.85rem; font-weight: 700;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 150;
}
.back-to-top-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top-btn:hover { background: #1b5e20; }
@media (max-width: 768px) {
  .back-to-top-btn { bottom: 16px; left: 16px; padding: 9px 14px; font-size: 0.8rem; }
}