.iw-app{box-sizing:border-box;}
.iw-app *,.iw-app *::before,.iw-app *::after{box-sizing:border-box;}
.iw-app{
  --stone-100:#FAF8F3; --stone-200:#F0EEE7; --stone-300:#E3DFD3; --stone-400:#CFC9B8;
  --basalt:#1B2422; --basalt-soft:#4A5551; --basalt-faint:#7B857F;
  --water:#0B6E6B; --water-pale:#CBE5E1;
  --ochre:#B0812F; --sea:#DCE9E8; --star:#C9971F;
  --alert:#A6491F; --alert-bg:#F7E7DE;
  --bg:var(--stone-200); --surface:var(--stone-100); --surface-2:#fff;
  --ink:var(--basalt); --ink-2:var(--basalt-soft); --ink-3:var(--basalt-faint);
  --line:var(--stone-300); --line-strong:var(--stone-400);
  --accent:var(--water);
  --map-sea:var(--sea); --map-land:#EAE6DA; --map-land-alt:#E2DCCB; --map-line:#BDB6A2;
  --map-water:#8FC4BE; --ring:#C3BCA8;
  --shadow:0 1px 2px rgba(27,36,34,.05), 0 8px 24px -12px rgba(27,36,34,.18);
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  .iw-app:not([data-theme="light"]){
    --bg:#121817; --surface:#182120; --surface-2:#1E2827;
    --ink:#EDEAE1; --ink-2:#B3BCB7; --ink-3:#8C958F;
    --line:#2A3634; --line-strong:#3A4644;
    --accent:#5FBFB2; --star:#E0B449;
    --water-pale:#1D3835; --ochre:#D9AC5A;
    --alert:#E8A582; --alert-bg:#33211A;
    --map-sea:#16211F; --map-land:#232E2C; --map-land-alt:#1F2927; --map-line:#3E4A47;
    --map-water:#2E5A57; --ring:#334240;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
  }
}
.iw-app[data-theme="dark"]{
  --bg:#121817; --surface:#182120; --surface-2:#1E2827;
  --ink:#EDEAE1; --ink-2:#B3BCB7; --ink-3:#8C958F;
  --line:#2A3634; --line-strong:#3A4644;
  --accent:#5FBFB2; --star:#E0B449;
  --water-pale:#1D3835; --ochre:#D9AC5A;
  --alert:#E8A582; --alert-bg:#33211A;
  --map-sea:#16211F; --map-land:#232E2C; --map-land-alt:#1F2927; --map-line:#3E4A47;
  --map-water:#2E5A57; --ring:#334240;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
}

.iw-app *{box-sizing:border-box}
.iw-app{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Rubik",-apple-system,"Segoe UI",system-ui,sans-serif;
  font-weight:400; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased}
.iw-app h1,.iw-app h2,.iw-app h3,.iw-app h4{font-family:"Bitter",Georgia,serif; text-wrap:balance; margin:0; line-height:1.18}
.iw-app[lang="he"] h1,.iw-app[lang="he"] h2,.iw-app[lang="he"] h3,.iw-app[lang="he"] h4,
.iw-app[lang="he"] .plan-head b{font-family:"Frank Ruhl Libre",Georgia,serif; line-height:1.3}
.iw-app .mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; unicode-bidi:isolate}
.iw-app a{color:var(--accent)}
.iw-app :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.iw-app .wrap{max-width:1500px; margin:0 auto; padding:0 clamp(14px,3vw,32px)}

.iw-app header.top{background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface)) 0%, var(--surface) 68%);
  border-bottom:1px solid var(--line)}
.iw-app .top-inner{padding-block:clamp(22px,3.4vw,38px) 0}
.iw-app .topbar{display:flex; align-items:flex-start; gap:14px}
.iw-app .eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px}
.iw-app[lang="he"] .eyebrow{letter-spacing:.06em}
.iw-app h1{font-size:clamp(28px,5vw,50px); font-weight:700; letter-spacing:-.015em}
.iw-app[lang="he"] h1{letter-spacing:0}
.iw-app h1 .drop{color:var(--accent)}
.iw-app .lede{max-width:64ch; color:var(--ink-2); margin:14px 0 0; font-size:clamp(14.5px,1.6vw,16.5px)}
.iw-app .langsw{flex:none}
.iw-app .hdr-actions{margin-inline-start:auto; display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end}
.iw-app .hdr-actions .btn{font-size:13px; padding:7px 12px}
@media (max-width:560px){.iw-app .hdr-actions{margin-inline-start:0; order:3; width:100%}}
.iw-app .stats{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.iw-app .stat{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; min-width:110px}
.iw-app .stat b{display:block; font-family:"IBM Plex Mono",monospace; font-size:22px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums}
.iw-app .stat span{font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em}
.iw-app[lang="he"] .stat span{text-transform:none; letter-spacing:0; font-size:12px}
.iw-app .views{display:flex; gap:2px; margin-top:22px; border-bottom:1px solid var(--line)}
.iw-app .views button{border:0; background:none; font:inherit; font-size:14.5px; color:var(--ink-3); cursor:pointer;
  padding:10px 15px; border-bottom:2px solid transparent; margin-bottom:-1px}
.iw-app .views button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent); font-weight:500}

.iw-app .toolbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.iw-app .toolbar-inner{padding-block:12px; display:flex; flex-direction:column; gap:10px}
.iw-app .row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.iw-app .search{flex:1 1 240px; min-width:190px; display:flex; align-items:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius); padding:0 12px}
.iw-app .search input{flex:1; border:0; background:transparent; color:var(--ink); font:inherit; padding:10px 0; outline:none; min-width:0}
.iw-app .search svg{flex:none; opacity:.5}
.iw-app select,.iw-app .btn{font:inherit; font-size:13.5px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:9px 12px; cursor:pointer}
.iw-app .chip{font:inherit; font-size:13px; padding:6px 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink-2);
  display:inline-flex; align-items:center; gap:7px; transition:background .12s,color .12s,border-color .12s}
.iw-app .chip:hover{border-color:var(--ink-3)}
.iw-app .chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.iw-app .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--accent))}
.iw-app .slider-wrap{display:flex; align-items:center; gap:10px; flex:1 1 220px; min-width:190px;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius); padding:6px 12px}
.iw-app .slider-wrap label{font-size:12px; color:var(--ink-3); white-space:nowrap}
.iw-app input[type=range]{flex:1; accent-color:var(--accent); min-width:70px}
.iw-app .count{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-3);
  margin-inline-start:auto; white-space:nowrap; unicode-bidi:isolate}
.iw-app .seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden}
.iw-app .seg button{border:0; background:var(--surface-2); color:var(--ink-2); font:inherit; font-size:13px; padding:9px 13px; cursor:pointer}
.iw-app .seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.iw-app .seg button+button{border-inline-start:1px solid var(--line-strong)}
.iw-app details.filters{display:flex; flex-direction:column; gap:10px}
.iw-app details.filters>summary{display:none}

.iw-app .main{display:grid; grid-template-columns:minmax(320px,460px) minmax(0,1fr); gap:clamp(16px,2.4vw,34px);
  padding-block:22px 60px; align-items:start}
@media (max-width:1000px){ .iw-app .main{grid-template-columns:1fr} .iw-app .mappanel{position:static !important} }
.iw-app .mappanel{position:sticky; top:calc(var(--tbh,120px) + 12px)}
.iw-app .mapcard{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; box-shadow:var(--shadow)}
.iw-app .mapd>summary{font-family:"Bitter",Georgia,serif; font-size:14px; font-weight:600; display:flex;
  align-items:baseline; gap:8px; list-style:none; cursor:default}
.iw-app[lang="he"] .mapd>summary{font-family:"Frank Ruhl Libre",Georgia,serif}
.iw-app .mapd>summary::-webkit-details-marker{display:none}
.iw-app .mapd>summary small{font-family:"IBM Plex Mono",monospace; font-weight:400; font-size:11px; color:var(--ink-3); unicode-bidi:isolate}
.iw-app .mapbox{width:100%; max-width:460px; margin:8px auto 0}
.iw-app #iw-map{width:100%; height:auto; max-height:min(720px,70vh); display:block; border-radius:8px; overflow:visible}
.iw-app #iw-map text{font-family:"IBM Plex Mono",monospace}
.iw-app[lang="he"] #iw-map text{font-family:"Rubik",sans-serif}
.iw-app .marker{cursor:pointer}
.iw-app .marker circle.pin{stroke:var(--surface); stroke-width:1.4; transition:r .12s}
.iw-app .marker:hover circle.pin,.iw-app .marker.active circle.pin,.iw-app .marker.hl circle.pin{stroke:var(--ink); stroke-width:2}
.iw-app .marker.hl circle.pin,.iw-app .marker.active circle.pin{r:8}
.iw-app .cmarker{cursor:pointer}
.iw-app .cmarker rect.cpin{transition:stroke-width .12s}
.iw-app .cmarker:hover rect.cpin{stroke-width:3.5}
.iw-app .legend{display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.iw-app .legend span{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2)}
.iw-app .legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.iw-app .maphint{font-size:11.5px; color:var(--ink-3); margin-top:8px; line-height:1.45}

.iw-app .band{margin:0 0 10px; display:flex; align-items:center; gap:12px; padding-top:14px}
.iw-app .band h2{font-size:16px; font-weight:600}
.iw-app .band .line{flex:1; height:1px; background:var(--line)}
.iw-app .band .n{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3)}
.iw-app .cards{display:flex; flex-direction:column; gap:12px}
.iw-app .cards.mix{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:11px; align-items:start}
.iw-app .cards.mix .card{grid-column:1/-1}
.iw-app #iw-list,.iw-app #iw-table{max-width:940px}

.iw-app .card{background:var(--surface); border:1px solid var(--line); border-inline-start:3px solid var(--c,var(--accent));
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
  scroll-margin-top:calc(var(--tbh,120px) + 18px); transition:border-color .15s,transform .15s}
.iw-app .card.active{border-color:var(--accent); transform:translateY(-1px)}
.iw-app .card.has-photo{display:flex; gap:15px; align-items:flex-start}
.iw-app .card-main{flex:1; min-width:0}
.iw-app .thumb{width:136px; height:91px; flex:none; object-fit:cover; border-radius:8px; display:block;
  background:var(--surface-2); border:1px solid var(--line)}
@media (max-width:600px){
  .iw-app .card.has-photo{display:block}
  .iw-app .thumb{width:100%; height:150px; margin-bottom:12px}
}
.iw-app .photo-wrap{margin:-16px -18px 14px; position:relative}
.iw-app .modal-body .photo-wrap{margin:-16px -18px 14px}
.iw-app .photo-big{width:100%; height:clamp(180px,32vh,280px); object-fit:cover; display:block; background:var(--surface-2)}
.iw-app .photo-cred{font-size:11px; color:var(--ink-3); padding:5px 18px 0; margin:0}
.iw-app .photo-cred a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.iw-app .card.in-plan{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent), var(--shadow)}
.iw-app .card-head{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline}
.iw-app .card h3{font-size:19px; font-weight:600; letter-spacing:-.01em}
.iw-app[lang="he"] .card h3{letter-spacing:0; font-size:20px}
.iw-app .card h3 .star{color:var(--star); font-size:15px; vertical-align:2px}
.iw-app .alt{unicode-bidi:isolate; color:var(--ink-2); font-size:15px}
.iw-app .badges{display:flex; flex-wrap:wrap; gap:6px; margin-inline-start:auto; align-items:center}
.iw-app .tag{font-size:11.5px; padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:color-mix(in srgb, var(--c,var(--accent)) 16%, var(--surface));
  color:var(--ink); border:1px solid color-mix(in srgb, var(--c,var(--accent)) 40%, transparent)}
.iw-app .km{font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:500; padding:4px 10px;
  border-radius:999px; background:var(--ink); color:var(--bg); white-space:nowrap; unicode-bidi:isolate}
.iw-app .meta{font-size:12.5px; color:var(--ink-3); margin:6px 0 0; display:flex; flex-wrap:wrap; gap:4px 14px}
.iw-app .desc{margin:10px 0 0; color:var(--ink); max-width:80ch}
.iw-app .near{margin:8px 0 0; color:var(--ink-2); font-size:14px; max-width:80ch}
.iw-app .near::before{content:attr(data-l); color:var(--ink-3); font-size:12px; letter-spacing:.06em}
.iw-app .acts{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px}
.iw-app .act{font-size:12px; padding:3px 9px; border-radius:6px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}

.iw-app .strip{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.iw-app .fact{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:5px 10px;
  border-radius:7px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
.iw-app .fact b{font-weight:500; color:var(--ink)}
.iw-app .fact.no{color:var(--alert); border-color:color-mix(in srgb,var(--alert) 30%,transparent)}
.iw-app .fact.yes{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,transparent)}

.iw-app .pricebox{margin-top:11px; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.iw-app .pricebox h4{font-size:11px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace; font-weight:400; padding:7px 11px; background:var(--surface-2);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px}
.iw-app[lang="he"] .pricebox h4{font-family:"Rubik",sans-serif; letter-spacing:0; text-transform:none; font-size:12px}
.iw-app .prices+h4{border-top:1px solid var(--line)}
.iw-app .prices{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:1px; background:var(--line)}
.iw-app .price{background:var(--surface); padding:8px 11px}
.iw-app .price dt{font-size:11px; color:var(--ink-3); margin-bottom:1px}
.iw-app .price dd{margin:0; font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:500;
  font-variant-numeric:tabular-nums; unicode-bidi:isolate}
.iw-app[lang="he"] .price dd{font-family:"Rubik",sans-serif}
.iw-app .price dd.free{color:var(--accent)}
.iw-app .pricenote{font-size:12px; color:var(--ink-3); padding:7px 11px; background:var(--surface); border-top:1px solid var(--line)}
.iw-app .pricenote b{color:var(--ink-2); font-weight:500}

.iw-app .stay{margin-top:10px; font-size:13.5px; color:var(--ink-2); max-width:80ch}
.iw-app .stay::before{content:attr(data-l); color:var(--ink-3); font-size:11.5px; letter-spacing:.06em}
.iw-app .warn{margin-top:10px; padding:8px 11px; border-radius:8px; background:var(--alert-bg); color:var(--alert);
  font-size:13px; border:1px solid color-mix(in srgb,var(--alert) 25%,transparent)}
.iw-app .warn::before{content:"⚠ "; font-weight:600}
.iw-app .nb{margin-top:10px; font-size:13px; color:var(--ink-2)}
.iw-app .nb b{font-size:11px; letter-spacing:.06em; color:var(--ink-3); font-weight:400; margin-inline-end:6px}
.iw-app .nb a{cursor:pointer; text-decoration:none; border-bottom:1px dotted currentColor}
.iw-app .nb .sep{color:var(--ink-3); margin:0 5px}

.iw-app details.more{margin-top:11px; border-top:1px solid var(--line); padding-top:9px}
.iw-app details.more summary{cursor:pointer; font-size:12.5px; color:var(--ink-3); list-style:none;
  font-family:"IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase}
.iw-app[lang="he"] details.more summary{font-family:"Rubik",sans-serif; letter-spacing:0; text-transform:none; font-size:13px}
.iw-app details.more summary::-webkit-details-marker{display:none}
.iw-app details.more summary::before{content:"+ "}
.iw-app details.more[open] summary::before{content:"− "}
.iw-app .grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px 20px; margin-top:11px}
.iw-app .f{font-size:13.5px}
.iw-app .f dt{font-size:11px; letter-spacing:.07em; color:var(--ink-3); margin-bottom:1px; text-transform:uppercase}
.iw-app[lang="he"] .f dt{letter-spacing:0; text-transform:none; font-size:12px}
.iw-app .f dd{margin:0; color:var(--ink-2)}
.iw-app .links{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; align-items:center}
.iw-app .lnk{font-size:12.5px; text-decoration:none; padding:6px 11px; border-radius:7px;
  border:1px solid var(--line-strong); color:var(--ink-2); background:var(--surface-2);
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit}
.iw-app .lnk:hover{border-color:var(--accent); color:var(--accent)}
.iw-app .lnk.on{background:var(--accent); border-color:var(--accent); color:var(--surface)}
.iw-app .iconbtn{margin-inline-start:auto; display:flex; gap:6px}

.iw-app .tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.iw-app table{border-collapse:collapse; width:100%; font-size:13.5px; min-width:720px}
.iw-app th,.iw-app td{padding:9px 12px; text-align:start; border-bottom:1px solid var(--line); vertical-align:top}
.iw-app th{font-size:11px; letter-spacing:.07em; color:var(--ink-3); font-weight:500; text-transform:uppercase;
  position:sticky; top:var(--tbh,112px); background:var(--surface); z-index:2}
.iw-app[lang="he"] th{letter-spacing:0; text-transform:none; font-size:12px}
.iw-app tbody tr{cursor:pointer}
.iw-app tbody tr:hover{background:var(--surface-2)}
.iw-app td.n{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap; unicode-bidi:isolate}
.iw-app .swatch{width:9px;height:9px;border-radius:50%;display:inline-block;margin-inline-end:7px;vertical-align:middle}
.iw-app .empty{padding:50px 20px; text-align:center; color:var(--ink-3)}

.iw-app .scen-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; padding-block:22px 60px}
.iw-app .scen{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:9px}
.iw-app .scen h3{font-size:19px; font-weight:600}
.iw-app .scen .sub{color:var(--ink-2); font-size:14px; margin:0}
.iw-app .scen .chips{display:flex; flex-wrap:wrap; gap:6px}
.iw-app .scen .stops{display:flex; flex-direction:column; gap:5px; margin:2px 0}
.iw-app .scen .stop{display:flex; gap:9px; align-items:baseline; font-size:13.5px; cursor:pointer}
.iw-app .scen .stop i{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); font-style:normal;
  width:17px; flex:none; text-align:end}
.iw-app .scen .stop span{border-bottom:1px dotted var(--line-strong)}
.iw-app .scen .stop em{font-family:"IBM Plex Mono",monospace; font-style:normal; font-size:11.5px; color:var(--ink-3);
  margin-inline-start:auto; white-space:nowrap; unicode-bidi:isolate}
.iw-app .scen .why{font-size:13px; color:var(--ink-2); margin:0}
.iw-app .scen .go{margin-top:auto; display:flex; gap:7px; flex-wrap:wrap; padding-top:6px}

.iw-app .pricewrap,.iw-app .campwrap{padding-block:22px 60px; display:grid; grid-template-columns:minmax(0,1fr); gap:22px; max-width:1000px}
.iw-app .panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
.iw-app .panel>h2{font-size:20px; font-weight:600; padding:16px 18px 0}
.iw-app .panel>p{padding:0 18px; color:var(--ink-2); font-size:14px; max-width:78ch}
.iw-app .panel table{min-width:520px}
.iw-app .panel th{position:static}
.iw-app .avg{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border-top:1px solid var(--line)}
.iw-app .avg div{background:var(--surface); padding:13px 15px}
.iw-app .avg b{display:block; font-family:"IBM Plex Mono",monospace; font-size:20px; font-weight:600; font-variant-numeric:tabular-nums}
.iw-app .avg span{font-size:11.5px; color:var(--ink-3)}
.iw-app .avg small{display:block; font-size:11px; color:var(--ink-3); margin-top:3px}

.iw-app /* camps */
.campgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:11px}
.iw-app .camp.mini{cursor:pointer; gap:7px; padding:13px 15px; transition:border-color .14s, transform .14s}
.iw-app .camp.mini:hover,.iw-app .camp.mini:focus-visible{border-color:var(--accent); transform:translateY(-1px)}
.iw-app .camp.mini h3{font-size:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.iw-app .camp .price-tag{font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:500; white-space:nowrap;
  padding:3px 9px; border-radius:999px; background:var(--ink); color:var(--bg); unicode-bidi:isolate}
.iw-app .camp .price-tag.free{background:transparent; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.iw-app[lang="he"] .camp .price-tag{font-family:"Rubik",sans-serif}
.iw-app .camp .one{font-size:13px; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin:0}
.iw-app .camp .mini-facts{display:flex; flex-wrap:wrap; gap:5px}
.iw-app .camp .mini-facts span{font-size:11.5px; padding:3px 8px; border-radius:6px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--ink-3); white-space:nowrap}
.iw-app .camp .mini-facts span.no{color:var(--alert); border-color:color-mix(in srgb,var(--alert) 28%,transparent)}
.iw-app .camp .mini-facts span.yes{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 32%,transparent)}

.iw-app /* modal */
.backdrop{position:fixed; inset:0; z-index:80; background:color-mix(in srgb,var(--basalt) 55%,transparent);
  backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:clamp(10px,3vw,32px)}
.iw-app .backdrop.on{display:flex}
.iw-app .modal{background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; width:min(660px,100%);
  max-height:min(880px,88vh); display:flex; flex-direction:column; box-shadow:0 24px 70px -20px rgba(0,0,0,.55); overflow:hidden}
.iw-app .modal-top{display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line);
  background:var(--surface-2); flex:none}
.iw-app .modal-top .sp{flex:1}
.iw-app .modal-top button{border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); font:inherit;
  font-size:13px; padding:5px 11px; border-radius:7px; cursor:pointer}
.iw-app .modal-top button:hover{border-color:var(--accent); color:var(--accent)}
.iw-app .modal-body{padding:16px 18px 20px; overflow-y:auto; overscroll-behavior:contain}
.iw-app .modal-body .camp,.iw-app .modal-body .card{border:0; box-shadow:none; padding:0; background:none; border-radius:0}
.iw-app .modal-body .camp h3,.iw-app .modal-body .card h3{font-size:21px}
body.iw-locked{overflow:hidden}
.iw-app .camp{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:15px 17px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px}
.iw-app .camp-head{display:flex; flex-wrap:wrap; gap:5px 10px; align-items:baseline}
.iw-app .camp h3{font-size:17px; font-weight:600}
.iw-app .camp .ctype{font-size:11.5px; padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:color-mix(in srgb,var(--c,var(--accent)) 16%,var(--surface)); color:var(--ink);
  border:1px solid color-mix(in srgb,var(--c,var(--accent)) 40%,transparent); margin-inline-start:auto}
.iw-app .camp .cmeta{font-size:12.5px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:3px 12px}
.iw-app .camp .cwater{font-size:13.5px; color:var(--ink-2)}
.iw-app .camp .rent{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.iw-app .camp .rent div{background:var(--surface); padding:6px 10px; display:flex; gap:10px; align-items:baseline; font-size:13px}
.iw-app .camp .rent b{margin-inline-start:auto; font-family:"IBM Plex Mono",monospace; font-weight:500; white-space:nowrap; unicode-bidi:isolate}
.iw-app[lang="he"] .camp .rent b{font-family:"Rubik",sans-serif}
.iw-app .camp .cnote{font-size:13px; color:var(--ink-2); margin:0}
.iw-app .camp .cfac{font-size:12.5px; color:var(--ink-3)}

.iw-app .plan{position:fixed; inset-inline-end:18px; bottom:18px; z-index:60; width:min(340px,calc(100vw - 36px));
  background:var(--surface); border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:0 10px 40px -12px rgba(0,0,0,.4); overflow:hidden; display:none}
.iw-app .plan.on{display:block}
.iw-app .plan-head{display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; background:var(--surface-2)}
.iw-app .plan-head b{font-family:"Bitter",serif; font-size:15px}
.iw-app .plan-head .n{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); margin-inline-start:auto; unicode-bidi:isolate}
.iw-app .plan-body{padding:12px 14px; display:flex; flex-direction:column; gap:9px; max-height:52vh; overflow-y:auto}
.iw-app .plan.min .plan-body{display:none}
.iw-app .plan-item{display:flex; gap:9px; align-items:baseline; font-size:13.5px}
.iw-app .plan-item i{font-family:"IBM Plex Mono",monospace; font-style:normal; font-size:11px; color:var(--ink-3); width:15px; flex:none}
.iw-app .plan-item em{font-family:"IBM Plex Mono",monospace; font-style:normal; font-size:11.5px; color:var(--ink-3);
  margin-inline-start:auto; white-space:nowrap; unicode-bidi:isolate}
.iw-app .plan-item button{background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:15px; line-height:1; padding:0 2px}
.iw-app .plan-item button:hover{color:var(--alert)}
.iw-app .plan-sum{font-size:12.5px; color:var(--ink-2); border-top:1px solid var(--line); padding-top:9px}
.iw-app .plan-act{display:flex; gap:7px; flex-wrap:wrap}
.iw-app .plan-act a,.iw-app .plan-act button{flex:1 1 auto; text-align:center; justify-content:center}

.iw-app footer{border-top:1px solid var(--line); background:var(--surface); padding:28px 0 44px; font-size:13px; color:var(--ink-2)}
.iw-app footer h3{font-size:14px; margin-bottom:8px}
.iw-app footer p{margin:0 0 8px; max-width:76ch}
.iw-app footer .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px}
.iw-app .toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:999px; font-size:13px;
  pointer-events:none; transition:opacity .2s,transform .2s; z-index:99; max-width:90vw; text-align:center}
.iw-app .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.iw-app /* компактная строка списка на телефоне */
.mini-row{display:flex; gap:12px; align-items:stretch; background:var(--surface); border:1px solid var(--line);
  border-inline-start:3px solid var(--c,var(--accent)); border-radius:var(--radius); padding:10px 12px;
  box-shadow:var(--shadow); cursor:pointer; transition:border-color .14s}
.iw-app .mini-row:hover,.iw-app .mini-row:focus-visible{border-color:var(--accent)}
.iw-app .mini-thumb{width:88px; height:88px; flex:none; object-fit:cover; border-radius:7px; display:block;
  background:var(--surface-2); border:1px solid var(--line)}
.iw-app .mini-thumb.ph{background:linear-gradient(135deg,var(--surface-2),var(--water-pale))}
.iw-app .mini-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; justify-content:center}
.iw-app .mini-head{display:flex; gap:8px; align-items:baseline}
.iw-app .mini-head h3{font-size:15.5px; font-weight:600; line-height:1.25; flex:1; min-width:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.iw-app .mini-head .km{font-size:11.5px; padding:3px 8px; flex:none}
.iw-app .mini-meta{margin:0; display:flex; flex-wrap:wrap; gap:4px 8px; font-size:12px; color:var(--ink-3); align-items:center}
.iw-app .mini-meta .tag{font-size:11px; padding:2px 8px}
.iw-app .mini-facts{display:flex; flex-wrap:wrap; gap:5px}
.iw-app .mini-facts span{font-size:11.5px; padding:2px 8px; border-radius:6px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--ink-3)}
.iw-app .mini-facts span.no{color:var(--alert)}
.iw-app .mini-facts span.yes{color:var(--accent)}

@media (prefers-reduced-motion:reduce){.iw-app *{transition:none !important; animation:none !important}}
@media (max-width:820px){
  .iw-app .toolbar{position:static}
  .iw-app details.filters>summary{display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
    font-size:13px; color:var(--ink-2); border:1px solid var(--line-strong);
    background:var(--surface-2); border-radius:var(--radius); padding:9px 12px}
  .iw-app details.filters>summary::-webkit-details-marker{display:none}
  .iw-app details.filters>summary::before{content:"⚙"; opacity:.6}
  .iw-app .count-s{margin-inline-start:auto; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); unicode-bidi:isolate}
  .iw-app #iw-map{max-height:52vh}
  .iw-app th{top:0}
  .iw-app .card{scroll-margin-top:14px}
  .iw-app .plan{inset-inline-end:10px; bottom:10px}
  .iw-app .topbar{flex-wrap:wrap}
}

.iw-app /* ================= телефон ================= */
@media (max-width:700px){
  .top-inner{padding-block:12px 0}
  .eyebrow{margin-bottom:6px; font-size:10.5px; letter-spacing:.1em}
  h1{font-size:26px}
  .lede{display:none}
  .stats{margin-top:12px; gap:7px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:2px;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%);
    mask-image:linear-gradient(to right,#000 88%,transparent 100%)}
  html[dir="rtl"] .stats{-webkit-mask-image:linear-gradient(to left,#000 88%,transparent 100%);
    mask-image:linear-gradient(to left,#000 88%,transparent 100%)}
  .stats::-webkit-scrollbar{display:none}
  .stat{min-width:0; flex:none; padding:7px 11px}
  .stat b{font-size:18px}
  .stat span{font-size:10px; white-space:nowrap}
  .hdr-actions{order:0; width:auto; margin-inline-start:auto}
  .hdr-actions .btn{padding:9px 12px; min-height:40px}

  .toolbar{position:sticky; top:0}
  .toolbar-inner{padding-block:8px; gap:8px}
  .row{gap:7px}
  .search{flex:1 1 100%; order:-1}
  .row-search{gap:7px}
  .row-search .seg{flex:1 1 100%}
  .row-search .seg button{flex:1; padding:11px 6px; font-size:13px}
  .search input{padding:12px 0; font-size:16px}
  .slider-wrap{flex:1 1 100%; padding:8px 12px; min-height:44px}
  select,.btn{min-height:44px; padding:11px 12px; font-size:14px}
  .seg button{min-height:44px; padding:11px 13px; font-size:13.5px}
  .chip{min-height:40px; padding:9px 14px; font-size:13.5px}
  details.filters>summary{min-height:44px}

  /* карта свёрнута и раскрывается по нажатию */
  .mapcard{padding:0; border:0; background:none; box-shadow:none}
  .mapd>summary{display:flex; min-height:44px; align-items:center; cursor:pointer;
    background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); padding:10px 14px}
  .mapd>summary::before{content:"▸"; margin-inline-end:8px; color:var(--ink-3); font-size:12px}
  .mapd[open]>summary::before{content:"▾"}
  .mapd[open]{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px; display:block}
  .mapd[open]>summary{border:0; background:none; padding:2px 4px 8px}
  #iw-map{max-height:56vh}
  .main{padding-block:12px 40px; gap:12px}

  /* список */
  .cards,.cards.mix{display:flex; flex-direction:column; gap:8px}
  .band{padding-top:10px; margin-bottom:6px}
  .band h2{font-size:15px}
  #iw-list,#iw-table{max-width:none}

  /* окно подробностей во весь экран */
  .backdrop{padding:0; align-items:stretch}
  .modal{width:100%; max-height:100%; height:100%; border-radius:0; border:0}
  .modal-top{position:sticky; top:0; z-index:2; padding:8px 12px}
  .modal-top button{min-height:44px; padding:10px 14px; font-size:14px}
  .modal-body{padding:14px 15px 40px}
  .modal-body .photo-wrap{margin:-14px -15px 12px}
  .modal-body .lnk{min-height:42px; padding:10px 13px; font-size:13.5px}
  .modal-body .card h3,.modal-body .camp h3{font-size:20px}

  /* план поездки — нижняя панель */
  .plan{inset-inline:8px; inset-inline-end:8px; bottom:8px; width:auto}
  .plan-head{min-height:48px}
  .plan-body{max-height:44vh}
  .plan-act a,.plan-act button{min-height:44px}
  .toast{bottom:76px}
}
@media (max-width:700px) and (display-mode:browser){
  .iw-app .modal{height:100dvh; max-height:100dvh}
}
/* ==== starting point ====
   Replaces the headline that hardcoded one city. Sized like a heading so the header
   keeps its weight, but it is a control and reads as one. */
.iw-app .iw-origin-box {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 12px; margin: 0 0 4px;
}
.iw-app .iw-origin-box > select {
  font-family: "Bitter", Georgia, serif;
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  padding: 4px 34px 4px 10px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
  cursor: pointer;
  max-width: 100%;
}
.iw-app[lang="he"] .iw-origin-box > select { font-family: "Frank Ruhl Libre", Georgia, serif; }
.iw-app .iw-origin-box > select:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.iw-app .iw-origin-note { font-size: 12px; color: var(--ink-3); flex-basis: 100%; }

/* ==== filter panel ====
   The ported toolbar put every control on its own full-width line, so on a wide
   screen it was a column of oversized selects. These rules lay the controls out as
   labelled cells that share the width, and keep the panel short enough that the
   results stay above the fold. */
/* The whole filter area is a stack of trays: the fields row and the three chip groups
   share one container treatment, so the panel reads as four labelled bands instead of
   loose controls above boxed chips. Internals differ by need — fields carry their label
   above, chip groups carry one caption for the row. */
.iw-app .iw-fields,
.iw-app .iw-chipgroup {
  padding: 11px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.iw-app .iw-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 12px;
  align-items: end;
}
.iw-app .iw-field { display: grid; gap: 5px; min-width: 0; }
.iw-app .iw-field-l {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.iw-app[lang="he"] .iw-field-l { letter-spacing: 0; text-transform: none; font-size: 12px; }
.iw-app .iw-field > select { width: 100%; }
.iw-app .iw-field > .slider-wrap { flex: 1 1 auto; min-width: 0; width: 100%; }
.iw-app .iw-field > .seg { width: 100%; }
.iw-app .iw-field > .seg > button { flex: 1; }

/* Three chip rows answer three different questions, so they are captioned and spaced
   as groups rather than hidden behind a disclosure. The captions share a column, which
   gives the eye a straight left edge to scan and separates the rows without borders. */
.iw-app .iw-chipgroups { display: grid; gap: 8px; }
.iw-app .toolbar-inner { gap: 8px; }
/* Captions and spacing alone were not enough — the three rows still read as one pile
   of identical pills. Each group now sits on its own recessed tray: a shared region is
   the strongest grouping cue there is, and because the tray is darker than the toolbar
   while the chips are white, the chips read as contents rather than as loose scatter. */
.iw-app .iw-chipgroup {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
}
.iw-app .iw-group-l {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-2);
  align-self: center;
}
.iw-app[lang="he"] .iw-group-l { letter-spacing: 0; text-transform: none; font-size: 12px; }
.iw-app .iw-chipgroup > .row { margin: 0; }

/* Applied filters, each removable — otherwise an empty result set is a puzzle. */
.iw-app .iw-active {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  border-top: 1px solid var(--line); padding-top: 10px;
}
/* chips take the slack, then the count, then reset last — a stable right edge. */
.iw-app .iw-active-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; order: 1; }
.iw-app .iw-active .count { order: 2; }
.iw-app .iw-active #iw-reset { order: 3; }
.iw-app .iw-active-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--water-pale); color: var(--ink);
}
.iw-app .iw-active-chip:hover { background: var(--accent); color: var(--bg); }
.iw-app .iw-active-chip span { opacity: .6; font-size: 14px; line-height: 1; }

@media (max-width: 820px) {
  /* No room for a caption column — captions sit above their chips. */
  .iw-app .iw-chipgroup { grid-template-columns: 1fr; }
  .iw-app .iw-group-l {
    padding-top: 0; min-height: 0;
    border-inline-end: 0; padding-inline-end: 0; margin-inline-end: 0;
  }
}
@media (max-width: 700px) {
  .iw-app .iw-fields { grid-template-columns: 1fr 1fr; }
  .iw-app .iw-field:has(> .slider-wrap) { grid-column: 1 / -1; }
  .iw-app .iw-active { padding-top: 8px; }
}

/* Full-width mode: the map and the card grid are laid out for the whole viewport,
   so the container must escape the theme's content column. Block themes honour
   `alignfull`; this covers classic themes that constrain by max-width instead.
   The inner `.wrap` keeps its own max-width, so content never actually sprawls. */
/* `alignfull` is what frees the container from the theme's content column. But the
   core rule is `.alignfull{width:100vw;max-width:100vw}`, and 100vw counts the
   scrollbar — so the page ends up ~15px wider than the viewport with a stray
   horizontal scrollbar. Fill the parent instead: same width in practice, no overflow.
   `!important` is needed because `.alignfull` matches at equal specificity. */
.iw-app.iw-app--full {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

/* Themes routinely put `overflow-x: hidden` on full-width blocks to stop a 100vw
   child from widening the page. Per spec that forces the other axis to `auto`, and
   the container becomes its own scrollport — which freezes every position:sticky
   inside it against a box that never scrolls. The collapse button on an opened card
   simply scrolled away. `clip` clips exactly the same overflow and creates no
   scrollport, so sticky keeps tracking the page. */
.iw-app {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ==== theme armour ====
   The guide is dropped into arbitrary WordPress themes. Scoping our own rules under
   .iw-app stops us leaking out, but it does not stop a theme leaking in: a rule like
   `.entry-content h3 { color:#c00 }` outranks `.iw-app .card h3`, and any theme
   `!important` beats us outright. This block re-asserts only what breaks the design
   when overridden — colour, typography and control shape — and uses !important solely
   where themes commonly do. Everything else stays overridable on purpose. */
.iw-app h1, .iw-app h2, .iw-app h3, .iw-app h4, .iw-app h5, .iw-app h6 {
  color: var(--ink) !important;
  text-transform: none;
}
.iw-app p, .iw-app li, .iw-app dd, .iw-app dt, .iw-app td, .iw-app th, .iw-app span, .iw-app label {
  color: inherit;
}
.iw-app { color: var(--ink); }
.iw-app a { color: var(--accent); }
/* The theme's reset paints every button on :hover and :focus —
   `button:hover { background:#c36; color:#fff }`. Our controls change their border
   and their text on hover and keep their surface, so nothing of ours declared a
   hover background and the crimson came through: the collapse button turned pink
   the moment the pointer touched it. Each control restates the background it
   already has. A blanket `.iw-app button:hover` would be shorter and wrong — it
   would flatten the controls that legitimately change background when pressed. */
.iw-app .btn:hover, .iw-app .btn:focus,
.iw-app .chip:hover, .iw-app .chip:focus,
.iw-app .lnk:hover, .iw-app .lnk:focus,
.iw-app .seg button:hover, .iw-app .seg button:focus,
.iw-app .modal-top button:hover, .iw-app .modal-top button:focus,
.iw-app .iw-ps-item:hover, .iw-app .iw-ps-item:focus,
.iw-app .iw-active-chip:hover, .iw-app .iw-active-chip:focus,
.iw-app .iw-act:hover, .iw-app .iw-act:focus,
.iw-app .iw-collapse:hover, .iw-app .iw-collapse:focus {
  background: var(--surface-2);
}
.iw-app .views button:hover, .iw-app .views button:focus,
.iw-app .plan-item button:hover, .iw-app .plan-item button:focus {
  background: none;
}
.iw-app .chip[aria-pressed="true"]:hover, .iw-app .chip[aria-pressed="true"]:focus,
.iw-app .seg button[aria-pressed="true"]:hover, .iw-app .seg button[aria-pressed="true"]:focus {
  background: var(--ink); color: var(--bg);
}
.iw-app .lnk.on:hover, .iw-app .lnk.on:focus,
.iw-app .iw-act.is-primary:hover, .iw-app .iw-act.is-primary:focus {
  background: var(--accent); color: var(--surface);
}
.iw-app .iw-act.on:hover, .iw-app .iw-act.on:focus {
  background: var(--water-pale); color: var(--accent);
}

.iw-app button, .iw-app select, .iw-app input, .iw-app textarea {
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal;
}
.iw-app .chip { border-radius: 999px !important; }
.iw-app .btn, .iw-app select, .iw-app .card, .iw-app .mini-row,
.iw-app .modal, .iw-app .iw-ps-item, .iw-app .search {
  border-radius: var(--radius) !important;
}
.iw-app img { max-width: 100%; height: auto; }

/* ==== styles for the features added on top of the ported app ==== */

.iw-app .iw-g h4 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.iw-app[lang="he"] .iw-g h4 { letter-spacing: 0; text-transform: none; font-size: 13px; }

/* verified price -------------------------------------------------------- */
.iw-app .iw-price-verified {
  margin: 0; padding: 9px 13px; border-radius: var(--radius);
  background: var(--water-pale); color: var(--ink);
  font-size: 13.5px; font-weight: 600;
}
.iw-app .iw-price-verified a { color: var(--accent); font-weight: 500; }

/* nearby (OpenStreetMap) ------------------------------------------------- */
.iw-app .iw-nb-group { border-top: 1px solid var(--line); }
.iw-app .iw-nb-group:first-of-type { border-top: 0; }
.iw-app .iw-nb-group > summary {
  cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 14.5px;
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.iw-app .iw-nb-group > summary::-webkit-details-marker { display: none; }
.iw-app .iw-nb-group > summary b {
  margin-inline-start: auto; font-weight: 500; font-size: 12.5px; color: var(--ink-3);
}
.iw-app .iw-nb-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; }
.iw-app .iw-nb-list li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.iw-app .iw-nb-list a { color: var(--accent); text-decoration: none; }
.iw-app .iw-nb-list a:hover { text-decoration: underline; }
.iw-app .iw-nb-dot {
  width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, .18); align-self: center;
}
.iw-app .iw-nb-meta { color: var(--ink-3); font-size: 12.5px; margin-inline-start: auto; text-align: end; }
.iw-app .iw-nb-loading { color: var(--ink-3); font-size: 13.5px; margin: 4px 0; }
.iw-app .iw-nb-attrib,
.iw-app .iw-g-attrib { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* google block ----------------------------------------------------------- */
.iw-app .iw-g { border-top: 1px solid var(--line); padding-top: 16px; }
.iw-app .iw-g-badge {
  margin-inline-start: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--accent);
}
.iw-app .iw-g-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.iw-app .iw-g-rating { font-size: 17px; font-weight: 700; color: var(--star); }
.iw-app .iw-g-count { font-size: 13px; color: var(--ink-3); }
.iw-app .iw-g-open { font-size: 13px; font-weight: 600; color: #1E8449; }
.iw-app .iw-g-open.closed { color: var(--alert); }
.iw-app .iw-g-links { margin: 0; font-size: 14px; }
.iw-app .iw-g-links a { color: var(--accent); text-decoration: none; }
.iw-app .iw-g-links a:hover { text-decoration: underline; }
.iw-app .iw-g-hours summary { cursor: pointer; font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.iw-app .iw-g-hours ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--ink-2); }

/* price search ----------------------------------------------------------- */
.iw-app .iw-ps h2 { margin: 0 0 18px; }
.iw-app .iw-ps-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.iw-app .iw-ps-form label {
  display: grid; gap: 5px; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 700;
}
.iw-app[lang="he"] .iw-ps-form label { letter-spacing: 0; text-transform: none; font-size: 13px; }
.iw-app .iw-ps-form select,
.iw-app .iw-ps-form input[type="range"] { width: 100%; }
.iw-app .iw-ps-form output { font-size: 15px; color: var(--ink); font-weight: 700; }
.iw-app .iw-ps-amen-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.iw-app .iw-ps-count { font-size: 13px; color: var(--ink-3); margin: 0 0 10px; }
.iw-app .iw-ps-none { color: var(--ink-3); }
.iw-app .iw-ps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iw-app .iw-ps-item {
  width: 100%; text-align: start; cursor: pointer; font: inherit;
  display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: baseline;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink);
}
.iw-app .iw-ps-item:hover { border-color: var(--accent); }
.iw-app .iw-ps-item b { font-size: 15px; }
.iw-app .iw-ps-region { grid-column: 1; font-size: 12.5px; color: var(--ink-3); }
.iw-app .iw-ps-price { grid-row: 1; grid-column: 2; font-weight: 700; color: var(--accent); white-space: nowrap; }
.iw-app .iw-ps-checked { grid-row: 2; grid-column: 2; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.iw-app .iw-ps-amen { grid-column: 1 / -1; font-size: 14px; letter-spacing: 2px; }
.iw-app .iw-ps-amen i { font-style: normal; }

/* Grid and flex items default to min-width:auto, so the map SVG's intrinsic width can
   push its column wider than the screen and produce a horizontal scrollbar on phones. */
.iw-app .main > *, .iw-app .mappanel, .iw-app .mapcard, .iw-app .mapbox { min-width: 0; }
.iw-app .mapbox svg { max-width: 100%; height: auto; }

.iw-app .iw-error { padding: 24px; color: var(--alert); }
.iw-app--empty { padding: 24px; border: 1px dashed #ccc; border-radius: 10px; color: #666; }

@media (max-width: 700px) {
  .iw-app .iw-nb-meta { font-size: 12px; }
  .iw-app .iw-ps-form { grid-template-columns: 1fr; }
}

/* `hidden` must win. Several rules here and in the ported sheet set `display` on
   elements that are also toggled with the attribute, and a specified display beats the
   UA rule for [hidden] — which left the layer panel permanently open and a "0" badge
   showing on an empty switchboard. */
.iw-app [hidden]{display:none !important}

/* ==== map: zoom, pan and layers ====
   The map is our own SVG, so zooming is a viewBox change — no tiles, no key, no third
   party. Strokes are told not to scale, and everything that means "a thing at a point"
   is counter-scaled in JS, or a pin at 8x becomes a saucer. */
.iw-app .mapbox{position:relative; overflow:hidden; border-radius:var(--radius)}
/* Zooming moves the viewBox, so most of the country ends up outside it. The sheet the
   app is ported from sets overflow:visible on svg, which paints all of it over the page
   — the map must clip to its own box. */
/* One finger scrolls the page, as in any embedded map; two fingers pan and zoom it.
   touch-action:none here would trap a phone reader inside the map. */
.iw-app #iw-map{touch-action:pan-y; cursor:grab; overflow:hidden;
  user-select:none; -webkit-user-select:none}
.iw-app #iw-map:active{cursor:grabbing}
.iw-app #iw-map path,.iw-app #iw-map circle[stroke-dasharray]{vector-effect:non-scaling-stroke}

.iw-app .iw-zoombar{position:absolute; inset-inline-end:10px; top:10px; z-index:2;
  display:flex; flex-direction:column; align-items:stretch; gap:4px}
.iw-app .iw-zoombar button{width:30px; height:30px; padding:0; font:inherit; font-size:16px; line-height:1;
  background:var(--surface); color:var(--ink-2); border:1px solid var(--line-strong); border-radius:8px;
  cursor:pointer; box-shadow:var(--shadow)}
.iw-app .iw-zoombar button:hover{border-color:var(--accent); color:var(--accent)}
.iw-app .iw-zlabel{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3);
  text-align:center; min-height:14px}

/* switchboard */
.iw-app .iw-lyr-bar{position:relative; display:flex; align-items:center; gap:10px 12px;
  flex-wrap:wrap; margin:10px 0 4px}
.iw-app .iw-lyr-bar .chip b{display:inline-block; min-width:17px; padding:0 4px; border-radius:999px;
  background:var(--accent); color:var(--surface); font-size:11px; font-weight:600; text-align:center}
.iw-app .iw-lyr-more{background:none; border:0; color:var(--accent); font:inherit; font-size:13px;
  cursor:pointer; padding:2px 0; text-decoration:underline; text-underline-offset:3px}
.iw-app .iw-lyr-more:hover{color:var(--ink)}
.iw-app .iw-lyr-note{font-size:12px; color:var(--ink-3)}

.iw-app .iw-lyr-panel{position:absolute; z-index:20; top:calc(100% + 8px); inset-inline-start:0;
  width:min(470px,calc(100vw - 32px)); padding:12px 14px; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px;
  overflow-y:auto; overscroll-behavior:contain}
/* Flipped above the button when the window ends before the panel would. */
.iw-app .iw-lyr-panel--up{top:auto; bottom:calc(100% + 8px)}
@media (max-width:520px){ .iw-app .iw-lyr-panel{grid-template-columns:1fr} }
.iw-app .iw-lyr-cat h5{margin:0 0 6px; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.iw-app .iw-lyr-row{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; padding:3px 0;
  font-size:13.5px; line-height:1.3; color:var(--ink); cursor:pointer}
.iw-app .iw-lyr-row input{margin:0; accent-color:var(--accent); flex-shrink:0}
.iw-app .iw-lyr-swatch{width:9px; height:9px; border-radius:3px; flex-shrink:0}
.iw-app .iw-lyr-label{flex:1 1 auto; min-width:0}
/* On its own line under the label: the names run to three words, and a hint pinned to
   the right edge of a 200px column lands on top of them. */
.iw-app .iw-lyr-hint{flex:0 0 100%; margin-inline-start:26px; font-size:11px; font-style:normal;
  color:var(--ochre)}

/* markers of a layer: quieter than our own pins — this is context, water is the subject */
.iw-app .iw-lyr-m{cursor:pointer}
.iw-app .iw-lyr-dot{opacity:.75; stroke:var(--surface); stroke-width:1; transition:opacity .12s}
.iw-app .iw-lyr-m:hover .iw-lyr-dot,.iw-app .iw-lyr-m:focus-visible .iw-lyr-dot{opacity:1}

/* ==== popup at a layer marker ====
   Fixed to the viewport, because the map clips its own box and a popup inside it would
   be cut off. On a phone it becomes the same bottom sheet the place view uses, rather
   than a bubble floating over a 375px map. */
/* Above the modal backdrop (80), below the toast (99). The card is opened from two
   places now: a pin on the map, where nothing is above it, and a row in the "nearby"
   panel, which lives inside the place modal. At 70 it opened correctly and was
   painted underneath the modal, where it could only be seen peeking out at the edge. */
.iw-app .iw-lyr-pop{position:fixed; z-index:90; width:min(320px,calc(100vw - 16px));
  max-height:min(60vh,420px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:12px 14px; font-size:13.5px; line-height:1.5}
@media (max-width:700px){
  .iw-app .iw-lyr-pop.iw-lyr-pop--sheet{left:0 !important; right:0; top:auto !important; bottom:0;
    width:100%; max-height:70vh; border-radius:var(--radius) var(--radius) 0 0; padding:16px 16px 24px}
}
.iw-app .iw-pop-x{position:absolute; inset-inline-end:6px; top:4px; width:26px; height:26px;
  padding:0; border:0; background:none; color:var(--ink-3); font-size:20px; line-height:1; cursor:pointer}
.iw-app .iw-pop-x:hover{color:var(--ink)}
.iw-app .iw-pop-head{padding-inline-end:24px; margin-bottom:6px}
.iw-app .iw-pop-head b{font-family:"Bitter",Georgia,serif; font-size:15px}
.iw-app .iw-pop-head span{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}
.iw-app .iw-pop-row{margin:4px 0; color:var(--ink-2)}
.iw-app .iw-pop-row span{color:var(--ink-3)}
.iw-app .iw-pop-desc{margin:8px 0 4px; color:var(--ink-2)}
/* A tariff is a short table, not a sentence: the reader compares midweek against
   weekend, and comparing needs the numbers under one another. */
/* Small facts read faster as a row of chips than as sentences, and the three states —
   yes, no, and OSM's middle answers — have to be told apart at a glance. */
/* The two rows that turn a fact sheet into a card: how to get there, and what of ours
   it is near. */
.iw-app .iw-pop-acts{display:flex; gap:6px; margin:8px 0 6px; flex-wrap:wrap}
.iw-app .iw-pop-acts .iw-act{font-size:12px; padding:4px 9px}
.iw-app .iw-pop-near{display:flex; align-items:center; gap:5px; margin:6px 0;
  padding-top:7px; border-top:1px solid var(--line); font-size:12.5px}
.iw-app .iw-pop-near a{cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.iw-app .iw-pop-near span{margin-inline-start:auto; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-size:11.5px}
/* A restriction contradicts the opening times printed above it, so it has to be read
   before them rather than after. */
.iw-app .iw-pop-note.is-warn{color:var(--warn,#B4541F); font-weight:500}
.iw-app .iw-pop-chips{display:flex; flex-wrap:wrap; gap:4px; margin:6px 0}
.iw-app .iw-pop-chip{display:inline-block; padding:1px 7px; border-radius:999px;
  border:1px solid var(--line); font-size:11.5px; color:var(--ink-2); background:var(--surface-2)}
.iw-app .iw-pop-chip.is-yes{border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); color:var(--accent)}
.iw-app .iw-pop-chip.is-no{opacity:.6; text-decoration:line-through}
.iw-app .iw-pop-chip.is-part{border-color:color-mix(in srgb, var(--ochre) 45%, var(--line)); color:var(--ochre)}
.iw-app .iw-pop-rates{margin:6px 0}
.iw-app .iw-pop-rates>span{color:var(--ink-3)}
.iw-app .iw-pop-rates ul{list-style:none; margin:3px 0 0; padding:0}
.iw-app .iw-pop-rates li{display:flex; gap:6px; align-items:baseline; margin:2px 0; color:var(--ink-2)}
.iw-app .iw-pop-rates li b{font-family:"IBM Plex Mono",monospace; font-size:12.5px; white-space:nowrap}
.iw-app .iw-pop-raw{margin:6px 0; color:var(--ink-2); font-family:"IBM Plex Mono",monospace; font-size:12px}
.iw-app .iw-pop-raw span{display:block; color:var(--ink-3); font-family:inherit}
.iw-app .iw-pop-note{margin:4px 0; font-size:12px; color:var(--ochre)}
.iw-app .iw-pop-foot{margin:10px 0 0; padding-top:8px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3)}
.iw-app .iw-lyr-pop .iw-g-hours ul{margin:6px 0 0; padding-inline-start:0; list-style:none}
.iw-app .iw-lyr-pop .iw-g-hours li{display:flex; gap:10px; font-size:12.5px; color:var(--ink-2)}
.iw-app .iw-lyr-pop .iw-g-hours li b{min-width:26px; color:var(--ink-3); font-weight:500}
/* the two questions, in front of the switchboard */
.iw-app .iw-lyr-bar .chip b{font-family:"IBM Plex Mono",monospace}
/* Shabbat, in the one-line "nearby" row */
.iw-app .iw-nb-sh{font-weight:500; color:var(--accent)}
.iw-app .iw-nb-sh.off{color:var(--alert)}

/* A Wikipedia sentence is quoted, not absorbed: CC BY-SA allows reuse with attribution,
   and the visual difference between "we say" and "Wikipedia says" is part of that. */
.iw-app .iw-pop-wiki{margin:8px 0 4px; padding-inline-start:10px; border-inline-start:2px solid var(--line-strong);
  color:var(--ink-2); font-size:13px}
.iw-app .iw-pop-wiki cite{display:block; margin-top:4px; font-style:normal; font-size:11px; color:var(--ink-3)}
.iw-app .iw-pop-img{margin:8px 0 0}
.iw-app .iw-pop-img img{width:100%; height:auto; max-height:160px; object-fit:cover;
  border-radius:8px; display:block; background:var(--stone-300)}
.iw-app .iw-pop-img span{display:block; margin-top:3px; font-size:11px; color:var(--ink-3)}

/* =========================================================================
   Card (closed) and place (open) — design/Card.dc.html, design/Place.dc.html.

   The mockups carry literal hex values; the app already defines the same palette
   as tokens, so every colour here goes through a variable and the whole thing
   inverts with the dark theme for free. Direction-sensitive spacing uses logical
   properties: the guide runs in Hebrew as often as in Russian.
   ========================================================================= */

/* Every list item is now a full-width row, mixed lists included — the old grid
   was for the small camp tiles that no longer exist.

   The card reflows on the width of the list column, not the window: the map sits
   beside that column, so a 1280px screen gives the card under 700px and the
   artboard's proportions (drawn at 994) do not survive it. Hence a container. */
.iw-app .cards,
.iw-app .cards.mix {
  display:flex; flex-direction:column; gap:12px;
  container-type:inline-size; container-name:iwcards;
}

/* ---------------------------------------------------------- closed card -- */
.iw-app .iw-card{
  display:flex; gap:20px; align-items:flex-start;
  padding:18px 20px; cursor:pointer;
  border-inline-start:3px solid var(--c,var(--accent));
  transition:border-color .14s, transform .14s, box-shadow .14s;
}
.iw-app .iw-card:hover,
.iw-app .iw-card:focus-visible{ border-color:var(--accent); transform:translateY(-1px) }
.iw-app .iw-card.is-been{ opacity:.72 }
.iw-app .iw-card.is-fav{ border-inline-start-color:var(--star) }

.iw-app .iw-card-photo{
  width:240px; height:176px; flex:none; object-fit:cover;
  border-radius:8px; display:block; background:var(--bg);
}
.iw-app .iw-card-photo--none{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px dashed var(--line-strong); color:var(--ink-3);
}
.iw-app .iw-card-photo--none .iw-i{ width:20px; height:20px }
.iw-app .iw-card-photo--none span{ font-size:10.5px }

.iw-app .iw-card-main{ flex:1 1 auto; min-width:0 }
.iw-app .iw-card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:6px;
}
.iw-app .iw-card-title{ min-width:0 }
.iw-app .iw-card h3{
  font-size:20px; font-weight:600; margin:0 0 4px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.iw-app .iw-card h3 .star{ color:var(--star) }
.iw-app .iw-card-alt{ margin:0; font-size:13px; color:var(--ink-3); unicode-bidi:isolate }
.iw-app .iw-card-tags{ display:flex; align-items:center; gap:8px; flex:none }

.iw-app .iw-tag-type{
  font-size:11.5px; padding:3px 9px; border-radius:999px; white-space:nowrap; font-weight:500;
  background:var(--water-pale); color:var(--accent);
}
.iw-app .iw-tag-km{
  font-size:12.5px; font-weight:500; padding:4px 10px; border-radius:999px; white-space:nowrap;
  background:var(--ink); color:var(--surface);
}
.iw-app .iw-tag-top{
  font-size:12px; padding:4px 11px; border-radius:999px; white-space:nowrap; font-weight:500;
  background:var(--ink); color:var(--surface);
}

.iw-app .iw-card-desc{
  margin:10px 0 12px; font-size:14.5px; line-height:1.6; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.iw-app .iw-card-desc .iw-i{ vertical-align:-2px; margin-inline-end:5px }

/* the three facts: swimming, walk to the water, sleeping here */
.iw-app .iw-card-facts{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin-bottom:12px;
}
.iw-app .iw-fact{
  display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-2);
}
.iw-app .iw-fact.is-yes{ color:var(--accent) }
.iw-app .iw-fact.is-warn{ color:var(--ochre) }
.iw-app .iw-fact.is-mute{ color:var(--ink-3) }

.iw-app .iw-card-amen{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px }
.iw-app .iw-pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  background:var(--water-pale); color:var(--ink); font-size:13px;
}
.iw-app .iw-pill b{ font-weight:400 }
.iw-app .iw-pill .iw-i{ color:var(--accent) }
.iw-app .iw-pill.is-more{ background:transparent; border:1px solid var(--line); color:var(--ink-3) }
.iw-app .iw-amen-none{ font-size:13px; color:var(--ink-3) }

.iw-app .iw-card-foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-top:12px; border-top:1px solid var(--line);
}
.iw-app .iw-foot-label{ font-size:13px; color:var(--ink-3) }
.iw-app .iw-foot-price{ font-size:16px; font-weight:600; color:var(--ink); white-space:nowrap }
.iw-app .iw-foot-price.is-free{ color:var(--accent) }
.iw-app .iw-foot-check{
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--accent);
}
.iw-app .iw-foot-check .iw-i{ width:12px; height:12px; stroke-width:2.6 }

/* Narrow column: the type and distance move off the title's line, so the name gets
   the full width instead of wrapping to three lines beside a 200px block of chips. */
@container iwcards (max-width:860px){
  .iw-app .iw-card{ gap:16px }
  .iw-app .iw-card-photo{ width:200px; height:150px }
  .iw-app .iw-card-head{ flex-direction:column; gap:7px; margin-bottom:2px }
  .iw-app .iw-card-tags{ order:-1 }
  .iw-app .iw-card h3{ font-size:18.5px }
  .iw-app .iw-card-desc{ -webkit-line-clamp:2; margin:8px 0 10px }
}
/* Phone-width column: photo on top, everything below it. Six labelled amenity
   pills cost three rows at this width, so only the pictograms stay. */
@container iwcards (max-width:560px){
  .iw-app .iw-card{ flex-direction:column; gap:12px; padding:14px 15px }
  .iw-app .iw-card-photo{ width:100%; height:150px }
  .iw-app .iw-card-amen{ gap:6px; margin-bottom:12px }
  .iw-app .iw-pill{ padding:6px 9px }
  .iw-app .iw-pill b{ display:none }
  .iw-app .iw-pill .iw-i{ width:17px; height:17px }
  .iw-app .iw-card-foot{ gap:10px }
  .iw-app .iw-foot-check{ flex-basis:100%; margin-inline-start:0 }
}

/* ------------------------------------------------ the toolbar scrolls -- */
/* Search and filters used to pin themselves to the top of the viewport — four
   rows of controls, a third of a desktop screen, permanently occupied by things
   touched once per visit. They scroll away with everything else now, so the
   three rules that reserved room for them stop compensating for a height that
   is no longer there. (--tbh is still measured; the map still uses it on the
   widths where it is laid out beside the list.) */
.iw-app .toolbar{ position:static }
.iw-app .mappanel{ top:12px }
.iw-app .card{ scroll-margin-top:calc(14px + var(--wp-admin--admin-bar--height, 0px)) }
.iw-app .panel th{ top:0 }

/* ------------------------------------------------- card opened in place -- */
/* The card keeps its slot and its type stripe and becomes the page: the results
   below simply move down, so the list never disappears under an overlay. */
.iw-app .iw-card.is-open{
  display:block; padding:0; cursor:default; position:relative;
  border-color:var(--line-strong); scroll-margin-top:calc(14px + var(--wp-admin--admin-bar--height, 0px));
}
.iw-app .iw-card.is-open:hover{ transform:none; border-color:var(--line-strong) }
/* The card is not clipped, because a clipping ancestor would pin the sticky rail
   inside it. The two blocks that paint their own background therefore give it up
   here — it is the same colour as the card, and the card is the one with corners. */
.iw-app .iw-card.is-open .iw-place-head,
.iw-app .iw-card.is-open .iw-stats-grid{ background:transparent }

.iw-app .iw-collapse-bar{
  /* WordPress pins its admin bar over the top 32px for logged-in users and
     publishes the height as a variable; visitors have neither, hence the 0. */
  position:sticky; top:calc(12px + var(--wp-admin--admin-bar--height, 0px));
  z-index:5; height:0;
  display:flex; justify-content:flex-end; padding-inline-end:14px;
}
/* It floats over the text, so it stays the size of a control and not of a label:
   a wide button parked over a paragraph hides words rather than overlapping them.
   The name is still announced and shown on hover, and it unfolds on hover too. */
.iw-app .iw-collapse{
  margin-top:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:0;
  width:38px; height:38px; padding:0;
  border-radius:999px; border:1px solid var(--line-strong); background:var(--surface-2);
  color:var(--ink-2); font:inherit; font-size:13.5px; cursor:pointer;
  box-shadow:0 2px 12px -3px rgba(27,36,34,.32);
  transition:width .16s ease, gap .16s ease, padding .16s ease, border-color .14s, color .14s;
}
.iw-app .iw-collapse:hover,
.iw-app .iw-collapse:focus-visible{
  border-color:var(--accent); color:var(--accent);
  width:auto; gap:7px; padding:0 14px; border-radius:9px;
}
.iw-app .iw-collapse .iw-i{ width:14px; height:14px; stroke-width:2.2 }
.iw-app .iw-collapse-label{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  transition:max-width .16s ease, opacity .16s ease;
}
.iw-app .iw-collapse:hover .iw-collapse-label,
.iw-app .iw-collapse:focus-visible .iw-collapse-label{ max-width:9em; opacity:1 }
/* The head has to leave room for that button next to the chips. */
.iw-app .iw-card.is-open .iw-place-head{ padding-inline-end:calc(var(--pad) + 130px) }
@media (max-width:560px){
  .iw-app .iw-card.is-open .iw-place-head{ padding-inline-end:var(--pad); padding-top:52px }
  .iw-app .iw-collapse-bar{ padding-inline-end:12px }
}

/* Camp pins get the same hover emphasis water pins already had. */
.iw-app .cmarker.hl rect.cpin{ stroke-width:3.5 }

/* ------------------------------------------------------------ icons ------ */
.iw-app .iw-i{ width:15px; height:15px; flex:none }
/* Filter chips and the price-search rows carry the same pictograms. */
.iw-app .chip .iw-i{ vertical-align:-2px; margin-inline-end:2px; color:var(--accent) }
.iw-app .chip[aria-pressed="true"] .iw-i{ color:inherit }
.iw-app .iw-ps-amen i .iw-i{ width:16px; height:16px; vertical-align:-3px; color:var(--accent) }

/* ------------------------------------------------------- open: place ----- */
/* The page view needs room for a five-tile stat row and a sidebar; the modal
   stays narrow for everything else (scenarios, the price search). */
.iw-app .modal.iw-modal--place{ width:min(1120px,100%) }
.iw-app .modal.iw-modal--place .modal-body{ padding:0 }

.iw-app .iw-place{ --pad:clamp(16px,3vw,34px) }
.iw-app .iw-place > *{ padding-inline:var(--pad) }
.iw-app .iw-place h1{ font-size:clamp(26px,3.4vw,38px); font-weight:700; line-height:1.14;
  letter-spacing:-.02em; margin:0 0 8px; max-width:24ch }
.iw-app .iw-place h2{ font-size:22px; font-weight:600; margin:0 0 14px }

.iw-app .iw-place-head{ background:var(--surface); border-bottom:1px solid var(--line);
  padding-block:20px 22px }
.iw-app .iw-place-crumbs{ margin:0 0 12px; font-size:13.5px; color:var(--ink-3) }
.iw-app .iw-place-chips{ display:flex; align-items:center; gap:9px; margin-bottom:12px; flex-wrap:wrap }
.iw-app .iw-place-alt{ margin:0 0 18px; font-size:20px; color:var(--ink-2); unicode-bidi:isolate }
.iw-app[lang="ru"] .iw-place-alt{ font-family:"Frank Ruhl Libre",Georgia,serif }

.iw-app .iw-place-actions{ display:flex; flex-wrap:wrap; gap:8px }
.iw-app .iw-act{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:40px; padding:9px 15px; border-radius:9px; font-size:14px;
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--ink-2);
  cursor:pointer; font-family:inherit; text-decoration:none;
}
.iw-app .iw-act:hover{ border-color:var(--accent); color:var(--accent) }
.iw-app .iw-act.is-primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); font-weight:500 }
.iw-app .iw-act.is-primary:hover{ color:var(--surface); filter:brightness(1.08) }
.iw-app .iw-act.is-icon{ width:40px; padding:9px }
.iw-app .iw-act.on{ border-color:var(--accent); color:var(--accent); background:var(--water-pale) }

/* stat row */
.iw-app .iw-stats-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:12px;
  background:var(--surface); border-bottom:1px solid var(--line); padding-block:16px;
}
.iw-app .iw-stat{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:15px 17px }
.iw-app .iw-eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;
}
.iw-app .iw-stat-big{ font-size:25px; font-weight:600; line-height:1.1; color:var(--ink) }
.iw-app .iw-stat-big.is-text{ font-size:19px }
.iw-app .iw-stat-big.is-good{ color:var(--accent) }
.iw-app .iw-stat-big.is-warn{ color:var(--ochre) }
.iw-app .iw-stat-big.is-bad{ color:var(--alert) }
.iw-app .iw-stat-sub{ font-size:13.5px; color:var(--ink-2); margin-top:5px }

.iw-app .iw-place .iw-price-verified{ margin:14px 0 0 }

/* warnings — the block people read last and regret skipping */
.iw-app .iw-place-warn{ margin-top:24px }
.iw-app .iw-place-warn > *{ margin-inline:0 }
.iw-app .iw-place-warn{
  background:var(--alert-bg); border:1px solid color-mix(in srgb,var(--alert) 30%,transparent);
  border-radius:12px; padding:18px 22px; margin-inline:var(--pad); padding-inline:22px;
}
.iw-app .iw-warn-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; color:var(--alert) }
.iw-app .iw-warn-head .iw-i{ width:18px; height:18px; stroke-width:2 }
.iw-app .iw-warn-head b{ font-family:"Bitter",Georgia,serif; font-size:17px; font-weight:600 }
.iw-app .iw-place-warn p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2) }

.iw-app .iw-place-photo{ margin:26px 0 0 }
.iw-app .iw-place-photo img{
  width:100%; height:clamp(220px,32vw,400px); object-fit:cover;
  border-radius:12px; display:block; border:1px solid var(--line);
}
.iw-app .iw-place-photo figcaption{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-top:8px;
  font-size:11.5px; color:var(--ink-3); flex-wrap:wrap;
}
.iw-app .iw-place-photo figcaption span[dir="rtl"]{ font-size:12.5px; color:var(--ink-2); unicode-bidi:isolate }

/* prose + sidebar */
.iw-app .iw-place-cols{ display:flex; gap:34px; align-items:flex-start; padding-block:28px 4px }
.iw-app .iw-place-main{ flex:1 1 auto; min-width:0; max-width:70ch }
.iw-app .iw-place-side{ width:320px; flex:none; display:flex; flex-direction:column; gap:14px }
@media (max-width:900px){
  .iw-app .iw-place-cols{ flex-direction:column; gap:22px }
  .iw-app .iw-place-side{ width:100% }
}
.iw-app .iw-lead{ margin:0 0 16px; font-size:16.5px; line-height:1.68; color:var(--ink) }
.iw-app .iw-act-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 20px }
.iw-app .iw-act-chips span{
  font-size:12.5px; padding:5px 11px; border-radius:999px; background:var(--line); color:var(--ink-2);
}
.iw-app .iw-note-box{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:15px 18px; margin:0 0 22px;
}
.iw-app .iw-note-box p{ margin:0; font-size:14.5px; line-height:1.6 }
.iw-app .iw-note-row{
  display:flex; align-items:flex-start; gap:10px; margin:0 0 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:13px 16px;
}
.iw-app .iw-note-row .iw-i{ width:17px; height:17px; margin-top:3px; color:var(--ink-3) }
.iw-app .iw-note-row .iw-i.is-warn{ color:var(--ochre) }
.iw-app .iw-note-row .iw-i.is-accent{ color:var(--accent) }
.iw-app .iw-note-row p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-2) }

.iw-app .iw-side-box{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px;
}
.iw-app .iw-side-box p{ margin:0; font-size:14px; line-height:1.55 }
.iw-app .iw-side-split{ border-top:1px solid var(--line); margin-top:12px; padding-top:11px }
.iw-app .iw-side-split .iw-eyebrow{ margin-bottom:4px }

.iw-app .iw-month-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; margin-bottom:12px }
.iw-app .iw-month{ text-align:center; font-size:12px; padding:7px 0; border-radius:6px;
  background:var(--bg); color:var(--ink-2) }
.iw-app .iw-month.is-best{ background:var(--accent); color:var(--surface); font-weight:600 }
.iw-app .iw-month.is-off{ background:var(--alert-bg); color:var(--alert) }
.iw-app .iw-month-legend{ display:flex; flex-wrap:wrap; gap:5px 14px; font-size:12px; color:var(--ink-2) }
.iw-app .iw-month-legend span{ display:inline-flex; align-items:center; gap:5px }
.iw-app .iw-month-legend i{ width:9px; height:9px; border-radius:3px; display:inline-block }
.iw-app .iw-month-legend i.is-best{ background:var(--accent) }
.iw-app .iw-month-legend i.is-ok{ background:var(--bg); border:1px solid var(--line) }
.iw-app .iw-month-legend i.is-off{ background:var(--alert-bg) }

/* sections */
.iw-app .iw-place-sec{ padding-block:26px 0 }
.iw-app .iw-place-sec-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px }
.iw-app .iw-place-sec-head h2{ margin:0 }
.iw-app .iw-place-sec-head span{ font-size:13px; color:var(--ink-3) }
.iw-app .iw-sec-sub{ margin:0 0 12px; font-size:14px; color:var(--ink-3) }
.iw-app .iw-place-sec > p{ font-size:14.5px; line-height:1.6; color:var(--ink-2) }

/* amenities, both directions */
.iw-app .iw-amen-panels{ display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap }
.iw-app .iw-amen-panel{
  flex:1 1 340px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:18px 20px;
}
.iw-app .iw-amen-panel.is-narrow{ flex:0 1 320px }
.iw-app .iw-amen-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px }
.iw-app .iw-amen-head .iw-i{ width:16px; height:16px; stroke-width:2.4 }
.iw-app .iw-amen-head.is-yes{ color:var(--accent) }
.iw-app .iw-amen-head.is-no{ color:var(--alert) }
.iw-app .iw-amen-head b{ font-size:14.5px; color:var(--ink) }
.iw-app .iw-amen-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px }
.iw-app .iw-amen-tile{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:14px 8px; border-radius:10px; background:var(--water-pale); color:var(--ink);
}
.iw-app .iw-amen-tile .iw-i{ width:24px; height:24px; color:var(--accent) }
.iw-app .iw-amen-tile span{ font-size:12.5px; line-height:1.35 }
.iw-app .iw-amen-tile.is-off{ background:transparent; border:1px dashed var(--line-strong); color:var(--ink-3) }
.iw-app .iw-amen-tile.is-off .iw-i{ color:var(--ink-3) }
.iw-app .iw-amen-note{
  margin:14px 0 0; font-size:12.5px; color:var(--ink-3); line-height:1.5;
  border-top:1px solid var(--line); padding-top:11px;
}

/* related places */
.iw-app .iw-rel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-top:12px }
.iw-app .iw-rel{
  display:block; background:var(--surface); border:1px solid var(--line);
  border-inline-start:3px solid var(--c,var(--accent)); border-radius:10px;
  padding:13px 16px; cursor:pointer; text-decoration:none;
}
.iw-app .iw-rel:hover{ border-color:var(--accent) }
.iw-app .iw-rel b{ display:block; font-size:14.5px; color:var(--ink); margin-bottom:3px }
.iw-app .iw-rel span{ font-size:12.5px; color:var(--ink-3) }

/* practicalities */
.iw-app .iw-practice{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px 34px }
.iw-app .iw-practice p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink) }
.iw-app .iw-practice .iw-eyebrow{ margin-bottom:6px }

/* rental price list, camps only */
.iw-app .iw-rent{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px 20px }
.iw-app .iw-rent > div{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  border-bottom:1px dashed var(--line); padding-bottom:6px;
}
.iw-app .iw-rent span{ font-size:14px; color:var(--ink-2) }
.iw-app .iw-rent b{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:14px; white-space:nowrap }

/* The OpenStreetMap panel and the Google block are filled after render; inside
   the page view they are ordinary sections rather than the modal's appendix. */
.iw-app .iw-place .iw-nb{ border:0; padding-block:26px 0 }
.iw-app .iw-place .iw-g-host:not(:empty){ padding-block:26px 0 }
.iw-app .iw-place > :last-child{ padding-bottom:34px }