/* --------- Tokens (light default) --------- */
:root{
  --navbar-h:64px;
  --panel-w:340px;

  --panel-bg:#fff;
  --panel-text:#111;
  --panel-border:rgba(0,0,0,.08);
  --input-bg:#fff;
  --input-text:#111;
  --input-border:rgba(0,0,0,.14);
  --hint-text:rgba(0,0,0,.70);
  --fab-bg:#0072CE;
  --fab-text:#fff;
}

/* --------- DARK via body.dark --------- */
body.dark{
  --panel-bg:#161616;
  --panel-text:#fff;
  --panel-border:rgba(255,255,255,.08);
  --input-bg:#121212;
  --input-text:#fff;
  --input-border:#2a2a2a;
  --hint-text:rgba(255,255,255,.75);
  --fab-bg:#2b7dff;
  --fab-text:#fff;
}

/* --------- Layout --------- */
.map-layout{
  position:relative;
  display:grid;
  grid-template-columns:var(--panel-w) 1fr;
  height:calc(100vh - var(--navbar-h));
}

/* --------- Sidebar --------- */
.map-panel{
  background:var(--panel-bg);
  color:var(--panel-text);
  border-right:1px solid var(--panel-border);
  padding:16px;
  overflow:auto;
  color-scheme:light;
}
body.dark .map-panel{ color-scheme:dark; }

.map-panel__header{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:8px;
}
.map-panel__header h1{ margin:0;font-size:1.25rem; }
.map-panel__close{
  border:none;background:transparent;font-size:1.5rem;line-height:1;
  cursor:pointer;opacity:.7;
}
.map-panel__close:hover{ opacity:1; }
.map-panel__section{ margin:12px 0; }
.map-panel__hint{ font-size:.85rem;color:var(--hint-text);margin-top:10px; }

/* --------- Buttons (match site-wide .ur-btn style) --------- */
.ur-btn{
  display:inline-block;
  text-align:center;
  text-decoration:none;
  font-weight:600;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid #d9d9d9;
  color:#111;
  background:#f9fafb;
  transition:transform .12s ease, filter .12s ease, background .15s ease, color .15s ease;
}
.ur-btn:hover{ transform:translateY(-1px); filter:brightness(1.02); }
.ur-btn-primary{
  background:#0072CE; /* site primary */
  border-color:#0072CE;
  color:#fff;
}
.ur-btn-ghost{ background:#fff; }

/* spacing for the pair inside the panel */
.map-panel__section .ur-btn{ margin-right:10px; margin-top:.35rem; }

/* Dark mode to keep contrast consistent */
body.dark .ur-btn{ background:#232323; color:#eaeaea; border-color:#2b2b2b; }
body.dark .ur-btn-primary{ background:#0072CE; border-color:#0072CE; color:#fff; }

/* Fields */
.map-field{ display:grid;gap:6px; }
.map-field span{ font-size:.9rem;opacity:.9; }
.map-field input,
.map-field select{
  width:100%;
  box-sizing:border-box;
  background:var(--input-bg);
  color:var(--input-text);
  border:1px solid var(--input-border);
  border-radius:10px;
  padding:10px 12px;
  font:inherit;outline:none;
}
.map-field input:focus,
.map-field select:focus{
  border-color:rgba(0,114,206,.6);
  box-shadow:0 0 0 3px rgba(0,114,206,.15);
}
.map-field input::placeholder{ color:var(--hint-text); }

/* Make the location search fit the panel */
#searchPlace{ display:block;width:100%; }

/* Google Places dropdown (when enabled) */
.pac-container{
  z-index:2000 !important;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--panel-border);
  background:var(--panel-bg);
  color:var(--panel-text);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.pac-item{ color:var(--panel-text); }
.pac-item:hover{ background:rgba(0,0,0,.05); }
body.dark .pac-item:hover{ background:rgba(255,255,255,.07); }

/* --------- Map area --------- */
.map-canvas-wrap{ position:relative; }
.map-canvas{ width:100%;height:100%; }

/* Floating button (open filters) */
/* Floating button (open filters) — fixed to viewport */
.map-fab{
  position: fixed;
  z-index: 10; /* above map controls */
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  background: var(--fab-bg);
  color: var(--fab-text);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  cursor: pointer;
  touch-action: manipulation; /* removes tap delay on iOS */
  -webkit-font-smoothing: antialiased;
}
.map-fab:hover{ filter: brightness(1.05); }

/* Hide Filtry FAB when the side panel is open (you already toggle .panel-open) */
.map-canvas-wrap.panel-open .map-fab{ display:none; }

/* Also hide FAB when the left filter panel is visible on desktop */
@media (min-width: 1024px){
  .map-fab{ display:none; }
}
.map-fab:hover{ filter:brightness(1.05); }

/* InfoWindow */
.map-iw{ min-width:220px; }
.map-iw__row{ display:flex;gap:10px;align-items:center; }
.map-iw__avatar{ width:48px;height:48px;border-radius:50%;object-fit:cover; }
.map-iw__meta small{ display:block;opacity:.8;line-height:1.2;margin-top:2px; }
.map-iw__btn{ display:inline-block;margin-top:8px; }

/* --------- Mobile drawer --------- */
@media (max-width:980px){
  .map-layout{
    grid-template-columns:1fr;
    height:calc(100vh - 56px);
  }
  .map-panel{
    position:absolute;z-index:5;
    top:0;bottom:0;left:0;
    width:min(92vw,380px);
    transform:translateX(-100%);
    transition:transform .24s ease;
    box-shadow:0 10px 24px rgba(0,0,0,.25);
    border-right:none;border-radius:0 16px 16px 0;
  }
  .map-panel.open{ transform:translateX(0); }
  .map-canvas-wrap.panel-open .map-fab{ display:none; }

  .pac-container{ max-width:min(92vw,380px); }
}

/* Hint Maps for auto light/dark rendering with a dual-mode Map ID */
.map-canvas { color-scheme: light; }
body.dark .map-canvas { color-scheme: dark; }

/* === Avatar pin (AdvancedMarker content) === */
.trainer-pin {
  position: relative;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
  transform: translateY(-6px); /* lift pin slightly */
}
.trainer-pin img.pin-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

/* dark mode */
body.dark .trainer-pin {
  background: #0b0f14;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 1px 6px rgba(0,0,0,.8);
}

/* ===== Trainer avatar pins (AdvancedMarker) ===== */
.trainer-pin{
  all: unset;
  display:inline-flex;
  align-items:center; justify-content:center;
  width:42px; height:42px;
  border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.25), 0 0 0 2px #fff;
  background:#fff;
  cursor:pointer;
}
.trainer-pin .pin-avatar{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
}
body.dark .trainer-pin{ box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 0 2px #1f1f1f; background:#1f1f1f; }

/* ===== Bottom Sheet (two-state) ===== */
:root{
  --ts-bg:#fff;
  --ts-text:#f4f4f4;
  --ts-muted:#6b7280;
  --ts-border:rgba(17,17,17,.08);
  --ts-accent:#0072CE;
  --ts-elev:0 10px 30px rgba(0,0,0,.18);
}
body.dark{
  --ts-bg:#161616;
  --ts-text:#f4f4f4;
  --ts-muted:#a9acb3;
  --ts-border:rgba(255,255,255,.10);
  --ts-accent:#4da3ff;
  --ts-elev:0 16px 40px rgba(0,0,0,.5);
}

.ts-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
  z-index: 9998;
}
.ts-sheet{
  position:fixed; left:0; right:0; bottom:0;
  display:none;
  justify-content:center; align-items:flex-end;
  z-index: 9999;
}
.ts-sheet.open{ display:flex; }
.ts-sheet.open + .ts-scrim,
.ts-sheet.open ~ .ts-scrim{ opacity:1; pointer-events:auto; }

.ts-card{
  background:var(--ts-bg); color:var(--ts-text);
  width: min(640px, calc(100% - 24px));
  max-height: 70vh; overflow:auto;
  border:1px solid var(--ts-border);
  border-radius:24px; box-shadow:var(--ts-elev);
  padding:16px; margin:12px;
  outline:none;
}

.ts-row{ display:flex; gap:12px; align-items:center; }
.ts-avatar{ width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid #fff; }
body.dark .ts-avatar{ border-color:#1f1f1f; }

.ts-main{ display:flex; flex-direction:column; gap:4px; }
.ts-name{ margin:0; font-size:1.15rem; font-weight:800; color:var(--ts-text); }
.ts-meta{ color:var(--ts-muted); font-size:.95rem; }
.ts-badge{
  display:inline-block; align-self:flex-start;
  margin-top:4px; padding:2px 8px; font-size:.78rem;
  border-radius:999px; background:rgba(0,114,206,.12); color:var(--ts-accent);
}

.ts-lines{ margin:12px 0 4px; display:flex; flex-direction:column; gap:6px; }
.ts-line{ color:var(--ts-text); font-size:.95rem; }
.ts-line:empty{ display:none; }

.ts-actions{ display:flex; gap:10px; margin-top:8px; }
.rt-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 14px; border-radius:12px; font-weight:700;
  border:1px solid transparent; text-decoration:none; cursor:pointer;
}
.rt-btn-primary{ background:var(--ts-accent); color:#fff; }
.rt-btn-primary:hover{ filter:brightness(1.06); }
.rt-btn-ghost{ background:transparent; color:var(--ts-text); border-color:var(--ts-border); }
.rt-btn-ghost:hover{ background:rgba(0,0,0,.04); }
body.dark .rt-btn-ghost:hover{ background:rgba(255,255,255,.06); }

/* Hide Filtry FAB when the side panel is open or on wide screens */
.map-panel.open + .map-canvas-wrap .map-fab { 
  display: none !important; 
}

@media (min-width: 1024px) {
  .map-fab { 
    display: none !important; 
  }
}

/* =========================================
   My Location (panel + slider + blue dot)
   ========================================= */

/* --- Panel layout --- */
.map-near {
  border-top: 1px solid var(--panel-border, #e5e7eb);
  padding-top: 12px;
}
.map-near__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.map-near__check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
}
.map-near__check input {
  transform: translateY(1px);
}
.map-panel__hint {
  font-size: 0.9rem;
  opacity: 0.75;
  margin-top: 6px;
}

/* --- Radius Slider (cross-browser, accessible) --- */
.range {
  appearance: none;             /* standard */
  -webkit-appearance: none;     /* webkit (needed for iOS/Safari) */
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0072CE 0%, #9cc7f1 100%);
  outline: none;
  opacity: .95;
  cursor: pointer;
}
.range:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Keyboard focus ring */
.range:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,114,206,.25);
}

/* --- WebKit (Chrome, Edge, Safari) --- */
.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0072CE 0%, #9cc7f1 100%);
}
.range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0072CE;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
  margin-top: -7px; /* centers thumb on 4px track */
  cursor: pointer;
}

/* --- Firefox --- */
.range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0072CE 0%, #9cc7f1 100%);
}
.range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0072CE;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
  cursor: pointer;
}

/* Dark mode variants */
body.dark .range {
  background: linear-gradient(90deg, #2b7dff 0%, #86b4ff 100%);
}
body.dark .range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #2b7dff 0%, #86b4ff 100%);
}
body.dark .range::-moz-range-track {
  background: linear-gradient(90deg, #2b7dff 0%, #86b4ff 100%);
}
body.dark .range::-webkit-slider-thumb {
  border-color: #2b7dff;
}
body.dark .range::-moz-range-thumb {
  border-color: #2b7dff;
}

/* --- User blue dot (AdvancedMarker content) --- */
.user-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4285F4; /* Google blue */
  box-shadow:
    0 0 0 3px #fff,                 /* inner ring for contrast */
    0 0 0 6px rgba(66,133,244,.25); /* outer glow */
}
body.dark .user-dot {
  box-shadow:
    0 0 0 3px #1f1f1f,
    0 0 0 6px rgba(66,133,244,.35);
}

/* === Filters panel mobile refinements === */
.map-panel {
  /* ensure content can scroll behind the sticky actions */
  padding-bottom: 88px; /* space for sticky bar */
}

/* Sticky actions always visible on mobile */
.map-panel__actions{
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel-bg, #fff);
  border-top: 1px solid var(--panel-border, #e5e7eb);
  backdrop-filter: saturate(120%) blur(6px);
}
body.dark .map-panel__actions{
  background: var(--panel-bg, #0f172a);
  border-top-color: var(--panel-border, #243244);
}

/* My Location section layout & spacing */
.map-near { 
  border-top: 1px solid var(--panel-border, #e5e7eb);
  padding-top: 12px;
}
.map-near__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px; /* space above the checkbox/slider */
}
.map-near__check{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px; /* space above the slider */
}

/* Range: full width + nicer look */
.map-near .range,
.map-panel__section .range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg, #0072CE 0%, #9cc7f1 100%);
  opacity: .95;
  display: block;
  margin: 0 0 2px;
}
.range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0072CE;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
  cursor: pointer;
}
.range::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  border: 2px solid #0072CE;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
  cursor: pointer;
}
/* dark theme tweaks */
body.dark .range{ background: linear-gradient(90deg, #2b7dff 0%, #86b4ff 100%); }
body.dark .range::-webkit-slider-thumb{ border-color: #2b7dff; }
body.dark .range::-moz-range-thumb{ border-color: #2b7dff; }

/* When “Použít mou polohu” is hidden, let “Přiblížit ke mně” span full width */
.map-near__row > :only-child{ grid-column: 1 / -1; } /* covers DOM cases when only one element remains */

/* (Optional) small utility if you need to hide anything via class */
.hidden{ display: none !important; }

/* === Disabled look for "Near me" controls === */
.map-near .ur-btn[disabled],
.map-near .ur-btn.is-disabled{
  background: #e5e7eb;       /* light gray pill */
  color: #9aa0a6;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  cursor: not-allowed;
}

body.dark .map-near .ur-btn[disabled],
body.dark .map-near .ur-btn.is-disabled{
  background: #232a36;       /* dark gray pill */
  color: #7b8494;
  border-color: #232a36;
}

/* Slider disabled (track + thumb) */
.range:disabled{
  opacity: .45;
  cursor: not-allowed;
  background: #e5e7eb;
}
.range:disabled::-webkit-slider-runnable-track{ background:#e5e7eb; }
.range:disabled::-moz-range-track{ background:#e5e7eb; }
.range:disabled::-webkit-slider-thumb{
  border-color:#c9ced6; background:#fff;
}
.range:disabled::-moz-range-thumb{
  border-color:#c9ced6; background:#fff;
}
body.dark .range:disabled{
  background:#2b3443;
}
body.dark .range:disabled::-webkit-slider-runnable-track{ background:#2b3443; }
body.dark .range:disabled::-moz-range-track{ background:#2b3443; }
body.dark .range:disabled::-webkit-slider-thumb{ border-color:#3a4658; }
body.dark .range:disabled::-moz-range-thumb{ border-color:#3a4658; }

/* Dim the radius label when controls disabled */
.map-near--disabled #nearRadiusValue{ opacity:.6; }
/* Trainer sheet: blurred background image + overlay for readable text */
.ts-card{ position:relative; overflow:hidden; background:var(--ts-bg); }

/* background image layer (behind content) */
.ts-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image: var(--ts-bg-img, url("assets/gymilustration.jpg"));
  background-size:cover;
  background-position:center;
  filter:blur(8px) saturate(0.95);
  opacity:0.95;
  transform:scale(1.06);
}

/* dim / contrast overlay so text is readable in both modes */
.ts-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(rgba(255,255,255,0.22), rgba(255,255,255,0.12));
  mix-blend-mode:overlay;
  pointer-events:none;
  transition:background .18s ease, opacity .18s ease;
}

/* ensure card content sits above layers */
.ts-card > *{ position:relative; z-index:2; }

/* Dark-mode overlay tweak */
body.dark .ts-card::after{
  background:linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.24));
}

/* reduce blur on small screens for performance and legibility */
@media (max-width:720px){
  .ts-card::before{ filter:blur(6px) saturate(0.95); transform:scale(1.03); }
  .ts-card::after{ background:linear-gradient(rgba(0,0,0,0.44), rgba(0,0,0,0.28)); }
}

/* very small phones: lighter blur + slightly stronger overlay */
@media (max-width:420px){
  .ts-card::before{ filter:blur(4.5px) saturate(0.95); transform:scale(1.02); }
  .ts-card::after{ background:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.34)); }
}

/* If you want a subtler look (optional "frosted" variant) */
.ts-card.frosted::before{ filter:blur(6px) saturate(0.85) contrast(.95); opacity:.9; }
.ts-card.frosted::after{ background:linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.06)); }

/* ensure avatars and buttons still have clear contrast */
.ts-avatar{ border:2px solid rgba(255,255,255,.9); box-shadow:0 6px 18px rgba(0,0,0,.18); }
body.dark .ts-avatar{ border:2px solid rgba(0,0,0,.6); box-shadow:0 6px 18px rgba(0,0,0,.5); }

/* accessibility - reduced motion: disable transitions */
@media (prefers-reduced-motion: reduce){
  .ts-card::before,.ts-card::after{ transition:none; }
}