/* ITALMEDIA — mappa dei Municipi nel modulo Scrivici (vedi assets/js/zone-map.js) */
.zm{ margin:-.6rem 0 3.4rem }
.zm__tg{ width:100%; display:flex; align-items:center; gap:1.2rem; padding:1.4rem 1.6rem; cursor:pointer; text-align:left;
  font:500 1.6rem var(--body); color:var(--paper); background:rgba(242,240,234,.04);
  border:1px solid rgba(242,240,234,.14); border-radius:1.2rem; transition:background .3s, border-color .3s }
.zm__tg:hover{ background:rgba(242,240,234,.08); border-color:rgba(242,240,234,.24) }
.zm__tg:focus-visible{ outline:2px solid var(--salvia); outline-offset:2px }
.zm__ico{ width:2rem; height:2rem; flex:none; color:var(--salvia) }
.zm__ico svg, .zm__chev svg{ width:100%; height:100%; display:block }
.zm__tl{ flex:1 }
.zm__tl em{ font-style:normal; color:#a8a39c; font-size:1.35rem; margin-left:.6rem }
.zm__count{ font-size:1.25rem; font-weight:600; color:#000; background:var(--salvia); border-radius:99rem; padding:.2rem .9rem; min-width:2.2rem; text-align:center }
.zm__count[hidden]{ display:none }
.zm__chev{ width:1.6rem; height:1.6rem; flex:none; color:#a8a39c; transition:transform .45s var(--ease) }
.zm.is-open .zm__chev{ transform:rotate(180deg) }
.zm.to-side.is-open .zm__chev{ transform:rotate(90deg) }        /* su desktop indica che la mappa e' a sinistra */

/* pannello che si apre in altezza */
.zm__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease) }
.zm__panel.is-open{ grid-template-rows:1fr }
.zm__in{ overflow:hidden; min-height:0 }
.zm__body{ padding-top:2rem; opacity:0; transform:translateY(-.8rem); transition:opacity .4s ease, transform .5s var(--ease) }
.zm__panel.is-open .zm__body{ opacity:1; transform:none; transition-delay:.12s }

.zm__map{ position:relative; aspect-ratio:1190/1200; max-width:44rem; margin:0 auto }
.zm__svg{ width:100%; height:100%; display:block; overflow:visible }
.zm__m{ fill:rgba(242,240,234,.035); stroke:rgba(242,240,234,.3); stroke-width:1px; vector-effect:non-scaling-stroke;
  stroke-linejoin:round; cursor:pointer; outline:none; transition:fill .35s ease, stroke .35s ease }
.zm__m:hover, .zm__m:focus-visible{ fill:rgba(242,240,234,.12); stroke:rgba(242,240,234,.6) }
.zm__m.on{ fill:var(--salvia); stroke:rgba(0,0,0,.35) }
.zm__m.on:hover, .zm__m.on:focus-visible{ fill:#b6e3c7 }
/* mare: un accenno che sfuma, solo lungo la costa di Ostia */
.zm__coast{ fill:none; stroke:rgba(150,196,236,.16); stroke-width:1.2px; vector-effect:non-scaling-stroke }
.zm__wave{ fill:none; stroke:rgba(150,196,236,.13); stroke-width:1px; vector-effect:non-scaling-stroke; stroke-dasharray:3 9; opacity:calc(1 - var(--w) * .3) }
.zm__panel.is-open .zm__wave{ animation:zmWave 10s linear infinite; animation-delay:calc(var(--w) * -1.6s) }
@keyframes zmWave{ to{ stroke-dashoffset:-120 } }
.zm__seaT{ font:italic 500 24px var(--body); fill:rgba(150,196,236,.55); letter-spacing:.14em }

/* intestazione del pannello: stessa icona e stesso nome del tasto */
.zm__head{ display:none }
.zm__ht{ flex:1; font:600 1.7rem var(--body); color:var(--paper) }
.zm__ht em{ font-style:normal; font-weight:400; font-size:1.35rem; color:#a8a39c; margin-left:.8rem }
.zm__close{ display:inline-flex; align-items:center; gap:.6rem; font:500 1.4rem var(--body); color:#000; background:var(--salvia);
  border:0; border-radius:.8rem; padding:.7rem 1.2rem; cursor:pointer; transition:filter .25s }
.zm__close:hover{ filter:brightness(1.08) }
.zm__close svg{ width:1.5rem; height:1.5rem }

/* tasto attivo: si collega visivamente al pannello aperto */
.zm.is-open .zm__tg{ border-color:rgba(158,216,181,.55); background:rgba(158,216,181,.08) }

/* ===== DESKTOP: un foglio nero che entra da sinistra, a tutta altezza dello schermo ===== */
@media (min-width:992px){
  .zm__panel.zm--sheet{ position:fixed; z-index:1001; top:0; left:0; bottom:0; width:var(--zm-w, 50vw); display:block;
    background:#000; border-right:1px solid rgba(242,240,234,.1); box-shadow:2rem 0 6rem rgba(0,0,0,.6);
    transform:translateX(-102%); visibility:hidden; transition:transform .7s var(--ease), visibility 0s linear .7s }
  .zm__panel.zm--sheet.is-open{ transform:none; visibility:visible; transition:transform .7s var(--ease), visibility 0s }
  .zm--sheet .zm__in{ height:100%; overflow:hidden }
  .zm--sheet .zm__body{ height:100%; padding:3.2rem 4rem 3.6rem; opacity:1; transform:none;
    display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto minmax(0,1fr) auto auto; column-gap:1.4rem }
  .zm--sheet .zm__head{ grid-column:1 / -1; grid-row:1; display:flex; align-items:center; gap:1.2rem; padding-bottom:1.8rem; border-bottom:1px solid rgba(242,240,234,.1) }
  .zm--sheet .zm__ht{ font-size:2rem }
  .zm--sheet .zm__info{ grid-column:1 / -1; grid-row:2; text-align:left; margin:1.6rem 0 0; min-height:2.8em; font-size:1.5rem }
  .zm--sheet .zm__map{ grid-column:1 / -1; grid-row:3; position:relative; min-height:0; height:100%; max-width:none; aspect-ratio:auto; margin:0 0 2rem }
  .zm--sheet .zm__labels text{ font-size:22px }
  .zm--sheet .zm__ctrl{ display:contents }
  .zm--sheet .zm__search{ grid-column:1; grid-row:4; margin:0 }
  .zm--sheet .zm__acts{ grid-column:2; grid-row:4; align-self:end; padding-bottom:.4rem }
  .zm--sheet .zm__chips{ grid-column:1 / -1; grid-row:5; margin:1.4rem 0 0; min-height:2.8rem }
  .zm--sheet .zm__chips:empty::before{ content:'Nessuna zona scelta'; font-size:1.35rem; color:#7d7872; line-height:2.8rem }
  html[lang="en"] .zm--sheet .zm__chips:empty::before{ content:'No area selected' }
  .zm--sheet .zm__sug{ top:auto; bottom:100%; margin:0 0 .6rem }
  /* ingresso dei municipi un attimo dopo il foglio */
  .zm--sheet.is-open.is-ready .zm__m{ animation-delay:calc(var(--i) * 35ms + .35s) }
}

/* ingresso: i municipi compaiono uno dopo l'altro */
.zm__panel.is-open.is-ready .zm__m{ animation:zmIn .5s var(--ease) both; animation-delay:calc(var(--i) * 35ms + .15s) }
@keyframes zmIn{ from{ opacity:0 } to{ opacity:1 } }
.zm__m.ping{ animation:zmPing .6s ease !important }
@keyframes zmPing{ 0%{ fill:#fff } 100%{ fill:var(--salvia) } }
.zm__labels text{ font:600 26px var(--body); fill:rgba(242,240,234,.55); text-anchor:middle; dominant-baseline:central; pointer-events:none; transition:fill .35s }
.zm__labels text.on{ fill:#000 }

.zm__info{ min-height:2.4em; margin:1.2rem 0 1.6rem; font-size:1.4rem; line-height:1.5; color:#a8a39c; text-align:center }
.zm__info b{ color:var(--paper); font-weight:600 }

.zm__search{ position:relative; margin-bottom:1.6rem }
.zm__search .zm__q{ padding:1rem 0 1rem 2.6rem }
.zm__search > svg{ position:absolute; left:0; top:1.3rem; width:1.6rem; height:1.6rem; color:#a8a39c; pointer-events:none }
.zm__sug{ position:absolute; left:0; right:0; top:100%; z-index:5; margin-top:.6rem; list-style:none; padding:.5rem;
  background:#141212; border:1px solid rgba(242,240,234,.14); border-radius:1rem; box-shadow:0 1.6rem 4rem rgba(0,0,0,.5) }
.zm__sug[hidden]{ display:none }
.zm__sug li{ display:flex; justify-content:space-between; gap:1rem; padding:.9rem 1.2rem; border-radius:.7rem; font-size:1.5rem; cursor:pointer }
.zm__sug li em{ font-style:normal; color:#a8a39c; font-size:1.3rem }
.zm__sug li:hover, .zm__sug li.hl{ background:rgba(242,240,234,.08) }
.zm__sug .zm__none{ color:#a8a39c; cursor:default }

.zm__chips{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.4rem }
.zm__chip{ display:inline-flex; align-items:center; gap:.8rem; min-height:3.8rem; padding:.4rem .5rem .4rem 1.4rem; border:0; cursor:pointer;
  font:500 1.5rem var(--body); color:#000; background:var(--salvia); border-radius:.9rem; animation:zmChip .35s var(--ease) }
.zm__chip i{ font-style:normal }
/* la × e' un bottoncino tondo, grande abbastanza da toccarlo col dito */
.zm__chip span{ display:inline-grid; place-items:center; flex:none; width:2.8rem; height:2.8rem; border-radius:50%; font-size:1.9rem; line-height:1;
  background:rgba(0,0,0,.1); transition:background .2s }
.zm__chip:hover span{ background:rgba(0,0,0,.24) }
.zm__chip.is-free span{ background:rgba(242,240,234,.12) }
.zm__chip.is-free:hover span{ background:rgba(242,240,234,.25) }
@media (max-width:767px){ .zm__chip{ min-height:4.2rem; font-size:1.55rem } .zm__chip span{ width:3.2rem; height:3.2rem } }
@keyframes zmChip{ from{ opacity:0; transform:scale(.85) } to{ opacity:1; transform:none } }

.zm__acts{ display:flex; gap:1rem }
.zm__acts button{ font:500 1.35rem var(--body); color:var(--paper); background:none; cursor:pointer;
  border:1px solid rgba(242,240,234,.18); border-radius:.7rem; padding:.6rem 1.2rem; transition:background .3s }
.zm__acts button:hover{ background:rgba(242,240,234,.08) }

@media (max-width:767px){
  .zm__tg{ font-size:1.5rem; padding:1.2rem 1.3rem }
  .zm__tl em{ display:block; margin:.2rem 0 0 }
  .zm__labels text{ font-size:32px }
}
@media (prefers-reduced-motion:reduce){
  .zm__panel, .zm__body, .zm__m, .zm__chev{ transition:none !important; animation:none !important }
}

/* quartieri scelti dalla ricerca e zone scritte a mano */
.zm__tl em.is-set{ color:var(--salvia); display:inline-block; max-width:24ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom }
.zm__chip b{ font-weight:600 }
.zm__chip.is-q i{ font-size:1.15rem; opacity:.65; margin-left:-.1rem }
.zm__chip.is-free{ background:transparent; color:var(--paper); box-shadow:inset 0 0 0 1px rgba(158,216,181,.7) }
.zm__sug .zm__add span{ color:var(--salvia) }
@media (max-width:767px){ .zm__tl em.is-set{ display:block; max-width:none } }
/* il mare disegnato sotto la mappa è solo decorazione: non deve coprire le etichette (la × del primo municipio) */
.zm__seaG, .zm__seaG *{ pointer-events:none }
.zm__chips, .zm__ctrl, .zm__acts{ position:relative; z-index:2 }