/* Carpi Suite — modulo disponibilità + banner "Prenota direttamente" (sezione GLOBALE)
   Usato da index.html, scopri-carpi.html e (solo il modulo) dalle pagine appartamento.
   Markup del banner: _strumenti/globali/banner-disponibilita.html
   Il comportamento (apertura del motore di prenotazione) sta in js/global.js. */

/* ═════════ BANNER ═════════ */
.cta-final{
  position:relative;min-height:820px;
  display:flex;align-items:center;justify-content:center;
  padding:110px 32px;overflow:hidden;
}
.cta-bg{
  position:absolute;inset:-20% 0;z-index:0;
  background:url('../img/carpi-hero.webp') center 30%/cover no-repeat;
  will-change:transform;
}
@media(max-width:700px){.cta-bg{background-image:url('../img/carpi-hero-m.webp')}}   /* telefono: stessa foto leggera dell'hero (già in cache) */
.cta-final::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(10,5,5,.35)}
.cta-box{
  position:relative;z-index:2;
  background:#fff;color:var(--ink);
  border-radius:var(--radius);
  max-width:860px;width:100%;
  padding:72px 72px 0;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.cta-box h2 em{color:var(--brand-light)}
/* sezione disponibilita: stessa CTA, titolo e punti a sinistra, widget verticale a destra */
.cta-avail{min-height:0;padding:100px 32px}
.cta-box.cta-split{
  max-width:1160px;padding:64px 64px 49px;text-align:left;
  display:grid;grid-template-columns:minmax(0,1fr) 450px;gap:56px 64px;align-items:start;
}
.cs-wide{grid-column:1 / -1}
.cta-split .cs-left h2{margin-top:-6px}
.cta-split .cta-divider{margin:0}
.cta-split .cta-ticker{padding:0}
/* punti di forza: cerchio con check (Phosphor) + titolo + riga di dettaglio */
.benefits{list-style:none;display:grid;gap:20px;padding-top:100px}
.benefits li{display:flex;gap:14px;align-items:flex-start}
.benefits .b-ic{
  flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--brand-light);color:#fff;display:grid;place-items:center;
}
.benefits .b-ic svg{width:17px;height:17px;fill:currentColor}
.benefits strong{display:block;font-weight:700;font-size:.98rem;line-height:1.3;color:var(--ink)}
.benefits li div span{display:block;font-size:.88rem;line-height:1.45;color:var(--muted);margin-top:2px}
.avail-form{display:grid;gap:16px}
.cta-avail .avail-form{
  background:#F8F4F4;border-radius:var(--radius);padding:28px 30px;
  align-self:stretch;align-content:space-between;   /* arriva in basso come l'ultimo punto a sinistra */
}
.af-title{font-family:'Clash Display','Manrope',sans-serif;font-weight:500;font-size:1.5rem;line-height:1.2;color:var(--ink);margin-bottom:4px}
.af-field{display:block;min-width:0}
.af-field span{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.af-field input,.af-field select{
  width:100%;min-width:0;height:56px;padding:0 14px;font-size:.95rem;
  border:1px solid rgba(17,17,17,.2);border-radius:var(--radius-btn);
  font-family:inherit;font-weight:500;color:var(--ink);background-color:#fff;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s,box-shadow .2s;
}
.af-field input:focus,.af-field select:focus{outline:none;border-color:var(--brand-light);box-shadow:0 0 0 3px rgba(155,23,63,.15)}
/* icone Phosphor (peso bold a 21px = tratto da 2px); posizione 22px dal bordo destro */
.af-field select{
  padding-right:56px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23111'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 22px center;background-size:21px 21px;
}
.af-field input[type=date]{
  position:relative;cursor:pointer;padding-right:56px;text-align:left;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23111'%3E%3Cpath d='M208,28H188V24a12,12,0,0,0-24,0v4H92V24a12,12,0,0,0-24,0v4H48A20,20,0,0,0,28,48V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V48A20,20,0,0,0,208,28ZM68,52a12,12,0,0,0,24,0h72a12,12,0,0,0,24,0h16V76H52V52ZM52,204V100H204V204Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 22px center;background-size:21px 21px;
}
/* placeholder (gg/mm/aaaa) grigio chiaro finche la data non e scelta */
/* Firefox disegna già da solo l'icona del calendario (non nascondibile): lì togliamo la nostra, per non averne due; lo spazio a destra torna uguale a sinistra così l'icona di Firefox sta al bordo */
@supports (-moz-appearance:none){.af-field input[type=date]{background-image:none;padding-right:14px}}
.af-field input[type=date]:invalid{color:#b3b3b3}
.af-field input[type=date]::-webkit-date-and-time-value{text-align:left}
/* l'indicatore nativo copre tutto il campo: un click ovunque apre il calendario */
.af-field input[type=date]::-webkit-calendar-picker-indicator{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;
}
.avail-form .btn{height:56px;padding:0 30px;width:100%;justify-content:center;border:0;cursor:pointer;font-family:inherit}
.avail-form .btn .arr{width:18px;height:18px;flex-shrink:0}
.cta-divider{height:1px;background:var(--line);margin:68px 0 0}
.cta-ticker{
  overflow:hidden;padding:37px 0 30px;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.ct-track{display:flex;gap:0;width:max-content;align-items:center;animation:marquee 34s linear infinite}
.ct-track span{display:flex;gap:90px;align-items:center;padding-right:90px}
.ct-track img{height:var(--logo-h);width:auto;opacity:1;display:block}
.ct-track .ticker-airbnb,.ct-track .ticker-tripadvisor{height:var(--logo-h-lg);width:auto}
.ct-track .ticker-google{height:var(--logo-h-google);width:auto}

/* titolo del banner identico ovunque (indipendente dagli h2 della pagina) */
.cta-avail h2{
  font-family:'Clash Display','Manrope',sans-serif;font-weight:500;letter-spacing:-.01em;
  font-size:55px;line-height:50px;color:var(--ink);
}
@media(prefers-reduced-motion:reduce){.ct-track{animation:none}}
@media(max-width:900px){
  .benefits{padding-top:34px}
  .cta-box.cta-split{grid-template-columns:1fr;gap:36px;padding:44px 28px}
  .cta-split .cs-left h2{margin-top:0}
  .cta-avail{padding:80px 20px}
}
@media(max-width:640px){
  .cta-box{padding:44px 28px}
  .cta-avail h2{font-size:34px;line-height:38px}
}

/* campo unico "Ospiti": pannello con adulti e bambini (+/−) e l'età di ogni bambino */
.af-guests-pick{position:relative}
.gp-btn{
  width:100%;height:56px;padding:0 56px 0 14px;text-align:left;cursor:pointer;
  border:1px solid rgba(17,17,17,.2);border-radius:var(--radius-btn);background-color:#fff;
  font-family:inherit;font-size:.95rem;font-weight:500;color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23111'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 22px center;background-size:21px 21px;
  transition:border-color .2s,box-shadow .2s;
}
.gp-btn:focus-visible,.gp-btn[aria-expanded=true]{outline:none;border-color:var(--brand-light);box-shadow:0 0 0 3px rgba(155,23,63,.15)}
.gp-val{font-weight:500;white-space:nowrap}
.gp-panel{
  position:absolute;z-index:40;left:0;top:calc(100% + 8px);
  width:max-content;min-width:min(310px,calc(100vw - 40px));max-width:min(360px,calc(100vw - 40px));
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 18px 18px;
  box-shadow:0 20px 56px rgba(17,17,17,.22);
}
.gp-panel[hidden]{display:none}
.gp-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.gp-lab strong{display:block;font-size:1rem;font-weight:600;color:var(--ink)}
.gp-lab small{display:block;font-size:.8rem;color:var(--muted);line-height:1.3}
.gp-step{display:flex;align-items:center;gap:14px}
.gp-step button{
  width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(17,17,17,.35);background:#fff;
  font:600 1.15rem/1 'Manrope',sans-serif;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:border-color .2s,background .2s,color .2s;
}
.gp-step button:hover:not(:disabled){border-color:var(--brand-light);color:var(--brand-light)}
.gp-step button:disabled{opacity:.3;cursor:not-allowed}
.gp-n{min-width:22px;text-align:center;font-weight:700;font-size:1.05rem;color:var(--ink)}
.gp-ages{display:grid;gap:10px;margin-top:6px}
.gp-ages:empty{display:none}
.gp-age{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px}
.gp-age span{font-size:.9rem;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;margin:0;white-space:nowrap}
.gp-age select{
  height:42px;min-width:140px;padding:0 12px;border:1px solid rgba(17,17,17,.2);border-radius:var(--radius-btn);
  font-family:inherit;font-size:.92rem;font-weight:500;background:#fff;color:var(--ink);
}
.gp-done{width:100%;height:48px;padding:0;margin-top:16px;justify-content:center;border:0;cursor:pointer;font-family:inherit}

/* ═════════ WIDGET ORIZZONTALE ═════════
   Card bianca a cavallo tra hero e sezione successiva (metà sopra, metà sotto, senza fasce bianche),
   poi fissa in alto allo scroll. Markup: <div class="bar-w" id="prenota"> … <form class="avail-form bar-card"> */
.bar-w{
  --bar-h:117px;
  position:sticky;top:14px;z-index:90;
  margin:calc(var(--bar-h) / -2) 0;     /* il contenuto seguente risale: nessuno spazio bianco sotto l'hero */
}
.bar-card{
  grid-template-columns:repeat(3,minmax(0,1fr)) max-content;gap:16px;align-items:end;
  min-height:var(--bar-h);padding:20px 26px;border-radius:var(--radius);
  background:#fff;
  box-shadow:0 18px 50px rgba(17,17,17,.16);
  transition:box-shadow .3s;
}
@keyframes barPulse{0%{box-shadow:0 0 0 0 rgba(155,23,63,.55)}70%{box-shadow:0 0 0 14px rgba(155,23,63,0)}100%{box-shadow:0 0 0 0 rgba(155,23,63,0)}}
.bar-card.is-pulse{animation:barPulse 1.1s ease-out}
.bar-w.is-stuck .bar-card{box-shadow:0 14px 40px rgba(17,17,17,.26)}
.bar-card .af-field input,.bar-card .af-field select,.bar-card .gp-btn{height:52px}
.bar-card .btn{width:auto;height:52px;margin:0;padding:0 30px;white-space:nowrap}

@media(max-width:899px){
  .bar-card > .af-guests-pick{grid-column:1 / -1}
  .bar-w{position:relative;z-index:5;margin:-30px 0 24px}   /* sopra l'hero, non nascosto sotto */
  .bar-card{grid-template-columns:1fr 1fr;gap:12px;padding:18px;min-height:0}
  .bar-card .btn{grid-column:1 / -1;width:100%}
}
@media(max-width:420px){.bar-card{grid-template-columns:1fr}}

/* banner "perché prenotare diretto": senza form, i tre punti stanno a destra */
.cta-direct .benefits{padding-top:0;align-self:center;margin:0}
.cta-direct .cs-left h2{margin-bottom:18px}
.cd-sub{font-size:1.08rem;line-height:1.6;color:var(--muted);max-width:42ch}
@media(max-width:900px){.cta-direct .benefits{padding-top:8px}}

/* ═════════ Pannello a comparsa "Quando vuoi soggiornare?" ═════════ */
.book-modal{
  border:0;padding:0;margin:auto;background:transparent;max-width:none;max-height:none;
  width:min(520px,calc(100vw - 32px));overflow:visible;color:var(--ink);
}
.book-modal:focus,.book-modal:focus-visible{outline:none}
.book-modal::backdrop{background:rgba(10,5,5,.58);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bm-card{position:relative;background:#fff;border-radius:var(--radius);padding:38px 34px 34px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.bm-card h2{font-family:'Clash Display','Manrope',sans-serif;font-weight:500;font-size:1.9rem;line-height:1.1;letter-spacing:-.01em;margin:0 0 8px;padding-right:40px}
.bm-card h2 em{font-style:normal;color:var(--brand-light)}
.bm-sub{color:var(--muted);font-size:.98rem;line-height:1.5;margin:0 0 22px}
.bm-close{
  position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--blush,#F8F4F4);border:0;cursor:pointer;color:var(--ink);
  transition:background .2s;
}
.bm-close:hover{background:#EBDADA}
.bm-close svg{width:18px;height:18px}
html.modal-open{overflow:hidden}
.book-modal[open]{animation:bmIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes bmIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.book-modal[open]{animation:none}}
@media(max-width:520px){.bm-card{padding:30px 22px 26px}.bm-card h2{font-size:1.6rem}}