/* ---------- Pagina cliente: ricerca e prenotazione ---------- */
.topbar-link { display: flex; align-items: center; gap: 16px; font-size: .9rem; }
.topbar-link a:not(.btn) { color: var(--muted); text-decoration: none; }
.topbar-link a:not(.btn):hover { color: var(--ink); }
.topbar-link .btn.ghost { margin-right: 0; }

.hero { max-width: 1180px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 48px) 8px; }
.hero-testo { max-width: 680px; }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }

.cerca {
  margin-top: 28px; padding: 14px; display: grid; gap: 10px; align-items: end;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .9fr) auto;
}
.cerca-campo label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; margin-bottom: 4px; padding-left: 4px; }
.cerca-campo input, .cerca-campo select { padding: 12px 13px; }
.cerca-btn { height: 48px; padding: 0 30px; }
.cerca-errore { grid-column: 1 / -1; margin-top: 0; }
.contatore { display: flex; align-items: center; gap: 6px; }
.contatore input { text-align: center; padding: 12px 4px; -moz-appearance: textfield; }
.contatore input::-webkit-outer-spin-button, .contatore input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.contatore .icon-btn { flex: none; width: 38px; height: 38px; }

.citta-popolari { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; font-size: .88rem; color: var(--muted); }
#citta-chip { display: flex; flex-wrap: wrap; gap: 8px; }

/* Risultati */
.risultati-wrap { max-width: 1180px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 48px) 64px; scroll-margin-top: 12px; }
.risultati-head h2 { font: 600 1.6rem Fraunces, serif; margin: 0 0 2px; }
.risultati-head .hint { margin: 0 0 14px; text-transform: none; }
.risultati-head .hint::first-letter { text-transform: uppercase; }

.giorni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; max-width: 640px; }
.giorno {
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 8px 4px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit;
}
.giorno span { font-size: .72rem; color: var(--muted); text-transform: capitalize; }
.giorno b { font: 600 1.15rem/1.2 Fraunces, serif; }
.giorno:hover { border-color: var(--brand); }
.giorno.attivo { background: var(--brand); border-color: var(--brand); color: #fff; }
.giorno.attivo span { color: rgba(255, 255, 255, .85); }

#risultati { display: flex; flex-direction: column; gap: 16px; }
.tour-risultato {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 8px 28px; padding: 22px 24px;
  grid-template-areas: "corpo prezzo";
}
.tr-corpo { grid-area: corpo; min-width: 0; }
.tr-prezzo { grid-area: prezzo; text-align: right; }

.tr-guida { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tr-guida b { display: block; font-size: .92rem; }
.tr-guida span:not(.avatar) { display: block; font-size: .78rem; color: var(--accent); font-weight: 500; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font: 700 1.05rem Fraunces, serif; flex: none; }
.tour-risultato h3 { font: 600 1.3rem/1.25 Fraunces, serif; margin: 0 0 10px; }
.tr-desc { color: var(--muted); font-size: .92rem; margin: 12px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tr-incontro { font-size: .86rem; margin: 8px 0 0; }
.tr-prezzo b { font: 700 1.7rem Fraunces, serif; }
.tr-prezzo span { color: var(--muted); font-size: .85rem; }
.tr-totale { font-size: .85rem; color: var(--muted); margin-top: 2px; }

/* Orari di partenza: ogni orario mostra quante guide sono disponibili */
.orari { display: flex; flex-direction: column; gap: 18px; margin-bottom: 8px; }
.orari-nome { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.orari-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.orario {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; cursor: pointer; font: inherit;
  border: 1px solid var(--accent); border-radius: 12px; background: var(--surface); color: var(--accent);
  transition: background .12s, color .12s, transform .1s;
}
.orario b { font: 600 1.1rem Inter; font-variant-numeric: tabular-nums; }
.orario span { font-size: .76rem; color: var(--muted); }
.orario:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.orario:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.orario.attivo { background: var(--accent); color: #fff; }
.orario.attivo span { color: rgba(255, 255, 255, .85); }

.tour-ora { margin-top: 26px; scroll-margin-top: 12px; }
.tour-ora-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.tour-ora-head h3 { font: 600 1.35rem Fraunces, serif; margin: 0; }
.tour-ora-head .hint { margin: 0; }
.tr-orario { font-size: .85rem; margin: 8px 0 12px; color: var(--ink); }
.tr-prezzo .btn { width: 100%; }

.come-funziona { max-width: 1180px; margin: 40px auto 64px; padding: 0 clamp(16px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.come-funziona div { border-top: 3px solid var(--brand); padding-top: 12px; }
.come-funziona b { font: 700 1.6rem Fraunces, serif; color: var(--brand); }
.come-funziona h3 { margin: 4px 0; font: 600 1.15rem Fraunces, serif; }
.come-funziona p { margin: 0; color: var(--muted); font-size: .92rem; }

/* Finestra di prenotazione */
.pr-riepilogo { background: var(--bg); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; }
.pr-riepilogo h3 { font: 600 1.1rem Fraunces, serif; margin: 0 0 8px; }
.pr-riepilogo .dati { display: grid; grid-template-columns: 90px 1fr; gap: 4px 12px; margin: 0; font-size: .9rem; }
.pr-riepilogo dt { color: var(--muted); }
.pr-riepilogo dd { margin: 0; }
.pr-riepilogo dd::first-letter { text-transform: uppercase; }
.pr-totale { font-weight: 700; }
.pr-fatto { text-align: center; padding: 12px 4px 20px; }
.pr-fatto .success-icon { margin-bottom: 12px; }
.codice-pren { font: 700 1.6rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; background: var(--brand-soft); color: var(--brand); border-radius: 12px; padding: 10px; margin: 6px auto 14px; max-width: 280px; }
.success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 2rem; display: grid; place-items: center; margin: 0 auto 16px; }

body.cliente { --nav-h: 0px; }
@media (max-width: 720px) { .risultati-wrap { scroll-margin-top: 76px; } }
@media (max-width: 960px) {
  .cerca { grid-template-columns: 1fr 1fr; }
  .cerca-citta { grid-column: 1 / -1; }
  .cerca-btn { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body.cliente { padding-bottom: 24px; }
  .solo-desktop { display: none; }
  .hero { padding-top: 4px; }
  .hero .lead { font-size: .98rem; }
  .cerca { grid-template-columns: 1fr 1fr; margin-top: 18px; }
  .tour-risultato { grid-template-columns: 1fr; grid-template-areas: "corpo" "prezzo"; padding: 18px; }
  .tr-prezzo { text-align: left; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .giorni { gap: 5px; }
  .come-funziona { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .orari-griglia { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
  .orario { padding: 8px 4px; }
  .tour-ora { scroll-margin-top: 76px; }
  .tr-prezzo { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; border-top: 1px solid var(--line); padding-top: 12px; }
  .tr-prezzo .tr-orario { margin: 0; grid-column: 1; }
  .tr-prezzo .btn { grid-column: 2; grid-row: 1 / span 3; width: auto; }
}

/* ---------- Foto dei tour ---------- */
.tour-risultato { grid-template-columns: 260px minmax(0, 1fr) 210px; grid-template-areas: "foto corpo prezzo"; }
.tr-foto { grid-area: foto; align-self: start; }
.galleria { position: relative; border-radius: 12px; overflow: hidden; background: var(--bg); aspect-ratio: 3 / 2; }
.gal-scorri { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 100%; scrollbar-width: none; }
.gal-scorri::-webkit-scrollbar { display: none; }
.gal-scorri img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; user-select: none; }
.gal-n { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; pointer-events: none; }
.gal-freccia { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .9); color: #1f2a2e; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.gal-freccia.prec { left: 8px; } .gal-freccia.succ { right: 8px; }
.galleria:hover .gal-freccia, .gal-freccia:focus-visible { opacity: 1; }
.pr-foto { margin-bottom: 14px; aspect-ratio: 16 / 9; }
@media (max-width: 900px) {
  .tour-risultato { grid-template-columns: minmax(0, 1fr) 210px; grid-template-areas: "foto foto" "corpo prezzo"; }
  .tr-foto { aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
  .tour-risultato { grid-template-columns: 1fr; grid-template-areas: "foto" "corpo" "prezzo"; }
  .tr-foto { margin: -18px -18px 6px; border-radius: 14px 14px 0 0; }
  .gal-freccia { display: none; }
}

/* ---------- Scarica l'app ---------- */
.scarica-app { max-width: 1180px; margin: 0 auto 72px; padding: 0 clamp(16px, 4vw, 48px); }
.sa-intro h2 { font: 700 clamp(1.5rem, 3vw, 2rem) Fraunces, serif; margin: 0 0 4px; }
.sa-intro p { margin: 0 0 18px; color: var(--muted); }
.sa-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sa-casella { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.sa-casella.consigliata { border: 2px solid var(--brand); }
.sa-tuo { position: absolute; top: -11px; right: 18px; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 99px; }
.sa-testa { display: flex; gap: 14px; align-items: center; }
.sa-testa h3 { margin: 0; font: 600 1.3rem Fraunces, serif; }
.sa-testa p { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }
.sa-ico { width: 52px; height: 52px; flex: none; padding: 8px; border-radius: 14px; }
#sa-android .sa-ico { color: #1f7a4d; background: color-mix(in srgb, #1f7a4d 12%, transparent); }
#sa-ios .sa-ico { color: var(--ink); background: var(--bg); }
.sa-nota { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.sa-passi { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: .95rem; }
.sa-condividi { width: 18px; height: 18px; vertical-align: -3px; color: #0a84ff; }
.sa-casella .btn-block { margin-top: auto; }
#sa-ios .sa-nota { margin-top: auto; }
/* nell'app già installata le caselle non servono */
html.pwa .scarica-app { display: none; }
@media (max-width: 720px) {
  .sa-griglia { grid-template-columns: 1fr; gap: 22px; }
  .scarica-app { margin-bottom: 40px; }
}

.tr-prezzo .btn:disabled { background: var(--line); color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.gal-rif { position: absolute; left: 10px; bottom: 10px; background: rgba(0, 0, 0, .55); color: #fff; font: 600 .72rem Inter, sans-serif; padding: 3px 9px; border-radius: 99px; pointer-events: none; }
/* Voto della guida nella scheda del tour (sovrascrive lo stile delle righe sotto il nome) */
.tr-guida .voto { display: inline-flex; margin-left: auto; font-size: .78rem; color: #7a5200; font-weight: 500; }
.tr-guida .voto.voto-nuovo { color: var(--muted); }
@media (prefers-color-scheme: dark) { .tr-guida .voto { color: #f2d48a; } }

/* Contatore degli iscritti di un tour di gruppo */
.ct { margin: 10px 0 8px; }
.ct-barra { position: relative; height: 8px; border-radius: 99px; background: var(--line); overflow: visible; }
.ct-pieno { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: #e0a106; }
.ct.confermato .ct-pieno { background: var(--ok); }
.ct-minimo { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ink); border-radius: 2px; transform: translateX(-1px); }
.ct-testo { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.ct-testo b { color: var(--ink); }
.ct-testo .ct-ok { color: var(--ok); }
.tr-quota { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.pr-regola { margin: 8px 0 0; }
/* il voto resta una riga sola (la regola delle righe sotto il nome lo farebbe diventare un blocco) */
.tr-guida span.voto { display: inline-flex; flex: none; }

/* Iscritti già presenti nell'orario */
.orario .orario-iscritti { font-weight: 600; color: var(--accent); }
.orario.attivo .orario-iscritti { color: #fff; }
/* Posti da prenotare nel riepilogo */
.pr-posti { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; }
.pr-posti label { font-weight: 600; }
.pr-posti .contatore input { width: 56px; }

/* Acquisto del tour intero */
.tr-intero { font-size: .8rem; color: var(--accent); font-weight: 600; }
.pr-modi { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.pr-modi legend { font: 600 1rem/1.4 Inter, system-ui, sans-serif; margin-bottom: 6px; padding: 0; }
.pr-modo { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pr-modo:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.pr-modo input[type=radio] { width: 18px; height: 18px; min-width: 0; padding: 0; margin: 3px 0 0; flex: none; border: 0; box-shadow: none; accent-color: var(--accent); }
.pr-modo span { display: grid; gap: 2px; min-width: 0; }
.pr-modo small { color: var(--muted); font-size: .82rem; }

/* Orari colorati in base agli iscritti: giallo (primi iscritti) -> verde (minimo raggiunto) */
.orari-legenda { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: .78rem; color: var(--muted); margin: 0 0 14px; }
.leg-voce { display: inline-flex; align-items: center; gap: 6px; }
.leg-pallino { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.leg-scala { width: 64px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, hsl(48 85% 44%), hsl(100 80% 40%), hsl(142 62% 36%)); }
.orario.con-iscritti { border-color: var(--slot); border-width: 2px; background: color-mix(in srgb, var(--slot) 16%, var(--surface)); }
.orario.con-iscritti b { color: var(--ink); }
.orario.con-iscritti .orario-iscritti { color: color-mix(in srgb, var(--slot) 55%, var(--ink)); }
.orario.con-iscritti:hover { background: color-mix(in srgb, var(--slot) 26%, var(--surface)); }
.orario.con-iscritti.attivo { background: var(--slot); border-color: var(--slot); color: #fff; }
.orario.con-iscritti.attivo b, .orario.con-iscritti.attivo .orario-iscritti { color: #fff; }

/* Finestra di pagamento con carta (simulata) */
.pc-dlg { border: 0; border-radius: 18px; padding: 0; width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.3); overflow: auto; }
.pc-dlg::backdrop { background: rgba(15, 20, 22, .55); }
.pc-form { padding: 20px 22px 18px; display: grid; gap: 12px; }
.pc-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pc-testa h2 { margin: 0; font-size: 1.25rem; }
.pc-desc { margin: 2px 0 0; color: var(--muted); font-size: .85rem; }
.pc-chiudi { border: 1px solid var(--line); background: none; color: var(--ink); width: 34px; height: 34px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; flex: none; }
.pc-importo { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.pc-importo b { font-size: 1.35rem; }
.pc-prova { font-size: .82rem; padding: 10px 12px; border-radius: 10px; border: 1px dashed color-mix(in srgb, #c98a00 60%, var(--line)); background: color-mix(in srgb, #f5b400 10%, var(--surface)); display: grid; gap: 4px; }
.pc-prova small { color: var(--muted); }
.pc-usa-prova { justify-self: start; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 4px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.pc-campo { display: grid; gap: 4px; min-width: 0; }
.pc-campo label { font-size: .82rem; font-weight: 600; }
.pc-campo input { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; font: 500 1rem system-ui, sans-serif; background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-campo input:focus { outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); }
.pc-numero-box { position: relative; }
.pc-circuito { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: .78rem; font-weight: 700; color: var(--accent); }
.pc-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pc-errore { margin: 0; color: #b3261e; font-size: .88rem; font-weight: 600; }
.pc-sicuro { margin: 0; text-align: center; font-size: .78rem; color: var(--muted); }
.pc-attesa, .pc-ok { padding: 48px 24px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.pc-attesa small, .pc-ok small { color: var(--muted); }
.pc-giro { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--accent); animation: pc-gira .8s linear infinite; }
@keyframes pc-gira { to { transform: rotate(360deg); } }
.pc-spunta { width: 52px; height: 52px; border-radius: 50%; background: #1e8a4c; color: #fff; display: grid; place-items: center; font-size: 1.6rem; }
.pr-pagato { font-weight: 600; }