/**
 * Prenotazioni biblioteca — stili front-end.
 *
 * Riusa i token e i componenti del tema (BEM). Definisce solo ciò che manca:
 * il pattern a tab, la lista eventi dell'area riservata e piccoli ritocchi al
 * form di prenotazione. Conforme a WCAG 2.2 AA: focus visibile, target ≥ 24px,
 * nessuna informazione veicolata dal solo colore.
 */

/* --- Tab (ARIA Tabs) --------------------------------------------------- */
.bib-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--neutral-200, #e5e7eb);
	padding-bottom: 12px;
}

.bib-tabs__tab {
	cursor: pointer;
}

/* Focus visibile robusto anche su sfondi chiari (WCAG 2.4.7 / 2.4.11). */
.bib-tabs__tab:focus-visible,
.bib-booking-form :focus-visible,
.bib-cancel-form :focus-visible {
	outline: 3px solid var(--color-primary, #06c);
	outline-offset: 2px;
}

.bib-tabs__panel {
	margin: 0;
}

.bib-tabs__panel[hidden] {
	display: none;
}

/* --- Lista eventi ------------------------------------------------------ */
.bib-eventi-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
	/* `min(280px, 100%)` invece di `280px`: una colonna larga 280 fissi non
	   scende sotto quella misura, e su uno schermo da 320 — meno i margini del
	   contenitore — sborda, facendo scorrere la pagina di lato (WCAG 1.4.10). */
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.bib-eventi-list__item {
	margin: 0;
}

.event-card--compact .event-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
}

.bib-empty {
	color: var(--neutral-600, #4b5563);
	font-style: italic;
}

/* --- Barra posti (integra .seatbar del tema) --------------------------- */
.seatbar__label {
	font-size: var(--text-sm, 0.875rem);
	color: var(--neutral-700, #374151);
}

/* --- Form prenotazione ------------------------------------------------- */
.bib-booking-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
}

.bib-booking-form .field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Un unico componente: la spaziatura tra i campi viene solo dal gap del form,
   senza il margine extra del tema (che si sommerebbe rendendo il ritmo irregolare). */
.bib-booking-form .field + .field { margin-top: 0; }

/* Il gruppo «I tuoi dati» (nome, email, telefono) non deve apparire come un box a
   sé: niente bordo/legenda di default del fieldset, i suoi campi entrano nel flusso
   unico del form. Il raggruppamento semantico (fieldset/legend) resta per gli
   screen reader (WCAG 1.3.1). */
.bib-guest-fields {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0; /* evita l'overflow tipico dei fieldset */
}

.bib-guest-fields > * + * { margin-top: 12px; }

.bib-guest-fields__legend {
	padding: 0;
	margin: 0;
	font-size: var(--text-sm, 0.875rem);
	font-weight: 700;
	color: var(--neutral-700, #374151);
}

.bib-guest-fields__login { margin: 0; font-size: var(--text-sm, 0.875rem); }

.bib-select,
.bib-textarea {
	font: inherit;
	padding: 8px 10px;
	border: 1px solid var(--neutral-500, #6b7280);
	border-radius: var(--radius-md, 8px);
	background: #fff;
	color: var(--neutral-900, #111827);
	min-height: 44px;
}

.bib-textarea {
	min-height: 72px;
	resize: vertical;
}

.field__hint {
	font-size: var(--text-xs, 0.75rem);
	color: var(--neutral-600, #4b5563);
	font-weight: 400;
}

.bib-booking__hint,
.bib-booking__closed,
.bib-booking__login {
	margin: 4px 0 0;
	font-size: var(--text-sm, 0.875rem);
}

.bib-cancel-form {
	/* Niente margine in cima: questo form sta dentro `.my-events__action`, che
	   e' una riga flex con `align-items: center`. Un margine sopra spingeva
	   «Disdici» piu' in basso di «Modifica posti», che gli sta accanto: due
	   pulsanti affiancati e disallineati fra loro. Lo spazio fra i due lo da'
	   gia' il `gap` del contenitore. */
	margin-top: 0;
}

/* --- Stepper posti (accessibile) -------------------------------------- */
.bib-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--neutral-500, #6b7280);
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	width: max-content;
	max-width: 100%;
}

.bib-stepper__btn {
	/* Target ≥ 44px (WCAG 2.5.8). */
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: var(--neutral-100, #f3f4f6);
	color: var(--neutral-900, #111827);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.bib-stepper__btn:hover {
	background: var(--neutral-200, #e5e7eb);
}

.bib-stepper__btn:focus-visible,
.bib-stepper__input:focus-visible {
	outline: 3px solid var(--color-primary, #06c);
	outline-offset: -3px;
}

.bib-stepper__input {
	width: 4ch;
	min-height: 44px;
	border: 0;
	border-left: 1px solid var(--neutral-500, #6b7280);
	border-right: 1px solid var(--neutral-500, #6b7280);
	text-align: center;
	font: inherit;
	color: var(--neutral-900, #111827);
	background: #fff;
	-moz-appearance: textfield;
}

.bib-stepper__input::-webkit-outer-spin-button,
.bib-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --- Pannello prenotazione nella pagina evento ------------------------ */
.bib-booking-panel {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--neutral-200, #e5e7eb);
}

.bib-booking-panel__title {
	margin: 0 0 12px;
}

/* --- Riduzione del movimento ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.seatbar__fill {
		transition: none;
	}
}

/* --- Le mie prenotazioni: tab Prossimi/Passati + lista ---------------- */
.my-events-section { margin-bottom: 32px; }
.my-events-section__title { margin: 0 0 12px; font-size: var(--text-lg, 1.15rem); }

/* Badge con il conteggio dentro la linguetta del tab. */
.bib-tabs__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	margin-left: 6px;
	padding: 0 0.4em;
	border-radius: 999px;
	font-size: var(--text-xs, 0.75rem);
	line-height: 1;
	background: var(--neutral-200, #e5e7eb);
	color: var(--neutral-700, #374151);
}
.bib-tabs__tab.is-active .bib-tabs__count {
	background: rgba( 255, 255, 255, 0.35 );
	color: inherit;
}

/* Lista prenotazioni: righe "a scheda" leggibili. */
.my-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.my-events__item {
	border: 1px solid var(--neutral-200, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	background: #fff;
}
.my-events__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 16px;
}
.my-events__main { flex: 1 1 240px; min-width: 0; }
.my-events__title { margin: 0 0 6px; font-size: var(--text-lg, 1.15rem); }
.my-events__title a { text-decoration: none; }
.my-events__title a:hover { text-decoration: underline; }
.my-events__action {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	flex: 0 0 auto;
}
/* Storico: leggermente attenuato, senza compromettere il contrasto del testo. */
.bib-tabs__panel#bib-mypanel-passati .my-events__item { background: var(--neutral-100, #f3f4f6); }

.bib-modifica { margin-bottom: 0; }
.bib-modifica > summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.bib-modifica > summary::-webkit-details-marker { display: none; }
.bib-modifica > summary:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 2px; }
.bib-modifica-form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 480px) {
	/* `min-width: 0` insieme a `flex-basis`: senza, la larghezza minima del
	   contenuto vince comunque sulla base dichiarata. */
	.my-events__action { flex-basis: 100%; min-width: 0; }
	.my-events__action > * { max-width: 100%; }
}

/* --- «Crea un account»: <details> inline + modale progressiva ---------- */
.bib-account { margin: 12px 0; }
.bib-account__summary,
.bib-account__trigger { cursor: pointer; }
.bib-account > summary { display: inline-flex; align-items: center; list-style: none; }
.bib-account > summary::-webkit-details-marker { display: none; }
.bib-account > summary:focus-visible,
.bib-account__trigger:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 2px; }
.bib-account__body { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.bib-account__intro { margin: 0; color: var(--neutral-600, #4b5563); font-size: var(--text-sm, 0.875rem); }
.field--check { display: flex; align-items: center; gap: 8px; }

/* Modale (dialog nativo). Il backdrop rende inerte lo sfondo; showModal()
   gestisce focus trap ed Esc. Target di chiusura ≥ 24x24 px (WCAG 2.2). */
.bib-account-dialog {
	width: min( 92vw, 420px );
	padding: 20px;
	border: 1px solid var(--neutral-200, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	color: var(--neutral-900, #111827);
	background: #fff;
}
.bib-account-dialog::backdrop { background: rgba( 17, 24, 39, 0.55 ); }
.bib-account-dialog__title { margin: 0 40px 12px 0; font-size: var(--text-lg, 1.15rem); }
.bib-account-dialog__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	line-height: 1;
	border: 1px solid var(--neutral-200, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	background: var(--neutral-100, #f3f4f6);
	cursor: pointer;
}
.bib-account-dialog__close:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 2px; }
.bib-account-dialog { position: fixed; inset: 0; margin: auto; }

/* --- Pagina di gestione/conferma via token (ManagePage) --------------- */
.bib-manage { max-width: 640px; }
.bib-manage__recap { margin-bottom: 28px; }
.bib-manage__recap-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.bib-manage__event { margin: 0; font-size: var(--text-lg, 1.15rem); flex: 1 1 auto; }
.bib-manage__event a { text-decoration: none; }
.bib-manage__event a:hover { text-decoration: underline; }

.bib-manage-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--neutral-200, #e5e7eb); }
.bib-manage-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.bib-manage-section__title { margin: 0 0 12px; font-size: var(--text-lg, 1.15rem); }
.bib-manage-section .booking-form__actions { margin-top: 16px; }

/* La disdetta è un'azione distruttiva: separazione visiva più marcata. */
.bib-manage-section--danger { margin-top: 32px; padding-top: 28px; }
.bib-manage-section--danger .bib-manage-section__title { color: var(--neutral-900, #111827); }

/* --- Crea un account: trigger compatto + campi password/termini --------- */
/* Bottone "Crea un account" più compatto (meno padding orizzontale). */
.bib-account__summary,
.bib-account__trigger { padding: 10px 16px; }
.bib-account__trigger { display: inline-flex; }

/* Campo password con toggle mostra/nascondi affiancato. */
.bib-pwd { display: flex; gap: 8px; align-items: stretch; }
.bib-pwd .field__input { flex: 1 1 auto; min-width: 0; }
.bib-pwd__toggle {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 14px;
	font: inherit;
	color: var(--neutral-900, #111827);
	background: var(--neutral-100, #f3f4f6);
	border: 1px solid var(--neutral-500, #6b7280);
	border-radius: var(--radius-md, 8px);
	cursor: pointer;
}
.bib-pwd__toggle:hover { background: var(--neutral-200, #e5e7eb); }
.bib-pwd__toggle:focus-visible { outline: 3px solid var(--color-primary, #06c); outline-offset: 2px; }

/* Messaggio d'errore inline (es. password non coincidono). */
.bib-account__error { margin: 4px 0 0; color: var(--danger, #b91c1c); font-size: var(--text-sm, 0.875rem); font-weight: 600; }

/* Spunta termini e condizioni (allineata in alto per label su più righe). */
.bib-terms { align-items: flex-start; gap: 10px; }

/* La riga va a capo in modo decente.

   `text-wrap: pretty` chiede al browser di non lasciare una parola sola
   sull'ultima riga: era il difetto che si vedeva, con «condizioni.» e
   l'asterisco isolati in fondo. L'asterisco ora esce attaccato al punto —
   se ne occupa il PHP — ma senza questo il punto e virgola di coda potevano
   comunque finire da soli.

   `overflow-wrap` e' la rete per l'indirizzo del link su schermi stretti:
   senza, una parola lunga sborda invece di spezzarsi (WCAG 1.4.10). */
.bib-terms label {
	text-wrap: pretty;
	overflow-wrap: anywhere;
	line-height: 1.45;
}
.bib-terms input[type="checkbox"] {
	/* Target più ampio (WCAG 2.5.8) e colore ad alto contrasto (1.4.11). */
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 2px;
	flex: 0 0 auto;
	accent-color: var(--color-primary, #06c);
}

/* =====================================================================
   Moduli di feedback (form pubblico)  —  WCAG 2.2 AA
   ===================================================================== */
.bib-feedback { max-width: 720px; }
.bib-feedback__title { margin: 0 0 12px; }
.bib-feedback__intro { margin: 0 0 20px; }

.bib-feedback__closed {
	padding: 12px 16px;
	background: var(--neutral-100, #f3f4f6);
	border-radius: var(--radius-md, 8px);
	color: var(--neutral-700, #374151);
}

.bib-feedback__msg {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--radius-md, 8px);
	border-left: 4px solid;
	font-weight: 600;
}
.bib-feedback__msg--success { background: #e5f4ee; border-color: #0a6b47; color: #0a5238; }
.bib-feedback__msg--danger { background: #fbe9ec; border-color: #b12239; color: #8a1a2c; }

.bib-feedback-form { display: flex; flex-direction: column; gap: 20px; }
.bib-feedback-form .field { display: flex; flex-direction: column; gap: 4px; }

/* Focus visibile robusto (2.4.7). */
.bib-feedback-form :focus-visible {
	outline: 3px solid var(--color-primary, #06c);
	outline-offset: 2px;
}

/* «I tuoi dati»: gruppo semantico senza box (come nel form prenotazioni). */
.bib-fb-identity { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bib-fb-identity__legend { padding: 0; margin: 0 0 4px; font-size: var(--text-md, 1rem); font-weight: 700; color: var(--text-strong, #111827); }

/* Ogni domanda è un blocco; i gruppi (scala/scelta) sono fieldset senza box. */
.bib-fb-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.bib-fb-group__legend { padding: 0; margin: 0 0 8px; font-weight: 600; color: var(--text-strong, #111827); }

/* Scala di valutazione: pillole numerate (target ≥ 44px, 2.5.8). */
.bib-fb-scale { display: flex; flex-wrap: wrap; gap: 8px; }
.bib-fb-scale__opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 6px 14px;
	border: 1px solid var(--neutral-500, #6b7280);
	border-radius: var(--radius-md, 8px);
	cursor: pointer;
	background: #fff;
}
.bib-fb-scale__opt input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-primary, #06c); }
.bib-fb-scale__opt:has(input:checked) { border-color: var(--color-primary, #06c); background: var(--blue-50, #eff6ff); font-weight: 700; }
.bib-fb-scale__ends { display: flex; justify-content: space-between; gap: 12px; margin: 6px 2px 0; font-size: var(--text-sm, 0.875rem); color: var(--neutral-600, #4b5563); }

/* Scelta singola / multipla: righe con target ampio. */
.bib-fb-choices { display: flex; flex-direction: column; gap: 6px; }
.bib-fb-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 40px;
	padding: 8px 10px;
	border: 1px solid var(--neutral-300, #d1d5db);
	border-radius: var(--radius-md, 8px);
	cursor: pointer;
}
.bib-fb-choice input { margin-top: 2px; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; accent-color: var(--color-primary, #06c); }
.bib-fb-choice:has(input:checked) { border-color: var(--color-primary, #06c); background: var(--blue-50, #eff6ff); }

.bib-feedback-form__actions { margin-top: 4px; }

/* Testo per i soli screen reader: usato per dire «(obbligatorio)» sui gruppi
   di scelte, dove l'asterisco è decorativo e `required` sulle singole caselle
   non si può usare senza obbligarle tutte. */
.bib-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Consenso privacy nel questionario di feedback. */
.bib-fb-consent { margin: 24px 0 8px; }
.bib-fb-consent label { display: flex; gap: 10px; align-items: flex-start; }
.bib-fb-consent input { margin-top: 4px; width: 24px; height: 24px; flex: 0 0 auto; }
.bib-fb-consent__nota { margin: 6px 0 0 34px; font-size: 0.9375rem; color: var(--color-muted, #555); }

/* Spiegazioni brevi accanto alle azioni sulla prenotazione. */
.bib-manage-section__aiuto,
.bib-mine__aiuto {
	margin: 0 0 12px;
	font-size: 0.9375rem;
	color: var(--color-muted, #555);
}
/* Nell'area riservata la frase sta nella colonna del testo (`.my-events__main`,
   che è `flex: 1 1 240px; min-width: 0`) e non fra i pulsanti: dentro la riga
   dei comandi, che non si stringe, una frase intera trascinava la pagina a
   625px su schermo da 320. */
.my-events__main .bib-mine__aiuto { margin: 6px 0 0; }


/* --- Card «Le mie prenotazioni» --------------------------------------- */

/* La pillola dello stato prendeva tutta la riga anche con due parole dentro.
   `.event-meta` e' una colonna flex, e ogni figlio si allarga per «stretch»:
   il riquadro colorato arrivava fino al bordo della card, come una fascia.
   Allineando i figli all'inizio, ognuno resta largo quanto il suo contenuto. */
.my-events__item .event-meta {
	align-items: flex-start;
}

/* La data sopra il titolo: e' il dato con cui si cerca la propria
   prenotazione in un elenco, e leggerla prima del nome dell'evento fa
   scorrere l'occhio piu' in fretta. */
.my-events__quando {
	margin: 0 0 2px;
	font-size: var(--text-sm, 0.875rem);
	color: var(--text-muted, #5b6472);
}

/* Il riquadro della data: il mese aveva una fascia piena del colore dell'area,
   che in una lista di card diventava una fila di bandierine colorate e tirava
   l'attenzione su un dato secondario. Ora il riquadro e' uno solo, con il
   mese in piccolo sotto il giorno. Il contorno resta a fare da contenitore. */
.my-events__item .date-chip__m {
	background: transparent;
	color: var(--text-muted, #5b6472);
	padding: 0 0 3px;
}
.my-events__item .date-chip {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.my-events__item .date-chip__d {
	line-height: 1.1;
}