/* =========================================================
   FreshAir — chrome.css
   Zaglavlje, termostat stranice (mini LCD + tint + progres),
   meni = daljinski, traka marki, mobilni dok.
   Ponašanje: js/thermo.js (LCD, progres, tint), js/nav.js (ostalo).
   ========================================================= */

/* ---------- progres skrola: "ide ka 22°" ---------- */
.progress{
  position:fixed;top:var(--hdr-h);left:0;right:0;height:2px;z-index:99;pointer-events:none;
}
.progress-bar{
  display:block;width:100%;height:100%;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  background:linear-gradient(90deg,var(--thermo-from,var(--cyan)),var(--cyan));
  box-shadow:0 0 10px rgba(34,184,240,.55);
}

/* ---------- zaglavlje ---------- */
.hdr{
  position:sticky;top:0;z-index:100;height:var(--hdr-h);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease;
}
.hdr.is-scrolled{
  background:rgba(255,255,255,.82);
  border-bottom-color:var(--line);
  box-shadow:0 10px 24px -20px rgba(10,26,47,.35);
}
.hdr-in{display:flex;align-items:center;gap:12px;height:100%}

/* logotip */
.brand{
  display:inline-flex;align-items:center;min-height:44px;margin-right:auto;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.brand-word{font:700 20px/1 var(--f-display);letter-spacing:-.03em;color:var(--navy)}
.brand-word b{font-weight:700;color:var(--blue)}

/* navigacija (samo široki ekrani) */
.hdr-nav{display:none}
.hdr-nav a{
  position:relative;display:inline-block;padding:8px 12px;border-radius:999px;
  font:500 15px/1.25 var(--f-text);letter-spacing:-.005em;color:var(--ink-2);text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.hdr-nav a:hover{background:var(--surface-2);color:var(--ink)}
.hdr-nav a::after{
  content:"";position:absolute;left:50%;bottom:-2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 2px rgba(34,184,240,.18),0 0 9px var(--cyan);
  transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1);
}
.hdr-nav a[aria-current="true"]{color:var(--ink);font-weight:600}
.hdr-nav a[aria-current="true"]::after{transform:scale(1)}

/* mini LCD: temperatura stranice */
.hdr-lcd{
  --seg-off:rgba(127,230,255,.07);
  position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:10px;cursor:default;
  background:linear-gradient(180deg,var(--lcd-bg-2),var(--lcd-bg));
  box-shadow:
    inset 0 0 0 1px rgba(127,230,255,.14),
    inset 0 2px 6px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(10,26,47,.14);
}
.hdr-lcd::before{ /* odsjaj stakla */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 46%);
}
.hdr-lcd::after{ /* jedan puls kad stranica stigne na 22° */
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1.5px var(--lcd-on),0 0 16px rgba(127,230,255,.7);
}
.hdr-lcd.is-arrive::after{animation:hdr-lcd-arrive 1s cubic-bezier(.2,.7,.2,1) 1 both}
@keyframes hdr-lcd-arrive{
  0%{opacity:.95;transform:scale(1)}
  100%{opacity:0;transform:scale(1.3,1.55)}
}
.hdr-lcd-mode{
  display:grid;place-items:center;width:13px;height:13px;flex:none;
  color:rgba(127,230,255,.72);transition:color .45s ease;
}
.hdr-lcd-mode:empty{display:none}
.hdr-lcd-mode svg{width:13px;height:13px}
.hdr-lcd[data-mode="heat"] .hdr-lcd-mode{color:var(--heat-soft)}
.hdr-lcd-temp{
  --seg-off:rgba(127,230,255,.07);
  min-width:1.55em;justify-content:center;
  font-size:19px;color:var(--lcd-on);transition:color .45s ease;
}
.hdr-lcd.is-warm .hdr-lcd-temp{color:#FFB48F}
.hdr-lcd.is-cold .hdr-lcd-temp{color:#9FD8FF}
.hdr-lcd.is-ideal .hdr-lcd-temp{color:var(--lcd-on)}

/* poziv + zakazivanje + meni: "bela plastika" */
.hdr-call,
.hdr-menu{
  flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%;
  color:var(--blue-deep);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:var(--plastic);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line-strong),0 2px 0 rgba(10,26,47,.07),0 8px 14px -8px rgba(10,26,47,.35);
  transition:transform .14s ease,box-shadow .2s ease,color .2s ease;
}
.hdr-call svg,
.hdr-menu svg{width:20px;height:20px}
.hdr-call:hover,
.hdr-menu:hover{box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--blue),0 2px 0 rgba(10,26,47,.07),0 10px 18px -8px rgba(21,96,201,.45)}
.hdr-call:active,
.hdr-menu:active{
  transform:translateY(1px);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line-strong),0 1px 0 rgba(10,26,47,.07),0 3px 6px -4px rgba(10,26,47,.3);
}
.hdr-menu{color:var(--navy)}
.hdr-menu[aria-expanded="true"]{
  color:var(--blue-deep);
  box-shadow:inset 0 2px 4px rgba(10,26,47,.14),0 0 0 1.5px var(--cyan),0 0 0 5px rgba(34,184,240,.16);
}
.hdr-call-num{display:none;font:600 15px/1 var(--f-mono);letter-spacing:.01em;color:var(--ink);white-space:nowrap}

.hdr-book{--b-h:42px;display:none;padding:0 16px;font-size:14.5px}
.hdr-book svg{width:18px;height:18px}

@media (min-width:900px){
  .hdr-book{display:inline-flex}
}
@media (min-width:1100px){
  .brand{margin-right:0}
  .hdr-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
  .hdr-call{width:auto;display:inline-flex;align-items:center;gap:9px;padding:0 18px 0 15px;border-radius:999px}
  .hdr-call-num{display:inline}
  .hdr-menu{display:none}
}
@media (min-width:1100px) and (max-width:1239px){
  .hdr-nav a{padding:8px 10px}
}
@media (max-width:359px){
  .hdr-in{gap:8px}
  .brand-word{font-size:18px}
  .hdr-lcd{padding:6px 8px}
  .hdr-lcd-mode{display:none}
}

/* ---------- traka marki ---------- */
.brands{padding:26px 0}
.brands + .sec{padding-top:clamp(28px,4vw,56px)}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{
  display:flex;width:max-content;margin:0;padding:0;list-style:none;
  animation:marquee var(--marquee-t,38s) linear infinite;will-change:transform;
}
.marquee-track li{
  position:relative;flex:none;padding:0 22px;white-space:nowrap;
  font:500 clamp(17px,4.4vw,24px)/1.5 var(--f-display);letter-spacing:-.02em;color:var(--ink-2);opacity:.7;
  transition:opacity .25s ease,color .25s ease;
}
.marquee-track li::after{
  content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px rgba(34,184,240,.55);
}
.marquee-track li:hover{opacity:1;color:var(--blue-deep)}
.marquee:hover .marquee-track,
.marquee.is-off .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none;padding-inline:var(--gutter)}
  .marquee-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:8px;will-change:auto}
  .marquee-track li{padding:7px 16px;border-radius:999px;font-size:15px;line-height:1.2;opacity:1;background:var(--plastic);
    box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line),0 2px 0 rgba(10,26,47,.05)}
  .marquee-track li::after{display:none}
  .marquee-track li[aria-hidden="true"]{display:none}
  .hdr-lcd.is-arrive::after{animation:none}
}

/* ---------- mobilni dok ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--line);
  transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .5s ease,visibility 0s linear 0s;
}
.dock.is-hidden{transform:translateY(110%);opacity:0;visibility:hidden;transition:transform .5s cubic-bezier(.4,0,.6,1),opacity .4s ease,visibility 0s linear .5s}
.dock-call,
.dock-book{
  display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:16px;
  font:600 16px/1 var(--f-text);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;user-select:none;
  transition:transform .14s ease,box-shadow .2s ease;
}
.dock-call svg,
.dock-book svg{width:20px;height:20px;flex:none}
.dock-call{
  color:#fff;
  background:linear-gradient(180deg,#3486EE 0%,var(--blue-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.14),0 10px 22px -12px rgba(21,96,201,.75);
}
.dock-book{
  color:var(--ink);
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F4F7 100%);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line-strong),0 8px 18px -12px rgba(10,26,47,.4);
}
.dock-call:active,
.dock-book:active{transform:translateY(1px) scale(.99)}
@media (min-width:900px){ .dock{display:none} }

/* ---------- meni = daljinski ---------- */
html.remote-open{overflow:hidden;padding-right:var(--sbw,0px)}
html.remote-open body{overflow:visible}

.remote{
  position:fixed;inset:0;z-index:250;
  display:flex;align-items:flex-end;justify-content:center;
  perspective:1400px;
}
.remote[hidden]{display:none}
.remote:not(.is-open){pointer-events:none}

.remote-scrim{
  position:absolute;inset:0;cursor:pointer;opacity:0;
  background:rgba(5,13,22,.5);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);
  transition:opacity .4s ease;
}
.remote.is-open .remote-scrim{opacity:1}

.remote-body{
  position:relative;width:100%;max-width:520px;
  max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:30px 22px calc(22px + env(safe-area-inset-bottom));
  border-radius:36px 36px 0 0;
  background:linear-gradient(158deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 34%),var(--plastic);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(10,26,47,.05),
    inset 0 -16px 26px -20px rgba(10,26,47,.2),
    0 -24px 64px -16px rgba(3,10,18,.5);
  transform:translateY(104%);
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.remote-body::-webkit-scrollbar{display:none}
.remote.is-open .remote-body{transform:none}
.remote-body::before{ /* IR prozor na vrhu daljinskog (na telefonu ujedno i ručica) */
  content:"";position:absolute;top:10px;left:50%;width:54px;height:6px;margin-left:-27px;border-radius:6px;
  background:linear-gradient(180deg,#2B3C4F,#0A1522);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 #fff;
}
.remote-grab{
  position:absolute;left:0;right:0;top:0;height:36px;z-index:2;touch-action:none;cursor:grab;
}
.remote-grab:active{cursor:grabbing}

.remote-top{display:flex;align-items:stretch;gap:12px}
.remote-lcd{
  --seg-off:rgba(127,230,255,.07);
  position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:64px;padding:8px 16px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,var(--lcd-bg-2),var(--lcd-bg));
  box-shadow:
    inset 0 0 0 1px rgba(127,230,255,.14),
    inset 0 3px 10px rgba(0,0,0,.65),
    0 0 0 3px #E6EBF0,
    0 0 0 4px rgba(10,26,47,.1),
    0 5px 0 -1px #fff;
}
.remote-lcd::after{ /* odsjaj stakla */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 46%);
}
.remote-lcd-temp{
  --seg-off:rgba(127,230,255,.07);
  font-size:30px;color:var(--lcd-on);flex:none;transition:opacity .3s ease;
}
.remote:not(.is-open) .remote-lcd-temp{opacity:.12}
.remote-lcd-modes{display:flex;align-items:center;gap:7px;flex:none}
.remote-lcd-modes svg{width:14px;height:14px;color:rgba(127,230,255,.13);transition:color .3s ease,filter .3s ease}
.remote-lcd-modes svg.is-on{color:var(--lcd-on);filter:drop-shadow(0 0 4px rgba(127,230,255,.7))}
.remote-lcd-modes svg.is-on[data-m="heat"]{color:var(--heat-soft);filter:drop-shadow(0 0 4px rgba(255,180,143,.6))}
.remote-lcd-label{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;
  font:500 9.5px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(127,230,255,.6);
}
.remote-power{
  flex:none;display:grid;place-items:center;width:52px;height:52px;padding:0;margin:0;
  border:0;border-radius:50%;cursor:pointer;align-self:center;
  color:var(--heat);-webkit-tap-highlight-color:transparent;
  background:var(--plastic);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line-strong),0 3px 0 rgba(10,26,47,.1),0 10px 18px -8px rgba(10,26,47,.4);
  transition:transform .14s ease,box-shadow .14s ease,color .2s ease;
}
.remote-power svg{width:23px;height:23px;filter:drop-shadow(0 0 4px rgba(255,122,69,.35))}
.remote-power:hover{box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--heat),0 3px 0 rgba(10,26,47,.1),0 10px 18px -8px rgba(255,122,69,.5)}
.remote-power:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 4px rgba(10,26,47,.14),0 0 0 1px var(--line-strong),0 1px 0 rgba(10,26,47,.1),0 3px 6px -4px rgba(10,26,47,.35);
}

.remote-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.rk{
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;
  min-height:58px;padding:12px 38px 12px 14px;border-radius:16px;
  font:600 15px/1.2 var(--f-text);letter-spacing:-.005em;color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;user-select:none;
  background:var(--plastic);
  box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(10,26,47,.08),0 6px 14px -8px rgba(10,26,47,.3);
  transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease;
}
.rk-k{font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;color:var(--muted-2);transition:color .2s ease}
.rk::after{ /* indikator-dioda: svetli kod sekcije u kojoj se nalazite */
  content:"";position:absolute;right:14px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:#D3DBE4;box-shadow:inset 0 1px 1px rgba(10,26,47,.22);
  transition:background-color .25s ease,box-shadow .25s ease;
}
.rk[aria-current="true"]::after{background:var(--cyan);box-shadow:0 0 0 3px rgba(34,184,240,.18),0 0 10px var(--cyan)}
.rk:hover{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(34,184,240,.55),0 2px 0 rgba(10,26,47,.08),0 8px 16px -8px rgba(21,96,201,.4)}
.rk:hover .rk-k,
.rk:focus-visible .rk-k{color:var(--blue)}
.rk:active{
  transform:translateY(2px);
  background:linear-gradient(180deg,#F1F4F8,#E5EAF0);
  box-shadow:inset 0 2px 4px rgba(10,26,47,.1),0 0 0 1px rgba(34,184,240,.45),0 0 0 rgba(10,26,47,0);
}

.remote-actions{position:relative;display:grid;gap:10px;margin-top:20px;padding-top:16px}
.remote-actions::before{ /* spoj izmedju delova kućišta */
  content:"";position:absolute;left:6px;right:6px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(10,26,47,.14),transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.9);
}

@media (min-width:768px){
  .remote{align-items:center}
  .remote-body{
    width:380px;max-width:calc(100vw - 32px);max-height:min(92vh,760px);
    padding:34px 24px 24px;border-radius:40px;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 0 0 1px rgba(10,26,47,.05),
      inset 0 -18px 30px -22px rgba(10,26,47,.22),
      0 54px 110px -26px rgba(3,10,18,.62),
      0 18px 44px -16px rgba(3,10,18,.4);
    opacity:0;transform-origin:50% 100%;
    transform:translateY(34px) scale(.94) rotateX(9deg);
    transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .3s ease;
  }
  .remote.is-open .remote-body{opacity:1;transform:none}
  .remote-grab{display:none}
}

/* --- fokus: base.css postavlja border-radius:8px na :focus-visible, ovde čuvamo oblik --- */
.brand:focus-visible{border-radius:10px}
.hdr-nav a:focus-visible,
.hdr-book:focus-visible,
.remote-actions .btn:focus-visible{border-radius:999px}
.hdr-call:focus-visible,
.hdr-menu:focus-visible,
.remote-power:focus-visible{border-radius:50%}
@media (min-width:1100px){ .hdr-call:focus-visible{border-radius:999px} }
.rk:focus-visible,
.dock-call:focus-visible,
.dock-book:focus-visible{border-radius:16px}
.rk:focus-visible{outline-offset:2px}
.dock-call:focus-visible,
.dock-book:focus-visible{outline-offset:-3px;outline-color:#fff}
.dock-book:focus-visible{outline-color:var(--cyan)}

@media (prefers-reduced-motion:reduce){
  .remote-body{transition:none}
  .remote-scrim{transition:none}
  .dock,.dock.is-hidden{transition:none}
}