/* JumpClub Booking — widget di prenotazione, tema Jump Club City
   Colori e font presi dal sito: verde #0BE43E, arancio #FF9501,
   navy #090E1B, titoli "Changa One", testo "Inter". */

@import url('https://fonts.googleapis.com/css2?family=Changa+One&family=Inter:wght@400;600;700;800&display=swap');

.jcb-widget {
  /* Il pannello admin può cambiare i colori: --jcb-primario/--jcb-scuro arrivano dallo shortcode */
  --jcb-verde: var(--jcb-primario, #0BE43E);
  --jcb-verde-glow: rgba(11, 228, 62, 0.28);
  --jcb-arancio: #FF9501;
  --jcb-navy: var(--jcb-scuro, #090E1B);
  --jcb-navy-2: #0e1526;
  --jcb-navy-3: #131c33;
  --jcb-testo: #F0F0F0;
  --jcb-testo-2: #CFCFCF;
  --jcb-muto: #8b93a7;
  --jcb-bordo: rgba(255, 255, 255, 0.10);
  --jcb-bordo-2: rgba(255, 255, 255, 0.18);
  --jcb-font-titoli: 'Changa One', 'Arial Black', sans-serif;
  --jcb-font-testo: 'Inter', -apple-system, sans-serif;
  max-width: 780px;
  margin: 0 auto 28px;
  font-family: var(--jcb-font-testo);
  color: var(--jcb-testo);
  background: linear-gradient(180deg, var(--jcb-navy-2) 0%, var(--jcb-navy) 100%);
  border: 1px solid var(--jcb-bordo);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(11, 228, 62, 0.05);
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.jcb-widget *, .jcb-widget *::before, .jcb-widget *::after { box-sizing: border-box; }
/* Reset duro: azzera gli stili che il tema (elementor-kit) impone a bottoni e link.
   Stessa specificità del tema ma caricato DOPO → vince; i nostri componenti (.jcb-widget .jcb-*) vincono su tutto. */
.jcb-widget button {
  font-family: var(--jcb-font-testo); touch-action: manipulation;
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; box-shadow: none; margin: 0; padding: 0;
  text-transform: none; letter-spacing: normal; text-shadow: none;
  color: inherit; font-size: inherit; line-height: 1.2; border-radius: 0;
}
.jcb-widget a { text-decoration: none; box-shadow: none; }
.jcb-widget .jcb-ic { vertical-align: -3px; flex: none; }

.jcb-widget .jcb-caricamento { text-align: center; padding: 44px 12px; color: var(--jcb-muto); }

/* ---- Testata ---- */
.jcb-widget .jcb-testata {
  background:
    radial-gradient(ellipse 70% 120% at 50% -30%, rgba(11, 228, 62, 0.13), transparent 60%),
    linear-gradient(160deg, #0c1222 0%, #090E1B 100%);
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--jcb-bordo);
}
.jcb-widget .jcb-brand {
  font-family: var(--jcb-font-titoli);
  color: #fff; font-size: 30px; font-weight: 400; letter-spacing: 0.6px;
  margin-bottom: 18px; text-align: center; text-transform: capitalize;
}
.jcb-widget .jcb-brand span { color: var(--jcb-verde); }
.jcb-widget .jcb-passi { display: flex; align-items: flex-start; }
.jcb-widget .jcb-passo { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 60px; }
.jcb-widget .jcb-passo.fatto { cursor: pointer; }
.jcb-widget .jcb-passo-num {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1.5px solid var(--jcb-bordo-2);
  color: var(--jcb-testo-2); transition: all 0.15s ease;
}
.jcb-widget .jcb-passo-num .jcb-ic { vertical-align: 0; }
.jcb-widget .jcb-passo.attivo .jcb-passo-num {
  background: var(--jcb-verde); border-color: var(--jcb-verde); color: var(--jcb-navy);
  box-shadow: 0 0 0 5px var(--jcb-verde-glow), 0 0 22px var(--jcb-verde-glow);
}
.jcb-widget .jcb-passo.fatto .jcb-passo-num { background: var(--jcb-verde); border-color: var(--jcb-verde); color: var(--jcb-navy); }
.jcb-widget .jcb-passo-nome { font-size: 10.5px; font-weight: 600; color: var(--jcb-muto); letter-spacing: 0.3px; }
.jcb-widget .jcb-passo.attivo .jcb-passo-nome { color: #fff; }
.jcb-widget .jcb-passo.fatto .jcb-passo-nome { color: var(--jcb-verde); }
.jcb-widget .jcb-passo-linea { flex: 1; height: 2px; background: var(--jcb-bordo); margin-top: 20px; border-radius: 2px; }
.jcb-widget .jcb-passo-linea.fatta { background: var(--jcb-verde); box-shadow: 0 0 8px var(--jcb-verde-glow); }

/* ---- Corpo ---- */
.jcb-widget .jcb-corpo { min-height: 280px; padding: 24px; }
.jcb-widget .jcb-intro {
  font-family: var(--jcb-font-titoli); font-weight: 400;
  font-size: 1.55em; color: #fff; margin: 0 0 16px; letter-spacing: 0.4px;
}
.jcb-widget .jcb-intro-2 { margin-top: 26px; }
.jcb-widget .jcb-intro-sub {
  display: block; font-family: var(--jcb-font-testo); font-weight: 500;
  font-size: 0.55em; color: var(--jcb-muto); margin-top: 4px; letter-spacing: 0;
}
.jcb-widget .jcb-nota {
  background: rgba(255,255,255,0.05); border: 1px solid var(--jcb-bordo);
  border-radius: 12px; padding: 13px 15px; color: var(--jcb-testo-2); font-size: 0.93em; margin: 10px 0;
}
.jcb-widget .jcb-errore {
  background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.4); color: #fca5a5;
  border-radius: 12px; padding: 12px 15px; margin-bottom: 14px; font-size: 0.94em; font-weight: 600;
}
.jcb-widget .jcb-avviso {
  background: rgba(255, 149, 1, 0.10); border: 1px solid rgba(255, 149, 1, 0.35); color: #ffc061;
  border-radius: 12px; padding: 11px 14px; margin-top: 10px; font-size: 0.92em;
  display: flex; align-items: flex-start; gap: 8px;
}
.jcb-widget .jcb-avviso .jcb-ic { margin-top: 2px; }
.jcb-widget .jcb-scelta-attuale {
  margin-top: 16px; padding: 12px 16px; border-radius: 12px;
  background: rgba(11, 228, 62, 0.08); border: 1px solid rgba(11, 228, 62, 0.25);
  color: var(--jcb-verde); font-weight: 700; font-size: 0.96em;
  display: flex; align-items: center; gap: 9px;
}

/* ---- Calendario ---- */
.jcb-widget .jcb-cal-testa {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; color: #fff;
}
.jcb-widget .jcb-cal-testa strong { font-family: var(--jcb-font-titoli); font-weight: 400; font-size: 1.25em; letter-spacing: 0.5px; }
.jcb-widget .jcb-cal-freccia {
  width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--jcb-bordo-2);
  background: rgba(255,255,255,0.04); font-size: 20px; cursor: pointer; color: var(--jcb-testo);
  transition: all 0.12s ease;
}
.jcb-widget .jcb-cal-freccia:hover:not(:disabled) { border-color: var(--jcb-verde); color: var(--jcb-verde); }
.jcb-widget .jcb-cal-freccia:disabled { opacity: 0.25; cursor: default; }
.jcb-widget .jcb-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.jcb-widget .jcb-cal-gg { text-align: center; font-size: 11px; color: var(--jcb-muto); font-weight: 700; padding: 5px 0; text-transform: uppercase; letter-spacing: 0.5px; }
.jcb-widget .jcb-cal-giorno {
  aspect-ratio: 1; border-radius: 12px; border: 1.5px solid var(--jcb-bordo);
  background: rgba(255,255,255,0.04); font-size: 15px; font-weight: 700; color: var(--jcb-testo);
  cursor: pointer; transition: all 0.1s ease; position: relative;
}
.jcb-widget .jcb-cal-giorno:hover:not(:disabled) { transform: scale(1.08); border-color: var(--jcb-verde); box-shadow: 0 0 14px var(--jcb-verde-glow); }
.jcb-widget .jcb-cal-giorno.weekend { background: rgba(255, 149, 1, 0.09); border-color: rgba(255, 149, 1, 0.30); }
.jcb-widget .jcb-cal-giorno.weekend::after {
  content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--jcb-arancio);
}
.jcb-widget .jcb-cal-giorno.spento { opacity: 0.18; cursor: default; }
.jcb-widget .jcb-cal-giorno.scelto {
  background: var(--jcb-verde); border-color: var(--jcb-verde); color: var(--jcb-navy);
  box-shadow: 0 0 0 4px var(--jcb-verde-glow), 0 0 20px var(--jcb-verde-glow);
}
.jcb-widget .jcb-cal-giorno.scelto::after { background: var(--jcb-navy); }
.jcb-widget .jcb-legenda { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--jcb-muto); font-weight: 600; }
.jcb-widget .jcb-pallino { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 5px; border: 1px solid var(--jcb-bordo-2); vertical-align: -1px; }
.jcb-widget .jcb-pallino.feriale { background: rgba(255,255,255,0.06); }
.jcb-widget .jcb-pallino.weekend { background: rgba(255, 149, 1, 0.25); border-color: rgba(255, 149, 1, 0.5); }

/* ---- Chips durata ---- */
.jcb-widget .jcb-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.jcb-widget .jcb-chip {
  border: 1.5px solid var(--jcb-bordo-2); background: rgba(255,255,255,0.04); border-radius: 13px;
  padding: 13px 22px; cursor: pointer; font-size: 15px; color: var(--jcb-testo);
  font-weight: 700; transition: all 0.12s ease;
}
.jcb-widget .jcb-chip:hover:not(:disabled) { border-color: var(--jcb-verde); transform: translateY(-2px); box-shadow: 0 0 16px var(--jcb-verde-glow); }
.jcb-widget .jcb-chip.scelto {
  background: var(--jcb-verde); border-color: var(--jcb-verde); color: var(--jcb-navy);
  box-shadow: 0 0 0 3px var(--jcb-verde-glow), 0 0 18px var(--jcb-verde-glow);
}
.jcb-widget .jcb-chip:disabled { opacity: 0.3; cursor: default; }

/* ---- Fasce orarie ---- */
.jcb-widget .jcb-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.jcb-widget .jcb-slot {
  border: 1.5px solid var(--jcb-bordo-2); background: rgba(255,255,255,0.04); border-radius: 13px;
  padding: 14px 8px; cursor: pointer; font-size: 15px; font-weight: 800; color: var(--jcb-testo);
  text-align: center; transition: all 0.12s ease; letter-spacing: 0.4px;
}
.jcb-widget .jcb-slot-freccia { color: var(--jcb-verde); font-weight: 800; margin: 0 2px; }
.jcb-widget .jcb-slot:hover:not(:disabled) { border-color: var(--jcb-verde); transform: translateY(-2px); box-shadow: 0 0 16px var(--jcb-verde-glow); }
.jcb-widget .jcb-slot.scelto {
  background: var(--jcb-verde); border-color: var(--jcb-verde); color: var(--jcb-navy);
  box-shadow: 0 0 0 3px var(--jcb-verde-glow), 0 0 18px var(--jcb-verde-glow);
}
.jcb-widget .jcb-slot.scelto .jcb-slot-freccia { color: var(--jcb-navy); }
.jcb-widget .jcb-slot:disabled { opacity: 0.3; cursor: default; text-decoration: line-through; }

/* ---- Righe biglietti / extra ---- */
.jcb-widget .jcb-riga-scelta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--jcb-bordo); background: rgba(255,255,255,0.03);
  border-radius: 15px; padding: 14px 16px; margin: 10px 0; transition: border-color 0.12s ease;
}
.jcb-widget .jcb-riga-scelta:hover { border-color: var(--jcb-bordo-2); }
.jcb-widget .jcb-riga-info { display: flex; flex-direction: column; gap: 3px; }
.jcb-widget .jcb-riga-info strong { color: #fff; font-size: 1em; }
.jcb-widget .jcb-riga-info small { color: var(--jcb-muto); font-size: 0.85em; }
.jcb-widget .jcb-prezzo { color: var(--jcb-verde); font-weight: 800; font-size: 0.93em; }

.jcb-widget .jcb-stepper { display: flex; align-items: center; gap: 12px; }
.jcb-widget .jcb-stepper button {
  width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--jcb-bordo-2);
  background: rgba(255,255,255,0.04); font-size: 19px; font-weight: 800; cursor: pointer;
  color: var(--jcb-testo); line-height: 1; transition: all 0.1s ease;
}
.jcb-widget .jcb-stepper button:hover:not(:disabled) { border-color: var(--jcb-verde); color: var(--jcb-verde); transform: scale(1.08); }
.jcb-widget .jcb-stepper button:disabled { opacity: 0.2; cursor: default; }
.jcb-widget .jcb-stepper span { min-width: 24px; text-align: center; font-weight: 800; font-size: 17px; color: #fff; }

/* ---- Nota informativa sotto una card biglietto ---- */
.jcb-widget .jcb-mini-nota {
  display: flex; gap: 9px; align-items: flex-start;
  margin: -4px 0 12px; padding: 10px 13px; border-radius: 11px;
  background: rgba(11, 228, 62, 0.06); border: 1px dashed rgba(11, 228, 62, 0.35);
  color: var(--jcb-testo-2); font-size: 0.86em; line-height: 1.5;
}
.jcb-widget .jcb-mini-nota .jcb-ic { color: var(--jcb-verde); margin-top: 2px; }
.jcb-widget .jcb-mini-nota strong { color: #fff; }

/* ---- Regola bimbi 5-8 ---- */
.jcb-widget .jcb-domanda { font-weight: 800; color: #fff; margin: 12px 0 4px; font-size: 0.97em; }
.jcb-widget .jcb-box-regola { border-color: rgba(255, 149, 1, 0.45); background: rgba(255, 149, 1, 0.05); }
.jcb-widget .jcb-regola-punti { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.jcb-widget .jcb-regola-punto {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255,255,255,0.04); border: 1px solid var(--jcb-bordo);
  border-radius: 12px; padding: 11px 13px;
  color: var(--jcb-testo-2); font-size: 0.9em; line-height: 1.5;
}
.jcb-widget .jcb-regola-punto .jcb-ic { color: var(--jcb-verde); margin-top: 2px; flex: none; }
.jcb-widget .jcb-regola-punto strong { color: #fff; }

/* ---- Box extra ---- */
.jcb-widget .jcb-box {
  border: 1px solid var(--jcb-bordo); background: rgba(255,255,255,0.03);
  border-radius: 16px; padding: 16px; margin: 14px 0;
}
.jcb-widget .jcb-box-titolo {
  font-weight: 800; color: #fff; margin-bottom: 6px; font-size: 1.02em;
  display: flex; align-items: center; gap: 9px;
}
.jcb-widget .jcb-box-titolo .jcb-ic { color: var(--jcb-verde); }
.jcb-widget .jcb-desc { display: block; color: var(--jcb-muto); font-size: 0.88em; margin-bottom: 10px; line-height: 1.5; }
.jcb-widget .jcb-radio-riga { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.jcb-widget .jcb-radio {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--jcb-bordo-2); border-radius: 12px; padding: 10px 16px;
  cursor: pointer; font-size: 0.93em; font-weight: 600; color: var(--jcb-testo);
  background: rgba(255,255,255,0.04); transition: all 0.12s ease;
}
.jcb-widget .jcb-radio:hover { border-color: var(--jcb-verde); }
.jcb-widget .jcb-radio input { accent-color: var(--jcb-verde); width: 17px; height: 17px; margin: 0; flex: none; }

/* Domanda in evidenza + nota "perché lo chiediamo" */
.jcb-widget .jcb-domanda-grande { font-size: 1.08em; margin: 0 0 4px; }
.jcb-widget .jcb-sotto-domanda { color: var(--jcb-muto); font-size: 0.9em; margin: 0 0 12px; line-height: 1.45; }
.jcb-widget .jcb-perche {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
  color: var(--jcb-muto); font-size: 0.86em; line-height: 1.5;
}
.jcb-widget .jcb-perche .jcb-ic { color: var(--jcb-verde); flex: none; margin-top: 1px; }
.jcb-widget .jcb-radio.scelto { border-color: var(--jcb-verde); background: rgba(11, 228, 62, 0.10); color: #fff; }
.jcb-widget .jcb-box-modulo { border-color: rgba(255, 149, 1, 0.35); background: rgba(255, 149, 1, 0.05); }
.jcb-widget .jcb-box-modulo .jcb-box-titolo .jcb-ic { color: var(--jcb-arancio); }
.jcb-widget .jcb-btn-modulo { display: inline-flex; margin: 6px 0 12px; text-decoration: none; }
.jcb-widget .jcb-check { display: flex; gap: 9px; align-items: flex-start; font-size: 0.92em; color: var(--jcb-testo-2); cursor: pointer; font-weight: 600; }
.jcb-widget .jcb-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--jcb-verde); flex: none; }

/* ---- Modulo di responsabilità: regolamento + form ---- */
.jcb-widget .jcb-regolamento {
  max-height: 200px; overflow-y: auto; margin: 4px 0 14px; padding: 12px 14px;
  border: 1px solid var(--jcb-bordo-2); border-radius: 12px; background: rgba(0,0,0,0.18);
  font-size: 0.82em; line-height: 1.55; color: var(--jcb-testo-2);
}
.jcb-widget .jcb-regolamento p { margin: 0 0 9px; }
.jcb-widget .jcb-regolamento p:last-child { margin-bottom: 0; }
.jcb-widget .jcb-regolamento strong { color: #fff; }
.jcb-widget .jcb-form-sez {
  font-weight: 800; color: #fff; font-size: 0.9em; margin: 14px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.jcb-widget .jcb-form-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jcb-widget .jcb-campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.jcb-widget .jcb-campo span { font-size: 0.8em; color: var(--jcb-muto); font-weight: 600; }
.jcb-widget .jcb-campo input {
  width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 14px;
  border: 1.5px solid var(--jcb-bordo-2); background: rgba(255,255,255,0.05); color: #fff;
  font-family: var(--jcb-font-testo);
}
.jcb-widget .jcb-campo input:focus { outline: none; border-color: var(--jcb-verde); }
.jcb-widget .jcb-campo input::placeholder { color: var(--jcb-muto); }
.jcb-widget .jcb-btn-min2 { margin: 2px 0 12px; padding: 9px 14px; font-size: 13px; }
.jcb-widget .jcb-link-rimuovi {
  border: 0; background: none; color: var(--jcb-arancio); font-size: 0.78em;
  font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0;
}
@media (max-width: 500px) {
  .jcb-widget .jcb-form-griglia { grid-template-columns: 1fr; gap: 0; }
}

/* ---- Riepilogo: biglietto di carta sul dark ---- */
.jcb-widget .jcb-ticket {
  background: #F5F6F8; color: var(--jcb-navy);
  border-radius: 18px; padding: 18px 20px; margin: 6px 0 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.jcb-widget .jcb-ticket-testa {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 13px; margin-bottom: 6px; border-bottom: 2px dashed #c6ccd8;
}
.jcb-widget .jcb-ticket-testa small { display: block; color: #7a8194; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 2px; }
.jcb-widget .jcb-ticket-testa strong { color: var(--jcb-navy); font-size: 1.05em; }
.jcb-widget .jcb-ticket-riga {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #e2e6ee;
}
.jcb-widget .jcb-ticket-riga:last-of-type { border-bottom: none; }
.jcb-widget .jcb-ticket-riga span { color: var(--jcb-navy); font-weight: 600; font-size: 0.95em; flex: 1; min-width: 0; }
.jcb-widget .jcb-ticket .jcb-stepper { gap: 8px; width: 112px; justify-content: center; flex: none; }
.jcb-widget .jcb-ticket .jcb-stepper button {
  width: 30px; height: 30px; border-radius: 9px; font-size: 15px;
  background: #fff; border-color: #c6ccd8; color: var(--jcb-navy);
}
.jcb-widget .jcb-ticket .jcb-stepper button:hover:not(:disabled) { border-color: #069e2c; color: #069e2c; }
.jcb-widget .jcb-ticket .jcb-stepper span { color: var(--jcb-navy); font-size: 15px; flex: none; min-width: 18px; }
.jcb-widget .jcb-ticket-riga span small { display: block; color: #7a8194; font-weight: 500; font-size: 0.85em; }
.jcb-widget .jcb-ticket-riga strong { color: var(--jcb-navy); white-space: nowrap; width: 74px; text-align: right; flex: none; }
.jcb-widget .jcb-ticket-tot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 2px dashed #c6ccd8; margin-top: 8px; padding-top: 14px;
}
.jcb-widget .jcb-ticket-tot span { font-family: var(--jcb-font-titoli); font-weight: 400; font-size: 1.25em; color: var(--jcb-navy); letter-spacing: 0.5px; }
.jcb-widget .jcb-ticket-tot strong { font-family: var(--jcb-font-titoli); font-weight: 400; font-size: 1.8em; color: #069e2c; letter-spacing: 0.5px; }

/* ---- Navigazione ---- */
.jcb-widget .jcb-nav { display: flex; justify-content: space-between; align-items: center; padding: 0 24px 24px; gap: 12px; }
.jcb-widget .jcb-btn {
  border-radius: 12px; padding: 14px 26px; font-size: 15.5px; font-weight: 700;
  cursor: pointer; border: none; transition: all 0.12s ease; letter-spacing: 0.2px;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.jcb-widget .jcb-btn:disabled { opacity: 0.45; cursor: default; }
.jcb-widget .jcb-btn-pri {
  background: var(--jcb-verde); color: var(--jcb-navy);
  box-shadow: 0 0 0 1px rgba(11, 228, 62, 0.4), 0 8px 24px var(--jcb-verde-glow);
}
.jcb-widget .jcb-btn-pri:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(11, 228, 62, 0.5), 0 12px 30px var(--jcb-verde-glow); filter: brightness(1.06); }
.jcb-widget .jcb-btn-sec { background: rgba(255,255,255,0.04); color: var(--jcb-testo); border: 1.5px solid var(--jcb-bordo-2); }
.jcb-widget .jcb-btn-sec:hover { border-color: #fff; color: #fff; }

/* ---- Titolo pagina centrato (al posto di quello del tema) ---- */
.jcb-titolo-pagina {
  font-family: 'Changa One', 'Arial Black', sans-serif;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  font-size: 46px;
  line-height: 1.15;
  margin: 10px auto 28px;
  letter-spacing: 1px;
}
@media (max-width: 500px) {
  .jcb-titolo-pagina { font-size: 32px; margin: 6px auto 18px; }
}

/* ---- Nota feste ed eventi privati (sotto il widget) ---- */
.jcb-sotto-nota {
  max-width: 780px;
  margin: 0 auto 72px;
  background: linear-gradient(180deg, #0e1526, #090E1B);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 26px 24px;
  text-align: center;
  font-family: 'Inter', -apple-system, sans-serif;
}
.jcb-sotto-nota .jcb-sn-tit {
  font-family: 'Changa One', 'Arial Black', sans-serif;
  color: #FF9501;
  font-size: 22px;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.jcb-sotto-nota p { color: #CFCFCF; font-size: 14px; line-height: 1.65; margin: 0 0 16px; }
.jcb-sotto-nota .jcb-sn-azioni { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.jcb-sotto-nota .jcb-sn-mail {
  padding: 10px 18px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.18);
  color: #F0F0F0 !important; font-weight: 700; font-size: 13px; text-decoration: none !important;
}
.jcb-sotto-nota .jcb-sn-mail:hover { color: #fff !important; border-color: #fff; }
.jcb-sotto-nota .jcb-sn-link {
  padding: 10px 18px; border-radius: 12px; background: #FF9501;
  color: #090E1B !important; font-weight: 800; font-size: 13px; text-decoration: none !important;
}
.jcb-sotto-nota .jcb-sn-link:hover { filter: brightness(1.08); color: #090E1B !important; }
@media (min-width: 640px) {
  .jcb-sotto-nota { max-width: 920px; }
}

/* ============================================================
   UI/UX pass 1 — transizioni, accessibilità, rifiniture
   ============================================================ */

/* Transizione morbida al cambio passo (la classe la mette widget.js
   SOLO quando cambia step, non ad ogni micro-interazione). */
@keyframes jcbInAvanti   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes jcbInIndietro { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.jcb-widget .jcb-corpo.jcb-anim-avanti   { animation: jcbInAvanti   0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.jcb-widget .jcb-corpo.jcb-anim-indietro { animation: jcbInIndietro 0.34s cubic-bezier(0.22, 1, 0.36, 1); }

/* Comparsa a cascata delle righe/box nel passo Extra e Biglietti. */
.jcb-widget .jcb-anim-avanti .jcb-riga-scelta,
.jcb-widget .jcb-anim-avanti .jcb-box { animation: jcbInAvanti 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.jcb-widget .jcb-anim-avanti .jcb-riga-scelta:nth-child(2) { animation-delay: 0.04s; }
.jcb-widget .jcb-anim-avanti .jcb-riga-scelta:nth-child(3) { animation-delay: 0.08s; }
.jcb-widget .jcb-anim-avanti .jcb-riga-scelta:nth-child(4) { animation-delay: 0.12s; }

/* Focus da tastiera visibile (accessibilità), senza disturbare il click col mouse. */
.jcb-widget button:focus-visible,
.jcb-widget a:focus-visible,
.jcb-widget input:focus-visible {
  outline: 2px solid var(--jcb-verde);
  outline-offset: 2px;
}
.jcb-widget .jcb-radio:focus-within,
.jcb-widget .jcb-check:focus-within { outline: 2px solid var(--jcb-verde); outline-offset: 2px; border-radius: 12px; }

/* CTA primaria più "premium": leggero riflesso e freccia che avanza all'hover. */
.jcb-widget .jcb-btn-pri {
  background-color: var(--jcb-verde);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 58%);
}
.jcb-widget .jcb-btn-pri .jcb-ic { transition: transform 0.16s ease; }
.jcb-widget .jcb-btn-pri:hover:not(:disabled) .jcb-ic { transform: translateX(3px); }

/* "Oggi" nel calendario: anellino discreto quando non è il giorno scelto. */
.jcb-widget .jcb-cal-giorno.oggi:not(.scelto) {
  border-color: rgba(11, 228, 62, 0.55);
  box-shadow: inset 0 0 0 1.5px rgba(11, 228, 62, 0.4);
}

/* Rispetta chi ha attivato "riduci animazioni". */
@media (prefers-reduced-motion: reduce) {
  .jcb-widget .jcb-corpo.jcb-anim-avanti,
  .jcb-widget .jcb-corpo.jcb-anim-indietro,
  .jcb-widget .jcb-anim-avanti .jcb-riga-scelta,
  .jcb-widget .jcb-anim-avanti .jcb-box { animation: none; }
  .jcb-widget *, .jcb-widget *::before, .jcb-widget *::after { transition-duration: 0.01ms !important; }
}

/* ---- Compatibilità iOS/touch ---- */
/* Safari iOS < 15 non supporta aspect-ratio: altezza fissa di riserva per i giorni */
@supports not (aspect-ratio: 1) {
  .jcb-widget .jcb-cal-giorno { height: 46px; }
}
/* Su touch l'hover "resta attaccato" dopo il tap: niente animazioni hover */
@media (hover: none) {
  .jcb-widget .jcb-cal-giorno:hover:not(:disabled),
  .jcb-widget .jcb-chip:hover:not(:disabled),
  .jcb-widget .jcb-slot:hover:not(:disabled),
  .jcb-widget .jcb-stepper button:hover:not(:disabled),
  .jcb-widget .jcb-btn-pri:hover:not(:disabled) { transform: none; }
}

/* ---- Mobile ---- */
@media (max-width: 500px) {
  .jcb-widget { border-radius: 16px; }
  .jcb-widget .jcb-testata { padding: 18px 12px 14px; }
  .jcb-widget .jcb-brand { font-size: 24px; }
  .jcb-widget .jcb-corpo { padding: 16px 14px; }
  .jcb-widget .jcb-passo { min-width: 46px; }
  .jcb-widget .jcb-passo-num { width: 34px; height: 34px; }
  .jcb-widget .jcb-passo-nome { font-size: 9px; }
  .jcb-widget .jcb-passo-linea { margin-top: 17px; }
  .jcb-widget .jcb-slots { grid-template-columns: repeat(2, 1fr); }
  .jcb-widget .jcb-riga-scelta { flex-wrap: wrap; }
  .jcb-widget .jcb-nav { flex-direction: column-reverse; padding: 0 14px 16px; }
  .jcb-widget .jcb-nav .jcb-btn { width: 100%; }
  .jcb-widget .jcb-ticket-testa { flex-direction: column; gap: 8px; }
  .jcb-widget .jcb-ticket .jcb-stepper { width: 100px; gap: 5px; }
  .jcb-widget .jcb-ticket-riga strong { width: 60px; }
}

/* ---- Desktop: layout compatto (meno altezza, più larghezza) ---- */
@media (min-width: 640px) {
  .jcb-widget { max-width: 920px; }
  .jcb-widget .jcb-testata { padding: 18px 24px 14px; }
  .jcb-widget .jcb-brand { font-size: 26px; margin-bottom: 12px; }
  .jcb-widget .jcb-passo-num { width: 36px; height: 36px; }
  .jcb-widget .jcb-passo-linea { margin-top: 18px; }
  .jcb-widget .jcb-corpo { padding: 20px 24px; min-height: 240px; }
  .jcb-widget .jcb-intro { font-size: 1.35em; margin-bottom: 12px; }
  .jcb-widget .jcb-cal { gap: 5px; }
  .jcb-widget .jcb-cal-giorno { aspect-ratio: auto; height: 48px; }
  .jcb-widget .jcb-cal-giorno.weekend::after { bottom: 4px; }
  .jcb-widget .jcb-slots { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .jcb-widget .jcb-slot { padding: 12px 8px; }
  .jcb-widget .jcb-riga-scelta { padding: 11px 16px; margin: 8px 0; }
  .jcb-widget .jcb-box { padding: 14px 16px; margin: 12px 0; }
  .jcb-widget .jcb-nav { padding: 0 24px 18px; }
  .jcb-widget .jcb-btn { padding: 12px 22px; }
  .jcb-widget .jcb-scelta-attuale { margin-top: 12px; padding: 10px 14px; }
}

/* ============================================================
   UI/UX pass 2 — "look v2": profondità, materia, atmosfera
   Sovrascrive gli stili base (caricato dopo → vince).
   ============================================================ */

/* Atmosfera: due aloni morbidi (verde in alto, arancio in basso) sul navy. */
.jcb-widget {
  /* Base navy PIENA: dev'essere identica al colore in cui sfuma la foto
     dell'header, altrimenti si vede un gradino orizzontale sotto l'header. */
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(255, 149, 1, 0.07), transparent 60%),
    var(--jcb-navy);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  border: 0;
}

/* Testata "hero": foto del parco sfumata dietro brand + passi.
   L'immagine è configurabile via --jcb-img-header (impostata dallo shortcode);
   in mancanza usa la foto di default del parco. */
.jcb-widget .jcb-testata {
  position: relative;
  overflow: hidden;
  padding: 44px 24px 22px;
  background: var(--jcb-navy);
}

/* Container della foto: riempie esattamente la testata; l'immagine si adatta
   con object-fit:cover, quindi non lascia mai bordi scoperti. */
.jcb-widget .jcb-testata-foto {
  position: absolute;
  inset: -1px;            /* sborda di 1px: elimina la riga scoperta da arrotondamento
                             subpixel (viene comunque ritagliata da overflow:hidden) */
  z-index: 0;
  pointer-events: none;
}
.jcb-widget .jcb-testata-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  display: block;
  border: 0;
  max-width: none;
  /* La foto sfuma fino a sparire prima dei bordi: sotto resta solo il navy,
     quindi non può esistere nessun contorno/riquadro visibile. */
  -webkit-mask-image: radial-gradient(62% 68% at 50% 44%,
    #000 0%, #000 24%, rgba(0, 0, 0, 0.55) 58%, rgba(0, 0, 0, 0.18) 80%, transparent 97%);
  mask-image: radial-gradient(62% 68% at 50% 44%,
    #000 0%, #000 24%, rgba(0, 0, 0, 0.55) 58%, rgba(0, 0, 0, 0.18) 80%, transparent 97%);
}
/* Velo che copre TUTTO il container: sfuma la foto su ogni lato fino al navy,
   così non si vedono né bordi netti né gradini verso il corpo del widget. */
.jcb-widget .jcb-testata-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Velo leggero solo per la leggibilità del testo: la sfumatura dei bordi
     la fa già la maschera sull'immagine. */
  background:
    radial-gradient(ellipse 70% 110% at 50% -25%, rgba(11, 228, 62, 0.13), transparent 62%),
    linear-gradient(180deg, rgba(9, 14, 27, 0.42) 0%, rgba(9, 14, 27, 0.48) 45%, rgba(9, 14, 27, 0.72) 100%);
}

/* Il contenuto della testata sta sopra alla foto. */
.jcb-widget .jcb-testata .jcb-brand,
.jcb-widget .jcb-testata .jcb-passi { position: relative; z-index: 1; }
.jcb-widget .jcb-brand {
  font-size: 34px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 0 30px rgba(11, 228, 62, 0.22);
}
/* I nomi dei passi sopra la foto: un filo più leggibili. */
.jcb-widget .jcb-passo-nome { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.jcb-widget .jcb-passo.attivo .jcb-passo-num { transform: scale(1.05); }
.jcb-widget .jcb-passo-linea.fatta { height: 2.5px; }

/* Superfici con profondità: card, righe, box hanno un piano rialzato + ombra. */
.jcb-widget .jcb-riga-scelta,
.jcb-widget .jcb-box,
.jcb-widget .jcb-nota {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.jcb-widget .jcb-riga-scelta:hover { border-color: rgba(11, 228, 62, 0.45); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34); transform: translateY(-1px); }

/* Calendario: le celle diventano "materia" vera, non contorni invisibili. */
.jcb-widget .jcb-cal { gap: 7px; }
.jcb-widget .jcb-cal-giorno {
  border-radius: 14px; font-size: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}
.jcb-widget .jcb-cal-giorno.weekend {
  background: linear-gradient(180deg, rgba(255, 149, 1, 0.20), rgba(255, 149, 1, 0.07));
  border-color: rgba(255, 149, 1, 0.42);
}
.jcb-widget .jcb-cal-giorno.scelto {
  background-color: var(--jcb-verde);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 60%);
  color: var(--jcb-navy);
  box-shadow: 0 0 0 4px var(--jcb-verde-glow), 0 8px 22px var(--jcb-verde-glow);
}
.jcb-widget .jcb-cal-giorno.spento { background: rgba(255, 255, 255, 0.015); box-shadow: none; }

/* Chip durata e slot orari: piano rialzato + selezione piena e brillante. */
.jcb-widget .jcb-chip,
.jcb-widget .jcb-slot {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.26);
}
.jcb-widget .jcb-chip.scelto,
.jcb-widget .jcb-slot.scelto {
  background-color: var(--jcb-verde);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 60%);
  color: var(--jcb-navy);
}

/* Stepper +/- rialzati. */
.jcb-widget .jcb-stepper button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* CTA: verde pieno con riflesso e alone più marcati. */
.jcb-widget .jcb-btn-pri {
  background-color: var(--jcb-verde);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%);
  box-shadow: 0 0 0 1px rgba(11, 228, 62, 0.5), 0 10px 30px var(--jcb-verde-glow);
}

/* Pillola "scelta attuale" più materica. */
.jcb-widget .jcb-scelta-attuale {
  background: linear-gradient(180deg, rgba(11, 228, 62, 0.14), rgba(11, 228, 62, 0.06));
  border-color: rgba(11, 228, 62, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ============================================================
   UI/UX pass 3 — pulizia, gerarchia e coerenza
   Meno rumore visivo, scala dei componenti unificata.
   ============================================================ */

/* --- Calendario: i giorni non prenotabili spariscono sullo sfondo ---
   Prima avevano la stessa "tessera" dei giorni liberi: rumore inutile.
   Ora restano solo numeri tenui, così l'occhio va subito sui giorni scegliibili. */
.jcb-widget .jcb-cal-giorno.spento {
  background: none;
  border-color: transparent;
  box-shadow: none;
  opacity: 0.3;
}
.jcb-widget .jcb-cal-giorno.spento::after { display: none; }

/* Legenda più discreta: è un aiuto, non un protagonista. */
.jcb-widget .jcb-legenda { font-size: 11.5px; opacity: 0.85; margin-top: 14px; }

/* --- Scala unificata dei raggi ---
   Controlli 13px · Card 16px · Widget 22px. */
.jcb-widget .jcb-riga-scelta { border-radius: 16px; }
.jcb-widget .jcb-chip,
.jcb-widget .jcb-slot,
.jcb-widget .jcb-radio,
.jcb-widget .jcb-btn { border-radius: 13px; }

/* --- Bagliori più sobri ---
   Prima ogni elemento scelto (durata + fascia + minuto) emetteva un alone forte:
   tre "fari" accesi insieme. Ora la selezione resta evidente ma calma. */
.jcb-widget .jcb-chip.scelto,
.jcb-widget .jcb-slot.scelto {
  box-shadow: 0 0 0 2px var(--jcb-verde-glow), 0 4px 14px rgba(0, 0, 0, 0.3);
}
.jcb-widget .jcb-cal-giorno.scelto {
  box-shadow: 0 0 0 3px var(--jcb-verde-glow), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.jcb-widget .jcb-chip:hover:not(:disabled),
.jcb-widget .jcb-slot:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* --- Scelta oraria più compatta ---
   Prima: 7 fasce con etichetta lunga ("15:00 → 16:00") = 4 righe su mobile.
   Ora: solo l'ora, in griglia → tutto in 2 righe, molto più leggibile. */
.jcb-widget .jcb-chips-ore {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 9px;
}
.jcb-widget .jcb-chips-ore .jcb-chip { padding: 11px 8px; text-align: center; font-size: 14.5px; line-height: 1.15; }

/* Etichetta "ultimo ingresso" sull'ultima ora disponibile: evita dubbi
   su fin dove si può entrare rispetto all'orario di chiusura. */
.jcb-widget .jcb-chip-nota {
  display: block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.72;
  margin-top: 3px;
}

/* Minuti: etichette corte, quindi colonne strette (anche su mobile). */
.jcb-widget .jcb-slots { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; }
.jcb-widget .jcb-slot { padding: 12px 8px; }

/* --- Titoli di sezione: gerarchia più chiara e meno ingombrante --- */
.jcb-widget .jcb-intro { font-size: 1.42em; margin-bottom: 14px; }
.jcb-widget .jcb-intro-2 { margin-top: 24px; }
@media (min-width: 640px) {
  .jcb-widget .jcb-intro { font-size: 1.3em; margin-bottom: 12px; }
  .jcb-widget .jcb-intro-2 { margin-top: 22px; }
}

/* ============================================================
   Biglietti in stile "ticket" (passo 2)
   Matrice col prezzo + strappo tratteggiato + tacche perforate.
   ============================================================ */
.jcb-widget .jcb-tc {
  position: relative;
  display: flex;
  align-items: stretch;
  margin: 12px 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.jcb-widget .jcb-tc:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(0, 0, 0, 0.34); }

/* Matrice (lo "stub" da strappare) */
.jcb-widget .jcb-tc-stub {
  flex: none;
  width: 94px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 16px 8px;
  border-radius: 15px 0 0 15px;
  background: rgba(255, 255, 255, 0.05);
  border-right: 2px dashed rgba(255, 255, 255, 0.2);
}
.jcb-widget .jcb-tc-prezzo {
  font-family: var(--jcb-font-titoli);
  font-weight: 400;
  font-size: 1.4em;
  line-height: 1;
  color: var(--jcb-verde);
  letter-spacing: 0.4px;
}
.jcb-widget .jcb-tc-durata {
  font-size: 10px; font-weight: 800; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--jcb-muto);
}

/* Tacche perforate sopra e sotto la linea dello strappo */
.jcb-widget .jcb-tc::before,
.jcb-widget .jcb-tc::after {
  content: '';
  position: absolute;
  left: 94px;
  width: 16px; height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--jcb-navy);
}
.jcb-widget .jcb-tc::before { top: -9px; }
.jcb-widget .jcb-tc::after  { bottom: -9px; }

/* Corpo del biglietto */
.jcb-widget .jcb-tc-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 14px 14px 14px 16px;
}
.jcb-widget .jcb-tc-nome { color: #fff; font-size: 1em; line-height: 1.25; }
.jcb-widget .jcb-tc-desc { color: var(--jcb-muto); font-size: 0.85em; line-height: 1.45; }
.jcb-widget .jcb-tc-azioni { flex: none; display: flex; align-items: center; padding: 0 14px 0 4px; }

/* Biglietto selezionato: matrice accesa e bordo verde */
.jcb-widget .jcb-tc.scelto {
  border-color: rgba(11, 228, 62, 0.45);
  box-shadow: 0 0 0 1px rgba(11, 228, 62, 0.22), 0 8px 22px rgba(0, 0, 0, 0.32);
}
.jcb-widget .jcb-tc.scelto .jcb-tc-stub {
  background: rgba(11, 228, 62, 0.13);
  border-right-color: rgba(11, 228, 62, 0.45);
}

/* Mobile: il contatore va SOTTO il testo, così nome e descrizione
   hanno tutta la larghezza e non si spezzano su troppe righe. */
@media (max-width: 430px) {
  .jcb-widget .jcb-tc {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-areas:
      "stub body"
      "stub azioni";
    align-items: stretch;
  }
  .jcb-widget .jcb-tc-stub { grid-area: stub; width: auto; padding: 14px 6px; }
  .jcb-widget .jcb-tc-body { grid-area: body; padding: 13px 13px 2px 14px; }
  .jcb-widget .jcb-tc-azioni { grid-area: azioni; justify-content: flex-end; padding: 0 13px 12px; }
  .jcb-widget .jcb-tc::before, .jcb-widget .jcb-tc::after { left: 74px; }
  .jcb-widget .jcb-tc-prezzo { font-size: 1.25em; }
  .jcb-widget .jcb-tc .jcb-stepper { gap: 8px; }
  .jcb-widget .jcb-tc .jcb-stepper button { width: 34px; height: 34px; font-size: 18px; }
}

/* Touch: niente hover "appiccicato" dopo il tap sui nuovi componenti
   (su mobile l'hover resta attivo finché non tocchi altrove). */
@media (hover: none) {
  .jcb-widget .jcb-tc:hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  }
  .jcb-widget .jcb-riga-scelta:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.13);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  }
  .jcb-widget .jcb-chip:hover:not(:disabled),
  .jcb-widget .jcb-slot:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.15);
  }
  .jcb-widget .jcb-cal-giorno:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  }
  /* Lo stato "scelto" resta sempre ben visibile */
  .jcb-widget .jcb-tc.scelto:hover { border-color: rgba(11, 228, 62, 0.45); }
  .jcb-widget .jcb-chip.scelto:hover,
  .jcb-widget .jcb-slot.scelto:hover,
  .jcb-widget .jcb-cal-giorno.scelto:hover { border-color: var(--jcb-verde); }
}

/* Prezzo testuale nella matrice (es. "Gratis"): un filo più piccolo per stare
   nello stesso spazio della cifra. */
.jcb-widget .jcb-tc-prezzo-lungo { font-size: 1.02em; letter-spacing: 0.2px; }

/* Icona accanto alla domanda in evidenza (es. calzini) */
.jcb-widget .jcb-domanda-grande .jcb-ic { color: var(--jcb-verde); vertical-align: -3px; margin-right: 4px; }

/* ============================================================
   Riepilogo: biglietto vero e proprio
   Testata brandizzata + strappo perforato + codice a barre.
   ============================================================ */
.jcb-widget .jcb-ticket {
  position: relative;
  padding: 0;               /* il padding lo danno le singole sezioni */
  overflow: hidden;         /* serve a "ritagliare" le tacche perforate */
}

/* Testata scura col logo */
.jcb-widget .jcb-tk-testata {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px;
  background: var(--jcb-navy);
}
.jcb-widget .jcb-tk-logo { height: 26px; width: auto; display: block; }
.jcb-widget .jcb-tk-marchio {
  font-family: var(--jcb-font-titoli); font-weight: 400;
  color: #fff; font-size: 1.05em; letter-spacing: 0.5px;
}
.jcb-widget .jcb-tk-admit {
  font-size: 10px; font-weight: 800; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--jcb-verde);
  border: 1px solid rgba(11, 228, 62, 0.45); border-radius: 6px; padding: 4px 9px;
}

/* Giorno / Orario con il tasto "Modifica" */
.jcb-widget .jcb-ticket-testa { padding: 16px 20px 12px; border-bottom: 0; margin-bottom: 0; }
.jcb-widget .jcb-tk-modifica {
  display: inline-block; margin-top: 5px;
  background: none; border: 0; padding: 0;
  color: #0a7ad1; font-size: 11.5px; font-weight: 800;
  text-decoration: underline; cursor: pointer; letter-spacing: 0.2px;
}
.jcb-widget .jcb-tk-modifica:hover { color: #065a9c; }

/* Voci acquistate */
.jcb-widget .jcb-tk-voci { padding: 0 20px 16px; }
.jcb-widget .jcb-tk-aiuto {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 0 0 6px; padding: 9px 11px;
  background: #eef1f6; border-radius: 10px;
  color: #56607a; font-size: 11.5px; line-height: 1.45;
}
.jcb-widget .jcb-tk-aiuto .jcb-ic { color: #0a7ad1; flex: none; margin-top: 1px; }
.jcb-widget .jcb-tk-aiuto strong { color: var(--jcb-navy); }

/* Strappo perforato: linea tratteggiata + due tacche ai bordi */
.jcb-widget .jcb-tk-strappo {
  position: relative;
  height: 0;
  margin: 0 20px;
  border-top: 2px dashed #c6ccd8;
}
.jcb-widget .jcb-tk-strappo::before,
.jcb-widget .jcb-tk-strappo::after {
  content: '';
  position: absolute; top: -11px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--jcb-navy);
}
.jcb-widget .jcb-tk-strappo::before { left: -30px; }
.jcb-widget .jcb-tk-strappo::after  { right: -30px; }

/* Piede col codice a barre */
.jcb-widget .jcb-tk-piede { padding: 16px 20px 18px; text-align: center; }
.jcb-widget .jcb-tk-barcode {
  height: 42px; border-radius: 2px; opacity: 0.88;
  background-image: repeating-linear-gradient(90deg,
    #16203a 0 2px, transparent 2px 5px,
    #16203a 5px 6px, transparent 6px 10px,
    #16203a 10px 13px, transparent 13px 15px,
    #16203a 15px 16px, transparent 16px 21px);
}
.jcb-widget .jcb-tk-piede small {
  display: block; margin-top: 9px;
  color: #7a8194; font-size: 11px; line-height: 1.45;
}

@media (max-width: 500px) {
  .jcb-widget .jcb-tk-testata { padding: 11px 14px; }
  .jcb-widget .jcb-tk-logo { height: 22px; }
  .jcb-widget .jcb-ticket-testa { padding: 14px 14px 10px; }
  .jcb-widget .jcb-tk-voci { padding: 0 14px 14px; }
  .jcb-widget .jcb-tk-strappo { margin: 0 14px; }
  .jcb-widget .jcb-tk-piede { padding: 14px 14px 16px; }
}

/* "Modifica" su riga propria, staccato dal valore */
.jcb-widget .jcb-ticket-testa strong { display: block; }
.jcb-widget .jcb-ticket-testa .jcb-tk-modifica { margin-top: 4px; }

/* Mobile: più spazio al nome della voce nel biglietto finale */
@media (max-width: 500px) {
  .jcb-widget .jcb-ticket .jcb-stepper { width: 88px; gap: 4px; }
  .jcb-widget .jcb-ticket .jcb-stepper button { width: 27px; height: 27px; font-size: 14px; }
  .jcb-widget .jcb-ticket-riga strong { width: 52px; }
  .jcb-widget .jcb-ticket-riga span { font-size: 0.9em; }
}