/* My Snow Life — barra de cima padrão, igual à do Mapa (STE/Mapa2: styles.css + brand.css + msl.css).
   Usada pela Previsão (STE/ForecastAPI/api/MslHeader.php) e pelo 3D. Abas Forecast · Mapa · 3DMaps: msl-sys.css. Marca: Branding/BRAND.md.
   Medidas copiadas do Mapa no ar (27/10): pílula flutuante de 52 px no computador; faixa de 56 px colada no topo no celular. */
:root { --ste-header-h: 80px; --msl-bar-h: 64px; }   /* espaço que a página deixa em cima (Previsão: body.ste-header-offset; 3D: --msl-bar-h somado ao topo dos painéis) */

.msl-bar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1000;
    width: max-content; max-width: calc(100% - 32px); height: 52px; box-sizing: border-box;
    display: flex; align-items: center; gap: 14px; padding: 0 10px 0 18px;
    background: rgba(14, 16, 32, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 100px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    font-family: 'Archivo', sans-serif; color: #F0F2FF; }
.msl-bar .msl-logo { flex: none; display: block; }
.msl-bar .msl-logo img { height: 30px; width: auto; display: block; }
.msl-bar .msl-title { margin: 0; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .08);
    font: 800 16px/1 'Archivo', sans-serif; font-stretch: 112%; letter-spacing: -.01em; white-space: nowrap; color: #F0F2FF; }
.msl-bar .msl-title span { color: #FF5B2E; }

/* busca de resort */
.msl-search { position: relative; flex: none; }
.msl-search input { width: 260px; height: 38px; box-sizing: border-box; padding: 9px 15px 9px 38px; border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .06); color: #F0F2FF;
    font: 14.4px 'DM Sans', sans-serif; outline: none; transition: border-color .2s, background-color .2s; }
.msl-search input::placeholder { color: rgba(244, 247, 250, .62); }
.msl-search input:focus { border-color: #3FA9F5; background: rgba(255, 255, 255, .1); }
.msl-search > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: rgba(244, 247, 250, .62); font-size: 14.4px; pointer-events: none; }
.msl-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; display: block; flex: none; }   /* ícones em SVG (3D, sem Font Awesome) */
.msl-search > .msl-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(244, 247, 250, .62); pointer-events: none; }
.msl-results { position: absolute; top: calc(100% + 8px); left: 0; min-width: 100%; max-height: 330px; overflow-y: auto; display: none;
    background: #16293D; border: 1px solid #3A5068; border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); padding: 4px; box-sizing: border-box; }
.msl-results.open { display: block; }
.msl-results a, .msl-results .none { display: block; padding: 9px 12px; border-radius: 10px; color: #F4F7FA; text-decoration: none;
    font: 600 14px/1.3 'Archivo', sans-serif; white-space: nowrap; }
.msl-results a small { margin-left: 8px; font-weight: 400; color: #8FA3B8; }
.msl-results a:hover, .msl-results a.on { background: #22384F; color: #3FA9F5; }
.msl-results .none { color: #8FA3B8; font-weight: 400; }

/* conta: "Entrar" (leva ao perfil do Mapa, onde fica o login) ou a foto de quem já entrou */
.msl-login { flex: none; display: flex; align-items: center; gap: 8px; height: 33px; padding: 8px 16px; box-sizing: border-box;
    border-radius: 14px; background: #FF5B2E; color: #0C1A2A; font: 700 13.6px 'DM Sans', sans-serif; text-decoration: none; white-space: nowrap; }
.msl-login:hover { background: #ff7249; color: #0C1A2A; }
.msl-avatar { flex: none; width: 38px; height: 38px; box-sizing: border-box; border-radius: 50%; border: 2px solid #3FA9F5; overflow: hidden;
    display: none; align-items: center; justify-content: center; background: #16293D; color: #F0F2FF; font: 700 15px 'Archivo', sans-serif; text-decoration: none; }
.msl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msl-bar.logged .msl-avatar { display: flex; }
.msl-bar.logged .msl-login { display: none; }

/* ☰ */
.msl-burger { flex: none; width: 38px; height: 38px; box-sizing: border-box; padding: 0 9px; display: flex; flex-direction: column; justify-content: center; gap: 4px;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .06); cursor: pointer; }
.msl-burger span { display: block; height: 2px; border-radius: 2px; background: #F0F2FF; transition: transform .2s, opacity .2s; }
.msl-burger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.msl-burger.active span:nth-child(2) { opacity: 0; }
.msl-burger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* gaveta do menu (igual à do Mapa, msl.css) */
.msl-drawer { position: fixed; top: 0; right: -320px; width: 300px; max-width: 86vw; height: 100dvh; box-sizing: border-box; background: #16293D; border-left: 1px solid #3A5068;
    box-shadow: -12px 0 40px rgba(12, 26, 42, .5); padding: 76px 1.25rem 2rem; z-index: 3000; display: flex; flex-direction: column; gap: 4px;
    transition: right .3s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; font-family: 'Archivo', sans-serif; }
.msl-drawer.open { right: 0; }
.msl-drawer a { display: block; padding: .8rem 1rem; border-radius: 12px; color: #F4F7FA; text-decoration: none; font-weight: 600; font-stretch: 105%; }
.msl-drawer a:hover, .msl-drawer a.on { background: #22384F; color: #3FA9F5; }
.msl-drawer .msl-sep { height: 1px; background: #3A5068; margin: 10px 0; }
.msl-drawer .msl-partner { font: 500 12px/1.4 'IBM Plex Mono', monospace; letter-spacing: .06em; color: #8FA3B8; padding: 4px 1rem; text-transform: uppercase; }
.msl-drawer .msl-cta { background: #FF5B2E; color: #0C1A2A; text-align: center; font-weight: 700; }
.msl-drawer .msl-cta:hover { background: #ff7249; color: #0C1A2A; }
.msl-scrim { position: fixed; inset: 0; background: rgba(12, 26, 42, .55); z-index: 2999; display: none; }
.msl-scrim.open { display: block; }
.msl-drawer .msl-label { font: 500 12px/1.4 'IBM Plex Mono', monospace; letter-spacing: .06em; color: #8FA3B8; padding: 4px 1rem; text-transform: uppercase; }

/* idioma e medidas (gaveta): o texto e a pílula °C|°F são postos pelo i18n.js / units.js (ou engine/lang.js no 3D) */
.msl-drawer .msl-prefs { display: flex; gap: 8px; padding: 4px 1rem 2px; }
.msl-pref { height: 34px; min-width: 48px; padding: 0 14px; box-sizing: border-box; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #F4F7FA; font: 700 13px 'Archivo', sans-serif; }
.msl-pref:hover { border-color: #3FA9F5; }
.msl-pref:empty { display: none; }   /* página sem quem ligue o botão */

/* selo "powered by STE Travel": pílula clara (o "STE" do logo é azul-marinho e some no fundo escuro). Na gaveta e, na Home, no lugar da busca */
.msl-powered { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; background: #F4F7FA; color: #0C1A2A;
    text-decoration: none; font: 500 10.5px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; white-space: nowrap; transition: box-shadow .2s; }
.msl-powered img { height: 16px; width: auto; display: block; }
.msl-powered:hover, .msl-powered:focus-visible { box-shadow: 0 0 0 3px rgba(63, 169, 245, .4); }
.msl-bar .msl-powered { flex: none; height: 36px; padding: 0 16px; }
.msl-drawer a.msl-powered, .msl-drawer a.msl-powered:hover { display: flex; margin-top: 4px; padding: 13px 16px; border-radius: 14px; background: #F4F7FA; color: #0C1A2A; font-weight: 500; }
.msl-drawer a.msl-powered img { height: 20px; }

.msl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Previsão: no computador o título já está na barra; a faixa da página fica só com os botões (no celular o título volta) */
@media (min-width: 769px) {
    .msl-bar ~ .page-bar .page-title { display: none; }
    .msl-bar ~ .page-bar .header-content { justify-content: flex-end; }
}

/* celular: faixa colada no topo, sem o título; a busca ocupa o meio */
@media (max-width: 768px) {
    :root { --ste-header-h: 66px; --msl-bar-h: 56px; }
    .msl-bar { top: 0; left: 0; transform: none; width: 100%; max-width: none; height: 56px; padding: 8px 10px; gap: 8px;
        border-radius: 0 0 16px 16px; justify-content: space-between; }
    .msl-bar .msl-title { display: none; }
    .msl-search { flex: 1; min-width: 0; }
    .msl-search input { width: 100%; font-size: 16px; }   /* < 16 px o Safari do iPhone dá zoom na página ao focar (31/10) */
    .msl-results { min-width: 0; width: max(100%, 240px); }
    .msl-login { width: 38px; height: 38px; padding: 0; justify-content: center; font-size: 0; }
    .msl-login i { font-size: 15px; }
    .msl-login span { display: none; }
    .msl-bar .msl-powered { display: none; }   /* Home: no celular o selo fica só na gaveta */
}
@media (max-width: 380px) { .msl-bar .msl-logo img { height: 26px; } }

/* 3D (estação): o msl-bar.js mede. Se a pílula cabe entre o cartão da estação (#brand) e os botões (#controls), fica no meio
   da linha de cima e os painéis sobem (html.msl-side). Se não cabe, vira a faixa do celular colada no topo (html.msl-strip). */
html.msl-side { --msl-bar-h: 0px; }
html.msl-side .msl-bar { left: var(--msl-side-x, 50%); transform: none; }   /* meio do espaço livre (msl-bar.js) */
html.msl-side .msl-search input { width: var(--msl-search-w, 260px); }
html.msl-side #toast { top: calc(var(--gutter) + env(safe-area-inset-top, 0px) + 72px); }   /* aviso do 3D: abaixo da pílula */
html.msl-strip { --msl-bar-h: 56px; }
@media (min-width: 769px) {   /* no celular já vale o bloco "celular" acima */
    html.msl-strip .msl-bar { top: 0; left: 0; transform: none; width: 100%; max-width: none; height: 56px; padding: 8px 10px 8px 16px; gap: 10px;
        border-radius: 0 0 16px 16px; }
    html.msl-strip .msl-bar .msl-title { display: none; }
    /* busca, conta e ☰ à direita; a busca encolhe para o "Entrar" não sair da tela (iPad, 30/10) */
    html.msl-strip .msl-search { margin-left: auto; flex: 0 1 320px; min-width: 120px; }
    html.msl-strip .msl-search input { width: 100%; }
}
/* tablet: "Entrar" só com o ícone (o texto empurrava o botão para fora da barra) */
@media (min-width: 769px) and (max-width: 1100px) {
    .msl-login { width: 38px; height: 38px; padding: 0; justify-content: center; }
    .msl-login span { display: none; }
}
@media print { .msl-bar, .msl-drawer, .msl-scrim { display: none !important; } }