/* style.css — Garage Hoppers — Refined palette */

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800,900&f[]=satoshi@400,500,700&display=swap');

:root, [data-theme='light'] {
  --text-xs:   clamp(0.75rem,  0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem + 2.5vw, 3.5rem);

  --space-1:  0.25rem; --space-2:  0.5rem;  --space-3:  0.75rem;
  --space-4:  1rem;    --space-5:  1.25rem; --space-6:  1.5rem;
  --space-8:  2rem;    --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;

  /* Brand — red is accent, black is dominant */
  --color-primary:          #E8161B;
  --color-primary-hover:    #C81217;
  --color-primary-active:   #a00e12;
  --color-primary-highlight:#fde8e8;

  --color-black:            #111111;
  --color-black-soft:       #1e1e1e;
  --color-black-muted:      #2e2e2e;

  --color-bg:               #ffffff;
  --color-surface:          #ffffff;
  --color-surface-2:        #f2f2f2;
  --color-surface-offset:   #e8e8e8;
  --color-divider:          #e0e0e0;
  --color-border:           #d0d0d0;

  --color-text:             #111111;
  --color-text-muted:       #666666;
  --color-text-faint:       #aaaaaa;
  --color-text-inverse:     #ffffff;

  --color-success:          #16a34a;
  --color-success-highlight:#dcfce7;
  --color-error:            #dc2626;
  --color-error-highlight:  #fee2e2;

  --radius-sm: 0.375rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem;  --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.07);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:   0 16px 40px rgba(0,0,0,0.14);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.07);

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body:    'Satoshi', 'Inter', sans-serif;
}

[data-theme='dark'] {
  --color-bg:               #0e0e0e;
  --color-surface:          #181818;
  --color-surface-2:        #202020;
  --color-surface-offset:   #2a2a2a;
  --color-divider:          #303030;
  --color-border:           #3a3a3a;
  --color-text:             #f0f0f0;
  --color-text-muted:       #888888;
  --color-text-faint:       #505050;
  --color-text-inverse:     #0e0e0e;
  --color-primary:          #ff4a4f;
  --color-primary-hover:    #e83338;
  --color-primary-active:   #c82228;
  --color-primary-highlight:#2a0a0a;
  --color-black:            #f0f0f0;
  --color-black-soft:       #d0d0d0;
  --color-black-muted:      #a0a0a0;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:  0 16px 40px rgba(0,0,0,0.55);
  --shadow-card:0 2px 8px rgba(0,0,0,0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#0e0e0e;--color-surface:#181818;--color-surface-2:#202020;
    --color-surface-offset:#2a2a2a;--color-divider:#303030;--color-border:#3a3a3a;
    --color-text:#f0f0f0;--color-text-muted:#888888;--color-text-faint:#505050;
    --color-text-inverse:#0e0e0e;--color-primary:#ff4a4f;--color-primary-hover:#e83338;
    --color-primary-active:#c82228;--color-primary-highlight:#2a0a0a;
    --color-black:#f0f0f0;--color-black-soft:#d0d0d0;--color-black-muted:#a0a0a0;
  }
}

/* ─── LAYOUT ─── */
.container { width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6); }
.container--narrow { max-width:var(--content-narrow); }

/* ─── NAVBAR — white/light, red accent only ─── */
.navbar {
  position:sticky;top:0;z-index:100;
  background:#ffffff;
  border-bottom:1px solid #e8e8e8;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.navbar__inner {
  display:flex;align-items:center;gap:var(--space-4);
  height:72px;max-width:var(--content-wide);
  margin-inline:auto;padding-inline:var(--space-6);
}
.navbar__logo {
  display:flex;align-items:center;gap:var(--space-3);
  text-decoration:none;flex-shrink:0;
}

/* Bunny logo — bigger, white circle with red ring */
.navbar__logo-img {
  height:54px;width:54px;object-fit:cover;
  border-radius:50%;
  background:white;
  border:3px solid var(--color-primary);
  box-shadow:0 2px 10px rgba(232,22,27,0.22);
  flex-shrink:0;
}

.navbar__logo-text {
  font-family:var(--font-display);
  font-size:var(--text-base);font-weight:900;
  color:var(--color-black);letter-spacing:-0.02em;line-height:1.1;
  text-transform:uppercase;
}
.navbar__logo-text span {
  display:block;font-size:var(--text-xs);font-weight:600;
  letter-spacing:0.06em;color:var(--color-text-muted);
  text-transform:uppercase;
}

/* Location pill — dark, understated */
.location-pill {
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);
  background:var(--color-surface-2);
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-full);
  cursor:pointer;flex-shrink:0;
  font-size:var(--text-sm);font-weight:500;color:var(--color-text);
  transition:all var(--transition-interactive);
}
.location-pill:hover { border-color:var(--color-primary);background:var(--color-primary-highlight); }
.location-pill svg { color:var(--color-primary);flex-shrink:0; }
.location-pill__city { font-weight:700; }
.location-pill__radius { color:var(--color-text-muted);font-size:var(--text-xs); }

/* Search bar */
.search-bar {
  flex:1;display:flex;align-items:center;
  background:var(--color-surface-2);
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-full);
  padding:0 var(--space-4);gap:var(--space-2);
  transition:border-color var(--transition-interactive);
}
.search-bar:focus-within { border-color:var(--color-primary); }
.search-bar input { flex:1;border:none;background:transparent;outline:none;font-size:var(--text-sm);padding:var(--space-2) 0;color:var(--color-text); }
.search-bar input::placeholder { color:var(--color-text-faint); }
.search-bar svg { color:var(--color-text-muted);flex-shrink:0; }
.navbar__actions { display:flex;align-items:center;gap:var(--space-3);margin-left:auto;flex-shrink:0; }

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:700;cursor:pointer;
  text-decoration:none;border:2px solid transparent;
  transition:all var(--transition-interactive);white-space:nowrap;
  font-family:var(--font-display);letter-spacing:0.01em;
}
.btn--primary { background:var(--color-primary);color:white;border-color:var(--color-primary); }
.btn--primary:hover { background:var(--color-primary-hover);border-color:var(--color-primary-hover); }
.btn--black { background:var(--color-black);color:white;border-color:var(--color-black); }
.btn--black:hover { background:var(--color-black-soft); }
.btn--outline { background:transparent;color:var(--color-text);border-color:var(--color-border); }
.btn--outline:hover { border-color:var(--color-primary);color:var(--color-primary); }
/* Navbar CTA — clearly visible on white */
.btn--white { background:white;color:var(--color-primary);border-color:var(--color-primary);border-width:2px; }
.btn--white:hover { background:var(--color-primary);color:white; }
.btn--sm { padding:var(--space-1) var(--space-3);font-size:var(--text-xs); }

/* ─── HERO — light, airy, Apple-style ─── */
.hero {
  background:linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
  padding:var(--space-12) var(--space-6) var(--space-10);
  text-align:center;position:relative;overflow:hidden;
  border-bottom:1px solid var(--color-divider);
}
.hero::before { display:none; }
.hero__content { position:relative;max-width:680px;margin-inline:auto; }
.hero__title {
  font-family:var(--font-display);
  font-size:var(--text-xl);font-weight:900;
  color:var(--color-black);letter-spacing:-0.03em;
  margin-bottom:var(--space-3);line-height:1.1;
  text-transform:uppercase;
}
.hero__title em { font-style:normal;color:var(--color-primary); }
.hero__subtitle { color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-6); }

/* Hero search box */
.hero-search {
  background:var(--color-surface);border-radius:var(--radius-2xl);
  padding:var(--space-3);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;gap:var(--space-3);
}
.hero-search__row { display:flex;gap:var(--space-3);align-items:stretch; }
.hero-search__field {
  flex:1;display:flex;align-items:center;gap:var(--space-2);
  border:1.5px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-3) var(--space-4);
  background:var(--color-surface-2);cursor:pointer;
  transition:border-color var(--transition-interactive);
}
.hero-search__field:hover,.hero-search__field:focus-within { border-color:var(--color-primary); }
.hero-search__field svg { color:var(--color-primary);flex-shrink:0; }
.hero-search__field input { flex:1;border:none;background:transparent;outline:none;font-size:var(--text-base);color:var(--color-text); }
.hero-search__field input::placeholder { color:var(--color-text-faint); }
.hero-search__label { font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em;display:block;margin-bottom:2px; }

@media (min-width:640px) {
  .hero-search { flex-direction:row;align-items:center;border-radius:var(--radius-full);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-5); }
  .hero-search__row { flex:1;gap:0; }
  .hero-search__field { border:none;border-radius:0;background:transparent;padding:var(--space-2) var(--space-4); }
  .hero-search__field + .hero-search__field { border-left:1.5px solid var(--color-divider); }
  .hero-search__field:hover,.hero-search__field:focus-within { border-color:transparent;background:var(--color-surface-2);border-radius:var(--radius-lg); }
}

/* ─── LISTINGS SECTION ─── */
.listings-section { padding:var(--space-8) 0;background:#ffffff; }
.listings-header {
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-5);
}
.listings-header h2 {
  font-family:var(--font-display);font-size:var(--text-xl);font-weight:900;
  color:var(--color-black);letter-spacing:-0.02em;
}
/* Red underline accent on count */
.listings-header h2 strong { color:var(--color-primary); }

/* View toggle */
.view-toggle { display:flex;gap:var(--space-2); }
.toggle-btn {
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:600;cursor:pointer;
  border:1.5px solid var(--color-border);background:var(--color-surface);
  color:var(--color-text-muted);transition:all var(--transition-interactive);
}
.toggle-btn.active { background:var(--color-black);color:white;border-color:var(--color-black); }
.toggle-btn:hover:not(.active) { border-color:var(--color-text);color:var(--color-text); }

/* Date filter chips */
.filters-bar { display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-6);align-items:center; }
.filter-chip {
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:var(--space-2) var(--space-4);
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:600;cursor:pointer;
  background:var(--color-surface);color:var(--color-text-muted);
  font-family:var(--font-display);
  transition:all var(--transition-interactive);
}
.filter-chip:hover { border-color:var(--color-primary);color:var(--color-primary); }
.filter-chip.active { background:var(--color-primary);border-color:var(--color-primary);color:white; }

/* ─── LISTING CARDS ─── */
.listings-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:var(--space-5);
}
.listing-card {
  background:var(--color-surface);border-radius:var(--radius-xl);
  border:1px solid var(--color-divider);box-shadow:var(--shadow-card);
  overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  transition:transform var(--transition-interactive),box-shadow var(--transition-interactive),border-color var(--transition-interactive);
}
.listing-card:hover { transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-primary); }
.listing-card__photos { position:relative;overflow:hidden;aspect-ratio:4/3; }
.listing-card__photos-grid { display:grid;grid-template-columns:1fr 1fr;gap:2px;height:100%; }
.listing-card__photos-grid img { width:100%;height:100%;object-fit:cover; }
.listing-card__photos-grid img:first-child:last-child { grid-column:1/-1; }
.listing-card__photos-grid.count-3 img:first-child { grid-row:1/3; }

/* Badge — clean white pill with red text */
.listing-card__badge {
  position:absolute;top:var(--space-3);left:var(--space-3);
  background:rgba(255,255,255,0.95);color:var(--color-black);
  padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);
  font-size:var(--text-xs);font-weight:700;letter-spacing:0.03em;
  font-family:var(--font-display);
  border-left:3px solid var(--color-primary);
  box-shadow:var(--shadow-sm);
}
.listing-card__save {
  position:absolute;top:var(--space-3);right:var(--space-3);
  background:rgba(255,255,255,0.92);border-radius:var(--radius-full);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;transition:all var(--transition-interactive);box-shadow:var(--shadow-sm);
}
.listing-card__save:hover { background:white;transform:scale(1.1); }
.listing-card__save svg { width:16px;height:16px;color:var(--color-text-muted); }
.listing-card__save.saved svg { color:var(--color-primary);fill:var(--color-primary); }
.listing-card__body { padding:var(--space-4);flex:1;display:flex;flex-direction:column;gap:var(--space-2); }
.listing-card__meta { display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap; }
.listing-card__category {
  font-size:var(--text-xs);font-weight:700;color:var(--color-primary);
  background:var(--color-primary-highlight);padding:2px var(--space-2);
  border-radius:var(--radius-sm);font-family:var(--font-display);
}
.listing-card__date { font-size:var(--text-xs);color:var(--color-text-muted);margin-left:auto; }
.listing-card__title {
  font-family:var(--font-display);font-weight:800;font-size:var(--text-base);
  color:var(--color-black);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.listing-card__location { display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);color:var(--color-text-muted); }
.listing-card__location svg { width:12px;height:12px;flex-shrink:0; }
.listing-card__footer {
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--color-divider);background:var(--color-surface-2);
}
.listing-card__items { font-size:var(--text-xs);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-1); }
.listing-card__distance { font-size:var(--text-xs);font-weight:700;color:var(--color-primary); }

/* ─── MAP VIEW ─── */
.map-view { display:none;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--color-divider); }
.map-view.visible { display:block; }
.map-view #map { height:500px; }
#listings-grid.hidden { display:none; }

/* ─── LOCATION MODAL ─── */
.modal-overlay {
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,0.55);
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-4);opacity:0;visibility:hidden;
  transition:opacity 250ms ease,visibility 250ms ease;
  backdrop-filter:blur(4px);
}
.modal-overlay.open { opacity:1;visibility:visible; }
.modal {
  background:var(--color-surface);border-radius:var(--radius-xl);
  padding:var(--space-8);max-width:440px;width:100%;
  box-shadow:var(--shadow-lg);border:1px solid var(--color-divider);
  transform:translateY(16px);transition:transform 250ms cubic-bezier(0.16,1,0.3,1);
}
.modal-overlay.open .modal { transform:translateY(0); }
.modal__header { display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6); }
.modal__title { font-family:var(--font-display);font-size:var(--text-lg);font-weight:900; }
.modal__close { width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--color-text-muted); }
.modal__close:hover { background:var(--color-surface-2);color:var(--color-text); }
.modal__field { margin-bottom:var(--space-5); }
.modal__label { font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em;display:block;margin-bottom:var(--space-2); }
.modal__input-wrap { position:relative; }
.modal__input-wrap svg { position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);color:var(--color-primary); }
.modal__input {
  width:100%;padding:var(--space-3) var(--space-3) var(--space-3) var(--space-10);
  border:1.5px solid var(--color-border);border-radius:var(--radius-lg);
  font-size:var(--text-base);background:var(--color-surface-2);
  color:var(--color-text);outline:none;
  transition:border-color var(--transition-interactive);
}
.modal__input:focus { border-color:var(--color-primary); }
#location-preview-map { height:180px;border-radius:var(--radius-lg);margin-bottom:var(--space-5);border:1px solid var(--color-divider);overflow:hidden; }
.radius-slider-wrap { margin-bottom:var(--space-6); }
.radius-slider-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3); }
.radius-value { font-family:var(--font-display);font-size:var(--text-lg);font-weight:900;color:var(--color-primary); }
.radius-slider {
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--radius-full);
  background:linear-gradient(to right,var(--color-primary) 0%,var(--color-primary) var(--slider-pct,30%),var(--color-surface-offset) var(--slider-pct,30%),var(--color-surface-offset) 100%);
  outline:none;cursor:pointer;
}
.radius-slider::-webkit-slider-thumb { -webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--color-primary);border:3px solid white;box-shadow:var(--shadow-md);cursor:pointer; }
.radius-slider::-moz-range-thumb { width:22px;height:22px;border-radius:50%;background:var(--color-primary);border:3px solid white;box-shadow:var(--shadow-md);cursor:pointer; }

/* ─── HOW IT WORKS — light section ─── */
.how-it-works {
  background:#f5f5f7;
  padding:clamp(var(--space-12),6vw,var(--space-20)) var(--space-6);
  border-top:1px solid var(--color-divider);
  border-bottom:1px solid var(--color-divider);
}
.section-title {
  font-family:var(--font-display);font-size:var(--text-xl);font-weight:900;
  letter-spacing:-0.02em;text-align:center;margin-bottom:var(--space-2);
  text-transform:uppercase;color:var(--color-black);
}
.section-subtitle { text-align:center;color:var(--color-text-muted);margin-bottom:var(--space-12);max-width:500px;margin-inline:auto;margin-top:var(--space-2); }
.steps-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-8); }
.step { display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4); }
.step__icon {
  width:64px;height:64px;border-radius:var(--radius-xl);
  background:var(--color-primary);color:white;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:var(--text-xl);font-weight:900;
  box-shadow:0 4px 16px rgba(232,22,27,0.25);
}
.step__title { font-family:var(--font-display);font-weight:700;font-size:var(--text-base);color:var(--color-black); }
.step__desc { font-size:var(--text-sm);color:var(--color-text-muted);max-width:24ch; }

/* ─── CTA BANNER ─── */
.cta-banner {
  background:var(--color-primary);
  padding:clamp(var(--space-16),7vw,var(--space-24)) var(--space-6);
  text-align:center;
}
.cta-banner__inner { max-width:560px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-4); }
.cta-banner__eyebrow {
  display:inline-block;
  background:rgba(255,255,255,0.18);
  color:white;font-size:var(--text-xs);font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,0.3);
}
.cta-banner h2 {
  font-family:var(--font-display);font-size:var(--text-xl);font-weight:900;
  color:white;letter-spacing:-0.02em;text-transform:uppercase;
  margin:0;
}
.cta-banner p { color:rgba(255,255,255,0.8);max-width:400px;margin:0; }
.cta-banner__btn {
  display:inline-flex;align-items:center;gap:var(--space-3);
  background:white;color:var(--color-primary);
  font-family:var(--font-display);font-size:var(--text-base);font-weight:800;
  padding:var(--space-4) var(--space-10);
  border-radius:var(--radius-full);
  text-decoration:none;
  box-shadow:0 4px 24px rgba(0,0,0,0.18);
  transition:all var(--transition-interactive);
  margin-top:var(--space-2);
  border:2px solid white;
}
.cta-banner__btn:hover {
  background:transparent;color:white;
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
  transform:translateY(-2px);
}

/* ─── FOOTER — Apple/Amazon light style ─── */
.footer__top {
  background:#f5f5f7;
  border-top:1px solid #d8d8d8;
  padding:clamp(var(--space-12),5vw,var(--space-16)) var(--space-6) var(--space-10);
}
.footer__grid { display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-8); }
.footer__brand { display:flex;flex-direction:column;gap:var(--space-4); }
.footer__logo-wrap { display:flex;align-items:center;gap:var(--space-3); }
.footer__logo-img { height:48px;width:48px;object-fit:cover;border-radius:50%;background:white;border:2.5px solid var(--color-primary);box-shadow:0 2px 8px rgba(232,22,27,0.15); }
.footer__logo-text { font-family:var(--font-display);font-size:var(--text-base);font-weight:900;color:var(--color-black);text-transform:uppercase;letter-spacing:-0.01em; }
.footer__logo-sub { font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:0.04em;text-transform:uppercase;margin-top:2px; }
.footer__desc { font-size:var(--text-sm);color:var(--color-text-muted);max-width:28ch;line-height:1.6; }

.social-links { display:flex;gap:var(--space-2); }
.social-link {
  width:38px;height:38px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  background:white;color:var(--color-text-muted);text-decoration:none;
  border:1.5px solid var(--color-border);
  transition:all var(--transition-interactive);
}
.social-link:hover { background:var(--color-primary);border-color:var(--color-primary);color:white;transform:translateY(-2px);box-shadow:0 4px 10px rgba(232,22,27,0.25); }

.footer__col h4 { font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;color:var(--color-text);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:var(--space-4); }
.footer__col ul { display:flex;flex-direction:column;gap:var(--space-3);list-style:none; }
.footer__col a { font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;font-weight:500;transition:color var(--transition-interactive); }
.footer__col a:hover { color:var(--color-primary); }

.footer__bottom {
  background:#f5f5f7;
  border-top:1px solid #d8d8d8;
  padding:var(--space-5) var(--space-6);
}
.footer__bottom-inner { max-width:var(--content-wide);margin-inline:auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3); }
.footer__copy { font-size:var(--text-xs);color:var(--color-text-muted); }
.footer__legal { display:flex;gap:var(--space-5); }
.footer__legal a { font-size:var(--text-xs);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-interactive); }
.footer__legal a:hover { color:var(--color-primary); }

/* ─── DETAIL PAGE ─── */

/* Breadcrumb */
.detail-breadcrumb {
  background:#f5f5f7;border-bottom:1px solid var(--color-divider);
  padding:var(--space-3) 0;
}
.detail-back {
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);
  text-decoration:none;transition:color var(--transition-interactive);
}
.detail-back:hover { color:var(--color-primary); }

/* Photo gallery */
.detail-gallery {
  width:100%;max-height:500px;
  background:var(--color-surface-2);
  overflow:hidden;
}
.detail-gallery--multi {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:3px;
  max-height:480px;
}
.detail-gallery--single { max-height:500px; }
.detail-gallery__main {
  width:100%;height:100%;object-fit:cover;display:block;
}
.detail-gallery--single .detail-gallery__main { max-height:500px;object-position:center; }
.detail-gallery__thumbs {
  display:flex;flex-direction:column;gap:3px;
}
.detail-gallery__thumb {
  flex:1;width:100%;object-fit:cover;display:block;
}

/* Layout */
.detail-layout { display:grid;grid-template-columns:1fr 360px;gap:var(--space-8);padding:var(--space-8) 0 var(--space-16); }
.detail-main { display:flex;flex-direction:column;gap:var(--space-6); }
.detail-sidebar { display:flex;flex-direction:column;gap:var(--space-4);position:sticky;top:var(--space-20);height:fit-content; }

/* Title block */
.detail-title-block { display:flex;flex-direction:column;gap:var(--space-3); }
.detail-badges { display:flex;flex-wrap:wrap;gap:var(--space-2); }
.detail-badge { display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700;font-family:var(--font-display); }
.detail-badge--category { background:var(--color-primary);color:white; }
.detail-badge--date { background:var(--color-surface-2);color:var(--color-text-muted);border:1px solid var(--color-border); }
.detail-title { font-family:var(--font-display);font-size:var(--text-xl);font-weight:900;letter-spacing:-0.02em;color:var(--color-black);line-height:1.1; }
.detail-address-row { display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);color:var(--color-text-muted); }
.detail-address-row svg { color:var(--color-primary);flex-shrink:0; }
.detail-distance-inline { font-weight:600;color:var(--color-primary); }

/* Section cards */
.detail-section-card {
  background:white;border:1px solid var(--color-divider);
  border-radius:var(--radius-xl);padding:var(--space-6);
  box-shadow:var(--shadow-card);
}
.detail-section-card--map { padding:0;overflow:hidden; }
.detail-section-card__title {
  font-family:var(--font-display);font-weight:800;font-size:var(--text-base);
  color:var(--color-black);margin-bottom:var(--space-4);
}
.detail-section-card--map .detail-section-card__title { padding:var(--space-5) var(--space-6) 0; }
.detail-section-card__body { color:var(--color-text-muted);line-height:1.75;font-size:var(--text-base); }

/* Items */
.items-list { display:flex;flex-wrap:wrap;gap:var(--space-2); }
.item-tag {
  padding:var(--space-1) var(--space-3);
  background:var(--color-surface-2);border:1px solid var(--color-divider);
  border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--color-text-muted);
  transition:all var(--transition-interactive);
}
.item-tag:hover { border-color:var(--color-primary);color:var(--color-primary); }

/* Map */
.detail-map-container { height:300px;margin-top:var(--space-4); }
.detail-map-container #detail-map { height:100%; }
.detail-map-footer {
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-divider);
  background:#fafafa;
}
.detail-map-address-text {
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm);color:var(--color-text-muted);
}
.detail-map-address-text svg { color:var(--color-primary);flex-shrink:0; }
.detail-directions-btn {
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:700;color:var(--color-primary);
  text-decoration:none;font-family:var(--font-display);
  transition:color var(--transition-interactive);
}
.detail-directions-btn:hover { color:var(--color-primary-hover); }

/* Sidebar info card */
.detail-info-card {
  background:white;border:1px solid var(--color-divider);
  border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card);
}
.detail-info-row {
  display:flex;align-items:flex-start;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
}
.detail-info-icon {
  width:36px;height:36px;border-radius:var(--radius-md);
  background:var(--color-primary-highlight);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:var(--color-primary);
}
.detail-info-content { display:flex;flex-direction:column;gap:2px;min-width:0; }
.detail-info-label { font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em; }
.detail-info-value { font-weight:600;font-size:var(--text-sm);color:var(--color-black);line-height:1.4; }
.detail-info-divider { height:1px;background:var(--color-divider);margin:0; }
.detail-info-actions {
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);
  padding:var(--space-4) var(--space-5) var(--space-5);
}
.detail-btn-directions {
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3);border-radius:var(--radius-lg);
  background:var(--color-primary);color:white;
  font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;
  text-decoration:none;transition:all var(--transition-interactive);
  grid-column:1/-1;
}
.detail-btn-directions:hover { background:var(--color-primary-hover);transform:translateY(-1px); }
.detail-btn-share {
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3);border-radius:var(--radius-lg);
  background:var(--color-surface-2);color:var(--color-text-muted);
  border:1.5px solid var(--color-border);
  font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;
  cursor:pointer;transition:all var(--transition-interactive);
  grid-column:1/-1;
}
.detail-btn-share:hover { border-color:var(--color-primary);color:var(--color-primary); }

/* Post CTA card in sidebar */
.detail-post-card {
  background:#fff8f8;border:1.5px solid #f5c0c1;
  border-radius:var(--radius-xl);padding:var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.detail-post-card__emoji { font-size:1.5rem;line-height:1; }
.detail-post-card__title { font-family:var(--font-display);font-weight:800;font-size:var(--text-base);color:var(--color-black); }
.detail-post-card__desc { font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;margin-bottom:var(--space-2); }
.detail-post-card__btn {
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  background:var(--color-primary);color:white;
  border-radius:var(--radius-lg);text-decoration:none;
  font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;
  transition:all var(--transition-interactive);
}
.detail-post-card__btn:hover { background:var(--color-primary-hover);transform:translateY(-1px); }

/* Floating Post Your Sale button (homepage only) */
.fab-post {
  position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:90;
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  background:var(--color-primary);color:white;
  border-radius:var(--radius-full);
  font-family:var(--font-display);font-size:var(--text-sm);font-weight:800;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(232,22,27,0.4);
  transition:all var(--transition-interactive);
  letter-spacing:0.01em;
}
.fab-post:hover { background:var(--color-primary-hover);transform:translateY(-3px);box-shadow:0 8px 28px rgba(232,22,27,0.5); }
.fab-post svg { flex-shrink:0; }
/* Only show FAB on home page */
#page-home .fab-post { display:inline-flex; }
#page-detail .fab-post, #page-post .fab-post { display:none; }

/* ─── FORM PAGE ─── */
.form-page { padding:var(--space-12) 0; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5); }
.form-group { display:flex;flex-direction:column;gap:var(--space-2); }
.form-group--full { grid-column:1/-1; }
.form-label { font-size:var(--text-sm);font-weight:700;color:var(--color-text);font-family:var(--font-display); }
.form-label span { color:var(--color-error); }
.form-input,.form-textarea,.form-select {
  padding:var(--space-3) var(--space-4);border:1.5px solid var(--color-border);
  border-radius:var(--radius-lg);font-size:var(--text-base);
  background:var(--color-surface);color:var(--color-text);outline:none;
  transition:border-color var(--transition-interactive);
}
.form-input:focus,.form-textarea:focus,.form-select:focus { border-color:var(--color-primary); }
.form-textarea { resize:vertical;min-height:120px; }
.form-hint { font-size:var(--text-xs);color:var(--color-text-muted); }
.upload-zone {
  border:2px dashed var(--color-border);border-radius:var(--radius-xl);
  padding:var(--space-10);text-align:center;cursor:pointer;
  transition:all var(--transition-interactive);
}
.upload-zone:hover { border-color:var(--color-primary);background:var(--color-primary-highlight); }
.upload-zone svg { color:var(--color-primary);margin-inline:auto;margin-bottom:var(--space-3); }
.upload-zone p { color:var(--color-text-muted);font-size:var(--text-sm); }
.upload-zone strong { color:var(--color-primary); }
.form-honeypot { display:none !important; }

/* ─── GOOGLE ADS SLOTS ─── */
.ad-slot { width:100%;display:flex;justify-content:center;padding:var(--space-6) var(--space-6); }
.ad-slot--leaderboard { background:#fafafa;border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider); }
.ad-slot__placeholder {
  width:100%;max-width:728px;height:90px;
  border:1.5px dashed var(--color-border);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-text-faint);font-size:var(--text-xs);
  background:var(--color-surface);
  letter-spacing:0.05em;text-transform:uppercase;
}

.page-section { display:none; }
.page-section.active { display:block; }

/* Responsive */
@media (max-width:768px) {
  .footer__grid { grid-template-columns:1fr 1fr;gap:var(--space-6); }
  .footer__brand { grid-column:1/-1; }
  .detail-layout { grid-template-columns:1fr; }
  .detail-sidebar { position:static; }
  .detail-gallery--multi { grid-template-columns:1fr;max-height:300px; }
  .detail-gallery__thumbs { flex-direction:row;max-height:140px; }
  .navbar__logo-text span { display:none; }
  .fab-post { padding:var(--space-3) var(--space-4);font-size:var(--text-xs); }
}
@media (max-width:640px) {
  .form-grid { grid-template-columns:1fr; }
  .form-group--full { grid-column:1; }
  .footer__grid { grid-template-columns:1fr; }
  .listings-header { flex-direction:column;align-items:flex-start; }
}