/* ===================== Mapa (globo 3D) — estilo radio.garden ===================== */

main.globe-page{ max-width:none !important; padding:0 !important; margin:0 !important; display:block !important; }
/* zera o espaçamento do contêiner pai (ex: #app-content) só quando essa
   página específica está carregada — sem afetar o resto do site */
body:has(.globe-page){ margin:0; }
#app-content:has(.globe-page),
body > div:has(> main.globe-page){ padding:0 !important; margin:0 !important; }

/* círculo fixo sempre no centro do mapa — igual radio.garden. Gira
   "carregando" enquanto o mapa está se movendo, e fica verde parado
   quando o movimento acalma e a busca daquele ponto central termina. */
.globe-click-ring{
  position:absolute; top:50%; left:50%; z-index:13; width:36px; height:36px; margin-left:-18px; margin-top:-18px;
  border-radius:50%; border:2px solid rgba(255,255,255,.65); pointer-events:none; opacity:0; transition:opacity .2s;
}
.globe-click-ring.is-visible{ opacity:1; }
.globe-click-ring.is-loading{ animation:globeRingSpin 0.9s linear infinite; border-top-color:transparent; border-right-color:transparent; }
.globe-click-ring.is-found{ border-color:#14ff8c; transition:border-color .25s; box-shadow:0 0 12px rgba(20,255,140,.5); }
@keyframes globeRingSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

.globe-container{
  position:relative; width:100%; height:calc(100vh - 64px); min-height:560px;
  background:#030b18; overflow:hidden; margin:0; display:block;
}
.globe-container canvas{ display:block; width:100%; height:100%; cursor:grab; transition:opacity .3s; }
.globe-container canvas:active{ cursor:grabbing; }

.globe-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  z-index:6; pointer-events:none; background:#030b18;
}

/* mapa de ladrilhos (Leaflet) — assume quando dá muito zoom, zoom de rua de verdade */
.tile-map{
  position:absolute; inset:0; z-index:5; opacity:0; pointer-events:none; transition:opacity .3s;
}
.tile-map.is-open{ opacity:1; pointer-events:auto; }
.tile-map__dot-wrap{ display:flex; align-items:center; justify-content:center; }
.tile-map__dot{
  display:block; width:11px; height:11px; border-radius:50%; background:#14ff8c; border:2px solid rgba(3,11,24,.8);
  box-shadow:0 0 6px rgba(20,255,140,.7);
}

.globe-back-btn{
  position:absolute; top:16px; left:20px; z-index:11; display:none; align-items:center; gap:6px;
  background:rgba(10,20,35,.85); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15);
  color:#fff; font-size:13px; font-weight:600; padding:9px 16px; border-radius:20px; cursor:pointer;
}
.globe-back-btn.is-open{ display:inline-flex; }
.globe-back-btn:hover{ background:rgba(255,153,0,.25); border-color:rgba(255,153,0,.5); }

/* barra superior compacta, sobreposta ao globo (não empurra o globo pra baixo) */
.globe-topbar{
  position:absolute; top:0; left:0; right:0; z-index:10; display:flex; align-items:center;
  justify-content:flex-end; gap:16px; padding:14px 20px;
  background:linear-gradient(180deg, rgba(3,11,24,.85), rgba(3,11,24,0));
  pointer-events:none;
}

.globe-search{ position:relative; width:260px; max-width:60vw; pointer-events:auto; }
.globe-search input{
  width:100%; box-sizing:border-box; padding:9px 14px; border-radius:20px; border:1px solid rgba(255,255,255,.15);
  background:rgba(10,20,35,.75); backdrop-filter:blur(6px); color:#fff; font-size:13px;
}
.globe-search input::placeholder{ color:rgba(255,255,255,.45); }
.globe-search__results{
  display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:20;
  background:rgba(10,20,35,.96); border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden;
  box-shadow:0 16px 32px rgba(0,0,0,.4); max-height:320px; overflow-y:auto;
}
.globe-search__results.is-open{ display:block; }
.globe-search__item{ padding:10px 14px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:2px; }
.globe-search__item:last-child{ border-bottom:none; }
.globe-search__item:hover{ background:rgba(255,255,255,.06); }
.globe-search__item strong{ font-size:13px; color:#fff; }
.globe-search__item span{ font-size:11px; color:rgba(255,255,255,.5); }

/* botões de zoom + localização — canto inferior direito, acima do botão
   flutuante de favoritos do site (que fica em torno de bottom:24px/right:24px) */
.globe-controls{
  position:absolute; bottom:190px; right:24px; z-index:10; display:flex; flex-direction:column; gap:8px;
}
.globe-controls button{
  width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
  background:rgba(10,20,35,.8); backdrop-filter:blur(6px); color:#fff; font-size:19px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1;
}
.globe-controls button:hover{ background:rgba(255,153,0,.25); border-color:rgba(255,153,0,.5); }
.globe-controls button.is-active{ background:var(--orange); border-color:var(--orange); color:#1c1204; }

/* aba pra reabrir o painel "Explorar" quando ele está recolhido */
.globe-explore-tab{
  position:absolute; top:50%; left:0; z-index:14; transform:translateY(-50%);
  width:26px; height:52px; border-radius:0 10px 10px 0; border:1px solid rgba(255,255,255,.12); border-left:none;
  background:rgba(10,20,35,.85); backdrop-filter:blur(6px); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s;
}
.globe-explore-tab.is-visible{ opacity:1; pointer-events:auto; }
.globe-explore-tab:hover{ background:rgba(255,153,0,.25); }

/* painel "Explorar" — lateral esquerda, lista de rádios da região.
   Fundo com opacidade (não sólido), pra dar pra ver o mapa por trás. */
.globe-explore-panel{
  position:absolute; top:0; left:0; bottom:0; z-index:15; width:320px; max-width:88vw;
  background:rgba(8,16,28,.82); backdrop-filter:blur(14px); border-right:1px solid rgba(255,255,255,.08);
  transform:translateX(-100%); transition:transform .25s ease; display:flex; flex-direction:column;
}
.globe-explore-panel.is-open{ transform:translateX(0); }
.globe-explore-panel.is-collapsed{ transform:translateX(-100%); }
.globe-explore-panel__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:20px 18px 14px; border-bottom:1px solid rgba(255,255,255,.08);
}
.globe-explore-panel__title{ color:#fff; font-size:16px; font-weight:800; }
.globe-explore-panel__subtitle{ color:rgba(255,255,255,.5); font-size:12px; margin-top:3px; }
.globe-explore-panel__head-btns{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.globe-explore-panel__collapse{ background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer; display:flex; }
.globe-explore-panel__collapse:hover{ color:#fff; }
.globe-explore-panel__close{ background:none; border:none; color:rgba(255,255,255,.5); font-size:22px; cursor:pointer; line-height:1; }
.globe-explore-panel__close:hover{ color:#fff; }
.globe-explore-panel__list{ flex:1; overflow-y:auto; padding:6px 0; }
.globe-explore-panel__hint{ padding:24px 18px; color:rgba(255,255,255,.4); font-size:12.5px; text-align:center; }
.globe-explore-panel__item{ display:flex; align-items:center; gap:10px; padding:9px 18px; cursor:pointer; }
.globe-explore-panel__item:hover{ background:rgba(255,255,255,.08); }
.globe-explore-panel__item img{ width:34px; height:34px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.globe-explore-panel__item-info{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.globe-explore-panel__item-info strong{ font-size:12.5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.globe-explore-panel__item-info span{ font-size:11px; color:rgba(255,255,255,.5); }

/* painel de info da rádio selecionada — compacto, horizontal, arrastável */
.globe-info-panel{
  position:absolute; bottom:190px; left:24px; z-index:16;
  background:rgba(10,20,35,.8); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px 14px; width:auto; max-width:calc(100% - 48px);
  display:flex; align-items:center; gap:11px;
  opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .2s, transform .2s;
}
.globe-info-panel.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.globe-info-panel.is-dragging{ transition:none; cursor:grabbing; }
.globe-info-panel__drag-handle{
  position:absolute; top:0; left:0; right:0; height:14px; cursor:grab; border-radius:16px 16px 0 0;
}
.globe-info-panel__close{
  position:absolute; top:-8px; right:-8px; background:#1c2c42; border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.6); width:20px; height:20px; border-radius:50%; font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.globe-info-panel__close:hover{ color:#fff; background:#28405f; }
.globe-info-panel img{ width:42px; height:42px; border-radius:9px; object-fit:cover; flex-shrink:0; }
.globe-info-panel__text{ min-width:0; max-width:150px; }
.globe-info-panel__name{ color:#fff; font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.globe-info-panel__loc{ color:rgba(255,255,255,.5); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.globe-info-panel__play{
  display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--orange); color:#1c1204;
  border:none; width:34px; height:34px; border-radius:50%; cursor:pointer;
}
.globe-info-panel__play:hover{ background:var(--orange-dark); }

@media (max-width:640px){
  .globe-container{ height:calc(100vh - 56px); }
  .globe-search{ max-width:52vw; }
  .globe-explore-panel{ width:100%; max-width:100%; }
  .globe-controls{ bottom:170px; }
}