/* ==========================================================================
   Klik za Termin — "Alive" motion system
   Loads LAST (after klik-redesign.css). Pure additive layer: scroll
   choreography, marquees, the compact step row, hero orchestration and
   micro-interactions. Everything animates transform/opacity only and is
   disabled under prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

:root {
  --kzt-ease-out: cubic-bezier(0.22, 0.61, 0.21, 1);
  --kzt-ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --kzt-stack-top: 88px;              /* kept for potential sticky layouts */
  --kzt-glow: rgba(232, 115, 12, 0.14);
}

/* --------------------------------------------------------------------------
   0. Page atmosphere: film grain + scroll progress
   -------------------------------------------------------------------------- */
.kzt-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kzt-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 10001;
  pointer-events: none;
  background: linear-gradient(90deg, var(--klik-accent, #E8730C), #FFB25E);
  transform: scaleX(var(--kzt-progress, 0));
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   1. Header: slide away on scroll down, return on scroll up
   -------------------------------------------------------------------------- */
.header-area {
  transition: transform 0.45s var(--kzt-ease-out), background-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.header-area.kzt-header-hidden {
  transform: translateY(-102%) !important;
}

/* soft entrance instead of the removed AOS fade-down */
@keyframes kztHeaderIn {
  from { transform: translateY(-24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.header-area { animation: kztHeaderIn 0.7s var(--kzt-ease-out); }

/* --------------------------------------------------------------------------
   2. Hero orchestration
   -------------------------------------------------------------------------- */
/* Word-by-word headline reveal */
.kzt-hero-title { overflow: visible; }

.kzt-hero-title .kzt-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
  animation: kztWordIn 0.7s var(--kzt-ease-out) both;
  animation-delay: calc(140ms + var(--w, 0) * 60ms);
}

@keyframes kztWordIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Highlighted last word: brand orange + hand-drawn underline that draws
   itself once the words have landed. Beats .color-white * !important. */
.kzt-hero-title .kzt-hl {
  position: relative;
  font-style: normal;
  color: var(--klik-accent, #E8730C) !important;
}

.kzt-hero-title .kzt-hl svg {
  position: absolute;
  left: -2%;
  bottom: -0.22em;
  width: 104%;
  height: 0.32em;
  overflow: visible;
}

.kzt-hero-title .kzt-hl svg path {
  fill: none;
  stroke: var(--klik-accent, #E8730C);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: kztUnderline 0.9s var(--kzt-ease-out) forwards;
  animation-delay: calc(300ms + var(--kzt-words, 8) * 60ms);
}

@keyframes kztUnderline { to { stroke-dashoffset: 0; } }

/* Subtitle + search rise after the headline */
.hero-banner-2 .banner-content .text {
  opacity: 0;
  animation: kztRiseIn 0.7s var(--kzt-ease-out) 0.55s both;
}

.hero-banner-2 .banner-filter-form {
  opacity: 0;
  animation: kztRiseIn 0.75s var(--kzt-ease-out) 0.72s both;
}

@keyframes kztRiseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Search pill: crisp edge, no glow — the pulsing ring read as blur on
   phones ("Blur or glowing around button and it looks not clear"). */
.hero-banner-2 .banner-filter-form .form-wrapper {
  position: relative;
  border: 1px solid var(--klik-border, #363A43);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.hero-banner-2 .banner-filter-form .form-wrapper:focus-within {
  border-color: var(--klik-accent, #E8730C);
  box-shadow: 0 0 0 2px rgba(232, 115, 12, 0.28), 0 18px 40px -24px rgba(0, 0, 0, 0.6);
}

/* Each field is one piece: the icon lives INSIDE the rounded box and the
   text starts after it. flex-wrap must be forced off — Bootstrap's
   .input-group wraps, which threw the input onto its own line below the
   icon (the "offset icons" on desktop, escaped placeholders on mobile).
   The !important border/padding beat responsive.css's mobile dashed style. */
.hero-banner .banner-filter-form .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 11px;
  height: 48px;
  padding: 0 16px !important;
  border-radius: 13px;
  background: var(--klik-surface-2, #262930);
  border: 1px solid var(--klik-border, #363A43) !important;
  transition: border-color 0.25s ease;
}

.hero-banner .banner-filter-form .input-group:focus-within {
  border-color: var(--klik-accent, #E8730C) !important;
}

.hero-banner .banner-filter-form .input-group label {
  position: static;
  margin: 0;
  flex: none;
}

.hero-banner .banner-filter-form .input-group .form-control {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  line-height: normal;
  padding-inline-start: 0;
}

.hero-banner .banner-filter-form .input-group .vr { display: none; }

@media (max-width: 767.98px) {
  .hero-banner .banner-filter-form .input-group { margin: 0 0 12px !important; }
}

/* Trust chips under the search */
.kzt-hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 26px;
  opacity: 0;
  animation: kztRiseIn 0.7s var(--kzt-ease-out) 0.95s both;
}

.kzt-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--klik-text, #EEF0F4);
  opacity: 0.92;
}

.kzt-hero-trust svg { color: var(--jade, #54B98E); flex: none; }

/* Floating booking-notification chips (decorative, desktop only) */
.kzt-hero-chip {
  position: absolute;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 11px;
  padding: 12px 18px 12px 12px;
  border-radius: 16px;
  background: rgba(21, 23, 28, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.65);
  opacity: 0;
  animation: kztPopIn 0.6s var(--kzt-ease-spring) both,
             kztFloat var(--kzt-float-dur, 7s) ease-in-out var(--kzt-float-delay, 1.9s) infinite;
}

.kzt-hero-chip .kzt-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--klik-accent, #E8730C), #A34F06);
  color: #fff;
  font-size: 17px;
  flex: none;
}

.kzt-hero-chip .kzt-chip-name {
  display: block;
  font-family: var(--klik-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--klik-text, #EEF0F4);
  line-height: 1.25;
  white-space: nowrap;
}

.kzt-hero-chip .kzt-chip-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--klik-mono);
  font-size: 12px;
  color: var(--klik-muted, #9FA5B1);
  white-space: nowrap;
}

.kzt-hero-chip .kzt-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade, #54B98E);
  box-shadow: 0 0 0 0 rgba(84, 185, 142, 0.5);
  animation: kztDotPing 2.4s ease-out infinite;
}

@keyframes kztDotPing {
  0%   { box-shadow: 0 0 0 0 rgba(84, 185, 142, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(84, 185, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(84, 185, 142, 0); }
}

@keyframes kztPopIn {
  from { opacity: 0; transform: translate(var(--kzt-px, 0px), calc(var(--kzt-py, 0px) + 18px)) scale(0.85); }
  to   { opacity: 1; transform: translate(var(--kzt-px, 0px), var(--kzt-py, 0px)) scale(1); }
}

@keyframes kztFloat {
  0%, 100% { transform: translate(var(--kzt-px, 0px), var(--kzt-py, 0px)); }
  50%      { transform: translate(var(--kzt-px, 0px), calc(var(--kzt-py, 0px) - 10px)); }
}

/* chips need real side margins around the 880px content column, so they only
   appear from 1400px up; the container stacks above them just in case */
.hero-banner-2 .container { position: relative; z-index: 5; }

@media (min-width: 1400px) {
  .kzt-hero-chip { display: flex; }
  .kzt-chip-1 { left: 3.5%; top: 30%; animation-delay: 1.05s, 1.9s; }
  .kzt-chip-2 { left: 6%;   bottom: 14%; animation-delay: 1.25s, 2.3s; --kzt-float-dur: 8s; }
  .kzt-chip-3 { right: 4%;  top: 20%; animation-delay: 1.45s, 2.7s; --kzt-float-dur: 9s; }
}

/* The signature booking card also breathes now */
@media (min-width: 1201px) {
  .klik-hero-card {
    animation: kztPopIn 0.65s var(--kzt-ease-spring) 1.2s both,
               kztFloat 8.5s ease-in-out 2.1s infinite;
  }
}

/* Scroll cue */
.kzt-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--klik-muted, #9FA5B1);
  opacity: 0;
  animation: kztCueIn 0.8s ease 1.7s both;
}

.kzt-scroll-cue:hover { color: var(--klik-accent, #E8730C); }

.kzt-scroll-cue i {
  font-size: 18px;
  animation: kztCueBob 1.8s ease-in-out 2.4s infinite;
}

@keyframes kztCueIn { to { opacity: 0.85; } }

@keyframes kztCueBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

@media (min-width: 768px) and (min-height: 640px) {
  .kzt-scroll-cue { display: flex; }
}

/* --------------------------------------------------------------------------
   3. Marquees — the sliding text
   -------------------------------------------------------------------------- */
.kzt-marquee-band {
  position: relative;
  overflow: hidden;
  padding: 34px 0 30px;
  margin-top: -6px;
}

.kzt-marquee-band .kzt-marquee-tilt {
  transform: rotate(-1.3deg);
  border-top: 1px solid var(--klik-border, #363A43);
  border-bottom: 1px solid var(--klik-border, #363A43);
  background: linear-gradient(90deg, rgba(232, 115, 12, 0.05), transparent 30%, transparent 70%, rgba(232, 115, 12, 0.05));
  padding: 14px 0;
  width: 104%;
  margin-left: -2%;
}

.kzt-mq-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.kzt-mq-row + .kzt-mq-row { margin-top: 8px; }

.kzt-mq-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: kztMarquee var(--kzt-mq-dur, 42s) linear infinite;
}

.kzt-mq-row:hover .kzt-mq-track { animation-play-state: paused; }

.kzt-mq-reverse .kzt-mq-track { animation-direction: reverse; }

/* --kzt-shift must equal exactly one content-copy's fraction of the track
   (e.g. 4 copies -> -25%) so the loop restart is invisible; copy counts are
   sized so one copy plus any viewport never outruns the track (ultrawides). */
@keyframes kztMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--kzt-shift, -50%)); }
}

.kzt-mq-track > * { flex: none; }

.kzt-mq-item {
  font-family: var(--klik-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--klik-text, #EEF0F4) !important;
  padding: 2px 6px;
  transition: color 0.25s ease, transform 0.25s ease;
}

a.kzt-mq-item:hover {
  color: var(--klik-accent, #E8730C) !important;
  transform: translateY(-2px);
}

.kzt-mq-sep {
  color: var(--klik-accent, #E8730C);
  font-size: 15px;
  margin: 0 20px;
  opacity: 0.85;
}

.kzt-mq-cities .kzt-mq-item {
  font-size: 17px;
  font-family: var(--klik-mono);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--klik-muted, #9FA5B1) !important;
}

.kzt-mq-cities .kzt-mq-sep { font-size: 11px; margin: 0 16px; opacity: 0.6; }

@media (max-width: 767.98px) {
  .kzt-mq-item { font-size: 21px; }
  .kzt-mq-cities .kzt-mq-item { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   4. Steps: four compact inline cards (owner's call - minimal vertical space)
   -------------------------------------------------------------------------- */
.kzt-steps-area {
  position: relative;
  padding-top: 70px;
  padding-bottom: 70px;
}

.kzt-steps-area .kzt-steps-sub {
  color: var(--klik-muted, #9FA5B1);
  margin-top: 10px;
}

.kzt-steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.kzt-step-mini {
  padding: 22px 22px 24px;
  border-radius: 18px;
  background:
    radial-gradient(120% 160% at 88% 0%, rgba(232, 115, 12, 0.08), transparent 46%),
    linear-gradient(160deg, #1F2127 0%, #16181D 68%);
  border: 1px solid var(--klik-border, #363A43);
  transition: transform 0.3s var(--kzt-ease-spring), border-color 0.3s ease, box-shadow 0.3s ease;
}

.kzt-step-mini:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 115, 12, 0.5);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.8);
}

.kzt-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.kzt-mini-num {
  font-family: var(--klik-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--klik-accent, #E8730C);
  opacity: 0.9;
}

.kzt-mini-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(232, 115, 12, 0.09);
  border: 1px solid rgba(232, 115, 12, 0.16);
}

.kzt-mini-art img { max-width: 70%; max-height: 70%; }

.kzt-step-mini h3 {
  font-size: 17.5px;
  margin-bottom: 8px;
  color: var(--klik-text, #EEF0F4);
}

.kzt-step-mini p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  color: var(--klik-muted, #9FA5B1);
}

@media (max-width: 991.98px) {
  .kzt-steps-area { padding-top: 56px; padding-bottom: 56px; }
  .kzt-steps-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .kzt-step-mini { padding: 18px 16px 20px; border-radius: 15px; }
  .kzt-mini-num { font-size: 30px; }
  .kzt-mini-art { width: 38px; height: 38px; border-radius: 11px; }
  .kzt-step-mini h3 { font-size: 15.5px; }
  .kzt-step-mini p { font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   5. Sliders & cards: glow, lift, zoom
   -------------------------------------------------------------------------- */
/* continuous category drift needs a linear wrapper transition; scoped to the
   looped homepage belt so stepped sliders elsewhere keep their easing */
.category-slider[data-swiper-loop="true"] .swiper-wrapper { transition-timing-function: linear !important; }

.product-default {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--kzt-ease-spring), border-color 0.3s ease, box-shadow 0.35s ease;
}

.product-default::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(260px circle at var(--kzt-mx, 50%) var(--kzt-my, 50%), var(--kzt-glow), transparent 65%);
}

@media (hover: hover) and (pointer: fine) {
  .product-default:hover {
    transform: translateY(-7px);
    border-color: rgba(232, 115, 12, 0.55) !important;
    box-shadow: 0 26px 54px -26px rgba(0, 0, 0, 0.8);
  }

  .product-default:hover::after { opacity: 1; }
}

.product-default .product-img img { transition: transform 0.6s var(--kzt-ease-out); }
.product-default:hover .product-img img { transform: scale(1.06); }

/* the link fills its slide so the whole card stays clickable */
.category-area .swiper-slide > a { display: block; }

/* category photo tiles: same treatment */
.category-area .cat-photo-card {
  overflow: hidden;
  transition: transform 0.35s var(--kzt-ease-spring), border-color 0.3s ease, box-shadow 0.35s ease;
  background-size: cover;
  background-position: center;
}

@media (hover: hover) and (pointer: fine) {
  .category-area .swiper-slide a:hover .cat-photo-card {
    transform: translateY(-7px) scale(1.015);
    border-color: rgba(232, 115, 12, 0.6) !important;
    box-shadow: 0 26px 54px -26px rgba(0, 0, 0, 0.85);
  }
}

/* slider nav buttons come alive */
.slider-navigation .slider-btn {
  transition: transform 0.25s var(--kzt-ease-spring), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.slider-navigation .slider-btn:hover {
  transform: scale(1.12);
  background: var(--klik-accent, #E8730C) !important;
  border-color: var(--klik-accent, #E8730C) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   6. Buttons: shine sweep + arrow nudge
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-gradient,
.btn-outline-2 {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--kzt-ease-spring), box-shadow 0.3s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-primary::before,
.btn-gradient::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -30%;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg) translateX(-140%);
  pointer-events: none;
}

.btn-primary:hover::before,
.btn-gradient:hover::before {
  animation: kztShine 0.75s ease forwards;
}

@keyframes kztShine { to { transform: skewX(-20deg) translateX(560%); } }

.btn-primary:hover,
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(232, 115, 12, 0.55);
}

.btn-outline-2:hover { transform: translateY(-2px); }

.btn .fal.fa-arrow-right { transition: transform 0.25s ease; }
.btn:hover .fal.fa-arrow-right { transform: translateX(4px); }

:is(a, button):focus-visible {
  outline: 2px solid var(--klik-accent, #E8730C);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7. Section titles: underline sweep when they animate in
   -------------------------------------------------------------------------- */
.section-title .title {
  position: relative;
  padding-bottom: 14px;
}

.section-title .title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 64px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--klik-accent, #E8730C), #FFB25E);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--kzt-ease-out) 0.25s;
}

.section-title.title-center .title::after {
  left: 50%;
  margin-left: -32px;
  transform-origin: center;
}

.section-title.aos-animate .title::after,
[data-aos].aos-animate .section-title .title::after,
.kzt-steps-head.aos-animate .title::after { transform: scaleX(1); }

/* when AOS is unavailable the sweep must not hide */
html.no-js .section-title .title::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   8. Tabs: pane content slides in on switch
   -------------------------------------------------------------------------- */
.tab-content > .tab-pane.active.show { animation: kztPaneIn 0.5s var(--kzt-ease-out); }

@keyframes kztPaneIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tabs-navigation .nav-link { transition: transform 0.25s var(--kzt-ease-spring), background-color 0.25s ease, color 0.25s ease; }
.tabs-navigation .nav-link:hover { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   9. /usluge — staggered card entrances that replay after AJAX filtering
   -------------------------------------------------------------------------- */
@keyframes kztCardIn {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#search_container .row > [class*="col-"] {
  animation: kztCardIn 0.55s var(--kzt-ease-out) both;
}

#search_container .row > [class*="col-"]:nth-child(1)  { animation-delay: 0.03s; }
#search_container .row > [class*="col-"]:nth-child(2)  { animation-delay: 0.09s; }
#search_container .row > [class*="col-"]:nth-child(3)  { animation-delay: 0.15s; }
#search_container .row > [class*="col-"]:nth-child(4)  { animation-delay: 0.21s; }
#search_container .row > [class*="col-"]:nth-child(5)  { animation-delay: 0.27s; }
#search_container .row > [class*="col-"]:nth-child(6)  { animation-delay: 0.33s; }
#search_container .row > [class*="col-"]:nth-child(7)  { animation-delay: 0.39s; }
#search_container .row > [class*="col-"]:nth-child(8)  { animation-delay: 0.45s; }
#search_container .row > [class*="col-"]:nth-child(9)  { animation-delay: 0.51s; }
#search_container .row > [class*="col-"]:nth-child(n+10) { animation-delay: 0.57s; }

/* sidebar filters: links glide, chevrons rotate — real pointers only, so
   taps on phones don't nudge the labels around */
.widget ul li a,
.widget .form-check {
  transition: transform 0.25s ease, color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .widget ul li a:hover { transform: translateX(5px); color: var(--klik-accent, #E8730C) !important; }
}

/* Mobile filter drawer: Bootstrap's responsive offcanvas-lg class escapes
   the dark .offcanvas override, so the panel stayed white behind the dark
   widget cards. Dark it below the drawer breakpoint only (above it the same
   element renders inline as the desktop sidebar). */
@media (max-width: 991.98px) {
  .widget-offcanvas {
    background: var(--klik-bg, #131417) !important;
    color: var(--klik-text, #EEF0F4) !important;
  }

  .widget-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--klik-border, #363A43);
  }

  .widget-offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
}

/* Location field: the wrapper (.location-group here, .input-group-style-2
   elsewhere) was a leftover white pill around a dark input; make it one
   dark piece with the target icon inside */
.widget .location-group,
.widget .input-group-style-2 {
  background: var(--klik-surface-2, #262930) !important;
  border: 1px solid var(--klik-border, #363A43) !important;
  border-radius: 11px;
  overflow: hidden;
}

.widget .location-group .form-control,
.widget .input-group-style-2 .form-control {
  background: transparent !important;
  border: 0 !important;
}

.widget .location-group .current-location,
.widget .input-group-style-2 .current-location {
  background: transparent !important;
  color: var(--klik-accent, #E8730C) !important;
  border-left: 1px solid var(--klik-border, #363A43) !important;
}

/* featured badge shimmer */
.kzt-featured-badge {
  position: relative;
  overflow: hidden;
}

.kzt-featured-badge::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  animation: kztBadgeShine 3.2s ease-in-out infinite;
}

@keyframes kztBadgeShine {
  0%       { transform: skewX(-20deg) translateX(0); }
  55%, 100% { transform: skewX(-20deg) translateX(420%); }
}

/* the sort/results toolbar drops in */
.sort-area { animation: kztPaneIn 0.55s var(--kzt-ease-out) both; }

/* --------------------------------------------------------------------------
   10. Promo banners + benefits: tilt targets & hover life
   -------------------------------------------------------------------------- */
.banner-sm,
.benefit-card {
  transition: transform 0.35s var(--kzt-ease-spring), border-color 0.3s ease, box-shadow 0.35s ease;
  transform: perspective(900px) rotateX(var(--kzt-rx, 0deg)) rotateY(var(--kzt-ry, 0deg)) translateY(var(--kzt-ty, 0px));
}

.banner-sm { overflow: hidden; }

/* Repair the banner height: klik-redesign turned .banner-sm::before into an
   absolutely-positioned scrim, which erased the theme's .ratio::before
   padding spacer — the banners collapsed to their 2px borders. Make the
   scrim a flowing spacer again: it sizes the box AND paints the gradient. */
.banner-sm.ratio::before {
  position: relative;
  inset: auto;
  display: block;
  padding-bottom: 42.85%;
  z-index: 1;
}

@media (max-width: 575.98px) {
  .banner-sm.ratio::before { padding-bottom: 56%; }

  /* the theme's h3 size wraps to five clipped lines in the small banner */
  .banner-sm .banner-content h3 {
    font-size: clamp(15px, 4.6vw, 22px);
    margin-bottom: 0 !important;
    line-height: 1.3;
  }
}

/* Benefits: the white reference cards belonged to the light-glass era; on
   the dark ground they read as four glaring slabs. Same family as the step
   deck now, with a parchment chip keeping the 3D icons legible. */
.benefits-area .benefit-card {
  background:
    radial-gradient(120% 160% at 88% 0%, rgba(232, 115, 12, 0.10), transparent 46%),
    linear-gradient(160deg, #1F2127 0%, #16181D 68%);
  border: 1px solid var(--klik-border, #363A43);
  box-shadow: 0 -14px 44px -26px rgba(0, 0, 0, 0.85);
}

.benefits-area .benefit-card:hover {
  transform: perspective(900px) rotateX(var(--kzt-rx, 0deg)) rotateY(var(--kzt-ry, 0deg)) translateY(-5px);
  border-color: rgba(232, 115, 12, 0.5);
  box-shadow: 0 22px 48px -24px rgba(0, 0, 0, 0.8);
}

.benefits-area .benefit-title { color: var(--klik-text, #EEF0F4); }
.benefits-area .benefit-text { color: var(--klik-muted, #9FA5B1); }

.benefits-area img.benefit-icon {
  background: rgba(240, 242, 246, 0.95);
  border-radius: 16px;
  padding: 9px;
}

.banner-sm::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 30%;
  z-index: 2;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-20deg) translateX(-160%);
  pointer-events: none;
}

.banner-sm:hover::after { animation: kztShine 0.9s ease forwards; }

@media (hover: hover) and (pointer: fine) {
  .benefit-card:hover { border-color: rgba(232, 115, 12, 0.5); }
  .benefit-card:hover .benefit-icon { animation: kztIconBob 0.6s var(--kzt-ease-spring); }
}

@keyframes kztIconBob {
  0%   { transform: translateY(0) rotate(0); }
  40%  { transform: translateY(-7px) rotate(-4deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* --------------------------------------------------------------------------
   11. Action banner (Spremni da zakažete...) — glowing frame + orbs
   -------------------------------------------------------------------------- */
.action-banner .wrapper {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(232, 115, 12, 0.35) !important;
  box-shadow: 0 0 0 1px rgba(232, 115, 12, 0.12), 0 30px 80px -40px rgba(232, 115, 12, 0.35);
}

.action-banner .wrapper::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -80px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 115, 12, 0.28), transparent 70%);
  animation: kztOrb 11s ease-in-out infinite;
  pointer-events: none;
}

.action-banner .wrapper::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  left: -60px;
  bottom: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 178, 94, 0.16), transparent 70%);
  animation: kztOrb 13s ease-in-out 1.4s infinite reverse;
  pointer-events: none;
}

@keyframes kztOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-36px, 26px) scale(1.12); }
}

/* --------------------------------------------------------------------------
   11b. Header details: rounded hamburger, crisp logo
   -------------------------------------------------------------------------- */
.header-area .menu-toggler {
  border-radius: 11px;
  width: 38px;
  height: 38px;
  transition: transform 0.25s var(--kzt-ease-spring);
}

.header-area .menu-toggler:active { transform: scale(0.92); }

/* the 120px flex slot stretched the logo past its natural pixels; cap the
   height and let the browser downscale instead of upscale */
.header-area .main-responsive-nav .logo img,
.header-area .navbar-brand img {
  max-height: 42px;
  width: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   11c. Closer: dual-audience cards under the CTA marquee
   -------------------------------------------------------------------------- */
.kzt-closer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 54px 0 76px;
}

.kzt-closer-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 30px 32px;
  border-radius: 22px;
  background:
    radial-gradient(120% 160% at 88% 0%, rgba(232, 115, 12, 0.08), transparent 46%),
    linear-gradient(160deg, #1F2127 0%, #16181D 68%);
  border: 1px solid var(--klik-border, #363A43);
  text-decoration: none;
  transition: transform 0.3s var(--kzt-ease-spring), border-color 0.3s ease, box-shadow 0.3s ease;
}

.kzt-closer-card:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 115, 12, 0.55);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.8);
}

.kzt-closer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  flex: none;
  background: linear-gradient(145deg, var(--klik-accent, #E8730C), #A34F06);
  color: #fff;
  font-size: 23px;
}

.kzt-closer-card h3 {
  font-size: 21px;
  margin-bottom: 6px;
  color: var(--klik-text, #EEF0F4);
}

.kzt-closer-card p {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  color: var(--klik-muted, #9FA5B1);
}

.kzt-closer-arrow {
  margin-left: auto;
  flex: none;
  color: var(--klik-accent, #E8730C);
  font-size: 20px;
  transition: transform 0.3s var(--kzt-ease-spring);
}

.kzt-closer-card:hover .kzt-closer-arrow { transform: translateX(6px); }

@media (max-width: 991.98px) {
  .kzt-closer-grid { grid-template-columns: 1fr; padding: 40px 0 60px; }
}

@media (max-width: 575.98px) {
  .kzt-closer-card { padding: 24px 22px; gap: 16px; }
  .kzt-closer-icon { width: 48px; height: 48px; font-size: 19px; border-radius: 13px; }
  .kzt-closer-card h3 { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   12. CTA marquee above the footer
   -------------------------------------------------------------------------- */
.kzt-cta-marquee {
  display: block;
  overflow: hidden;
  position: relative;
  padding: 30px 0;
  margin-top: 10px;
  border-top: 1px solid var(--klik-border, #363A43);
  border-bottom: 1px solid var(--klik-border, #363A43);
  background: linear-gradient(180deg, rgba(232, 115, 12, 0.05), rgba(232, 115, 12, 0.02));
  text-decoration: none;
}

.kzt-cta-marquee .kzt-mq-track {
  animation-duration: 52s;
}

.kzt-cta-marquee:hover .kzt-mq-track { animation-play-state: paused; }

.kzt-cta-item {
  font-family: var(--klik-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--klik-text, #EEF0F4);
  white-space: nowrap;
  padding: 0 8px;
  transition: color 0.3s ease;
}

.kzt-cta-ghost {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--klik-muted, #9FA5B1);
}

.kzt-cta-marquee:hover .kzt-cta-item:not(.kzt-cta-ghost) { color: var(--klik-accent, #E8730C); }
.kzt-cta-marquee:hover .kzt-cta-ghost { -webkit-text-stroke-color: var(--klik-accent, #E8730C); }

.kzt-cta-marquee .kzt-mq-sep { font-size: 22px; margin: 0 26px; }

/* --------------------------------------------------------------------------
   13. Footer: watermark + link life
   -------------------------------------------------------------------------- */
/* no overflow:hidden here — it decapitated the theme's .go-top arrow, which
   hangs 30px above the footer on every page; body clips the x-axis anyway */
.footer-area { position: relative; }

.kzt-footer-watermark {
  position: absolute;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
  font-family: var(--klik-display);
  font-weight: 800;
  font-size: clamp(64px, 12vw, 190px);
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238, 240, 244, 0.07);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.footer-area .footer-top,
.footer-area .copy-right-area { position: relative; z-index: 1; }

.footer-area .footer-links a,
.footer-area .info-list a {
  transition: color 0.25s ease, transform 0.25s ease;
  display: inline-block;
}

.footer-area .footer-links a:hover,
.footer-area .info-list a:hover {
  color: var(--klik-accent, #E8730C);
  transform: translateY(-2px);
}

.footer-area .social-link a {
  transition: transform 0.25s var(--kzt-ease-spring), color 0.25s ease, background-color 0.25s ease;
}

.footer-area .social-link a:hover { transform: translateY(-4px) scale(1.1); }

.go-top {
  transition: transform 0.25s var(--kzt-ease-spring), background-color 0.25s ease;
}

.go-top:hover { transform: translateY(-4px); }

/* --------------------------------------------------------------------------
   14. Breadcrumb headers on inner pages: entrance + accent
   -------------------------------------------------------------------------- */
.breadcrumb-area .title,
.breadcrumb-area h1,
.breadcrumb-area .breadcrumb {
  animation: kztPaneIn 0.6s var(--kzt-ease-out) both;
}

.breadcrumb-area .breadcrumb { animation-delay: 0.12s; }

/* --------------------------------------------------------------------------
   15. Reduced motion: everything settles instantly, nothing loops
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kzt-grain { display: none; }

  .header-area,
  .kzt-hero-title .kzt-word,
  .hero-banner-2 .banner-content .text,
  .hero-banner-2 .banner-filter-form,
  .kzt-hero-trust,
  .kzt-hero-chip,
  .klik-hero-card,
  .kzt-scroll-cue,
  .sort-area,
  #search_container .row > [class*="col-"],
  .tab-content > .tab-pane.active.show,
  .breadcrumb-area .title,
  .breadcrumb-area h1,
  .breadcrumb-area .breadcrumb {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .kzt-hero-title .kzt-hl svg path { animation: none; stroke-dashoffset: 0; }

  .kzt-mq-track { animation: none !important; }
  .kzt-mq-row, .kzt-cta-marquee { overflow-x: auto; }

  .hero-banner-2 .banner-filter-form .form-wrapper::after,
  .kzt-hero-chip .kzt-chip-dot,
  .kzt-featured-badge::after,
  .action-banner .wrapper::before,
  .action-banner .wrapper::after { animation: none !important; }

  .kzt-progress { display: none; }
}