/* Icone senza alone */
/* Togli il blur al menu laterale */
#menusidebar,
#menusidebar * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Solo controlli icone, senza blur */
.iconscontrol,
.iconscontentcontrol,
.iconsnavcontrol {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}




/* tutti gli hotspot con la I -----*/

/* Variabili tema */
:root{
  --hs-bg: rgba(255,255,255,0.7);
  --hs-text: #000;
  --hs-icon-size: 38px;
  --hs-font-size: 26px;
  --hs-padding-y: 7px;
  --hs-padding-x: 10px;
  --hs-radius: 18px;
  --hs-gap: 6px;           /* spazio tra icona e testo */
  --hs-shadow: 0 6px 16px rgba(0,0,0,0.15);
  --hs-border: 1px solid rgba(0,0,0,0.12);
}

/* Contenitore generale dell’hotspot personalizzato */
.pnlm-hotspot-base.custom-hotspot-content{
  /* z-index/transform sono gestiti dalla piattaforma: meglio NON forzarli */
  pointer-events: auto;
}

/* Wrapper grafico (background, padding, radius, shadow) */
.pnlm-hotspot-base.custom-hotspot-content .div_poi_wrapper{
  display: inline-flex;
  align-items: center;
  gap: var(--hs-gap);
  /*background: var(--hs-bg) !important;          /* override inline */
  color: var(--hs-text) !important;
  padding: var(--hs-padding-y) var(--hs-padding-x) !important;
  border-radius: var(--hs-radius);
  box-shadow: var(--hs-shadow);
  border: var(--hs-border);
  backdrop-filter: blur(4px);
  line-height: 1.2;
}

/* Icona Font Awesome */
.pnlm-hotspot-base.custom-hotspot-content .div_poi_wrapper i.fas{
  font-size: var(--hs-icon-size) !important;     /* override inline */
  color: var(--hs-text) !important;
  vertical-align: middle;
}

/* Testo */
.pnlm-hotspot-base.custom-hotspot-content .div_poi_wrapper span{
  font-size: var(--hs-font-size) !important;     /* se vuoi controllarlo */
  color: var(--hs-text) !important;
  font-weight: 600;                               /* opzionale */
  white-space: nowrap;                            /* oppure rimuovi per andare a capo */
}

/* Hover/focus (accessibilità + feedback) */
.pnlm-hotspot-base.custom-hotspot-content:focus .div_poi_wrapper,
.pnlm-hotspot-base.custom-hotspot-content:hover .div_poi_wrapper{
  box-shadow: 0 8px 22px rgba(0,0,0,0.20);
  transform: translateY(-1px);
}

/* Variante per tipo (solo se ti serve differenziare) */
.pnlm-hotspot-base.custom-hotspot-content.hotspot_t .div_poi_wrapper{
  /* es: background diverso o icona più grande */
}

/* Animazione pulse (se usi .pulse_icon) */
.pnlm-hotspot-base.custom-hotspot-content .pulse_icon{
  animation: hs-pulse 1.8s ease-in-out infinite;
}
@keyframes hs-pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.05); }
}

/* Mobile tuning */
@media (max-width: 640px){
  :root{
    --hs-icon-size: 40px;
    --hs-font-size: 29px;
    --hs-padding-y: 6px;
    --hs-padding-x: 9px;
    --hs-gap: 5px;
  }
}





















/* --- Vola30Metri: popup info --- */
.fancybox-caption__body {
  padding-bottom: 244px;
}

.fancybox-content {
        padding: 3px;
        border-radius: 10px;
    }

/* 1) Centro sempre il box */
.ui-resizable[data-type="container-content"] .info_box_content {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2) Mobile: mantieni il comportamento attuale (quasi full-width) */
@media (max-width: 991.98px) {
  .ui-resizable[data-type="container-content"] .info_box_content {
    width: 90% !important;   /* rispetta la tua regola originale */
    max-width: 90vw !important;
  }
}

/* 3) Desktop: più stretto e centrato */
@media (min-width: 192px) {
  .ui-resizable[data-type="container-content"] .info_box_content {
    /* scegli tu il limite: 560px è “snello”, aumenta/diminuisci se serve */
    width: clamp(360px, 70vw, 560px) !important;
    max-width: 360px !important;
  }
}

/* 4) Miglior fruibilità: altezza massima e scroll interno se serve */
.ui-resizable[data-type="container-content"] .info_box_content {
  max-height: min(85vh, 720px);
  overflow: auto;
  box-sizing: border-box;
}

/* --- Evidenzia la X di chiusura --- */
/* jQuery-Confirm */
.jconfirm .jconfirm-box .jconfirm-closeIcon {
  width: 48px; height: 48px;
  font-size: 26px; line-height: 1;
  border-radius: 12px;
  border: 2px solid #579f44;
  color: #579f44; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  right: 8px; top: 8px;            /* assicura distacco dai bordi */
  z-index: 2;                      /* sempre cliccabile sopra i contenuti */
}
.jconfirm .jconfirm-box .jconfirm-closeIcon:hover {
  background: #579f44; color: #fff;
}

/* Fancybox */
.fancybox-close-small {
  width: 48px; height: 48px;
  border-radius: 12px;
  border: 2px solid #579f44 !important;
  color: #579f44 !important; background: #fff !important;
  right: 8px !important; top: 8px !important;
}
.fancybox-close-small:hover {
  background: #579f44 !important; color: #fff !important;
}

/* Close “generiche” (fallback) */
.info_box_content .close,
.info_box_content .modal-close,
.info_box_content .mfp-close,
.info_box_content button[aria-label="Chiudi"],
.info_box_content [aria-label="Close"] {
  width: 48px; height: 48px;
  font-size: 26px; line-height: 1;
  border-radius: 12px;
  border: 2px solid #579f44;
  color: #579f44; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.info_box_content .close:hover,
.info_box_content .modal-close:hover,
.info_box_content .mfp-close:hover,
.info_box_content button[aria-label="Chiudi"]:hover,
.info_box_content [aria-label="Close"]:hover {
  background: #579f44; color: #fff; text-decoration: none;
}

/* Titolo verde Vola30Metri (se usi lo span .v30m-title nei tuoi box) */
.info_box_content .v30m-title {
  display: block; font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  color: #579f44; margin: 0 0 .5em;
}

/* ===========================
   CONFIGURAZIONE GENERALE
   =========================== */
:root{
  /* ---- MENU “list_alt_menu_icon” ---- */
  --altmenu-size: 28px;          /* dimensione icona */
  --altmenu-hit: 44px;           /* area clic minima */
  --altmenu-offset-x: 0px;       /* spostamento fine */
  --altmenu-offset-y: 0px;

  /* ---- MENU “menu_controls noselect” ---- */
  --mctrl-size: 35px;            /* dimensione icona (fa-bars) */
  --mctrl-hit: 44px;             /* area clic minima */
  --mctrl-offset-x: 2px;        /* spostamento orizzontale */
  --mctrl-offset-y: 60px;        /* spostamento verticale */

  /* ---- DROPDOWN (.dropdown.down) ---- */
  --dd-bg: #110e10;
  --dd-fg: #ffffff;
  --dd-hover-bg: #D73C0F;
  --dd-hover-fg: #110e10;
  --dd-radius: 14px;
  --dd-shadow: 0 12px 32px rgba(0,0,0,.28);
  --dd-width: 280px;
  --dd-pad: 2px;
  --dd-item-h: 44px;
  --dd-item-r: 10px;
  --dd-item-gap: 6px;
  --dd-icon-size: 18px;
  --dd-font-size: 15px;

  /* ---- LOGO mobile ---- */
  --logo-mobile-w: 57px;
  --logo-offset-x: 0px;   /* spostamento orizzontale mobile */
  --logo-offset-y: -10px;  /* spostamento verticale mobile */

  /* ---- POWEREDBY (logo basso a sx) ---- */
  --pb-offset-x: 6px;     /* distanza da sinistra */
  --pb-offset-y: -60px;     /* distanza dal basso */
  --pb-scale: 1;          /* scala (1 = 100%) */

  /* ---- INFO CONTROL (icona “i”) ---- */
  --info-size: 20px;      /* dimensione icona */
  --info-offset-x: 0px;   /* spostamento orizzontale */
  --info-offset-y: 5px;   /* spostamento verticale */

  /* ---- CUSTOM4 CONTROL (immagine al posto icona) ---- */
  --c4-img: url('/vr/viewer/icons/icon_1755529853238.png');
  --c4-w: 32px;
  --c4-h: 32px;
  
    /* manopole per custom4 */
  --c4-fixed-right: 70px;    /* distanza da destra */
  --c4-fixed-bottom: 77px;  /* distanza dal basso */
  --c4-size: 92px;           /* dimensione icona o immagine */
  --c4-img: url('/vr/viewer/icons/icon_1755529853238.png');  /* immagine sostitutiva */
  
}

/* ===== VARIABILI (desktop) ===== */
:root{
  /* CUSTOM CONTROL (sostituisce l'icona CC con un'immagine) */
  --c1-img: url('/vr/viewer/icons/icon_1755585781089.png'); /* <-- metti il tuo path */
  --c1-w: 332px;         /* larghezza immagine */
  --c1-h: 50px;         /* altezza immagine */
  --c1-offset-x: 4px;   /* micro-spostamento orizzontale (resta in toolbar) */
  --c1-offset-y: -8px;   /* micro-spostamento verticale (resta in toolbar) */
}

/* Variante MOBILE (regola qui se vuoi misure/offset diversi) */
@media (max-width: 767px){
  :root{
    --c1-img: url('/vr/viewer/icons/icon_1755585781089.png'); /* opzionale */
    --c1-w: 304px;
    --c1-h: 48px;
    --c1-offset-x: 4px;
    --c1-offset-y: -13px;
  }
}

/* ===== CUSTOM CONTROL: immagine al posto dell'icona + area esatta per il tooltip ===== */

/* 1) Contenitore del pulsante: lo rendiamo esattamente grande quanto l'immagine
      e gli applichiamo direttamente il background; così il tooltip si aggancia
      all'area giusta (sopra l'immagine). */
.controls_btn.custom_control{
  display: inline-block !important;
  width: var(--c1-w) !important;
  height: var(--c1-h) !important;
  background: var(--c1-img) no-repeat center / contain !important;

  /* posizione fine senza staccarlo dal flusso della toolbar */
  position: relative !important;
  transform: translate(var(--c1-offset-x), var(--c1-offset-y)) !important;

  /* togli “spazi” residui */
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;

  /* assicurati sia cliccabile e sopra ad overlay vari */
  pointer-events: auto !important;
  z-index: 2147483647 !important;
}

/* 2) Nascondi il glifo Font Awesome (anche il ::before) */
.controls_btn.custom_control i{
  display: none !important;
}
.controls_btn.custom_control i::before{
  content: "" !important;
}

/* 3) (Opzionale) se il tema aggiunge padding/margine al wrapper small-element 
.small-element.controls_btn.custom_control{
  padding: 0 !important;
  margin: 0 !important;
}*/

/* 4) (Opzionale) rifinitura tooltip: centratura sopra l’ancora */
.tooltipster-base.tooltipster-top .tooltipster-arrow{ left: 50% !important; transform: translateX(-50%) !important; }
/* Se la tua skin del tooltip ha classi diverse, lasciale così: il punto chiave
   è che l'ancora è il DIV .controls_btn.custom_control, quindi il tooltip parte
   esattamente sopra l'immagine. */







/* ===========================
   Spostamento del dropdown
   =========================== */
.dropdown.down{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  margin-right: 0px !important;
  margin-top: 86px !important;
  background: var(--dd-bg) !important;
  color: var(--dd-fg) !important;
  border-radius: var(--dd-radius) !important;
  box-shadow: var(--dd-shadow) !important;
  width: var(--dd-width) !important;
  padding: var(--dd-pad) !important;
  border: none !important;
  z-index: 10000 !important;
  overflow: hidden;
}
.dropdown.down ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--dd-item-gap) !important;
}
.dropdown.down li a,
.dropdown.down li button,
.dropdown.down li [role="menuitem"]{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: var(--dd-item-h) !important;
  padding: 0 12px !important;
  color: var(--dd-fg) !important;
  background: transparent !important;
  text-decoration: none !important;
  font-size: var(--dd-font-size) !important;
  border-radius: var(--dd-item-r) !important;
}
.dropdown.down li a:hover,
.dropdown.down li button:hover,
.dropdown.down li [role="menuitem"]:hover{
  background: var(--dd-hover-bg) !important;
  color: var(--dd-hover-fg) !important;
}
.dropdown.down li a i,
.dropdown.down li button i,
.dropdown.down li [role="menuitem"] i{
  font-size: var(--dd-icon-size) !important;
  width: 1.25em !important;
  text-align: center !important;
  color: currentColor !important;
}
.dropdown.down hr,
.dropdown.down .divider{
  border: none !important;
  height: 1px !important;
  background: rgba(255,255,255,.12) !important;
  margin: 6px 4px !important;
  border-radius: 1px !important;
}

/* ===========================
   list_alt_menu_icon
   =========================== */
#list_alt_menu_icon,
#list_alt_menu_icon .title,
#list_alt_menu_icon button,
#list_alt_menu_icon a{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: var(--altmenu-hit) !important;
  min-height: var(--altmenu-hit) !important;
}
#list_alt_menu_icon{
  transform: translate(var(--altmenu-offset-x), var(--altmenu-offset-y)) !important;
}
#list_alt_menu_icon i.fas.fa-bars,
#list_alt_menu_icon .title i{
  font-size: var(--altmenu-size) !important;
}

/* ===========================
   menu_controls noselect
   =========================== */
.menu_controls.noselect,
.menu_controls.noselect button,
.menu_controls.noselect a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: var(--mctrl-hit) !important;
  min-height: var(--mctrl-hit) !important;
  cursor: pointer;
}
.menu_controls.noselect{
  transform: translate(var(--mctrl-offset-x), var(--mctrl-offset-y)) !important;
}
.menu_controls.noselect i.fas.fa-bars{
  font-size: var(--mctrl-size) !important;
  line-height: 1 !important;
}

/* ===========================
   LOGO mobile
   =========================== */
@media (max-width: 767px){
  #ms_logo img,
  .logo img,
  [class*="logo" i] img{
    width: var(--logo-mobile-w) !important;
    height: auto !important;
    max-width: 100% !important;
    transform: translate(var(--logo-offset-x), var(--logo-offset-y));
  }
}

/* ===========================
   POWEREDBY
   =========================== */
.poweredby.noselect.poweredby_bottom_left.moved{
  position: fixed !important;
  bottom: var(--pb-offset-y) !important;
  left: var(--pb-offset-x) !important;
  transform: scale(var(--pb-scale)) !important;
  transform-origin: bottom left;
  z-index: 9999 !important;
}

/* ===========================
   INFO CONTROL
   =========================== */
.controls_btn.info_control{
  transform: translate(var(--info-offset-x), var(--info-offset-y)) !important;
  z-index: 9999 !important;
}
.controls_btn.info_control i{
  font-size: var(--info-size) !important;
}

/* ===========================
   CUSTOM4 CONTROL
   =========================== */
.controls_btn.custom4_control i{
  display: inline-block !important;
  width: var(--c4-w) !important;
  height: var(--c4-h) !important;
  font-size: 0 !important;
  color: transparent !important;
  background: var(--c4-img) no-repeat center/contain !important;
}

/* ===========================
   HARD-HIDE: list_alt_menu disattivato
   (evita che riappaia per colpa del nostro CSS)
   =========================== */
i.fas.fa-layer-group.small-element,
#list_alt_menu_icon,
#list_alt_menu_icon *,
.small-element.controls_btn.list_alt_menu_control,
[onclick="click_list_alt_menu()"]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ========== MENU (fa-bars) — nascondi 3s poi mostra ========== */
/* Sostituisce la patch precedente */
i.fas.fa-bars.small-element[onclick="click_menu_controls()"],
.menu_controls.noselect i.fas.fa-bars.small-element{
  display: inline-block;        /* assicura che l’elemento “esista” visivamente */
  opacity: 0;                   /* stato iniziale */
  visibility: hidden;
  pointer-events: none;
  animation: barsReveal .28s ease 3s forwards;  /* 3s di attesa, poi fade-in */
  will-change: opacity;
}

@keyframes barsReveal{
  0%   { opacity: 0; visibility: hidden; pointer-events: none; }
  1%   { opacity: 0; visibility: visible; pointer-events: auto; }
  100% { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* opzionale: rispetto preferenze utente */
@media (prefers-reduced-motion: reduce){
  i.fas.fa-bars.small-element[onclick="click_menu_controls()"],
  .menu_controls.noselect i.fas.fa-bars.small-element{
    animation: barsReveal 0s linear 3s forwards;
  }
}

/* ===========================
   PATCH: posizioni indipendenti
   =========================== */
:root{
  /* manopole */
  --info-fixed-right: 12px;   /* orizzontale info (da destra) */
  --info-fixed-bottom: 37px;  /* verticale info (da basso) */
  --info-size: 26px;          /* dimensione icona "i" */

  --pb-left: 12px;            /* orizzontale poweredby (da sinistra) */
  --pb-bottom: 12px;          /* verticale poweredby (dal basso) */
  --pb-scale: 1;              /* scala poweredby */
}

/* 1) INFO: posiziona FIXED e fuori dal flusso (non spinge più nessuno) */
.controls_btn.info_control{
  position: fixed !important;
  left: var(--info-fixed-right) !important;
  bottom: var(--info-fixed-bottom) !important;

  transform: none !important;   /* annulla eventuali translate precedenti */
  margin: 0 !important;         /* evita che margini influiscano */
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}
.controls_btn.info_control i{
  font-size: var(--info-size) !important;
  line-height: 1 !important;
  width: auto !important; height: auto !important;
}

/* 2) POWEREDBY: rendilo FIXED in basso a sinistra, indipendente */
.poweredby.noselect.poweredby_bottom_left{
  position: fixed !important;
  left: var(--pb-left) !important;
  bottom: var(--pb-bottom) !important;

  margin: 0 !important;                      /* ignora margin-bottom inline */
  transform: scale(var(--pb-scale)) !important;
  transform-origin: bottom left;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* (opzionale) variant mobile: valori diversi solo su smartphone */
@media (max-width: 767px){
  :root{
    --info-fixed-right: 12px;
    --info-fixed-bottom: 38px;
    --info-size: 24px;

    --pb-left: 10px;
    --pb-bottom: 10px;
    --pb-scale: 0.95;
  }
}

/* ===========================
   CUSTOM4 CONTROL (indipendente)
   =========================== */
:root{

}

/* Custom4 reso indipendente e cliccabile sopra a tutto */
.controls_btn.custom4_control{
  position: fixed !important;
  right: var(--c4-fixed-right) !important;
  bottom: var(--c4-fixed-bottom) !important;

  margin: 0 !important;
  transform: none !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

/* Sostituzione icona con immagine personalizzata */
.controls_btn.custom4_control i{
  display: inline-block !important;
  width: var(--c4-size) !important;
  height: var(--c4-size) !important;
  font-size: 0 !important;            /* nasconde l'icona font */
  color: transparent !important;
  background: var(--c4-img) no-repeat center/contain !important;
}

/* (opzionale) versione mobile */
@media (max-width: 767px){
  :root{
    --c4-fixed-right: 24px;
    --c4-fixed-bottom: 40px;
    --c4-size: 48px;
  }
}