/* ============================================
   Mapa STE — camada de BRANDING (carrega por último)
   Base: E:\Projetos\Site Novo\Brading\BRAND.md
   - Tokens da marca sobre as variáveis do styles.css
   - Menu do site no topo (header-embed) + barra do mapa logo abaixo
   - Nunito nos títulos, DM Sans no texto
   - Botões em pílula: ciano = informação, roxo = 3D, magenta = CTA
   ============================================ */

:root {
    /* Marca */
    --color-amber:   #F5A000;
    --color-lava:    #E8440A;
    --color-magenta: #E8187A;
    --color-purple:  #8B2FC9;
    --color-cyan:    #00B8E8;
    --color-navy:    #2D3165;
    --color-steel:   #3D87B5;
    --gradient: linear-gradient(90deg, #F5A000, #E8440A, #E8187A, #8B2FC9, #00B8E8);
    --font-display: 'Nunito', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    /* Variáveis do styles.css → paleta da marca */
    --bg-dark: #08090F;
    --bg-secondary: #141628;
    --bg-card: rgba(20, 22, 40, 0.75);
    --text-primary: #F0F2FF;
    --text-secondary: rgba(240, 242, 255, 0.60);
    --text-muted: rgba(240, 242, 255, 0.40);
    --text-dark: #08090F;
    --accent-primary: #00B8E8;
    --accent-secondary: #3D87B5;
    --accent-glow: rgba(0, 184, 232, 0.45);
    --glass-bg: rgba(14, 16, 32, 0.90);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --glass-radius: 16px;

    /* Layout: mapa em tela cheia, barra única flutuante */
    --map-toolbar-top: 12px;
    --map-toolbar-h: 52px;
}

/* ---------- Tipografia ---------- */
html, body, button, input, select, textarea {
    font-family: var(--font-body);
}
h1, h2, h3, h4,
.popup-card-header h2, .card-title, .tooltip-line1, .map-title,
.upload-modal-header h2, .upload-modal-header h3,
.friends-modal-header h2, .friends-modal-header h3 {
    font-family: var(--font-display);
}

html, body { background: var(--bg-dark); }

/* ---------- Mapa em tela cheia ---------- */
#map { height: 100dvh !important; }

/* ---------- Menu do site = só a gaveta lateral (aberta pelo ☰ da barra) ----------
   O HTML é o mesmo do admin do site (header-embed.php). Aqui a faixa do topo some:
   fica só o <nav> em modo "celular" em qualquer largura de tela. */
.map-fullscreen .site-header {
    height: 0;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 3000;            /* gaveta por cima de barra, botões e painel do mapa */
}
.map-fullscreen .site-header .header-container { height: 0; padding: 0; }
.map-fullscreen .site-header .header-logo { display: none; }

.map-fullscreen .site-header .header-nav {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    height: 100dvh;
    background: #0E1020;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
    padding: 76px 1.25rem 2rem;
    flex-direction: column;
    align-items: stretch;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}
.map-fullscreen .site-header .header-nav.open { right: 0; }
.map-fullscreen .site-header .nav-list { flex-direction: column; align-items: stretch; width: 100%; }
.map-fullscreen .site-header .nav-link { padding: 0.8rem 1rem; font-size: 1rem; }
.map-fullscreen .site-header .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(255, 255, 255, 0.03);
    border: 0;
    box-shadow: none;
    padding: 0 0 0 1rem;
    margin-top: 0.25rem;
}
/* Hambúrguer do site: só aparece como "X" de fechar, no canto da gaveta aberta */
.map-fullscreen .site-header .header-hamburger { display: none; }
.map-fullscreen .site-header .header-hamburger.active {
    display: flex;
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 3001;
}
.map-fullscreen .mobile-overlay { z-index: 2999; }

/* ☰ da barra do mapa (só aparece depois que o menu do site carregou) */
.map-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 0 9px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    flex-shrink: 0;
}
.site-menu-ready .map-menu-btn { display: flex; }
.map-menu-btn span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--text-primary);
    transition: transform 0.25s, opacity 0.25s;
}
.map-menu-btn:hover { border-color: var(--color-cyan); }
.map-menu-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.map-menu-btn.active span:nth-child(2) { opacity: 0; }
.map-menu-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Logo na barra */
.map-logo { display: flex; align-items: center; flex-shrink: 0; }
.map-logo img { height: 28px; width: auto; display: block; }

/* ---------- Barra do mapa (busca + login) ---------- */
.map-toolbar {
    top: var(--map-toolbar-top);
    width: auto;
    max-width: calc(100% - 32px);
    height: var(--map-toolbar-h);
    padding: 0 10px 0 18px;
    gap: 14px;
    border-radius: 100px;
    z-index: 1000;
}

.map-title {
    margin: 0;
    padding-left: 14px;
    border-left: 1px solid var(--glass-border);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    white-space: nowrap;
}
.map-title span {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#searchResort {
    width: 260px;
    padding: 9px 15px 9px 38px;
    background-color: rgba(255, 255, 255, 0.06);
}

.auth-section { margin-left: 0; }

.login-btn {
    background: var(--color-cyan);
    border-color: var(--color-cyan);
    color: #08090F;
    font-weight: 700;
    padding: 8px 16px;
}
.login-btn:hover {
    background: #38BDF8;
    border-color: #38BDF8;
    color: #08090F;
    transform: translateY(-1px);
}

/* Autocomplete */
.autocomplete-items { background: #1C2038; }
.autocomplete-items div:hover { background: rgba(0, 184, 232, 0.12); }

/* ---------- Painel lateral do resort ---------- */
.details-panel {
    top: calc(var(--map-toolbar-top) + var(--map-toolbar-h) + 12px);
    height: calc(100vh - var(--map-toolbar-top) - var(--map-toolbar-h) - 24px);
    background: rgba(14, 16, 32, 0.94);
}

.popup-card {
    background: #141628;
    border-color: rgba(255, 255, 255, 0.07);
}
.popup-card:hover {
    background: #181B30;
    border-color: rgba(255, 255, 255, 0.14);
}

.popup-card-header h2 {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.card-title {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
}

.snow-total-summary {
    background: rgba(0, 184, 232, 0.08);
    border-color: rgba(0, 184, 232, 0.45);
}

/* Botões do painel: pílulas da marca */
.popup-card-action { display: flex; justify-content: center; }
.popup-card-action + .popup-card-action { margin-top: -6px; }

.forecast-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 240px;
    padding: 12px 26px;
    border-radius: 100px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--color-cyan);
    color: #08090F !important;
    box-shadow: 0 4px 18px rgba(0, 184, 232, 0.30);
}
.forecast-button:hover { box-shadow: 0 6px 22px rgba(0, 184, 232, 0.45); }

.forecast-button.btn-3d {
    background: var(--color-purple);
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(139, 47, 201, 0.35);
}
.forecast-button.btn-3d:hover { box-shadow: 0 6px 22px rgba(139, 47, 201, 0.5); }

/* Selo 3D (balão do resort) e pin "só 3D" */
.badge-3d {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 100px;
    background: var(--color-purple);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 10px;
    line-height: 1.4;
    vertical-align: 1px;
}
.badge-powder { color: var(--color-amber); font-weight: 700; }

.pin-only3d span {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 100px;
    background: var(--color-purple);
    color: #fff;
    font: 800 11px/1 var(--font-display);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.85);
}

/* Balão permanente do resort */
.custom-resort-tooltip-modern {
    background: rgba(14, 16, 32, 0.92);
    border-color: rgba(255, 255, 255, 0.10);
    border-radius: 10px;
}
.custom-resort-tooltip-modern:before { border-top-color: rgba(14, 16, 32, 0.92); }

/* ---------- Controles e popups ---------- */
.map-controls button:hover { border-color: var(--color-cyan); color: var(--color-cyan); }
#toggleMediaBtn.active { background: var(--color-cyan); border-color: var(--color-cyan); color: #08090F; }
#toggleAirports.active { background: var(--color-steel); border-color: var(--color-steel); }

.intro-popup {
    top: calc(var(--map-toolbar-top) + var(--map-toolbar-h) + 14px);
    border-radius: 16px;
}
.intro-popup strong { color: var(--color-cyan); }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip { font-family: var(--font-body); }
.leaflet-popup-content a { color: var(--color-purple); font-weight: 700; }

/* ---------- Celular ---------- */
@media (max-width: 768px) {
    :root { --map-toolbar-top: 0px; }

    .map-toolbar {
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: var(--map-toolbar-h);
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 0 0 16px 16px;
        padding: 8px 12px;
        gap: 10px;
    }
    .map-title { display: none; }
    .search-container { flex: 1; min-width: 0; }
    #searchResort { width: 100%; }
    .auth-section { position: static; }

    .details-panel { top: auto; height: 70vh; }
    .intro-popup { top: calc(var(--map-toolbar-h) + 16px); }
    /* botões redondos acima do controle de camadas (canto inferior direito) */
    .map-controls { bottom: 76px; }
    .map-logo img { height: 24px; }
}

/* Celular estreito: "Entrar" vira só o "G" para caber logo + busca + login + ☰ */
@media (max-width: 480px) {
    .map-toolbar { gap: 8px; padding: 8px 10px; }
    .map-logo img { height: 20px; }
    .login-btn { font-size: 0; gap: 0; padding: 0; width: 38px; height: 38px; justify-content: center; border-radius: 50%; }
    .login-btn i { font-size: 1rem; }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .map-title { display: none; }
    #searchResort { width: 200px; }
}