/**
 * Ricerca frontend ES — stile condiviso (Slice D).
 *
 * Coerente con il tema (usa le variabili Bootstrap `--bs-*`, così eredita colori e bordi
 * di BsItalia/Canvas). Copre: barra di ricerca, pannello facet, briciole, card risultato
 * nelle due viste (griglia/righe) e le tre disposizioni (alto/sinistra/destra).
 */

.es {
  --es-radius: 0.75rem;
  --es-gap: 1.5rem;
  --es-border: 1px solid var(--bs-border-color, #dee2e6);
  --es-muted: var(--bs-secondary-color, #6c757d);
}

/* ── Barra di ricerca ─────────────────────────────────────────────────────── */
.es-searchbar {
  position: relative;
  margin-bottom: 1.25rem;
}

.es-searchbar .form-control {
  border-radius: 999px;
  padding-left: 2.5rem;
  height: 2.75rem;
  font-size: 0.95rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: var(--es-border);
}

/* Focus: UN SOLO anello pulito. Specificità `#es-search` per battere il tema (su alcune
   build di BsItalia il focus forza un bordo scuro → sembrava un «doppio bordo»). Il bordo
   resta quello chiaro di riposo, si aggiunge solo un anello morbido, nessun outline. */
#es-search .es-searchbar .form-control:focus,
#es-search .es-searchbar .form-control:focus-visible {
  border-color: var(--bs-border-color, #ced4da);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 13 110 253), 0.28);
  outline: none;
}

.es-searchbar__icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  color: var(--es-muted);
  fill: currentColor;
  pointer-events: none;
  z-index: 3;
}

.es-searchbar__icon .es-ico {
  width: 1.05rem;
  height: 1.05rem;
}

/* ── Testata: riepilogo + strumenti (ambiti, vista) ───────────────────────── */
.es-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: var(--es-border);
}

.es-summary {
  margin: 0;
  font-weight: 600;
  color: var(--bs-body-color);
}

/* Commutatore vista: due bottoni SEPARATI (con gap), senza bordo scuro; icone con
   dimensione esplicita (altrimenti gli SVG collassano e restano «incollati»). */
.es-views {
  display: inline-flex;
  gap: 0.4rem;
}

.es-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  /* Bordo CHIARO (non il btn-outline scuro del tema): dà definizione al controllo
     rispettando il contrasto UI 1.4.11. */
  border: 1px solid var(--bs-border-color, #ced4da);
  border-radius: 0.5rem;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-secondary-color, #565e64);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.es-view-btn:hover {
  background: color-mix(in srgb, var(--bs-primary, #06c) 14%, transparent);
  color: var(--bs-primary, #06c);
}

.es-view-btn.active {
  background: var(--bs-primary, #06c);
  border-color: var(--bs-primary, #06c);
  color: #fff;
}

.es-view-btn .icon {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
}

.es-scopes .btn {
  border-radius: 999px;
}

/* ── Briciole dei filtri attivi (sempre in alto) ──────────────────────────── */
.es-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Briciole DISCRETE: pillola neutra (non il primario acceso), così non rubano l'occhio ai
   risultati; il colore d'accento resta per l'hover del bottone di rimozione. */
.es-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.3rem 0.22rem 0.7rem;
  border-radius: 999px;
  background: var(--bs-tertiary-bg, #f1f3f5);
  color: var(--bs-body-color, #343a40);
  font-size: 0.8rem;
  line-height: 1.2;
  border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 55%, transparent);
}

.es-chip__label {
  white-space: nowrap;
}

.es-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.es-chip__remove:hover {
  background: var(--bs-danger, #dc3545);
  color: #fff;
}

.es-chip--clear {
  background: transparent;
  border: 0;
  color: var(--es-muted);
  text-decoration: underline;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  font-size: 0.875rem;
}

.es-chip--clear:hover {
  color: var(--bs-danger, #dc3545);
}

/* ── Disposizione facet ↔ risultati ───────────────────────────────────────── */
.es-layout {
  display: flex;
  gap: var(--es-gap);
  align-items: flex-start;
}

.es-layout__facets {
  flex: 0 0 280px;
  max-width: 280px;
}

.es-layout__main {
  flex: 1 1 auto;
  min-width: 0;
}

.es--sinistra .es-layout { flex-direction: row; }
.es--destra .es-layout { flex-direction: row-reverse; }

/* `align-items: flex-start` serve alle disposizioni in RIGA, dove tiene la colonna dei
   filtri attaccata in alto invece di stirarla per tutta l'altezza dei risultati. In
   direzione COLONNA, però, quell'asse è quello **orizzontale**: lasciato a `flex-start`
   impedisce ai figli di allargarsi, e la colonna dei risultati collassa alla larghezza del
   proprio contenuto — misurati 469px su 1296 disponibili, con due terzi di pagina vuoti a
   destra. Il pannello facet non lo mostrava solo perché ha un `width: 100%` esplicito. */
.es--alto .es-layout {
  flex-direction: column;
  align-items: stretch;
}

.es--alto .es-layout__facets {
  flex-basis: auto;
  max-width: none;
  width: 100%;
}

.es--alto .es-facets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--es-gap);
}

.es--alto .es-facet {
  flex: 1 1 200px;
  border-bottom: 0;
  padding-bottom: 0;
}

/* Anche gli AMBITI si distendono, quando le facet stanno in alto.
   Restavano incolonnati come nella barra laterale — otto voci in una striscia stretta con
   tutta la larghezza della pagina vuota a fianco, e i risultati spinti molto più in basso.
   Le voci diventano quindi in linea e vanno a capo da sole.
   Si agisce sulle OPZIONI e non sul `fieldset`: il `legend` ha una resa speciale e dentro un
   contenitore flex si comporta in modo diverso da browser a browser — lasciarlo blocco è più
   prevedibile che provare a governarlo. */
.es--alto .es-scopes .es-facet__option {
  display: inline-flex;
  margin-right: var(--es-gap);
}

@media (max-width: 767.98px) {
  /* Stesso motivo di `.es--alto`: sotto i 768px tutte le disposizioni diventano una
     colonna, quindi anche qui i figli devono potersi allargare. */
  .es-layout { flex-direction: column !important; align-items: stretch; }
  .es-layout__facets { flex-basis: auto; max-width: none; width: 100%; }
}

/* ── Pannello facet ───────────────────────────────────────────────────────── */
/* Le voci delle facet usano misure in PX (non rem): alcuni temi frontend — es. lympha —
   hanno un font-base ingrandito che gonfia i rem, rendendo il pannello filtri troppo grosso.
   In px la scala del pannello è compatta e coerente a prescindere dal tema (lo zoom del
   browser continua a funzionare). */
.es-facets__heading {
  font-size: 15px;
  font-weight: 700;
  margin: 0.25rem 0 0.6rem;
}

.es-facets {
  border: var(--es-border);
  border-radius: var(--es-radius);
  padding: 1rem;
  background: var(--bs-body-bg, #fff);
}

.es-facet {
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: var(--es-border);
}

.es-facet:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Titolo facet: maiuscoletto ma ad ALTO CONTRASTO (WCAG 2.1 AA: testo scuro pieno,
   il contrasto è dato dal colore, non dal solo peso). */
.es-facet__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-emphasis-color, #1a1d20);
  margin-bottom: 0.4rem;
}

.es-facet__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.12rem 0;
}

.es-facet__option .form-check-input {
  margin-top: 0;
  cursor: pointer;
}

/* Bordo dei checkbox in GRIGIO da spenti (spuntati: riempimento del tema). Le nostre righe
   non usano `.form-check`, quindi resta la checkbox NATIVA e questo bordo è quello visibile.
   `#868e96` = grigio a contrasto ≥3:1 sul bianco (WCAG 1.4.11 componenti UI): grigio ma
   percepibile, non il grigio troppo chiaro che sparirebbe. Specificità `#es-search` per il tema. */
#es-search .form-check-input:not(:checked):not(:indeterminate) {
  border-color: #868e96;
}

/* Etichetta opzione: PESO NORMALE (il tema forza il grassetto sui label → !important),
   compatta e con testo che va a capo dentro la colonna. */
.es-facet__optlabel {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  cursor: pointer;
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--bs-body-color, #212529);
  min-width: 0;
}

.es-facet__optname {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Peso NORMALE forzato con specificità alta (via #es-search): il tema imponeva il
   grassetto sui label anche con !important, qui lo si batte per specificità. */
#es-search .es-facet__optlabel,
#es-search .es-facet__optname {
  font-weight: 400 !important;
}

/* Le voci degli ambiti condividono la struttura delle opzioni facet
   (`.es-facet__option`/`.es-facet__optlabel`): taglia e peso arrivano da lì. */
.es-scopes .es-facet__option {
  margin-bottom: 0.15rem;
}

/* Conteggio: nettamente PIÙ PICCOLO del testo opzione (10px) — è un dato secondario, non deve
   competere col nome della voce. Colore `#6c757d`: grigio, ma a contrasto testo ≥4.5:1 sul
   bianco (WCAG 1.4.3), quindi leggibile pur essendo piccolo. */
.es-facet__count {
  font-size: 12px;
  font-weight: 400;
  color: #6c757d;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Range data: input impilati a piena larghezza, così non sforano la colonna facet. */
/* «Filtri più popolari»: gruppo evidenziato in cima al pannello. */
.es-facet--popular {
  background: color-mix(in srgb, var(--bs-primary, #06c) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--bs-primary, #06c) 18%, transparent);
  border-radius: 0.5rem;
  padding: 0.75rem 0.85rem;
  margin-bottom: 1rem;
}

.es-facet--popular .es-facet__title {
  color: var(--bs-primary, #06c);
  margin-bottom: 0.5rem;
}

/* «Mostra tutte (N) / Mostra meno»: link discreto sotto le voci della facet. */
.es-facet__more {
  border: 0;
  background: none;
  padding: 0.25rem 0;
  margin-top: 0.15rem;
  /* Un filo più piccolo delle voci: è un'azione secondaria, resta discreto. */
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-primary, #06c);
  cursor: pointer;
}

.es-facet__more:hover {
  text-decoration: underline;
}

.es-facet__daterange {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.es-facet__daterange input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* ── Risultati ────────────────────────────────────────────────────────────── */
.es-results--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* Card per riga (dalla config admin): `auto` = riempimento automatico (comportamento
   storico, regola base sopra); 2/3/4 = numero fisso con degrado responsive. */
.es--cols-2 .es-results--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.es--cols-3 .es-results--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.es--cols-4 .es-results--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
  .es--cols-3 .es-results--grid,
  .es--cols-4 .es-results--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .es-results--grid { grid-template-columns: 1fr; }
}

.es-results--list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.es-hit {
  display: flex;
  overflow: hidden;
  /* Bordo TENUE + ombra morbida: la card si stacca dallo sfondo senza il contorno marcato
     (che risultava troppo pesante nell'insieme). */
  border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 50%, transparent);
  border-radius: var(--es-radius);
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.es-hit:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}

.es-hit__image {
  display: block;
  width: 100%;
  object-fit: cover;
  background: var(--bs-tertiary-bg, #f1f3f5);
}

.es-hit__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.85rem 1rem;
  min-width: 0;
}

.es-hit__title {
  font-size: 0.925rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  color: var(--bs-heading-color, inherit);
  overflow-wrap: anywhere;
  /* Due righe fisse: card di altezza uniforme. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.es-hit__title em {
  font-style: normal;
  background: color-mix(in srgb, var(--bs-warning, #ffc107) 45%, transparent);
  border-radius: 0.15rem;
  padding: 0 0.1rem;
}

/* Griglia: card verticale uguale per tutte (immagine 16:10 + titolo 2 righe). */
.es-results--grid .es-hit {
  flex-direction: column;
  height: 100%;
}

.es-results--grid .es-hit__image {
  aspect-ratio: 16 / 10;
  height: auto;
}

.es-results--grid .es-hit__body {
  flex: 1 1 auto;
}

/* Righe: card orizzontale, thumbnail quadrata a sinistra, altezza uniforme. */
.es-results--list .es-hit {
  flex-direction: row;
  align-items: stretch;
}

.es-results--list .es-hit__image-holder {
  flex: 0 0 140px;
  width: 140px;
}

.es-results--list .es-hit__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

@media (max-width: 575.98px) {
  .es-results--list .es-hit__image-holder { flex-basis: 110px; width: 110px; }
}

/* ── Slot extra: descrizione breve, categoria, data ───────────────────────────
   In GRIGLIA la card resta uniforme (immagine + titolo): questi slot sono nascosti.
   In RIGHE si mostrano, tranne quelli disattivati in admin (classi `es--list-no-*` sulla
   radice). Il titolo è sempre visibile. */
.es-hit__excerpt,
.es-hit__meta { display: none; }

.es-results--list .es-hit__body {
  justify-content: center;
  gap: 0.3rem;
}

.es-results--list .es-hit__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--bs-secondary-color, #565e64);
}

.es-results--list .es-hit__excerpt em {
  font-style: normal;
  font-weight: 600;
  background: color-mix(in srgb, var(--bs-warning, #ffc107) 40%, transparent);
  border-radius: 0.15rem;
  padding: 0 0.1rem;
}

.es-results--list .es-hit__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
}

.es-hit__cat {
  font-weight: 600;
  color: var(--bs-primary, #06c);
}

/* Campi disattivati in admin: nascosti nella vista a righe (il titolo non è tra questi). */
.es--list-no-image .es-results--list .es-hit__image-holder { display: none; }
.es--list-no-excerpt .es-results--list .es-hit__excerpt { display: none; }
.es--list-no-category .es-results--list .es-hit__cat { display: none; }
.es--list-no-date .es-results--list .es-hit__date { display: none; }

.es-results--grid .es-empty,
.es-empty {
  grid-column: 1 / -1;
}

.es-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--es-muted);
}

.es-empty__icon {
  width: 3rem;
  height: 3rem;
  opacity: 0.4;
  margin-bottom: 0.75rem;
}

/* ── Stato di caricamento: onda di luce (stile Booking) ──────────────────────
   Niente velo scuro: i risultati restano leggibili e un'onda di luce li attraversa
   per comunicare l'aggiornamento in corso. */
.es-loading .es-layout__main {
  position: relative;
  pointer-events: none;
}

.es-loading .es-layout__main::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: var(--es-radius);
  /* Banda di luce (~40% di larghezza) che parte fuori a sinistra e scorre fino a fuori a
     destra a velocità costante (linear), così attraversa TUTTA l'area, non solo un bordo. */
  background-image: linear-gradient(
    100deg,
    transparent 0%,
    rgba(var(--bs-primary-rgb, 13 110 253), 0.06) 30%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(var(--bs-primary-rgb, 13 110 253), 0.06) 70%,
    transparent 100%
  );
  background-size: 45% 100%;
  background-repeat: no-repeat;
  animation: es-wave 1.1s linear infinite;
}

@keyframes es-wave {
  from { background-position: -50% 0; }
  to { background-position: 150% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .es-loading .es-layout__main::after {
    animation: none;
    background-image: none;
    background-color: rgba(var(--bs-primary-rgb, 13 110 253), 0.06);
  }
}

.es-hint {
  color: var(--es-muted);
  font-size: 0.9rem;
}

/* ── Come cercare: la convenzione delle virgolette (Q4, 11-08-2026) ─────────
   Chiuso per difetto: chi sa gia' cercare non deve leggerlo, chi non trova
   quello che cerca lo apre. `<details>` nativo, quindi funziona senza JS e la
   tastiera lo raggiunge da sola. */
.es-searchtip {
  margin: 0.35rem 0 1rem;
  font-size: 0.85rem;
  color: var(--es-muted);
}

.es-searchtip__summary {
  cursor: pointer;
  user-select: none;
}

.es-searchtip__body {
  margin-top: 0.4rem;
  padding-left: 0.75rem;
  border-left: var(--es-border);
  line-height: 1.45;
}

/* ── Paginazione ──────────────────────────────────────────────────────────── */
.es-pagination {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

/* ── Scorrimento infinito ─────────────────────────────────────────────────── */
.es-sentinel {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
  min-height: 1px;
}

.es-spinner {
  width: 1.6rem;
  height: 1.6rem;
  border: 3px solid var(--bs-border-color, #dee2e6);
  border-top-color: var(--bs-primary, #06c);
  border-radius: 50%;
  animation: es-spin 0.7s linear infinite;
}

@keyframes es-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .es-spinner { animation-duration: 2s; }
}

/* ── Accessibilità (WCAG 2.1 AA) ──────────────────────────────────────────────
   Focus SEMPRE visibile su ogni controllo interattivo (2.4.7), con offset per non
   essere coperto dallo sfondo. */
/* Outline SOLO per i controlli custom che non hanno l'anello del tema. I controlli nativi
   (input, select, checkbox) usano l'anello del tema/Bootstrap: aggiungere un outline li
   raddoppierebbe (il «doppio bordo»). */
.es-view-btn:focus-visible,
.es-chip__remove:focus-visible,
.es-chip--clear:focus-visible,
.es-facet__more:focus-visible,
.es-pagination .page-link:focus-visible,
.es-hit:focus-visible {
  outline: 2px solid var(--bs-primary, #06c);
  outline-offset: 2px;
}

/* Card risultato: la card è un link; focus ben visibile sull'intera card. */
.es-hit:focus-visible {
  outline-offset: -2px;
}

/* Rispetto delle preferenze di riduzione del movimento (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .es-hit,
  .es-view-btn,
  .es-loading .es-layout__main {
    transition: none;
  }

  .es-hit:hover {
    transform: none;
  }
}