/* ====== Birraioli Search Widget ====== */

.brio-search {
  --brio-green: #33cc00;
  --brio-green-dark: #29a600;
  --brio-text: #0F1A3D;
  --brio-muted: #676767;
  --brio-bg: #F4F6FB;
  --brio-bg-light: #FAFBFD;
  --brio-border: #E1E5EE;
  --brio-shadow: 0 12px 32px rgba(15, 26, 61, 0.10);
  --brio-radius: 14px;
  --brio-radius-sm: 10px;
  --brio-warning: #c83838;

  position: relative;
  background: #fff;
  border-radius: var(--brio-radius);
  box-shadow: var(--brio-shadow);
  padding: 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--brio-text);
  max-width: 100%;
  box-sizing: border-box;
}

/* Field row */
.brio-search__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
}

.brio-search__field {
  flex: 1 1 0;
  min-width: 0;
  background: var(--brio-bg);
  border: 1px solid transparent;
  border-radius: var(--brio-radius-sm);
  padding: 12px 16px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  font: inherit;
  color: inherit;
}

.brio-search__field:hover {
  background: #EEF1F8;
}

.brio-search__field.is-open {
  background: #fff;
  border-color: var(--brio-green);
  box-shadow: 0 0 0 2px rgba(51, 204, 0, 0.12);
}

.brio-search__label {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--brio-muted);
  margin-bottom: 2px;
  line-height: 1.2;
  font-weight: 400;
}

.brio-search__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--brio-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brio-search__value.is-placeholder {
  color: var(--brio-muted);
  font-weight: 400;
}

/* Cerca button */
.brio-search__cta {
  flex: 0 0 auto;
  background: var(--brio-green);
  color: #fff;
  border: none;
  border-radius: var(--brio-radius-sm);
  padding: 0 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-height: 56px;
  transition: background 120ms ease, transform 120ms ease;
}
.brio-search__cta:hover { background: var(--brio-green-dark); }
.brio-search__cta:active { transform: translateY(1px); }
.brio-search__cta svg { width: 18px; height: 18px; }

/* ===== Popover (dropdown) ===== */
.brio-popover {
  position: fixed;
  background: #fff;
  border-radius: var(--brio-radius);
  box-shadow: 0 16px 48px rgba(15, 26, 61, 0.18);
  z-index: 99999;
  padding: 18px;
  min-width: 320px;
  display: none;
  box-sizing: border-box;
}
.brio-popover.is-open { display: block; }

/* ===== Periodo popover ===== */
.brio-popover--periodo {
  width: 540px;
  max-width: 90vw;
}
.brio-popover--date {
  width: 620px;
  max-width: 92vw;
}

.brio-tabs-switch {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: var(--brio-bg);
  padding: 4px;
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto 18px;
}
.brio-tabs-switch__btn {
  border: none;
  background: transparent;
  padding: 7px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--brio-text);
  cursor: pointer;
}
.brio-tabs-switch__btn.is-active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  font-weight: 600;
}

.brio-periodo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.brio-periodo__col-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brio-muted);
  font-weight: 700;
  margin-bottom: 10px;
}
.brio-periodo__list { list-style: none; padding: 0; margin: 0; }
.brio-periodo__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--brio-text);
  position: relative;
}
.brio-periodo__item:hover { background: var(--brio-bg); }
.brio-periodo__item.is-selected {
  background: var(--brio-bg);
  font-weight: 600;
}
.brio-periodo__item-icon {
	    background: #fff;
    border-radius: 5px;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    color: hsl(var(--color-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -5px;
}
.brio-periodo__item-text { flex: 1; min-width: 0; }
.brio-periodo__item-sub {
  display: block;
  font-size: 11.5px;
  color: var(--brio-muted);
  font-weight: 400;
  margin-top: 1px;
}
.brio-periodo__item-check {
  width: 16px; height: 16px;
  color: var(--brio-green);
  flex: 0 0 16px;
  opacity: 0;
}
.brio-periodo__item.is-selected .brio-periodo__item-check { opacity: 1; }

.brio-periodo__months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

/* ===== Date popover (calendar) ===== */
.brio-date {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  position: relative;
}
.brio-date__nav {
  position: absolute;
  top: 4px;
  background: transparent;
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--brio-green);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.brio-date__nav:hover { background: var(--brio-bg); }
.brio-date__nav--prev { left: 0; }
.brio-date__nav--next { right: 0; }
.brio-date__nav svg { width: 18px; height: 18px; }

.brio-cal__title {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--brio-text);
}
.brio-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 12.5px;
}
.brio-cal__dow {
  text-align: center;
  font-size: 11px;
  color: var(--brio-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0 8px;
  font-weight: 500;
}
.brio-cal__day {
  text-align: center;
  padding: 8px 0;
  cursor: pointer;
  border-radius: 50%;
  font-weight: 500;
  color: var(--brio-text);
  position: relative;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brio-cal__day--empty { cursor: default; }
.brio-cal__day--muted { color: #bbb; cursor: default; }
.brio-cal__day:not(.brio-cal__day--empty):not(.brio-cal__day--muted):hover {
  background: var(--brio-bg);
}
.brio-cal__day--range {
  background: rgba(51, 204, 0, 0.10);
  border-radius: 0;
  color: var(--brio-green-dark);
  font-weight: 600;
}
.brio-cal__day--start,
.brio-cal__day--end {
  background: var(--brio-green);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
}

/* ===== Destinazione popover ===== */
.brio-popover--destinazione {
  width: 760px;
  max-width: 95vw;
}
.brio-destinazione {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.brio-destinazione__item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  align-items: flex-start;
  position: relative;
}
.brio-destinazione__item:hover { background: var(--brio-bg); }
.brio-destinazione__item.is-selected {
  background: var(--brio-bg);
  border: 1px solid var(--brio-border);
}
.brio-destinazione__item.is-past { opacity: 0.45; }
.brio-destinazione__icon {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  color: var(--brio-text);
  margin-top: 2px;
}
.brio-destinazione__main { flex: 1; min-width: 0; }
.brio-destinazione__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--brio-text);
  margin-bottom: 1px;
}
.brio-destinazione__title em {
  font-style: normal;
  color: var(--brio-text);
}
.brio-destinazione__dates {
  font-size: 12.5px;
  color: var(--brio-muted);
  margin-bottom: 6px;
}
.brio-destinazione__desc {
  font-size: 12px;
  color: var(--brio-muted);
  line-height: 1.4;
}
.brio-destinazione__check {
  position: absolute;
  top: 6px;
  right: 12px;
  width: 16px; height: 16px;
  color: var(--brio-green);
  opacity: 0;
}
.brio-destinazione__item.is-selected .brio-destinazione__check { opacity: 1; }

/* ===== Partenza popover ===== */
.brio-popover--partenza {
  width: 340px;
  max-width: 90vw;
  padding-top: 10px;
}
/* Campo ricerca full-bleed in testa al popover (stesso stile della scheda evento) */
.brio-partenza__searchwrap {
  margin: 0 0 6px;
  border-bottom: 1px solid #e5e5e5;
}
.brio-popover .brio-partenza__input {
  width: 100%;
  height: 50px !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 15px 15px 0 0;
  margin: 0 !important;
  padding: 4px 18px !important;
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--brio-text);
  line-height: 1.2 !important;
}
.brio-partenza__input::placeholder { color: var(--brio-muted); }
.brio-partenza__list {
  list-style: none; padding: 0; margin: 0;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.brio-partenza__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid transparent; /* stesso ingombro dell'item selezionato (che ha bordo) */
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--brio-text);
  position: relative;
}
.brio-partenza__item:hover { background: var(--brio-bg); }
.brio-partenza__item.is-selected {
  background: var(--brio-bg);
  border: 1px solid var(--brio-border);
  font-weight: 600;
}
.brio-partenza__icon {
  flex: 0 0 18px;
  width: 18px; height: 18px;
  color: var(--brio-text);
}
.brio-partenza__main { flex: 1; min-width: 0; }
.brio-partenza__group {
  list-style: none;
  padding: 13px 12px 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brio-muted);
}
.brio-partenza__title { line-height: 1.2; }
.brio-partenza__title em { font-style: normal; font-weight: 700; }
.brio-partenza__sub {
  display: block;
  font-size: 11.5px;
  color: var(--brio-muted);
  font-weight: 400;
}
.brio-partenza__check {
  width: 14px; height: 14px;
  color: var(--brio-green);
  flex: 0 0 14px;
  opacity: 0;
}
.brio-partenza__item.is-selected .brio-partenza__check { opacity: 1; }

/* ===== Viaggiatori popover ===== */
.brio-popover--viaggiatori {
  width: 360px;
  max-width: 90vw;
}
.brio-popover--notti {
  width: 300px;
  max-width: 90vw;
}
/* Notti/Orario riusano le classi della lista citta': qui pero' non ci sono
   gruppi-regione, quindi niente indent ne' padding extra della lista. */
.brio-popover--notti .brio-partenza__list,
.brio-popover--orario .brio-partenza__list { padding: 0; }
.brio-popover--notti .brio-partenza__item,
.brio-popover--orario .brio-partenza__item { margin: 0; }
.brio-pax__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
}
.brio-pax__row + .brio-pax__row {
  border-top: 1px solid var(--brio-border);
}
.brio-pax__icon {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  color: var(--brio-text);
}
.brio-pax__main { flex: 1; min-width: 0; }
.brio-pax__title { font-size: 14px; font-weight: 600; color: var(--brio-text); }
.brio-pax__sub { font-size: 11.5px; color: var(--brio-muted); margin-top: 1px; }
.brio-stepper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brio-stepper__btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--brio-border);
  background: #fff;
  color: var(--brio-text);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-weight: 400;
}
.brio-stepper__btn:hover:not(:disabled) {
  border-color: var(--brio-green);
  color: var(--brio-green);
}
.brio-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.brio-stepper__val { min-width: 18px; text-align: center; font-weight: 600; font-size: 14px; }

.brio-pax__warning {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(200, 56, 56, 0.06);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--brio-warning);
  line-height: 1.4;
}

/* ===== Responsive ===== */
@media (max-width: 880px) {
  .brio-search { padding: 8px; }
  .brio-search__row {
    flex-wrap: wrap;
  }
  .brio-search__field {
    flex: 1 1 calc(50% - 4px);
  }
  .brio-search__cta {
    flex: 1 1 100%;
    margin-top: 6px;
    justify-content: center;
    padding: 14px;
  }
}
@media (max-width: 540px) {
  .brio-search__field { flex: 1 1 100%; }
  .brio-popover { left: 4vw; right: 4vw; min-width: 0; width: auto !important; }
  .brio-periodo, .brio-date, .brio-destinazione { grid-template-columns: 1fr; }
}

/* Required-field error state */
.brio-search__field.is-error {
  border-color: #c83838 !important;
  box-shadow: 0 0 0 2px rgba(200, 56, 56, 0.12) !important;
}

/* Disabled item (mai prenotabile: eventi passati) — non cliccabile */
.brio-destinazione__item.is-disabled,
.brio-partenza__item.is-disabled,
.brio-periodo__item.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
/* Dimmed item (incompatibile con la selezione corrente) — resta cliccabile:
   l'ultimo click vince e gli altri campi si adattano */
.brio-destinazione__item.is-dimmed,
.brio-partenza__item.is-dimmed,
.brio-periodo__item.is-dimmed {
  opacity: 0.4;
  cursor: pointer;
}
.brio-destinazione__item.is-dimmed:hover,
.brio-partenza__item.is-dimmed:hover,
.brio-periodo__item.is-dimmed:hover {
  opacity: 0.75;
}

/* Field clear (X) button */
.brio-search__field { position: relative; padding-right: 36px; }
.brio-search__clear {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  color: var(--brio-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.brio-search__clear:hover {
  background: rgba(15, 26, 61, 0.08);
  color: var(--brio-text);
}
.brio-search__clear svg { width: 12px; height: 12px; display: block; }
.brio-search__field.is-open .brio-search__clear,
.brio-search__field:hover .brio-search__clear { color: var(--brio-text); }

/* ===== Mobile: popover come bottom-sheet =====
   Su viewport stretti i popover (Periodo/Destinazione/Date) sfondavano il
   viewport in basso senza scroll. Ancorati in basso, larghezza piena,
   max-height con scroll interno. !important per vincere il posizionamento
   inline calcolato dal JS (positionPopover). */
@media (max-width: 849px) {
  .brio-popover {
    /* popup centrato nello schermo */
    left: 10px !important;
    right: 10px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(15, 26, 61, 0.45);
  }
  /* Griglie interne: una colonna */
  .brio-periodo { grid-template-columns: 1fr; gap: 18px; }
  .brio-periodo div:first-child { padding-right: 0; }
  .brio-destinazione { grid-template-columns: 1fr; }
  .brio-date { grid-template-columns: 1fr; gap: 18px; }
  /* Un mese alla volta: il secondo calendario è nascosto, le frecce navigano di 1 mese */
  .brio-date > div:nth-of-type(2) { display: none; }
  /* La lista città scorre col foglio, niente doppio scroll */
  .brio-partenza__list { max-height: none; }
  /* Voci più comode al tocco */
  .brio-partenza__item, .brio-periodo__item, .brio-destinazione__item { padding-top: 13px; padding-bottom: 13px; }
}

/* Scroll pagina bloccato con popup aperto (mobile) */
body.brio-lock-scroll { overflow: hidden !important; touch-action: none; }
body.brio-lock-scroll .brio-popover { touch-action: auto; }
@media (max-width: 849px) {
  /* iOS: niente auto-zoom sul focus (serve font >= 16px) */
  .brio-popover .brio-partenza__input { font-size: 16px !important; }
}

/* Footer "Chiudi" dei popover (stesso design dei dropdown della scheda evento).
   Sticky SOLO su mobile: su desktop il popover non scrolla e position:sticky
   si aggancerebbe al viewport, spostando il footer in modo incoerente. */
.brio-popover__close {
  background: #fff;
  z-index: 5;
  display: block;
  box-sizing: border-box;
  width: calc(100% + 36px);
  max-width: none;
  margin: 14px -18px -18px;
  padding: 12px 18px;
  border: 0;
  border-top: 1px solid #eef0f6;
  border-radius: 0 0 14px 14px;
  text-align: right;
  color: #8a90a2;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.brio-popover__close:hover { color: #0F1A3D; }
@media (max-width: 849px) {
  /* Su mobile il popup scrolla: footer sticky. Il padding-bottom del popover va
     azzerato (lo sticky non puo entrare nel padding e coprirebbe il contenuto);
     e il footer chiude il popup senza margine negativo in basso. */
  .brio-popover { padding-bottom: 0 !important; }
  .brio-popover__close { position: sticky; bottom: 0; margin-bottom: 0; }
}
/* Compensazioni per gli override di style.css sui singoli popover.
   Periodo: il padding-bottom:40px (pre-footer) va riportato a 18px, altrimenti
   il footer sticky su mobile si solleva sopra il contenuto per compensarlo.
   Partenza: ha padding:0, il footer non deve usare i margini negativi. */
.brio-popover.brio-popover--periodo { padding-bottom: 18px; }
.brio-popover--partenza .brio-popover__close { width: 100%; margin: 8px 0 0; }

/* ===== Mobile: overlay scuro dietro ai popup aperti =====
   Agganciato a body.brio-lock-scroll (aggiunta all'apertura di popover widget
   e dropdown del selettore evento). Sotto ai popup (z 99999) e alla X flottante. */
@media (max-width: 849px) {
  body.brio-lock-scroll::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 26, 61, 0.5);
    z-index: 99990;
    animation: brioOverlayIn 160ms ease;
  }
  @keyframes brioOverlayIn { from { opacity: 0; } to { opacity: 1; } }
}