/* KLS – Supplementary CSS for AJAX live search.
   The Elementor-generated <style id="loop-534"> is preserved/re-injected
   by kls.js after each innerHTML replace, so we do NOT need to duplicate
   those rules here.  This file only adds loading, no-results, overflow
   containment, and mobile safety rules that are NOT in the inline style. */

/* ── Neutralize all Elementor entrance/scroll animations in the catalog.
   On iOS Safari the compositor thread runs scroll independently of JS,
   so JS-based fixes are unreliable. CSS !important + animation:none is
   the only reliable way — @keyframes values beat !important on opacity,
   so we must stop the animation before it starts.                      ── */

/* Kill any entrance animation (fadeIn, slideIn, etc.) that Elementor
   triggers after removing .elementor-invisible. */
.katalogy-more .animated,
.katalogy-more [class*="elementor-animation-"] {
  -webkit-animation: none !important;
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Items that Elementor has queued to animate but not yet revealed. */
.katalogy-more .elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Elementor scroll-based motion effects (blur, translate, opacity ramps). */
.katalogy-more [class*="elementor-motion-effects"],
.katalogy-more .elementor-motion-effects-container {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* All Elementor elements inside the catalog — blanket block on entrance
   animations so Safari compositor never shows a half-animated state.
   Exclude our own kls-append-enter classes. */
.katalogy-more .elementor-element:not(.kls-append-enter):not(.kls-append-enter-active) {
  -webkit-animation: none !important;
  animation: none !important;
}

/* Parent section/container safety net for scroll-driven opacity. */
.elementor-section:has(.katalogy-more),
.elementor-container:has(.katalogy-more),
.elementor-widget:has(.katalogy-more),
.elementor-element:has(.katalogy-more),
.e-con:has(.katalogy-more),
.e-con-inner:has(.katalogy-more) {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* ── Explicit loop-item animation block (Safari compositor safety) ──
   Exclude .kls-append-enter so our own reveal animation still works. ── */
.katalogy-more .e-loop-item:not(.kls-append-enter):not(.kls-append-enter-active),
.katalogy-more .e-loop-item .e-con,
.katalogy-more .e-loop-item .e-con-inner,
.katalogy-more .e-loop-item .elementor-widget {
  -webkit-animation: none !important;
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── Loading overlay ── */
.elementor-loop-container.elementor-grid.kls-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ── No results ── */
.kls-no-results {
  width: 100%;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #d5d5d5;
  padding: 32px 18px;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.e-loop-item.kls-no-results-wrap {
  grid-column: 1 / -1;
  width: 100%;
}

/* ── Load more button ── */
.kls-load-more-wrap {
  margin-top: 20px;
}

.kls-load-more-btn.kls-is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ── Append reveal animation ── */
.elementor-loop-container.elementor-grid > .e-loop-item.kls-append-enter {
  opacity: 0;
  transform: translateY(10px);
}

.elementor-loop-container.elementor-grid > .e-loop-item.kls-append-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Overflow containment ── */
.elementor-loop-container.elementor-grid > .e-loop-item {
  min-width: 0;
}
.elementor-534 {
  max-width: 100%;
  box-sizing: border-box;
}
.elementor-534 .elementor-heading-title,
.elementor-534 .elementor-heading-title a,
.elementor-534 .elementor-widget-text-editor {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Fallback: icon reset for .elementor-view-default ──
   Elementor base sets font-size:50px, padding:.5em on stacked/framed.
   The inline style overrides these, but as an extra safety net: */
.elementor-534 .elementor-element.elementor-element-290513b .elementor-icon {
  font-size: 15px;
}
.elementor-534
  .elementor-element.elementor-element-290513b
  .elementor-icon
  svg {
  height: 15px;
  width: 15px;
}
.elementor-534
  .elementor-element.elementor-element-290513b.elementor-view-default
  .elementor-icon {
  padding: 0;
  border: 0 none;
  background: transparent;
  color: #ffffff;
  fill: #ffffff;
}
.elementor-534
  .elementor-element.elementor-element-290513b.elementor-view-default
  .elementor-icon
  svg {
  fill: #ffffff;
}

/* ── Mobile safety ── */
@media (max-width: 767px) {
  /* Prevent iOS auto-zoom on input focus (triggers at <16px) */
  #katalog-q,
  #katalog-q-home {
    font-size: 16px !important;
  }
  /* Bottom row wraps */
  .elementor-534 .elementor-element.elementor-element-2962988 {
    --flex-wrap: wrap;
  }
  /* City wrap full width */
  .elementor-534 .elementor-element.elementor-element-64d6ee8 {
    --width: 100%;
  }
  /* Force card visibility so Elementor scroll/motion effects cannot
     hide borders, dividers, or card content on mobile. */
  .katalogy-more .e-loop-item,
  .katalogy-more .e-loop-item .e-con,
  .katalogy-more .e-loop-item .e-con-inner,
  .katalogy-more .e-loop-item .elementor-widget,
  .katalogy-more .e-loop-item .elementor-divider,
  .katalogy-more .e-loop-item .elementor-divider-separator {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }
}

/* ── "Urceno pro - kategorie" filtr (dropdown) ──
   Cely radek renderuje shortcode [katalog_urceno_filter link_text link_url]:
   odkaz vlevo + maly box (select) vpravo. Filtrovani zaridi kls.js.
   Layout i styl jsou tady, aby to bylo 1:1 na vsech strankach (homepage
   i /vsechny-katalogy/) a nezaviselo to na krehkych Elementor element-id. */
.kls-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 0 0 18px;
}
/* Bez odkazu (fallback) - dropdown vycentrovany. */
.kls-filter-row--nolink {
  justify-content: center;
}

/* Odkaz vlevo - 1:1 jako titulky (Montserrat 24/500, bila, ikona + hover). */
.kls-filter-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  flex: 0 1 auto;
  min-width: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  color: #fff !important;
  text-decoration: none;
}
.kls-filter-link::after {
  content: "";
  flex: 0 0 auto;
  width: 0.72em;
  height: 0.72em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 64C35.8 64 0 99.8 0 144V432c0 44.2 35.8 80 80 80H368c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16H176c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 64C35.8 64 0 99.8 0 144V432c0 44.2 35.8 80 80 80H368c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16H176c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.85;
}
.kls-filter-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Maly box vpravo. */
.kls-urceno-wrap {
  flex: 0 0 auto;
  margin: 0;
}
.kls-urceno-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 220px;
  max-width: 300px;
  padding: 11px 42px 11px 16px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.2;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.28);
  border: 1px solid #666;
  border-radius: 3px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  transition: border-color 0.15s ease;
}
.kls-urceno-select:hover {
  border-color: rgba(255, 255, 255, 0.55);
}
.kls-urceno-select:focus {
  outline: none;
  border-color: hsl(var(--chart-2, 24 95% 53%));
}
.kls-urceno-select option {
  color: #fff;
  background: #171717;
}

/* ── Mobil: radek se zalomi a je vycentrovany (ne na kraji). ── */
@media (max-width: 767px) {
  .kls-filter-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }
  .kls-filter-link {
    justify-content: center;
    flex: 0 0 auto;
  }
  .kls-urceno-wrap {
    width: 100%;
  }
  .kls-urceno-select {
    width: 100%;
    min-width: 0;
    max-width: none;
    font-size: 16px; /* prevent iOS zoom */
  }
}