/* ═══════════════════════════════════════════════════════════
   WL-THEME · Deep Sea + Golden Sunset
   Override sloj — učitava se POSLE style.css.
   Ne dira booking logiku ni app.js. Lako se ukloni.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. PALETA (gazi --gold/--gold2 svuda odjednom) ── */
:root, html.light, html.dark {
  --sea-deep:#071a2e; --sea:#0b2742; --sea-up:#103758;
  --aqua:#46c2cc; --aqua-lt:#8fe0e6;
  --sun:#f7a823; --sun-deep:#e87a26; --sun-glow:#ffce6b;
  --paper:#f7f2ea;
  /* re-map brenda na novu paletu */
  --gold:#f7a823;            /* sunset narandžasta — glavni akcenat */
  --gold2:#ffce6b;           /* zlatni sjaj — hover/istaknuto */
  --gold-dim:rgba(247,168,35,0.12);
  --font-display:'Fraunces', serif;
  --font-serif:'Fraunces', serif;
}

/* Fraunces fallback ako stranica nije učitala font — bezbedno */
.section-title, .page-hero h1, .wl-footer-brand, .home-service-name {
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:400 !important; letter-spacing:-0.015em;
}
.section-title em, .page-hero h1 em { font-style:italic; }

/* ── 2. HERO svih unutrašnjih strana — premium look ── */
.page-hero{ min-height:62vh !important; align-items:flex-end !important; padding:110px 22px 46px !important; }
.page-hero-overlay{
  background:
    linear-gradient(180deg, rgba(7,26,46,0.30) 0%, rgba(7,26,46,0.22) 40%, rgba(7,26,46,0.88) 85%, var(--sea-deep) 100%),
    radial-gradient(90% 60% at 85% 14%, rgba(255,206,107,0.26), transparent 60%) !important;
}
.page-hero-bg{ animation:wlThemeKB 24s ease-in-out infinite alternate; }
@keyframes wlThemeKB{ from{transform:scale(1.0);} to{transform:scale(1.1);} }
.page-hero-label{
  color:var(--sun-glow) !important; letter-spacing:0.2em !important;
  display:inline-flex; align-items:center; gap:10px;
}
.page-hero-label::before{ content:''; width:30px; height:1px; background:var(--sun); }
.page-hero h1{ font-size:clamp(40px,11vw,76px) !important; line-height:0.94 !important; }
.page-hero h1 em{ color:var(--sun-glow) !important; }

/* ── 3. SEKCIJE / akcenti ── */
.section-label{ color:var(--aqua) !important; letter-spacing:0.2em !important; }
.divider{ background:linear-gradient(to right, var(--sun), transparent) !important; height:2px !important; }

/* ── 4. DUGMIĆI ── */
.submit-btn{
  background:linear-gradient(135deg, var(--sun-glow), var(--sun-deep)) !important;
  color:var(--sea-deep) !important; border-radius:3px !important; letter-spacing:0.2px;
}
.submit-btn:hover{ box-shadow:0 12px 34px rgba(247,168,35,0.45) !important; transform:translateY(-1px); }

/* ── 5. KARTICE (scooter/car/fleet) ── */
.scooter-card{ border-radius:14px !important; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease !important; }
.scooter-card:hover{ border-color:rgba(247,168,35,0.5) !important; box-shadow:0 18px 50px rgba(7,26,46,0.18) !important; }
.scooter-card.selected{ border-color:var(--sun) !important; box-shadow:0 0 0 1px var(--sun), 0 18px 50px rgba(247,168,35,0.18) !important; }
.scooter-select-btn, .book-btn{ border-radius:3px !important; }

/* ── 6. NAV brend dugme da prati paletu ── */
.wl-nav-wa{ background:linear-gradient(135deg, var(--sun-glow), var(--sun-deep)) !important; color:var(--sea-deep) !important; }
.wl-footer-brand{ color:var(--sun-glow) !important; }

/* ── 7. spinner u sunset boji ── */
.spin{ border-top-color:var(--sun) !important; }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .page-hero-bg{ animation:none !important; }
}


/* ── 8. DEEP-SEA DARK (scooters/transfers = tamne kao homepage) ──
   Gazi html.dark vrijednosti iz style.css (učitava se poslije).  */
html.dark {
  color-scheme: dark;
  --bg:#071a2e; --surface:#0c2946; --surface2:#113355; --border:#1d4166; 
  --gold:#f7a823; --gold2:#ffce6b; --gold-dim:rgba(247,168,35,0.14);
  --teal:#46c2cc; --teal2:#8fe0e6; --teal-dim:rgba(70,194,204,0.12);
  --text:#eef5fb; --text2:#a7bdd1; --text3:#5f7a94;
  --green:#4ade80; --green-dim:rgba(74,222,128,0.12);
  --red:#ff7b7b;
}
/* nav: skrolovana traka tamna umjesto bijele */
html.dark .wl-nav.scrolled{
  background:rgba(7,26,46,0.92); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 2px 24px rgba(0,0,0,0.35);
}
/* logo uvijek bijel na tamnom (isti trik kao hero na homepage-u) */
html.dark .wl-brand-logo{ filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.35)); }
html.dark .wl-navlink{ color:rgba(255,255,255,0.85); }
html.dark .wl-navlink:hover{ color:#fff; background:rgba(70,194,204,0.14); }
html.dark .wl-navlink.active{ color:var(--sun-glow); }
/* footer u istoj boji mora, ne generičko crno */
html.dark .wl-footer{ background:linear-gradient(180deg,#071a2e,#050f1c); border-top:1px solid rgba(255,255,255,0.07); }
/* selekcija teksta u brend boji */
html.dark ::selection{ background:var(--sun); color:#071a2e; }



/* ── 9. SLIKE FLOTE: namjerni bijeli "studio" panel (fotke sa pozadinom se stapaju) ── */
.scooter-img-wrap{background:linear-gradient(180deg,#ffffff 0%,#eef2f6 100%);box-shadow:inset 0 0 0 1px rgba(7,26,46,0.06);}
img.scooter-img-inner{mix-blend-mode:multiply;} /* bijele pozadine fotki nestaju u panelu */

/* ── 10. MOTION SLOJ — "neko se ozbiljno potrudio" ── */
html{scroll-behavior:smooth;}
/* hero: stepenovani ulaz */
.page-hero-label,.page-hero h1,.page-hero p,.page-hero .wlx-trust{opacity:0;transform:translateY(18px);animation:wlRise .7s cubic-bezier(.2,.7,.3,1) forwards;}
.page-hero h1{animation-delay:.08s}.page-hero p{animation-delay:.16s}.page-hero .wlx-trust{animation-delay:.26s}
@keyframes wlRise{to{opacity:1;transform:none}}
/* scroll-reveal (components.js dodaje .wlr / .in) */
.wlr{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);}
.wlr.in{opacity:1;transform:none;}
/* kartice flote: kaskadni ulaz + dubina na hover */
.scooter-card{animation:wlCardIn .5s cubic-bezier(.2,.7,.3,1) both;}
.scooter-card:nth-child(2){animation-delay:.05s}.scooter-card:nth-child(3){animation-delay:.1s}
.scooter-card:nth-child(4){animation-delay:.15s}.scooter-card:nth-child(5){animation-delay:.2s}
.scooter-card:nth-child(6){animation-delay:.25s}.scooter-card:nth-child(7){animation-delay:.3s}
.scooter-card:nth-child(n+8){animation-delay:.35s}
@keyframes wlCardIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.scooter-card:hover{transform:translateY(-4px);}
img.scooter-img-inner{transition:transform .5s cubic-bezier(.2,.7,.3,1) !important;}
.scooter-card:hover img.scooter-img-inner{transform:scale(1.05);}
/* mikro-pritisak dugmadi + fokus prsten u brend boji */
.submit-btn:active,.book-btn:active,.scooter-select-btn:active,.wl-nav-wa:active{transform:scale(.97);}
:focus-visible{outline:2px solid var(--sun);outline-offset:2px;border-radius:4px;}
/* poštuj korisnike koji ne žele animacije */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .page-hero-label,.page-hero h1,.page-hero p,.page-hero .wlx-trust,.scooter-card{animation:none;opacity:1;transform:none;}
  .wlr{opacity:1;transform:none;transition:none;}
}


/* ── 11. SCROLL SLOJ ── */
#wlProgress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1200;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--sun),var(--sun-glow));pointer-events:none;}
.page-hero{overflow:hidden;}
.page-hero-bg{will-change:transform;}
.page-hero-inner{will-change:transform,opacity;}
@media(prefers-reduced-motion:reduce){#wlProgress{display:none;}}