/* — RESET & BASE — -------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,sans-serif;background:#121212;color:#eaeaea;overflow-x:hidden}
.hidden{display:none!important}

/* — INTRO ----------------------------------------------------------- */
#intro-screen{position:fixed;inset:0;z-index:1000;background:#000;display:flex;justify-content:center;align-items:center}
#intro-video{position:absolute;inset:0;object-fit:cover}
.intro-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);display:flex;flex-direction:column;justify-content:center;align-items:center}
#intro-logo{max-width:200px;margin-bottom:0.2rem;filter:brightness(0)invert(1)}
#enter-btn{padding:.7rem 1.4rem;font-size:1.2rem;background:linear-gradient(135deg,rgba(178,34,34,.85),rgba(200,50,50,.85));border:2px solid rgba(255,255,255,.3);border-radius:4px;color:#fff;cursor:pointer}

/* — HEADER ---------------------------------------------------------- */
.header-container{position:fixed;top:0;left:0;right:0;
 background:#1e1e1e;display:flex;align-items:center;
 padding: calc(env(safe-area-inset-top) + 0.8rem) 1rem 0.8rem;
 gap:.6rem;z-index:900}
.large-header{min-height:80px}
#header-logo {height:5rem;filter:brightness(0)invert(1)}   /* logo +30 % */
.unified-search{flex:1;display:flex;gap:.5rem;flex-wrap:wrap;position:relative}
.unified-search select,
.unified-search input{padding:.6rem .8rem;font-size:1rem;border:none;border-radius:4px;background:#2a2a2a;color:#eaeaea;height:2.5rem;min-width:0}
.suggestions-list{position:absolute;top:110%;left:0;width:100%;background:#2a2a2a;border-radius:6px;max-height:210px;overflow-y:auto;z-index:1001;list-style:none}
.suggestions-list li{display:flex;align-items:center;padding:.5rem;cursor:pointer;border-bottom:1px solid #333}
.suggestions-list li:hover{background:rgba(255,255,255,.1)}
.suggestions-list img{width:40px;margin-right:.75rem;border-radius:4px}

/* header buttons */
#open-filters,#show-map{background:#b22222;color:#fff;padding:.6rem 1rem;border:none;border-radius:20px;font-size:1rem;cursor:pointer;flex:0 0 calc(50% - .25rem);text-align:center}
@media(min-width:460px){#open-filters,#show-map{flex:0 0 auto}}

/* — MAIN ------------------------------------------------------------ */
/* lo spacing top lo mettiamo via variabile --hdr più 1rem */
main#main-content{padding: calc(var(--hdr-height,80px) + 1rem) 1rem 1.2rem; max-width:480px;margin:0 auto}
#welcome-msg{font-size:1.8rem;
    font-weight:800;
    text-align:center;
    line-height:1.35;
    color:#d2d2d2;  
}
/* type-writer cursor */
@keyframes blink {50%{opacity:0}}
.cursor{
  display:inline-block;
  animation: blink 1s step-end infinite;
}
.entity-media{text-align:center;margin-bottom:1rem}
.entity-media img{max-width:200px;width:100%;border-radius:6px}
.flags-container{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1rem}
.flags-container img{width:26px;height:auto;border-radius:2px;cursor:pointer}
.info-section{background:#1e1e1e;padding:1rem;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.5)}

/* — MODALE FILTRI --------------------------------------------------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:950;overflow-y:auto}
.modal-content{background:#2a2a2a;padding:1rem;border-radius:8px;width:95%;max-width:420px}
.only-streaming-label{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;cursor:pointer}

.provider-chip{display:flex;align-items:center;gap:.3rem;background:#333;color:#eaeaea;border-radius:40px;padding:.25rem .6rem;font-size:.85rem;cursor:pointer;user-select:none;flex:0 0 calc(50% - .3rem);justify-content:center}
.provider-chip img{width:18px;height:18px;object-fit:contain;border-radius:3px}
input[type="checkbox"]:checked + .provider-chip{background:#b22222;color:#fff}

.providers-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.providers-list input{display:none}
.providers-list label img{width:18px;height:18px;object-fit:contain}

.btn-red{width:100%;padding:.6rem;background:#b22222;color:#fff;border:none;border-radius:50px;font-size:1rem;cursor:pointer}

/* — MAP OVERLAY ----------------------------------------------------- */
.close-btn{position:absolute;top:1rem;right:1rem;background:none;color:#fff;font-size:1.5rem;border:none;cursor:pointer;z-index:960}
#mapContainer{width:100%;height:calc(100vh - 3rem);/* centratura */
  display:flex;
  justify-content:center;   /* centro orizzontale */
  align-items:center;       /* centro verticale   */}
#map-overlay{z-index:980}

/* centra la mappa in orizzontale e verticale (solo mobile) */
  #map-overlay{
    display:flex;                 /* diventa flex-box            */
    justify-content:center;       /* centro orizzontale          */
    align-items:center;           /* centro verticale            */
  }
  #mapContainer{
    position:relative;            /* non più absolute            */
    width:90vw;                   /* leggero margine ai lati     */
    height:80vh;                  /* abbassa un po’ la top-bar   */
    transform:none;               /* niente translate            */
  }
/* lo <svg> generato da D3 deve adattarsi */
#mapContainer svg{
  max-width:100%;
  height:auto;
}

/* provider logos nei risultati */
.provider-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
/* nasconde i contenitori senza loghi */
.provider-list:empty{
  display:none;
  margin:0;
  padding:0;
}
.provider-list img{width:35px;height:auto}

/* FOOTER LEGAL MOBILE */
.legal{
  font-size:0.75rem;
  text-align:center;
  color:#888;
  padding:1.5rem 1rem 2.5rem;   /* spazio per la barra iOS */
}
.legal a{ color:#888888;text-decoration:underline; }

/* mantiene visibile l’area del testo digitato anche quando è vuota */
#twText{min-width:1ch}

/* cursore lampeggiante */
.cursor{
  display:inline-block;
  width:1ch;
  animation:blink 1s step-end infinite;
}

@keyframes blink{50%{opacity:0}}

/* se la card è vuota oppure ha la classe .hidden → non occupa spazio */
.info-section:empty,
.info-section.hidden{
  display:none;
}

/* --- BACK BUTTON (mobile) ------------------------------------ */
.back-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-bottom:.8rem;          /* distanza dal titolo */
  background:none;
  border:none;
  color:var(--accent-color);
  font-size:1rem;
  cursor:pointer;
}