/* base */
body { margin:0; font-family:Inter,sans-serif; }
.header-container {
  position: fixed; top:0; left:0; right:0;
  background: var(--panel-bg);
  display: flex; align-items: center;
  gap:0.5rem; padding:0.5rem;
  z-index:1000;
}
.unified-search { display: flex; gap:0.5rem; flex:1; }

/* 00. Rimuovo il toggle giorno/notte */
.theme-toggle-container {
  display: none !important;
}

/* Utility per elementi visibili solo su mobile */
.mobile-only {
  display: none;
}
@media (max-width: 600px) {
  .mobile-only {
    display: inline-block;
  }
}

/* style.css v1.5 */

/* 0. Theming Variables & Transitions */
:root {
  --bg-color: #121212;
  --text-color: #EAEAEA;
  --accent-color: #B22222;
  --panel-bg: #1E1E1E;
  --card-bg: #2A2A2A;
  --filter-bg: #2A2A2A;
  --map-default-fill: #555;
  --map-highlight-color: #4caf50;
}
html.dark { --bg-color: #121212;
  --text-color: #EAEAEA;
  --accent-color: #B22222;
  --panel-bg: #1E1E1E;
  --card-bg: #2A2A2A;
  --filter-bg: #2A2A2A;
  --map-default-fill: #555;
  --map-highlight-color: #4caf50
}
* {
  transition: background-color 0.3s, color 0.3s;
}

/* 1. Reset & Base */
html, body {
  margin: 0; padding: 0; box-sizing: border-box;
  height: 100%; background: var(--bg-color); color: var(--text-color);
}
* { box-sizing: inherit; }
body, h1,h2,h3,h4,h5,h6, button, input, label, select {
  font-family: "Inter", sans-serif;
}
body { overflow-x: hidden; }

/* 2. Intro */
#intro-screen {
  position: fixed; top:0; left:0; width:100%; height:100%; overflow:hidden; display:flex;
  justify-content:center; align-items:center; background:#000; z-index:1000;
}
#intro-video {
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1;
}
.intro-overlay {
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:rgba(0,0,0,0.6); z-index:2;
}
#intro-logo {
  max-width:200px; margin-bottom:1.5rem; filter:brightness(0) invert(1);
}
#enter-btn {
  font-size: 1.6rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(178,34,34,0.85), rgba(200,50,50,0.85));
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  transition: transform 0.2s, box-shadow 0.2s;
}
#enter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.7);
}

/* 3. Header */
.header-container {
  background: var(--panel-bg);
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  min-height: 50px;
}
.logo-container img {
  max-width:200px; filter:brightness(0) invert(1); max-height: 120px;
}
.unified-search {
  flex: 1;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  position: relative;
}
.unified-search select,
.unified-search input {
  padding:0.4rem 0.8rem; font-size:0.9rem; border:none; border-radius:4px;
  background:var(--card-bg); color:var(--text-color);
}
.unified-search input { flex:1; }
.suggestions-list {
  position:absolute; top:100%; left:0; width:100%; margin-top:0.3rem;
  background:var(--card-bg); border-radius:6px; max-height:250px;
  overflow-y:auto; z-index:1001; list-style:none; padding:0;
}
.suggestions-list li {
  display:flex; align-items:center; padding:0.5rem; cursor:pointer;
}
.suggestions-list li:hover { background:rgba(255,255,255,0.1); }
.suggestions-list img {
  width:40px; margin-right:0.75rem; border-radius:4px;
}
.theme-toggle-container button {
  background:none; border:none; font-size:1.4rem; cursor:pointer;
  color:var(--text-color); transition:transform 0.3s;
}
.theme-toggle-container button:hover { transform:scale(1.1); }

/* 4. Layout Principale */
.layout-container {
  display:flex; justify-content:space-between; padding:2rem;
  max-width:1400px; margin:0 auto;
}

/* 5. Colonna Sinistra */
.search-container {
  flex:0.35; display:flex; flex-direction:column; gap:1rem; padding:1rem;
}
.entity-media {
  background:var(--card-bg); border-radius:8px; overflow:hidden;
  text-align:center; padding:1rem; margin-bottom:1rem;
}
.entity-media img {
  max-width:150px; height:auto; border-radius:6px;
}
.filter-section {
  background:var(--panel-bg); padding:1.5rem; border-radius:8px;
  box-shadow:0 2px 15px rgba(0,0,0,0.5);
}
.only-streaming-row { margin-bottom:1rem; }
.only-streaming-label {
  display:flex; align-items:center; gap:0.5rem; cursor:pointer;
}
.services-filter {
  display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem;
}
.service-chip {
  display:inline-flex; align-items:center; gap:0.4rem;
  background:var(--filter-bg); padding:0.5rem 0.8rem; border-radius:50px;
  cursor:pointer; transition:transform 0.2s, background 0.3s;
}
.service-chip img {
  width:24px; height:24px; filter:grayscale(100%); opacity:0.6;
  transition:filter 0.3s, opacity 0.3s;
}
.services-filter input[type="checkbox"] { display:none; }
.services-filter input:checked + .service-chip {
  background:var(--accent-color); transform:scale(1.05);
}
.services-filter input:checked + .service-chip img {
  filter:none; opacity:1;
}
.filter-buttons {
  display:flex; gap:0.5rem; margin-top:1rem;
}
.filter-buttons button {
  flex:1; background:var(--accent-color); color:#fff; border:none;
  padding:0.8rem; border-radius:50px; cursor:pointer;
  transition:filter 0.3s;
}
.filter-buttons button:hover { filter:brightness(1.1); }
.info-section {
  background:var(--panel-bg); padding:1.5rem; border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,0.5);
}

/* 6. Colonna Destra */
.map-container {
  flex:0.65; display:flex; flex-direction:column;
  background:var(--card-bg); border-radius:12px;
  padding:1rem; box-shadow:0 2px 15px rgba(0,0,0,0.3); position: sticky; top: 80px; max-height: calc(100vh - 100px);
  overflow: hidden;
}
.layout-container {
  gap: 2rem;               /* aumenta lo spazio orizzontale tra colonne */
}

.search-container {
  row-gap: 1.5rem;         /* più spazio verticale tra blocchi */
}

.map-nav {
  display:flex; gap:1rem; justify-content:center; margin-bottom:1rem;
}
.map-nav-btn {
  background:var(--accent-color); color:#fff; border:none;
  padding:0.5rem 1rem; border-radius:4px; cursor:pointer;
  transition:filter 0.3s;
}
.map-nav-btn:hover { filter:brightness(1.1); }

/* 7. Provider Icons List */
.provider-list {
  display:flex; flex-wrap:nowrap; overflow-x:auto; gap:10px;
  align-items:center; padding-bottom:0.5rem;
}
/* nasconde i contenitori senza loghi */
.provider-list:empty{
  display:none;          /* niente barra grigia */
  margin:0;              /* elimina l'eventuale spazio residuo */
  padding:0;
}

/* 8. World View Flags & Cover */
.flags-container {
  display:flex; gap:0.25rem; flex-wrap:wrap; justify-content:flex-start;
}
.world-flag {
  width:20px; height:auto; cursor:pointer; border-radius:2px;
}

/* 9. Tooltip */
.tooltip {
  position:absolute; background:rgba(0,0,0,0.75); color:#fff;
  padding:4px 8px; border-radius:4px; font-size:0.75rem;
  pointer-events:none; opacity:0; transition:opacity 0.2s; z-index:1000;
}

/* 10. Footer */
.legal {
  font-size:0.75rem; text-align:center; padding:1rem 0;
  color:var(--text-color);
}
.legal a { color:var(--text-color); text-decoration:underline; }

/* 11. Responsività */
@media (max-width: 992px) {
  .layout-container {
    flex-direction: column;
    align-items: center;
  }
  .search-container {
    width: 100%;
    max-width: 600px;
    margin-bottom: 2rem;
  }
  .map-container {
    width: 100%;
  }
  #mapContainer {
    min-height: 400px;
  }
}

@media (max-width: 768px) {
  #mapContainer {
    min-height: 300px;
  }
}

/* Loading spinner nei suggerimenti */
.spinner {
  border: 3px solid var(--card-bg);
  border-top: 3px solid var(--accent-color);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
  margin: 0.5rem auto;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* Riduce lo spacing tra i film nella lista del regista */
.country-movie-item {
  margin: 0.15rem 0;      /* prima era 0.5rem 0 */
  padding: 0.2rem 0.6rem; /* prima era 0.5rem 1rem */
}
/* allinea il “+” accanto al titolo del film (desktop) */
.country-movie-title{
  display:flex;                /* titolo e + sulla stessa riga   */
  align-items:center;
  column-gap:0.5rem;           /* leggero spazio fra testo e +   */
}

.country-movie-title h5{
  margin:0;                    /* rimuove extra spazio verticale */
  font-weight:600;
  font-size:1rem;              /* stessa gerarchia della lista   */
  flex:1;                      /* prende tutto lo spazio lasciando il + a destra */
}

.country-movie-toggle{
  cursor:pointer;
  user-select:none;
  font-size:1.25rem;           /* grandezza visibile ma discreta */
  line-height:1;               /* niente “salti” verticali       */
}

/* BACK BUTTON (desktop – stesso look) ------------------------- */
.back-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-bottom:1rem;
  background:none;
  border:none;
  color:var(--accent-color);
  font-size:1rem;
  cursor:pointer;
}

/* --- MOBILE VIEW: nascondi layout desktop e gestisci tab bar --- */
/* .mobile-view { display: none; } */

.mobile-nav { display: none; }

/* -------------- MOBILE VIEW (senza duplicati) -------------- */
.mobile-nav { display: none; }


/* ---------- PANNELLO COUNTRY (mobile only) ---------- */
.country-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 0; overflow: hidden;
  background: var(--panel-bg);
  transition: height 0.3s ease;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.4);
  z-index: 1002;
}
.country-panel.open { height: 40vh; }
.country-panel.full { height: 100vh; }
.panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 1rem; border-bottom: 1px solid #333;
}
.panel-content {
  padding: 1rem; overflow-y: auto; height: calc(100% - 3rem);
}

/* ---------- FILTER DROPDOWN (mobile only) ---------- */
.filter-dropdown {
  position: absolute; top: 60px; left: 0; right: 0;
  background: var(--panel-bg); border-bottom: 1px solid #333;
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
  z-index: 1001;
}
.filter-dropdown.open { max-height: 60vh; }
.filter-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 1rem; border-bottom: 1px solid #444;
}
.filter-body { padding: 1rem; }
.filter-apply {
  width: 100%; padding: 0.8rem; margin-top: 1rem;
  background: var(--accent-color); color: #fff; border: none;
  border-radius: 4px;
}

/* ---------- HIDE ON DESKTOP ---------- */
@media (min-width: 601px) {
  #mobileCountryPanel, #mobileFilterDropdown, #filterToggle, #panelExpandBtn, #panelCloseBtn, #filterCloseBtn, #applyFilterMobile {
    display: none;
  }
}
/* Sposta giù i risultati mobili per non sovrapporsi a header+search */
#resultsView .search-container {
  margin-top: 100px; /* regola in base all’altezza effettiva di header+search */
}

/* nascondi desktop e mappa */
@media(max-width:600px) {
  .layout-container,
  .map-container,
  #mapView { display: none!important; }
  .mobile-only { display: inline-block; }

  /* spazio per header */
  #main-content, main#mobileMain { padding-top:60px; }

  /* risultati */
  #resultsView {
    display: block; padding:1rem;
  }
  .entity-media img {
    max-height:200px; width:auto; display:block; margin:0 auto 1rem;
  }

  /* World view */
  #mobileWorldView {
    display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center;
    margin-bottom:1rem;
  }
  #mobileWorldView img {
    width:30px; cursor:pointer; border-radius:2px;
  }

  /* filtro dropdown */
  #mobileFilterDropdown {
    position: absolute; top:60px; left:0; right:0;
    background: var(--panel-bg);
    max-height:0; overflow:hidden;
    transition: max-height .3s;
    z-index:1001;
  }
  #mobileFilterDropdown.open { max-height:50vh; overflow-y:auto; }

  /* suggerimenti */
  .suggestions-list {
    position:absolute; top:60px; left:0; right:0;
    background:var(--card-bg); list-style:none; margin:0; padding:0.5rem 0;
    max-height:200px; overflow-y:auto; z-index:1002;
  }
}
/* evita che il poster finisca sotto l’header fisso (desktop) */
.layout-container{margin-top:110px}

/* --- type-writer desktop --------------------------------------- */
.type-hint{
  font-size:1.25rem;
  font-weight:600;
  text-align:center;
  color:#dfdfdf;
}
@keyframes blink{50%{opacity:0}}
.cursor{
  display:inline-block;
  animation:blink 1s step-end infinite;
}