@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap');

:root{
  --bg: #f6f8fc;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: rgba(15, 23, 42, .72);
  --border: rgba(15, 23, 42, .12);
  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --shadow-sm: 0 6px 16px rgba(15, 23, 42, .10);
  --blue: #0b5cff;
  --blue-2: #1a7dff;
  --teal: #00b3a4;
  /** Wordmark header accanto al logo: Trip / Dealz */
  --brand-word-trip: #0b7a73;
  --brand-word-dealz: #6ec9c0;
  --purple: #6c5ce7;
  --orange: #ff8a4b;
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --tap: 44px;
  --header-h: 56px;
  --maxw: 1120px;
  --sticky-top: var(--header-h);
  /**
   * Altezza della barra ricerca quando è `position:fixed` sotto l’header
   * (`.heroSearchDock.is-sticky`: bordo 9+9 + `.heroSearch` 52px ≈ 70px).
   * Usata per offset scroll verso la lista pacchetti.
   */
  --sticky-search-shell-h: 70px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: #ffffff;
  color: var(--text);
  line-height: 1.35;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; }

.skip-link{
  position: absolute;
  left: -999px;
  top: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 1000;
}
.skip-link:focus{ left: 10px; }

.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.page{
  padding-top: calc(var(--header-h) + 0px);
  width: 100%;
}

/* Topbar */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 300000; /* above sticky searchbar */
  background: #f6f8fc;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  transition: transform .22s ease;
}
.topbar--travel{
  background: #ffffff;
  backdrop-filter: blur(10px);
}

.topbar.is-hidden-on-scroll{
  transform: translateY(-100%);
  pointer-events: none;
}

body.is-header-hidden .heroSearchDock.is-sticky{
  --sticky-top: 0px;
}

/* Hide the normal site header when the full destination picker opens */
.topbar.is-hidden-for-search{
  display: none;
}

/* Hide the normal site header when the drawer (hamburger) opens */
.topbar.is-hidden-for-drawer{
  display: none;
}
.topbar__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 14px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.brand__mark{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(11,92,255,.14), rgba(0,179,164,.10));
  border: 1px solid rgba(11,92,255,.18);
}
.brand__name{ font-size: 16px; letter-spacing: .2px; }
.brand--travel{
  text-decoration: none;
  gap: 4px; /* logo + TripDealz più vicini (il PNG può avere padding trasparente) */
}
.brand--travel .brand__name{
  font-weight: 950;
  letter-spacing: .3px;
  color: #0b7a73;
  font-size: 18px;
}
.brand__logo{
  display: block;
  height: 42px;
  width: auto;
  max-width: min(200px, 46vw);
  object-fit: contain;
  object-position: left center;
}
.brand__wordmark{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: -2px;
  transform: translateY(1px);
  white-space: nowrap;
  font-family: "Nunito", ui-rounded, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: clamp(19px, 4.2vw, 25px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.brand__wordmarkTrip{
  color: var(--brand-word-trip);
}
.brand__wordmarkDealz{
  color: var(--brand-word-dealz);
}
.brand--compact .brand__logo{
  height: 36px;
  max-width: 160px;
}
.brand--compact .brand__wordmark{
  font-size: clamp(17px, 3.8vw, 21px);
}
.brand--compact .brand__mark{ width: 30px; height: 30px; }
.brand--compact .brand__name{ font-size: 15px; }

.icon-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255,255,255,.8);
  /* Stesso tratto per icone in <button> e in <a> (es. lente vs cuore in header) */
  --icon-btn-fg: rgba(15, 23, 42, .88);
  color: var(--icon-btn-fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
a.icon-btn{
  text-decoration: none;
  color: var(--icon-btn-fg);
  box-sizing: border-box;
}
a.icon-btn:visited{
  color: var(--icon-btn-fg);
}
.icon-btn--sm{
  width: 38px;
  height: 38px;
  border-radius: 14px;
}
.topbar__actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Stesso posto in header: o tasto account normale o solo pallino (mai entrambi) */
.topbar__accountSlot{
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar__accountSlot > [hidden]{
  display: none !important;
}
/* img / iniziali sono dentro .topbar__accountAvatarInner, non figli diretti dello slot */
.topbar__accountAvatarInner > [hidden]{
  display: none !important;
}
.topbar__accountBtnSession{
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}
.topbar__accountBtnSession:hover .topbar__accountAvatar{
  filter: brightness(1.08);
}
.topbar__accountBtnSession:active .topbar__accountAvatar{
  transform: scale(0.96);
}
.topbar__accountBtnSession:focus-visible{
  outline: 3px solid rgba(11, 92, 255, .28);
  outline-offset: 2px;
}
.topbar__accountAvatar{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0b5c57;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  display: grid;
  place-items: center;
  user-select: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
.topbar__accountAvatarInner{
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  position: relative;
}
.topbar__accountAvatarImg{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  grid-area: 1 / 1;
  display: block;
}
.topbar__accountAvatarInner > .topbar__accountAvatar{
  grid-area: 1 / 1;
}
.icon-btn:focus{ outline: 3px solid rgba(11,92,255,.28); outline-offset: 2px; }
.icon{ width: 20px; height: 20px; }
/* Pallino preferiti: angolo in alto a destra del pulsante, sopra il cuore (non fuori dal bottone) */
.icon-count{
  position: absolute;
  top: 6px;
  right: 7px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  z-index: 2;
  box-sizing: border-box;
  pointer-events: none;
}

/* Topbar: icone header come il tasto X del menu (niente bordo / sfondo pieno) */
.topbar .icon-btn{
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #0f172a;
  --icon-btn-fg: #0f172a;
  -webkit-tap-highlight-color: transparent;
}
.topbar a.icon-btn,
.topbar a.icon-btn:visited{
  color: #0f172a;
  --icon-btn-fg: #0f172a;
}
.topbar .icon-btn:hover{
  background: rgba(15, 23, 42, .06);
}
.topbar .icon-btn:focus{
  outline: none;
}
.topbar .icon-btn:focus-visible{
  outline: 3px solid rgba(11, 92, 87, .35);
  outline-offset: 2px;
}
.topbar .icon-btn .icon{
  width: 22px;
  height: 22px;
}

/* Drawer */
.drawer{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}
.drawer[aria-hidden="false"]{ display: block; }
.drawer__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .65);
  z-index: 1;
}
.drawer__panel{
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(10px);
  border-left: 0;
  padding: 14px;
  transform: translateY(6px);
  animation: drawerIn .18s ease-out forwards;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.drawer__panel--sheet{
  padding: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  background: #fff;
}
.drawer__topRow{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 12px 4px;
}
/* Stesso stile del tasto X del menu hamburger: niente bordo/sfondo, 44×44, colore #0f172a */
.drawer__closeBtn,
.icon-btn.icon-btn--ghostHeader{
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #0f172a;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.drawer__closeBtn:hover,
.icon-btn.icon-btn--ghostHeader:hover{
  background: rgba(15, 23, 42, .06);
}
.drawer__closeBtn:focus,
.icon-btn.icon-btn--ghostHeader:focus{
  outline: none;
}
.drawer__closeBtn:focus-visible,
.icon-btn.icon-btn--ghostHeader:focus-visible{
  outline: 3px solid rgba(11, 92, 87, .35);
  outline-offset: 2px;
}
.drawer__closeBtn svg,
.icon-btn.icon-btn--ghostHeader .icon,
.icon-btn.icon-btn--ghostHeader > svg{
  width: 22px;
  height: 22px;
}

/* Profilo in cima (stile app / screenshot) */
.drawerProfile{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 18px;
  margin: 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(15, 23, 42, .1);
  -webkit-tap-highlight-color: transparent;
}
.drawerProfile:hover .drawerProfile__name{
  color: #0b5c57;
}
.drawerProfile__avatar{
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0b5c57;
  color: #fff;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(11, 92, 87, .25);
}
.drawerProfile__avatarImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.drawerProfile__initials{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}
.drawerProfile__accountIcon{
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: inherit;
}
.drawerProfile__name{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: #1e293b;
  text-transform: uppercase;
  word-break: break-word;
}

/* Lista voci menu */
.drawer__nav--sheet{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}
.drawerSheet__list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawerSheet__item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  text-decoration: none;
  color: #0c4a52;
  font-size: 15px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease;
}
.drawerSheet__item:hover,
.drawerSheet__item:focus-visible{
  background: rgba(11, 92, 87, .06);
  outline: none;
}
.drawerSheet__item[aria-current="page"]{
  background: rgba(11, 92, 87, .08);
  font-weight: 800;
}
.drawerSheet__label{
  flex: 1;
  min-width: 0;
}
.drawerSheet__chevron{
  flex-shrink: 0;
  color: #0b7a73;
  display: grid;
  place-items: center;
  opacity: .9;
}
.drawerSheet__item--external .drawerSheet__chevron{
  color: #0b7a73;
}

/* Trova Agenzia (secondo screenshot) */
.drawerFindAgency{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  padding: 16px 18px;
  border-top: 1px solid rgba(15, 23, 42, .12);
  border-bottom: 1px solid rgba(15, 23, 42, .12);
  text-decoration: none;
  color: #004b57;
  font-size: 15px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease;
}
.drawerFindAgency:hover,
.drawerFindAgency:focus-visible{
  background: rgba(11, 92, 87, .05);
  outline: none;
}
.drawerFindAgency__label{
  flex: 1;
}
.drawerFindAgency__icon{
  flex-shrink: 0;
  color: #004b57;
  display: grid;
  place-items: center;
}
.drawerFindAgency__icon svg{
  display: block;
}
@keyframes drawerIn{
  from{ opacity: .7; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}
.drawer__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.drawer__nav{
  padding: 16px 2px 8px;
  flex: 1;
}
.drawer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.drawer__list--main{
  gap: 10px;
}
.drawerMenu__item{
  min-height: 52px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  color: rgba(15,23,42,.90);
  background: #fff;
}
.drawerMenu__item--wa{
  background: rgba(37,211,102,.12);
  border-color: rgba(37,211,102,.28);
  color: #047857;
}
.drawerMenu__icon{
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: rgba(15,23,42,.86);
}
.drawerMenu__icon svg{
  width: 20px;
  height: 20px;
}
.drawer__hint{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* General components */
.btn{
  height: var(--tap);
  border-radius: 16px;
  padding: 0 16px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255,255,255,.85);
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}
.btn--full{ width: 100%; }
.btn--primary{
  border-color: rgba(11,92,255,.22);
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  color: #fff;
  box-shadow: 0 10px 22px rgba(11,92,255,.20);
}
.btn--ghost{
  background: rgba(255,255,255,.65);
}
.btn:focus{ outline: 3px solid rgba(11,92,255,.28); outline-offset: 2px; }

.section-title{
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: .2px;
}
.link-btn{
  border: 0;
  background: transparent;
  padding: 8px 10px;
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
}
.link-btn:focus{ outline: 3px solid rgba(11,92,255,.28); outline-offset: 2px; border-radius: 12px; }

/* Hero */
.hero{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 14px 6px;
}
.hero__inner{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 16px;
  position: relative;
  display: grid;
  gap: 16px;
}
.hero__title{
  margin: 0;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -.2px;
}
.hero__subtitle{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.hero__cta{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hero__visual{
  position: relative;
  min-height: 98px;
}
.hero__glow{
  position: absolute;
  inset: -20px -30px auto -30px;
  height: 160px;
  background: radial-gradient(circle at 30% 50%, rgba(11,92,255,.28), transparent 60%),
              radial-gradient(circle at 80% 30%, rgba(0,179,164,.20), transparent 55%);
  filter: blur(2px);
}
.hero__pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, .86);
  margin: 8px 10px 0 0;
  font-size: 13px;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot--green{ background: var(--teal); }
.dot--blue{ background: var(--blue); }
.dot--purple{ background: var(--purple); }

/* Travel hero (top section) */
.hero--travel{
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: min(calc(100svh - var(--header-h)), 555px);
  min-height: 472px;
  position: relative;
  overflow: hidden;
}
.hero--travel .hero__title{
  font-weight: 950;
  line-height: .92;
  letter-spacing: -1px;
  color: #fff;
  text-align: center;
  font-size: clamp(46px, 10vw, 64px);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  text-shadow: 0 10px 30px rgba(0,0,0,.22);
  margin: 0;
}
.hero--travel .hero__subtitle{
  margin: 4px 0 0;
  color: rgba(255,255,255,.96);
  font-weight: 900;
  text-align: center;
  font-size: 20px;
  line-height: 1.2;
  max-width: 520px;
}
.hero--travel .hero__media{
  position: absolute;
  inset: 0;
  background-image: url("assets/hero-tripdealz.png");
  background-size: cover;
  background-position: center top;
  transform: scale(1.02);
}
@media (max-width: 859px){
  .hero--travel .hero__media{
    /* Su mobile riempi completamente il box (niente spazio vuoto) */
    background-size: cover !important;
    background-position: center top;
    background-repeat: no-repeat;
    transform: scale(1.05);
  }
}
/* L’immagine hero ha già contrasto/testo in grafica: overlay leggero solo in basso per il modulo ricerca */
.hero--travel .hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 55%,
    rgba(2, 6, 23, 0.06) 78%,
    rgba(2, 6, 23, 0.14) 100%
  );
  pointer-events: none;
}
.hero--travel .hero__content{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px 12px;
  gap: 10px;
  justify-content: flex-end;
}
.hero__titleTop{
  display: inline-block;
  -webkit-text-stroke: 2px rgba(255,255,255,.92);
}
.hero__titleMark{
  display: inline-block;
  color: #0b7a73;
  -webkit-text-stroke: 2px rgba(255,255,255,.95);
}
.heroSearchDock{
  width: 100%;
  margin-top: auto;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.heroSearchDock.is-sticky{
  position: fixed;
  top: var(--sticky-top);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100000; /* always above page content when sticky */
  margin: 0;
  padding: 0px;
  background: #ffffff;
  backdrop-filter: none;
  /* Outer squared colored frame behind the soft sticky search card */
  border: 9px solid rgba(11,122,115,.45);
  border-left: 9px solid rgba(11,122,115,.45);
  border-right: 9px solid rgba(11,122,115,.45);
  border-radius: 0; /* both sides squared */
  overflow: hidden;
  transition: top .18s ease;
  will-change: top;
}

/* Fancy sticky attach animation */
.heroSearchDock.is-sticky-anim{
  animation: heroSearchDockAttachFancy .42s ease-out both;
}

.heroSearchDock.is-sticky-anim .heroSearch{
  animation: heroSearchGrowFancy .42s ease-out both;
}

@keyframes heroSearchDockAttachFancy{
  from{
    top: calc(var(--sticky-top) + 14px);
  }
  to{
    top: var(--sticky-top);
  }
}

@keyframes heroSearchGrowFancy{
  from{
    max-width: calc(var(--maxw) - 240px);
  }
  to{
    max-width: var(--maxw);
  }
}

/* Sticky: squadrata come l'header */
.heroSearchDock.is-sticky .heroSearch{
  /* Make sticky searchbar look like the normal one (soft corners). */
  position: relative;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  height: 52px;
  min-height: 52px;
}

/* Color the area behind the rounded corners (prevents white "leaks") */
.heroSearchDock.is-sticky .heroSearch::before{
  content: "";
  position: absolute;
  inset: -9px;
  background: #91c3c0;
  border-radius: 16px;
  z-index: -1;
  pointer-events: none;
}

.heroSearchDock.is-sticky .heroSearch__submit{
  /* Override "cover border pixel" adjustments */
  border-radius: 0 16px 16px 0 !important;
  height: 100% !important;
  top: 0 !important;
  margin-right: 0 !important;
  position: static !important;
}
.heroSearch{
  width: 100%;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 52px;
  overflow: visible;
}
.heroSearch__left{
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
  padding: 6px 10px;
  border-right: 1px solid rgba(15,23,42,.10);
  position: relative;
}
.heroSearch__destField{
  width: 100%;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.heroSearch__destBox{
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: transparent;
  transition: border-color .15s ease, background .15s ease;
}
.heroSearch__destBox:focus-within{
  border-color: rgba(11,122,115,.45);
  background: rgba(11,122,115,.06);
}
.heroSearch__destStack{
  display: grid;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.heroSearch__destLabel{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.9);
  line-height: 1.15;
  cursor: text;
  user-select: none;
}
.heroSearch__destInput{
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(15,23,42,.92);
  line-height: 1.25;
}
.heroSearch__destInput::placeholder{
  color: rgba(11,90,120,.72);
  font-weight: 600;
}
.heroSearch__destInput:focus{
  outline: 0;
}
.heroSearch__suggestions{
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 80; /* sopra la topbar */
  max-height: min(240px, 42vh);
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(11,122,115,.35);
  border-radius: 12px;
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
}
.heroSearch__suggestions[hidden]{
  display: none !important;
}
.heroSearch__suggestions li{
  margin: 0;
  padding: 0;
}
.heroSearch__suggestionBtn{
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: rgba(15,23,42,.92);
  text-align: left;
  cursor: pointer;
}
.heroSearch__suggestionBtn:hover,
.heroSearch__suggestionBtn:focus-visible{
  background: rgba(11,122,115,.10);
  outline: 0;
}
.heroSearch__pin{
  width: 20px;
  height: 20px;
  color: #0b7a73;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.heroSearch__pin svg{
  width: 18px;
  height: 18px;
}
.heroSearch__field{ min-width: 0; display: grid; gap: 2px; width: 100%; }
.label--hero{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.72);
}
.input--hero{
  height: 24px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 14px;
  color: rgba(15,23,42,.95);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.input--hero::placeholder{
  color: rgba(15,23,42,.58);
  font-weight: 600;
}
.input--hero:focus{ outline: 0; }
.heroSearch__mid{
  display: flex;
  align-items: stretch;
  gap: 0;
}
.icon-chip{
  min-width: 44px;
  height: 100%;
  border-radius: 0;
  border: 0;
  border-right: 1px solid rgba(15,23,42,.10);
  background: transparent;
  color: rgba(15,23,42,.85);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.icon-chip--calendar{
  width: 52px;
  min-width: 52px;
  padding: 0;
  border-right: 0;
}
.icon-chip--calendar span{
  display: none;
}
.icon-chip svg{ width: 18px; height: 18px; }
.heroSearch__submit{
  width: 52px;
  height: calc(100% + 2px);
  /* Rounded corners to match the parent searchbar */
  border-radius: 0 16px 16px 0;
  border: 0;
  background: linear-gradient(180deg, rgba(0,196,180,1), rgba(11,122,115,1));
  box-shadow: none;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
  top: -1px;
  margin-right: -1px; /* cover the right border pixel of .heroSearch */
}
.heroSearch__submit svg{ width: 22px; height: 22px; }

/* Sticky: make the submit button squared and aligned with the header */
.heroSearchDock.is-sticky .heroSearch__submit{
  height: 100% !important;
  position: static !important;
  top: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 16px 16px 0 !important;
  width: 52px !important;
}

/* Ensure the left (GPS) area matches the same rounded look */
.heroSearchDock.is-sticky .heroSearch__left{
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  /* right edge of the left part should be square, to match the join with the submit button */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background: #ffffff;
}

.calendarPopover{
  margin-top: 8px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
  padding: 10px;
}

.destinationPicker{
  position: fixed;
  inset: 0;
  z-index: 2000000;
  background: #eef3f6;
  display: grid;
  grid-template-rows: auto auto 1fr;
}
.destinationPicker[hidden]{ display: none; }
.destinationPicker__header{
  height: 64px;
  border-bottom: 1px solid rgba(15,23,42,.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  background: #f7f9fb;
}
.destinationPicker__header h2{
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  transform: translateX(14px);
}
.destinationPicker__search{
  margin: 14px;
  background: #fff;
  border: 2px solid #0b7a73;
  border-radius: 12px;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.destinationPicker__field{
  display: grid;
  gap: 1px;
  width: 100%;
}
.destinationPicker__field label{
  font-size: 14px;
  font-weight: 900;
}
.destinationPicker__field input{
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 16px;
  color: rgba(15,23,42,.95);
}
.destinationPicker__field input:focus{ outline: 0; }
.destinationPicker__body{
  padding: 0 14px 14px;
  overflow: auto;
}
.destinationPicker__body h3{
  margin: 6px 0 8px;
  font-size: 24px;
  color: #0b7a73;
}

/* Reduce the extra line-gap between the "piu richieste" heading and the list */
.destinationPicker__topRequestedHeading{
  margin-bottom: 2px;
}
.destinationPicker__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.destinationPicker__list button{
  width: 100%;
  min-height: 52px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-size: 18px;
  color: rgba(15,23,42,.95);
  padding: 6px 0;
  cursor: pointer;
}

.destinationPicker__list button{
  align-items: flex-start;
}

.destinationPicker__destText{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.destinationPicker__destName{
  font-weight: 950;
  color: rgba(15,23,42,.96);
  font-size: 19px;
}

/* Destination names in the picker list should be normal weight */
.destinationPicker__list .destinationPicker__destName{
  font-weight: 400;
}

.destinationPicker__destNation{
  font-size: 14px;
  font-weight: 900;
  color: rgba(11,90,120,.92);
}

.destinationPicker__gpsIcon{
  width: 24px;
  height: 24px;
  color: #0b7a73;
  flex: 0 0 auto;
}

.destinationPicker__gpsIcon svg{
  width: 100%;
  height: 100%;
}

.destinationPicker__suggestionsHeading{
  margin: 6px 0 8px;
  font-size: 26px;
  color: #0b7a73;
  font-weight: 950;
  letter-spacing: .1px;
}
.destinationPicker__list button > span:first-child{
  width: 40px;
  text-align: center;
  font-size: 28px;
}

.destinationPicker__quickList{
  margin-top: 8px;
  display: grid;
  gap: 12px;
  padding: 4px 0;
}

.destinationPicker__quickList[hidden]{
  display: none !important;
}

.destinationPicker__quickBtn{
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 7px 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.destinationPicker__quickFlag{
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex: 0 0 auto;
  object-fit: contain;
}

.destinationPicker__quickText{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.destinationPicker__quickName{
  font-size: 20px;
  font-weight: 950;
  color: rgba(15,23,42,.95);
}

.destinationPicker__quickBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.destinationPicker__quickBadge--topSeller{ background: #16a34a; }
.destinationPicker__quickBadge--relax{ background: #facc15; color: rgba(15,23,42,.95); }
.destinationPicker__quickBadge--estate{ background: #0ea5e9; }
.destinationPicker__quickBadge--indimenticabile{ background: #7c3aed; }
.calendarPopover__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.calendarPopover__month{
  font-weight: 900;
  color: rgba(15,23,42,.92);
}
.calendarPopover__weekdays{
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendarPopover__weekdays span{
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
}
.calendarPopover__grid{
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendarDay{
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  font-weight: 800;
  font-size: 12px;
  color: rgba(15,23,42,.88);
  cursor: pointer;
}
.calendarDay.is-disabled{
  opacity: .35;
  cursor: not-allowed;
}
.calendarDay.is-in-range{
  background: rgba(11,122,115,.12);
  border-color: rgba(11,122,115,.22);
}
.calendarDay.is-start,
.calendarDay.is-end{
  background: #0b7a73;
  border-color: #0b7a73;
  color: #fff;
}
.calendarDay.is-package-slot:not(.is-disabled){
  border-color: rgba(11,122,115,.42);
  background: rgba(11,122,115,.08);
}
/* Range selezionato ha priorità sullo stile “partenza suggerita” */
.calendarDay.is-package-slot.is-in-range{
  background: rgba(11,122,115,.12);
  border-color: rgba(11,122,115,.22);
}
.calendarDay.is-package-slot.is-start,
.calendarDay.is-package-slot.is-end{
  background: #0b7a73;
  border-color: #0b7a73;
  color: #fff;
}
.calendarPopover__footer{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.quickbar{
  margin-top: 12px;
  background: #ffe400;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 14px 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.quickbar__item{
  display: grid;
  padding: 6px 10px;
  text-decoration: none;
}
.quickbar__item:first-child{
  border-right: 1px solid rgba(0,0,0,.08);
}
.quickbar__title{
  font-weight: 950;
  color: rgba(6, 95, 97, 1);
  font-size: 18px;
}
.quickbar__sub{
  margin-top: 3px;
  color: rgba(6, 95, 97, .92);
  font-weight: 850;
  font-size: 13px;
}

/* Search box */
.search{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 14px 8px;
}
.search__box{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 12px;
}
.field{ display: grid; gap: 7px; }
.field--cta{ align-self: end; }
.label{
  font-size: 13px;
  font-weight: 800;
  color: rgba(15, 23, 42, .78);
}
.label--small{ font-size: 12px; font-weight: 800; }
.input{
  height: var(--tap);
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(255,255,255,.95);
  padding: 0 14px;
  font-size: 15px;
  color: var(--text);
}
.input:focus{
  outline: 3px solid rgba(11,92,255,.22);
  border-color: rgba(11,92,255,.35);
}
.input--small{
  height: 40px;
  border-radius: 14px;
  padding: 0 12px;
}

/* Categories */
.categories{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6px 14px 0;
}
.categories__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.scroll-row{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 4px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.scroll-row--shadow{
  padding-top: 0;
  margin-top: -10px;
  height: 26px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(246,248,252,.8) 40%, rgba(246,248,252,1));
}
.chip{
  scroll-snap-align: start;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255,255,255,.82);
  border-radius: 999px;
  height: 42px;
  padding: 0 14px;
  font-weight: 800;
  color: rgba(15, 23, 42, .86);
  cursor: pointer;
  white-space: nowrap;
}
.chip.is-active{
  border-color: rgba(11,92,255,.28);
  background: rgba(11,92,255,.10);
  color: var(--blue);
}
.chip:focus{ outline: 3px solid rgba(11,92,255,.28); outline-offset: 2px; }

/* Deals tiles */
.deals{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 14px 0;
}
.offers-grid{
  display: grid;
  gap: 14px;
}
.offer-tiles{
  display: grid;
  gap: 12px;
}
.offer-tiles--stack .deal-tile{ background: rgba(255,255,255,.86); }
.deal-tile{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  display: grid;
}
.deal-tile__thumb{
  height: 130px;
  background: #e5e7eb;
  position: relative;
  overflow: hidden;
}
.deal-tile__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}
.deal-tile__thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 10%, rgba(2,6,23,.50));
}
.deal-tile__badge{
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.85);
  font-weight: 900;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.badge-dot{
  width: 8px; height: 8px; border-radius: 50%;
}
.badge-dot--blue{ background: var(--blue); }
.badge-dot--orange{ background: var(--orange); }
.badge-dot--teal{ background: var(--teal); }
.badge-dot--purple{ background: var(--purple); }
.deal-tile__content{
  padding: 12px;
}
.deal-tile__title{
  margin: 0;
  font-size: 15px;
  letter-spacing: .1px;
}
.deal-tile__meta{
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.deal-tile__place{
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}
.deal-tile__price{
  font-weight: 950;
  color: rgba(15,23,42,.90);
}
.deal-tile__price span{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}
.deal-tile__cta{
  margin-top: 10px;
}

/* Packs list */
.packs{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 14px 30px;
  overflow: visible;
}
.packs__header{
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.packs__list{
  display: grid;
  gap: 14px;
  overflow: visible;
  /* Riduce il rischio che il titolo / prime card finiscano sotto header + search sticky */
  scroll-margin-top: calc(var(--header-h) + var(--sticky-search-shell-h) + 12px);
}
.packs__loadMore{
  margin-top: 16px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Dopo una ricerca: reset filtri in evidenza (brand teal) */
.packs__showAllWrap{
  margin-top: 14px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.packs .packs__showAllBtn{
  border-color: rgba(11, 122, 115, 0.38);
  background: linear-gradient(180deg, #0d9d93, #0b7a73);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(11, 122, 115, 0.28);
}
.packs .packs__showAllBtn:hover{
  filter: brightness(1.04);
}
.packs .packs__showAllBtn:active{
  filter: brightness(0.96);
}
/* Stesso verde/teal di Continua (people sheet) e tasto cerca hero */
.packs__loadMoreBtn{
  border: 1px solid rgba(11, 122, 115, 0.95);
  background: linear-gradient(180deg, rgba(0, 196, 180, 1), rgba(11, 122, 115, 1));
  color: #fff;
  box-shadow: 0 10px 22px rgba(11, 122, 115, 0.22);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.packs__loadMoreBtn:hover{
  filter: brightness(1.04);
}
.packs__loadMoreBtn:active{
  filter: brightness(0.97);
}
.packs__loadMoreBtn:focus-visible{
  outline: 3px solid rgba(11, 122, 115, 0.35);
  outline-offset: 2px;
}
.pack-card{
  position: relative;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--radius-xl);
  overflow: visible;
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
}
.pack-card[data-action="open-package"]{
  cursor: pointer;
}
.pack-card[data-action="open-package"]:focus{
  outline: 3px solid rgba(11,92,255,.28);
  outline-offset: 2px;
}
.pack-card__img{
  height: 210px;
  position: relative;
  background: #e5e7eb;
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
/* Targhetta che esce a sinistra del bordo della card (come nello screenshot) */
.pack-card__targetta{
  position: absolute;
  top: 13px;
  left: 0;
  z-index: 5;
  transform: translateX(-12px);
  max-width: min(280px, calc(100% - 40px));
  padding: 7px 11px;
  border-radius: 8px;
  background: #fbcc60;
  color: #1c1917;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(15,23,42,.18);
  pointer-events: none;
}
.pack-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}
.pack-card__img::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(2,6,23,.00) 35%, rgba(2,6,23,.54) 100%);
}
.pack-card__badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  padding: 9px 11px;
  font-weight: 950;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.pack-card__badge .badge-dot{ width: 9px; height: 9px; }
.pack-card__fav{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(15,23,42,.35);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pack-card__fav.is-active{
  background: rgba(239,68,68,.95);
  color: #fff;
  border-color: rgba(239,68,68,.95);
}
.pack-card__fav svg{ width: 18px; height: 18px; }
.pack-card__priceOnImage{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  background: rgba(255,255,255,.96);
  color: rgba(15,23,42,.95);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 10px;
  padding: 6px 9px;
  font-weight: 950;
  font-size: 15px;
}
.pack-card__priceOnImage span{
  font-size: 11px;
  color: var(--muted);
  font-weight: 900;
}

/* When the search dock is sticky, keep "Cuore/Preferito" and "Prezzo" behind it */
.is-sticky-search-active .pack-card__fav,
.is-sticky-search-active .pack-card__targetta,
.is-sticky-search-active .pack-card__priceOnImage{
  z-index: 1 !important;
}
.pack-card__content{
  padding: 14px;
}
.pack-card__title{
  margin: 0;
  font-size: 16px;
  letter-spacing: .1px;
}
.pack-card__dest{
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}
.pack-card__desc{
  margin: 8px 0 0;
  color: rgba(15,23,42,.78);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pack-card__list{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.pack-card__list li{
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(15,23,42,.82);
  font-weight: 800;
  font-size: 13px;
}
.check{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(11,92,255,.10);
  color: var(--blue);
  border: 1px solid rgba(11,92,255,.18);
  font-weight: 1000;
  flex: 0 0 auto;
}
.pack-card__bottom{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.pack-card__priceRow{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px dashed rgba(15,23,42,.14);
  padding-top: 12px;
}
.price{
  display: grid;
  gap: 4px;
}
.price__label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
}
.price__value{
  font-weight: 1000;
  font-size: 20px;
  letter-spacing: -.2px;
}
.cta-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.btn--secondary{
  background: rgba(11,92,255,.08);
  border-color: rgba(11,92,255,.18);
  color: var(--blue);
  box-shadow: none;
}
.pack-card__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pack-card__actions .btn{ border-radius: 16px; }

/* Empty */
.empty-state{
  margin-top: 18px;
  border: 1px dashed rgba(15,23,42,.18);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.65);
  padding: 20px 14px;
  text-align: center;
}
.empty-state__icon{ font-size: 28px; margin-bottom: 10px; }
.empty-state__title{ margin: 0; font-size: 18px; }
.empty-state__text{ margin: 8px 0 14px; color: var(--muted); font-weight: 800; font-size: 14px; }

/* Search results: avoid bold typography */
.packs .pack-card__badge,
.packs .pack-card__targetta,
.packs .pack-card__priceOnImage,
.packs .pack-card__priceOnImage span,
.packs .pack-card__dest,
.packs .pack-card__list li,
.packs .price__label,
.packs .price__value,
.packs .btn,
.packs .check,
.packs .section-title,
.packs .pack-card__title,
.packs .empty-state__title,
.packs .empty-state__text{
  font-weight: 400;
}

/* Vacation types carousel */
.vacationTypes{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2px 14px 26px;
}
.vacationTypes__header{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  text-align: center;
}
.vacationTypes__trustpilotWrap{
  display: flex;
  justify-content: center;
  margin-top: 18px;
  text-align: center;
}
.vacationTypes__trustpilot{
  display: block;
  width: min(136px, 55vw);
  max-width: 136px;
  height: auto;
  object-fit: contain;
}
.vacationTypes__slider{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.vacationTypes__viewport{
  overflow: hidden;
  border-radius: 20px;
}
.vacationTypes__track{
  display: flex;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.vacationTypes__nav{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex: 0 0 auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.vacationTypes__card{
  flex: 0 0 100%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
  padding: 24px 22px;
  min-height: 350px;
}
.vacationTypes__card h3{
  margin: 0 0 12px;
  font-size: 24px;
  color: #0f172a;
}
.vacationTypes__card p{
  margin: 0;
  color: rgba(15,23,42,.80);
  font-size: 16px;
  line-height: 1.58;
}
.vacationTypes__footer{
  margin: 14px 2px 0;
  color: rgba(15,23,42,.80);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}

/* About agency */
.aboutAgency{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6px 14px 26px;
}
.aboutAgency .section-title{
  margin-bottom: 12px;
}
.aboutAgency p{
  margin: 0 0 12px;
  color: rgba(15,23,42,.84);
  font-size: 14px;
  line-height: 1.52;
}
.aboutAgency__subtitle{
  margin: 14px 0 8px;
  color: #0f172a;
  font-size: 18px;
}
.aboutAgency__list{
  margin: 0 0 12px;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}
.aboutAgency__list li{
  color: rgba(15,23,42,.84);
  font-size: 14px;
  line-height: 1.5;
}

/* Mappa sede (pagina Chi siamo) */
.officeMap{
  margin-top: 22px;
}
.officeMap__intro{
  text-align: left;
}
.officeMap__frame{
  margin: 18px auto 0;
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 16 / 9;
  min-height: clamp(280px, 42vw, 560px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
}
.officeMap__frame iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Footer newsletter and links */
.siteFooter{
  max-width: var(--maxw);
  margin: 0 auto 22px;
  padding: 6px 14px 0;
  display: grid;
  gap: 12px;
}
.siteFooter__newsletter,
.siteFooter__linksWrap{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 14px;
}
.siteFooter__newsletter p{
  margin: 0 0 10px;
  color: rgba(15,23,42,.82);
  font-size: 14px;
  line-height: 1.5;
}
.siteFooter__form{
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.siteFooter__form label{
  font-size: 13px;
  font-weight: 800;
}
.siteFooter__formRow{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.siteFooter__formRow input{
  min-height: 42px;
  border: 1px solid rgba(15,23,42,.18);
  border-radius: 12px;
  padding: 0 12px;
  font: inherit;
}
.siteFooter__formRow button{
  min-height: 42px;
  border: 1px solid #0b7a73;
  background: #0b7a73;
  color: #fff;
  border-radius: 12px;
  padding: 0 14px;
  font-weight: 900;
  cursor: pointer;
}
.siteFooter__legal{
  margin: 0;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: rgba(15,23,42,.7) !important;
}
.siteFooter__linksWrap h3{
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 900;
}
.siteFooter__cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.siteFooter__col{
  min-width: 0;
}
.siteFooter__links{
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.siteFooter__links li a{
  text-decoration: none;
  color: rgba(15,23,42,.86);
  font-weight: 400;
}
.siteFooter__links li a:hover{
  text-decoration: underline;
}

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  z-index: 80;
}

/* Login / area riservata (overlay) */
.loginPage{
  position: fixed;
  inset: 0;
  z-index: 2600000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
}
.loginPage[hidden]{
  display: none !important;
}
.loginPage__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
}
.loginPage__panel{
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: min(92vh, 820px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.12);
  border: 1px solid rgba(15,23,42,.08);
  overflow: hidden;
}
.loginPage__back{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
}
.loginPage__back[hidden]{
  display: none !important;
}
.loginPage__close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}
.loginPage__scroll{
  flex: 1;
  overflow-y: auto;
  padding: 36px 22px 20px;
}
.loginPage__brand{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: #0b7a73;
}
.loginPage__logo{
  display: block;
  width: min(220px, 78vw);
  max-height: 100px;
  height: auto;
  object-fit: contain;
}
.loginPage__brandIcon{
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}
.loginPage__brandIcon svg{
  width: 26px;
  height: 26px;
}
.loginPage__brandName{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.loginPage__title{
  margin: 0 0 22px;
  text-align: center;
  font-size: 15px;
  font-weight: 300;
  color: rgba(15,23,42,.55);
  line-height: 1.45;
}
.loginPage__title--register{
  font-size: 16px;
  font-weight: 300;
  color: rgba(15,23,42,.72);
  padding: 0 8px;
}

/* Form registrazione (placeholder come etichetta) */
.registerForm{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.registerForm__field{
  position: relative;
  margin-bottom: 14px;
}
.registerForm__field--password .registerForm__input{
  padding-right: 48px;
}
.registerForm__input{
  width: 100%;
  min-height: 52px;
  padding: 14px 14px;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.registerForm__input::placeholder{
  color: rgba(15,23,42,.42);
}
.registerForm__input:focus{
  border-color: #0b7a73;
  box-shadow: 0 0 0 3px rgba(11,122,115,.15);
}
.registerForm__field--password .loginFloatField__eye{
  top: 50%;
  transform: translateY(-50%);
}
.registerForm__block{
  margin-bottom: 16px;
}
.registerForm__label{
  display: block;
  margin: 0 0 8px 2px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(15,23,42,.55);
}
.registerForm__label--optional{
  font-weight: 500;
}
.registerForm__dobRow{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.registerForm__select{
  width: 100%;
  min-height: 52px;
  padding: 0 12px;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  color: #0f172a;
  background: #fff;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}
.registerForm__select:focus{
  border-color: #0b7a73;
  box-shadow: 0 0 0 3px rgba(11,122,115,.15);
}
.registerForm__phoneRow{
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.registerForm__cc{
  flex: 0 0 auto;
  min-width: 100px;
  min-height: 52px;
  padding: 0 10px;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  color: #0f172a;
  background: #fff;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}
.registerForm__input--phone{
  flex: 1;
  min-width: 0;
}
.registerForm__legend{
  margin: 4px 0 18px;
  font-size: 12px;
  color: rgba(15,23,42,.5);
  line-height: 1.4;
}
.registerForm .loginPage__submit{
  margin-top: 4px;
}
.loginPage__form{
  display: grid;
  gap: 0;
}
.loginFloatField{
  position: relative;
  margin-bottom: 16px;
}
.loginFloatField__input{
  width: 100%;
  min-height: 52px;
  padding: 22px 14px 10px;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.loginFloatField__input:focus{
  border-color: #0b7a73;
  box-shadow: 0 0 0 3px rgba(11,122,115,.15);
}
.loginFloatField__label{
  position: absolute;
  left: 14px;
  top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(15,23,42,.45);
  pointer-events: none;
  transition: color .15s ease;
}
.loginFloatField__input:focus + .loginFloatField__label,
.loginFloatField__input:not(:placeholder-shown) + .loginFloatField__label{
  color: rgba(11,122,115,.9);
}
.loginFloatField--password .loginFloatField__input{
  padding-right: 48px;
}
.loginFloatField__eye{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: rgba(15,23,42,.45);
  cursor: pointer;
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
  border-radius: 10px;
}
.loginFloatField__eye > .loginPage__eyeIcon{
  grid-area: 1 / 1;
}
/* Password nascosta: solo occhio sbarrato | visibile: solo occhio aperto (SVG [hidden] è poco affidabile) */
.loginFloatField__eye:not(.loginFloatField__eye--revealed) .loginPage__eyeIcon--open{
  display: none !important;
}
.loginFloatField__eye:not(.loginFloatField__eye--revealed) .loginPage__eyeIcon--closed{
  display: block;
}
.loginFloatField__eye.loginFloatField__eye--revealed .loginPage__eyeIcon--open{
  display: block;
}
.loginFloatField__eye.loginFloatField__eye--revealed .loginPage__eyeIcon--closed{
  display: none !important;
}
.loginFloatField__eye:hover{
  color: rgba(15,23,42,.75);
  background: rgba(15,23,42,.05);
}
.loginPage__eyeIcon{
  width: 22px;
  height: 22px;
}

/* Solo il pulsante occhio nostro: nasconde il toggle nativo sui campi password (Edge/IE e simili) */
.loginFloatField__input[type="password"]::-ms-reveal,
.loginFloatField__input[type="password"]::-ms-clear,
.registerForm__input[type="password"]::-ms-reveal,
.registerForm__input[type="password"]::-ms-clear{
  display: none;
  width: 0;
  height: 0;
}
/* Riduce controlli automatici Chromium sul campo password */
.loginFloatField__input[type="password"],
.registerForm__input[type="password"]{
  appearance: none;
}
.loginFloatField__input::-webkit-credentials-auto-fill-button,
.registerForm__input::-webkit-credentials-auto-fill-button{
  visibility: hidden;
  display: none;
  pointer-events: none;
}
.loginPage__row--end{
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 14px;
}
.loginPage__legal{
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(15,23,42,.55);
}
.loginPage__link{
  color: rgba(59,130,246,.95);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.loginPage__link:hover{
  text-decoration: underline;
}
.loginPage__link--underline{
  text-decoration: underline;
}
.loginPage__loginError{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 7px;
  background: #f8d7da;
  border: 1px solid #f1aeb5;
  color: #721c24;
  text-align: left;
}
.loginPage__loginError[hidden]{
  display: none !important;
}
.loginPage__loginErrorIcon{
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  color: #721c24;
}
.loginPage__loginErrorIcon svg{
  width: 100%;
  height: 100%;
  display: block;
}
.loginPage__loginErrorText{
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: #721c24;
}

.loginPage__submit{
  width: 100%;
  min-height: 50px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #d1d5db;
  cursor: not-allowed;
  transition: background .2s ease, transform .05s ease;
}
.loginPage__submit:not(:disabled){
  background: #0b7a73;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(11,122,115,.25);
}
.loginPage__submit:not(:disabled):hover{
  filter: brightness(1.03);
}
.loginPage__submit:not(:disabled):active{
  transform: scale(0.99);
}
.loginPage__footer{
  flex-shrink: 0;
  padding: 18px 22px 22px;
  background: #f3f4f6;
  border-top: 1px solid rgba(15,23,42,.06);
  text-align: center;
}
.loginPage__footer[hidden]{
  display: none !important;
}
.loginPage__footerText{
  margin: 0 0 12px;
  font-size: 14px;
  color: rgba(59,130,246,.85);
  font-weight: 500;
}
.loginPage__register{
  width: 100%;
  min-height: 50px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #0b7a73;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(11,122,115,.22);
}
.loginPage__register:hover{
  filter: brightness(1.04);
}
.loginPage__view--account{
  text-align: center;
}
.loginPage__view--account .loginPage__title{
  margin-bottom: 12px;
  font-weight: 600;
  color: rgba(15,23,42,.82);
}
.loginPage__accountEmail{
  margin: 0 0 20px;
  font-size: 15px;
  color: #0b7a73;
  font-weight: 600;
  word-break: break-all;
}

/* Package page (booking-like) */
.packagePage{
  position: fixed;
  inset: 0;
  z-index: 120;
}
.packagePage[hidden]{ display: none; }
.packagePage__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.58);
}
.packagePage__panel{
  position: relative;
  height: 100%;
  overflow: auto;
  background: rgba(255,255,255,.98);
}
.packagePage__header{
  padding: 14px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
}
.packagePage__headerMeta{
  flex: 1;
  display: flex;
  justify-content: center;
}
.packagePage__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(11,90,120,.12);
  border: 1px solid rgba(11,90,120,.22);
  font-weight: 950;
  color: rgba(11,90,120,.95);
}
.packagePage__hero{
  height: 220px;
  background: #e5e7eb;
}
.packagePage__heroImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.packagePage__content{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 14px 30px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.packagePage__left{
  display: grid;
  gap: 16px;
}
.packagePage__title{
  margin: 0;
  font-size: 26px;
  letter-spacing: -.2px;
}
.packagePage__subtitle{
  margin-top: 4px;
  color: rgba(11,122,115,.95);
  font-weight: 900;
}
.packagePage__short{
  margin: 0;
  color: rgba(15,23,42,.82);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
}
.packagePage__sectionTitle{
  margin: 0 0 8px;
  font-size: 16px;
  color: rgba(15,23,42,.92);
}

.packageBookingCard{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.packageBookingCard__price{
  font-weight: 950;
  font-size: 22px;
  letter-spacing: -.2px;
  color: rgba(15,23,42,.95);
}
.packageBookingCard__priceUnit{
  font-weight: 900;
  font-size: 14px;
  color: rgba(15,23,42,.70);
}
.packageBookingCard__peopleMeta{
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}
.packageBookingCard__form{
  display: grid;
  gap: 10px;
}
.itinerary{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.itinerary li{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  color: rgba(15,23,42,.86);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
}

@media (min-width: 860px){
  .packagePage__content{
    grid-template-columns: 1.3fr .7fr;
    align-items: start;
  }
  .packagePage__hero{ height: 280px; }
}
.modal[hidden]{
  display: none;
}
.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.58);
}
.modal__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 92vw);
  max-height: 86vh;
  overflow: auto;
  background: rgba(255,255,255,.96);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.24);
}
.modal__header{
  padding: 14px 14px 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.modal__title{
  margin: 0;
  font-size: 18px;
  letter-spacing: .1px;
}
.modal__subtitle{
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}
.modal__content{
  display: grid;
  grid-template-columns: 1fr;
}
.modal__image{
  height: 180px;
  background: #e5e7eb;
  position: relative;
}
.modal__image::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--modal-image);
  background-size: cover;
  background-position: center;
}
.modal__image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,6,23,.00), rgba(2,6,23,.35));
}
.modal__body{
  padding: 14px;
  display: grid;
  gap: 14px;
}
.modal__desc{
  margin: 0;
  color: rgba(15,23,42,.80);
  font-size: 14px;
  font-weight: 800;
}
.subsection-title{
  margin: 0 0 8px;
  font-size: 14px;
  color: rgba(15,23,42,.86);
}
.checklist{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.checklist li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(15,23,42,.86);
  font-weight: 850;
  font-size: 13px;
}
.checklist .check{ margin-top: 2px; }
.modal__priceRow{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-top: 2px;
}
.modal__quick{ min-width: 120px; }
.modal__form{
  display: grid;
  gap: 10px;
}
.modal__fineprint{
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

/* Toast */
.favoritesList{
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
}
.favoritesList__item{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px;
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 10px;
  align-items: center;
}
.favoritesList__item img{
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 10px;
}
.favoritesList__item h3{
  margin: 0;
  font-size: 14px;
}
.favoritesList__item p{
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.favoritesList__meta{
  margin-top: 6px;
  font-weight: 900;
  font-size: 13px;
}
.favoritesList__empty{
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

/* People sheet (Adulti/Minori) */
.peopleSheet{
  position: fixed;
  inset: 0;
  z-index: 2500000;
}
.peopleSheet[hidden]{ display: none; }

.peopleSheet__backdrop{
  position: absolute;
  inset: 0;
  background: #eef3f6;
  opacity: 1;
  z-index: 0;
}

.peopleSheet__panel{
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.peopleSheet__header{
  height: 72px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.80);
}

.peopleSheet__titles{
  display: grid;
  place-items: center;
  gap: 2px;
}

.peopleSheet__title{
  font-size: 20px;
  font-weight: 950;
  color: rgba(11,90,120,.98);
  text-align: center;
  line-height: 1.1;
}

.peopleSheet__destination{
  font-size: 14px;
  font-weight: 900;
  color: rgba(11,122,115,.95);
  text-align: center;
}

.peopleSheet__content{
  padding: 18px 14px 0;
  flex: 1;
  display: grid;
  align-content: start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.peopleSheet__step[hidden]{ display: none; }

.monthStep__title{
  font-size: 18px;
  color: rgba(15,23,42,.92);
  font-weight: 400;
  margin-bottom: 10px;
}

.peopleSheetCal{
  display: grid;
  gap: 0;
  padding-bottom: 8px;
}
.peopleSheetCal__hint{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(15,23,42,.62);
  font-weight: 600;
}
.peopleSheet .peopleSheetCal .calendarPopover__header{
  margin-bottom: 4px;
}
.peopleSheet .peopleSheetCal .calendarPopover__month{
  flex: 1;
  text-align: center;
  text-transform: capitalize;
}
.monthStep__options{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  min-height: 62vh;
  align-content: start;
  padding-bottom: 12px;
}

.monthOption{
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(237,244,250,.96);
  border-radius: 16px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  color: rgba(15,23,42,.95);
  text-align: center;
  min-height: 86px;
}

.monthOption__box{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,.25);
  background: transparent;
  position: relative;
  display: none;
}

.monthOption.is-selected{
  border-color: rgba(11,122,115,.65);
  background: rgba(11,122,115,.10);
}

.monthOption.is-selected .monthOption__box{
  border-color: rgba(11,122,115,.95);
  background: rgba(11,122,115,.95);
}

.monthOption.is-selected .monthOption__box::after{
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
}

.monthOption:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.monthOption.is-selected::after{
  content: "✓";
  display: grid;
  place-items: center;
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(11,122,115,.95);
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  top: 10px;
  right: 10px;
}

.monthOption{
  position: relative;
}

.airportStep__title{
  font-size: 18px;
  color: rgba(15,23,42,.92);
  font-weight: 400;
  margin-bottom: 10px;
}

.airportStep__group{
  margin-bottom: 18px;
}

.airportStep__groupTitle{
  font-size: 15px;
  color: rgba(11,90,120,.95);
  font-weight: 400;
  margin-bottom: 10px;
}

.airportStep__options{
  display: grid;
  gap: 10px;
}

.airportOption{
  width: 100%;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
}

.airportOption__box{
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,.25);
  background: transparent;
  flex: 0 0 auto;
  position: relative;
}

.airportOption.is-selected{
  border-color: rgba(11,122,115,.95);
  background: rgba(11,122,115,.04);
  border-width: 2px;
  box-shadow: none;
}

.airportOption.is-selected .airportOption__box{
  border-color: rgba(11,122,115,.95);
  background: rgba(11,122,115,.95);
}

.airportOption.is-selected .airportOption__box::after{
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
}

.airportOption:focus{
  outline: 3px solid rgba(11,92,255,.22);
  outline-offset: 2px;
}

.airportOption.is-selected:focus{
  outline-color: rgba(11,122,115,.28);
}

.airportOption:disabled{
  opacity: .55;
  cursor: not-allowed;
  background: rgba(255,255,255,.72);
}

.peopleSheet__card{
  background: rgba(255,255,255,.95);
  border: 2px solid rgba(11,122,115,.95);
  border-radius: 12px;
  padding: 18px;
}

.peopleSheet__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.peopleSheet__row:last-of-type{
  border-bottom: 0;
}

.peopleSheet__label{
  font-size: 18px;
  font-weight: 950;
  color: rgba(15,23,42,.95);
}

.peopleStepper{
  display: flex;
  align-items: center;
  gap: 14px;
}

.peopleStepper__btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(11,122,115,.8);
  background: rgba(255,255,255,.92);
  color: rgba(11,122,115,.95);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.peopleStepper__btn:disabled{
  opacity: .35;
  cursor: not-allowed;
}

.peopleStepper__count{
  min-width: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: 950;
  color: rgba(15,23,42,.95);
}

.peopleSheet__hint{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(15,23,42,.86);
  line-height: 1.4;
  font-weight: 700;
}

.peopleSheet__hint div{
  margin-top: 3px;
  color: rgba(11,90,120,.95);
  font-weight: 800;
}

.peopleSheet__footer{
  padding: 0 14px 18px;
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(15,23,42,.08);
}

/* Airport step selected box */
.airportSelected{
  margin: 0 0 16px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(255,255,255,.96);
  padding-top: 4px;
}
.airportSelected__title{
  font-size: 18px;
  font-weight: 400;
  color: rgba(11,90,120,.95);
  margin-bottom: 10px;
}
.airportSelected__box{
  border-radius: 10px;
  border: 2px solid rgba(11,122,115,.95);
  background: rgba(255,255,255,.92);
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.airportSelected__check{
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(11,122,115,.95);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 16px;
}
.airportSelected__text{
  font-size: 18px;
  font-weight: 400;
  color: rgba(15,23,42,.95);
}

.peopleSheet__continueBtn{
  background: #0b7a73;
  border-color: rgba(11,122,115,.95);
  box-shadow: 0 10px 22px rgba(11,122,115,.20);
  height: 54px;
  min-height: 54px;
  font-size: 18.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  border-radius: 12px;
}

/* WhatsApp floating button */
body.is-drawer-open .whatsappFloat{
  display: none !important;
}
.whatsappFloat{
  position: fixed;
  left: 14px;
  bottom: 18px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
  animation: whatsappFloatIn 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  z-index: 1000;
}
.whatsappFloat img{
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
  animation: whatsappLogoPulse 3.6s ease-in-out 0.7s infinite;
}

@keyframes whatsappFloatIn{
  from{
    transform: translateX(-36px);
    opacity: 0;
  }
  to{
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes whatsappLogoPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce){
  .whatsappFloat{
    animation: none;
  }
  .whatsappFloat img{
    animation: none;
  }
}

/* Search UI: none of the text should appear bold */
.destinationPicker *,
.peopleSheet *{
  font-weight: 400 !important;
}

/* Desktop */
@media (min-width: 860px){
  .hero__inner{
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    padding: 18px;
  }
  .hero__visual{ min-height: 140px; }

  .search__box{
    grid-template-columns: 1.2fr .9fr .5fr .5fr;
    align-items: end;
    padding: 16px;
  }
  .packs__list{
    grid-template-columns: 1fr 1fr;
  }
  .offers-grid{
    grid-template-columns: 1fr 1fr;
  }
  .vacationTypes__track{
    display: flex;
  }
  .pack-card__img{ height: 240px; }
  .pack-card__actions{ grid-template-columns: 1fr auto; }
  .cta-row{ grid-template-columns: auto; }
}

/* —— Pagina Area riservata (area-riservata.html) —— */
/* padding-top: l’header è fixed; senza spazio il titolo finisce sotto la topbar */
.reservedPage{
  padding-top: var(--header-h);
  min-height: 100vh;
  background: #f8fafc;
}
.reservedPage__hero{
  background: rgba(11, 122, 115, .12);
  border-bottom: 1px solid rgba(11, 122, 115, .15);
  padding: 22px 18px 26px;
}
.reservedPage__heroInner{
  max-width: 1100px;
  margin: 0 auto;
}
.reservedPage__welcome{
  margin: 0 0 18px;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  color: #0b5c57;
  letter-spacing: -0.02em;
}
.reservedPage__profile{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  justify-content: space-between;
}
.reservedPage__profileMain{
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.reservedPage__avatar{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
  border: 1px solid rgba(11, 92, 87, .12);
  overflow: hidden;
  position: relative;
  background: #fff;
}
.reservedPage__avatar--wrap{
  display: grid;
  place-items: center;
}
.reservedPage__avatarImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-area: 1 / 1;
}
.reservedPage__avatarInitials{
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  color: #0b5c57;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  display: grid;
  place-items: center;
}
.reservedPage__avatar--wrap > [hidden]{
  display: none !important;
}
.reservedPage__profileText{
  min-width: 0;
}
.reservedPage__displayName{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0b5c57;
  line-height: 1.25;
}
.reservedPage__mail{
  margin: 4px 0 0;
  font-size: 14px;
  color: rgba(15, 23, 42, .65);
  word-break: break-all;
}
.reservedPage__logout{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(11, 92, 87, .25);
  background: #fff;
  color: #0b5c57;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.reservedPage__logout:hover{
  background: rgba(255, 255, 255, .95);
  border-color: rgba(11, 92, 87, .4);
}
.reservedPage__logout svg{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.reservedPage__banner{
  background: #ffeb7a;
  color: #5c4a00;
  padding: 16px 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  border-bottom: 1px solid rgba(200, 160, 0, .35);
}
.reservedPage__bannerText{
  max-width: 920px;
  margin: 0 auto;
}
.reservedPage__banner strong{
  color: #3d3200;
  font-weight: 800;
}
/* Bento: due colonne, altezze diverse “incastonate” come in app */
.reservedPage__tiles--bento{
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 18px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(92px, auto) minmax(72px, auto) minmax(100px, auto) minmax(132px, auto);
  gap: 16px;
  align-items: stretch;
}
.reservedPage__tile--prenotazioni{
  grid-column: 1;
  grid-row: 1 / 3;
}
.reservedPage__tile--storico{
  grid-column: 2;
  grid-row: 1 / 2;
}
.reservedPage__tile--assistenza{
  grid-column: 2;
  grid-row: 2 / 5;
}
.reservedPage__tile--wishlist{
  grid-column: 1;
  grid-row: 3 / 4;
}
.reservedPage__tile--impostazioni{
  grid-column: 1;
  grid-row: 4 / 5;
}
@media (min-width: 520px){
  .reservedPage__tiles--bento{
    max-width: 480px;
    grid-template-rows: minmax(100px, auto) minmax(80px, auto) minmax(108px, auto) minmax(148px, auto);
    gap: 18px;
  }
}
@media (max-width: 380px){
  .reservedPage__tiles--bento{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    max-width: 360px;
  }
  .reservedPage__tile--prenotazioni,
  .reservedPage__tile--storico,
  .reservedPage__tile--assistenza,
  .reservedPage__tile--wishlist,
  .reservedPage__tile--impostazioni{
    grid-column: 1;
    grid-row: auto;
    min-height: 120px;
  }
  .reservedPage__tile--prenotazioni{
    min-height: 160px;
  }
  .reservedPage__tile--assistenza{
    min-height: 180px;
  }
}
.reservedPage__tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 0;
  height: 100%;
  padding: 18px 12px;
  border: none;
  border-radius: 14px;
  background: #0b5c57;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(11, 92, 87, .2);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.reservedPage__tile:hover{
  filter: brightness(1.06);
  box-shadow: 0 12px 28px rgba(11, 92, 87, .26);
}
.reservedPage__tile:active{
  transform: scale(0.98);
}
.reservedPage__tile svg{
  width: 36px;
  height: 36px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  display: block;
  margin: 0 auto;
}
.reservedPage__tile > span{
  display: block;
  width: 100%;
  text-align: center;
}
.reservedPage__tile--prenotazioni svg,
.reservedPage__tile--assistenza svg{
  width: 44px;
  height: 44px;
}
.reservedPage__tile--storico svg{
  width: 32px;
  height: 32px;
}

/* —— Impostazioni account (profilo) —— */
/* Non usare padding shorthand sul top: altrimenti si sovrascrive .reservedPage e la card finisce sotto l’header fixed */
.profileSettingsPage{
  padding-top: calc(var(--header-h) + 18px);
  padding-right: 16px;
  padding-bottom: 48px;
  padding-left: 16px;
}
.profileSettingsPage__wrap{
  max-width: 520px;
  margin: 0 auto;
}
.profileSettingsPage__card{
  background: #fff;
  border-radius: 16px;
  padding: 22px 20px 28px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .08);
  border: 1px solid rgba(11, 92, 87, .12);
}
.profileSettingsPage__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.profileSettingsPage__title{
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.profileSettingsPage__close{
  flex-shrink: 0;
}
.profileSettingsPage__avatarBlock{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.profileSettingsPage__avatarCircle{
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  border: 2px solid rgba(11, 92, 87, .18);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}
/* .avatarInitials ha display:grid e può restare visibile sopra la foto se [hidden] non basta */
.profileSettingsPage__avatarCircle > [hidden]{
  display: none !important;
}
.profileSettingsPage__avatarImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-area: 1 / 1;
}
.profileSettingsPage__avatarInitials{
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 36px;
  font-weight: 800;
  color: #0b5c57;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  background: rgba(11, 92, 87, .06);
}
.profileSettingsPage__photoRow{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
/* .btn imposta display:inline-flex e può far comparire anche i button con attributo hidden */
.profileSettingsPage__photoRow > button[hidden]{
  display: none !important;
}
/* Stessi colori dell’area riservata / tema travel (teal #0b5c57), non viola */
.btn--profilePrimary{
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: #0b5c57;
  color: #fff;
  box-shadow: 0 4px 14px rgba(11, 92, 87, .22);
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn--profilePrimary:hover{
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(11, 92, 87, .28);
}
.btn--profilePrimary:active{
  transform: scale(0.98);
}
.btn--profileDangerOutline{
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: #fff;
  color: #0b5c57;
  border: 1px solid rgba(11, 92, 87, .28);
  transition: background .15s ease, border-color .15s ease;
}
.btn--profileDangerOutline:hover{
  background: rgba(11, 92, 87, .06);
  border-color: rgba(11, 92, 87, .45);
}
.profileSettingsPage__form{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.profileSettingsPage__label{
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}
.profileSettingsPage__input{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(11, 92, 87, .22);
  font-size: 15px;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.profileSettingsPage__input:focus{
  outline: none;
  border-color: #0b5c57;
  box-shadow: 0 0 0 3px rgba(11, 92, 87, .2);
}
.profileSettingsPage__hint{
  margin: -8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15, 23, 42, .58);
  font-weight: 600;
}
.profileSettingsPage__hint--phone{
  margin-top: -12px;
}
.profileSettingsPage__error{
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #b91c1c;
}
.btn--profileSave{
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  margin-top: 4px;
}

/* Modale ritaglio avatar */
.avatarCropModal{
  position: fixed;
  inset: 0;
  z-index: 400000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.avatarCropModal[hidden]{
  display: none !important;
}
.avatarCropModal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .72);
  backdrop-filter: blur(4px);
}
.avatarCropModal__panel{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  padding: 20px 18px 18px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, .2);
  border: 1px solid rgba(11, 92, 87, .12);
}
.avatarCropModal__title{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.avatarCropModal__hint{
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15, 23, 42, .72);
}
.avatarCropModal__viewport{
  --avatar-crop-view: min(72vw, 280px);
  width: var(--avatar-crop-view);
  height: var(--avatar-crop-view);
  max-width: 280px;
  max-height: 280px;
  margin: 0 auto 14px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid rgba(11, 92, 87, .35);
  background: #0f172a;
  touch-action: none;
  cursor: grab;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.avatarCropModal__viewport.is-dragging{
  cursor: grabbing;
}
.avatarCropModal__img{
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  height: auto;
  width: auto;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.avatarCropModal__zoomRow{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.avatarCropModal__zoomLabel{
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  flex-shrink: 0;
  width: 44px;
}
.avatarCropModal__zoomRange{
  flex: 1;
  min-width: 0;
  accent-color: #0b5c57;
}
.avatarCropModal__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.avatarCropModal__actions .btn{
  flex: 1 1 auto;
  min-width: 120px;
}

/* —— Pagina Preferiti (preferiti.html) —— */
.favoritesPage{
  padding-top: var(--header-h);
  min-height: 100vh;
  background: #fafbfc;
}
.favoritesPage__inner{
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 18px 32px;
}
.favoritesPage__header{
  margin-bottom: 22px;
}
.favoritesPage__kicker{
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(15, 23, 42, .5);
  letter-spacing: 0.02em;
}
.favoritesPage__title{
  margin: 0 0 16px;
  font-size: clamp(28px, 6vw, 34px);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
}
.favoritesPage__toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.favoritesPage__count{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.favoritesPage__clearAll{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(15, 23, 42, .55);
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  transition: color .15s ease;
}
.favoritesPage__clearAll:hover{
  color: #b91c1c;
}
.favoritesPage__clearIcon{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.favoritesPage__empty{
  margin: 28px 0 0;
  padding: 20px 16px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(15, 23, 42, .65);
  background: #fff;
  border-radius: 14px;
  border: 1px dashed rgba(15, 23, 42, .12);
}
.favoritesPage__list{
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.favoritesPack{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 22px rgba(15, 23, 42, .08);
  border: 1px solid rgba(15, 23, 42, .06);
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, box-shadow .15s ease;
}
.favoritesPack:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .1);
}
.favoritesPack:focus-visible{
  outline: 3px solid rgba(11, 92, 255, .35);
  outline-offset: 2px;
}
.favoritesPack__media{
  position: relative;
  aspect-ratio: 16 / 10;
  background: #e2e8f0;
}
.favoritesPack__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.favoritesPack__fav{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #7c3aed;
  box-shadow: 0 2px 12px rgba(15, 23, 42, .12);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, color .15s ease;
}
.favoritesPack__fav:hover{
  transform: scale(1.05);
  color: #6d28d9;
}
.favoritesPack__fav svg{
  width: 20px;
  height: 20px;
}
.favoritesPack__priceBadge{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  background: rgba(255, 255, 255, .96);
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
}
.favoritesPack__priceBadge strong{
  font-weight: 800;
}
.favoritesPack__body{
  padding: 14px 16px 16px;
}
.favoritesPack__cat{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(15, 23, 42, .55);
  text-transform: uppercase;
}
.favoritesPack__cat--fly{
  color: var(--blue);
}
.favoritesPack__plane{
  font-size: 14px;
  line-height: 1;
}
.favoritesPack__catDot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}
.favoritesPack__title{
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.favoritesPack__desc{
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(15, 23, 42, .75);
}
.favoritesPack__date{
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

/* Conferma “Elimina tutti” preferiti */
.favoritesClearModal{
  position: fixed;
  inset: 0;
  z-index: 400000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.favoritesClearModal[hidden]{
  display: none !important;
}
.favoritesClearModal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
}
.favoritesClearModal__panel{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 16px;
  padding: 22px 20px 18px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
  border: 1px solid rgba(11, 92, 87, .1);
}
.favoritesClearModal__title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.favoritesClearModal__text{
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(15, 23, 42, .78);
}
.favoritesClearModal__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.favoritesClearModal__btn{
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: filter .15s ease, background .15s ease;
}
.favoritesClearModal__btn--ghost{
  background: #f1f5f9;
  color: #334155;
  border: 1px solid rgba(15, 23, 42, .1);
}
.favoritesClearModal__btn--ghost:hover{
  background: #e2e8f0;
}
.favoritesClearModal__btn--ok{
  background: #0b5c57;
  color: #fff;
  box-shadow: 0 4px 14px rgba(11, 92, 87, .25);
}
.favoritesClearModal__btn--ok:hover{
  filter: brightness(1.06);
}

/* —— Storico viaggi (storico-viaggi.html) —— */
.historyPage__inner{
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 18px 32px;
}
.historyPage__header{
  margin-bottom: 8px;
}
.historyPage__title{
  margin: 0 0 20px;
  font-size: clamp(26px, 5.5vw, 32px);
  font-weight: 800;
  color: #0b5c57;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.historyPage__empty{
  background: #fff;
  border-radius: 16px;
  padding: 22px 20px 24px;
  border: 1px solid rgba(11, 92, 87, .12);
  box-shadow: 0 6px 22px rgba(15, 23, 42, .06);
}
.historyPage__emptyText{
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(15, 23, 42, .82);
}
.historyPage__emptyText strong{
  color: #0f172a;
  font-weight: 800;
}
.historyPage__emptyHint{
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(15, 23, 42, .62);
}

/* —— Prenotazioni e documenti (prenotazioni-documenti.html) —— */
.bookingsPage{
  background: #fff;
}
.bookingsPage__inner{
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 18px 40px;
}
.bookingsPage__section{
  margin: 0;
}
.bookingsPage__title{
  margin: 0 0 24px;
  font-size: clamp(26px, 5.5vw, 34px);
  font-weight: 800;
  color: #005b63;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.bookingsPage__emptyBox{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 220px;
  padding: 48px 28px;
  text-align: center;
  background: #fff;
  border: 1px dashed #ccc;
  border-radius: 10px;
  box-sizing: border-box;
}
.bookingsPage__emptyText{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #334155;
}
.bookingsPage__pastLink{
  font-size: 15px;
  font-weight: 800;
  color: #0b7a73;
  text-decoration: underline;
  text-decoration-color: rgba(11, 122, 115, 0.45);
  text-underline-offset: 3px;
}
.bookingsPage__pastLink:hover{
  color: #095c56;
  text-decoration-color: rgba(9, 92, 86, 0.55);
}

.bookingsPage__nextRoot{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Forza nascondimento affidabile dei blocchi prenotazioni quando JS imposta [hidden]. */
.bookingsPage__emptyBox[hidden],
.bookingsPage__cards[hidden],
.bookingsPage__loginHint[hidden]{
  display: none !important;
}

.bookingsPage__loginHint{
  margin: 0;
  padding: 20px 22px;
  font-size: 15px;
  line-height: 1.55;
  color: #334155;
  background: #f1f5f9;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.bookingsPage__cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bookingsPage__card{
  margin: 0;
  padding: 20px 20px 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}

.bookingsPage__cardHead{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 10px;
}

.bookingsPage__cardTitle{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.25;
  flex: 1 1 200px;
}

.bookingsPage__badge{
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}

.bookingsPage__badge--ok{
  background: rgba(11, 122, 115, 0.12);
  color: #0b7a73;
}

.bookingsPage__badge--warn{
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

.bookingsPage__cardDate{
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: #005b63;
  text-transform: capitalize;
}

.bookingsPage__cardRow{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: #334155;
}

.bookingsPage__cardRow:last-of-type{
  margin-bottom: 0;
}

.bookingsPage__cardLabel{
  font-weight: 700;
  color: #64748b;
  min-width: 7.5rem;
}

.bookingsPage__cardActions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.bookingsPage__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bookingsPage__btn--primary{
  background: #0b7a73;
  color: #fff;
  border-color: #0b7a73;
}

.bookingsPage__btn--primary:hover{
  background: #095c56;
  border-color: #095c56;
  color: #fff;
}

.bookingsPage__btn--ghost{
  background: #fff;
  color: #0b7a73;
  border-color: rgba(11, 122, 115, 0.35);
}

.bookingsPage__btn--ghost:hover{
  background: rgba(11, 122, 115, 0.06);
  border-color: rgba(11, 122, 115, 0.5);
  color: #095c56;
}