/* ============================================================
   Colosseum Holidays — Motore transfer, stile.
   Prefisso .cht- su tutto: il widget vive dentro una pagina che
   ha gia' il suo CSS, e nessuna di queste regole deve uscire.
   Portato dal widget di Rome Bag Storage il 23/09/2026: stessa
   struttura, colori e caratteri del design system di Colosseum
   Holidays (colors_and_type.css). I nomi delle variabili restano
   quelli del widget di origine — «blu» e' il colore primario,
   «giallo» il fondo del pulsante — perche' rinominare cinquanta
   usi non li renderebbe piu' chiari.
   ============================================================ */

#cht {
  --cht-blu: var(--ch-green-700, #556B58);
  --cht-royal: var(--ch-green-800, #4A5C4C);
  --cht-giallo: var(--ch-green-700, #556B58);
  --cht-giallo-cupo: var(--ch-green-800, #4A5C4C);
  --cht-ink: var(--ch-ink-800, #2C332D);
  --cht-muto: var(--ch-ink-500, #6B716C);
  --cht-linea: var(--ch-cream-300, #E4DBC4);
  --cht-grigio: var(--ch-cream-100, #F4EFE3);
  --cht-rosso: #B42318;
  --cht-etichetta: var(--ch-brass-800, #7E6B3E);
  --cht-testo-bottone: var(--ch-cream-50, #FAF6EE);

  color: var(--cht-ink);
  text-align: left;
}

#cht *, #cht *::before, #cht *::after { box-sizing: border-box; }

/* Quello che il comportamento nasconde con `hidden` deve sparire davvero.
   Il sito di origine aveva una regola globale su [hidden] che vinceva sui
   `display: flex` dei campi; questo sito no, e in modalita' arrivo si
   vedevano il contatore delle ore e la nota del tour. Non si dipende dal
   CSS di chi ci incorpora. */
#cht [hidden] { display: none !important; }

.cht-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--cht-linea);
  border-radius: 4px;
  /* NIENTE overflow: hidden qui.
     C'era, per tenere lo sfondo grigio del riepilogo dentro gli angoli
     arrotondati, e tagliava l'elenco dei prefissi telefonici: il campo
     telefono e' l'ultima riga del modulo, quindi il menu si apre oltre il
     bordo inferiore della scheda e veniva rasato via. Restava visibile solo
     la casella di ricerca, e sotto il nulla — un menu che si apre vuoto.
     Il raccordo agli angoli lo portano ora i due figli, qui sotto. */
}

/* Il raccordo che prima faceva il ritaglio. Impilati: il modulo arrotonda
   sopra, il riepilogo sotto. Affiancati (da 900px): a sinistra e a destra. */
.cht-form { border-radius: 4px 4px 0 0; }
.cht-side { border-radius: 0 0 4px 4px; }
@media (min-width: 900px) {
  .cht-form { border-radius: 4px 0 0 4px; }
  .cht-side { border-radius: 0 4px 4px 0; }
}

@media (min-width: 900px) {
  .cht-shell { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
/* Su schermi larghi il riepilogo non deve dilatarsi con la pagina: resta una
   colonna leggibile e lo spazio in piu' va al modulo, dove si lavora. */
@media (min-width: 1180px) {
  .cht-shell { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* ── colonna form ─────────────────────────────────────────── */
.cht-form {
  padding: 20px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;              /* su telefono il modulo e' lungo: serve respiro */
}
@media (min-width: 620px) { .cht-form { padding: 24px; gap: 18px; } }
@media (min-width: 900px) { .cht-form { padding: 28px; } }

.cht-row { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) {
  .cht-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cht-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cht-input  { font-size: 15px; height: 52px; }
}

.cht-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

/* Etichette in un tono piu' scuro del grigio di servizio: maiuscoletto
   spaziato a 12px su var(--cht-muto) sta esattamente sul minimo di contrasto, e su un
   telefono al sole "minimo" vuol dire illeggibile. */
.cht-lbl {
  font-family: var(--font-sans, 'Roboto', sans-serif);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label, .16em);
  color: var(--cht-etichetta);
}
.cht-opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; }

.cht-input {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0 13px;
  font: inherit;
  /* 16px non e' un capriccio: sotto questa soglia Safari su iPhone ingrandisce
     la pagina appena tocchi il campo, e chi prenota si ritrova il modulo
     spostato. Da tablet in su si torna a 15px, che sta meglio nella griglia. */
  font-size: 16px;
  color: var(--cht-ink);
  background: #fff;
  border: 1px solid var(--cht-linea);
  border-radius: 2px;
  transition: border-color .15s, box-shadow .15s;
}
.cht-input:focus {
  outline: none;
  border-color: var(--cht-blu);
  box-shadow: 0 0 0 3px rgba(85, 107, 88, .18);
}
select.cht-input { appearance: none; background-image: none; cursor: pointer; }

/* ── segmento direzione ───────────────────────────────────── */
.cht-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--cht-grigio);
  border-radius: 6px;
}
.cht-seg-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 6px;   /* porta il bersaglio sopra i 44px pieni */
  font-family: var(--font-sans, 'Roboto', sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--cht-muto);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cht-seg-btn.is-on { background: var(--cht-blu); color: var(--cht-testo-bottone); }

/* ── contatori ────────────────────────────────────────────── */
.cht-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 6px;
  border: 1px solid var(--cht-linea);
  border-radius: 2px;
}
.cht-cbtn {
  /* 44x44 pieni: e' un bersaglio da pollice, e la meta' delle
     prenotazioni arriva da telefono. */
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 1;
  color: var(--cht-blu);
  background: var(--cht-grigio);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.cht-cbtn:hover { background: var(--ch-cream-200, #EDE6D4); }
.cht-cval {
  font-family: var(--font-sans, 'Roboto', sans-serif);
  font-size: 17px;
  font-weight: 500;
}

/* ── suggerimenti indirizzo (Google Places) ───────────────── */
.cht-field--ac { position: relative; }

.cht-ac {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 30;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--cht-linea);
  border-radius: 2px;
  box-shadow: 0 12px 28px rgba(31, 38, 32, .16);
  overflow: hidden;
}
.cht-ac.is-open { display: block; }

.cht-acItem {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
}
.cht-acItem:hover, .cht-acItem.is-active { background: var(--cht-grigio); }
.cht-acItem svg {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
  fill: none; stroke: var(--cht-muto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.cht-acMain { display: block; font-weight: 600; }
.cht-acSec { display: block; font-size: 12.5px; color: var(--cht-muto); }
.cht-acFoot {
  padding: 7px 13px;
  font-size: 11px;
  color: var(--cht-muto);
  border-top: 1px solid var(--cht-linea);
  background: var(--ch-cream-50, #FAF6EE);
}

/* esito della verifica di copertura */
.cht-zona {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
}
.cht-zona[data-esito="ok"]    { color: #3E6B47; }
.cht-zona[data-esito="fuori"] { color: var(--cht-rosso); font-weight: 600; }

/* ── note ─────────────────────────────────────────────────── */
.cht-hint {
  margin: -6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cht-muto);
}
.cht-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--cht-grigio);
  border-left: 3px solid var(--cht-blu);
  border-radius: 0 5px 5px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ch-ink-600, #4F5651);
}
.cht-note svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  fill: none;
  stroke: var(--cht-blu);
  stroke-width: 2;
  stroke-linecap: round;
}

/* ── colonna riepilogo ────────────────────────────────────── */
.cht-side { background: var(--cht-grigio); border-top: 1px solid var(--cht-linea); }
@media (min-width: 900px) {
  .cht-side { border-top: 0; border-left: 1px solid var(--cht-linea); }
  .cht-side-in { position: sticky; top: 20px; }
}
.cht-side-in { padding: 22px; }
@media (min-width: 900px) { .cht-side-in { padding: 28px; } }

/* ── la corsa, disegnata ──────────────────────────────────────
   Una scena come quella del Luggage Valet (22/09/2026): lo scalo
   da una parte, il Colosseo dall'altra, l'auto che percorre la
   strada. Fino a oggi erano due icone e una linea. Sta a filo
   del riquadro: i margini negativi mangiano il padding del
   riepilogo, e sotto resta una riga di separazione. Le nuvole
   vanno alla deriva da sole (CSS); l'auto e la strada si muovono
   in SMIL, che il CSS di "riduci movimento" non ferma: ci pensa
   transfer.js. */
.cht-scena {
  margin: -22px -22px 16px;
  border-bottom: 1px solid var(--cht-linea);
  overflow: hidden;
}
@media (min-width: 900px) {
  .cht-scena { margin: -28px -28px 18px; border-top-right-radius: 4px; }
}
.cht-scena svg { display: block; width: 100%; height: auto; }
.cht-nuvola-a { animation: chtNuvolaA 9s ease-in-out infinite; }
.cht-nuvola-b { animation: chtNuvolaB 12s ease-in-out infinite; }
@keyframes chtNuvolaA { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@keyframes chtNuvolaB { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-18px); } }

.cht-journey {
  margin: 0;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ch-green-700, #556B58);
}
.cht-vehicle { margin: 5px 0 0; font-size: 13.5px; color: var(--cht-muto); }

.cht-lines { margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cht-line { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.cht-line dt { margin: 0; font-size: 13.5px; color: var(--ch-ink-600, #4F5651); }
.cht-line dd { margin: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; }

.cht-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cht-linea);
  font-family: var(--font-sans, 'Roboto', sans-serif);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label, .16em);
  color: var(--cht-etichetta);
}
.cht-total strong { font-family: var(--font-display, 'Playfair Display', serif); font-weight: 500; font-size: 28px; letter-spacing: 0; text-transform: none; color: var(--cht-ink); }

/* Il totale pulsa quando cambia: aggiungere un passeggero sposta una
   cifra in un angolo dello schermo, e senza un segnale passa inosservato. */
.cht-pulsa { animation: chtPulsa .42s ease-out; }
@keyframes chtPulsa {
  0%   { transform: scale(1);    color: var(--cht-ink); }
  35%  { transform: scale(1.09); color: var(--cht-blu); }
  100% { transform: scale(1);    color: var(--cht-ink); }
}
.cht-total strong, .cht-bar-txt strong { display: inline-block; transform-origin: left center; }

/* ── pulsante ─────────────────────────────────────────────── */
.cht-pay {
  width: 100%;
  margin-top: 18px;
  padding: 16px 20px;
  font-family: var(--font-sans, 'Roboto', sans-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--cht-testo-bottone);
  background: var(--cht-giallo);
  border: 0;
  border-radius: var(--radius-sm, 2px);   /* spigolo del sistema, non pillola */
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.cht-pay:hover { background: var(--cht-giallo-cupo); }
.cht-pay:disabled { cursor: progress; opacity: .6; }
.cht-pay--bar { width: auto; margin: 0; padding: 15px 22px; white-space: nowrap; }

.cht-err {
  margin: 12px 0 0;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--cht-rosso);
  background: #FEF3F2;
  border-left: 3px solid var(--cht-rosso);
  border-radius: 0 4px 4px 0;
}

.cht-trust { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cht-trust li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ch-ink-600, #4F5651);
}
.cht-trust li::before {
  content: '';
  position: absolute;
  left: 2px; top: 6px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--cht-blu);
  border-bottom: 2px solid var(--cht-blu);
  transform: rotate(-45deg);
}

/* ── barra fissa su telefono ──────────────────────────────── */
.cht-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--cht-linea);
  box-shadow: 0 -8px 24px rgba(31, 38, 32, .12);
}
@media (min-width: 900px) { .cht-bar { display: none; } }

.cht-bar-txt { flex: 1 1 auto; min-width: 0; }
.cht-bar-txt strong {
  display: block;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
}
.cht-bar-txt span {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--cht-muto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chi ha chiesto meno movimento non deve subire ne' la deriva ne' il
   pulsare: restano il colore e il numero, che sono l'informazione. */
@media (prefers-reduced-motion: reduce) {
  #cht *, #cht *::before, #cht *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* La casella del seggiolino. Sta sotto ai contatori dei bagagli, e deve
   avere la stessa area cliccabile comoda dei pulsanti +/−: su un telefono
   una spunta di 13 px non la prende nessuno. */
.cht-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--cht-hairline, #E4DBC4);
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  user-select: none;
}
.cht-check:hover { background: var(--cht-bg-soft, #FAF6EE); }
.cht-check input { width: 20px; height: 20px; accent-color: var(--cht-blue, #556B58); cursor: pointer; flex: 0 0 auto; }

/* ── Il prefisso telefonico ──────────────────────────────────────
   Stesso comportamento del widget degli armadietti: non un menu di
   sistema con centocinquanta voci, ma un elenco che si cerca
   scrivendo. I colori sono quelli di questo widget, non copiati. */
.cht-phonewrap { display: flex; gap: 8px; }
.cht-phonewrap .cht-input { flex: 1; min-width: 0; }
.cht-ccpick { position: relative; flex: none; }
.cht-ccbtn {
  display: flex; align-items: center; gap: 7px;
  height: 48px; min-height: 48px; padding: 0 10px 0 12px;
  background: #fff; border: 1px solid var(--cht-linea); border-radius: 2px;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--cht-ink);
  cursor: pointer; transition: border-color .2s ease;
}
.cht-ccbtn:hover, .cht-ccbtn[aria-expanded="true"] { border-color: var(--cht-royal); }
.cht-ccflag { font-size: 19px; line-height: 1; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", inherit; }
.cht-ccdial { font-variant-numeric: tabular-nums; }
.cht-ccchev { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--cht-muto); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.cht-ccbtn[aria-expanded="true"] .cht-ccchev { transform: rotate(180deg); }
.cht-ccpanel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: 320px; max-width: calc(100vw - 40px);
  background: #fff; border: 1px solid var(--cht-linea); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(31,38,32,.16); overflow: hidden;
}
/* Quando sotto non c'e' spazio si apre verso l'alto: su telefono il campo
   telefono sta in fondo, e un elenco che esce dallo schermo non si usa. */
.cht-ccpanel.cht-su { top: auto; bottom: calc(100% + 6px); }
.cht-ccsearch { position: relative; border-bottom: 1px solid var(--cht-linea); }
.cht-ccsearch svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: none; stroke: var(--cht-muto); stroke-width: 2; stroke-linecap: round; }
.cht-ccsearch input { width: 100%; border: 0; border-radius: 0; padding: 13px 14px 13px 36px; font: inherit; font-size: 16px; color: var(--cht-ink); background: #fff; }
.cht-ccsearch input:focus { outline: 0; box-shadow: inset 0 -2px 0 var(--cht-giallo); }
.cht-cclist { list-style: none; margin: 0; padding: 4px; max-height: 266px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cht-ccitem {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: 6px; cursor: pointer;
  font-size: 15px; color: var(--cht-ink);
}
.cht-ccitem:hover, .cht-ccitem.cht-ccon { background: var(--cht-grigio); }
.cht-ccitem[aria-selected="true"] { font-weight: 700; }
.cht-ccitem .cht-ccnome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-ccitem .cht-ccdialx { flex: none; color: var(--cht-muto); font-variant-numeric: tabular-nums; }
.cht-ccitem[aria-selected="true"] .cht-ccdialx { color: var(--cht-royal); }
.cht-ccempty { margin: 0; padding: 16px 14px 20px; font-size: 14px; color: var(--cht-muto); text-align: center; }
/* Il pannello e il messaggio si nascondono anche se la pagina ospite non ha
   una regola per [hidden]: qui non si dipende dal CSS di chi ci incorpora. */
.cht-ccpanel[hidden], .cht-ccempty[hidden] { display: none; }