/* ============================================================
   ELEGANTNÍ MYTÍ - kompaktní okno souhlasu s cookies (12. 10. 2026)
   Jeden zdroj pro celý web; kopie v /cista-fasada/ a /cista-strecha/ jsou totožné.
   Třídy em-cmp-* (staré em-cc-* mají některé stránky přepsané inline – tady se nepoužívají).
   Vše position:fixed → žádný posun layoutu. Průhledná vrstva blokuje kliknutí, ne posouvání.
   ============================================================ */
.em-cmp{
  --cmp-navy: var(--navy-900, #0F2141);
  --cmp-blue: var(--blue-600, #2361AD);
  --cmp-muted: #4E5D74;
  --cmp-line: rgba(19,42,77,.14);
  --cmp-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --cmp-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-family: var(--cmp-body);
  color: var(--cmp-navy);
  -webkit-text-size-adjust: 100%;
}
.em-cmp[hidden]{ display: none !important; }
/* Vrstva přes stránku: kliknutí nepustí, posouvání ano. Desktop ztmaví na 40 %, mobil jen lehce. */
.em-cmp-shield{ position: fixed; inset: 0; z-index: 2147482999; background: rgba(0,0,0,.4); }
.em-cmp-box{
  position: fixed; z-index: 2147483000;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 48px));
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow: auto; overscroll-behavior: contain;
  padding: 28px 30px 16px;
  background: #fff;
  border: 1px solid var(--cmp-line);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  outline: none;
  animation: em-cmp-in .2s ease-out both;
}
.em-cmp-view[hidden]{ display: none !important; }
.em-cmp-stars{ color: #F5A81C; letter-spacing: 1px; }
.em-cmp-title{ margin: 0 0 10px; min-height: 1.25em; font: 800 22px/1.25 var(--cmp-head); color: var(--cmp-navy); letter-spacing: -.01em; }
.em-cmp-desc{ margin: 0; font-size: 16px; line-height: 1.5; color: #24344f; }
.em-cmp-desc a, .em-cmp-foot a{ color: var(--cmp-blue); text-decoration: underline; text-underline-offset: 2px; }
.em-cmp-actions{ display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
/* Obě volby totožné: stejná velikost, barva, váha (platný souhlas). */
.em-cmp-btn{
  min-height: 52px; padding: 12px 14px; width: 100%;
  border: 0; border-radius: 12px;
  background: var(--cmp-navy); color: #fff;
  font: 800 16px/1.2 var(--cmp-head);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.em-cmp-btn:hover{ background: #1d3560; }
.em-cmp-btn:focus-visible, .em-cmp-link:focus-visible, .em-cmp a:focus-visible, .em-cmp-cat input:focus-visible{
  outline: 3px solid var(--cmp-blue); outline-offset: 2px;
}
.em-cmp-link{
  display: block; margin: 4px auto 0; min-height: 44px; padding: 8px 14px;
  border: 0; background: none; cursor: pointer;
  font: 700 14px var(--cmp-body); color: var(--cmp-navy);
  text-decoration: underline; text-underline-offset: 2px;
}
.em-cmp-cats{ margin-top: 10px; border-top: 1px solid var(--cmp-line); }
.em-cmp-cat{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--cmp-line); cursor: pointer;
}
.em-cmp-cat--fixed{ cursor: default; }
.em-cmp-cat__text strong{ display: block; font: 800 14px var(--cmp-head); }
.em-cmp-cat__text small{ display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--cmp-muted); }
.em-cmp-cat input{ flex: none; width: 24px; height: 24px; accent-color: var(--cmp-blue); cursor: pointer; }
.em-cmp-always{ flex: none; font: 700 12px var(--cmp-body); color: var(--cmp-muted); }
.em-cmp-foot{ margin: 2px 0 0; font-size: 12.5px; text-align: center; }
.em-cmp-foot a{ color: var(--cmp-muted); }

.em-cmp-footer-link{
  display: inline-block; margin: 10px 0 0; min-height: 44px; padding: 10px 4px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: inherit; opacity: .85;
  text-decoration: underline; text-underline-offset: 2px;
}
.em-cmp-footer-link--float{
  position: fixed; left: 10px; bottom: 10px; z-index: 900; margin: 0; padding: 8px 12px; min-height: 40px;
  background: #fff; color: #0F2141; border-radius: 999px; box-shadow: 0 4px 14px rgba(15,33,65,.18);
}

/* Mobil: spodní list přes celou šířku, tlačítka v dosahu palce. */
@media (max-width: 560px){
  .em-cmp-shield{ background: rgba(0,0,0,.4); }
  .em-cmp-box{
    left: 0; right: 0; bottom: 0; top: auto; width: auto; transform: none;
    min-height: 55vh; min-height: 55dvh;
    max-height: 100vh; max-height: 100dvh;
    display: flex; flex-direction: column; justify-content: flex-end;
    border-radius: 22px 22px 0 0; border-width: 1px 0 0;
    padding: 24px 20px calc(10px + env(safe-area-inset-bottom));
    animation-name: em-cmp-up;
  }
}
@keyframes em-cmp-in{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes em-cmp-up{ from{ transform: translateY(30px); opacity: 0; } to{ transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .em-cmp-box{ animation: none; } }

/* ============================================================
   Landing pages: výrazný spodní pruh (~čtvrtina výšky), bez ztmavení a bez blokování kliknutí.
   ============================================================ */
html.em-cmp-bar-open body{ padding-bottom: var(--em-cmp-bar-h, 0px); }
.em-cmp--bar .em-cmp-box{
  left: 0; right: 0; bottom: 0; top: auto; transform: none;
  width: auto; min-height: 25vh; max-height: 75vh; max-height: 75dvh;
  display: flex; flex-direction: column; justify-content: center;
  border-radius: 20px 20px 0 0; border-width: 1px 0 0;
  padding: 18px max(20px, calc((100vw - 760px) / 2)) calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(6,18,40,.22);
  animation-name: em-cmp-up;
}
.em-cmp--bar .em-cmp-title{ font-size: 20px; margin-bottom: 6px; }
.em-cmp--bar .em-cmp-desc{ font-size: 15px; line-height: 1.45; }
.em-cmp--bar .em-cmp-actions{ grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.em-cmp--bar .em-cmp-btn{ min-height: 48px; }
.em-cmp--bar [data-view="main"] .em-cmp-link, .em-cmp--bar [data-view="main"] .em-cmp-foot{ display: inline-block; margin: 4px 8px 0 0; vertical-align: middle; }
.em-cmp--bar [data-view="main"] .em-cmp-link{ padding: 8px 6px; }
.em-cmp--bar [data-view="main"]{ text-align: left; }
@media (max-width: 560px){
  .em-cmp--bar .em-cmp-box{ min-height: 25vh; padding: 14px 16px calc(6px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .em-cmp--bar .em-cmp-title{ font-size: 18px; }
  .em-cmp--bar .em-cmp-desc{ font-size: 14.5px; line-height: 1.4; }
  .em-cmp--bar .em-cmp-actions{ margin-top: 10px; gap: 8px; }
  .em-cmp--bar .em-cmp-btn{ font-size: 15px; padding: 10px 8px; }
}

/* ============================================================
   12. 10. 2026 odpoledne (Petr): Odmítnout vlevo (navy), Přijmout vpravo v oranžové hlavního CTA
   („Získat kalkulaci se slevou“ / „Chci nezávaznou kalkulaci“), stejně velká; tlačítka vedle sebe všude.
   ============================================================ */
.em-cmp .em-cmp-actions{ grid-template-columns: 1fr 1fr; }
.em-cmp-btn--accept{ background: linear-gradient(#ffca68, #f9b233); color: #132642; box-shadow: inset 0 -3px 0 #ca8a20; }
.em-cmp-btn--accept:hover{ background: linear-gradient(#ffd27a, #ffbf47); }
.em-cmp-btn--reject{ background: var(--cmp-navy); color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.em-cmp-short{ display: none; }
@media (max-width: 560px){
  .em-cmp .em-cmp-actions{ grid-template-columns: 1fr 1fr; }
  /* Mobilní pruh na landing page: kompaktní (cíl ≤ 20 % výšky 390×844) */
  .em-cmp--bar .em-cmp-box{ min-height: 0; padding: 10px 14px calc(4px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; }
  .em-cmp--bar [data-view="main"] .em-cmp-title, .em-cmp--bar [data-view="main"] .em-cmp-desc{ display: none; }
  .em-cmp--bar .em-cmp-short{ display: block; margin: 0; min-height: 1.35em; font-size: 14px; line-height: 1.35; color: #24344f; }
  .em-cmp--bar .em-cmp-actions{ margin-top: 8px; gap: 8px; }
  .em-cmp--bar .em-cmp-btn{ min-height: 44px; padding: 8px; font-size: 15px; border-radius: 10px; }
  .em-cmp--bar [data-view="main"] .em-cmp-link, .em-cmp--bar [data-view="main"] .em-cmp-foot{ font-size: 12.5px; margin: 0 10px 0 0; min-height: 32px; padding: 6px 2px; }
  .em-cmp--bar [data-view="main"] .em-cmp-foot a{ display: inline-block; padding: 6px 0; }
}