/*==== Brand===*/
:root{
  --brand:#e60000;
  --brand2:#b30000;

  --text:#0f172a;
  --muted:rgba(15,23,42,.68);

  --card:#ffffff;
  --line:rgba(15,23,42,.10);
  --shadow:0 10px 30px rgba(2,6,23,.10);
  --radius:16px;

  --bg:#f4f6f8;
  --container:1120px;

  /* ✅ nové: sjednocení form prvků */
  --input-bg:#fff;
  --input-border:rgba(15,23,42,.14);
  --input-border-hover:rgba(15,23,42,.22);
  --input-h:44px;

  /* ✅ nové: jemné pozadí pro "bar" prvky */
  --soft:#f6f7fb;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}

img{max-width:100%;display:block}

button,input,select,textarea{
  font:inherit;
  color:inherit;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 16px;
}

/* malé utility */
.muted{color:var(--muted)}
.hr{height:1px;background:var(--line);margin:16px 0}

/* ✅ základ pro nadpisy (ať to vypadá čistěji) */
h1,h2,h3,h4{
  line-height:1.2;
  letter-spacing:-.01em;
}

/* ✅ sjednocení form prvků (selecty budou konečně “hezké”) */
input[type="text"],
input[type="number"],
input[type="search"],
select,
textarea{
  width:100%;
  min-height:var(--input-h);
  padding:10px 12px;
  border:1px solid var(--input-border);
  border-radius:12px;
  background:var(--input-bg);
  outline:none;
  box-shadow:0 1px 0 rgba(2,6,23,.02);
}

textarea{min-height:120px; resize:vertical;}

select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  /* ✅ šipka pro select */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;

  padding-right:34px;
}

input:hover, select:hover, textarea:hover{
  border-color:var(--input-border-hover);
}

input:disabled, select:disabled, textarea:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* fokus (klávesnice) */
:focus-visible{
  outline:3px solid rgba(230,0,0,.28);
  outline-offset:2px;
  border-radius:12px;
}

/* ✅ lepší klikací pocit */
button{
  cursor:pointer;
}

/* CLS FIX: logo musí mít rezervovanou plochu (pevná velikost + aspect-ratio)
   Pozn.: Lighthouse ideálně chce i width/height atributy v HTML, ale tohle zároveň řeší reálné poskakování layoutu. */
.brand img{
  display:block;
  width:215px !important;     /* ✅ rezervujeme místo (přebije inline width:auto) */
  height:150px !important;    /* ✅ rezervujeme místo (přebije inline height:150px) */
  aspect-ratio: 215 / 150;
  object-fit:contain;
}

/* mobil */
@media (max-width: 900px){
  .brand img{
    width:90px !important;
    height:60px !important;
    aspect-ratio: 90 / 60;
  }
}
/*=====Components====*/
/* ===== Cards grid ===== */
.cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

@media (max-width:1100px){
  .cards{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (max-width:820px){
  .cards{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr;}
}

/* ===== Car card ===== */
.car{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.car:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(2,6,23,.14);
  border-color:rgba(15,23,42,.16);
}

/* ===== Media (CLS fix) ===== */
.car__media{
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio: 3 / 2; /* 480×320 i 360×240 */
  background:linear-gradient(135deg, rgba(15,23,42,.10), rgba(15,23,42,.02));
}

.car__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block; /* zabrání mezerám pod img */
}

/* fallback “Bez fotky” div v HTML */
.car__media > div{
  width:100%;
  height:100%;
}

/* ===== Body ===== */
.car__body{
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

.car__title{
  margin:0;
  font-size:16px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.01em;
}
.car__title a{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.car__meta{
  color:var(--muted);
  font-size:13px;
}

.car__bottom{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:8px;
  border-top:1px solid var(--line);
}


.price{
  font-weight:900;
  font-size:18px;
  color:var(--text);
  white-space:nowrap;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:var(--brand);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{background:var(--brand2)}
.btn:active{transform:translateY(1px)}

.btn--ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--line);
}
.btn--ghost:hover{
  border-color:rgba(15,23,42,.18);
  background:rgba(15,23,42,.03);
}

/* ===== Page heading ===== */
h1{
  font-size:26px;
  letter-spacing:-.02em;
}

/* ===== Page layout: sidebar + content ===== */
.page-grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:16px;
  align-items:start;
}

.content__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px 0;
}

.filters-open{ display:none; }

/* ===== Filters panel ===== */
.filters{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:sticky;
  top:86px; /* cca výška headeru */
  overflow:hidden;
}

.filters__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-bottom:1px solid var(--line);
}

.filters__title{
  font-weight:950;
  letter-spacing:-.01em;
}

.filters__close{
  display:none;
  border:1px solid var(--line);
  background:transparent;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}

.filters__form{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.frow{ display:flex; flex-direction:column; gap:6px; }
.fgrid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.flabel{
  font-size:13px;
  font-weight:800;
  color:var(--muted);
}

.fcontrol{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 10px;
  background:#fff;
  outline:none;
}

.fcontrol:focus{
  border-color:rgba(230,0,0,.35);
  box-shadow:0 0 0 3px rgba(230,0,0,.12);
}

.factions{
  display:flex;
  gap:10px;
  margin-top:2px;
}

.filters__hint{ margin-top:4px; font-size:12px; }

/* ===== Mobile: filters drawer ===== */
@media (max-width:900px){
  .page-grid{ grid-template-columns:1fr; }
  .filters{ position:fixed; inset:0; top:0; left:0; right:0; bottom:0; border-radius:0; transform:translateX(-105%); transition:transform .16s ease; z-index:120; }
  .filters.is-open{ transform:translateX(0); }
  .filters__close{ display:inline-flex; }
  .filters-open{ display:inline-flex; }
}

/*====layout====*/
/* ============ LAYOUT (header/footer + stránky) ============ */

/* ✅ Sticky výšky (doladíš kdyžtak o pár px) */
:root{
  --header-h: 74px;      /* přibližná výška headeru */
  --sticky-gap: 12px;
}

/* ---------- HEADER (inc/header.php) ---------- */

.site-header{
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
  position:sticky;
  top:0;
  z-index:50;
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
}

/* Brand */
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  text-decoration:none;
  line-height:1;
}

.brand__mark{
  font-weight:950;
  letter-spacing:-.02em;
  font-size:20px;
  color:var(--brand);
}

.brand__name{
  font-weight:800;
  letter-spacing:-.015em;
  font-size:14px;
  color:var(--text);
  opacity:.86;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(15,23,42,.03);
}

/* Nav container */
.nav{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Nav links (ty máš class nav__link) */
.nav__link{
  display:inline-flex;
  align-items:center;
  padding:10px 10px;
  border-radius:12px;
  font-weight:800;
  color:var(--text);
  border:1px solid transparent;
  transition:background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}

.nav__link:hover{
  background:rgba(15,23,42,.03);
  border-color:rgba(15,23,42,.08);
  color:var(--brand2);
}

.nav__link:active{
  transform:translateY(1px);
}

/* (volitelné) aktivní odkaz: přidej v PHP třídu is-active */
.nav__link.is-active{
  background:rgba(230,0,0,.08);
  border-color:rgba(230,0,0,.22);
  color:var(--brand2);
}

/* Header CTA */
.header-cta{
  display:flex;
  align-items:center;
  gap:10px;
}

.phone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  font-weight:900;
  border:1px solid rgba(230,0,0,.20);
  background:rgba(230,0,0,.08);
  color:var(--brand2);
  white-space:nowrap;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}

.phone:hover{
  background:rgba(230,0,0,.12);
  border-color:rgba(230,0,0,.28);
}

.phone:active{
  transform:translateY(1px);
}

/* Responsive */
@media (max-width:720px){
  .header-row{padding:10px 0}
  .brand__mark{font-size:18px}
  .brand__name{display:none;} /* mobil: jen "Autobazar" */
  .nav{gap:10px}
  .nav__link{padding:9px 10px}
  .phone{padding:9px 10px}
}

@media (max-width:520px){
  .nav{display:none;} /* jednoduché: menu schováme */
}

/* ============ CONTAINER / PAGE LAYOUT ============ */
/* ✅ .container už je v base.css, tady necháváme jen wide */
.container--wide{
  max-width:100%;
}

/* Grid stránky: vlevo filtry, vpravo obsah */
.page-grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:18px;
  align-items:start;

  /* ✅ mezera nad filtrem i obsahem */
  margin-top: 18px;
}


@media (max-width: 980px){
  .page-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 980px){
  .page-grid{
    margin-top: 16px;
  }
}

/* Filters box (sticky + vnitřní scroll) — ✅ sticky jen filtr */
.filters{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);

  position:sticky;
  top: calc(var(--header-h) + var(--sticky-gap));
  z-index:10;

  /* aby se celý panel vešel do viewportu */
  max-height: calc(100vh - (var(--header-h) + (var(--sticky-gap) * 2)));
  overflow:auto;
}

/* mobil: sticky vypneme (lepší UX) */
@media (max-width: 980px){
  .filters{
    position:relative;
    top:auto;
    max-height:none;

    /* ✅ MOBIL: rohy se musí klipnout */
    overflow:hidden;
    border-radius:16px;
  }
}

.filters__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid var(--line);

  border-top-left-radius:16px;
  border-top-right-radius:16px;
}

.filters__title{
  font-weight:900;
  letter-spacing:-.01em;
}

.filters__close{
  border:1px solid var(--line);
  background:rgba(15,23,42,.03);
  border-radius:12px;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.filters__form{
  padding:14px 14px 16px;
}

.filters__hint{
  padding-top:10px;
}

.content{
  min-width:0;
}

.content__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}

/* ============ RESULTS BAR (ESA styl) ============ */

/* ✅ TOP lišta přes oba sloupce (NE sticky) */
.page-grid .resultsbar--top{
  grid-column: 1 / -1;
  margin:0 0 14px;
}

/* ❌ sticky odstraněno schválně */
.resultsbar--top{
  position:static;
  top:auto;
  z-index:auto;
  background:transparent;
  backdrop-filter:none;
}

/* “krabička” */
.resultsbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;

  padding:12px 14px;
  border-radius:16px;
  background:rgba(15,23,42,.03);
  border:1px solid var(--line);
}

/* levá/pravá část */
.resultsbar__left{ min-width:0; }

.resultsbar__right{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* label “Co zákazník hledal” */
.resultsbar__label{
  font-weight:800;
  opacity:.82;
  margin-bottom:8px;
}

/* počet vozů */
.resultsbar__count{
  font-size:13px;
  opacity:.8;
  font-weight:800;
  white-space:nowrap;
}

@media (max-width: 980px){
  .resultsbar{
    flex-direction:column;
    align-items:stretch;
  }
  .resultsbar__right{
    justify-content:flex-start;
  }
}

/* chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:#f1f3ff;
  border:1px solid #d9dfff;
  text-decoration:none;
  color:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.chip:hover{
  filter:brightness(.98);
}

/* “X” v kolečku */
.chip__x{
  display:inline-flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  font-weight:900;
  opacity:.85;
}

.chip--clear{
  background:#fff2f2;
  border-color:#ffd0d0;
}

/* mini pager */
.pagermini{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

@media (max-width: 980px){
  .pagermini{ justify-content:flex-start; }
}

.pagermini__btn{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid var(--line);
  text-decoration:none;
  color:inherit;
  background:var(--card);
  box-shadow:0 1px 0 rgba(2,6,23,.04);
}

.pagermini__btn:active{
  transform:translateY(1px);
}

.pagermini__info{
  font-size:13px;
  opacity:.75;
  font-weight:800;
  white-space:nowrap;
}

/* ============ CARDS GRID (větší fotky díky více šířce) ============ */
.cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(240px, 1fr));
  gap:16px;
}

@media (max-width: 1400px){
  .cards{ grid-template-columns:repeat(3, minmax(240px, 1fr)); }
}
@media (max-width: 1100px){
  .cards{ grid-template-columns:repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 700px){
  .cards{ grid-template-columns:1fr; }
}

/* Pokud máš .car definované v cards.css, nevadí – tohle jen vylepší fotku */
.car__media img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

/* ---------- FOOTER (inc/footer.php) ---------- */

.site-footer{
  margin-top:40px;
  padding:22px 0;
  background:var(--card);
  border-top:1px solid var(--line);
}

/* Muted třída už je v base.css jako utility */
.site-footer .muted{
  font-size:13px;
  color:var(--muted);
}

/* Pokud chceš TMAVÝ footer, odkomentuj tento blok a zakomentuj ten světlý výše:

.site-footer{
  margin-top:40px;
  padding:28px 0;
  background:#0f172a;
  border-top:1px solid rgba(255,255,255,.10);
}
.site-footer .muted{
  font-size:13px;
  color:rgba(255,255,255,.60);
}
*/

/* Top pager v resultsbaru – menší a v jedné řadě */
.pager--top{
  margin:0;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}
.pager--top .pager__info{
  padding:0 6px;
  white-space:nowrap;
}

/* ===== DETAIL ===== */
.detail__topnav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
}
.detail__navright{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.detail__hero{
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){
  .detail__hero{ grid-template-columns:1fr; }
}

.gallery{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.gallery__main{
  position:relative;
  background:#e9eef3;
}
.gallery__main img{
  width:100%;
  height:520px;
  object-fit:cover;
  display:block;
}
@media (max-width: 980px){
  .gallery__main img{ height:360px; }
}
.gallery__zoom{
  position:absolute;
  right:12px;
  bottom:12px;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(15,23,42,.55);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.gallery__empty{
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(15,23,42,.6);
  font-weight:800;
}
.gallery__thumbs{
  display:flex;
  gap:10px;
  padding:12px;
  overflow:auto;
  border-top:1px solid var(--line);
  background:rgba(15,23,42,.02);
}
.gthumb{
  border:2px solid transparent;
  padding:0;
  background:transparent;
  border-radius:12px;
  cursor:pointer;
  flex:0 0 auto;
}
.gthumb img{
  width:110px;
  height:76px;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.gthumb.is-active{ border-color: rgba(230,0,0,.45); }

.dcard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:14px;
}
.dtitle{
  margin:0 0 10px;
  font-size:22px;
  letter-spacing:-.01em;
  line-height:1.15;
}
.dprice{
  font-size:24px;
  font-weight:950;
  letter-spacing:-.01em;
  margin:0 0 12px;
}
.dmeta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.dmeta__item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(15,23,42,.02);
}
.dmeta__item span{
  display:block;
  font-size:12px;
  opacity:.7;
  font-weight:700;
}
.dmeta__item strong{
  display:block;
  margin-top:2px;
  font-weight:900;
}

.dsection{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.dsection__title{
  font-weight:900;
  margin:0 0 6px;
}
.dtext{
  color:rgba(15,23,42,.85);
  font-size:14px;
}

.dcta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* ===== LIGHTBOX ===== */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.lb__img{
  max-width:92vw;
  max-height:86vh;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.lb__close{
  position:absolute;
  top:16px;
  right:16px;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.lb__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:28px;
  cursor:pointer;
}
.lb__prev{ left:16px; }
.lb__next{ right:16px; }

/* ===== LIGHTBOX ===== */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}

/* ✅ DŮLEŽITÉ: když má lightbox atribut hidden, NESMÍ se zobrazit */
.lightbox[hidden]{
  display:none !important;
}
@media (max-width: 900px){
  .filters{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(92vw, 360px);
    background: #fff;
    z-index: 9999;
    transform: translateX(-110%);
    transition: transform .2s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    overflow: auto;
  }
  .filters.is-open{
    transform: translateX(0);
  }
}
/* ===== MODAL ===== */
.modal{ position:fixed; inset:0; display:none; z-index:99999; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.modal__panel{
  position:relative;
  max-width:760px;
  width: min(92vw, 760px);
  margin: 6vh auto;
  background:#fff;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
.modal__title{
  margin:0;
  padding:16px 18px;
  font-size:20px;
  font-weight:800;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.modal__content{ padding:16px 18px 20px; }
.modal__x{
  position:absolute;
  right:10px; top:10px;
  border:0;
  background:transparent;
  font-size:22px;
  cursor:pointer;
  opacity:.7;
}
.modal__x:hover{ opacity:1; }

/* Kontakt: key-value */
.kv{ display:grid; grid-template-columns:120px 1fr; gap:10px 14px; }
.kv__k{ font-weight:700; opacity:.75; }
.kv__v{ font-weight:500; }

/* mapa náhled */
.mapbox{
  width:100%;
  height:220px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.12);
}
.mapbox iframe{ width:100%; height:100%; border:0; }

/* Mobile */
@media (max-width: 640px){
  .modal__panel{ margin: 3vh auto; }
  .kv{ grid-template-columns:1fr; }
  .kv__k{ margin-top:8px; }
}

/* ===== MODAL – PROFI STYLE ===== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:99999;
  font-family: inherit;
}
.modal.is-open{ display:block; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}

.modal__panel{
  position:relative;
  width: min(92vw, 860px);
  margin: 6vh auto;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 28px 80px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.06);
}

.modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px 14px;
  background: linear-gradient(180deg, rgba(213,0,0,.08), rgba(213,0,0,0));
  border-bottom:1px solid rgba(0,0,0,.08);
}

.modal__title{
  margin:0;
  font-size:20px;
  font-weight:800;
  letter-spacing:.2px;
}

.modal__subtitle{
  margin:6px 0 0;
  color: rgba(0,0,0,.65);
  font-size:13px;
  line-height:1.35;
}

.modal__x{
  border:0;
  background:transparent;
  cursor:pointer;
  width:38px;
  height:38px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color: rgba(0,0,0,.6);
}
.modal__x:hover{
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.85);
}

.modal__content{
  padding:16px 18px 18px;
  font-size:14px;
  line-height:1.55;
}

.modal__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
}

.modal__box{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:14px;
  background:#fff;
}

.modal__box h3{
  margin:0 0 8px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
}

.modal__list{
  margin:0;
  padding:0;
  list-style:none;
}
.modal__list li{
  padding:4px 0;
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.modal__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#d50000;
  margin-top:7px;
  flex:0 0 auto;
  opacity:.9;
}

.modal__tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#d50000;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
}
.modal__tag--muted{
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.8);
}

.modal__cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.modal__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
}
/* obecný hover OK pro normální tlačítka */
.modal__btn:hover{ background: rgba(0,0,0,.03); }

/* FIX: červené tel tlačítko nesmí na hover zbělat */
.modal__btn--red:hover,
.modal__btn--red:focus{
  background:#d50000 !important;
  border-color:#d50000 !important;
  color:#fff !important;
  filter: brightness(.95);
}


.modal__note{
  margin-top:10px;
  color: rgba(0,0,0,.65);
  font-size:13px;
}

.modal__hr{
  height:1px;
  background: rgba(0,0,0,.08);
  margin:14px 0;
}

/* Mobile */
@media (max-width: 720px){
  .modal__panel{ margin: 3vh auto; }
  .modal__grid{ grid-template-columns: 1fr; }
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-img {
  height: 34px;   /* uprav podle potřeby */
  width: auto;
  display: block;
}

.logo-text {
  font-size: 22px;
  font-weight: 800;
  color: #c40000;   /* tvoje červená */
}
@media (max-width: 900px) {
  .modal__panel {
    max-height: 88vh;          /* aby byl panel téměř přes celou výšku */
    overflow-y: auto;          /* hlavní: umožní scroll uvnitř panelu */
    -webkit-overflow-scrolling: touch; /* plynulé scrollování na iOS */
  }
}

/* ===== DARK THEME OVERRIDE (černá + červená) ===== */
:root{
  --bg: #0b0b0b;
  --card: #141414;
  --card2: #101010;
  --text: #f3f3f3;
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.12);
  --accent: #d50000;
  --accent2: #b80000;
}

/* základ */
html, body{ background: var(--bg); color: var(--text); }
a{ color: inherit; }

/* karty/panely */
.dcard,
.card,
.box,
.filters,
.sidebar,
.detail,
.resultsbar,
.pg-card,
.modal,
.sheet,
.panel{
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}

/* jemné texty */
.muted,
.small,
.help,
label,
.filters__label{
  color: var(--muted);
}

/* inputy/selecty */
input, select, textarea{
  background: var(--card2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.45); }

/* tlačítka */
.btn{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}
.btn:hover, .btn:focus{
  background: var(--accent2);
  border-color: var(--accent2);
  color:#fff;
}
.btn--ghost{
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover, .btn--ghost:focus{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}

/* oddělovače */
hr, .line, .divider{ border-color: var(--line); }

/* lightbox pozadí tmavší */
.lightbox{ background: rgba(0,0,0,.85); }