.elementor-506 .elementor-element.elementor-element-77b474a{--display:flex;}.elementor-506 .elementor-element.elementor-element-77b474a.e-con{--flex-grow:0;--flex-shrink:0;}/* Start custom CSS */```css
/* =========================================================
   LA PESCA IN ADRIATICO
   MAPPA DELLE ATTIVITÀ DI PESCA

   Struttura generale:
   1. Variabili grafiche
   2. Gestione barra di amministrazione WordPress
   3. Azzeramento spazi Elementor
   4. Contenitore generale della pagina
   5. Header della mappa
   6. Logo
   7. Selettore intervallo temporale
   8. Pulsante informazioni
   9. Area della mappa
   10. Adattamento tablet
   11. Adattamento smartphone
   ========================================================= */


/* =========================================================
   1. CONTENITORE DEL WIDGET ELEMENTOR
   ========================================================= */

.body.elementor-page-506 {
  width: 100%;
}


/* =========================================================
   2. VARIABILI GRAFICHE E DIMENSIONALI
   ========================================================= */

:root {
  /* Colori principali */
  --ka-navy: var(--e-global-color-primary, #09244d);
  --ka-teal: var(--e-global-color-accent, #1493c7);
  --ka-sky: var(--e-global-color-secondary, #8fc3df);
  --ka-white: var(--e-global-color-ffffff, #ffffff);
  --ka-ice: var(--e-global-color-ice, #eef5fa);
  --ka-text: var(--e-global-color-text, #18344a);
  --ka-map-bg: var(--e-global-color-map-bg, #2f3136);

  /* Bordo secondario */
  --ka-border-soft: color-mix(
    in srgb,
    var(--ka-sky) 45%,
    transparent
  );

  /* Altezza della barra WordPress */
  --wp-adminbar-h: 0px;

  /* Altezza minima dell'header */
  --ka-bar-h: 56px;
}


/* =========================================================
   3. BARRA DI AMMINISTRAZIONE WORDPRESS
   ========================================================= */

/* Barra WordPress su desktop */
body.admin-bar {
  --wp-adminbar-h: 32px;
}

/* Barra WordPress su tablet e smartphone */
@media screen and (max-width: 782px) {
  body.admin-bar {
    --wp-adminbar-h: 46px;
  }
}


/* =========================================================
   4. AZZERAMENTO DEGLI SPAZI DELLA PAGINA E DI ELEMENTOR
   ========================================================= */

html,
body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--ka-white) !important;
}

/*
 * Elimina margini, padding e limiti di larghezza introdotti
 * dai contenitori standard di Elementor.
 */
.elementor,
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget,
.elementor-widget-wrap,
.elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   5. CONTENITORE GENERALE DELLA PAGINA
   ========================================================= */

#pagina-mappa-kosmos {
  position: fixed;
  top: var(--wp-adminbar-h);
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
  flex-direction: column;

  width: auto;
  height: calc(100dvh - var(--wp-adminbar-h));

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;
  background: var(--ka-white);
  z-index: 1;
}


/* =========================================================
   6. HEADER DELLA MAPPA
   ========================================================= */

#barra-filtri-kosmos {
  flex: 0 0 auto;

  width: 100%;
  margin: 0 !important;
  padding: 0;

  overflow: hidden;
  background: var(--ka-navy);
}

/*
 * L'header utilizza tre colonne:
 *
 * 1. logo a sinistra;
 * 2. controllo temporale al centro;
 * 3. pulsante informazioni a destra.
 *
 * Le colonne laterali hanno la stessa larghezza flessibile:
 * in questo modo il controllo rimane centrato rispetto
 * all'intera finestra e non rispetto allo spazio residuo.
 */
#top-filtri-kosmos {
  display: grid;
  grid-template-columns:
    minmax(190px, 1fr)
    auto
    minmax(44px, 1fr);

  align-items: center;
  column-gap: 16px;

  width: 100%;
  min-height: var(--ka-bar-h);

  margin: 0;
  padding: 6px 12px;

  box-sizing: border-box;
}


/* =========================================================
   7. LOGO DELLA PIATTAFORMA
   ========================================================= */

.blocco-logo-kosmos {
  grid-column: 1;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  min-width: 0;
  justify-self: start;
}

#logoLinkKosmos {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: auto;
  max-width: 100%;

  color: inherit;
  text-decoration: none;
}

/* Logo completo mostrato su desktop */
.logo-desktop-kosmos {
  display: block !important;

  width: auto;
  height: auto;
  max-width: 210px;
  max-height: 44px;

  object-fit: contain;
}

/* Logo compatto nascosto su desktop */
.logo-mobile-kosmos {
  display: none !important;

  width: auto;
  height: auto;
  max-width: 42px;
  max-height: 42px;

  object-fit: contain;
}


/* =========================================================
   8. CONTROLLO DELL'INTERVALLO TEMPORALE
   ========================================================= */

#controlloIntervalloKosmos {
  grid-column: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  gap: 8px;

  justify-self: center;

  color: var(--ka-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;

  /*
   * Impedisce al testo di andare a capo su desktop.
   */
  white-space: nowrap;
}

/* Testo del controllo temporale */
.testo-intervallo-kosmos {
  color: color-mix(
    in srgb,
    var(--ka-white) 94%,
    transparent
  );
}

/* Testo lungo visibile su desktop */
.testo-desktop-kosmos {
  display: inline;
}

/* Testo abbreviato nascosto su desktop */
.testo-mobile-kosmos {
  display: none;
}


/* =========================================================
   9. MENU A TENDINA DELLE ORE
   ========================================================= */

#intervalloSelect {
  width: 80px;
  min-width: 80px;
  height: 34px;
  min-height: 34px;

  margin: 0;
  padding: 3px 22px 3px 9px;

  border: 1px solid color-mix(
    in srgb,
    var(--ka-sky) 55%,
    transparent
  );

  border-radius: 0;
  outline: none;

  background: color-mix(
    in srgb,
    var(--ka-white) 98%,
    transparent
  );

  color: var(--ka-text);

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
}

#intervalloSelect:hover {
  border-color: var(--ka-sky);
}

#intervalloSelect:focus,
#intervalloSelect:focus-visible {
  border-color: var(--ka-sky);

  box-shadow: 0 0 0 2px color-mix(
    in srgb,
    var(--ka-sky) 22%,
    transparent
  );
}

#intervalloSelect:disabled {
  opacity: 1;

  background: var(--ka-ice);

  color: color-mix(
    in srgb,
    var(--ka-text) 65%,
    var(--ka-white) 35%
  );

  cursor: not-allowed;
}


/* =========================================================
   10. PULSANTE INFORMAZIONI
   ========================================================= */

/*
 * Il contenitore è collocato esplicitamente nella terza
 * colonna della griglia e allineato al bordo destro.
 */
.blocco-info-kosmos {
  grid-column: 3;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;

  justify-self: end;
}

/* Pulsante quadrato con la lettera "i" */
#infoLinkKosmos {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  margin: 0;
  padding: 0;

  box-sizing: border-box;

  background: var(--ka-teal);
  color: var(--ka-white);

  border: 1px solid color-mix(
    in srgb,
    var(--ka-white) 38%,
    transparent
  );

  border-radius: 0;
  text-decoration: none;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

/*
 * Corregge leggermente la posizione visiva della "i"
 * corsiva all'interno del pulsante.
 */
#infoLinkKosmos span {
  display: block;
  transform: translateX(-1px);
}

#infoLinkKosmos:hover {
  background: color-mix(
    in srgb,
    var(--ka-teal) 82%,
    var(--ka-white)
  );

  border-color: var(--ka-white);
  color: var(--ka-white);

  transform: translateY(-1px);
}

#infoLinkKosmos:focus-visible {
  background: color-mix(
    in srgb,
    var(--ka-teal) 82%,
    var(--ka-white)
  );

  color: var(--ka-white);
  border-color: var(--ka-white);

  outline: 2px solid var(--ka-white);
  outline-offset: 2px;

  transform: translateY(-1px);
}


/* =========================================================
   11. AREA CONTENENTE LA MAPPA
   ========================================================= */

#area-mappa-kosmos {
  position: relative;

  flex: 1 1 auto;

  width: 100%;
  min-height: 0;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  background: var(--ka-map-bg);

  border: 0;
  box-shadow: none;
}


/* =========================================================
   12. MESSAGGIO DI CARICAMENTO DELLA MAPPA
   ========================================================= */

#messaggioMappaVuota {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px;

  box-sizing: border-box;

  background: transparent;
  color: var(--ka-white);

  font-size: clamp(18px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;

  z-index: 2;
}

/* Classe applicata da JavaScript quando la mappa è caricata */
#messaggioMappaVuota.is-hidden {
  display: none;
}


/* =========================================================
   13. IFRAME DELLA MAPPA
   ========================================================= */

#mappaIframe {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;
  min-height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: var(--ka-map-bg);

  border: 0;
  z-index: 1;
}


/* =========================================================
   14. SCHERMI DESKTOP DI DIMENSIONI RIDOTTE
   Fino a 1200 px
   ========================================================= */

@media (max-width: 1200px) {

  #top-filtri-kosmos {
    grid-template-columns:
      minmax(170px, 1fr)
      auto
      minmax(44px, 1fr);

    column-gap: 12px;
  }

  .logo-desktop-kosmos {
    max-width: 180px;
    max-height: 38px;
  }

  #controlloIntervalloKosmos {
    font-size: 14px;
  }
}


/* =========================================================
   15. TABLET
   Fino a 900 px
   ========================================================= */

@media (max-width: 900px) {

  :root {
    --ka-bar-h: 56px;
  }

  /*
   * Su tablet:
   * - logo compatto a sinistra;
   * - controllo al centro;
   * - pulsante info a destra.
   */
  #top-filtri-kosmos {
    grid-template-columns: 48px minmax(0, 1fr) 42px;

    column-gap: 10px;

    min-height: var(--ka-bar-h);
    padding: 6px 10px;
  }

  /* Nasconde il logo completo */
  .logo-desktop-kosmos {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;

    overflow: hidden !important;
  }

  /* Mostra il logo compatto */
  .logo-mobile-kosmos {
    display: block !important;

    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;

    object-fit: contain;
  }

  /* Mostra la frase abbreviata */
  .testo-desktop-kosmos {
    display: none;
  }

  .testo-mobile-kosmos {
    display: inline;
  }

  #controlloIntervalloKosmos {
    gap: 6px;

    font-size: 13px;
    line-height: 1.15;

    white-space: nowrap;
  }

  #intervalloSelect {
    width: 78px;
    min-width: 70px;
    height: 32px;
    min-height: 32px;

    padding: 3px 18px 3px 7px;

    font-size: 12px;
  }

  #infoLinkKosmos {
    width: 40px;
    height: 40px;

    font-size: 25px;
  }
}


/* =========================================================
   16. SMARTPHONE
   Fino a 600 px
   ========================================================= */

@media (max-width: 600px) {

  :root {
    --ka-bar-h: 52px;
  }

  #top-filtri-kosmos {
    grid-template-columns: 42px minmax(0, 1fr) 36px;

    column-gap: 5px;

    min-height: var(--ka-bar-h);
    padding: 4px 6px;
  }

  .logo-mobile-kosmos {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }

  #controlloIntervalloKosmos {
    min-width: 0;
    gap: 4px;

    font-size: 12px;
    line-height: 1.1;

    white-space: nowrap;
  }

  #intervalloSelect {
    width: 65px;
    min-width: 65px;
    height: 29px;
    min-height: 29px;

    padding: 2px 16px 2px 6px;

    font-size: 11px;
  }

  #infoLinkKosmos {
    width: 36px;
    height: 36px;

    font-size: 23px;
  }

  #messaggioMappaVuota {
    padding: 24px;

    font-size: 18px;
    line-height: 1.35;
  }
}


/* =========================================================
   17. SMARTPHONE MOLTO STRETTI
   Fino a 390 px
   ========================================================= */

@media (max-width: 390px) {

  #top-filtri-kosmos {
    grid-template-columns: 38px minmax(0, 1fr) 34px;

    column-gap: 3px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .logo-mobile-kosmos {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }

  #controlloIntervalloKosmos {
    gap: 3px;
    font-size: 11px;
  }

  #intervalloSelect {
    width: 58px;
    min-width: 58px;
    height: 28px;
    min-height: 28px;

    padding-right: 14px;
    padding-left: 5px;

    font-size: 10px;
  }

  #infoLinkKosmos {
    width: 34px;
    height: 34px;

    font-size: 22px;
  }
}
```/* End custom CSS */