/* ITALMEDIA — "Scegli il periodo" e "Budget indicativo" nel modulo Scrivici (vedi assets/js/periodo.js).
   Il tasto riusa lo stile di quello delle zone (.zm__tg in zone-map.css). */
.pd{ margin:-1.8rem 0 3.4rem }
.pd.is-open .zm__tg{ border-color:rgba(158,216,181,.55); background:rgba(158,216,181,.08) }
.pd.is-open .zm__chev{ transform:rotate(180deg) }

.pd__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease) }
.pd__panel.is-open{ grid-template-rows:1fr }
.pd__in{ overflow:hidden; min-height:0 }
.pd__body{ padding:1.6rem 0 .4rem; opacity:0; transform:translateY(-.8rem); transition:opacity .4s ease, transform .5s var(--ease) }
.pd__panel.is-open .pd__body{ opacity:1; transform:none; transition-delay:.12s }

/* schede */
.pd__tabs{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); padding:.4rem; border-radius:1.1rem;
  background:rgba(242,240,234,.05); border:1px solid rgba(242,240,234,.1) }
.pd__tabs::before{ content:''; position:absolute; top:.4rem; bottom:.4rem; left:.4rem; width:calc((100% - .8rem) / 4); border-radius:.75rem;
  background:var(--salvia); transform:translateX(calc(var(--tab, 0) * 100%)); transition:transform .45s var(--ease) }
.pd__tab{ position:relative; z-index:1; font:500 1.3rem var(--body); color:#a8a39c; background:none; border:0; cursor:pointer;
  padding:.85rem .4rem; border-radius:.75rem; transition:color .3s; white-space:nowrap }
.pd__tab:hover{ color:var(--paper) }
.pd__tab.on{ color:#000 }
.pd__tab:focus-visible{ outline:2px solid var(--salvia); outline-offset:2px }
.pd__pane{ padding-top:1.8rem }
.pd__pane[hidden]{ display:none }
.pd__note{ font-size:1.3rem; line-height:1.5; color:#a8a39c; margin:1.4rem 0 0 }
.pd__note b{ color:var(--paper); font-weight:600 }
.pd__note--sm{ display:flex; align-items:flex-start; gap:1rem; font-size:1.25rem; line-height:1.5; color:#e3d6a6; margin-top:1rem;
  padding:1.1rem 1.3rem; border-radius:.9rem; background:rgba(232,196,90,.1); border:1px solid rgba(232,196,90,.38) }
.pd__note--sm svg{ flex:none; width:1.8rem; height:1.8rem; margin-top:.05rem; fill:none; stroke:#ecc65c; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.pd__note--big{ font-size:1.5rem; color:var(--paper); margin:0; padding:1.6rem 1.8rem; border-radius:1rem; background:rgba(158,216,181,.08); border:1px solid rgba(158,216,181,.25) }

/* calendario delle quattordicine */
.pd__nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem }
.pd__mese{ font:600 1.6rem var(--body); color:var(--paper) }
.pd__arw{ width:3.2rem; height:3.2rem; display:grid; place-items:center; border-radius:50%; cursor:pointer; color:var(--paper);
  background:none; border:1px solid rgba(242,240,234,.16); transition:background .3s, opacity .3s }
.pd__arw:hover{ background:rgba(242,240,234,.08) }
.pd__arw:disabled{ opacity:.25; cursor:default; background:none }
.pd__arw svg{ width:1.6rem; height:1.6rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.pd__gg, .pd__q{ display:grid; grid-template-columns:4.4rem 1fr }
.pd__gg span:not(:first-child){ text-align:center }
.pd__gg{ grid-template-columns:4.4rem repeat(7, 1fr); font:600 1.1rem var(--body); letter-spacing:.08em; color:#7d7872; padding:0 .6rem .6rem }
.pd__q{ width:100%; align-items:center; text-align:left; padding:.5rem .6rem; margin-bottom:.5rem; border-radius:1rem; cursor:pointer;
  color:var(--paper); background:rgba(242,240,234,.03); border:1px solid rgba(242,240,234,.08); transition:background .25s, border-color .25s, color .25s }
.pd__q:hover{ background:rgba(242,240,234,.08); border-color:rgba(242,240,234,.2) }
.pd__q:focus-visible{ outline:2px solid var(--salvia); outline-offset:2px }
.pd__q:disabled{ cursor:default; opacity:.32; background:none }
.pd__q.on{ background:var(--salvia); border-color:var(--salvia); color:#000; animation:pdOn .35s var(--ease) }
@keyframes pdOn{ from{ transform:scale(.98) } to{ transform:none } }
.pd__gg span:first-child{ text-align:center; letter-spacing:.04em }
/* numero della quattordicina, separato dai giorni da una riga sottile */
.pd__qn{ align-self:stretch; display:grid; place-items:center; margin-right:.6rem; border-right:1px solid currentColor; border-right-color:rgba(242,240,234,.14) }
.pd__q.on .pd__qn{ border-right-color:rgba(0,0,0,.18) }
.pd__qn b{ font:700 1.7rem var(--disp); letter-spacing:-.01em }
.pd__qn sup{ font-size:.6em; font-weight:600; vertical-align:top; position:relative; top:-.1em; margin-left:.05em }
/* le due settimane, separate da una riga sottile */
.pd__dd{ position:relative; display:grid; grid-template-columns:repeat(7, 1fr); row-gap:.5rem }
.pd__dd::after{ content:''; position:absolute; left:.4rem; right:.4rem; top:50%; height:1px; background:currentColor; opacity:.13; pointer-events:none }
.pd__dd i{ font-style:normal; font-size:1.3rem; text-align:center; line-height:2.3rem; font-variant-numeric:tabular-nums }
.pd__dd i.out{ opacity:.38 }
/* oggi: pallino rosso sotto la data · inizio di ogni quattordicina: numero dentro un cerchietto */
.pd__dd i{ display:grid; place-items:center }
.pd__dd i span{ display:inline-grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50% }
/* inizio quattordicina: numero in grassetto dentro un quadratino chiaro arrotondato; sulla quattordicina scelta i colori si invertono */
.pd__dd i.st span{ width:2.6rem; height:2.4rem; border-radius:.6rem; background:var(--paper); color:#000; font-weight:700; line-height:1; transition:background .25s, color .25s }
.pd__q.on .pd__dd i.st span{ background:#000; color:var(--paper) }
.pd__q:disabled .pd__dd i.st span{ background:rgba(242,240,234,.5) }
.pd__dd i.now{ position:relative; font-weight:700 }
.pd__dd i.now::after{ content:''; position:absolute; left:50%; top:-.1rem; width:.4rem; height:.4rem; margin-left:-.2rem; border-radius:50%; background:var(--magenta, #ec4f6a) }
/* le quattordicine scelte, staccate dal calendario */
.pd__chips{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; padding-top:1.6rem; border-top:1px solid rgba(242,240,234,.14) }
.pd__chips::before{ content:'Le tue quattordicine'; flex-basis:100%; font-size:1.15rem; letter-spacing:.1em; text-transform:uppercase; color:#a8a39c; margin-bottom:.2rem }
html[lang="en"] .pd__chips::before{ content:'Your fortnights' }
.pd__chips:empty{ display:none }

/* date libere: calendario disegnato (niente calendario del browser) */
.pd__rsum{ display:flex; align-items:stretch; gap:1rem; margin-bottom:1.6rem }
.pd__rsum span{ flex:1; display:flex; flex-direction:column; gap:.2rem; padding:1rem 1.4rem; border-radius:1rem; font:600 1.6rem var(--body); color:#7d7872;
  border:1px solid rgba(242,240,234,.12); background:rgba(242,240,234,.03); transition:border-color .3s, color .3s }
.pd__rsum span.on{ color:var(--paper); border-color:rgba(242,240,234,.4) }
.pd__rsum em{ font-style:normal; font-weight:500; font-size:1.1rem; letter-spacing:.1em; text-transform:uppercase; color:#a8a39c }
.pd__rsum i{ align-self:center; font-style:normal; color:#7d7872 }
.pd__rg{ display:grid; grid-template-columns:repeat(7, 1fr); row-gap:.4rem }
.pd__rg b{ font:600 1.1rem var(--body); letter-spacing:.08em; color:#7d7872; text-align:center; padding-bottom:.6rem }
.pd__day{ position:relative; height:3.8rem; padding:0; border:0; background:none; cursor:pointer; color:var(--paper); font:500 1.4rem var(--body); font-variant-numeric:tabular-nums }
.pd__day span{ position:relative; z-index:1; display:inline-grid; place-items:center; width:3.4rem; height:3.4rem; border-radius:50%; transition:background .2s, color .2s }
.pd__day:hover span{ background:rgba(242,240,234,.1) }
.pd__day:disabled{ cursor:default; opacity:.28 }
.pd__day.out span{ color:rgba(242,240,234,.38) }
.pd__day.out.a span, .pd__day.out.z span{ color:#000; opacity:.75 }
.pd__day:disabled:hover span{ background:none }
.pd__day.now span{ box-shadow:inset 0 0 0 1px rgba(242,240,234,.4) }
.pd__day.in::before, .pd__day.rs::before, .pd__day.rz::before{ content:''; position:absolute; top:.2rem; bottom:.2rem; left:0; right:0; background:rgba(242,240,234,.12) }
.pd__day.rs::before{ left:50% } .pd__day.rz::before{ right:50% }
.pd__day.rs.r::before, .pd__day.rz.l::before{ display:none }
.pd__day.in.l::before{ border-radius:1.7rem 0 0 1.7rem } .pd__day.in.r::before{ border-radius:0 1.7rem 1.7rem 0 }
.pd__day.a span, .pd__day.z span{ background:var(--salvia); color:#000; font-weight:700 }
.pd__day:focus-visible{ outline:none } .pd__day:focus-visible span{ outline:2px solid var(--salvia); outline-offset:2px }

/* noleggio annuale */
.pd__sub{ display:block; font-size:1.15rem; letter-spacing:.1em; text-transform:uppercase; color:#a8a39c; margin:0 0 .9rem }
.pd__opts.pd__mesi{ display:grid; grid-template-columns:repeat(4, 1fr) }
.pd__mesi .pd__m:first-child{ grid-column:1 / -1 }
.pd__m{ text-align:center; padding:.75rem .4rem }
.pd__m small{ font-size:1.1rem; opacity:.6 }
.pd__opts{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.6rem }
.pd__opt, .bd__opts span{ font:500 1.35rem var(--body); color:var(--paper); background:rgba(242,240,234,.04); cursor:pointer;
  border:1px solid rgba(242,240,234,.18); border-radius:.8rem; padding:.75rem 1.3rem; transition:background .25s, border-color .25s, color .25s }
.pd__opt:hover, .bd__opts label:hover span{ background:rgba(242,240,234,.1) }
.pd__opt.on{ background:var(--salvia); border-color:var(--salvia); color:#000 }
.pd__done{ display:inline-flex; align-items:center; gap:.6rem; margin-top:1.8rem; font:500 1.4rem var(--body); color:#000; background:var(--salvia);
  border:0; border-radius:.8rem; padding:.8rem 1.4rem; cursor:pointer }
.pd__done:hover{ filter:brightness(1.08) }
.pd__done svg{ width:1.5rem; height:1.5rem }

/* budget indicativo: tasto che si apre, dentro "tra [ ] e [ ] €" */
.bdg{ margin:-1.8rem 0 3.4rem }
.bdg, .bd__panel{ --salvia:var(--magenta) }
.bdg.is-open .zm__tg{ border-color:rgba(236,79,106,.6); background:rgba(236,79,106,.08) }
.bdg.is-open .zm__chev{ transform:rotate(180deg) }
.bdg.to-side.is-open .zm__chev{ transform:rotate(90deg) }
.bdg .zm__tl em.is-set{ color:var(--magenta); max-width:30ch }
.pd .zm__tl em.is-set{ color:var(--paper); max-width:30ch }
.bd__panel .zm__close, .bd__panel .pd__done{ color:#fff }
.bd__head{ display:none }
.bd__note{ max-width:44rem }
.bd__done{ margin-top:1.4rem }
.bd__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease) }
.bd__panel.is-open{ grid-template-rows:1fr }
.bd__in{ overflow:hidden; min-height:0 }
.bd__body{ padding:1.2rem .2rem .4rem; opacity:0; transition:opacity .3s }
.bd__panel.is-open .bd__body{ opacity:1; transition-delay:.1s }
.bd__row{ display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap }
.bd__w{ font-size:1.6rem; color:#a8a39c }
.bd__f{ position:relative; display:inline-flex; align-items:baseline; gap:.5rem; flex:1; min-width:11rem; max-width:18rem;
  border-bottom:1px solid var(--u-grey, rgba(242,240,234,.3)); transition:border-color .3s }
.bd__f:focus-within{ border-color:var(--magenta) }
.bd__f input{ width:100%; min-width:0; font:inherit; font-size:1.8rem; font-variant-numeric:tabular-nums; color:var(--paper);
  background:transparent; border:0; outline:0; padding:1rem 0 .8rem; text-align:right }
.bd__f input::placeholder{ color:#5f5a55 }
.bd__f i{ font-style:normal; font-size:1.6rem; color:#a8a39c }

/* ===== DESKTOP: il periodo è un foglio che entra da sinistra, come la mappa dei municipi ===== */
.pd__head{ display:none }
@media (min-width:992px){
  .pd__panel.pd--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 }
  .pd__panel.pd--sheet.is-open{ transform:none; visibility:visible; transition:transform .7s var(--ease), visibility 0s }
  .pd--sheet .pd__in{ height:100%; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin }
  .pd--sheet .pd__body{ min-height:100%; padding:3.2rem 4rem 3.6rem; opacity:1; transform:none }
  .pd--sheet .pd__head{ display:flex; align-items:center; gap:1.2rem; padding-bottom:1.8rem; margin-bottom:2.4rem; border-bottom:1px solid rgba(242,240,234,.1) }
  .pd--sheet .zm__ht{ font-size:2rem }
  .pd--sheet .pd__tabs, .pd--sheet .pd__pane{ max-width:60rem }
  .pd--sheet .pd__pane{ padding-top:2.4rem }
  .pd--sheet .pd__mese{ font-size:1.9rem }
  .pd--sheet .pd__q{ padding:.7rem .8rem; margin-bottom:.7rem }
  .pd--sheet .pd__dd i{ font-size:1.45rem; line-height:2.7rem }
  .pd--sheet .pd__done{ display:none }
  .pd.to-side.is-open .zm__chev{ transform:rotate(90deg) }
  .bd__panel.bd--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 }
  .bd__panel.bd--sheet.is-open{ transform:none; visibility:visible; transition:transform .7s var(--ease), visibility 0s }
  .bd--sheet .bd__in{ height:100%; overflow:auto }
  .bd--sheet .bd__body{ padding:3.2rem 4rem 3.6rem; opacity:1 }
  .bd--sheet .bd__head{ display:flex; align-items:center; gap:1.2rem; padding-bottom:1.8rem; margin-bottom:4rem; border-bottom:1px solid rgba(242,240,234,.1) }
  .bd--sheet .zm__ht{ font-size:2rem }
  .bd--sheet .bd__row{ gap:2rem }
  .bd--sheet .bd__w{ font-size:2.2rem }
  .bd--sheet .bd__f{ max-width:24rem }
  .bd--sheet .bd__f input{ font:600 3.4rem var(--disp); letter-spacing:-.01em }
  .bd--sheet .bd__f i{ font-size:2.2rem }
  .bd--sheet .bd__note{ margin-top:2.4rem; font-size:1.4rem }
  .bd--sheet .bd__done{ display:none }
}

/* ===== sezione Scrivici: municipi verdi, periodo color carta (il bianco del tricolore), invio rosso ===== */
#contatti .js-form .c-bttn{ background:var(--paper); border-color:var(--paper); color:var(--ink) }
#contatti .js-form .c-bttn::before{ background:var(--hov, var(--condo, #B6B5D8)) }
#contatti .js-form .c-bttn:hover{ color:var(--ink); border-color:var(--hov, var(--condo, #B6B5D8)) }
.pd, .pd__panel{ --salvia:#f2f0ea }
.pd .zm__ico, .pd__head .zm__ico{ color:var(--paper) }
.pd.is-open .zm__tg{ border-color:rgba(242,240,234,.4); background:rgba(242,240,234,.06) }
.pd__note--big{ background:rgba(242,240,234,.05); border-color:rgba(242,240,234,.2) }
.pd__q.on .pd__dd i.out{ opacity:.5 }

@media (max-width:767px){
  .pd__tabs{ grid-template-columns:1fr 1fr; gap:.3rem }
  .pd__tabs::before{ display:none }
  .pd__tab{ font-size:1.3rem; padding:.85rem .4rem; transition:background .3s, color .3s }
  .pd__tab.on{ background:var(--salvia) }
  .pd__gg, .pd__q{ grid-template-columns:3.4rem 1fr }
  .pd__gg{ grid-template-columns:3.4rem repeat(7, 1fr) }
  .pd__qn{ margin-right:.3rem }
  .pd__dd i{ font-size:1.25rem; line-height:2.2rem }
  .pd__day{ height:3.4rem } .pd__day span{ width:3rem; height:3rem }
  .pd__opts.pd__mesi{ grid-template-columns:repeat(3, 1fr) }
  .bd__f{ max-width:none; min-width:0 }
  .bd__row{ flex-wrap:nowrap; gap:.9rem }
  .bd__f input{ font-size:1.7rem }
}
@media (prefers-reduced-motion:reduce){
  .pd__panel, .pd__body, .pd__tabs::before, .pd__q{ transition:none !important; animation:none !important }
}
/* quadratino d'inizio anche nei giorni del mese accanto: pieno se la quattordicina e' scelta */
.pd__dd i.out.st{ opacity:1 }
.pd__dd i.out.st span{ opacity:.55 }
.pd__q.on .pd__dd i.out.st span{ opacity:1 }