/* Корфу 2026 — стилове.
   Палитра и токени са в :root. Montserrat се зарежда от index.html. */

:root{
  --sand:#FFFCF6; --sand2:#FBF2E4; --sand3:#F4E6D2;
  --aqua:#2BA9A6; --aquaD:#0E767C; --aquaL:#86D2CC; --mist:#E6F4F1;
  --coral:#FF7E5F; --coralL:#FFA184; --gold:#FFB547; --gold2:#FFD089;
  --navy:#15454F; --navy2:#4E757F; --navy3:#8CA8AE;
  --white:#fff;
  --g-sea:linear-gradient(135deg,#2BA9A6 0%,#0E767C 100%);
  --g-sun:linear-gradient(120deg,#FF7E5F 0%,#FFB547 100%);
  --g-dawn:linear-gradient(160deg,#FFD089 0%,#FF9A76 45%,#2BA9A6 100%);
  --g-deep:linear-gradient(180deg,#0E767C 0%,#0A4E58 100%);
  --e:cubic-bezier(.22,.9,.28,1);
  --s1:0 2px 8px rgba(21,69,79,.06);
  --s2:0 8px 30px rgba(21,69,79,.1);
  --s3:0 20px 60px rgba(21,69,79,.16);
  --r:22px; --r2:16px; --r3:10px;
  --f:'Montserrat',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--sand);color:var(--navy);font-family:var(--f);font-size:15.5px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-family:var(--f);font-weight:800;line-height:1.1;letter-spacing:-.025em}
p{margin:0 0 .8em}
a{color:var(--aquaD)}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--coral);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--aqua)}
.num{font-variant-numeric:tabular-nums}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--e),transform .8s var(--e)}
.rv.in{opacity:1;transform:none}
.rv2{transition-delay:.1s}.rv3{transition-delay:.2s}.rv4{transition-delay:.3s}

/* ===== NAV ===== */
nav.top{position:fixed;top:0;left:0;right:0;z-index:60;transition:all .45s var(--e);padding:16px 0}
nav.top.stuck{background:rgba(255,252,246,.9);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(21,69,79,.08);padding:9px 0}
nav.top .wrap{display:flex;align-items:center;gap:6px}
.brand{font-weight:800;font-size:18px;letter-spacing:-.03em;color:var(--white);transition:color .45s var(--e);margin-right:auto;white-space:nowrap}
nav.stuck .brand{color:var(--navy)}
.nlinks{display:flex;gap:4px;align-items:center}
nav.top a.nl{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.86);text-decoration:none;padding:8px 13px;border-radius:999px;transition:all .35s var(--e);white-space:nowrap}
nav.top a.nl:hover{background:rgba(255,255,255,.18)}
nav.stuck a.nl{color:var(--navy2)}
nav.stuck a.nl:hover{background:var(--mist);color:var(--aquaD)}
@media(max-width:820px){.nlinks{display:none}}

/* ===== HERO ===== */
.hero{position:relative;min-height:min(100vh,880px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
@supports(height:100svh){.hero{min-height:min(100svh,880px)}}
.hero-bg{position:absolute;inset:0;z-index:-2;background:var(--g-deep)}
.hero-bg img{width:100%;height:100%;object-fit:cover;animation:slowzoom 26s var(--e) forwards}
@keyframes slowzoom{from{transform:scale(1.1)}to{transform:scale(1)}}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to bottom,rgba(10,52,60,.55) 0%,rgba(10,52,60,.1) 35%,rgba(10,52,60,.55) 72%,rgba(10,52,60,.9) 100%)}
.hero .wrap{padding-bottom:34px;padding-top:120px;width:100%}
.hero h1{font-size:clamp(44px,8.4vw,104px);color:var(--white);letter-spacing:-.045em;font-weight:800;margin:.14em 0 .18em;text-shadow:0 3px 40px rgba(6,40,46,.4)}
.hero h1 em{font-style:normal;background:var(--g-sun);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .eyebrow{color:var(--gold2)}
.hero-sub{max-width:50ch;color:rgba(255,255,255,.9);font-size:17px;font-weight:400;text-shadow:0 1px 20px rgba(6,40,46,.5)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.chip{background:rgba(255,255,255,.14);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 15px;color:var(--white);font-size:13px;font-weight:500}
.chip b{font-weight:800;color:var(--gold2)}
.scrolldn{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:22px;height:34px;border:2px solid rgba(255,255,255,.4);border-radius:12px;z-index:2}
.scrolldn::after{content:"";position:absolute;top:6px;left:50%;margin-left:-2px;width:4px;height:7px;border-radius:2px;background:var(--white);animation:sd 1.9s var(--e) infinite}
@keyframes sd{0%{opacity:0;transform:translateY(0)}35%{opacity:1}70%{opacity:0;transform:translateY(11px)}100%{opacity:0}}

/* ===== WEATHER ===== */
.wxband{background:var(--white);box-shadow:var(--s2);border-radius:var(--r);margin:-46px auto 0;position:relative;z-index:5;max-width:1232px;padding:20px 22px}
.wxband .wl{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.wxband .wl p{margin:0;font-size:13px;color:var(--navy2)}
.wx{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.wxd{flex:1 0 96px;border-radius:var(--r2);padding:12px 13px;background:var(--mist);transition:transform .4s var(--e)}
.wxd:hover{transform:translateY(-4px)}
.wxd.hot{background:linear-gradient(165deg,#FFE9C9,#FFD3A8)}
.wxd.dep{background:var(--sand2)}
.wxd .dd{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy2)}
.wxd .tt{font-size:26px;font-weight:800;letter-spacing:-.04em;margin-top:2px}
.wxd .nn{font-size:11px;color:var(--navy2);font-weight:500}

/* ===== SECTIONS ===== */
section{padding:78px 0;position:relative}
.sh{max-width:660px;margin-bottom:38px}
.sh h2{font-size:clamp(32px,5.2vw,56px);margin:.16em 0 .2em}
.sh p{font-size:16px;color:var(--navy2)}
.sh .eyebrow span{color:var(--coral)}

/* ===== FULL BLEED BAND ===== */
.band{position:relative;min-height:min(74vh,620px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.band-bg{position:absolute;inset:0;z-index:-2;background:var(--g-deep)}
.band-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.band-scrim{position:absolute;inset:0;z-index:-1}
.band-scrim.l{background:linear-gradient(100deg,rgba(8,48,55,.88) 0%,rgba(8,48,55,.6) 42%,rgba(8,48,55,.15) 78%)}
.band-scrim.c{background:linear-gradient(to bottom,rgba(8,48,55,.5),rgba(8,48,55,.72))}
.band .inner{max-width:600px;color:var(--white);padding:56px 0}
.band h2{font-size:clamp(30px,4.8vw,50px);color:var(--white);margin-bottom:.24em}
.band p{color:rgba(255,255,255,.9);font-size:16px}
.band .eyebrow{color:var(--gold2)}
.band.center .inner{max-width:740px;text-align:center;margin:0 auto}
.bstats{display:flex;gap:34px;flex-wrap:wrap;margin-top:28px}
.bstat b{display:block;font-size:34px;font-weight:800;letter-spacing:-.04em;background:var(--g-sun);-webkit-background-clip:text;background-clip:text;color:transparent}
.bstat span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f);font-size:13.5px;font-weight:700;cursor:pointer;padding:13px 22px;border-radius:999px;border:0;text-decoration:none;transition:all .4s var(--e);white-space:nowrap}
.btn.p{background:var(--g-sun);color:#4A1C0C;box-shadow:0 6px 22px rgba(255,126,95,.38)}
.btn.p:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,126,95,.5)}
.btn.a{background:var(--g-sea);color:var(--white);box-shadow:0 6px 22px rgba(14,118,124,.32)}
.btn.a:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(14,118,124,.44)}
.btn.g{background:rgba(255,255,255,.16);color:var(--white);border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(10px)}
.btn.g:hover{background:rgba(255,255,255,.28)}
.btn.o{background:var(--white);color:var(--navy);box-shadow:var(--s1)}
.btn.o:hover{transform:translateY(-2px);box-shadow:var(--s2)}
.btn.sm{padding:9px 16px;font-size:12.5px}

/* ===== MAP ===== */
#map{background:linear-gradient(180deg,var(--sand) 0%,var(--mist) 100%)}
.mgrid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:22px;align-items:start}
@media(max-width:1000px){.mgrid{grid-template-columns:1fr}}
.mcard{background:var(--white);border-radius:var(--r);box-shadow:var(--s2);overflow:hidden}
.mctl{display:flex;flex-wrap:wrap;gap:6px;padding:15px 16px;border-bottom:1px solid var(--sand3)}
.mb{font-family:var(--f);font-size:12px;font-weight:600;cursor:pointer;background:var(--sand2);border:0;color:var(--navy2);padding:8px 14px;border-radius:999px;transition:all .35s var(--e)}
.mb:hover{background:var(--mist);color:var(--aquaD)}
.mb[aria-pressed="true"]{background:var(--g-sea);color:var(--white);box-shadow:0 4px 14px rgba(14,118,124,.3)}
svg#isle{display:block;width:100%;height:auto;background:linear-gradient(170deg,#EAF6F4 0%,#D6EDEA 60%,#C4E4E2 100%)}
svg#isle .pin{cursor:pointer;transition:opacity .4s var(--e)}
svg#isle .pin .dot{transition:r .35s var(--e),filter .35s var(--e)}
svg#isle .pin.dim{opacity:.2}
svg#isle .pn{font-family:var(--f);font-size:11.5px;font-weight:800;fill:#fff;pointer-events:none}
@media(hover:hover){svg#isle .pin:hover .dot{r:14}}
svg#isle .pin.on .dot{r:15;stroke-width:3.4}
.mside{display:flex;flex-direction:column;gap:16px;position:sticky;top:74px}
@media(max-width:1000px){.mside{position:static}}
.dpanel{background:var(--white);border-radius:var(--r);box-shadow:var(--s2);overflow:hidden;min-height:220px}
.dpanel .dimg{position:relative;width:100%;height:172px;overflow:hidden;background:var(--mist)}
.dpanel .dimg .sc,.dpanel .dimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dpanel .dimg img{opacity:0;transition:opacity .9s var(--e)}
.dpanel .dimg img.ok{opacity:1}
.dnum{position:absolute;top:12px;left:12px;width:32px;height:32px;border-radius:50%;color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center;box-shadow:0 3px 12px rgba(6,40,46,.35);z-index:2}
.mleg{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:1px 8px;padding:15px 14px 17px;border-top:1px solid var(--sand3)}
.lg{display:flex;gap:9px;align-items:center;font-size:12.5px;font-weight:600;color:var(--navy2);background:none;border:0;font-family:var(--f);cursor:pointer;padding:5px 7px;border-radius:9px;text-align:left;transition:all .3s var(--e);line-height:1.3}
.lg:hover,.lg.on{background:var(--mist);color:var(--navy)}
.lg.dim{opacity:.3}
.lg b{width:21px;height:21px;flex:0 0 auto;border-radius:50%;color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center}
.dpanel .db{padding:18px 20px 20px}
.dtag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px;color:var(--white);margin-bottom:10px}
.dpanel h3{font-size:24px;margin-bottom:6px}
.dmeta{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:12px;font-weight:600;color:var(--aquaD);margin-bottom:10px}
.dpanel p{font-size:14px;color:var(--navy2);margin-bottom:.7em}
.dtip{font-size:13px;background:linear-gradient(120deg,#FFF3E2,#FFE8D6);border-radius:var(--r3);padding:11px 13px;color:#7A4A22;margin-top:10px;font-weight:500}
.dempty{padding:44px 24px;text-align:center;color:var(--navy3);font-size:13.5px}
.dempty svg{margin:0 auto 12px;opacity:.5}
.rbox{background:var(--white);border-radius:var(--r);box-shadow:var(--s2);padding:18px 20px}
.rbox h4{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua);margin-bottom:12px}
.rstop{display:flex;gap:11px;align-items:baseline;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--sand2)}
.rstop:last-of-type{border-bottom:0}
.rstop .rn{width:20px;height:20px;flex:0 0 auto;border-radius:50%;background:var(--mist);color:var(--aquaD);font-size:10px;font-weight:800;display:grid;place-items:center}
.rstop .rw{font-weight:600}
.rstop .rm{margin-left:auto;font-size:11px;color:var(--navy3);white-space:nowrap;font-weight:500}

/* ===== ACTIVITY CARDS ===== */
.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:30px}
.filt{font-family:var(--f);font-size:13px;font-weight:600;cursor:pointer;background:var(--white);border:1px solid var(--sand3);color:var(--navy2);padding:9px 17px;border-radius:999px;transition:all .38s var(--e);box-shadow:var(--s1)}
.filt:hover{transform:translateY(-2px);box-shadow:var(--s2);color:var(--aquaD)}
.filt[aria-pressed="true"]{background:var(--g-sea);color:var(--white);border-color:transparent;box-shadow:0 6px 18px rgba(14,118,124,.3)}
.filt i{font-style:normal;opacity:.6;font-weight:500;margin-left:4px}
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}
.ac{background:var(--white);border-radius:var(--r);box-shadow:var(--s1);overflow:hidden;display:flex;flex-direction:column;transition:transform .45s var(--e),box-shadow .45s var(--e)}
.ac:hover{transform:translateY(-6px);box-shadow:var(--s3)}
.ac .ph{position:relative;height:196px;overflow:hidden;background:var(--mist)}
.ac .ph .sc,.ac .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e),opacity .9s var(--e)}
.ac .ph img{opacity:0}
.ac .ph img.ok{opacity:1}
.ac:hover .ph .sc,.ac:hover .ph img{transform:scale(1.07)}
.ac .ph .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,48,55,.62) 0%,rgba(8,48,55,.05) 55%,transparent 100%)}
.ac .ph .tg{position:absolute;top:13px;left:13px;display:flex;gap:6px;flex-wrap:wrap}
.tg span{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:5px 10px;border-radius:999px;color:var(--white);backdrop-filter:blur(6px)}
.ac .ph .pr{position:absolute;bottom:13px;right:13px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:800;color:var(--navy)}
.ac .ph h3{position:absolute;bottom:13px;left:15px;right:100px;color:var(--white);font-size:20px;text-shadow:0 2px 16px rgba(6,40,46,.6)}
.ac .bd{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.ac .lede{font-size:14px;color:var(--navy2);margin-bottom:14px}
.sp{margin-top:auto;border-top:1px solid var(--sand2)}
.sp>div{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--sand2);font-size:13px}
.sp>div:last-child{border-bottom:0}
.sp dt{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua);width:72px;flex:0 0 auto;padding-top:3px}
.sp dd{margin:0;flex:1;font-weight:500}
.sp dd b{font-weight:700}
.tip{font-size:13px;border-radius:var(--r3);padding:11px 13px;margin-top:14px;font-weight:500;background:linear-gradient(120deg,#FFF3E2,#FFE8D6);color:#7A4A22}
.tip.w{background:linear-gradient(120deg,#FFEAE4,#FFDBD1);color:#8C3A24}
.tip.g{background:linear-gradient(120deg,#E6F4F1,#D6EDE9);color:#0B5A60}
.ac .cta{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}

/* ===== PLANNER ===== */
#plan{background:linear-gradient(180deg,var(--mist) 0%,var(--sand) 46%)}
.pb{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:22px;align-items:start}
@media(max-width:1000px){.pb{grid-template-columns:1fr}}
.plib{display:flex;flex-direction:column;gap:7px;max-height:min(78vh,940px);overflow-y:auto;padding:4px}
.pill{background:var(--white);border-radius:var(--r2);box-shadow:var(--s1);padding:11px 13px;display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;cursor:grab;transition:all .35s var(--e)}
.pill:hover{transform:translateX(4px);box-shadow:var(--s2)}
.pill.dragging{opacity:.35}
.pill .sw{width:8px;height:34px;border-radius:5px;flex:0 0 auto}
.pill .pn{font-size:13.8px;font-weight:700;line-height:1.28}
.pill .pm{font-size:11px;color:var(--navy3);font-weight:500;margin-top:1px}
.ib{width:32px;height:32px;flex:0 0 auto;cursor:pointer;background:var(--mist);color:var(--aquaD);border:0;border-radius:50%;font-size:17px;font-weight:600;display:grid;place-items:center;font-family:var(--f);transition:all .35s var(--e)}
.ib:hover{background:var(--g-sun);color:#4A1C0C;transform:rotate(90deg)}
.rail{background:var(--white);border-radius:var(--r);box-shadow:var(--s2);padding:22px}
.days{display:flex;flex-direction:column;gap:10px}
.day{border-radius:var(--r2);padding:13px 15px;background:var(--sand);border:2px solid transparent;transition:all .4s var(--e)}
.day.over{border-color:var(--coral);background:#FFF6F2;transform:scale(1.012)}
.day.sel{border-color:var(--aqua);background:var(--mist)}
.dtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dtop .dn{font-size:17px;font-weight:800;letter-spacing:-.02em}
.dtop .dd{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy3)}
.dtop .dg{margin-left:auto;display:flex;gap:6px;align-items:center}
.dtemp{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--mist);color:var(--aquaD)}
.dtemp.hot{background:linear-gradient(120deg,#FFE9C9,#FFD3A8);color:#8A5417}
.dfix{font-size:11.5px;color:var(--navy3);font-weight:600;margin-top:3px}
.slot{margin-top:11px;display:flex;flex-direction:column;gap:6px;min-height:30px}
.mt{border:2px dashed var(--sand3);border-radius:var(--r3);padding:12px;text-align:center;font-size:12px;color:var(--navy3);font-weight:600}
.it{background:var(--white);border-radius:var(--r3);box-shadow:var(--s1);padding:9px 11px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;cursor:grab;transition:all .3s var(--e)}
.it:hover{box-shadow:var(--s2)}
.it.dragging{opacity:.35}
.it .sw{width:6px;height:28px;border-radius:4px;flex:0 0 auto}
.it .inm{font-size:13.4px;font-weight:700;line-height:1.25}
.it .im{font-size:10.5px;color:var(--navy3);font-weight:500;margin-top:1px}
.ibs{display:flex;gap:3px}
.mn{width:25px;height:25px;cursor:pointer;border:0;background:var(--sand2);color:var(--navy2);font-size:11px;border-radius:7px;display:grid;place-items:center;font-family:var(--f);font-weight:700;transition:all .3s var(--e)}
.mn:hover{background:var(--aqua);color:var(--white)}
.mn.x:hover{background:var(--coral)}
.adv{font-size:11.5px;margin-top:6px;padding:8px 11px;border-radius:var(--r3);font-weight:600;background:linear-gradient(120deg,#FFF3E2,#FFE8D6);color:#8A5417}
.adv.ok{background:var(--mist);color:#0B5A60}
.dacts{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.dab{font-size:11px;font-weight:700;cursor:pointer;text-decoration:none;padding:7px 13px;border-radius:999px;background:var(--sand2);color:var(--navy2);border:0;font-family:var(--f);transition:all .35s var(--e)}
.dab:hover{background:var(--g-sea);color:var(--white)}
.dab.k:hover{background:var(--g-sun);color:#4A1C0C}
.bud{margin-top:22px;padding-top:18px;border-top:2px solid var(--sand2)}
.br{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:5px 0;font-weight:500}
.br.t{border-top:2px solid var(--sand2);margin-top:10px;padding-top:13px;font-weight:800;font-size:16px}
.br.t .num{background:var(--g-sun);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:19px;font-weight:800}
.fx{display:flex;align-items:center;gap:10px;font-size:13px;padding:5px 0;cursor:pointer;font-weight:500}
.fx input{accent-color:var(--coral);width:17px;height:17px;cursor:pointer;flex:0 0 auto}
.fx .num{margin-left:auto;color:var(--navy3);font-size:12px;font-weight:600}
.racts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* ===== FOOD ===== */
#food{background:var(--sand)}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.fcol>h3{font-size:24px;margin-bottom:4px}
.fcol .cs{font-size:13.5px;color:var(--navy2);margin-bottom:18px}
.pl{background:var(--white);border-radius:var(--r2);box-shadow:var(--s1);margin-bottom:10px;padding:14px 16px;border-left:5px solid var(--aqua);transition:all .4s var(--e)}
.pl:hover{transform:translateX(5px);box-shadow:var(--s2)}
.pl.tk{border-left-color:var(--coral)}
.pl.st{border-left-color:var(--gold)}
.ptop{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pl h4{font-size:15.5px;font-weight:800}
.pl .wk{font-size:11.5px;font-weight:800;color:var(--aqua);white-space:nowrap}
.pl .hr{font-size:11.5px;color:var(--navy3);margin-top:4px;font-weight:600}
.pl .wy{font-size:13.2px;margin-top:7px;color:var(--navy2)}
.pl .et{font-size:12px;color:var(--aquaD);margin-top:5px;font-weight:700}
.pl .st2{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--coral);margin-top:6px}
.pl a.mp{font-size:11.5px;font-weight:700;color:var(--aquaD);text-decoration:none;margin-top:8px;display:inline-flex;gap:5px;align-items:center;transition:gap .3s var(--e)}
.pl a.mp:hover{gap:9px}
.co{border-radius:var(--r);padding:26px 28px;margin-top:30px;background:var(--g-sea);color:var(--white);box-shadow:var(--s2)}
.co h3{font-size:25px;margin-bottom:9px;color:var(--white)}
.co p{font-size:14.5px;color:rgba(255,255,255,.94);margin-bottom:0}
.co p+p{margin-top:.7em}
.co b{color:var(--gold2);font-weight:700}

/* ===== REFERENCE ===== */
#ref{background:linear-gradient(180deg,var(--sand) 0%,var(--sand2) 100%)}
.rg{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.rc{background:var(--white);border-radius:var(--r);box-shadow:var(--s1);padding:24px}
.rc h3{font-size:20px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.rc h3::before{content:"";width:32px;height:4px;border-radius:3px;background:var(--g-sun);flex:0 0 auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 8px 8px 0;border-bottom:1px solid var(--sand2);vertical-align:top}
th{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--aqua)}
td b{font-weight:700}
td.tm{font-size:11.5px;line-height:1.55;color:var(--navy2);font-variant-numeric:tabular-nums}
td.pz{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
ol.ck{padding:0;list-style:none;counter-reset:c;margin:0}
ol.ck li{counter-increment:c;position:relative;padding:13px 0 13px 40px;border-bottom:1px solid var(--sand2);font-size:13.5px;color:var(--navy2)}
ol.ck li:last-child{border-bottom:0}
ol.ck li::before{content:counter(c);position:absolute;left:0;top:12px;width:27px;height:27px;border-radius:50%;background:var(--g-sun);color:#4A1C0C;font-size:12px;font-weight:800;display:grid;place-items:center}
ol.ck li b{display:block;font-size:14.5px;color:var(--navy);margin-bottom:2px}
ul.nt{list-style:none;padding:0;margin:0}
ul.nt li{padding:10px 0 10px 24px;border-bottom:1px solid var(--sand2);font-size:13.4px;position:relative;color:var(--navy2)}
ul.nt li:last-child{border-bottom:0}
ul.nt li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:9px;border-radius:50%;background:var(--aquaL)}
ul.nt li b{color:var(--navy)}

/* ===== MODAL / TOAST ===== */
.mo{position:fixed;inset:0;background:rgba(10,52,60,.6);backdrop-filter:blur(6px);display:none;place-items:center;padding:20px;z-index:80;opacity:0;transition:opacity .35s var(--e)}
.mo.on{display:grid;opacity:1}
.sht{background:var(--white);max-width:450px;width:100%;padding:26px;max-height:88vh;overflow-y:auto;border-radius:var(--r);box-shadow:var(--s3);transform:translateY(14px) scale(.98);transition:transform .4s var(--e)}
.mo.on .sht{transform:none}
.sht h3{font-size:24px;margin-bottom:4px}
.sht .ss{font-size:13.5px;color:var(--navy2);margin-bottom:18px}
.pk{display:flex;width:100%;gap:10px;align-items:center;text-align:left;cursor:pointer;background:var(--sand);border:0;border-radius:var(--r2);padding:13px 15px;margin-bottom:7px;font-family:var(--f);font-size:14px;font-weight:700;color:var(--navy);transition:all .35s var(--e)}
.pk:hover{background:var(--mist);transform:translateX(4px)}
.pk .num{font-size:11.5px;font-weight:600;opacity:.6;margin-left:auto}
textarea{width:100%;height:250px;font-family:ui-monospace,monospace;font-size:11.5px;padding:13px;border:1px solid var(--sand3);border-radius:var(--r2);background:var(--sand);color:var(--navy);resize:vertical}
.tst{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(22px);background:var(--navy);color:var(--white);padding:13px 24px;border-radius:999px;font-size:13.5px;font-weight:700;opacity:0;transition:all .4s var(--e);pointer-events:none;z-index:90;box-shadow:var(--s3)}
.tst.on{opacity:1;transform:translateX(-50%) translateY(0)}

footer{background:var(--navy);color:rgba(255,255,255,.62);padding:44px 0;font-size:13px}
footer b{color:rgba(255,255,255,.92)}
footer .fl{display:flex;gap:30px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
footer .fb{max-width:56ch}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}.rv{opacity:1;transform:none}}

/* ============================================================
   МОБИЛНО
   Точка на пречупване 820px — същата, на която падат .nlinks.
   .m-only се вижда само на телефон, .d-only само на голям екран.
   ============================================================ */
.m-only{display:none}
@media(max-width:820px){.m-only{display:block}.d-only{display:none}}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-size:13px;font-weight:700;text-decoration:none}
.skip:focus{left:0}

/* ===== HAMBURGER ===== */
.burger{display:none;width:44px;height:44px;flex:0 0 auto;border:0;background:rgba(255,255,255,.16);border-radius:14px;cursor:pointer;
  padding:0;place-items:center;gap:4.5px;flex-direction:column;backdrop-filter:blur(10px);transition:background .35s var(--e)}
.burger span{display:block;width:19px;height:2px;border-radius:2px;background:#fff;transition:background .35s var(--e)}
nav.stuck .burger{background:var(--mist)}
nav.stuck .burger span{background:var(--navy)}
@media(max-width:820px){.burger{display:flex}}
a.brand{text-decoration:none}

/* ===== DRAWER ===== */
.drawer{position:fixed;inset:0;z-index:100;display:none}
.drawer.on{display:block}
.drawer::before{content:"";position:absolute;inset:0;background:rgba(10,52,60,.55);backdrop-filter:blur(5px);opacity:0;transition:opacity .35s var(--e)}
.drawer.show::before{opacity:1}
.dsheet{position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);background:var(--sand);box-shadow:-18px 0 60px rgba(21,69,79,.28);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .42s var(--e);
  padding:max(18px,env(safe-area-inset-top)) 0 max(18px,env(safe-area-inset-bottom))}
.drawer.show .dsheet{transform:none}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:6px 20px 14px}
.dclose{width:42px;height:42px;border:0;background:var(--white);box-shadow:var(--s1);border-radius:50%;font-size:26px;line-height:1;color:var(--navy2);cursor:pointer;font-family:var(--f)}
.dlinks{display:flex;flex-direction:column;padding:4px 12px;overflow-y:auto;flex:1}
.dlinks a{display:block;text-decoration:none;padding:14px 14px;border-radius:var(--r2);transition:background .3s var(--e)}
.dlinks a:active{background:var(--mist)}
.dlinks b{display:block;font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.dlinks span{display:block;font-size:12.5px;color:var(--navy3);font-weight:500;margin-top:1px}
.dfoot{display:flex;gap:10px;padding:14px 22px 4px;border-top:1px solid var(--sand3);font-size:12px;color:var(--navy2)}
.dfoot b{color:var(--navy);font-weight:800;display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--aqua)}
body.lock{overflow:hidden;touch-action:none}

/* ===== WEATHER: снап-карусел ===== */
@media(max-width:820px){
  .wx{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px}
  .wx::-webkit-scrollbar{display:none}
  .wxd{flex:0 0 108px;scroll-snap-align:start}
}

/* ===== ACTS: карусел на телефон ===== */
.actwrap{position:relative}
.cnav{display:none}
@media(max-width:820px){
  /* align-items:flex-start — иначе всяка карта става висока колкото
     най-високата в целия карусел и отдолу зее празно място */
  .acts{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    align-items:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px;padding:4px 20px 6px}
  .acts::-webkit-scrollbar{display:none}
  .acts>.ac{flex:0 0 min(84vw,380px);scroll-snap-align:center;opacity:1;transform:none}
  .cnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
  .cbtn{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:50%;background:var(--white);box-shadow:var(--s1);
    color:var(--navy);font-size:22px;line-height:1;cursor:pointer;font-family:var(--f);display:grid;place-items:center}
  .cbtn:disabled{opacity:.32}
  .cdots{display:flex;gap:6px;align-items:center;max-width:52vw;overflow:hidden}
  .cdot{width:22px;height:22px;flex:0 0 auto;border:0;padding:0;cursor:pointer;background:transparent;display:grid;place-items:center}
  .cdot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sand3);transition:all .3s var(--e)}
  .cdot.on::before{background:var(--aqua);width:20px;border-radius:4px}
}

/* ===== FOOD: табове + плъзгане ===== */
.ftabs{display:none}
@media(max-width:820px){
  .ftabs{display:flex;gap:6px;margin-bottom:18px;overflow-x:auto;scrollbar-width:none;margin-left:-20px;margin-right:-20px;padding:0 20px}
  .ftabs::-webkit-scrollbar{display:none}
  .ftab{flex:0 0 auto;font-family:var(--f);font-size:13px;font-weight:700;cursor:pointer;background:var(--white);
    border:1px solid var(--sand3);color:var(--navy2);padding:11px 17px;border-radius:999px;box-shadow:var(--s1);min-height:44px}
  .ftab[aria-selected="true"]{background:var(--g-sea);color:var(--white);border-color:transparent;box-shadow:0 6px 18px rgba(14,118,124,.3)}
  .fg{display:flex;grid-template-columns:none;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px}
  .fg::-webkit-scrollbar{display:none}
  .fcol{flex:0 0 100%;scroll-snap-align:start;padding:0 20px;opacity:1;transform:none}
  .fcol>h3{display:none}
  .fcol .cs{margin-bottom:12px}
}

/* ===== PLANNER на телефон ===== */
@media(max-width:820px){
  .plib{max-height:0;overflow:hidden;padding:0;transition:max-height .45s var(--e)}
  .plibwrap.open .plib{max-height:none;padding:4px 4px 0;margin-top:10px}
  .libtog{width:100%;font-family:var(--f);font-size:13.5px;font-weight:700;cursor:pointer;background:var(--white);
    border:1px solid var(--sand3);color:var(--navy);padding:14px 18px;border-radius:var(--r2);box-shadow:var(--s1);
    display:flex;align-items:center;justify-content:space-between;min-height:48px}
  .libtog i{font-style:normal;font-size:11px;font-weight:700;color:var(--white);background:var(--aqua);
    border-radius:999px;padding:3px 9px;transition:transform .35s var(--e)}
  .plibwrap.open .libtog{border-radius:var(--r2) var(--r2) 0 0}
  .plibwrap.open .libtog i{transform:rotate(180deg)}
  .pill{cursor:default}
  .pill:hover{transform:none}
  /* по-едри контроли за пръст */
  .mn{width:38px;height:38px;font-size:13px;border-radius:10px}
  .ibs{gap:5px}
  .dab{padding:11px 16px;font-size:12px;min-height:44px;display:inline-flex;align-items:center}
  .ib{width:40px;height:40px;font-size:20px}
  .fx{padding:9px 0;min-height:44px}
  .fx input{width:21px;height:21px}
  .racts .btn{flex:1 1 auto;justify-content:center;min-height:46px}
  /* добавяне направо в деня */
  .dadd{width:100%;margin-top:9px;font-family:var(--f);font-size:13px;font-weight:700;cursor:pointer;
    background:var(--mist);color:var(--aquaD);border:0;border-radius:var(--r3);padding:12px;min-height:44px}
  /* плъзгане наляво = премахване */
  .it{touch-action:pan-y}
  .itw{position:relative;overflow:hidden;border-radius:var(--r3)}
  .itw::after{content:"Премахни";position:absolute;top:0;right:0;bottom:0;width:100%;display:flex;align-items:center;
    justify-content:flex-end;padding-right:16px;background:var(--coral);color:#fff;font-size:12px;font-weight:800;
    border-radius:var(--r3);z-index:0}
  .itw .it{position:relative;z-index:1}
}
.dadd{display:none}
@media(max-width:820px){.dadd{display:block}}

/* ===== MAP на телефон ===== */
@media(max-width:820px){
  .mleg{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));padding:12px 10px 14px}
  .lg{padding:9px 7px;min-height:44px}
  .mctl{gap:6px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .mctl::-webkit-scrollbar{display:none}
  .mb{flex:0 0 auto;min-height:40px}
}

/* ===== BOTTOM SHEET на телефон ===== */
@media(max-width:820px){
  .mo{place-items:end;padding:0}
  .sht{max-width:none;border-radius:var(--r) var(--r) 0 0;max-height:86vh;
    padding:10px 20px max(22px,env(safe-area-inset-bottom));transform:translateY(100%)}
  .mo.on .sht{transform:none}
  .sht::before{content:"";display:block;width:40px;height:4px;border-radius:3px;background:var(--sand3);margin:0 auto 16px}
  .pk{padding:15px 16px;min-height:56px}
  .tst{bottom:calc(18px + env(safe-area-inset-bottom));width:max-content;max-width:88vw;text-align:center}
}

/* ===== ПЛАЖОВЕТЕ ===== */
#beaches{background:linear-gradient(180deg,var(--sand) 0%,var(--mist) 55%,var(--sand) 100%)}
.bfilt{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.bf{font-family:var(--f);font-size:13px;font-weight:600;cursor:pointer;background:var(--white);
  border:1px solid var(--sand3);color:var(--navy2);padding:9px 16px;border-radius:999px;
  box-shadow:var(--s1);transition:all .35s var(--e);display:inline-flex;align-items:center;gap:8px;min-height:42px}
.bf i{width:9px;height:9px;border-radius:50%;font-style:normal;display:block}
.bf b{font-style:normal;font-weight:700;opacity:.55;font-size:11.5px}
.bf[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:transparent}
.bf[aria-pressed="true"] b{opacity:.7}
.bgrid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:22px;align-items:start;margin-bottom:30px}
.bgrid>*{min-width:0}
@media(max-width:1000px){.bgrid{grid-template-columns:1fr}}
.bmapcard{background:var(--white);border-radius:var(--r);box-shadow:var(--s2);overflow:hidden}
svg#bmap{display:block;width:100%;height:auto;background:linear-gradient(170deg,#EAF6F4 0%,#D6EDEA 60%,#C4E4E2 100%)}
svg#bmap .bpin{cursor:pointer;transition:opacity .4s var(--e)}
svg#bmap .bpin .bd{transition:r .3s var(--e)}
@media(hover:hover){svg#bmap .bpin:hover .bd{r:14}}
svg#bmap .bpin.on .bd{r:15;stroke-width:3.4}
svg#bmap .bpin.dim{opacity:.18}
svg#bmap .bn{font-family:var(--f);font-size:11.5px;font-weight:800;fill:#fff;pointer-events:none}
.bleg{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:1px 8px;padding:14px 13px 16px;border-top:1px solid var(--sand3)}
.blg{display:flex;gap:9px;align-items:center;font-size:12.5px;font-weight:600;color:var(--navy2);background:none;
  border:0;font-family:var(--f);cursor:pointer;padding:6px 7px;border-radius:9px;text-align:left;line-height:1.3;transition:all .3s var(--e)}
.blg:hover,.blg.on{background:var(--mist);color:var(--navy)}
.blg.dim{opacity:.3}
.blg b{width:21px;height:21px;flex:0 0 auto;border-radius:50%;color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center}
.bside{position:sticky;top:74px}
@media(max-width:1000px){.bside{position:static}}
.bpanel{background:var(--white);border-radius:var(--r);box-shadow:var(--s2);overflow:hidden;min-height:240px}
.bpanel .bph{position:relative;height:180px;background:var(--mist);overflow:hidden}
.bpanel .bph .sc,.bpanel .bph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bpanel .bph img{opacity:0;transition:opacity .9s var(--e)}
.bpanel .bph img.ok{opacity:1}
.bpanel .bbd{padding:17px 19px 19px}
.bempty{padding:46px 24px;text-align:center;color:var(--navy3);font-size:13.5px;font-weight:600}
.bempty svg{margin:0 auto 12px;opacity:.5;display:block}

/* карти на плажовете */
.bcardwrap{position:relative}
.bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px}
.bc{background:var(--white);border-radius:var(--r);box-shadow:var(--s1);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .45s var(--e),box-shadow .45s var(--e);scroll-margin-top:80px}
.bc:hover{transform:translateY(-5px);box-shadow:var(--s3)}
.bc.on{outline:3px solid var(--aqua);outline-offset:-3px}
.bc .ph{position:relative;height:200px;overflow:hidden;background:var(--mist)}
.bc .ph .sc,.bc .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s var(--e)}
.bc .ph img{opacity:0}
.bc .ph img.ok{opacity:1}
.bc .ph .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,48,55,.66) 0%,rgba(8,48,55,.05) 55%,transparent 100%)}
.bc .ph h3{position:absolute;bottom:12px;left:15px;right:80px;color:#fff;font-size:20px;text-shadow:0 2px 16px rgba(6,40,46,.6)}
.bc .ph .cst{position:absolute;top:12px;left:12px;font-size:9.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;color:#fff;backdrop-filter:blur(6px)}
.bc .ph .kid{position:absolute;bottom:12px;right:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-radius:999px;padding:5px 11px;font-size:11px;font-weight:800;color:var(--navy)}
/* галерия точки */
.bgal{position:absolute;top:12px;right:12px;display:flex;gap:5px;z-index:2}
.bgal button{width:24px;height:24px;border:0;padding:0;cursor:pointer;background:transparent;display:grid;place-items:center}
.bgal button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(6,40,46,.4);transition:all .3s var(--e)}
.bgal button.on::before{background:#fff;width:19px;border-radius:4px}
.bc .bd{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1}
.bc .lede{font-size:13.8px;color:var(--navy2);margin-bottom:13px}
.bspec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--sand2);border-radius:var(--r3);overflow:hidden;margin-bottom:12px}
.bspec div{background:var(--white);padding:8px 10px}
.bspec dt{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua);margin:0}
.bspec dd{margin:0;font-size:12.5px;font-weight:600;line-height:1.3;margin-top:2px}
.bfac{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.bfac span{font-size:10.5px;font-weight:700;background:var(--mist);color:var(--aquaD);padding:4px 9px;border-radius:999px}
.bmoney{border-top:1px solid var(--sand2);border-bottom:1px solid var(--sand2);padding:10px 0;margin-bottom:12px}
.bmoney>div{display:flex;gap:11px;font-size:12.5px;padding:4px 0}
.bmoney dt{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);width:66px;flex:0 0 auto;padding-top:2px;margin:0}
.bmoney dd{margin:0;flex:1;color:var(--navy2);font-weight:500}
.btrans{background:var(--sand);border-radius:var(--r3);padding:11px 13px;margin-bottom:12px}
.btrans .bl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.btrans .line{font-size:11px;font-weight:800;background:var(--g-sea);color:#fff;padding:4px 10px;border-radius:999px}
.btrans .tm{font-size:12.5px;font-weight:800;color:var(--navy)}
.btrans .pr{font-size:12px;font-weight:700;color:var(--aquaD)}
.btrans .fr{font-size:11.5px;color:var(--navy2);font-weight:600}
.btrans .nt{font-size:11.5px;color:var(--navy3);margin-top:4px;line-height:1.45}
.btrans .car{font-size:11.5px;font-weight:700;color:var(--navy2);margin-top:6px;padding-top:6px;border-top:1px dashed var(--sand3)}
/* маршрутът стъпка по стъпка */
.jrny{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.jrny.none{display:block;font-size:12.5px;font-weight:600;color:var(--navy2);background:var(--sand2);
  border-radius:var(--r3);padding:10px 12px;margin-bottom:11px}
.leg{display:flex;gap:7px;align-items:center;background:var(--sand);border-radius:var(--r3);padding:8px 10px;flex:1 1 auto;min-width:0}
.leg.b{background:var(--mist)}
.leg .ic{font-size:14px;line-height:1;flex:0 0 auto}
.leg .lt{display:flex;flex-direction:column;min-width:0}
.leg .lt b{font-size:12px;font-weight:800;line-height:1.25;color:var(--navy)}
.leg .lt i{font-style:normal;font-size:10.5px;color:var(--navy3);font-weight:600;margin-top:1px}
.jrny .arw{align-self:center;color:var(--navy3);font-size:13px;font-weight:800;flex:0 0 auto}
.jtot{font-size:11.5px;font-weight:700;color:var(--aquaD);margin-bottom:11px}
.jtot b{font-weight:800}
.bpanel .jrny{margin-top:10px}
.bbest{font-size:12px;font-weight:700;color:var(--aquaD);background:var(--mist);border-radius:var(--r3);padding:9px 11px;margin-bottom:11px}
.bc .cta{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
@media(max-width:820px){
  .bcards{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    align-items:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px;padding:4px 20px 6px}
  .bcards::-webkit-scrollbar{display:none}
  .bcards>.bc{flex:0 0 min(84vw,380px);scroll-snap-align:center}
  .bfilt{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin:0 -20px 18px;padding:0 20px 2px}
  .bfilt::-webkit-scrollbar{display:none}
  .bf{flex:0 0 auto}
  .bleg{grid-template-columns:1fr 1fr;padding:12px 10px 14px}
  .blg{min-height:44px}
  .bspec{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){.bcards>.bc{flex-basis:88vw}.bleg{grid-template-columns:1fr}}

/* ===== ГРАДСКАТА КАРТА ===== */
.citywrap{background:var(--white);border-radius:var(--r);box-shadow:var(--s2);padding:22px;margin-bottom:30px}
.cityhead{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.cityhead h3{font-size:26px;margin:.14em 0 .2em}
.cityhead p{font-size:13.5px;color:var(--navy2);margin:0;max-width:52ch}
.cityctl{display:flex;gap:6px;flex-wrap:wrap}
.cb{font-family:var(--f);font-size:12px;font-weight:700;cursor:pointer;background:var(--sand2);border:0;color:var(--navy2);
  padding:9px 14px;border-radius:999px;transition:all .35s var(--e);display:inline-flex;align-items:center;gap:7px;min-height:40px}
.cb i{width:9px;height:9px;border-radius:50%;display:block;font-style:normal}
.cb[aria-pressed="true"]{background:var(--navy);color:#fff}
/* същата подредба като островната карта: карта вляво, подробности вдясно */
.citygrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
/* без това плъзгащата се карта (660px) разтяга колоната и цялата страница тръгва настрани */
.citygrid>*{min-width:0}
.cmapcard{min-width:0;overflow:hidden}
@media(max-width:1000px){.citygrid{grid-template-columns:1fr}}
.cside{position:sticky;top:74px}
@media(max-width:1000px){.cside{position:static}}
.citymap{position:relative;border-radius:var(--r2);overflow:hidden;background:#DCEFEC}
svg#cmap{display:block;width:100%;height:auto}
svg#cmap .cpin{cursor:pointer}
svg#cmap .cpin .cd{transition:r .3s var(--e)}
@media(hover:hover){svg#cmap .cpin:hover .cd{r:11}}
svg#cmap .cpin.on .cd{r:12;stroke-width:3.2}
svg#cmap .cpin.hide{display:none}
/* панелът с подробности — вдясно от картата на голям екран, отдолу на телефон */
.cinfo{background:var(--sand);border:1px solid var(--sand3);border-radius:var(--r2);padding:16px 18px;min-height:150px}
.cinfo .ctag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;color:#fff;margin-bottom:9px}
.cinfo{padding:0;overflow:hidden}
.cinfo>*:not(.cimg){margin-left:18px;margin-right:18px}
.cinfo>.ctag{margin-top:16px}
.cinfo>.cmp{margin-bottom:16px}
.cinfo .cempty{margin:0;padding:40px 18px}
.cimg{position:relative;height:152px;background:var(--mist);overflow:hidden;margin:0 0 14px}
.cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--e)}
.cimg img.ok{opacity:1}
.clede{font-size:13px;color:var(--navy2);margin:0 0 10px;line-height:1.5}
/* надписите върху градската карта */
svg#cmap .clbl{font-family:var(--f);font-weight:700;fill:#15454F;paint-order:stroke;
  stroke:#FBF3E6;stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}
.cinfo h4{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 3px}
.cinfo .cw{font-size:12px;font-weight:700;color:var(--aquaD);margin-bottom:9px}
.cinfo .crow{display:grid;grid-template-columns:96px 1fr;gap:10px;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--sand3)}
.cinfo .crow:last-of-type{border-bottom:0}
.cinfo .crow dt{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--aqua);
  padding-top:2px;margin:0;line-height:1.35;word-break:break-word}
.cinfo .crow dd{margin:0;font-weight:500;color:var(--navy2)}
.cinfo .cnote{font-size:12px;background:linear-gradient(120deg,#FFF3E2,#FFE8D6);color:#7A4A22;
  border-radius:var(--r3);padding:9px 11px;margin-top:10px;font-weight:600}
.cinfo a.cmp{font-size:12px;font-weight:700;color:var(--aquaD);text-decoration:none;margin-top:12px;
  display:inline-flex;gap:5px;align-items:center;transition:gap .3s var(--e)}
.cinfo a.cmp:hover{gap:9px}
.cempty{color:var(--navy3);font-size:13px;text-align:center;padding:34px 12px;font-weight:600}
.cempty svg{margin:0 auto 10px;opacity:.5;display:block}
.cinfo b{display:block;font-size:15px;font-weight:800;letter-spacing:-.015em}
.cinfo span{font-size:12.5px;color:var(--navy2)}
.cinfo a{font-size:12px;font-weight:700;color:var(--aquaD);text-decoration:none;margin-top:5px;display:inline-block}
.cityleg{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 10px;margin-top:14px}
.clg{display:flex;gap:9px;align-items:center;font-size:12.5px;font-weight:600;color:var(--navy2);background:none;border:0;
  font-family:var(--f);cursor:pointer;padding:7px;border-radius:9px;text-align:left;line-height:1.3;transition:background .3s var(--e)}
.clg:hover,.clg.on{background:var(--mist);color:var(--navy)}
.clg i{width:11px;height:11px;flex:0 0 auto;border-radius:50%;font-style:normal}
.clg.hide{display:none}
.cityhint{display:none;font-size:11.5px;color:var(--navy3);font-weight:600;margin-top:8px;text-align:center}
.citynote{grid-column:1/-1;font-size:11.5px;color:var(--navy3);padding:10px 7px 0;border-top:1px solid var(--sand2);margin-top:8px}
.citynote a{color:var(--aquaD)}
@media(max-width:820px){
  .citywrap{padding:16px;margin-bottom:24px}
  .cityhead h3{font-size:22px}
  .cityctl{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .cityctl::-webkit-scrollbar{display:none}
  .cb{flex:0 0 auto}
  .cityleg{grid-template-columns:1fr 1fr}
  .clg{min-height:44px;font-size:12px}
  /* Картата не се свива до неуцелваема — държи се по-широка и се плъзга
     настрани с пръст. Вертикалното плъзгане си остава скрол на страницата. */
  .citymap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .citymap::-webkit-scrollbar{display:none}
  svg#cmap{width:660px;max-width:none}
  .cinfo{margin-top:12px;padding:14px 16px;min-height:0}
  .cityhint{display:block}
}
@media(max-width:400px){.cityleg{grid-template-columns:1fr}}

/* ===== СПОДЕЛЕНИ ПЛАНОВЕ ===== */
.shared{margin-top:26px;background:var(--white);border-radius:var(--r);box-shadow:var(--s2);padding:22px}
.shhead{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.shsub{font-size:13px;color:var(--navy2);margin:5px 0 0;max-width:62ch}
.shlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px}
.sh1{background:var(--sand);border-radius:var(--r2);padding:14px 15px;display:flex;flex-direction:column;gap:3px;
  border:2px solid transparent;transition:all .35s var(--e)}
.sh1:hover{border-color:var(--aquaL);box-shadow:var(--s1)}
.sh1 .snm{font-size:15px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.sh1 .sau{font-size:11.5px;font-weight:600;color:var(--aquaD)}
.sh1 .sme{font-size:11px;color:var(--navy3);font-weight:500}
.sh1 .sbt{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.sh1 .sb{font-size:11.5px;font-weight:700;cursor:pointer;border:0;padding:8px 13px;border-radius:999px;
  background:var(--g-sea);color:#fff;font-family:var(--f);transition:all .3s var(--e);min-height:36px}
.sh1 .sb.d{background:var(--sand2);color:var(--navy2)}
.sh1 .sb.d:hover{background:var(--coral);color:#fff}
.shnone{grid-column:1/-1;padding:24px;text-align:center;color:var(--navy3);font-size:13.5px;font-weight:600;
  border:2px dashed var(--sand3);border-radius:var(--r2)}
.shnone b{display:block;color:var(--navy2);margin-bottom:3px}
@media(max-width:820px){
  .shared{padding:18px;margin-top:20px}
  .shlist{grid-template-columns:1fr}
  .shhead{flex-direction:column}
  .shhead .btn{width:100%;justify-content:center}
}

/* ===== БРОЯЧ НА КАРУСЕЛА ===== */
.ccount{font-size:13px;font-weight:700;color:var(--navy2);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ccount b{font-weight:800;color:var(--aquaD);font-size:15px}

/* ===== ТЪРСЕНЕ В ЛИСТА ===== */
.sfind{width:100%;font-family:var(--f);font-size:15px;font-weight:500;padding:13px 15px;margin-bottom:12px;
  border:1px solid var(--sand3);border-radius:var(--r2);background:var(--sand);color:var(--navy);-webkit-appearance:none}
.sfind:focus{outline:none;border-color:var(--aqua);background:var(--white)}
.slist{max-height:min(46vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.pk.pa{gap:12px}
.psw{width:7px;height:30px;flex:0 0 auto;border-radius:4px}
.pw{display:flex;flex-direction:column;min-width:0}
.pw b{font-size:14px;font-weight:700;line-height:1.25}
.pw i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--navy3);margin-top:1px}
.snone{padding:26px 10px;text-align:center;color:var(--navy3);font-size:13.5px;font-weight:600}

/* ===== КРЕДИТИ ===== */
.creds{margin-top:26px;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
.creds summary{cursor:pointer;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.86);list-style:none;
  display:flex;align-items:center;gap:9px;padding:6px 0;min-height:44px}
.creds summary::-webkit-details-marker{display:none}
.creds summary::before{content:"▸";transition:transform .3s var(--e);display:inline-block;color:var(--gold2)}
.creds[open] summary::before{transform:rotate(90deg)}
.creds summary i{font-style:normal;font-size:10px;font-weight:800;background:rgba(255,255,255,.16);border-radius:999px;padding:3px 9px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:12px}
.cr{font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.6)}
.cr b{display:block;color:rgba(255,255,255,.9);font-size:12px;font-weight:700}
.cr a{color:var(--gold2);text-decoration:none}
.cr a:hover{text-decoration:underline}

/* ===== ОБЩИ МОБИЛНИ КОРЕКЦИИ ===== */
@media(max-width:820px){
  body{font-size:15px}
  section{padding:56px 0}
  .wrap{padding:0 20px}
  nav.top{padding:10px 0}
  nav.top.stuck{padding:7px 0}
  .hero .wrap{padding-top:96px;padding-bottom:30px}
  .hero-sub{font-size:15.5px}
  .chips{gap:7px;margin-top:22px}
  .chip{font-size:12px;padding:7px 13px}
  .btn{padding:14px 22px;min-height:46px}
  .btn.sm{padding:11px 16px;min-height:42px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .wxband{margin-top:-32px;padding:16px}
  .sh{margin-bottom:26px}
  .band{min-height:auto}
  .band .inner{padding:52px 0}
  .bstats{gap:22px}
  .bstat b{font-size:27px}
  .filters{gap:6px;margin-bottom:20px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-left:-20px;margin-right:-20px;padding:0 20px 2px}
  .filters::-webkit-scrollbar{display:none}
  .filt{flex:0 0 auto;min-height:42px}
  .ac .ph{height:180px}
  .rail{padding:16px}
  .mside{gap:14px}
  .co{padding:22px 20px}
  .rc{padding:20px}
  footer{padding:34px 0 max(34px,env(safe-area-inset-bottom))}
  footer .fl{gap:20px}
  /* без hover-транслации на тъч */
  .ac:hover,.pl:hover,.pill:hover,.filt:hover,.btn:hover,.wxd:hover{transform:none}
}
@media(max-width:400px){
  .wrap{padding:0 16px}
  .acts,.filters,.fg,.ftabs{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .acts>.ac{flex-basis:88vw}
  .mleg{grid-template-columns:1fr 1fr}
}