/* look.css — "sky blue & white" visual refresh, matching the approved reference design.
   Loaded LAST on every page: only visual overrides, no behavior changes. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---- palette: sky blue + slate + white (was teal + warm off-white) ---- */
:root{
 --accent:#0369A1;--accent-hover:#075985;--accent-tint:#E0F2FE;
 --ink:#0F172A;--ink-2:#475569;--ink-3:#94A3B8;
 --line:#E2E8F0;--canvas:#F8FAFC;--surface:#FFFFFF;
 --pri:#0369A1;--pri2:#075985;--gold:#D97706;--amber:#D97706;--bg:#F8FAFC;--mut:#475569;
 --sh-1:0 1px 2px rgba(15,23,42,.06);--sh-2:0 4px 6px -1px rgba(15,23,42,.08),0 2px 4px -2px rgba(15,23,42,.06);
 --sh-3:0 20px 25px -5px rgba(15,23,42,.12),0 8px 10px -6px rgba(15,23,42,.06)
}

/* ---- type ---- */
body,button,input,select,textarea{font-family:"Inter","Heebo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
[lang=he],[dir=rtl]{font-family:"Heebo","Inter",sans-serif}

/* ---- brand ---- */
.logo b,.logo .mark{color:#0284C7!important}
a{color:var(--accent)}

/* ---- header: white, blurred, hairline bottom ---- */
header.top{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)!important;box-shadow:none!important}
.nh-body header.top #tSign,.nh-body header.top .tutil #tSign{background:#0369A1!important}
.nh-body header.top .tutil #tSign:hover{background:#075985!important}
.nh-body .nh-tn.on{background:var(--accent-tint)!important;color:var(--accent)!important}
.nh-body .nh-sheet .stab.on{background:var(--accent-tint)!important;color:var(--accent)!important}
.nh-body .dk-pill,.nh-body header.top .tutil .tsv{border-color:var(--line)!important}

/* ---- demo bar ---- */
.demo-bar{background:#0C4A6E!important;color:#E0F2FE!important}

/* ---- buttons & chips ---- */
.btn{border-radius:12px!important}
.btn.primary{background:var(--accent)!important;border-color:var(--accent)!important}
.btn.primary:hover,.btn.primary:active{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important}
.chip.on,.zchip.on,.achip.on,.fx-chip.on{background:var(--accent-tint)!important;border-color:var(--accent)!important;color:var(--accent)!important}

/* ---- cards: white, soft shadow, rounded-2xl ---- */
.card,.hopt,.fx-c,.kc,.kx-c,.tac,.actb,.vc,.carc,.arc,.coit,.cocard,.aoc,.hr-c{border-radius:16px!important;border-color:var(--line)!important;box-shadow:var(--sh-1)!important}
.fx-c:hover,.kc:hover,.hopt:hover,.tac:hover,.vc:hover{box-shadow:var(--sh-2)!important}
.card.sel,.hopt.sel,.fx-c.sel,.carc.sel,.tac.sel,.actb.sel,.hr-c.on,.aoc.on{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent) inset!important}

/* ---- homepage hero: photo on phone too, sky-blue gradient overlay ---- */
.nh-body .nh-photo:after{background:linear-gradient(90deg,rgba(12,74,110,.82),rgba(3,105,161,.5) 45%,rgba(3,105,161,.15) 78%,rgba(3,105,161,0)),linear-gradient(180deg,rgba(12,74,110,.25),rgba(12,74,110,0) 45%)!important}
@media (max-width:760px){
 .nh-body .nh-hero{position:relative;padding:0!important;margin:0!important}
 .nh-body .nh-photo{display:block!important;position:absolute;left:0;right:0;top:0;height:340px;background:#0C4A6E url(img/d_dubrovnik.jpg) center 40%/cover no-repeat}
 .nh-body .nh-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,74,110,.72),rgba(3,105,161,.45) 55%,rgba(12,74,110,.25))!important}
 .nh-body .nh-hin{position:relative;padding-top:56px!important;padding-bottom:20px}
 .nh-body .nh-hi{color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.3)}
 .nh-body .nh-h1{color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.35)}
 .nh-body .nh-pill{border:0!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(12,74,110,.35)!important}
 .nh-body .nh-quick a{background:rgba(255,255,255,.96)}
}

/* ---- calendar polish to match ---- */
.calm .calc{border-radius:20px 20px 0 0}
.cald.sa,.cald.sb{background:var(--accent)!important;color:#fff!important}
.cald.in{background:var(--accent-tint)!important}

/* ---- v2: closer match to the approved reference layout ---- */
/* brand: blue mark chip (was terracotta) */
.logo .mark{background:#0284C7!important;color:#fff!important}
.logo b{color:#0284C7!important}

@media (max-width:760px){
 /* visible white search card instead of the collapsed pill */
 .nh-body .nh-pill{display:none!important}
 .nh-body .nh-sheet{display:block!important;position:relative!important;inset:auto!important;z-index:6;background:#fff!important;border-radius:16px!important;box-shadow:0 12px 32px rgba(12,74,110,.18)!important;margin-top:18px!important;padding:12px 14px 14px!important;overflow:visible!important}
 .nh-body .nh-shead{display:none!important}
 .nh-body .nh-sheet .stabs{display:flex!important;gap:4px;margin-bottom:8px}
 .nh-body .nh-sheet .stab.on{background:var(--accent-tint);color:var(--accent)}
 /* hero breathes; card straddles the photo edge like the reference */
 .nh-body .nh-hin{padding-top:64px!important;padding-bottom:0!important}
 .nh-body .nh-photo{height:400px!important}
 .nh-body .nh-hero{margin-bottom:24px}
 .nh-body .nh-sec{margin-top:28px!important}
 /* popular destinations: full-width stacked cards like the reference, not a horizontal carousel */
 .nh-body .nh-row{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;gap:16px!important;scroll-snap-type:none;padding:0!important;margin:0!important}
 .nh-body .nh-row>*{width:auto!important;min-width:0!important;scroll-snap-align:none}
}