/* ═══════════════════════════════════════════════════════════════════════
   nav-shared.css — sdílený vzhled hamburger menu, slide-in panelu a
   jazykového menu. Používá se na VŠECH stránkách TapTrip.

   Proč tenhle soubor existuje: než vznikl, měla každá HTML stránka
   vlastní kopii téhle CSS (15×) a oprava se musela dělat ručně na každé
   zvlášť — což se opakovaně nedařilo (viz audit 2026-08-08: reference.html
   mělo display:none místo flex, kontakt.html a obchodni-podminky.html
   měly position:static místo relative u jazykového menu). Sjednocením
   do jednoho souboru se tahle třída chyb stává strukturálně nemožnou.

   Očekávaný HTML markup (stejný na každé stránce):
     <nav>
       <a href="index.html" class="nav-logo">...</a>
       <button class="nav-hamburger" id="nav-hamburger" onclick="toggleMenu()" aria-label="Menu" aria-expanded="false">
         <span class="hb-line"></span><span class="hb-line"></span><span class="hb-line"></span>
       </button>
     </nav>
     <div class="nav-overlay" id="nav-overlay" onclick="closeMenu()"></div>
     <aside class="nav-panel" id="nav-panel" aria-hidden="true">
       <ul class="nav-links" id="nav-links">...</ul>
       <div class="lang-dropdown" id="lang-dropdown">
         <button class="lang-current" onclick="toggleLangDropdown(event)">...</button>
         <div class="lang-menu" id="lang-menu">...</div>
       </div>
     </aside>

   Chování (otevírání/zavírání) zajišťuje nav-shared.js — viz ten soubor.

   MIMO tento soubor (záměrně, jsou stránkové/specifické):
   - `.nav { ... }`, `.nav-logo { ... }`, `.nav.scrolled { ... }` — základní
     vzhled lišty (výška, blur pozadí při scrollu) — drobné formátovací
     rozdíly mezi stránkami, ale žádný známý bug; kandidát na budoucí
     sjednocení, ne teď.
   - barevné přebarvení patičky pro tmavý footer (.footer-logo, .footer-links,
     .footer-bottom) — fyzicky bývalo vedle tohoto bloku ve zdroji, ale
     patří obsahově k patičce, ne k navigaci — zůstává na každé stránce.
   ═══════════════════════════════════════════════════════════════════════ */
.nav-hamburger{display:flex !important;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:transparent;border:none;padding:0;cursor:pointer;position:relative;}
.nav-hamburger .hb-line{display:block;width:26px;height:2px;background:#2A251E;border-radius:2px;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s ease;}
body.menu-open .nav-hamburger .hb-line:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.menu-open .nav-hamburger .hb-line:nth-child(2){opacity:0;}
body.menu-open .nav-hamburger .hb-line:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
body.menu-open nav{z-index:1400;}
body.menu-open{overflow:hidden;}
.nav-overlay{position:fixed;inset:0;background:rgba(26,20,14,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s;z-index:1200;cursor:pointer;}
body.menu-open .nav-overlay{opacity:1;visibility:visible;transition:opacity .35s cubic-bezier(.22,1,.36,1);}
.nav-panel{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(400px,92vw);box-sizing:border-box;background:#FBF8F2;box-shadow:-24px 0 60px rgba(26,20,14,.18);z-index:1300;display:flex;flex-direction:column;padding:clamp(88px,12vh,116px) clamp(32px,11%,56px) 44px;overflow-y:auto;transform:translateX(100%);transition:transform .36s cubic-bezier(.22,1,.36,1);will-change:transform;}
body.menu-open .nav-panel{transform:translateX(0);}
.nav-panel .nav-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;padding:0;list-style:none;width:100%;position:static;top:auto;left:auto;right:auto;background:none;backdrop-filter:none;border:none;}
.nav-panel .nav-links li{width:100%;}
.nav-panel .nav-links a{display:block;font-family:'Fraunces','Playfair Display',Georgia,serif;font-size:clamp(22px,6.5vw,30px);font-weight:500;letter-spacing:-.01em;text-transform:none;color:#2A251E;text-decoration:none;padding:9px 0;overflow-wrap:break-word;transition:color .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1);}
.nav-panel .nav-links a::after{display:none;}
.nav-panel .nav-links a:hover{color:#E8A857;transform:translateX(6px);}
.nav-panel .nav-links a.is-current{color:#E8A857;}
.nav-panel .lang-dropdown{display:block;position:relative;margin-top:auto;padding-top:26px;border-top:1px solid rgba(42,37,30,.14);}
.nav-panel .lang-current{display:flex !important;width:100%;justify-content:space-between;border:1px solid rgba(42,37,30,.18);border-radius:4px;padding:11px 14px;font-size:11px;letter-spacing:1.8px;color:#2A251E;background:transparent;cursor:pointer;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:700;}
.nav-panel .lang-current:hover{border-color:rgba(232,168,87,.55);color:#C88B40;}
.nav-panel .lang-dropdown.open .lang-current{border-color:rgba(232,168,87,.55);color:#C88B40;}
.nav-panel .lang-dropdown.open .lang-current .lang-arrow{transform:rotate(180deg);}
.nav-panel .lang-menu{position:absolute;bottom:calc(100% + 6px);top:auto;left:0;right:0;width:auto;background:#FBF8F2;border:1px solid rgba(42,37,30,.14);border-radius:4px;box-shadow:0 -10px 36px rgba(26,20,14,.13);padding:5px;display:flex;flex-direction:column;gap:2px;max-height:none;overflow:visible;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;}
.nav-panel .lang-dropdown.open .lang-menu{opacity:1;visibility:visible;pointer-events:all;transform:translateY(0);transition:opacity .2s ease,transform .2s ease;}
.nav-panel .lang-option{width:100%;padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:1.8px;border-radius:3px;color:#756B5E;background:none;border:none;cursor:pointer;font-family:'Plus Jakarta Sans','Inter',sans-serif;text-align:left;}
.nav-panel .lang-option:hover{color:#2A251E;background:#F0E8DC;}
.nav-panel .lang-option.active{color:var(--accent-text);}
@media (max-width:500px){.nav-panel{padding-top:86px;}.nav-panel .nav-links a{font-size:clamp(20px,7vw,26px);}}

/* ── Cookie panel (GDPR souhlas před spuštěním Google Analytics) ──
   Markup (stejný na každé stránce, hned za <body>):
     <div class="cookie-consent" id="cookie-consent" role="dialog" ...>
       <div class="cookie-consent-karta">
         <h2 class="cookie-consent-nadpis" data-t="consent_title">...</h2>
         <p class="cookie-consent-text" data-t="consent_text">...</p>
         <a class="cookie-consent-vice" href="obchodni-podminky.html#s6" data-t="consent_more">...</a>
         <div class="cookie-consent-btns">
           <button id="cookie-consent-decline" data-t="consent_decline">...</button>
           <button class="cookie-consent-accept" id="cookie-consent-accept" data-t="consent_accept">...</button>
         </div>
       </div>
     </div>
   Zobrazení/skrytí a GA řídí cookie-consent.js.

   PROČ PANEL, NE TENKÝ PRUH: tenký proužek u spodní hrany lidi přehlédnou
   nebo odklikají naslepo, takže souhlas není informovaný. Panel přes spodní
   část obrazovky s nadpisem, vysvětlením a dvěma stejně velkými tlačítky je
   dnes běžný standard — je vidět, co se schvaluje, a odmítnutí je stejně
   snadné jako přijetí (což GDPR vyžaduje).

   Ztmavení za panelem NEBLOKUJE stránku (pointer-events:none) — jen upozorní.
   Kdo chce nejdřív číst obsah, může; volba se tím nevynucuje. */
.cookie-consent{position:fixed;inset:0;z-index:1500;display:flex;align-items:flex-end;justify-content:center;background:rgba(26,20,14,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s cubic-bezier(.22,1,.36,1),visibility 0s linear .38s,background .38s ease,backdrop-filter .38s ease;}
.cookie-consent.open{opacity:1;visibility:visible;background:rgba(26,20,14,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .38s cubic-bezier(.22,1,.36,1),background .38s ease,backdrop-filter .38s ease;}
.cookie-consent-karta{pointer-events:auto;width:100%;max-width:560px;box-sizing:border-box;background:#FBF8F2;border:1px solid rgba(42,37,30,.12);border-bottom:none;border-radius:22px 22px 0 0;box-shadow:0 -18px 50px rgba(26,20,14,.22);padding:30px clamp(22px,5vw,38px) calc(26px + env(safe-area-inset-bottom,0px));transform:translateY(102%);transition:transform .42s cubic-bezier(.22,1,.36,1);}
.cookie-consent.open .cookie-consent-karta{transform:translateY(0);}
.cookie-consent-nadpis{font-family:'Fraunces','Playfair Display',Georgia,serif;font-size:clamp(21px,4.6vw,25px);font-weight:700;letter-spacing:-.01em;color:#2A251E;margin:0 0 10px;line-height:1.25;}
.cookie-consent-text{margin:0;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:14.5px;line-height:1.6;color:#4F463A;}
.cookie-consent-vice{display:inline-block;margin-top:10px;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:13px;font-weight:600;color:#96601A;text-decoration:underline;text-underline-offset:3px;}
.cookie-consent-vice:hover{color:#B9762A;}
.cookie-consent-btns{display:flex;gap:12px;margin-top:22px;}
.cookie-consent-btns button{flex:1 1 0;min-height:50px;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.2px;border-radius:999px;padding:13px 20px;cursor:pointer;transition:background .2s ease,border-color .2s ease;}
#cookie-consent-decline{background:transparent;border:1.5px solid rgba(42,37,30,.24);color:#2A251E;}
#cookie-consent-decline:hover{border-color:rgba(42,37,30,.45);background:rgba(42,37,30,.04);}
.cookie-consent-accept{background:#E8A857;border:1.5px solid #E8A857;color:#2A251E;}
.cookie-consent-accept:hover{background:#D6913C;border-color:#D6913C;}
@media (min-width:620px){.cookie-consent{padding:0 0 26px;}.cookie-consent-karta{border-bottom:1px solid rgba(42,37,30,.12);border-radius:22px;box-shadow:0 18px 54px rgba(26,20,14,.24);transform:translateY(calc(100% + 40px));}}
@media (max-width:420px){.cookie-consent-btns{flex-direction:column-reverse;}}

/* ═══ ZVÝRAZNĚNÉ ODZNAKY PŘES FOTKU (Pivo, Drinky, Studenti) ═══════════════
   Markup kreslí ttOdznakyHtml() v nav-shared.js — stejná funkce pro kartu
   na městské stránce, seznam u mapy i detail podniku, aby všude vypadaly
   stejně. Pozicuje se OBAL: podnik jich může mít víc (Dva Kohouti mají
   Pivo i Studenti) a s vlastní absolutní pozicí u každého by se překryly. */
.tt-odznaky {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}
.tt-odznak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  background: rgba(24,20,14,0.82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #E8A857;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.tt-odznak svg { width: 13px; height: 13px; flex-shrink: 0; }
/* Karta na městské stránce: vlevo dole na fotce, vpravo nahoře sedí typ podniku. */
.venue-card-odznaky { left: 12px; bottom: 12px; right: 12px; }
/* Seznam u mapy: na desktopu je fotka jen 96x96 náhled vedle textu, odznak
   by přes ni ležel jako přes celou kartu. Ukazuje se proto až od šířky, kde
   fotka vyplní kartu celou — to je stejný breakpoint, na kterém index.html
   přepíná .map-list .vc-photo na `position: absolute; inset: 0`. */
.vc-odznaky { display: none; }
@media (max-width: 768px) {
  /* Nahoře pod cenovým odznakem, ne dole: dole na kartě sedí název, adresa
     a stav otevřeno/zavřeno, přes které by odznak ležel. */
  .map-list .vc-odznaky { display: flex; left: 14px; top: 58px; right: 90px; }
}
/* Detail podniku: vlevo nahoře — dole už sedí typ a název podniku. */
.vd-odznaky { left: 20px; top: 16px; right: 68px; }
@media (max-width: 640px) {
  .venue-card-odznaky { left: 10px; bottom: 10px; right: 10px; }
  .vd-odznaky { left: 14px; top: 12px; right: 62px; }
  .tt-odznak { height: 24px; font-size: 11px; padding: 0 10px 0 8px; }
}

/* ═══ HLEDÁNÍ + „ZOBRAZIT NA MAPĚ" (mesto-mapa.js, vlozHledaniAMapu) ═══════
   Stejná řeč jako vyhledávání v appce: kulatá pilulka s lupou vlevo,
   křížkem na smazání vpravo. Tlačítko vedle ní skočí rovnou na mapu níž na
   stránce — dřív k ní vedlo jen dlouhé scrollování přes celou mřížku karet. */
.mh-radek {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.mh-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.mh-search > .mf-ic {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: #96601A;
  pointer-events: none;
}
.mh-search input {
  width: 100%;
  height: 44px;
  padding: 0 40px;
  border-radius: 999px;
  border: 1px solid rgba(42,37,30,0.14);
  background: #FFFDF8;
  color: #2A251E;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-size: 14.5px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mh-search input::placeholder { color: #9A8F80; font-style: italic; }
/* Prohlížeč přidává k type="search" vlastní křížek — máme svůj
   (.mh-search-clear), takže by tam byly dva vedle sebe. */
.mh-search input::-webkit-search-cancel-button,
.mh-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.mh-search input:focus { border-color: #E8A857; box-shadow: 0 0 0 3px rgba(232,168,87,0.24); }
.mh-search-clear {
  position: absolute;
  right: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #8A7F6E;
  cursor: pointer;
}
/* `display:flex` výš má vyšší specificitu než prohlížečovo výchozí pravidlo
   pro [hidden], takže by se křížek zobrazoval i se schovaným atributem —
   stejná past jako u .mesto-mapa-prazdno[hidden] o kus výš. */
.mh-search-clear[hidden] { display: none; }
.mh-search-clear:hover { background: rgba(42,37,30,0.06); }
.mh-search-clear .mf-ic { width: 14px; height: 14px; color: inherit; }

.mh-mapa-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(42,37,30,0.14);
  background: #2A251E;
  color: #FBF8F2;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .12s ease, background .18s ease;
}
.mh-mapa-btn .mf-ic { width: 16px; height: 16px; color: #E8A857; }
.mh-mapa-btn:hover { background: #3A332A; }
.mh-mapa-btn:active { transform: scale(0.96); }

/* Na mobilu jen kulaté tlačítko s ikonou — text by s hledáním soupeřil
   o už tak úzký prostor. */
@media (max-width: 640px) {
  .mh-mapa-btn span { display: none; }
  .mh-mapa-btn { width: 44px; padding: 0; justify-content: center; }
}

/* ═══ MĚSTSKÁ STRÁNKA: řada filtrů a mapa (mesto-mapa.js) ═════════════════
   Stejná řeč jako rychlé filtry v appce: vodorovná řada pilulek, která se
   na mobilu posouvá do strany místo aby se lámala do tří řádků. */
.mesto-filtry {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
}
.mesto-filtry:empty { display: none; }
.mf-rada {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 3px 1px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mf-rada::-webkit-scrollbar { display: none; }
.mf-pilulka {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 15px 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(42,37,30,0.14);
  background: #FFFDF8;
  color: #2A251E;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.mf-pilulka:hover { border-color: rgba(42,37,30,0.34); }
.mf-pilulka .mf-ic { width: 15px; height: 15px; flex-shrink: 0; color: #96601A; }
.mf-pilulka.je-aktivni {
  background: #2A251E;
  border-color: #2A251E;
  color: #FBF8F2;
}
.mf-pilulka.je-aktivni .mf-ic { color: #E8A857; }
/* Volba, po které by nezbyl žádný podnik — ať je vidět dřív než po kliknutí. */
.mf-pilulka.je-prazdna { opacity: 0.38; }
.mf-zrusit {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 6px 2px;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-size: 13px;
  font-weight: 650;
  color: #96601A;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mf-zrusit:hover { color: #B9762A; }

.mesto-mapa-obal { padding: 0 clamp(20px, 6vw, 90px) clamp(56px, 8vw, 96px); }
.mesto-mapa-ram {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(42,37,30,0.12);
  box-shadow: 0 18px 44px rgba(42,31,20,0.08);
}
#mesto-mapa { width: 100%; height: clamp(340px, 46vh, 520px); background: #F2EDE4; }
/* POZOR na poradi: `display: flex` niz prebiji vychozi [hidden] { display: none },
   takze se prekryv ukazoval i nad plnou mapou. Vlastni pravidlo pro [hidden]
   to sroví — mene prekvapive nez schovavat pres tridu. */
.mesto-mapa-prazdno[hidden] { display: none; }
.mesto-mapa-prazdno {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: rgba(251,248,242,0.86);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #6B6154;
}
@media (max-width: 640px) {
  .mesto-filtry { margin-bottom: 20px; }
  #mesto-mapa { height: 320px; }
}

/* Shluk značek na mapě města — stejný vzhled jako na index.html, jen odsud,
   protože městské stránky vlastní mapovou sekci do teď neměly. */
.taptrip-cluster {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F0C48A, #E8A857 70%);
  color: #1A140E;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-weight: 700;
  border: 2px solid #FFFDF8;
  box-shadow: 0 4px 12px rgba(42,31,20,0.22), 0 0 0 6px rgba(232,168,87,0.18);
  transition: box-shadow 0.2s ease;
}
.taptrip-cluster span { line-height: 1; }
.taptrip-cluster.cl-s { font-size: 13px; }
.taptrip-cluster.cl-m { font-size: 14px; transform: scale(1.08); }
.taptrip-cluster.cl-l { font-size: 15px; transform: scale(1.16); }
.marker-cluster:hover .taptrip-cluster {
  box-shadow: 0 6px 18px rgba(42,31,20,0.30), 0 0 0 8px rgba(232,168,87,0.26);
}
