/* =====================================================================
   odmoria.css — dizajnerski sustav v2 („06 v2”, Figma: Odmoria / Product
   Design / v2). Isti tokeni kao Figma varijable (Color / Spacing / Radius).
   Koriste ga sve žive stranice (dashboard ima vlastiti CSS s istim
   vrijednostima). Stari v3 sustav (atmosphere.css, motion.js, ui.css) je
   obrisan — ostao je u povijesti gita.
   ===================================================================== */

:root{
  /* „Pearl / Quiet Adriatic” (redizajn 21. 10. 2026.): mat perla, bijele plohe,
     petrol akcija, fini razdjelnici. Kontrast provjeren (≥ 4,5:1 za tekst). */
  --bg-page:#F6F7F5;          /* perla */
  --bg-surface:#FFFFFF;
  --bg-wash:#EEF2EF;          /* tiha ploha, hover */
  --bg-soft:#E8F0ED;          /* mekani naglasak */
  --bg-inverse:#183D42;
  --bg-warm:#FBF0DC;
  --text:#183D42;             /* 11,6:1 na bijelom */
  --text-muted:#536564;       /* 6,0:1 na bijelom, 5,6:1 na perli */
  --text-accent:#286863;      /* 6,4:1 na bijelom */
  --text-warm:#6E4A0C;        /* 6,9:1 na --bg-warm */
  --text-inverse:#FFFFFF;
  --text-on-inverse-accent:#F2B33D;  /* sunce na tamnom */
  --action:#286863;
  --action-hover:#1F5550;
  --action-pressed:#18443F;
  --border:#DCE3DF;           /* samo razdjelnici */
  --border-control:#7A8B87;   /* obrub kontrola, ≥3:1 */
  --danger:#B42318;
  --sunce:#F2B33D;            /* znak u logotipu, sitne oznake */
  --sunce-meko:#FBF0DC;
  --sunce-tamno:#6E4A0C;
  --danger-bg:#FEF3F2;
  --focus:#286863;
  --scrim:linear-gradient(180deg,rgba(14,34,41,0) 0%,rgba(14,34,41,.35) 30%,rgba(14,34,41,.72) 50%,rgba(14,34,41,.88) 100%);

  /* razmaci 4/8/12/16/24/32/48/64/96 */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --radius-control:8px;--radius-panel:12px;--radius-feature:12px;
  --content-max:1376px;
  --gutter:48px;

  /* jedno pismo na svim stranicama (stilovi javne stranice ga mogu promijeniti) */
  --font-ui:"Manrope",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
  --font-editorial:"Manrope",system-ui,sans-serif;

  --shadow-panel:0 1px 2px rgba(24,61,66,.05),0 10px 28px -14px rgba(24,61,66,.18);
  --shadow-raised:0 6px 16px rgba(24,61,66,.12);
  --shadow-overlay:0 24px 64px rgba(14,34,41,.24);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:760px){ :root{ --gutter:16px } }

*,*::before,*::after{box-sizing:border-box}
/* `hidden` mora sakriti i element kojem razred daje display:flex/grid — inače se
   vidi (dogodilo se: „Plaćeni plan je istekao” svakom domaćinu u Računu). */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--text);font:400 16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-ui);color:inherit}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* fokus: 2 px razmak + 3 px petrol prsten, vidljiv i na teal gumbu */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.on-dark :focus-visible{outline-color:var(--text-on-inverse-accent)}

.skip{position:absolute;left:var(--s4);top:-60px;z-index:100;background:var(--bg-inverse);color:#fff;padding:10px 16px;border-radius:var(--radius-control);font-weight:600}
.skip:focus{top:var(--s4)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:calc(var(--content-max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* birač jezika gostinskih stranica (jezici.js, [data-jezik-birac]) */
.jezik{appearance:none;-webkit-appearance:none;min-height:40px;max-width:132px;padding:0 30px 0 12px;border:1px solid var(--border-control);border-radius:var(--radius-control);
  background:var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312303A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/16px;
  color:var(--text);font:700 14px/1 var(--font-ui);cursor:pointer;text-overflow:ellipsis}
.jezik:hover{background-color:var(--bg-wash)}

/* tipografija */
.t-hero{font:800 clamp(42px,4.6vw,64px)/1.06 var(--font-ui);letter-spacing:-.04em}
.t-section{font:700 clamp(30px,2.9vw,40px)/1.14 var(--font-ui);letter-spacing:-.035em}
.t-card{font:700 22px/1.3 var(--font-ui);letter-spacing:-.02em}
.t-small-head{font:700 18px/1.35 var(--font-ui);letter-spacing:-.01em}
.t-lead{font-size:18px;line-height:1.6;color:var(--text-muted)}
.t-muted{color:var(--text-muted)}
.t-meta{font-size:13px;line-height:1.4;color:var(--text-muted)}
.eyebrow{font:700 12px/1.3 var(--font-body);letter-spacing:.15em;text-transform:uppercase;color:var(--text-accent)}
.accent{color:var(--text-accent)}

.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic--sm{width:16px;height:16px}
.ic--lg{width:24px;height:24px}

/* gumbi — Figma komponenta Button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:var(--radius-control);border:1px solid transparent;font:700 16px/1.2 var(--font-ui);text-decoration:none;cursor:pointer;background:none;color:var(--text);transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn--sm{min-height:44px;padding:0 16px;font-size:14px}
.btn--primary{background:var(--action);color:#fff}
.btn--primary:hover{background:var(--action-hover)}
.btn--primary:active{background:var(--action-pressed)}
.btn--secondary{background:var(--bg-surface);border-color:var(--border-control)}
.btn--secondary:hover{background:var(--bg-wash)}
.btn--inverse{background:#fff;color:var(--text)}
.btn--inverse:hover{background:var(--bg-wash)}
.btn--text{padding:0 4px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.btn--text:hover{color:var(--text-accent)}
.btn--block{width:100%}
.btn[aria-disabled="true"]{background:var(--border);color:var(--text-muted);cursor:not-allowed}

/* oznake — Figma Badge: nikad samo boja */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;font:700 12px/1.3 var(--font-body);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.badge--demo{background:var(--bg-warm);color:var(--text-warm)}
.badge--status{background:var(--bg-wash);color:var(--text-accent)}
.badge--plan{background:var(--bg-surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--border-control)}
.badge--locked{background:var(--bg-wash);color:var(--text-muted)}

.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-feature)}

.checks{display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks .ic{color:var(--text-accent);margin-top:3px}

/* harmonika (FAQ) */
.acc{border-bottom:1px solid var(--border)}
.acc summary{list-style:none;display:flex;align-items:center;gap:16px;min-height:44px;padding:20px 0;cursor:pointer;font:700 18px/1.35 var(--font-ui)}
.acc summary::-webkit-details-marker{display:none}
.acc summary span{flex:1}
.acc summary .ic{color:var(--text-accent);transition:transform .2s var(--ease)}
.acc[open] summary .ic{transform:rotate(180deg)}
.acc p{padding:0 0 20px;color:var(--text-muted)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* =====================================================================
   POKRET (rujan 2026.) — suptilno, i samo kad korisnik nije isključio
   animacije. Otkrivanje pri listanju vezano je uz položaj elementa
   (animation-timeline: view()), ne uz IntersectionObserver: preglednik
   bez podrške jednostavno pokaže sve, i ništa ne može ostati zaglavljeno
   nevidljivo (zamka `.wipe` iz v3).
   ===================================================================== */
@keyframes o-dizi{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes o-zoom{from{transform:scale(1.06)}to{transform:none}}
@keyframes o-otkljucaj{0%{box-shadow:0 0 0 0 rgba(17,109,118,.45)}100%{box-shadow:0 0 0 14px rgba(17,109,118,0)}}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease)}
  .btn:active{transform:translateY(1px) scale(.99)}
  .btn--primary:hover{box-shadow:0 6px 18px rgba(17,109,118,.22)}
  /* zaglavlje: fotografija polako „sjedne”, naslov se podigne */
  .hero img{animation:o-zoom 1.8s var(--ease) both}
  .hero h1{animation:o-dizi .8s var(--ease) .1s both}
  @supports (animation-timeline:view()){
    .sec > .wrap > *{animation:o-dizi linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}

/* Male animacije za radnje (pokret.js, listopad 2026.) — iskrice, kvačica,
   opruga za poruke i odabir, lagano podizanje kartica. Sve samo kad
   korisnik nije isključio pokret. */
.o-veselje{position:fixed;width:0;height:0;pointer-events:none;z-index:300}
.o-veselje i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#FFC93C;animation:o-iskra .95s cubic-bezier(.2,.7,.2,1) forwards}
.o-veselje .o-v-t{background:var(--action)}
.o-veselje .o-v-m{background:var(--text-on-inverse-accent);border-radius:3px}
.o-kv{display:inline-block}
@keyframes o-iskra{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 46px)) scale(1) rotate(var(--r));opacity:0}}
@keyframes o-pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes o-opruga{0%{opacity:0;transform:translate(-50%,24px) scale(.96)}60%{opacity:1;transform:translate(-50%,-4px) scale(1.01)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes o-pojavi{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .o-gotovo .o-kv{animation:o-pop .4s cubic-bezier(.2,1.4,.4,1) both}
  .o-gotovo{transition:none}
  .toast.show{animation:o-opruga .45s cubic-bezier(.2,1.2,.4,1) both}
  /* naslovnica: tekst zaglavlja dolazi redom */
  .hero__copy > *{animation:o-dizi .7s var(--ease) both}
  .hero__copy > :nth-child(2){animation-delay:.08s}
  .hero__copy > :nth-child(3){animation-delay:.18s}
  .hero__copy > :nth-child(4){animation-delay:.28s}
  .hero__copy > :nth-child(5){animation-delay:.38s}
  /* kartice i pločice se lagano podignu */
  .t-card,.tile,.rev__i,.plan{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s var(--ease)}
  .t-card:hover,.tile:hover,.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-raised)}
  .tile:active{transform:translateY(0) scale(.98)}
  .btn--primary:hover{transform:translateY(-1px)}
  .btn--primary:active{transform:translateY(1px) scale(.98)}
  /* kalendar: odabrani dan poskoči; poruke o uspjehu se pojave */
  .cday.range-start{animation:o-pop .35s cubic-bezier(.2,1.4,.4,1) both}
  .iqf__ok:not([hidden]),#oc-hvala:not([hidden]),#pr-ok:not([hidden]){animation:o-pojavi .45s var(--ease) both}
  /* strelica u gumbu krene prema cilju */
  .btn > .ic{transition:transform .2s var(--ease)}
  .btn:hover > .ic{transform:translateX(3px)}
}

/* Popust na cijenu plana (plan_promotions): precrtana redovna + oznaka ponude */
.cijena-stara{font-size:.62em;font-weight:500;color:var(--text-muted);text-decoration:line-through;margin-right:.35em;letter-spacing:0}
.ponuda{display:inline-flex;align-items:center;gap:4px;width:fit-content;padding:3px 8px;border-radius:6px;background:var(--bg-warm);color:var(--text-warm);font:700 12px/1.3 var(--font-body);letter-spacing:.02em}

/* Prekidač jezika sučelja domaćina (domacin-jezik.js) — prijava, registracija */
.jezik-prekidac{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--bg-surface)}
.jezik-prekidac button{min-width:40px;min-height:32px;border:0;border-radius:999px;background:transparent;color:var(--text-muted);font:700 13px/1 var(--font-ui);cursor:pointer}
.jezik-prekidac button[aria-pressed="true"]{background:var(--bg-inverse);color:var(--text-inverse)}
.jezik-prekidac--plutajuci{position:fixed;top:16px;right:16px;z-index:50;box-shadow:var(--shadow-raised)}
.jezik-prekidac:empty{display:none}

/* logo (assets/logo/, prijedlog B2 „izlazak sunca”, 16. 10. 2026.) — visina prati pismo poveznice */
.o-logo{display:block;height:1.12em;width:auto;max-width:none}