/* ============================================
   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:   #FFD23F;
    --color-lava:    #FF5B2E;
    --color-magenta: #FF5B2E;
    --color-purple:  #3FA9F5;
    --color-cyan:    #3FA9F5;
    --color-navy:    #22384F;
    --color-steel:   #3FA9F5;
    --gradient: linear-gradient(90deg, #FF5B2E, #FF5B2E);
    --font-display: 'Archivo', sans-serif;
    --font-body: 'Archivo', sans-serif;

    /* Variáveis do styles.css → paleta da marca */
    --bg-dark: #0C1A2A;
    --bg-secondary: #16293D;
    --bg-card: rgba(22, 41, 61, 0.75);
    --text-primary: #F4F7FA;
    --text-secondary: rgba(244, 247, 250, 0.60);
    --text-muted: rgba(244, 247, 250, 0.40);
    --text-dark: #0C1A2A;
    --accent-primary: #3FA9F5;
    --accent-secondary: #3FA9F5;
    --accent-glow: rgba(63, 169, 245, 0.45);
    --glass-bg: rgba(22, 41, 61, 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: #16293D;
    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: #0C1A2A;
    font-weight: 700;
    padding: 8px 16px;
}
.login-btn:hover {
    background: #38BDF8;
    border-color: #38BDF8;
    color: #0C1A2A;
    transform: translateY(-1px);
}

/* Autocomplete */
.autocomplete-items { background: #22384F; }
.autocomplete-items div:hover { background: rgba(63, 169, 245, 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(22, 41, 61, 0.94);
}

.popup-card {
    background: #16293D;
    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(63, 169, 245, 0.08);
    border-color: rgba(63, 169, 245, 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: #0C1A2A !important;
    box-shadow: 0 4px 18px rgba(63, 169, 245, 0.30);
}
.forecast-button:hover { box-shadow: 0 6px 22px rgba(63, 169, 245, 0.45); }

.forecast-button.btn-3d {
    background: var(--color-purple);
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(63, 169, 245, 0.35);
}
.forecast-button.btn-3d:hover { box-shadow: 0 6px 22px rgba(63, 169, 245, 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;
}
.leaflet-container a.badge-3d, a.badge-3d { color: #fff; text-decoration: none; cursor: pointer; transition: filter .15s, transform .15s; }
a.badge-3d:hover { filter: brightness(1.25); transform: scale(1.08); color: #fff; }
/* resort já visitado (logbook "Meus resorts") */
.badge-visited { color: #FFD23F; margin-right: 4px; font-size: 0.95em; text-shadow: 0 0 6px rgba(255, 210, 63, 0.5); }
.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(22, 41, 61, 0.92);
    border-color: rgba(255, 255, 255, 0.10);
    border-radius: 10px;
}
.custom-resort-tooltip-modern:before { border-top-color: rgba(22, 41, 61, 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: #0C1A2A; }
#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; }
}

/* ---------- Painel do resort v2 (compacto, recolhível) ----------
   Abre da direita; a seta recolhe e deixa só o friso. Fechar/recolher não mexe no zoom. */
.details-panel {
    right: 0;
    width: 360px;
    height: auto;
    max-height: calc(100dvh - var(--map-toolbar-top) - var(--map-toolbar-h) - 24px);
    transform: translateX(calc(100% + 40px));
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.details-panel.open { right: 0; transform: translateX(0); }
.details-panel.open.collapsed { transform: translateX(100%); }
.details-panel.dragging { transition: none; }

.panel-tab-btn {
    position: absolute;
    top: 14px;
    left: -30px;
    width: 30px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(22, 41, 61, 0.94);
    border: 1px solid var(--glass-border);
    border-right: none;
    border-radius: 10px 0 0 10px;
    color: var(--color-cyan);
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: -4px 4px 14px rgba(0, 0, 0, 0.35);
}
.panel-tab-btn i { transition: transform 0.35s; }
.details-panel.collapsed .panel-tab-btn i { transform: rotate(180deg); }
.panel-tab-btn:hover { color: #fff; }

.close-panel-btn { top: 10px; right: 14px; font-size: 1.5rem; line-height: 1; }

.details-panel-content { padding: 14px 16px 16px; }

.rp { display: flex; flex-direction: column; gap: 10px; }

.rp-head { padding-right: 28px; }
.rp-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.15;
    color: var(--text-primary);
}
.rp-country { font-size: 0.8rem; color: var(--text-secondary); }

.rp-label {
    margin-bottom: 5px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.rp-snow, .rp-days, .rp-info { display: grid; gap: 5px; }
.rp-snow { grid-template-columns: repeat(3, 1fr); }
.rp-days { grid-template-columns: repeat(6, 1fr); }
.rp-info { grid-template-columns: repeat(4, 1fr); }

.rp-stat, .rp-day, .rp-info > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    background: #16293D;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    text-align: center;
}
.rp-stat { padding: 7px 4px; }
.rp-stat span { font-size: 0.68rem; color: var(--text-secondary); white-space: nowrap; }
.rp-stat strong { font-size: 1.05rem; color: var(--text-primary); }
.rp-stat-hl { background: rgba(63, 169, 245, 0.08); border-color: rgba(63, 169, 245, 0.45); }
.rp-stat-hl strong { color: var(--color-cyan); }

.rp-day { padding: 5px 0; }
.rp-day span { font-size: 0.62rem; color: var(--text-secondary); }
.rp-day strong { font-size: 0.9rem; color: var(--text-muted); }
.rp-day.has-snow strong { color: var(--color-cyan); }

.rp-weather { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.rp-weather th, .rp-weather td { padding: 4px 2px; text-align: center; white-space: nowrap; }
.rp-weather thead th { font-size: 0.62rem; font-weight: 600; color: var(--text-secondary); }
.rp-weather tbody th { text-align: left; font-weight: 500; color: var(--text-primary); }
.rp-weather tbody td { font-weight: 700; color: var(--text-primary); }
.rp-weather tbody tr { border-top: 1px solid rgba(255, 255, 255, 0.07); }

.rp-info > div { padding: 6px 2px; }
.rp-info span { font-size: 0.62rem; color: var(--text-secondary); white-space: nowrap; }
.rp-info strong { font-size: 0.85rem; color: var(--text-primary); }

.rp-actions { display: flex; gap: 8px; }
.rp-actions .forecast-button {
    flex: 1;
    min-width: 0;
    padding: 9px 10px;
    font-size: 0.82rem;
    gap: 6px;
    white-space: nowrap;
}
/* "Estive aqui" → logbook (meus-resorts.html?add=<slug>) */
.rp-been { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 7px 10px; border-radius: 50px;
    border: 1px solid var(--glass-border); color: var(--text-primary); font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: var(--transition-smooth); }
.rp-been i { color: var(--accent-primary); }
.rp-been span { color: var(--text-secondary); font-weight: 400; }
.rp-been:hover { border-color: var(--accent-primary); background: rgba(63, 169, 245, 0.08); }

/* Celular: painel lateral estreito (não mais folha de baixo) */
@media (max-width: 768px) {
    .details-panel {
        top: calc(var(--map-toolbar-h) + 10px);
        bottom: auto;
        left: auto;
        right: 0;
        width: min(330px, calc(100vw - 40px));
        height: auto;
        max-height: calc(100dvh - var(--map-toolbar-h) - 20px);
        border-radius: 16px 0 0 16px;
        transform: translateX(calc(100% + 40px));
    }
    .details-panel.open { transform: translateX(0); }
    .details-panel.open.collapsed { transform: translateX(100%); }
    .panel-tab-btn { left: -34px; width: 34px; height: 64px; font-size: 1.05rem; }
    .details-panel-content { padding: 12px 12px 14px; }
    .rp { gap: 9px; }
}