/* ============================================================
   PackBuddy – Unified Search (dark theme, one-screen app)
   ============================================================ */

:root {
  --orange:      #FF6B35;
  --orange-dark: #E05520;
  --navy:        #0D1B2A;
  --navy-mid:    #1B2D42;
  --navy-card:   #142236;
  --blue:        #1976D2;
  --green:       #27AE60;
  --border-d:    rgba(255,255,255,.09);
  --text-d:      rgba(255,255,255,.88);
  --muted-d:     rgba(255,255,255,.42);
  --radius:      12px;
  --radius-lg:   18px;
  --transition:  .22s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100%; font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; }

/* ══════════════════════════════════════════
   HERO SECTION  (fullscreen landing)
══════════════════════════════════════════ */
.pb-hero {
  min-height: 100vh;
  background: linear-gradient(160deg, #060f1b 0%, #0D1B2A 55%, #142236 100%);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}

/* subtle dot grid */
.pb-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* center glow */
.pb-hero::after {
  content: '';
  position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);
  width: 600px; height: 400px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,107,53,.07) 0%, transparent 70%);
}

/* ── Hero nav ── */
.pb-hero-nav {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 36px;
}
.pb-hero-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.2rem; font-weight: 800; color: white; text-decoration: none;
}
.pb-hero-logo-box {
  width: 34px; height: 34px; background: var(--orange);
  border-radius: 9px; display: flex; align-items: center;
  justify-content: center; font-size: 1rem;
  box-shadow: 0 0 20px rgba(255,107,53,.45);
}
.pb-hero-nav-right { display: flex; align-items: center; gap: 10px; }
.pb-hero-account-btn {
  padding: 8px 20px; background: rgba(255,255,255,.09);
  border: 1.5px solid rgba(255,255,255,.16); border-radius: 50px;
  color: rgba(255,255,255,.75); font-size: .8rem; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: var(--transition);
}
.pb-hero-account-btn:hover { background: rgba(255,107,53,.15); border-color: var(--orange); color: var(--orange); }

/* ── Hero center content ── */
.pb-hero-content {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 24px 80px; text-align: center; position: relative; z-index: 5;
}
.pb-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,107,53,.1); border: 1px solid rgba(255,107,53,.22);
  border-radius: 50px; padding: 6px 18px;
  font-size: .76rem; font-weight: 600; color: var(--orange);
  letter-spacing: .04em; margin-bottom: 24px;
}
.pb-headline {
  font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; color: white;
  line-height: 1.1; letter-spacing: -.02em; margin-bottom: 18px;
}
.pb-headline em { color: var(--orange); font-style: normal; }
.pb-subline {
  font-size: clamp(.9rem, 1.8vw, 1.05rem); color: rgba(255,255,255,.45);
  max-width: 500px; line-height: 1.75; margin-bottom: 38px;
}

/* ── Hero search form ── */
.pb-search-wrap {
  width: 100%; max-width: 580px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.pb-search-form {
  width: 100%; display: flex; align-items: center;
  background: rgba(255,255,255,.09);
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 50px; padding: 8px 8px 8px 22px;
  backdrop-filter: blur(12px); position: relative;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.pb-search-form:focus-within {
  border-color: var(--orange); background: rgba(255,255,255,.13);
  box-shadow: 0 0 0 4px rgba(255,107,53,.15);
}
.pb-search-icon { font-size: 1rem; margin-right: 12px; color: var(--orange); flex-shrink: 0; }
.pb-search-icon.spin { animation: spin .7s linear infinite; }
.pb-search-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 1rem; color: white; font-family: inherit; min-width: 0;
}
.pb-search-input::placeholder { color: rgba(255,255,255,.22); }
.pb-search-btn {
  flex-shrink: 0; background: var(--orange); color: white;
  border: none; border-radius: 50px; padding: 12px 26px;
  font-size: .9rem; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: var(--transition);
  white-space: nowrap;
}
.pb-search-btn:hover { background: var(--orange-dark); transform: scale(1.04); }
.pb-geo-btn {
  padding: 10px 20px;
  background: rgba(255,107,53,.07); border: 1.5px solid rgba(255,107,53,.18);
  border-radius: 50px; color: rgba(255,165,120,.8);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: var(--transition);
  display: flex; align-items: center; gap: 7px;
}
.pb-geo-btn:hover  { background: rgba(255,107,53,.14); border-color: var(--orange); color: var(--orange); }
.pb-geo-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Autocomplete dropdown (hero) */
.pb-ac-drop {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 999;
  background: var(--navy-card); border: 1.5px solid var(--border-d);
  border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.6);
  overflow: hidden; display: none;
}
.pb-ac-drop.open { display: block; }

/* ── Hero stats ── */
.pb-stats {
  display: flex; gap: 40px; margin-top: 40px;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08);
}
.pb-stat strong { display: block; font-size: 1.35rem; font-weight: 800; color: white; }
.pb-stat span   { font-size: .74rem; color: rgba(255,255,255,.35); }

/* ── Scroll hint ── */
.pb-scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; color: rgba(255,255,255,.28);
  font-size: .7rem; font-weight: 500; letter-spacing: .06em;
  cursor: pointer; transition: color .2s; z-index: 5;
}
.pb-scroll-hint:hover { color: var(--orange); }
.pb-scroll-arrow { font-size: 1.1rem; animation: pbArrow 1.8s ease infinite; }
@keyframes pbArrow {
  0%, 100% { transform: translateY(0); opacity: .6; }
  50%       { transform: translateY(7px); opacity: 1; }
}

/* ── Responsive: hero ── */
@media (max-width: 600px) {
  .pb-hero-nav { padding: 18px 20px; }
  .pb-hero-content { padding: 0 16px 70px; }
  .pb-stats { gap: 24px; }
  .pb-search-btn { padding: 12px 16px; font-size: .82rem; }
}

/* ══════════════════════════════════════════
   APP WRAPPER  (full viewport, no scroll)
══════════════════════════════════════════ */
.app-wrap {
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
  background: var(--navy);
}

/* ══════════════════════════════════════════
   SEARCH HEADER
   nav + search input + radius + filters
══════════════════════════════════════════ */
.search-header {
  flex-shrink: 0;
  background: linear-gradient(160deg, #0a1628 0%, var(--navy-mid) 100%);
  border-bottom: 1px solid var(--border-d);
  position: relative; z-index: 1200;
}

/* subtle background grid */
.search-header::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* ── Button row below search form (visible only on mobile) ── */
.sh-search-btns { display: contents; } /* on desktop: geo btn is a direct flex child */

/* ── Mobile-only nav elements (hidden on desktop) ── */
.sh-filter-toggle {
  display: none; align-items: center; gap: 7px; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 10px; padding: 7px 12px;
  color: rgba(255,255,255,.9); font-size: .82rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: var(--transition);
}
.sh-filter-toggle:hover { background: rgba(255,107,53,.18); border-color: var(--orange); color: var(--orange); }

/* CSS burger icon */
.sh-burger { display: flex; flex-direction: column; gap: 3.5px; width: 15px; flex-shrink: 0; }
.sh-burger span { display: block; height: 2px; background: currentColor; border-radius: 2px; }
.sh-filter-toggle-label { font-size: .8rem; }

/* Location chip */
.sh-location-chip {
  display: none; align-items: center; gap: 7px;
  flex: 1; min-width: 0;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 50px; padding: 6px 13px;
  color: rgba(255,255,255,.6); cursor: pointer; font-family: inherit;
  font-size: .78rem; font-weight: 500; transition: var(--transition); overflow: hidden;
  text-align: left;
}
.sh-location-chip:hover { border-color: var(--orange); color: rgba(255,255,255,.9); }
.sh-pin-svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--orange); }
.sh-location-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Map toggle */
.sh-map-toggle {
  display: none; align-items: center; gap: 6px; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 10px; padding: 7px 12px;
  color: rgba(255,255,255,.9); font-size: .82rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: var(--transition);
}
.sh-map-toggle:hover  { background: rgba(255,107,53,.18); border-color: var(--orange); color: var(--orange); }
.sh-map-toggle.active { background: rgba(255,107,53,.2); border-color: var(--orange); color: var(--orange); }
.sh-map-svg { width: 14px; height: 14px; flex-shrink: 0; }
.sh-map-toggle-label { font-size: .8rem; }

/* Map close button */
.map-close-btn {
  display: none; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  z-index: 500; align-items: center; gap: 6px;
  background: var(--navy-card); border: 1px solid var(--border-d);
  border-radius: 50px; padding: 7px 18px;
  color: rgba(255,255,255,.8); font-size: .78rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: var(--transition);
  box-shadow: 0 4px 16px rgba(0,0,0,.45); white-space: nowrap;
}
.map-close-btn:hover { border-color: var(--orange); color: var(--orange); }

/* ── Drawer topbar (hidden on desktop) ── */
.sh-fp-topbar {
  display: none; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-d);
  flex-shrink: 0;
}
.sh-fp-title { font-size: .9rem; font-weight: 700; color: white; }
.sh-fp-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: rgba(255,255,255,.6); transition: var(--transition);
}
.sh-fp-close:hover { background: rgba(255,107,53,.25); color: var(--orange); }

/* ── Filter overlay backdrop (mobile only) ── */
.sh-filter-overlay {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.sh-filter-overlay.open { display: block; }

/* ── Top nav row ── */
.sh-nav {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; height: 52px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.sh-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.1rem; font-weight: 800; color: white;
  text-decoration: none; margin-right: auto;
}
.sh-logo-box {
  width: 28px; height: 28px; background: var(--orange);
  border-radius: 7px; display: flex; align-items: center;
  justify-content: center; font-size: .85rem;
}
.sh-back {
  font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.38);
  text-decoration: none; transition: color var(--transition);
  display: flex; align-items: center; gap: 4px;
}
.sh-back:hover { color: var(--orange); }
.sh-account-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15); border-radius: 50px;
  color: rgba(255,255,255,.65); font-size: .78rem; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: var(--transition); white-space: nowrap;
}
.sh-account-btn:hover { background: rgba(255,107,53,.15); border-color: var(--orange); color: var(--orange); }
.sh-account-icon { flex-shrink: 0; }
.sh-token-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,107,53,.12); border: 1px solid rgba(255,107,53,.3);
  border-radius: 50px; padding: 4px 12px;
  font-size: .78rem; color: rgba(255,255,255,.75);
  cursor: pointer; font-family: inherit; transition: background .2s, border-color .2s;
}
.sh-token-chip:hover { background: rgba(255,107,53,.25); border-color: var(--orange); }
.sh-token-chip strong { color: var(--orange); font-size: .88rem; }
.sh-token-chip--positive {
  background: rgba(149,193,31,.14); border-color: rgba(149,193,31,.45);
}
.sh-token-chip--positive:hover { background: rgba(149,193,31,.26); border-color: #95c11f; }
.sh-token-chip--positive strong { color: #95c11f; }
.sh-token-chip--empty {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.35);
}
.sh-token-chip--empty:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.55); }
.sh-token-chip--empty strong { color: rgba(255,255,255,.3); }
.sh-token-plus {
  font-size: .72rem; font-weight: 800; color: var(--orange);
  background: rgba(255,107,53,.2); border-radius: 50%;
  width: 16px; height: 16px; display: inline-flex;
  align-items: center; justify-content: center; line-height: 1;
}

/* ── Headline + search row ── */
.sh-search-row {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
}
.sh-tagline {
  flex-shrink: 0; display: none; /* hidden on smaller heights */
}
.sh-tagline strong {
  display: block; font-size: 1rem; font-weight: 800; color: white; line-height: 1.1;
}
.sh-tagline span { font-size: .7rem; color: rgba(255,255,255,.38); }

/* Search form (the glassy input) */
.sh-search-form {
  flex: 1; max-width: 640px;
  display: flex; align-items: center;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 50px; padding: 6px 6px 6px 18px;
  backdrop-filter: blur(10px);
  transition: border-color .25s, background .25s, box-shadow .25s;
  position: relative;
}
.sh-search-form:focus-within {
  border-color: var(--orange);
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 3px rgba(255,107,53,.15);
}

.sh-search-icon { font-size: .95rem; margin-right: 10px; color: var(--orange); transition: var(--transition); }
.sh-search-icon.spin { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.sh-search-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: .9rem; color: white; font-family: inherit; min-width: 0;
}
.sh-search-input::placeholder { color: rgba(255,255,255,.22); }

.sh-clear-btn {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  font-size: .7rem; color: rgba(255,255,255,.6); transition: var(--transition);
  margin-right: 6px; flex-shrink: 0;
}
.sh-clear-btn.visible { display: flex; }
.sh-clear-btn:hover { background: var(--orange); color: white; }

.sh-search-btn {
  flex-shrink: 0; background: var(--orange); color: white;
  border: none; border-radius: 50px; padding: 10px 20px;
  font-size: .85rem; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: var(--transition);
  display: flex; align-items: center; gap: 6px;
}
.sh-search-btn:hover { background: var(--orange-dark); transform: scale(1.04); }

/* Geo button */
.sh-geo-btn {
  flex-shrink: 0; padding: 9px 14px;
  background: rgba(255,107,53,.1); border: 1.5px solid rgba(255,107,53,.25);
  border-radius: 50px; color: #FF9A7B;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: var(--transition);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.sh-geo-btn:hover { background: rgba(255,107,53,.18); border-color: var(--orange); }
.sh-geo-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Autocomplete */
.sh-ac-drop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 999;
  background: var(--navy-card); border: 1.5px solid var(--border-d);
  border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0,0,0,.5);
  overflow: hidden; display: none;
}
.sh-ac-drop.open { display: block; }
.ac-item {
  padding: 11px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-size: .86rem; border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background var(--transition);
}
.ac-item:last-child { border: none; }
.ac-item:hover { background: rgba(255,255,255,.06); }
.ac-icon { color: var(--muted-d); }
.ac-label { font-weight: 600; color: white; }
.ac-sub   { font-size: .73rem; color: var(--muted-d); }
.ac-inner { display: flex; flex-direction: column; }

/* ── Mobile filter trigger (hidden on desktop) ── */
.sh-mobile-filter-row { display: none; }
.sh-mobile-filter-btn { display: none; }

/* ── Filter sheet wrapper (desktop: transparent, mobile: bottom sheet) ── */
.sh-filter-sheet { /* no visual styles on desktop — renders as normal flow wrapper */ }
.sh-sheet-drag   { display: none; }
.sh-sheet-hd     { display: none; }
.sh-sheet-footer { display: none; }

/* ── Controls row: radius + optional filters ── */
.sh-controls {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 0;
  padding: 0 20px 12px;
  flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.sh-controls::-webkit-scrollbar { display: none; }

/* Radius pill */
.sh-radius-pill {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border-d);
  border-radius: 50px; padding: 7px 16px;
  margin-right: 12px; flex-shrink: 0;
}
.sh-radius-label { font-size: .75rem; font-weight: 600; color: var(--muted-d); white-space: nowrap; }
.sh-radius-badge {
  background: var(--orange); color: white; border-radius: 50px;
  padding: 2px 10px; font-size: .76rem; font-weight: 700;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1); white-space: nowrap; min-width: 48px; text-align: center;
}
.sh-radius-badge.bump { transform: scale(1.2); }
.sh-radius-range {
  -webkit-appearance: none; appearance: none;
  width: 110px; height: 4px; border-radius: 2px; outline: none; cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right, var(--orange) 0%, var(--orange) var(--fill,8%), rgba(255,255,255,.12) var(--fill,8%), rgba(255,255,255,.12) 100%);
}
.sh-radius-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--orange); cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,107,53,.5); transition: transform .15s;
}
.sh-radius-range::-webkit-slider-thumb:active { transform: scale(1.25); }
.sh-radius-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--orange); border: none; cursor: pointer;
}

/* Divider */
.sh-divider {
  width: 1px; height: 28px; background: var(--border-d);
  margin: 0 12px; flex-shrink: 0;
}

/* Filter chips group */
.sh-filters-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted-d); margin-right: 8px;
  white-space: nowrap; flex-shrink: 0;
}
.sh-filter-chips { display: flex; gap: 7px; flex-shrink: 0; }
.sh-chip {
  padding: 5px 13px; border-radius: 50px;
  border: 1.5px solid var(--border-d); background: rgba(255,255,255,.04);
  font-size: .77rem; font-weight: 500; cursor: pointer;
  transition: var(--transition); user-select: none; font-family: inherit;
  display: flex; align-items: center; gap: 5px; color: var(--muted-d);
  white-space: nowrap; flex-shrink: 0;
}
.sh-chip:hover  { border-color: var(--orange); color: var(--orange); background: rgba(255,107,53,.08); }
.sh-chip.active { background: rgba(255,107,53,.12); border-color: var(--orange); color: var(--orange); }
.sh-optional-tag {
  font-size: .68rem; font-style: italic; color: rgba(255,255,255,.22);
  margin-left: 4px; flex-shrink: 0; white-space: nowrap; align-self: center;
}

/* ══════════════════════════════════════════
   APP BODY  (sidebar + map fills remaining)
══════════════════════════════════════════ */
.app-body {
  flex: 1; display: flex; min-height: 0; overflow: hidden;
}

/* ── Results sidebar ── */
.result-sidebar {
  width: 360px; min-width: 360px;
  background: var(--navy-card);
  border-right: 1px solid var(--border-d);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width var(--transition), min-width var(--transition);
}
/* Collapsed: shrink to button width only */
.result-sidebar.collapsed { width: 36px; min-width: 36px; }
.result-sidebar.collapsed .rs-header { padding: 12px 4px; justify-content: center; }
.result-sidebar.collapsed .rs-count,
.result-sidebar.collapsed .rs-sort { display: none; }

.rs-header {
  padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border-d);
  flex-shrink: 0; min-width: 0;
}
.rs-count { font-size: .85rem; font-weight: 700; color: var(--text-d); white-space: nowrap; overflow: hidden; }
.rs-count span { color: var(--orange); }
.rs-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rs-sort {
  font-size: .74rem; font-weight: 500; color: var(--muted-d);
  border: 1px solid var(--border-d); border-radius: 8px;
  padding: 4px 8px; background: rgba(255,255,255,.05);
  cursor: pointer; font-family: inherit; outline: none; transition: border-color var(--transition);
}
.rs-sort:hover { border-color: var(--orange); }
.rs-sort option { background: var(--navy-mid); color: white; }
.rs-collapse {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border-d);
  color: var(--muted-d); cursor: pointer; font-size: .75rem;
  display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.rs-collapse:hover { background: rgba(255,255,255,.1); color: white; }

.rs-list {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px;
  padding-bottom: max(10px, calc(68px + env(safe-area-inset-bottom)));
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.rs-list::-webkit-scrollbar { width: 4px; }
.rs-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* ── Laser border animation (service-area match) ───────────────────────────── */
@property --laser-a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes laser-sweep { to { --laser-a: 360deg; } }

/* Packer cards */
.packer-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: var(--radius);
  border: 1.5px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  cursor: pointer; transition: var(--transition); margin-bottom: 7px;
  position: relative;
}
.packer-card:hover  { border-color: var(--orange); background: rgba(255,107,53,.07); transform: translateX(3px); }
.packer-card.active { border-color: var(--orange); background: rgba(255,107,53,.1); }

/* ── Match card: laser sweeps along the border ── */
.packer-card--match {
  border: 2px solid transparent;
  background:
    rgba(255,255,255,.03) padding-box,
    conic-gradient(
      from var(--laser-a),
      transparent        0deg,
      rgba(149,193,31,.1) 50deg,
      #95c11f            88deg,
      #C2D677           100deg,
      rgba(255,255,255,.6) 114deg,
      rgba(149,193,31,.1) 148deg,
      transparent       185deg
    ) border-box;
  animation: laser-sweep 3s linear infinite;
  box-shadow: 0 0 14px rgba(149,193,31,.13), 0 2px 10px rgba(0,0,0,.3);
}
.packer-card--match:hover {
  border-color: var(--orange);
  background: rgba(255,107,53,.07);
  transform: translateX(3px);
  box-shadow: 0 0 14px rgba(149,193,31,.1), 0 2px 10px rgba(0,0,0,.3);
}
.packer-card--match.active {
  border-color: var(--orange);
  background: rgba(255,107,53,.1);
  box-shadow: none;
}

.pc-match-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .67rem; font-weight: 700; letter-spacing: .03em;
  color: #161e23;
  background: #95c11f;
  border-radius: 50px; padding: 2px 8px; margin-top: 5px;
  animation: badge-pulse 3s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .8; }
}
.pc-avatar-wrap { position: relative; flex-shrink: 0; }
.pc-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy-mid); display: flex; align-items: center;
  justify-content: center; font-size: 1.1rem; border: 2px solid rgba(255,255,255,.1);
  overflow: hidden;
}
.pc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pc-unlocked-dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #95c11f; border: 2px solid #0e1e30;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 900; color: #fff; line-height: 1;
  pointer-events: none;
}
.pc-body { flex: 1; min-width: 0; }
.pc-name    { font-size: .85rem; font-weight: 700; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-meta    { font-size: .7rem; color: var(--muted-d); margin-top: 1px; }
.pc-vehicles{ font-size: .68rem; color: rgba(255,255,255,.25); margin-top: 2px; }
.pc-right   { text-align: right; flex-shrink: 0; }
.pc-rating  { font-size: .76rem; font-weight: 700; color: white; }
.pc-reviews { font-size: .67rem; color: var(--muted-d); font-weight: 400; }
.pc-dist    {
  display: inline-block; margin-top: 3px;
  background: rgba(255,107,53,.15); color: #FF9A7B;
  border-radius: 50px; padding: 2px 8px; font-size: .68rem; font-weight: 700;
}

/* Empty state */
.empty-state { padding: 32px 16px; text-align: center; }
.empty-state .es-icon { font-size: 2.4rem; margin-bottom: 10px; }
.empty-state h3 { font-size: .92rem; font-weight: 700; color: white; margin-bottom: 6px; }
.empty-state p  { font-size: .8rem; color: var(--muted-d); line-height: 1.6; }

/* Sidebar toggle (floating button on map edge) */
.sidebar-toggle {
  position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 40px;
  background: var(--navy-card); border: 1px solid var(--border-d);
  border-radius: 0 8px 8px 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: var(--muted-d); transition: var(--transition); z-index: 10;
}
.sidebar-toggle:hover { background: var(--navy-mid); color: white; }

/* ── Map wrap ── */
.search-map-wrap { flex: 1; position: relative; overflow: hidden; }
#map { width: 100%; height: 100%; }

/* ── Leaflet overrides ── */
.leaflet-container { font-family: inherit; }
.leaflet-control-zoom { border: none !important; box-shadow: 0 4px 16px rgba(0,0,0,.5) !important; }
.leaflet-control-zoom a {
  width: 36px !important; height: 36px !important; line-height: 36px !important;
  background: var(--navy-card) !important; color: rgba(255,255,255,.8) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.leaflet-control-zoom a:hover { background: var(--navy-mid) !important; color: var(--orange) !important; }
.leaflet-control-attribution {
  background: rgba(13,27,42,.75) !important; color: rgba(255,255,255,.3) !important;
  font-size: .62rem !important;
}
.leaflet-control-attribution a { color: rgba(255,255,255,.45) !important; }

/* ── Map markers ── */
.map-pin-wrap { pointer-events: all; position: relative; overflow: visible; }
.map-pin-unlocked {
  position: absolute; bottom: -2px; right: -2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #95c11f; border: 2.5px solid #0e1e30;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: #fff; line-height: 1;
  pointer-events: none; z-index: 10;
}
.map-pin {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy-card); border: 2.5px solid var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; cursor: pointer; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.55);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
/* Photo fills the pin exactly – avoids oval rendering in flex+height:100% contexts */
.map-pin .avatar-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 0;
}
.map-pin:hover { transform: scale(1.12); }
.map-pin.active {
  background: var(--orange); transform: scale(1.2);
  box-shadow: 0 0 0 6px rgba(255,107,53,.25), 0 6px 20px rgba(0,0,0,.5);
}
.user-pin-wrap { pointer-events: none; }
.user-pin {
  width: 14px; height: 14px; border-radius: 50%;
  background: #42A5F5; border: 3px solid white;
  box-shadow: 0 0 0 0 rgba(66,165,245,.4);
  animation: userPulse 2.2s infinite;
}
@keyframes userPulse {
  0%   { box-shadow: 0 0 0 0 rgba(66,165,245,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(66,165,245,0); }
  100% { box-shadow: 0 0 0 0 rgba(66,165,245,0); }
}

/* ── Detail panel ── */
.detail-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 360px;
  background: var(--navy); border-left: 1px solid var(--border-d);
  box-shadow: -8px 0 40px rgba(0,0,0,.45);
  transform: translateX(105%);
  transition: transform .32s cubic-bezier(.34,1.12,.64,1);
  z-index: 1001; display: flex; flex-direction: column; overflow-y: auto;
}
.detail-panel.open { transform: translateX(0); }

/* Sticky top bar: drag handle (mobile) + close button (always) */
.detail-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 12px 6px;
  background: var(--navy);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex-shrink: 0;
}
.detail-topbar-drag {
  width: 38px; height: 4px;
  background: rgba(255,255,255,.2); border-radius: 2px;
}
.detail-close-btn {
  width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255,255,255,.1); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: rgba(255,255,255,.75); transition: var(--transition);
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
}
.detail-close-btn:hover { background: rgba(255,255,255,.22); color: white; }

/* On desktop: topbar is transparent and drag handle is invisible */
@media (min-width: 681px) {
  .detail-topbar {
    background: transparent; pointer-events: none;
    padding: 10px 10px 0 0; justify-content: flex-end;
    position: absolute; top: 0; right: 0; left: 0;
  }
  .detail-topbar-drag { display: none; }
  .detail-close-btn { pointer-events: all; position: static; transform: none; }
}

.detail-hero-bg {
  background: linear-gradient(160deg, #142236 0%, var(--navy-mid) 100%);
  padding: 16px 20px 24px; text-align: center;
  border-bottom: 1px solid var(--border-d);
}
@media (min-width: 681px) {
  .detail-hero-bg { padding-top: 38px; }
}
.detail-avatar-lg {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--navy-mid); display: flex; align-items: center;
  justify-content: center; font-size: 2rem; margin: 0 auto 12px;
  border: 3px solid rgba(255,255,255,.1); overflow: hidden; position: relative;
}
.detail-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.detail-verified-badge {
  position: absolute; bottom: 0; right: 0; width: 22px; height: 22px;
  background: var(--orange); border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: .62rem;
  color: white; border: 2px solid var(--navy);
}
.detail-name-lg  { font-size: 1.15rem; font-weight: 800; color: white; }
.detail-city-lg  { font-size: .78rem; color: var(--muted-d); margin-top: 4px; }
.detail-dist-lg  { display: inline-block; margin-top: 7px; background: rgba(255,107,53,.2); color: #FF9A7B; border-radius: 50px; padding: 3px 11px; font-size: .74rem; font-weight: 700; }
.detail-rating-row { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; cursor: pointer; border-radius: 20px; padding: 4px 12px; transition: background .18s; }
.detail-rating-row:hover { background: rgba(149,193,31,.1); }
.detail-stars    { color: #FFD700; font-size: .8rem; }
.detail-rating-val { font-size: .88rem; font-weight: 700; color: white; }
.detail-rating-count { font-size: .74rem; color: var(--muted-d); }
.detail-body     { flex: 1; padding: 18px; }
.detail-section  { margin-bottom: 18px; }
.detail-sec-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.28); margin-bottom: 9px; }
.skills-wrap     { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-chip      { background: rgba(255,107,53,.12); border: 1px solid rgba(255,107,53,.3); border-radius: 50px; padding: 4px 11px; font-size: .74rem; font-weight: 500; color: var(--orange); }
.vehicle-chips   { display: flex; gap: 8px; flex-wrap: wrap; }
.vehicle-chip    { display: flex; align-items: center; gap: 5px; background: rgba(25,118,210,.1); border: 1px solid rgba(25,118,210,.22); border-radius: var(--radius); padding: 6px 12px; font-size: .78rem; font-weight: 600; color: #64B5F6; }
.detail-svc-chip  { background: rgba(149,193,31,.1)  !important; border-color: rgba(149,193,31,.25) !important; color: #c8e877 !important; }
.detail-lang-chip { background: rgba(171,71,188,.1)  !important; border-color: rgba(171,71,188,.25) !important; color: #CE93D8 !important; }
.detail-bio      { font-size: .84rem; color: rgba(255,255,255,.48); line-height: 1.75; }
.service-areas-list { display: flex; flex-direction: column; gap: 6px; }
.service-area-item {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: rgba(255,255,255,.7);
}
.sa-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #95c11f; box-shadow: 0 0 6px rgba(149,193,31,.6);
}
.sa-label { flex: 1; font-weight: 600; }
.sa-radius { font-size: .74rem; color: rgba(149,193,31,.8); white-space: nowrap; }
.sa-map-btn {
  background: none; border: 1px solid rgba(149,193,31,.35); border-radius: 6px;
  color: rgba(149,193,31,.8); font-size: .72rem; padding: 2px 7px; cursor: pointer;
  font-family: inherit; white-space: nowrap; flex-shrink: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sa-map-btn:hover { background: rgba(149,193,31,.12); }
.pb-ss-reset-btn {
  margin-left: auto; background: none;
  border: 1px solid rgba(255,255,255,.15); border-radius: 6px;
  color: rgba(255,255,255,.45); font-size: .72rem; padding: 2px 9px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pb-ss-reset-btn:hover, .pb-ss-reset-btn:active {
  border-color: rgba(255,107,53,.5); color: var(--orange);
}
.pb-ks-add-area-form { margin-top: 14px; }
.pb-ks-area-add-row { display: flex; gap: 8px; }
.pb-ks-area-add-row .pb-ks-input { flex: 1; margin-bottom: 0; }
.pb-ks-area-add-row .pb-ks-btn { flex-shrink: 0; width: auto; padding: 0 18px; }
.detail-disclaimer {
  background: rgba(255,107,53,.05); border: 1px solid rgba(255,107,53,.12);
  border-radius: 10px; padding: 12px; margin-top: 4px;
}
.detail-disclaimer .detail-sec-title { color: rgba(255,107,53,.5); margin-bottom: 6px; }
.detail-disclaimer p { font-size: .75rem; color: rgba(255,255,255,.32); line-height: 1.65; }
/* Unlock action strip – just below rating, above detail body */
.detail-action-strip {
  padding: 14px 20px 12px;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.unlock-btn {
  width: 100%; padding: 14px; border-radius: 50px;
  background: var(--orange); color: white; border: none;
  cursor: pointer; font-family: inherit; font-size: .9rem; font-weight: 700;
  box-shadow: 0 4px 20px rgba(255,107,53,.4); transition: var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.unlock-btn:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(255,107,53,.55); }
.detail-footer-note { text-align: center; font-size: .71rem; color: rgba(255,255,255,.26); margin-top: 7px; }
.detail-own-profile-note { text-align: center; font-size: .84rem; color: rgba(255,255,255,.4); padding: 10px 0; }

.detail-footer-unlocked { display: flex; gap: 8px; align-items: center; }
.detail-chat-btn {
  flex: 1; padding: 13px; border-radius: 50px;
  background: var(--green); color: white; border: none;
  cursor: pointer; font-family: inherit; font-size: .9rem; font-weight: 700;
  transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 7px;
}
.detail-chat-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.detail-opts-btn {
  flex-shrink: 0; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border-radius: 50px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 1.15rem; font-weight: 900; letter-spacing: .05em;
  color: rgba(255,255,255,.7); cursor: pointer; transition: var(--transition);
}
.detail-opts-btn:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Phone number after unlock */
.detail-unlocked-phone {
  text-align: center; font-size: .88rem; font-weight: 600;
  color: #95c11f; margin-top: 8px; letter-spacing: .02em;
}

/* Party animation on contact unlock (positioned via inline style to match detail panel) */
.party-burst {
  position: fixed; pointer-events: none; z-index: 9999; overflow: hidden;
}
.confetti-piece {
  position: absolute; bottom: 50%;
  background: var(--cc, #95c11f); border-radius: 2px;
  animation: confetti-fly linear forwards;
}
@keyframes confetti-fly {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(var(--cx, 0), var(--cy, -50vh)) rotate(var(--cr, 360deg)); opacity: 0; }
}

/* ══════════════════════════════════════════
   PAYMENT MODAL
══════════════════════════════════════════ */
.pay-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.72); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.pay-overlay.open { opacity: 1; pointer-events: all; }

/* mobile sheet handle + close — hidden on desktop */
.pay-sheet-bar  { display: none; }
.pay-sheet-drag { display: none; }
.pay-close-btn  { display: none; }
.pay-modal {
  background: var(--navy-card); border: 1px solid var(--border-d);
  border-radius: var(--radius-lg); width: 100%; max-width: 420px; overflow: hidden;
  transform: scale(.95) translateY(8px); transition: transform .3s ease;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.pay-overlay.open .pay-modal { transform: scale(1) translateY(0); }
.pay-modal-top {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  border-bottom: 1px solid var(--border-d); padding: 26px; text-align: center;
}
.pay-modal-top h2 { font-size: 1.25rem; font-weight: 800; color: white; margin-bottom: 5px; }
.pay-modal-top p  { font-size: .83rem; color: var(--muted-d); }
.pay-modal-body   { padding: 22px 26px; }
.pay-packer-row   { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.05); border: 1px solid var(--border-d); border-radius: var(--radius); padding: 11px; margin-bottom: 16px; }
.pay-packer-avatar{ width: 40px; height: 40px; border-radius: 50%; background: var(--navy-mid); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.pay-packer-name  { font-weight: 700; font-size: .86rem; color: white; }
.pay-packer-city  { font-size: .74rem; color: var(--muted-d); }
.pay-amount       { text-align: center; font-size: 2.8rem; font-weight: 800; color: white; margin-bottom: 4px; line-height: 1; }
.pay-amount small { font-size: 1rem; font-weight: 500; color: var(--muted-d); }
.pay-desc         { text-align: center; font-size: .8rem; color: var(--muted-d); margin-bottom: 18px; }
.pay-perks        { list-style: none; margin-bottom: 16px; }
.pay-perks li     { display: flex; align-items: center; gap: 9px; font-size: .84rem; padding: 6px 0; color: rgba(255,255,255,.72); border-bottom: 1px solid rgba(255,255,255,.06); }
.pay-perks li:last-child { border: none; }
.perk-ok          { color: var(--green); }
.pay-disclaimer   { font-size: .71rem; color: rgba(255,255,255,.26); line-height: 1.6; margin-bottom: 16px; background: rgba(255,255,255,.03); border-radius: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.05); }
.pay-confirm-btn  { width: 100%; padding: 14px; background: var(--green); color: white; border: none; border-radius: 50px; font-size: .9rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 16px rgba(39,174,96,.35); }
.pay-confirm-btn:hover { background: #219a52; transform: translateY(-2px); }
.pay-cancel-btn   { width: 100%; padding: 10px; background: none; border: none; font-size: .8rem; color: rgba(255,255,255,.3); cursor: pointer; font-family: inherit; margin-top: 8px; transition: color var(--transition); }
.pay-cancel-btn:hover { color: rgba(255,255,255,.65); }

/* ── Quick-unlock strip ── */
.pay-token-banner {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,107,53,.1); border: 1px solid rgba(255,107,53,.25);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px;
  font-size: .85rem; color: rgba(255,255,255,.8);
}
.pay-token-icon { font-size: 1.1rem; }
.pay-token-banner strong { color: var(--orange); font-size: 1rem; }
.pay-or-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 4px; color: rgba(255,255,255,.25); font-size: .75rem;
}
.pay-or-divider::before,
.pay-or-divider::after {
  content: ''; flex: 1; border-top: 1px solid rgba(255,255,255,.1);
}
.pay-or-divider span { white-space: nowrap; }

/* ── Token explanation ── */
.pay-token-what {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius); padding: 11px 13px; margin-bottom: 14px;
  font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.55;
}
.pay-token-what-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.pay-token-what strong { display: block; color: rgba(255,255,255,.75); font-size: .82rem; margin-bottom: 2px; }

/* ── Package selector ── */
.pay-pkg-section-title {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: rgba(255,255,255,.35); margin-bottom: 10px;
}
.pay-pkg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.pay-pkg-item {
  position: relative; display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.05); border: 1.5px solid var(--border-d);
  border-radius: var(--radius); padding: 14px 8px 10px;
  cursor: pointer; font-family: inherit; transition: var(--transition);
  gap: 2px; text-align: center;
}
.pay-pkg-item:hover        { border-color: var(--orange); background: rgba(255,107,53,.08); }
.pay-pkg-item--pop         { border-color: var(--orange); }
.pay-pkg-item--best        { border-color: rgba(25,118,210,.6); }
.pay-pkg-item--best:hover  { border-color: var(--blue); background: rgba(25,118,210,.08); }
.pay-pkg-badge-sm {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--orange); color: white;
  font-size: .6rem; font-weight: 700; padding: 2px 9px; border-radius: 20px;
  white-space: nowrap;
}
.pay-pkg-badge-sm--best { background: var(--blue); }
.pay-pkg-name  { font-size: .82rem; font-weight: 700; color: white; }
.pay-pkg-price { font-size: 1.05rem; font-weight: 800; color: var(--orange); }
.pay-pkg-per   { font-size: .65rem; color: rgba(255,255,255,.3); }
.pay-pkg-save  { font-size: .68rem; color: var(--green); }
.pay-pkg-item--best .pay-pkg-price { color: #64b5f6; }

/* ── PayPal button container ── */
#paypal-btn-container { min-height: 50px; }
.paypal-loading {
  font-size: .82rem; color: rgba(255,255,255,.45);
  text-align: center; padding: 12px 0;
}
.paypal-error {
  font-size: .82rem; color: #e74c3c;
  text-align: center; padding: 8px 0; margin: 0;
}
.pay-pkg-item--active {
  border-color: var(--green) !important;
  background: rgba(149,193,31,.12) !important;
}

/* ── Perks strip below packages ── */
.pay-perks-strip {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: .74rem; color: rgba(255,255,255,.4);
  margin-bottom: 12px;
}

/* ── Toast ── */
.toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 9999;
  background: var(--navy-card); border: 1px solid var(--border-d);
  color: white; border-radius: var(--radius); padding: 12px 17px;
  font-size: .83rem; font-weight: 500; font-family: inherit;
  box-shadow: 0 16px 48px rgba(0,0,0,.45); transform: translateY(80px); opacity: 0;
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
  display: flex; align-items: center; gap: 9px; max-width: 320px;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .result-sidebar { width: 300px; min-width: 300px; }
  .detail-panel { width: 300px; }
}

/* ── Mobile ≤680px: list-first, drawer for search, controls always visible ── */
@media (max-width: 680px) {

  /* ── Nav: show mobile elements, hide desktop elements ── */
  .sh-filter-toggle { display: none !important; }
  .sh-location-chip { display: flex; order: 2; }
  .sh-map-toggle    { display: none !important; }
  .sh-logo          { display: flex !important; order: 1; margin-right: 0; font-size: .88rem; }
  .sh-logo-box      { width: 24px; height: 24px; font-size: .75rem; }
  .sh-back          { display: none; }
  .sh-account-btn   { order: 3; }
  .lang-picker      { order: 4; }
  .sh-nav           { height: 52px; padding: 0 10px; gap: 6px; }
  #sh-auth-wrap     { margin-left: auto; }

  /* ── Nav: compact user group after login ── */
  .nav-user-group   { gap: 2px; }
  /* Profile button: avatar + chevron only, no name */
  #sh-uname         { display: none; }
  #sh-role-badge    { display: none; }
  .nav-profile-btn  { padding: 5px 8px 5px 6px; gap: 4px; }
  /* Smaller icon buttons */
  .nav-bell-btn, .nav-avail-btn { width: 34px; height: 34px; font-size: .88rem; }
  .nav-chat-btn     { padding: 3px 5px; font-size: 1rem; }
  /* Token chip compact – icon only on mobile, no number */
  .sh-token-chip          { padding: 4px 8px; font-size: .72rem; gap: 3px; }
  .sh-token-plus          { display: none; }
  .sh-token-chip strong   { display: none; }
  /* Lang-picker always rightmost in auth-wrap */
  .nav-auth-wrap .lang-picker { order: 99; }

  /* ── Mobile filter trigger row ── */
  .sh-mobile-filter-row {
    display: flex; align-items: center; gap: 0;
    padding: 6px 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .sh-mobile-filter-btn {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14);
    border-radius: 50px; padding: 7px 14px;
    color: rgba(255,255,255,.85); font-size: .82rem; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: var(--transition);
  }
  .sh-mobile-filter-btn:hover,
  .sh-mobile-filter-btn.has-filters { border-color: var(--orange); background: rgba(255,107,53,.1); color: var(--orange); }
  .sh-mfb-badge {
    background: var(--orange); color: white;
    font-size: .65rem; font-weight: 700; border-radius: 99px;
    padding: 0 6px; line-height: 1.5; min-width: 18px; text-align: center;
  }
  /* Divider between filter btn and radius pill */
  .sh-mobile-divider {
    width: 1px; height: 22px; background: rgba(255,255,255,.12);
    margin: 0 12px; flex-shrink: 0;
  }
  /* Inline radius pill in the trigger row */
  .sh-mobile-radius-pill {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  }
  .sh-mobile-radius-pill .sh-radius-range {
    flex: 1; width: auto; min-width: 0;
  }
  .sh-mobile-radius-pill .sh-radius-badge {
    flex-shrink: 0; min-width: 44px; text-align: center;
  }

  /* ── Filter sheet: bottom drawer ── */
  .sh-filter-sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0; z-index: 1001;
    background: var(--navy-card);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--border-d);
    box-shadow: 0 -8px 40px rgba(0,0,0,.5);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    max-height: 85vh; overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }
  .sh-filter-sheet.open { transform: translateY(0); }

  /* Drag handle */
  .sh-sheet-drag {
    display: block;
    width: 40px; height: 4px;
    background: rgba(255,255,255,.18); border-radius: 2px;
    margin: 10px auto 0;
  }

  /* Sheet header */
  .sh-sheet-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 4px;
    font-size: .9rem; font-weight: 700; color: white;
  }
  .sh-sheet-close {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; color: rgba(255,255,255,.6); transition: var(--transition);
  }
  .sh-sheet-close:hover { background: rgba(255,107,53,.25); color: var(--orange); }

  /* Sheet footer */
  .sh-sheet-footer { display: block; padding: 4px 20px 16px; }
  .sh-sheet-apply {
    width: 100%; padding: 14px;
    background: var(--orange); color: white; border: none;
    border-radius: 50px; font-size: .9rem; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: var(--transition);
  }
  .sh-sheet-apply:hover { background: var(--orange-dark); }

  /* Controls: vertical stack inside sheet */
  .sh-controls {
    flex-direction: column; align-items: stretch;
    overflow-x: visible; padding: 16px 20px; gap: 14px;
    border-bottom: none;
  }
  /* Radius is already in the trigger row — hide it inside the sheet */
  .sh-filter-sheet .sh-radius-pill,
  .sh-filter-sheet .sh-radius-div { display: none; }
  .sh-divider { width: 100%; height: 1px; margin: 2px 0; }
  .sh-filters-label { display: block; margin-right: 0; margin-bottom: 6px; }
  .sh-filter-chips { flex-wrap: wrap; gap: 7px; }
  .sh-optional-tag { display: none; }

  /* Ext panel always visible inside sheet (lang/service shown expanded) */
  .sh-filter-sheet .sh-ext-toggle { display: none; }
  .sh-filter-sheet #sh-ext-panel {
    display: block !important;
    padding: 0 20px 8px; margin-top: -4px;
  }
  .sh-filter-sheet .sh-ext-group { margin-bottom: 10px; }
  .sh-filter-sheet .sh-fchips { flex-wrap: wrap; gap: 6px; }

  /* ── Filter panel: left drawer (search form only) ── */
  .sh-filter-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0; width: 300px;
    background: var(--navy-card);
    border-right: 1px solid var(--border-d);
    box-shadow: 8px 0 32px rgba(0,0,0,.5);
    transform: translateX(-105%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 1300; overflow: visible;
    display: flex; flex-direction: column;
  }
  .sh-filter-panel.open { transform: translateX(0); }
  .sh-fp-topbar { display: flex; }
  .sh-search-row { padding: 7px 10px 8px; gap: 7px; flex-direction: column; }
  .sh-search-form {
    max-width: none; border-radius: var(--radius); padding: 6px 6px 6px 14px;
  }
  .sh-search-input { font-size: 16px !important; }
  .sh-search-btn { display: none !important; }
  /* Geo + map toggle as a compact row */
  .sh-search-btns {
    display: flex; gap: 8px; align-items: stretch;
  }
  .sh-geo-btn {
    flex: 1; justify-content: center; border-radius: var(--radius);
    padding: 9px 12px; font-size: .78rem;
  }
  .sh-map-toggle {
    display: flex; flex-shrink: 0;
    border-radius: var(--radius); padding: 9px 14px;
  }
  .sh-map-toggle-label { font-size: .78rem; }

  /* ── App body: list takes all height, map optional above ── */
  .app-body { flex-direction: column; }

  .result-sidebar {
    width: 100%; min-width: 0; flex: 1;
    height: auto; border-right: none; border-top: none;
    order: 2;
  }

  /* Map: collapsed by default */
  .search-map-wrap {
    flex: none; height: 0; overflow: hidden; order: 1;
    transition: height .3s cubic-bezier(.4,0,.2,1);
  }
  .app-body.map-visible .search-map-wrap   { height: 42vh; overflow: hidden; }
  .app-body.map-visible .map-close-btn     { display: flex; }
  .app-body.map-visible .result-sidebar    { border-top: 1px solid var(--border-d); }

  /* Sidebar collapse: not needed on mobile */
  .rs-collapse    { display: none; }
  .sidebar-toggle { display: none; }

  /* ── Detail panel: fixed bottom sheet ── */
  .detail-panel {
    position: fixed !important;
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; height: 75vh;
    transform: translateY(105%);
    z-index: 1500;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.5);
  }
  .detail-panel.open { transform: translateY(0); }

  /* ── Compact packer cards ── */
  .packer-card   { padding: 8px 10px; gap: 8px; margin-bottom: 5px; }
  .pc-avatar     { width: 36px; height: 36px; font-size: .9rem; }
  .pc-name       { font-size: .82rem; }
  .pc-meta       { font-size: .67rem; margin-top: 1px; }
  .pc-vehicles   { display: none; }
  .pc-rating     { font-size: .73rem; }
  .pc-reviews    { font-size: .64rem; }
  .pc-dist       { font-size: .64rem; padding: 1px 7px; margin-top: 2px; }

  /* ── Sidebar header ── */
  .rs-header { padding: 8px 12px; }
  .rs-count  { font-size: .82rem; }
  .rs-list   { padding: 6px 8px calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* ══════════════════════════════════════════
   NEAREST PACKER HINT CARD
══════════════════════════════════════════ */
.nearest-hint {
  margin: 12px 8px 0;
  border: 1.5px dashed rgba(255,107,53,.45);
  border-radius: 12px;
  padding: 14px 12px;
  cursor: pointer;
  transition: background .2s;
}
.nearest-hint:hover { background: rgba(255,107,53,.06); }
.nearest-hint-head {
  font-size: .72rem; font-weight: 700; color: var(--orange);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
.nearest-hint-row {
  display: flex; align-items: center; gap: 10px;
}
.nearest-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  border: 2px solid rgba(255,107,53,.35);
  display: flex; align-items: center; justify-content: center;
}
.nearest-info { flex: 1; min-width: 0; }
.nearest-name {
  font-size: .9rem; font-weight: 700; color: var(--text-d);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nearest-city {
  font-size: .78rem; color: var(--muted-d); margin-top: 1px;
}
.nearest-dist {
  font-size: .8rem; font-weight: 700; color: var(--orange); white-space: nowrap;
}
.nearest-sub {
  font-size: .72rem; color: var(--muted-d); margin-top: 6px; line-height: 1.4;
}

/* ── Nearest marker on map (dimmed + dashed border) ── */
.map-pin-nearest {
  opacity: .55;
}
.map-pin-nearest .map-pin-inner {
  border-style: dashed !important;
  border-color: rgba(255,107,53,.5) !important;
}

/* ── Outside-radius date-match markers (green border) ── */
.map-pin-outside {
  opacity: .75;
  border-color: #95c11f !important;
  box-shadow: 0 0 0 3px rgba(149,193,31,.25), 0 4px 16px rgba(0,0,0,.55);
}

/* ── Outside-line running-light animation ── */
@keyframes dashFlow {
  to { stroke-dashoffset: -28; }
}
.outside-line-active {
  stroke: #95c11f !important;
  stroke-width: 3 !important;
  stroke-opacity: 1 !important;
  stroke-dasharray: 10 4 !important;
  animation: dashFlow .45s linear infinite;
  filter: drop-shadow(0 0 4px rgba(149,193,31,.8));
}
.outside-line-dim {
  stroke-opacity: 0.15 !important;
}

/* Service-area tooltip */
.service-area-tooltip {
  background: rgba(22,30,35,.92);
  border: 1px solid rgba(149,193,31,.5);
  border-radius: 6px;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: 4px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  white-space: nowrap;
}
.service-area-tooltip::before { display: none; }

/* ══════════════════════════════════════════
   SMARTPHONE ≤ 480 px – Feintuning
══════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Hero */
  .pb-hero-nav { padding: 12px 14px; gap: 8px; }
  .pb-hero-content { padding: 0 14px 60px; }
  .pb-hero-headline { font-size: 1.9rem; line-height: 1.2; }
  .pb-hero-subline { display: none; }
  .pb-stats { display: none; }

  /* Hero search form */
  .pb-search-form { flex-direction: column; gap: 8px; border-radius: 16px; padding: 12px; }
  .pb-search-input { border-radius: 10px !important; padding: 13px 14px; font-size: 16px !important; }
  .pb-search-btn { border-radius: 10px; width: 100%; padding: 14px; min-height: 50px; font-size: .9rem; }
  .pb-geo-btn { width: 100%; justify-content: center; min-height: 46px; }

  /* Nav: very compact */
  .sh-nav { padding: 0 8px; height: 48px; gap: 6px; }
  .sh-filter-toggle { padding: 6px 10px; }
  .sh-filter-toggle-label { display: none; }
  .sh-map-toggle { padding: 6px 10px; }
  .sh-map-toggle-label { display: none; }
  .sh-account-btn { padding: 5px 10px; font-size: .7rem; }
  .sh-token-chip { padding: 4px 8px; font-size: .7rem; }

  /* Drawer narrower */
  .sh-filter-panel { width: 85vw; max-width: 300px; }

  /* Map panel height when open */
  .app-body.map-visible .search-map-wrap { height: 38vh; }

  /* Detail panel taller */
  .detail-panel { height: 80vh; }
  .detail-body { padding: 12px 14px; }

  /* Leaflet controls */
  .leaflet-control-zoom a { width: 36px !important; height: 36px !important; line-height: 36px !important; }
}

/* Lang-picker dropdown im Map-View: position:fixed escapes overflow:hidden auf .app-wrap */
.sh-nav .lp-popup {
  position: fixed;
  top: 60px;
  right: 16px;
  left: auto;
}

@media (max-width: 400px) {
  .sh-nav .lp-popup {
    right: 4px;
    min-width: 130px;
  }
}

@media (max-width: 680px) {
  .nav-auth-wrap .lp-popup {
    position: fixed;
    top: 56px;
    right: 8px;
    left: auto;
    z-index: 20000;
  }
}

/* ── Review button & hint in detail strip ─────────────────────────────────── */
.detail-review-btn {
  width: 100%; margin-top: 8px; padding: 11px 20px;
  border-radius: 50px; border: 1.5px solid var(--green);
  background: transparent; color: var(--green);
  font-family: inherit; font-size: .87rem; font-weight: 700;
  cursor: pointer; transition: var(--transition);
}
.detail-review-btn:hover { background: rgba(149,193,31,.12); }
.detail-review-hint {
  text-align: center; font-size: .75rem; color: rgba(255,255,255,.35);
  margin-top: 6px;
}
.detail-review-done { color: #95c11f; }

/* ── Reviews section toggle ─────────────────────────────────────────────── */
.detail-reviews-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; cursor: pointer; padding: 8px 10px;
  font-family: inherit; text-align: left;
  transition: background .18s, border-color .18s;
}
.detail-reviews-toggle:hover {
  background: rgba(149,193,31,.07); border-color: rgba(149,193,31,.22);
}
.detail-reviews-arrow {
  font-size: .65rem; color: #95c11f; font-weight: 700;
  margin-left: auto; transition: transform .2s; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(149,193,31,.15); border: 1px solid rgba(149,193,31,.3);
  display: flex; align-items: center; justify-content: center;
}

/* ── Public reviews list in detail panel ─────────────────────────────────── */
.detail-reviews-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.detail-reviews-empty { font-size: .82rem; color: rgba(255,255,255,.35); margin: 0; }

.review-item {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 10px 13px;
  cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s;
}
.review-item:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
.review-item.expanded { border-color: rgba(149,193,31,.3); }

.ri-header {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap;
}
.ri-name  { font-weight: 700; font-size: .85rem; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.ri-stars { font-size: .78rem; color: #f4c430; letter-spacing: .02em; flex-shrink: 0; }
.ri-date  { font-size: .71rem; color: rgba(255,255,255,.28); margin-left: auto; flex-shrink: 0; white-space: nowrap; }
.ri-chevron { font-size: .65rem; color: rgba(255,255,255,.28); flex-shrink: 0; transition: transform .2s; }
.review-item.expanded .ri-chevron { transform: rotate(180deg); }

/* One-line comment preview shown when collapsed */
.ri-comment-preview {
  font-size: .79rem; color: rgba(255,255,255,.38);
  margin: 4px 0 0; padding: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.review-item.expanded .ri-comment-preview { display: none; }

/* Full details: per-question + comment – hidden until expanded */
.ri-details { display: none; margin-top: 10px; }
.review-item.expanded .ri-details { display: block; }

.ri-questions { display: flex; flex-direction: column; gap: 3px; margin-bottom: 7px; }
.ri-q-row     { display: flex; align-items: center; gap: 6px; font-size: .74rem; }
.ri-q-label   { color: rgba(255,255,255,.42); min-width: 118px; }
.ri-q-stars   { color: #f4c430; font-size: .7rem; letter-spacing: .02em; }
.ri-comment {
  font-size: .81rem; color: rgba(255,255,255,.65); margin: 0;
  border-top: 1px solid rgba(255,255,255,.06); padding-top: 7px;
}

/* Hidden reviews (> REVIEWS_INITIAL) – shown via JS */
.ri-hidden-wrap { display: none; flex-direction: column; gap: 8px; }
.ri-show-more {
  width: 100%; background: none; border: 1px dashed rgba(255,255,255,.12);
  border-radius: 8px; color: rgba(255,255,255,.38); font-size: .79rem;
  font-family: inherit; padding: 8px; cursor: pointer; transition: border-color .15s, color .15s;
}
.ri-show-more:hover { border-color: rgba(149,193,31,.4); color: #95c11f; }

/* ── Review Modal ────────────────────────────────────────────────────────── */
.review-modal {
  max-width: 480px; width: 94%;
  max-height: 90vh; overflow-y: auto;
  border-radius: 16px;
  background: #1b2530;
  color: #e6edf3;
}
.review-modal-head {
  position: relative; padding: 22px 24px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.review-modal-head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: #fff; }
.review-modal-sub { margin: 4px 0 0; font-size: .82rem; color: var(--green); font-weight: 600; }
.review-modal-body { padding: 18px 24px 24px; }

.review-questions { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.review-q-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.review-q-label { font-size: .83rem; color: rgba(255,255,255,.75); flex: 1; }
.review-stars { display: flex; gap: 4px; }
.rs-star {
  background: none; border: none; cursor: pointer;
  font-size: 1.35rem; color: rgba(255,255,255,.2);
  padding: 2px; line-height: 1; transition: color .12s, transform .1s;
}
.rs-star.active, .rs-star:hover ~ .rs-star { /* handled via JS */ }
.rs-star.active { color: #f4c430; }
.rs-star:hover { transform: scale(1.15); }

.review-comment-wrap { position: relative; margin-bottom: 18px; }
.review-comment-label { display: block; font-size: .78rem; color: rgba(255,255,255,.45); margin-bottom: 6px; }
.review-comment-ta {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 10px 12px;
  color: #e6edf3; font-family: inherit; font-size: .85rem; resize: vertical;
  transition: border-color .2s;
}
.review-comment-ta:focus { outline: none; border-color: var(--green); }
.review-char-count {
  position: absolute; bottom: 8px; right: 12px;
  font-size: .7rem; color: rgba(255,255,255,.3);
}
.review-modal-actions { display: flex; justify-content: flex-end; }
.review-submit-btn {
  padding: 12px 28px; border-radius: 50px;
  background: var(--green); color: #fff; border: none;
  font-family: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: var(--transition);
}
.review-submit-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.review-submit-btn:disabled { opacity: .6; cursor: default; transform: none; }

/* ── Verified chip in search card ─────────────────────────────────────────── */
.pc-verified-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange); color: white; border-radius: 50%;
  width: 15px; height: 15px; font-size: .58rem; font-weight: 800;
  margin-left: 4px; vertical-align: middle; flex-shrink: 0;
}

/* ── Inline write-review form (detail panel reviews section) ─────────────── */
.rv-write-form {
  margin-top: 12px; padding: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
}
.rv-write-form.rv-highlight {
  animation: rv-pulse .9s ease;
}
@keyframes rv-pulse {
  0%,100% { border-color: rgba(255,255,255,.1); }
  50%      { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,107,53,.18); }
}
.rv-form-title {
  font-size: .85rem; font-weight: 700; color: rgba(255,255,255,.82);
  margin-bottom: 12px;
}
.rv-questions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.rv-q-row     { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-q-label   { font-size: .78rem; color: rgba(255,255,255,.55); flex: 1; }
.rv-stars     { display: flex; gap: 2px; }
.rv-star {
  background: none; border: none; cursor: pointer;
  font-size: 1.15rem; color: rgba(255,255,255,.18); padding: 2px; line-height: 1;
  transition: color .1s, transform .1s; font-family: inherit;
}
.rv-star.active { color: #f4c430; }
.rv-star:hover  { transform: scale(1.15); }
.rv-comment {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 9px 11px;
  color: #e6edf3; font-family: inherit; font-size: .82rem; resize: vertical;
}
.rv-comment:focus { outline: none; border-color: var(--orange); }
.rv-char-count { text-align: right; font-size: .68rem; color: rgba(255,255,255,.3); margin: 3px 0 6px; }
.rv-err { font-size: .8rem; color: #f85149; margin: 4px 0; min-height: 1.2em; }
.rv-submit-btn {
  width: 100%; padding: 10px; background: var(--orange); color: white; border: none;
  border-radius: 8px; font-family: inherit; font-size: .88rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
.rv-submit-btn:hover    { opacity: .88; }
.rv-submit-btn:disabled { opacity: .5; cursor: not-allowed; }
.rv-success { color: var(--orange); font-size: .85rem; font-weight: 600; margin: 0; text-align: center; padding: 8px 0; }

/* ── Photo upload in Steckbrief (Konto sheet) ─────────────────────────────── */
.ks-photo-section {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 0 4px; margin-bottom: 4px;
}
.ks-photo-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 1.6rem;
}
.ks-photo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ks-photo-btn {
  padding: 7px 18px; background: none; border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px; color: rgba(255,255,255,.65); font-size: .82rem;
  font-family: inherit; cursor: pointer; transition: border-color .15s, color .15s;
}
.ks-photo-btn:hover { border-color: var(--orange); color: var(--orange); }
.ks-photo-hint { font-size: .72rem; color: rgba(255,255,255,.3); margin: 0; text-align: center; }
.ks-photo-status { font-size: .78rem; text-align: center; min-height: 1.1em; }

/* ══════════════════════════════════════════
   MOBILE SEARCH SHEET
══════════════════════════════════════════ */
.pb-search-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.pb-search-backdrop.open { display: block; }

.pb-search-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2001;
  background: #161e23;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 24px 24px 0 0;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 48px rgba(0,0,0,.6);
  transform: translateY(110%);
  transition: transform .38s cubic-bezier(.32,.72,0,1);
  max-height: 88vh;
  overflow-y: auto;
}
.pb-search-sheet.open { transform: translateY(0); }

.pb-ss-handle {
  width: 40px; height: 4px; background: rgba(255,255,255,.14);
  border-radius: 2px; margin: 10px auto 0;
}
.pb-ss-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 6px;
}
.pb-ss-title { font-size: 1.05rem; font-weight: 800; color: #fff; }
.pb-ss-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); cursor: pointer; font-family: inherit;
  transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.pb-ss-close:hover { background: rgba(255,255,255,.13); }
.pb-ss-close svg { stroke: currentColor; fill: none; display: block; }

.pb-ss-body { padding: 6px 20px 0; }
.pb-ss-field { margin-bottom: 18px; }
.pb-ss-field-label {
  display: flex; align-items: center; gap: 5px;
  font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: rgba(255,255,255,.38); margin-bottom: 8px;
}
.pb-ss-field-label svg { stroke: currentColor; fill: none; flex-shrink: 0; }
.pb-ss-field-label strong { color: var(--orange); margin-left: 2px; }
.pb-ss-optional { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .7; }

/* Location input */
.pb-ss-input-row { display: flex; gap: 8px; align-items: flex-start; }
.pb-ss-input-wrap { flex: 1; position: relative; }
.pb-ss-input {
  width: 100%; padding: 14px 16px;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 14px; color: #fff; font-family: inherit; font-size: 16px;
  outline: none; transition: border-color .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
.pb-ss-input::placeholder { color: rgba(255,255,255,.28); }
.pb-ss-input:focus { border-color: var(--orange); background: rgba(255,107,53,.06); }
.pb-ss-input.pb-ss-shake { animation: pb-ss-shake .42s ease; border-color: #f85149 !important; }
@keyframes pb-ss-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  60%     { transform: translateX(6px); }
  80%     { transform: translateX(-3px); }
}

/* Autocomplete */
.pb-ss-ac {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
  background: #1b2d42; border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  display: none;
}
.pb-ss-ac:not(:empty) { display: block; }
.pb-ss-ac-item {
  padding: 11px 16px; cursor: pointer; font-size: .88rem; color: rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(255,255,255,.05); transition: background .1s;
  display: flex; align-items: center; gap: 9px;
}
.pb-ss-ac-item:last-child { border-bottom: none; }
.pb-ss-ac-item:hover, .pb-ss-ac-item.focused { background: rgba(255,107,53,.1); color: #fff; }
.pb-ss-ac-item svg { stroke: var(--orange); fill: none; flex-shrink: 0; }

/* GPS button */
.pb-ss-geo {
  width: 50px; height: 50px; flex-shrink: 0;
  background: rgba(255,107,53,.1); border: 1.5px solid rgba(255,107,53,.2);
  border-radius: 14px; color: var(--orange); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.pb-ss-geo:active { background: rgba(255,107,53,.2); }
.pb-ss-geo svg { stroke: currentColor; fill: none; }

/* Radius slider */
.pb-ss-radius {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px; outline: none; cursor: pointer;
  touch-action: none; /* prevent scroll hijack on mobile */
  direction: ltr; /* RTL layout must not reverse slider direction */
  background: linear-gradient(
    to right,
    var(--orange) 0%,
    var(--orange) var(--fill, 8.16%),
    rgba(255,255,255,.12) var(--fill, 8.16%),
    rgba(255,255,255,.12) 100%
  );
}
.pb-ss-radius::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px;
  background: var(--orange); border: 3px solid #0d1b2a;
  border-radius: 50%; cursor: grab;
  box-shadow: 0 0 0 1px rgba(255,107,53,.4), 0 2px 8px rgba(0,0,0,.4);
  transition: transform .12s;
}
.pb-ss-radius::-moz-range-thumb {
  width: 28px; height: 28px; background: var(--orange);
  border: 3px solid #0d1b2a; border-radius: 50%; cursor: grab; border: none;
}
.pb-ss-radius:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }

/* Vehicle chips */
.pb-ss-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.pb-ss-chip {
  padding: 7px 13px; border-radius: 50px;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.55); font-family: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.pb-ss-chip.active {
  background: rgba(255,107,53,.13); border-color: var(--orange); color: var(--orange);
}
.pb-ss-chips--wrap { flex-wrap: wrap; gap: 7px; }

/* Submit */
.pb-ss-footer { padding: 4px 20px 0; }
.pb-ss-submit {
  width: 100%; padding: 16px; border-radius: 14px;
  background: var(--orange); border: none; color: #fff;
  font-family: inherit; font-size: 1rem; font-weight: 800;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, transform .1s; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 20px rgba(255,107,53,.35);
}
.pb-ss-submit:active { background: var(--orange-dark); transform: scale(.98); }
.pb-ss-submit:disabled { opacity: .7; cursor: default; transform: none; }
.pb-ss-submit svg { stroke: currentColor; fill: none; }

/* On mobile: hide hamburger + map toggle — replaced by bottom nav */
@media (max-width: 680px) {
  .sh-filter-toggle { display: none !important; }
  .sh-map-toggle    { display: none !important; }
}
/* On desktop: search sheet hidden */
@media (min-width: 681px) {
  .pb-search-sheet,
  .pb-search-backdrop { display: none !important; }
}

/* ══════════════════════════════════════════
   KONTO SHEET
══════════════════════════════════════════ */
.pb-konto-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.pb-konto-backdrop.open { display: block; }

.pb-konto-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2001;
  background: #161e23;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 24px 24px 0 0;
  transform: translateY(110%);
  transition: transform .38s cubic-bezier(.32,.72,0,1);
  max-height: 88vh;
  overflow-y: auto;
}
.pb-konto-sheet.open { transform: translateY(0); }

.pb-ks-body { padding: 8px 20px 32px; }

.pb-ks-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--orange); display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800; color: #fff;
  margin: 16px auto 12px;
}
.pb-ks-name {
  font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,.9);
  text-align: center; margin-bottom: 4px;
}
.pb-ks-email {
  font-size: .8rem; color: rgba(255,255,255,.45);
  text-align: center; margin-bottom: 20px;
}
.pb-ks-divider { height: 1px; background: rgba(255,255,255,.08); margin: 4px 0 16px; }
.pb-ks-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 14px 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; color: rgba(255,255,255,.85);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  text-decoration: none; font-family: inherit;
  transition: background .15s, border-color .15s;
  margin-bottom: 10px;
}
.pb-ks-btn:hover { background: rgba(255,107,53,.12); border-color: var(--orange); color: var(--orange); }
.pb-ks-btn--danger { color: rgba(255,80,80,.8); border-color: rgba(255,80,80,.2); }
.pb-ks-btn--danger:hover { background: rgba(255,80,80,.1); border-color: rgba(255,80,80,.5); color: rgba(255,80,80,.9); }
.pb-ks-guest-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  margin: 16px auto 12px;
}
.pb-ks-guest-title {
  font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,.9);
  text-align: center; margin-bottom: 6px;
}
.pb-ks-guest-sub {
  font-size: .82rem; color: rgba(255,255,255,.45);
  text-align: center; margin-bottom: 20px; line-height: 1.6;
}

/* Inline auth form in Konto-Sheet */
.pb-ks-tabs {
  display: flex; gap: 4px;
  background: rgba(255,255,255,.05); border-radius: 10px; padding: 4px;
  margin-bottom: 16px;
}
.pb-ks-tab {
  flex: 1; padding: 9px 0; border-radius: 7px; border: none;
  background: transparent; color: rgba(255,255,255,.5);
  font-size: .85rem; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .15s, color .15s;
}
.pb-ks-tab.active {
  background: var(--orange); color: white;
}
.pb-ks-input {
  display: block; width: 100%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 13px 14px;
  color: white; font-size: .9rem; font-family: inherit;
  outline: none; transition: border-color .15s, background .15s;
  margin-bottom: 10px; -webkit-appearance: none;
}
.pb-ks-input:focus {
  border-color: var(--orange); background: rgba(255,107,53,.06);
}
.pb-ks-input::placeholder { color: rgba(255,255,255,.28); }
.pb-ks-input--otp {
  text-align: center; font-size: 1.4rem; letter-spacing: .25em; font-weight: 700;
}
.pb-ks-error {
  font-size: .8rem; color: #f85149; margin-bottom: 8px;
  min-height: 1em; line-height: 1.4;
}
.pb-ks-btn--primary {
  background: var(--orange); color: white; border-color: transparent;
  font-weight: 700; justify-content: center;
}
.pb-ks-btn--primary:hover { background: var(--orange-dark); color: white; border-color: transparent; }
/* ── Konto sheet: profile sub-links (logged-in view) ── */
.pb-ks-profile-links {
  display: flex; flex-direction: column;
  margin: 0 -20px;
}
.pb-ks-profile-link {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 22px;
  color: rgba(255,255,255,.72);
  text-decoration: none; font-size: .88rem; font-weight: 500;
  border: none; border-top: 1px solid rgba(255,255,255,.06);
  background: none; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.pb-ks-profile-link:first-child { border-top: none; }
.pb-ks-profile-link:hover, .pb-ks-profile-link:active {
  background: rgba(255,255,255,.05);
  color: #fff;
}
.pb-ks-profile-link svg {
  width: 17px; height: 17px;
  stroke: rgba(255,255,255,.38); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  transition: stroke .15s;
}
.pb-ks-profile-link:hover svg, .pb-ks-profile-link:active svg { stroke: var(--orange); }
.pb-ks-profile-link .pb-ks-pl-chev {
  margin-left: auto;
  opacity: .25; font-size: .9rem;
}

/* ── Profile section body ── */
.pb-ks-section-body { padding-top: 6px; padding-bottom: 48px; }
.pb-ks-err {
  font-size: .8rem; min-height: 1.1em;
  margin: 4px 0 8px; line-height: 1.4; color: #f85149;
}
.pb-ks-hint {
  font-size: .78rem; color: rgba(255,255,255,.35);
  margin: 8px 0; line-height: 1.5;
}
/* Service areas */
.pb-ks-area-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
}
.pb-ks-area-label {
  font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.8);
  margin-bottom: 10px;
}
.pb-ks-area-row { display: flex; align-items: center; gap: 10px; }
.pb-ks-area-km {
  font-size: .8rem; font-weight: 700; color: var(--orange);
  white-space: nowrap; min-width: 44px;
}
.pb-ks-radius-range {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px; outline: none; cursor: pointer;
  touch-action: none;
  background: rgba(255,255,255,.14);
}
.pb-ks-radius-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--orange); cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,107,53,.5);
}
.pb-ks-area-del {
  background: rgba(255,80,80,.1); border: 1px solid rgba(255,80,80,.2);
  color: rgba(255,80,80,.7); border-radius: 8px;
  padding: 5px 9px; font-size: .82rem; cursor: pointer;
  font-family: inherit; flex-shrink: 0; transition: background .15s;
}
.pb-ks-area-del:hover { background: rgba(255,80,80,.2); color: #f85149; }

.pb-ks-btn--ghost {
  background: transparent; border-color: transparent;
  color: rgba(255,255,255,.35); font-size: .82rem;
  justify-content: center; padding: 10px 16px;
}
.pb-ks-btn--ghost:hover { color: var(--orange); background: transparent; border-color: transparent; }
.pb-ks-2fa-icon {
  font-size: 2.8rem; text-align: center; margin: 12px 0 8px;
}

/* ── Multi-step registration UI ── */
.pb-ks-step-hdr {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pb-ks-back {
  background: rgba(255,255,255,.07); border: none; color: rgba(255,255,255,.7);
  font-size: .82rem; font-weight: 600; border-radius: 8px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.pb-ks-back:hover { background: rgba(255,255,255,.12); color: white; }
.pb-ks-step-lbl {
  font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.4);
  letter-spacing: .06em; text-transform: uppercase; margin-left: auto;
}
.pb-ks-reg-title {
  font-size: 1rem; font-weight: 700; color: white;
  margin: 0 0 6px; letter-spacing: -.01em;
}
.pb-ks-opt { font-weight: 400; color: rgba(255,255,255,.35); font-size: .85em; }

/* Role cards */
.pb-ks-role-cards { display: flex; gap: 10px; margin-bottom: 16px; }
.pb-ks-role-card {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 16px 10px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
  color: white; cursor: pointer; text-align: center; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.pb-ks-role-card:hover { background: rgba(255,107,53,.08); border-color: rgba(255,107,53,.4); }
.pb-ks-role-card.active {
  background: rgba(255,107,53,.12); border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,107,53,.15);
}
.pb-ks-role-icon { font-size: 1.8rem; line-height: 1; }
.pb-ks-role-card strong { font-size: .9rem; font-weight: 700; }
.pb-ks-role-sub { font-size: .72rem; color: rgba(255,255,255,.45); line-height: 1.3; }

/* Field labels */
.pb-ks-field-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.pb-ks-field-label { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 6px; }
.pb-ks-char-hint { font-size: .72rem; color: rgba(255,255,255,.3); }

/* Textarea */
.pb-ks-textarea { resize: vertical; min-height: 88px; line-height: 1.5; }

/* Select */
.pb-ks-select { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* Terms label */
.pb-ks-terms-label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.45;
  margin: 10px 0 12px; padding: 10px 12px;
  background: rgba(255,255,255,.04); border-radius: 10px;
}
.pb-ks-terms-label input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--orange); }
.pb-ks-terms-label a { color: var(--orange); text-decoration: none; }

/* Chips */
.pb-ks-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.pb-ks-chip {
  padding: 6px 12px; border-radius: 20px; font-size: .8rem; font-weight: 600;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7); cursor: pointer; font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.pb-ks-chip:hover { background: rgba(255,107,53,.1); border-color: rgba(255,107,53,.35); color: white; }
.pb-ks-chip.active { background: rgba(255,107,53,.18); border-color: var(--orange); color: white; }

/* Details/summary for vehicles */
.pb-ks-details { margin-bottom: 4px; }
.pb-ks-details summary { cursor: pointer; user-select: none; list-style: none; }
.pb-ks-details summary::-webkit-details-marker { display: none; }
.pb-ks-details[open] .pb-ks-chips { margin-top: 8px; }

/* Availability calendar */
.pb-ks-cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 4px 10px; font-size: .88rem; font-weight: 700; color: white;
}
.pb-ks-cal-nav button {
  background: rgba(255,255,255,.08); border: none; color: white;
  font-size: 1.1rem; width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.pb-ks-cal-nav button:hover { background: rgba(255,107,53,.25); }
.pb-ks-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pb-ks-cal-hdr {
  text-align: center; font-size: .68rem; font-weight: 700;
  color: rgba(255,255,255,.35); padding: 4px 0; text-transform: uppercase;
}
.pb-ks-cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 600; border-radius: 8px;
  background: transparent; border: none; color: rgba(255,255,255,.8);
  cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pb-ks-cal-day:hover:not(:disabled) { background: rgba(255,107,53,.2); color: white; }
.pb-ks-cal-day.today { color: var(--orange); font-weight: 800; }
.pb-ks-cal-day.past { color: rgba(255,255,255,.2); cursor: default; }
.pb-ks-cal-day.selected { background: var(--orange); color: white; }
.pb-ks-cal-day.selected.today { background: var(--orange); }
.pb-ks-cal-day.blocked { background: rgba(220,50,50,.35); color: rgba(255,255,255,.7); }
.pb-ks-cal-day.editing { outline: 2px solid white; outline-offset: 1px; }
.pb-ks-avail-count {
  text-align: center; font-size: .8rem; font-weight: 600;
  color: var(--orange); margin: 10px 0 4px; min-height: 1.2em;
}
.pb-ks-avail-btns {
  display: flex; gap: 8px; margin-top: 8px;
}
.pb-ks-avail-btns .pb-ks-btn { flex: 1; justify-content: center; }

/* Quick-unlock strip (shown when user has tokens) */
.pay-quick-unlock {
  background: rgba(149,193,31,.08); border: 1px solid rgba(149,193,31,.25);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.pay-quick-label {
  font-size: .82rem; color: rgba(255,255,255,.65); margin-bottom: 10px;
}
.pay-quick-label strong { color: #95c11f; }

/* On mobile: account btn shows icon only */
@media (max-width: 680px) {
  .sh-account-label { display: none; }
  .sh-account-btn { display: none !important; }
}

/* ══════════════════════════════════════════
   CHAT SHEET
══════════════════════════════════════════ */
.pb-chat-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 2050;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.pb-chat-backdrop.open { display: block; }

.pb-chat-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2051;
  background: #161e23;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 24px 24px 0 0;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 48px rgba(0,0,0,.6);
  transform: translateY(110%);
  transition: transform .38s cubic-bezier(.32,.72,0,1);
  max-height: 88vh;
  overflow-y: auto;
}
.pb-chat-sheet.open { transform: translateY(0); }

.pb-chat-list { padding: 4px 0 8px; }

.pb-chat-item {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 20px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .12s; -webkit-tap-highlight-color: transparent;
}
.pb-chat-item:hover, .pb-chat-item:active { background: rgba(255,255,255,.04); }
.pb-chat-item:last-child { border-bottom: none; }

.pb-chat-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(149,193,31,.25), rgba(149,193,31,.08));
  border: 1.5px solid rgba(149,193,31,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 700; color: rgba(255,255,255,.85);
}
.pb-chat-info { flex: 1; min-width: 0; }
.pb-chat-name {
  font-size: .9rem; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-chat-last {
  font-size: .78rem; color: rgba(255,255,255,.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-chat-meta { flex-shrink: 0; text-align: right; }
.pb-chat-time { font-size: .7rem; color: rgba(255,255,255,.3); white-space: nowrap; }
.pb-chat-unread {
  background: #95c11f; color: #161e23;
  font-size: .65rem; font-weight: 800; border-radius: 99px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 5px; margin-left: auto;
}

.pb-chat-empty {
  text-align: center; padding: 48px 24px 32px;
  color: rgba(255,255,255,.4);
}
.pb-chat-empty-icon { font-size: 2.8rem; margin-bottom: 14px; line-height: 1; }
.pb-chat-empty-title { font-size: .95rem; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: 6px; }
.pb-chat-empty-sub { font-size: .82rem; line-height: 1.6; }
.pb-chat-empty-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 11px 26px;
  background: rgba(255,107,53,.12); border: 1.5px solid rgba(255,107,53,.3);
  border-radius: 50px; color: var(--orange);
  font-size: .85rem; font-weight: 700; font-family: inherit; cursor: pointer;
  text-decoration: none; transition: background .15s;
}
.pb-chat-empty-btn:hover { background: rgba(255,107,53,.2); }

.pb-chat-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 44px 24px; gap: 10px;
  color: rgba(255,255,255,.35); font-size: .85rem;
}
.pb-chat-loading-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.12); border-top-color: var(--orange);
  border-radius: 50%; animation: pb-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes pb-spin { to { transform: rotate(360deg); } }
.pb-chat-go-btn {
  display: flex; align-items: center; gap: 8px;
  margin: 0 20px 16px; padding: 13px 20px;
  background: var(--orange); border: none; border-radius: 12px;
  color: #fff; font-size: .9rem; font-weight: 700; font-family: inherit;
  cursor: pointer; justify-content: center;
  transition: background .15s, transform .1s;
}
.pb-chat-go-btn:hover { background: var(--orange-dark); }
.pb-chat-go-btn svg { stroke: currentColor; fill: none; }

/* ── Mobile Bottom Nav ── */
.pb-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(13,19,26,.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,.07);
  border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -6px 32px rgba(0,0,0,.45);
}
@media (max-width: 680px) {
  .pb-bottom-nav { display: flex !important; align-items: stretch; height: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 681px) {
  .pb-bottom-nav { display: none !important; }
}
.pb-bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; padding: 6px 4px 0;
  background: none; border: none; cursor: pointer;
  font-family: inherit; color: rgba(255,255,255,.38);
  text-decoration: none; transition: color .18s; -webkit-tap-highlight-color: transparent;
}
.pb-bn-icon-wrap {
  width: 48px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px;
  transition: background .18s;
}
.pb-bn-item svg {
  width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;
}
.pb-bn-item span { font-size: .59rem; font-weight: 600; letter-spacing: .03em; }
.pb-bn-item.active { color: var(--orange); }
.pb-bn-item.active .pb-bn-icon-wrap { background: rgba(255,107,53,.14); }
.pb-bn-item:not(.active):active { color: rgba(255,255,255,.6); }
.pb-bn-item:not(.active):active .pb-bn-icon-wrap { background: rgba(255,255,255,.06); }

/* ── Center FAB (Suche) ── */
.pb-bn-fab {
  position: relative;
  overflow: visible;
  flex: 0 0 72px;
}
.pb-bn-fab-ring {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(145deg, #FF8B5A 0%, #FF6B35 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 -4px 20px rgba(255,107,53,.50), 0 4px 14px rgba(0,0,0,.30);
  transition: transform .14s ease, box-shadow .14s;
}
.pb-bn-fab:active .pb-bn-fab-ring {
  transform: translateX(-50%) scale(.90);
  box-shadow: 0 -2px 12px rgba(255,107,53,.38), 0 2px 8px rgba(0,0,0,.22);
}
.pb-bn-fab.active .pb-bn-fab-ring {
  box-shadow: 0 -4px 26px rgba(255,107,53,.68), 0 4px 16px rgba(0,0,0,.32);
}
.pb-bn-fab svg {
  width: 24px; height: 24px;
  stroke: #fff; fill: none;
  stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Profil avatar in bottom nav ── */
.pb-bn-profil-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

body.pb-modal-open .pb-bottom-nav,
body.pb-modal-open .pb-mehr-sheet,
body.pb-modal-open .pb-mehr-backdrop { display: none !important; }
/* Hide nav while cookie consent banner is visible */
body:has(#pb-consent-banner.pb-cb--in) .pb-bottom-nav { display: none !important; }

/* Mehr sheet */
.pb-mehr-backdrop {
  display: none; position: fixed; inset: 0; z-index: 1001;
  background: rgba(0,0,0,.45);
}
.pb-mehr-backdrop.open { display: block; }
.pb-mehr-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1002;
  background: #161e23;
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
}
.pb-mehr-sheet.open { transform: translateY(0); }
.pb-mehr-drag {
  width: 40px; height: 4px; background: rgba(255,255,255,.15);
  border-radius: 2px; margin: 12px auto 4px;
}
.pb-mehr-title {
  font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.28);
  text-transform: uppercase; letter-spacing: .09em; padding: 10px 22px 4px;
}
.pb-mehr-link {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 22px; color: rgba(255,255,255,.8);
  text-decoration: none; font-size: .9rem;
  border-top: 1px solid rgba(255,255,255,.05);
  background: none; border-left: none; border-right: none; border-bottom: none;
  width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.pb-mehr-link:first-of-type { border-top: none; }
.pb-mehr-link svg { stroke: rgba(255,255,255,.4); flex-shrink: 0; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pb-mehr-link:hover, .pb-mehr-link:active { background: rgba(255,255,255,.04); }

/* ── Photo lightbox ── */
#pb-photo-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
#pb-photo-lightbox.open { opacity: 1; pointer-events: auto; }
#pb-photo-lightbox img {
  max-width: min(90vw, 520px); max-height: 88vh;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(0,0,0,.7);
  transform: scale(.9);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
#pb-photo-lightbox.open img { transform: scale(1); }
#pb-photo-lb-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none;
  color: #fff; font-size: 1.1rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
#pb-photo-lb-close:hover { background: rgba(255,255,255,.28); }

/* ══════════════════════════════════════════
   LANGUAGE PICKER  (search.html)
══════════════════════════════════════════ */
.lang-picker {
  position: relative; flex-shrink: 0;
  display: flex; align-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; cursor: pointer;
}
.lp-toggle {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; color: rgba(255,255,255,.75);
  font-size: .8rem; font-weight: 700; cursor: pointer;
  font-family: inherit; padding: 6px 10px;
  -webkit-tap-highlight-color: transparent;
}
.lp-globe { display: flex; align-items: center; }
.lp-globe svg { stroke: currentColor; fill: none; }
.lp-current { font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.lp-arrow { font-size: .6rem; opacity: .6; transition: transform .2s; }
.lang-picker.lp-open .lp-arrow { transform: rotate(180deg); }
.lp-popup {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0; left: auto;
  background: #1b2d42; border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  min-width: 138px; z-index: 10000;
}
.lang-picker.lp-open .lp-popup { display: block; }
.lp-option {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; color: rgba(255,255,255,.8);
  font-size: .82rem; font-weight: 500; cursor: pointer;
  font-family: inherit; padding: 11px 14px; text-align: left;
  transition: background .12s;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.lp-option:last-child { border-bottom: none; }
.lp-option:hover { background: rgba(255,107,53,.12); color: #fff; }
.lp-option.active { color: var(--orange); font-weight: 700; }
@media (max-width: 680px) {
  .sh-nav .lp-popup {
    position: fixed; top: 58px; right: 8px; left: auto; z-index: 20000;
  }
}

/* ── Unread chat badge on bottom nav ── */
.pb-bn-badge {
  position: absolute; top: 4px; right: 8px;
  min-width: 16px; height: 16px; border-radius: 99px;
  background: #95c11f; color: #161e23;
  font-size: .58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; pointer-events: none;
  animation: pb-badge-pulse 2s ease-in-out infinite;
}
@keyframes pb-badge-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.18); opacity: .85; }
}
.pb-bn-icon-wrap { position: relative; }

/* ══════════════════════════════════════════════════════════
   MOBILE: Pull-to-Refresh sperren (CSS-Seite)
   overflow-y:hidden bewusst NICHT gesetzt – iOS-Bug mit
   position:fixed Sheets und touch events
══════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  html, body {
    overscroll-behavior-y: none;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE DESIGN REFRESH ≤680px
   Plus Jakarta Sans · Orange Accent · Premium Glass UI
══════════════════════════════════════════════════════════ */
@media (max-width: 680px) {

  /* ── Typografie ── */
  body {
    font-family: 'Plus Jakarta Sans', 'Poppins', 'Segoe UI', system-ui, sans-serif;
  }

  /* ── Top-Nav: Deep Glass ── */
  .sh-nav {
    height: 56px;
    background: rgba(7,12,19,.97);
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
    border-bottom: 1px solid rgba(255,255,255,.05);
    box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 28px rgba(0,0,0,.55);
  }

  /* Logo-Box: Orange */
  .sh-logo-box {
    background: var(--orange);
    box-shadow: 0 0 14px rgba(255,107,53,.38);
    border-radius: 8px;
  }
  .sh-logo-text { letter-spacing: -.02em; }

  /* Location-Chip: Orange-Akzent */
  .sh-location-chip {
    background: rgba(255,107,53,.08);
    border: 1.5px solid rgba(255,107,53,.22);
    border-radius: 12px;
    color: rgba(255,255,255,.8);
    font-weight: 600;
    font-size: .82rem;
    padding: 7px 13px;
  }
  .sh-location-chip:hover {
    background: rgba(255,107,53,.16);
    border-color: rgba(255,107,53,.48);
    color: #FF9A7B;
  }
  .sh-pin-svg { color: var(--orange); }

  /* ── Filter-Trigger-Zeile ── */
  .sh-mobile-filter-row {
    padding: 8px 14px 10px;
    background: rgba(7,12,19,.7);
    border-bottom: 1px solid rgba(255,255,255,.05);
    gap: 10px;
  }
  .sh-mobile-filter-btn {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    font-size: .8rem;
    font-weight: 600;
    padding: 8px 14px;
    color: rgba(255,255,255,.7);
    letter-spacing: .01em;
  }
  .sh-mobile-filter-btn:hover,
  .sh-mobile-filter-btn.has-filters {
    background: rgba(255,107,53,.1);
    border-color: rgba(255,107,53,.4);
    color: var(--orange);
  }

  /* Radius-Regler */
  .sh-mobile-radius-pill .sh-radius-range {
    background: linear-gradient(
      to right,
      var(--orange) 0%, var(--orange) var(--fill, 8%),
      rgba(255,255,255,.12) var(--fill, 8%), rgba(255,255,255,.12) 100%
    );
  }
  .sh-mobile-radius-pill .sh-radius-range::-webkit-slider-thumb {
    background: var(--orange);
    box-shadow: 0 2px 10px rgba(255,107,53,.55);
  }
  .sh-mobile-radius-pill .sh-radius-range::-moz-range-thumb {
    background: var(--orange);
    border: none;
  }
  .sh-radius-badge {
    background: rgba(255,107,53,.15);
    color: #FF9A7B;
    border: 1px solid rgba(255,107,53,.25);
    font-size: .74rem;
  }

  /* ── Packer-Karten: modern ── */
  .packer-card {
    border-radius: 18px;
    padding: 13px 14px;
    gap: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    margin-bottom: 8px;
    box-shadow: 0 2px 16px rgba(0,0,0,.28);
    transform: none !important;
    transition: border-color .2s, background .2s, box-shadow .2s;
  }
  .packer-card:hover, .packer-card.active {
    border-color: rgba(255,107,53,.35);
    background: rgba(255,107,53,.05);
    box-shadow: 0 4px 28px rgba(255,107,53,.12);
    transform: none !important;
  }
  .pc-avatar {
    width: 46px; height: 46px;
    border-radius: 14px;
    border: 1.5px solid rgba(255,107,53,.25);
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
  }
  .pc-name {
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: -.015em;
  }
  .pc-meta { font-size: .72rem; margin-top: 3px; }
  .pc-dist {
    background: rgba(255,107,53,.13);
    color: #FF9A7B;
    border: 1px solid rgba(255,107,53,.2);
    font-size: .66rem;
    font-weight: 700;
    margin-top: 3px;
  }
  .rs-count span { color: var(--orange); }

  /* ── Bottom-Nav: Premium Glass ── */
  .pb-bottom-nav {
    background: rgba(7,12,19,.97) !important;
    border-top: none !important;
    border-radius: 24px 24px 0 0 !important;
    backdrop-filter: blur(52px) !important;
    -webkit-backdrop-filter: blur(52px) !important;
    box-shadow:
      0 -1px 0 rgba(255,255,255,.07),
      0 -14px 52px rgba(0,0,0,.72) !important;
  }
  .pb-bn-item {
    gap: 4px;
    padding: 8px 4px 0;
  }
  .pb-bn-item span {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .pb-bn-icon-wrap {
    width: 52px;
    height: 32px;
    border-radius: 16px;
    transition: background .2s, box-shadow .2s;
  }
  .pb-bn-item svg {
    width: 22px; height: 22px;
    stroke-width: 1.8;
  }
  .pb-bn-item.active { color: var(--orange); }
  .pb-bn-item.active .pb-bn-icon-wrap {
    background: rgba(255,107,53,.15);
    box-shadow: 0 0 22px rgba(255,107,53,.22);
  }
  .pb-bn-item:not(.active):active { color: rgba(255,255,255,.55); }
  .pb-bn-item:not(.active):active .pb-bn-icon-wrap {
    background: rgba(255,255,255,.07);
  }
  /* FAB overrides inside premium glass context */
  .pb-bn-fab { overflow: visible; }
  .pb-bn-fab svg { width: 24px; height: 24px; stroke-width: 2.3; }

  /* ── Mehr-Sheet ── */
  .pb-mehr-sheet {
    background: rgba(10,16,24,.99);
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
    border-radius: 24px 24px 0 0;
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .pb-mehr-link:active { background: rgba(255,107,53,.06); }

  /* ── Filter-Sheet ── */
  .sh-filter-sheet {
    background: rgba(10,16,24,.99);
    backdrop-filter: blur(52px);
    -webkit-backdrop-filter: blur(52px);
    border-top: 1px solid rgba(255,255,255,.07);
    border-radius: 24px 24px 0 0;
  }
  .sh-sheet-apply {
    background: var(--orange);
    color: white;
    font-weight: 800;
    border-radius: 14px;
    padding: 15px;
    font-size: .92rem;
    letter-spacing: .01em;
  }
  .sh-sheet-apply:hover { background: var(--orange-dark); }

  /* ── Detail-Panel ── */
  .detail-panel { border-radius: 24px 24px 0 0; }
  .detail-topbar {
    background: rgba(7,12,19,.98);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
  }
  .detail-topbar-drag {
    width: 42px; height: 4px;
    background: rgba(255,255,255,.22);
  }

  /* ── Nearest-Packer Hint ── */
  .nearest-hint {
    border-color: rgba(255,107,53,.45);
    border-radius: 18px;
  }

  /* ── Verfügbarkeiten: vertikal stacken auf kleinen Screens ── */
  .detail-avail-slot {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 12px;
  }
  .detail-avail-date {
    min-width: unset;
    font-size: .8rem;
  }
  .detail-avail-time  { font-size: .8rem; }
  .detail-avail-badge { font-size: .72rem; }
  .detail-avail-note  { margin-left: 0; font-size: .74rem; }
  .detail-avail-toggle { padding: 10px 12px; border-radius: 10px; }
  .avail-group-header  { padding: 10px 2px 4px; font-size: .7rem; }

  /* ── "Kommen über ihr Einsatzgebiet" Header ── */
  .rs-service-area-header {
    flex-wrap: wrap;
    gap: 5px 8px;
    padding: 12px 4px 8px;
    font-size: .72rem;
    line-height: 1.5;
    color: var(--orange);
    border-top-color: rgba(255,107,53,.2);
  }
  .rs-service-area-header span:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
  }
  .rs-sa-count {
    background: rgba(255,107,53,.15);
    border-color: rgba(255,107,53,.3);
    color: var(--orange);
  }
  .packer-card--service-area {
    border-left-color: rgba(255,107,53,.55);
    background: rgba(255,107,53,.04);
  }
  .rs-outside-header {
    font-size: .7rem;
    padding: 12px 4px 6px;
  }
}

/* ══════════════════════════════════════════
   CHAT MODAL  (search.html — mirrors style.css)
══════════════════════════════════════════ */
.chat-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(6,12,20,.75); backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.chat-overlay.open { opacity: 1; pointer-events: all; }
.chat-modal {
  width: 100%; max-width: 100%; max-height: 90vh;
  background: #0e1e30; border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px 20px 0 0; display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  transform: translateY(20px); transition: transform .25s ease;
}
.chat-overlay.open .chat-modal { transform: translateY(0); }
.chat-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.chat-modal-title {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; color: white; font-size: .95rem; min-width: 0;
}
.chat-modal-avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); font-size: 1.1rem;
}
.chat-modal-title-text { display: flex; flex-direction: column; min-width: 0; }
.chat-modal-city { font-size: .72rem; font-weight: 400; color: rgba(255,255,255,.42); margin-top: 1px; }
.chat-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chat-close-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none; cursor: pointer;
  color: rgba(255,255,255,.55); font-size: .9rem; transition: .2s ease;
  display: flex; align-items: center; justify-content: center;
}
.chat-close-btn:hover { background: rgba(255,255,255,.15); color: white; }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px; min-height: 200px;
}
.chat-loading { color: rgba(255,255,255,.35); font-size: .82rem; text-align: center; padding: 20px 0; }
.chat-msg { display: flex; flex-direction: column; max-width: 78%; }
.chat-msg--mine  { align-self: flex-end;   align-items: flex-end; }
.chat-msg--theirs { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: 10px 14px; border-radius: 16px;
  font-size: .88rem; line-height: 1.5; word-break: break-word;
}
.chat-msg--mine   .chat-bubble { background: var(--orange); color: white; border-bottom-right-radius: 4px; }
.chat-msg--theirs .chat-bubble { background: rgba(255,255,255,.09); color: rgba(255,255,255,.88); border-bottom-left-radius: 4px; }
.chat-meta { font-size: .7rem; color: rgba(255,255,255,.28); margin-top: 4px; padding: 0 4px; }
.chat-input-row {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.chat-input {
  flex: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px; padding: 10px 16px; color: white; font-family: inherit;
  font-size: .88rem; outline: none;
}
.chat-input:focus { border-color: var(--orange); }
.chat-input::placeholder { color: rgba(255,255,255,.25); }
.chat-send-btn {
  background: var(--orange); color: white; border: none; border-radius: 50px;
  padding: 10px 18px; font-size: .85rem; font-weight: 700; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: .2s ease;
}
.chat-send-btn:hover { background: var(--orange-dark); }
.chat-notice-bar { padding: 6px 14px 12px; }
.chat-notice-line { font-size: .68rem; color: rgba(255,255,255,.28); margin: 0; line-height: 1.5; }

/* ── Chip touch fix: prevent 300ms delay on mobile ── */
.pb-ks-chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ── Coin balance chip in konto sheet ── */
.pb-ks-coins {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,107,53,.12); border: 1px solid rgba(255,107,53,.28);
  border-radius: 20px; padding: 4px 12px;
  font-size: .78rem; font-weight: 700; color: var(--orange);
  margin: 8px auto 0; cursor: default;
}
.pb-ks-coins svg { width: 13px; height: 13px; stroke: var(--orange); fill: none; flex-shrink: 0; }

/* ── Profile photo in bottom nav avatar ── */
img.pb-bn-profil-avatar { object-fit: cover; }

/* ── Contact context menu (fallback when app.js not loaded) ── */
.cc-dropdown {
  display: none; position: fixed;
  background: #1e2e40; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 5px; min-width: 190px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45); z-index: 9999;
}
.cc-dropdown-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; cursor: pointer; color: rgba(255,255,255,.82);
  font-size: .86rem; font-family: inherit; padding: 9px 11px;
  border-radius: 7px; text-align: left; transition: background .12s;
}
.cc-dropdown-item:hover, .cc-dropdown-item:active { background: rgba(255,255,255,.08); color: #fff; }
.cc-dropdown-danger:hover, .cc-dropdown-danger:active { background: rgba(231,76,60,.15); color: #e74c3c; }
.cc-menu-item-icon { font-size: .95rem; flex-shrink: 0; width: 18px; text-align: center; }
.cc-dropdown-divider { height: 1px; background: rgba(255,255,255,.08); margin: 4px 5px; }