/* =========================================================================
   PB Frontend Fixes — correzioni di garanzia (update-safe)
   Ogni blocco è marcato col numero del punto della lista garanzia.
   Verifica: staging + produzione, desktop e mobile.
   ========================================================================= */

/* -------------------------------------------------------------------------
   #9 — Freccia scroll-down homepage non centrata (desktop e mobile)
   Il widget aveva il bordo sinistro ancorato al 50% del contenitore;
   translateX(-50%) la centra davvero a ogni risoluzione.
   ------------------------------------------------------------------------- */
body.home .elementor-element-52287d31 { transform: translateX(-50%) !important; }

/* -------------------------------------------------------------------------
   #11 — Spazio bianco tra "Rendiamo il tuo viaggio" e la Newsletter (home).
   La newsletter è un blocco globale: agisco sulla sezione grigia (solo home).
   ------------------------------------------------------------------------- */
body.home .elementor-element-64ef3b5 { margin-bottom: -56px !important; }

/* -------------------------------------------------------------------------
   #7 — Icone (icon-list) che non si vedono: le <svg> collassano a 0×0 perché
   manca la regola base di dimensionamento (persa con l'azzeramento del tema).
   Ripristino il default Elementor: svg dimensionata sul font-size dell'icona.
   ------------------------------------------------------------------------- */
.elementor-icon-list-icon > svg { width: 1em; height: 1em; min-width: 1em; min-height: 1em; }
.elementor-icon-list-icon { display: inline-flex; align-items: center; }

/* -------------------------------------------------------------------------
   #4 — Icona WhatsApp che a volte è un cerchio verde senza simbolo:
   garantisco che l'svg del glifo abbia sempre dimensione e riempimento,
   così non può "svuotarsi" anche se il rendering dell'icona tarda.
   ------------------------------------------------------------------------- */
svg.e-fab-whatsapp { width: 1em; height: 1em; min-width: 1em; min-height: 1em; }
svg.e-fab-whatsapp path { fill: currentColor; }

/* -------------------------------------------------------------------------
   #3 — Etichetta "Luxury" sulle card dei loop: il badge (icon-box 1d73ddc)
   veniva tagliato dall'angolo arrotondato (5px) del contenitore card.
   NB: lo stesso widget usato "inline" in pagina è corretto → scoping .e-loop-item.
   Lo rientro di 6px dall'angolo e lo rendo un pill con angoli propri.
   ------------------------------------------------------------------------- */
.e-loop-item .elementor-element-1d73ddc { transform: translate(-6px, 6px); }
.e-loop-item .elementor-element-1d73ddc .elementor-icon-box-wrapper {
  border-radius: 6px;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   #6 — Pallini del carosello soggiorni-resort in conflitto con le card:
   la paginazione era assoluta a bottom:5px, sopra le card. Le porto nello
   spazio sotto il carosello aggiungendo padding-bottom al contenitore.
   ------------------------------------------------------------------------- */
.elementor-element-a705cb9 .swiper { padding-bottom: 30px; }
.elementor-element-a705cb9 .swiper-pagination { bottom: 0 !important; }

/* -------------------------------------------------------------------------
   #5 — Form Contatti: gli stepper "Subacquei" / "Non subacquei" (.riga-flex >
   .number-control) su mobile si disallineano perché l'etichetta "Non subacquei"
   va a capo e spinge giù lo stepper. Riservo 2 righe all'etichetta e allineo in
   alto le due colonne a larghezza uguale, così gli stepper restano allineati.
   ------------------------------------------------------------------------- */
.riga-flex { align-items: flex-start; }
.riga-flex .number-control { flex: 1 1 0; min-width: 0; }
@media (max-width: 767px) {
  .riga-flex { gap: 12px; }
  .riga-flex .number-control > p:first-child { min-height: 2.6em; }
}

/* -------------------------------------------------------------------------
   #13 — Etichette tab "Crociere subacquee" / "Soggiorni resort" non allineate
   su mobile (nested-tabs). Le centro e uniformo su mobile.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .e-n-tabs .e-n-tab-title { justify-content: center !important; }
  .e-n-tabs .e-n-tab-title-text { text-align: center !important; width: 100%; }
}

/* -------------------------------------------------------------------------
   #10 — Gallery immagini "giganti" nelle pagine crociera. Due casi:
   (a) WP gallery classica ([gallery]) -> griglia di miniature.
   (b) gallery costruita col loop di featured-image (widget 1d... del template
       crociera): limito l'altezza a miniatura con ritaglio, così non occupano
       più l'intera pagina. I link/lightbox esistenti restano.
   ------------------------------------------------------------------------- */
.gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 10px !important;
}
.gallery-item { width: auto !important; margin: 0 !important; float: none !important; }
.gallery-item img {
  width: 100% !important;
  height: 120px !important;
  object-fit: cover !important;
  border-radius: 6px;
  cursor: pointer;
}
/* (b) loop featured-image della gallery crociera */
.elementor-element-4ee150a img,
.elementor-element-4ee150a .elementor-widget-theme-post-featured-image img {
  max-height: 200px !important;
  object-fit: cover !important;
  border-radius: 6px;
}

/* -------------------------------------------------------------------------
   #2 — Offerte a tutta larghezza (loop-carousel): con una sola offerta Swiper
   la stira. Decisione cliente: card a larghezza normale, allineata a sinistra.
   Cap alla larghezza-card sugli slide + wrapper allineato a sinistra: i caroselli
   con abbastanza slide (già ≤ card-width) non cambiano; il singolo non si stira.
   ------------------------------------------------------------------------- */
.elementor-widget-loop-carousel .swiper-slide { max-width: 355px !important; }
.elementor-widget-loop-carousel .swiper-wrapper { justify-content: flex-start !important; }