/* ============================================================
   Bolzplatzradar — Mobile UI Layer  v4 · Juli 2026
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   HOMEPAGE  ≤ 600 px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Alte Buttons weg */
  #mob-toggle, #add-fab, .cities-btn, #sb-edge-toggle { display: none !important; }
  .loc-btn:not(.sat-btn) { display: none !important; }

  /* ── Seiten-Zoom verhindern ───────────────────────────────────
     html: pan-y → Browser erlaubt nur vertikalen Scroll, kein Pinch-Zoom.
     #map: none  → Leaflet bekommt alle Touch-Events selbst, handhabt
                   Pinch-Zoom komplett in JS ohne Browser-Interferenz.
     Das funktioniert auch auf iOS 10–15 wo user-scalable=no ignoriert wird,
     weil touch-action:pan-y auf html den Pinch-Zoom-Intent des Browsers
     abblockt bevor er überhaupt gestartet wird.                       */
  html { touch-action: pan-y; }

  #map, .leaflet-container {
    touch-action: none !important;
  }

  /* Sidebar: Platz für Tab-Leiste
     Höhe via CSS-Variable damit JS per setProperty() überschreiben kann
     während !important den Original-Styles überlegen bleibt.           */
  #sidebar {
    bottom: 60px !important;
    height: var(--bzr-sh, 42vh) !important;
    transition: transform .28s cubic-bezier(.32,.72,0,1), height .28s cubic-bezier(.32,.72,0,1) !important;
    will-change: transform, height;
    /* overflow bleibt beim Original-Wert — overflow:hidden würde
       die Platzliste verstecken und Klicks blockieren */
  }

  /* Aggressives Interstitial-Script wird per JS geblockt (detailWithAd-Override).
     Sidebar-Banner, Seitenleisten-Ads und Zwischen-Ads sind auf Mobile sowieso
     per Original-CSS versteckt — hier nur belt-and-suspenders:             */
  #ad-sidebar, .ad-sidebar,
  .ad-side-r, .ad-side-l { display: none !important; }
  /* .ad-between: nicht verstecken — Städteseiten-Banner läuft über Consent-JS */
  /* #detail-ad (300×250 im Modal) bleibt sichtbar — Consent-Flow läuft normal */

  /* Drag-Handle oben in der Sidebar (per JS eingefügt) */
  #bzr-sidebar-handle {
    height: 36px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none; user-select: none;
  }
  #bzr-sidebar-handle::after {
    content: ''; display: block;
    width: 44px; height: 5px;
    background: #D1D5DB; border-radius: 3px;
  }

  /* ── TAB-LEISTE ── */
  #bzr-tabbar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 1300;
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    /* Stärkerer Schatten statt einfacher border-top */
    box-shadow: 0 -1px 0 rgba(0,0,0,.07),
                0 -4px 20px rgba(0,0,0,.07);
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    padding-left: 4px;
    padding-right: 4px;
    overflow: visible;
  }

  /* Gleitender Indikator — breiter, höher, satter */
  #bzr-tab-indicator {
    position: absolute;
    top: 8px;
    left: 0;
    width: 52px; height: 38px;
    background: rgba(22,163,74,.12);
    border-radius: 14px;
    pointer-events: none;
    z-index: 0;
    transition: transform .38s cubic-bezier(.34,1.4,.64,1);
    will-change: transform;
  }

  .bzr-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-top: 12px;
    font-size: 10px;
    font-weight: 500;
    color: #A0AEC0;          /* etwas wärmer als vorher */
    text-decoration: none;
    flex: 1;
    font-family: -apple-system, 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color .18s, transform .12s;
    position: relative;
    z-index: 1;
  }

  /* Aktiver Tab: satteres Grün, fetteres Label, Icon etwas größer */
  .bzr-tab.bzr-tab--active {
    color: #16A34A;
    font-weight: 700;
  }
  .bzr-tab.bzr-tab--active svg {
    transform: scale(1.12);
  }

  .bzr-tab:not(.bzr-tab--center):active { opacity: .55; }

  .bzr-tab svg {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none;
    stroke-width: 1.65;
    stroke-linecap: round; stroke-linejoin: round;
    display: block;
    transition: transform .2s cubic-bezier(.34,1.4,.64,1),
                stroke-width .15s;
  }
  .bzr-tab.bzr-tab--active svg {
    stroke-width: 2;         /* aktive Icons etwas kräftiger */
  }

  /* Tab-Label */
  .bzr-tab span { letter-spacing: .01em; }

  /* ── CENTER-BUTTON: Standort ── */
  .bzr-tab--center {
    flex: 0 0 58px;
    width: 58px; height: 58px;
    border-radius: 50%;
    margin-top: -18px;
    background: linear-gradient(145deg, #2ecc71 0%, #16A34A 100%);
    border: 3px solid rgba(255,255,255,.97);
    box-shadow: 0 4px 22px rgba(22,163,74,.5),
                0 1px 4px rgba(0,0,0,.1);
    color: #fff;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding-top: 0;
    font-size: 0;
    transition: transform .12s, box-shadow .12s;
    z-index: 2;
  }

  .bzr-tab--center:active {
    transform: scale(.88);
    box-shadow: 0 2px 10px rgba(22,163,74,.3);
  }

  .bzr-tab--center svg {
    width: 24px; height: 24px;
    stroke: #fff;
    stroke-width: 2.1;
    transform: none !important; /* Kein Scale-up für Center-FAB */
  }


  /* ══════════════════════════════════════════════════════════
     MAP POPUP  (.pc2-*) — Design wie Platzkarten der Städtelisten
     ══════════════════════════════════════════════════════════ */
  /* Leaflet setzt minWidth/maxWidth per inline style (242px) —
     wir überschreiben per !important damit Buttons nicht abgeschnitten werden */
  .leaflet-popup-content {
    min-width: 272px !important;
    max-width: 288px !important;
  }

  .leaflet-popup-content-wrapper {
    border-radius: 14px !important;
    border-left: 4px solid #2ecc71 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.14) !important;
    touch-action: none; /* Swipe-to-dismiss via JS — Browser-Interferenz verhindern */
  }

  .pc2 { width: 100%; font-family: -apple-system,'Inter',sans-serif; }

  /* Header: weiß statt Grün — wie Kartendesign */
  .pc2-head {
    background: #fff !important;
    padding: 14px 16px 11px !important;
    border-bottom: 1px solid #eeeeee !important;
  }
  .pc2-title {
    color: #111 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }
  .pc2-addr {
    color: #666 !important;
    font-size: 13px !important;
    margin-top: 3px !important;
  }

  /* Body */
  .pc2-body  { padding: 10px 16px 14px !important; }
  .pc2-stars { font-size: 14px !important; }
  .pc2-rating { font-size: 12px !important; color: #888 !important; }

  /* Badges wie .tag auf Städteseiten */
  .pc2-badge {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
  }

  /* Action-Buttons */
  .pc2-actions { gap: 8px !important; margin-top: 10px !important; }
  .pc2-btn {
    padding: 10px 6px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  .pc2-btn-green { background: #2ecc71 !important; color: #fff !important; }
  .pc2-btn-blue  { background: #2563EB !important; color: #fff !important; }


  /* ══════════════════════════════════════════════════════════
     DETAIL MODAL — Bottom Sheet
     ══════════════════════════════════════════════════════════ */
  #detail-modal { align-items: flex-end !important; }

  #detail-modal .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    will-change: transform;
  }

  #bzr-detail-handle {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none; user-select: none;
    flex-shrink: 0;
  }

  #bzr-detail-handle::after {
    content: '';
    width: 44px; height: 5px;
    background: #D1D5DB;
    border-radius: 3px;
    display: block;
  }

  .detail-head {
    padding: 12px 20px 16px !important;
    border-bottom: 1px solid #F3F4F6 !important;
    touch-action: none;   /* iOS: kein nativer Scroll hier → JS übernimmt */
    cursor: grab;
  }

  .detail-head:active { cursor: grabbing; }

  .detail-head h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0F1117 !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }

  .detail-addr   { font-size: 13px !important; color: #6B7280 !important; margin-bottom: 8px !important; }

  .detail-brands {
    display: inline-flex !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #15803D !important;
    background: #DCFCE7 !important;
    padding: 3px 11px !important;
    border-radius: 20px !important;
    margin-bottom: 2px !important;
  }

  .detail-date   { font-size: 11px !important; color: #9CA3AF !important; margin-top: 6px !important; }

  /* ── Schließen-Button: grüner Kreis oben rechts ── */
  .detail-close { top: 14px !important; right: 14px !important; }
  .detail-close:not(#detail-share-btn) {
    width: 32px !important; height: 32px !important;
    border-radius: 50% !important;
    background: #16A34A !important;
    color: #fff !important;
    font-size: 16px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important;
    box-shadow: 0 2px 10px rgba(22,163,74,.4) !important;
  }
  #detail-share-btn { right: 56px !important; color: #9CA3AF !important; font-size: 18px !important; }

  .detail-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 20px 32px !important;
    overscroll-behavior: contain !important; /* verhindert Rubber-Band auf iOS */
    min-height: 0 !important; /* Flexbox-Fix: Item kann kleiner als Inhalt schrumpfen →
                                  overflow-y:auto wird aktiv → Slots + Kommentare scrollbar */
  }

  /* Verhindert dass der Modal-Hintergrund mitscrollt */
  #detail-modal .modal {
    overscroll-behavior: none;
  }

  /* "Eigene Verabredung erstellen" — Pink */
  .add-event-btn {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: #EC4899 !important;
    color: #fff !important;
    border: none !important;
    margin-top: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 3px 12px rgba(236,72,153,.35) !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   STÄDTESEITEN  ≤ 767 px
   Keine eigene Tabbar — Original map-fab ("Zur Karte") bleibt erhalten.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* map-fab etwas weiter oben damit er nicht am untersten Rand klebt */
  body.bzr-city-page #map-fab {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  @media (max-width: 600px) {
    #bzr-tabbar           { background: rgba(14,16,25,.98); box-shadow: 0 -1px 0 rgba(255,255,255,.06), 0 -4px 20px rgba(0,0,0,.3); }
    #bzr-tab-indicator    { background: rgba(34,197,94,.14); }
    .bzr-tab              { color: #4B5563; }
    .bzr-tab.bzr-tab--active { color: #22C55E; }
    .bzr-tab--center      { background: linear-gradient(145deg, #22C55E 0%, #16A34A 100%); border-color: rgba(14,16,25,.92); }
    .pc2-head             { background: #1C1F2E !important; border-color: #252838 !important; }
    .pc2-title            { color: #F9FAFB !important; }
    .pc2-badge            { background: #14532D !important; color: #86EFAC !important; }
    #bzr-detail-handle::after { background: #374151; }
    .detail-head          { border-color: #1F2937 !important; }
    .detail-brands        { background: #14532D !important; color: #86EFAC !important; }
  }
  /* keine Städteseiten-Tabbar mehr — kein dark-mode override nötig */
}