/* Reset Básico e Variáveis CSS */
:root {
    --primary-color: #FFC107; /* Amarelo do menu e botões */
    /* Paleta padrão de amarelo (ouro) */
    --brand-gold: #FFC107;     /* base */
    --brand-gold-600: #FFB300; /* hover */
    --brand-gold-700: #FFA000; /* active */
    --secondary-color: #2a401c; /* Verde escuro do menu */
    --text-dark: #333;
    --text-light: #ffffff;
    --bg-light: #ffffff;
    --white: #ffffff;
    --shadow: 0 4px 15px rgba(0,0,0,0.1);
    --border-radius: 8px;
    --brand-orange: #ff7a00;
    --brand-orange-600: #ff8f26;
    --brand-orange-700: #e56f00;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Botão laranja compartilhado */
.btn-orange{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background: var(--brand-orange); color:#fff; border:0; border-radius:12px;
    padding:10px 14px; font-weight:900; letter-spacing:.4px; text-decoration:none; cursor:pointer;
    box-shadow:0 6px 14px rgba(229,111,0,.26); transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-orange:hover{ background: var(--brand-orange-600); }
.btn-orange:active{ background: var(--brand-orange-700); transform: translateY(1px); box-shadow:0 3px 8px rgba(229,111,0,.2); }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
}

/* Atalhos Explore (botões compactos) */
.atalhos-explore .atalho-explore-btn {
    background:#f5f7f6;
    border:1px solid #d9e2df;
    padding:.55rem .9rem;
    border-radius:30px;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.5px;
    text-decoration:none;
    color:#1a3d2f;
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    transition:background .25s, border-color .25s, transform .25s;
}
.atalhos-explore .atalho-explore-btn:hover {
    background:#e9f2ee;
    border-color:#b7cbc3;
    transform:translateY(-2px);
}
.atalhos-explore .atalho-explore-btn:active { transform:translateY(0); }

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Cabeçalho Completo */
.site-header {
    background-color: var(--white);
    box-shadow: var(--shadow);
}

/* ============================================================ */
/* Modo PWA (standalone) — apenas em telas ≤ 760px (mobile)   */
/* No desktop o menu normal é preservado mesmo com cookie PWA  */
/* ============================================================ */
@media (max-width: 760px) {
    html.is-pwa .site-header{
        position: sticky;
        top: 0;
        z-index: 20000;
        background: linear-gradient(145deg,#1a6f3a,#114f30) !important;
    }
    html.is-pwa .main-nav{
        padding: .6rem 0;
        padding-top: calc(.6rem + env(safe-area-inset-top));
        background: linear-gradient(145deg,#1a6f3a,#114f30) !important;
    }
    html.is-pwa .main-nav ul{ display:none !important; }
    html.is-pwa .mobile-menu-toggle .fa-bars{ display:none !important; }
    html.is-pwa .pwa-menu-btn{ display:inline-flex !important; }
    html.is-pwa .pwa-menu-btn i{ transform:none !important; }
    html.is-pwa .mobile-menu-toggle .user-menu{ display:none !important; }

    /* Home no PWA: banner menor (máx. ~30% da tela) */
    html.is-pwa .hero-section{
        padding: 0 !important;
        height: 30vh;
        max-height: 30vh;
        min-height: 30vh;
    }
    html.is-pwa .hero-content{
        padding-top: .9rem;
    }
    html.is-pwa .hero-content h1{
        font-size: clamp(1.2rem, 4.6vw, 1.7rem);
        margin-bottom: .5rem;
    }
    html.is-pwa .hero-content p{
        font-size: .92rem;
        margin-bottom: .9rem;
    }
}

/* Navegação Principal */
.main-nav {
    background-color: var(--secondary-color);
    padding: 1rem 0; /* Aumenta a altura geral do menu */
}

.main-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px; /* Define uma altura fixa para o container */
}

.main-nav .logo img {
    height: 55px; /* Aumenta o tamanho da logo */
    width: auto;
    filter: brightness(0) invert(1); /* Deixa a logo branca */
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
    margin: 0;
    height: 100%; /* Faz a lista ocupar a altura total para alinhamento */
}

.main-nav ul li {
    display: flex;
    align-items: center;
    height: 100%;
}

.main-nav a {
    text-decoration: none;
    color: var(--text-light);
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    padding: 10px 0;
    transition: color 0.3s ease;
    position: relative;
    border-bottom: 3px solid transparent; /* Add transparent bottom border */
    display: flex;
    align-items: center;
    height: 100%;
}

.main-nav a:hover::after, .main-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -3px; /* Position it just below the link */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
    transition: width 0.3s ease-in-out; /* Animate the width */
}

.main-nav a:not(:hover)::after {
    width: 0; /* Shrink on mouse out */
}


.main-nav a:hover {
    color: var(--text-light); /* Keep text white on hover */
}

.main-nav a.active {
    color: var(--primary-color);
}

/* ============================================================ */
/* DESKTOP ONLY — ajustes visuais específicos (> 760px)         */
/* ============================================================ */
@media (min-width: 761px) {
    /* Oculta botão redondo PWA no desktop */
    #pwaMenuBtn, .pwa-menu-btn { display: none !important; }

    /* Links do menu: inline, sem ocupar altura total (evita traço em logo/botão) */
    .main-nav ul li a {
        display: inline-flex !important;
        height: auto !important;
        padding: 6px 0 !important;
        position: relative !important;
        font-weight: 700 !important; /* fixo em todos os estados — sem expansão ao clicar */
    }
    /* Active: só muda a cor, nunca o peso */
    .main-nav ul li a.active {
        color: var(--primary-color) !important;
        font-weight: 700 !important;
    }
    .main-nav ul li {
        align-items: center !important;
    }

    /* Traço amarelo SOMENTE nos itens de menu */
    .main-nav ul li a:hover::after,
    .main-nav ul li a.active::after {
        content: '' !important;
        position: absolute !important;
        bottom: -2px !important;
        left: 0 !important;
        width: 100% !important;
        height: 3px !important;
        background-color: var(--primary-color) !important;
    }

    /* Logo: sem traço amarelo em nenhuma situação */
    .main-nav .logo::after,
    .main-nav .logo:hover::after,
    .main-nav .logo.active::after {
        display: none !important;
        content: none !important;
    }

    /* Botão de usuário — transparente, SEM borda circular */
    #userMenuBtn.user-gold-btn,
    a.user-gold-btn {
        background-color: transparent !important;
        background: transparent !important;
        color: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 4px 0 !important;
    }
    #userMenuBtn.user-gold-btn:hover,
    a.user-gold-btn:hover {
        background: transparent !important;
        opacity: .8 !important;
    }
    /* Sem traço amarelo no botão de usuário */
    .mobile-menu-toggle a::after,
    .mobile-menu-toggle button::after,
    .user-gold-btn::after { display: none !important; content: none !important; }

    /* Hero banner desktop: padding reduzido, banner mantém altura pelo min-height inline */
    .hero-section {
        padding: 1.6rem 0 !important;
        min-height: 0 !important; /* min-height definido via JS/inline na home para não quebrar outras páginas */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Box semi-transparente no hero content — mais escuro */
    .hero-content {
        background: rgba(0, 0, 0, 0.58) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        display: inline-block;
        padding: .9rem 1.8rem .9rem;
        border-radius: 10px;
        max-width: 520px;
        margin: 0 auto;
    }
    /* Título e subtítulo menores no hero desktop */
    .hero-content h1 {
        font-size: 1.5rem !important;
        margin-bottom: .35rem !important;
        font-weight: 700 !important;
    }
    .hero-content p {
        font-size: .85rem !important;
        margin-bottom: .7rem !important;
        opacity: .9;
    }
    /* Barra de busca menor */
    .hero-content .search-bar {
        max-width: 440px !important;
    }
    .hero-content .search-bar input {
        padding: 9px 12px !important;
        font-size: .85rem !important;
    }
    .hero-content .search-bar button {
        padding: 0 14px !important;
        font-size: .95rem !important;
    }

    /* ── Seções abaixo do banner — design turístico desktop ── */
    body.is-home-route .main-content {
        background: linear-gradient(180deg, #f6f8f4 0%, #fff 100%);
        padding-top: 0 !important;
    }
    /* Faixa decorativa entre banner e conteúdo */
    body.is-home-route .main-content > .container {
        padding-top: 0 !important;
        position: relative;
    }
    body.is-home-route .main-content > .container::before {
        content: '';
        display: block;
        height: 5px;
        background: linear-gradient(90deg, #1a6f3a, #FFC107, #1a6f3a);
        border-radius: 0 0 6px 6px;
        margin-bottom: 2.4rem;
        opacity: .55;
    }
    /* Título das seções estilizado */
    body.is-home-route .home-destaques h2,
    body.is-home-route .pacotes-promos h2,
    body.is-home-route .passaporte-home h2 {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
        color: #153b2a !important;
        text-align: left !important;
        border-left: 5px solid #1a6f3a !important;
        padding-left: 14px !important;
        margin-bottom: 20px !important;
        letter-spacing: .3px !important;
    }
    body.is-home-route .pacotes-promos > p {
        text-align: left;
        font-size: .9rem;
        color: #4a6358;
        margin-top: -12px;
        margin-bottom: 20px;
        padding-left: 20px;
    }
    /* Cards de destaque no desktop */
    body.is-home-route .destaques-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 16px !important;
    }
    body.is-home-route .dest-media {
        height: 160px !important;
    }
    /* Cards de pacotes no desktop — igual página de pacotes */
    body.is-home-route .home-pacotes-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 16px !important;
    }
    body.is-home-route .pacote-media {
        aspect-ratio: 1/1 !important;
    }
    body.is-home-route .pacotes-promos {
        margin-top: 3rem !important;
        padding-top: 2rem !important;
        border-top: 1px solid #e2e8e4 !important;
    }
}



/* Seção Hero com Imagem de Fundo */
.hero-section {
    position: relative; /* Necessário para o posicionamento absoluto dos slides */
    background-color: #333; /* Cor de fundo caso não haja imagens */
    color: var(--white);
    padding: 5rem 0; /* Ajustado em mobile */
    text-align: center;
    overflow: hidden; /* Garante que os slides não ultrapassem a seção */
}

.slideshow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
    will-change: opacity; /* Performance smoother */
}

.hero-slide:first-child {
    opacity: 1;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Overlay escuro */
    z-index: 2;
}


.hero-slide.active {
    opacity: 1;
}

.hero-content {
    position: relative; /* Garante que o conteúdo fique sobre os slides */
    z-index: 3; /* Conteúdo acima do slideshow e do overlay */
}

.hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.search-bar {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.search-bar input {
    flex-grow: 1;
    border: none;
    padding: 15px;
    font-size: 1rem;
    background: transparent;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.search-bar input:focus {
    outline: none;
}

.search-bar button {
    border: none;
    background: var(--primary-color);
    color: var(--text-dark);
    padding: 0 25px;
    cursor: pointer;
    font-size: 1.2rem;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    transition: background-color 0.3s ease;
}

.search-bar button:hover {
    background-color: #ffca2c;
}

.mobile-menu-toggle .fa-bars {
    display: none;
    font-size: 1.5rem;
    color: var(--text-light);
    cursor: pointer;
}

/* Botão do usuário (padrão ouro) */
.user-gold-btn{
    background: transparent;
    color: var(--text-light);
    border: 1.5px solid rgba(255,255,255,.35);
    padding: 6px 14px 6px 6px;
    border-radius: 32px;
    font-size: .8rem;
    letter-spacing: .3px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .2s, border-color .2s;
}
.user-gold-btn:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); }
.user-gold-btn:active{ background: rgba(255,255,255,.2); }

/* Estilos para a página de Aventura */
.adventure-container {
    padding: 4rem 0;
    background-color: var(--secondary-color); /* Fundo verde escuro */
}

.adventure-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.adventure-card {
    position: relative;
    height: 400px;
    border-radius: var(--border-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--white);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: transform 0.3s ease;
    border: 3px solid var(--white);
}

.adventure-card:hover {
    transform: scale(1.03);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(6, 187, 36, 0.8), transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.adventure-card h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 2px 2px 8px rgba(155, 207, 10, 0.7);
}


/* Conteúdo Principal */
.main-content {
    padding: 4rem 0;
}

/* Cards de Categoria */
.categorias-destaque {
    text-align: center;
}

.categorias-destaque h2 {
    margin-bottom: 3rem;
    font-size: 2.5rem;
    color: var(--text-dark);
}

.categoria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
}

.categoria-card {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.categoria-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
    background: #f1f1f1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.categoria-card:hover .categoria-icon {
    background: var(--primary-color);
    color: var(--text-dark);
    transform: scale(1.1);
}

.categoria-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: var(--text-dark);
}

.btn-explore {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
}

/* Seção de Ofertas */
.ofertas-destaque {
    margin-top: 5rem;
    text-align: center;
}

.ofertas-destaque h2 {
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.ofertas-destaque p {
    margin-bottom: 3rem;
    color: var(--text-light);
}

.ofertas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.oferta-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 1rem 1rem 1.2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    position: relative;
    text-align: left;
    border:1px solid #e2e6e4;
    display:flex;
    flex-direction:column;
    transition:box-shadow .25s, transform .25s;
}

.oferta-card:hover { box-shadow:0 6px 18px rgba(0,0,0,0.12); transform:translateY(-3px); }

/* Novo layout de detalhe de oferta */
.oferta-hero { position:relative; min-height:260px; display:flex; align-items:flex-end; margin-bottom:2rem; }
.oferta-hero__bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.55); }
.oferta-hero__bg--placeholder { background:linear-gradient(135deg,#2a401c,#445d33); }
.oferta-hero__overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.15)); }
.oferta-hero__content { position:relative; z-index:2; padding:2.5rem 0 1.5rem; color:#fff; width:100%; }
.oferta-back { display:inline-block; margin-bottom:.6rem; font-size:.8rem; text-decoration:none; color:#ffd966; }
.oferta-title { margin:0 0 .8rem; font-size:2rem; line-height:1.15; max-width:820px; }
.oferta-actions { display:flex; gap:.6rem; }
.oferta-action-btn { background:rgba(255,255,255,0.12); width:42px; height:42px; border:1px solid rgba(255,255,255,0.4); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.05rem; backdrop-filter:blur(3px); color:#fff; transition:background .25s,border-color .25s; }
.oferta-action-btn:hover { background:rgba(255,255,255,0.25); }
.oferta-action-btn.is-active { color:#ff4d5a; background:rgba(255,255,255,0.25); }
.oferta-price-badge { position:absolute; right:1rem; top:1rem; background:#ff4d5a; color:#fff; font-size:.8rem; padding:.45rem .6rem; border-radius:6px; font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,0.3); }

.oferta-main { margin-bottom:3rem; }
.oferta-layout { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:2.2rem; align-items:start; }
@media (max-width: 980px){ .oferta-layout { grid-template-columns:1fr; } .oferta-sidebar { order:-1; } }

.oferta-content { display:flex; flex-direction:column; gap:2rem; }
.oferta-section h2, .oferta-section h3 { margin:0 0 .7rem; font-size:1.15rem; color:#1f3829; }
.oferta-text { font-size:.95rem; line-height:1.55; color:#2d3934; }
.oferta-termos { font-size:.75rem; line-height:1.45; color:#33413b; background:#f5f7f6; border:1px solid #d9e2df; padding:12px 14px; border-radius:8px; max-height:220px; overflow:auto; }
.oferta-mapa-wrapper { position:relative; width:100%; padding-top:56%; border:1px solid #d9e2df; border-radius:10px; overflow:hidden; background:#f0f2f1; }
.oferta-mapa-wrapper iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.oferta-sidebar { position:relative; }
.oferta-box { background:#fff; border:1px solid #d9e2df; border-radius:14px; padding:1.2rem 1.2rem 1.5rem; box-shadow:0 4px 12px rgba(0,0,0,0.06); display:flex; flex-direction:column; gap:1rem; }
.oferta-box__title { margin:0 0 .2rem; font-size:1rem; letter-spacing:.5px; font-weight:600; color:#1d3a2b; }
.oferta-meta { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; font-size:.7rem; color:#31443a; }
.oferta-meta li strong { font-weight:600; color:#193628; }
.oferta-pricing-block { margin-top:.4rem; }
.oferta-price-line { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.oferta-price-line .old { text-decoration:line-through; color:#888; font-size:.7rem; }
.oferta-price-line .new { color:#1a6f4d; font-weight:700; font-size:1.1rem; }
.oferta-price-line .base { color:#1a6f4d; font-weight:600; font-size:1rem; }
.oferta-price-line .badge { background:#e1faec; color:#146c43; padding:2px 6px; border-radius:5px; font-size:.55rem; font-weight:600; letter-spacing:.5px; }
.oferta-actions-stack { display:flex; flex-direction:column; gap:.6rem; margin-top:.4rem; }
.btn-ativar { background:#1a6f4d; color:#fff; border:none; padding:.9rem 1rem; border-radius:8px; font-weight:600; font-size:.85rem; cursor:pointer; letter-spacing:.5px; transition:background .25s, transform .25s; }
.btn-ativar:hover { background:#15563b; }
.btn-share-trigger { background:#fff; border:1px solid #cfd5d2; padding:.75rem 1rem; border-radius:8px; font-size:.7rem; font-weight:600; cursor:pointer; text-transform:uppercase; letter-spacing:.7px; color:#1a3d2f; }
.oferta-esgotada { background:#f0f0f0; padding:.85rem 1rem; border-radius:8px; font-size:.8rem; text-align:center; font-weight:600; color:#555; }

/* Breadcrumbs */
.oferta-breadcrumbs { font-size:.7rem; margin-bottom:.4rem; display:flex; gap:.35rem; flex-wrap:wrap; color:#e9f2ee; }
.oferta-breadcrumbs a { color:#ffd966; text-decoration:none; }
.oferta-breadcrumbs a:hover { text-decoration:underline; }

/* Barra de estoque */
.oferta-stock-bar { position:relative; height:6px; background:#e5ece9; border-radius:4px; overflow:hidden; margin:.35rem 0 .25rem; }
.oferta-stock-bar__fill { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,#1a6f4d,#2e8d66); transition:width .4s ease; }
.oferta-stock-hint { font-size:.55rem; color:#355040; letter-spacing:.5px; }

/* Ações mobile sticky */
.oferta-mobile-actions { position:fixed; left:0; right:0; bottom:0; background:#fffffffa; backdrop-filter:blur(8px); border-top:1px solid #d9e2df; padding:.65rem .9rem .75rem; display:flex; gap:.6rem; z-index:40; }
.oferta-mobile-actions__form { flex:1; }
.oferta-mobile-actions__btn-primary { width:100%; background:#1a6f4d; color:#fff; border:none; padding:.85rem .9rem; border-radius:8px; font-size:.9rem; font-weight:600; letter-spacing:.5px; }
.oferta-mobile-actions__btn-sec { background:#fff; border:1px solid #cfd5d2; padding:.85rem .9rem; border-radius:8px; font-size:.7rem; font-weight:600; letter-spacing:.5px; }
.oferta-mobile-actions__esgotada { flex:1; background:#e9e9e9; padding:.85rem .9rem; border-radius:8px; font-size:.8rem; font-weight:600; text-align:center; }
@media (min-width: 781px){ .oferta-mobile-actions { display:none; } }

/* ===================== */
/* Listagem de Ofertas   */
/* ===================== */
.ofertas-page { padding:20px 15px; max-width:1100px; margin:0 auto; }
.ofertas-page__title { margin:0 0 15px; font-size:1.8rem; }
.ofertas-banner { margin:0 0 24px; position:relative; overflow:hidden; border:1px solid #d9e2df; border-radius:12px; background:#f5f7f6; display:flex; flex-wrap:wrap; }
.ofertas-banner__copy { flex:1 1 260px; padding:18px 20px; min-width:240px; }
.ofertas-banner__copy h2 { margin:0 0 8px; font-size:1.35rem; line-height:1.2; }
.ofertas-banner__copy p { margin:0; font-size:.85rem; line-height:1.4; color:#2a3d36; }
.ofertas-banner__image { flex:1 1 260px; min-height:180px; position:relative; }
.ofertas-banner__image img { width:100%; height:100%; object-fit:cover; display:block; }

.ofertas-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.oferta-card.is-destaque { border-color:#1a6f4d; }
.oferta-card__actions { position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:2; }
.oferta-card__badge { position:absolute; top:8px; left:8px; background:#1a6f4d; color:#fff; font-size:.55rem; padding:4px 6px; border-radius:4px; font-weight:600; letter-spacing:.5px; }
.oferta-card__media { aspect-ratio:4/3; overflow:hidden; background:#f0f0f0; }
.oferta-card__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.oferta-card:hover .oferta-card__media img { transform:scale(1.05); }
.oferta-card__body { padding:12px; flex:1; display:flex; flex-direction:column; }
.oferta-card__title { font-size:1.05rem; margin:0 0 8px; line-height:1.25; }
.oferta-card__title a { text-decoration:none; color:#1a3d2f; }
.oferta-card__title a:hover { text-decoration:underline; }
.oferta-card__desc { flex:1; font-size:.72rem; color:#555; margin:0 0 8px; line-height:1.35; }
.oferta-card__pricing { margin-bottom:8px; font-size:.8rem; display:flex; flex-direction:column; gap:2px; }
.price-line { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.price-line .old { text-decoration:line-through; color:#888; font-size:.65rem; }
.price-line .new { color:#1a6f4d; font-weight:600; }
.price-line .pct { background:#e1faec; color:#146c43; padding:2px 4px; border-radius:4px; font-size:.55rem; }
.price-line .base { color:#1a6f4d; }
.cobranca-tag { font-size:.55rem; color:#555; letter-spacing:.5px; text-transform:uppercase; }
.oferta-card__amenities { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.chip { background:#f4f4f4; border:1px solid #ddd; padding:2px 4px; border-radius:4px; font-size:.55rem; }
.oferta-card__dias { font-size:.55rem; color:#444; margin-bottom:8px; }
.oferta-card__footer { display:flex; justify-content:space-between; align-items:center; font-size:.7rem; color:#333; margin-bottom:8px; }
.btn-oferta { display:inline-block; background:#1a6f4d; color:#fff; padding:8px 10px; border-radius:4px; text-align:center; font-size:.75rem; text-decoration:none; font-weight:600; letter-spacing:.4px; }
.btn-oferta:hover { background:#15563b; }

.btn-fav, .btn-share { background:rgba(255,255,255,0.9); border:1px solid #ccc; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.85rem; color:#555; }
.btn-fav.is-active { color:#e63946; }
.btn-fav:hover, .btn-share:hover { background:#fff; }

/* ===== Detalhe extra: Chips / BuyBox / Regulamento ===== */
.oferta-chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px; }
.chip-day { background:#1a6f4d; color:#fff; }
.chip-am { background:#eef6f3; color:#1a3d2f; border:1px solid #cfe1db; }
.chip { font-size:.55rem; padding:4px 6px; border-radius:20px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.buybox { position:relative; }
.buybox-economia { background:#fff5e1; border:1px solid #f6d18f; padding:6px 10px; border-radius:8px; font-size:.6rem; font-weight:600; letter-spacing:.5px; color:#7a4e00; margin-bottom:.6rem; }
.buybox-option { display:flex; justify-content:space-between; align-items:center; background:#f7faf9; border:1px solid #d9e2df; border-radius:10px; padding:10px 12px; margin:10px 0 14px; gap:14px; }
.buybox-option__info { display:flex; flex-direction:column; gap:4px; }
.buybox-option__titulo { font-size:.7rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#1f3829; }
.buybox-option__precos { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:.8rem; }
.buybox-option__precos .old { text-decoration:line-through; color:#888; font-size:.6rem; }
.buybox-option__precos .new { color:#1a6f4d; font-weight:700; }
.buybox-option__precos .badge { background:#e1faec; color:#146c43; padding:2px 6px; border-radius:5px; font-size:.55rem; font-weight:600; letter-spacing:.5px; }
.buybox-option__precos .base { color:#1a6f4d; font-weight:600; }
.buybox-option__qty { display:flex; align-items:center; gap:4px; }
.qty-btn { width:30px; height:30px; border:1px solid #cfd5d2; background:#fff; border-radius:6px; cursor:pointer; font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center; font-weight:600; }
.qty-btn:hover { background:#f0f4f3; }
.qty-input { width:42px; text-align:center; border:1px solid #cfd5d2; padding:4px 6px; border-radius:6px; font-size:.8rem; }
.buybox-total-line { font-size:.75rem; letter-spacing:.5px; font-weight:600; color:#1a3d2f; margin:-4px 0 10px; }

.btn-toggle-termos { background:#fff; border:1px solid #cfd5d2; padding:6px 10px; border-radius:6px; font-size:.6rem; cursor:pointer; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.btn-toggle-termos:hover { background:#f2f6f5; }
.termos-collapsed.is-clamped { position:relative; }
.termos-collapsed.is-clamped:after { content:""; position:absolute; left:0; right:0; bottom:0; height:50px; background:linear-gradient(to bottom,rgba(245,247,246,0), #f5f7f6); }

/* Melhorias gerais para cards na listagem */
.oferta-card h2 { font-size:1rem; }
.oferta-card a { color:#1a3d2f; text-decoration:none; }
.oferta-card a:hover { text-decoration:underline; }

.oferta-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #143b15;
    color: var(--white);
    padding: 5px 10px;
    border-radius: var(--border-radius);
    font-weight: bold;
    font-size: 0.9rem;
}

/* ===================== */
/* Listagem de Cabanas   */
/* ===================== */
/* Garante que toda imagem do card ocupe a janela fixa sem distorcer;
     se necessário, corta e amplia (object-fit: cover). */
.cabana-media { position:relative; aspect-ratio: 16/9; overflow:hidden; background:#f3f3f3; }
.cabana-media img { width:100%; height:100%; object-fit:cover; display:block; }
/* Fallback para navegadores sem suporte a aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .cabana-media { height: 180px; }
}

/* Rodapé */
.main-footer {
    background-color: #142b04; /* Verde escuro do menu */
    color: var(--text-light);
    text-align: center;
    padding: 2rem 0;
    margin-top: 4rem;
}

/* Responsividade */
@media (max-width: 992px) {
    .main-nav ul {
        display: none !important;
    }

    .site-header{
        position: sticky;
        top: 0;
        z-index: 20000;
    }
    
    .main-nav .container {
        justify-content: space-between;
    }

    .mobile-menu-toggle .fa-bars {
        display: none;
    }

    /* No mobile, o menu hamburger/PWA já concentra navegação e conta */
    /* Only hide user menu when NOT in PWA mode — PWA shows it in header */
    html:not(.is-pwa) .mobile-menu-toggle .user-menu,
    html:not(.is-pwa) .mobile-menu-toggle .user-gold-btn{
        display:none !important;
    }

    /* PWA uses bottom nav, so hide hamburger. Non-PWA mobile shows it. */
    html:not(.is-pwa) .mobile-menu-toggle .pwa-menu-btn{
        display: inline-flex !important;
    }
}

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2rem;
    }
    /* Esconde barra de busca em mobile para experiência PWA limpa */
    .hero-content .search-bar { display: none; }
    .hero-section { padding: 3.2rem 0 3rem; min-height: 60vh; }
    .hero-content p { font-size: 1rem; margin-bottom: 1.5rem; }
    .categorias-destaque h2 { font-size: 1.9rem; margin-bottom: 2rem; }
    .categoria-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .categoria-card h3 { font-size: 1rem; }
    .ofertas-destaque { margin-top: 3rem; }
    .ofertas-destaque h2 { font-size: 2rem; }
    .ofertas-destaque p { margin-bottom: 2rem; }
    .oferta-card { padding: 1.4rem; }
    .categoria-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    .container {
        width: 95%;
    }
}

/* Micro break extra pequeno */
@media (max-width: 480px) {
    .hero-content h1 { font-size: 1.7rem; }
    .categoria-icon { width: 70px; height: 70px; font-size: 1.7rem; }
    .hero-section { padding: 2.8rem 0 2.4rem; }
}

/* ===================== */
/* Modo App - Mobile UI  */
/* ===================== */
@media (max-width: 900px) {
    body {
        background: #f3f4f6;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Banners no mobile — fora a fora */
    .top-banner {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    .top-banner img {
        max-height: 160px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }

    .hero-section {
        min-height: 42vh !important;
        padding: 2.1rem 0 2rem !important;
    }

    .hero-content h1 {
        font-size: clamp(1.25rem, 5vw, 1.65rem) !important;
        line-height: 1.2 !important;
    }

    .hero-content p {
        font-size: .92rem !important;
    }

    /* Cards em 2 colunas para parecer app (exceto dest-card que é gerido por home.php) */
    .categoria-grid,
    .cd-related {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .oferta-card,
    .cd-card-mini {
        border-radius: 12px !important;
        box-shadow: 0 4px 14px rgba(2, 6, 23, .08) !important;
    }

    .cd-card-mini__img {
        height: 132px !important;
        aspect-ratio: auto !important;
    }

    .cd-card-mini__body {
        padding: 9px !important;
    }

    .cd-card-mini__title {
        font-size: .88rem !important;
        line-height: 1.25 !important;
    }

    .dest-btn,
    .btn,
    .btn-orange,
    .cd-btn,
    .cta-big {
        min-height: 40px !important;
        font-size: .78rem !important;
        border-radius: 10px !important;
    }
}

@media (max-width: 520px) {
    .top-banner img {
        max-height: 120px !important;
        border-radius: 0 !important;
    }

    .hero-section {
        min-height: 36vh !important;
    }

    .categoria-grid,
    .cd-related {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .cd-card-mini__img {
        height: 112px !important;
    }

    .cd-card-mini__title {
        font-size: .82rem !important;
    }
}

/* High density pointer improvements */
@media (hover: none) {
    .categoria-card:hover .categoria-icon { transform: none; }
}

/* ===================== */
/* Detalhe Cabana (CD)   */
/* ===================== */
.cd-wrap{max-width:1120px;margin:0 auto;padding:26px 14px}
.cd-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:160px;gap:10px;margin-bottom:16px;position:relative}
.cd-gallery__item{position:relative;border-radius:12px;overflow:hidden;background:#f3f3f3}
.cd-gallery__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cd-title{font-size:1.8rem;font-weight:900;color:#1a3d2f;margin:2px 0 4px}
.cd-sub{color:#5d6e67;font-weight:600;margin-bottom:6px}
.cd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.cd-actions{display:flex;gap:10px}
.cd-action-btn{background:#ffffff; border:1px solid #cfd5d2; color:#1a3d2f; padding:8px 10px; border-radius:10px; font-weight:700; text-decoration:none; font-size:.85rem}
.cd-action-btn:hover{background:#f5f7f6}
.cd-action-btn.is-active{background:#eef5f2;border-color:#cfe1db}
.cd-actions .cd-cta-host{background:#1a6f4d;color:#fff;border-color:#1a6f4d}
.cd-socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.cd-socials a{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#1a3d2f;text-decoration:none;border:1px solid #cfd5d2;border-radius:10px;padding:6px 8px;background:#fff}
.cd-socials a:hover{background:#f5f7f6}
.cd-meta{display:flex;gap:10px;flex-wrap:wrap;color:#51645d;font-size:.9rem;margin-bottom:16px}
.cd-meta .pill{background:#eef5f2;border:1px solid #d9e2df;color:#1a3d2f;border-radius:999px;padding:4px 10px;font-weight:700}
.cd-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px}
@media (max-width: 980px){ .cd-layout{grid-template-columns:1fr} }
.cd-card{background:#fff;border:1px solid #d9e2df;border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.cd-sticky{position:sticky; top:90px}
.cd-section-title{font-size:1.05rem;font-weight:800;margin:0 0 10px;color:#1a3d2f}
.cd-desc{font-size:1rem;color:#2c3833;line-height:1.6}
.cd-amen{display:grid;grid-template-columns:1fr;gap:10px;margin:8px 0}
@media(min-width:700px){ .cd-amen{ grid-template-columns:1fr 1fr; } }
.cd-amen-item{display:flex;align-items:center;gap:10px;color:#2b3e36;font-size:.92rem}
.cd-amen-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:#1a6f4d}
.cd-amen-item.is-disabled .cd-amen-label{ text-decoration:line-through; color:#8a8a8a }
.cd-amen-item.is-disabled .cd-amen-icon{ color:#8a8a8a }
.cd-amen.is-collapsed{max-height:260px; overflow:hidden; position:relative}
.cd-amen-toggle{margin-top:8px}
.cd-host{display:flex;gap:12px;align-items:center}
.cd-host__avatar{width:48px;height:48px;border-radius:50%;background:#e9f2ee;display:flex;align-items:center;justify-content:center;font-weight:900;color:#1a6f4d}
.cd-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;border:1px solid #cfe1db;background:#1a6f4d;color:#fff;font-weight:800;text-decoration:none}
.cd-btn--sec{background:#fff;color:#1a6f4d}
.cd-map{position:relative;width:100%;padding-top:56%;border-radius:12px;overflow:hidden;border:1px solid #d9e2df}
.cd-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cd-arrive-actions .cd-btn{padding:8px 12px}
.cd-media-thumb{position:relative;border:1px solid #d9e2df;border-radius:10px;overflow:hidden;background:#f3f3f3}
.cd-media-thumb img,.cd-media-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.cd-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cd-card-mini{border:1px solid #e6ece9;border-radius:12px;overflow:hidden;background:#fff}
.cd-card-mini__img{aspect-ratio:3/4;background:#f3f3f3}
.cd-card-mini__img img{width:100%;height:100%;object-fit:cover}
.cd-card-mini__body{padding:10px}
.cd-card-mini__title{font-weight:800;font-size:.95rem;color:#1a3d2f;margin:0 0 4px}
.cd-card-mini__city{font-size:.8rem;color:#5a6e66}

/* Gallery overlay button + lightbox */
.cd-gallery__showall{position:absolute;right:12px;bottom:12px;z-index:3;background:#ffffffd9;border:1px solid #cfd5d2;color:#1a3d2f;padding:8px 12px;border-radius:10px;font-weight:700;backdrop-filter:blur(4px);text-decoration:none}
.cd-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.cd-lightbox.is-open{display:flex}
.cd-lightbox__inner{max-width:1100px;width:100%;max-height:90vh;background:#0b0f0e;border-radius:10px;overflow:auto;padding:12px}
.cd-lightbox__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.cd-lightbox__grid img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.cd-lightbox__close{position:sticky;top:0;display:flex;justify-content:flex-end;margin-bottom:8px}
.cd-lightbox__closebtn{background:#fff;border:1px solid #cfd5d2;border-radius:999px;padding:6px 10px;font-weight:700;color:#1a3d2f}
/* Lightbox viewer (single image) */
.cd-lightbox__viewer{position:relative;display:none;align-items:center;justify-content:center;min-height:50vh}
.cd-lightbox__img{max-width:100%;max-height:80vh;border-radius:8px;display:block}
.cd-lightbox__caption{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,0.45);color:#fff;padding:8px 12px;border-radius:10px;font-weight:900;letter-spacing:.3px}
.cd-lightbox.is-viewer .cd-lightbox__grid{display:none}
.cd-lightbox.is-viewer .cd-lightbox__viewer{display:flex}

/* Booking sidebar (buybox) */
.cd-book{background:#fff;border:1px solid #d9e2df;border-radius:14px;padding:14px;box-shadow:0 4px 12px rgba(0,0,0,0.06);display:flex;flex-direction:column;gap:10px}
.cd-book__price{display:flex;align-items:baseline;gap:6px;color:#1a3d2f}
.cd-book__price .val{font-size:1.4rem;font-weight:800}
.cd-book__price .old{font-size:.85rem;text-decoration:line-through;color:#8a9b95}
.cd-book__price .pct{color:#0a7b50;font-size:.75rem;border:1px solid #cfe1db;background:#eef5f2;border-radius:999px;padding:2px 8px}
.cd-book form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cd-field{display:flex;flex-direction:column;gap:4px}
.cd-field label{font-size:.72rem;color:#4a5c56;font-weight:700}
.cd-field input,.cd-field select{border:1px solid #cfd5d2;border-radius:10px;padding:10px 12px;font-size:.9rem}
.cd-book__btn{grid-column:1/-1;background:#1a6f4d;color:#fff;border:none;padding:12px;border-radius:10px;font-weight:800;cursor:pointer}
.cd-book__quick{display:flex;gap:8px;margin-top:6px}
.cd-book__quick a{flex:1;text-align:center;border:1px solid #cfd5d2;border-radius:10px;padding:10px;background:#fff;color:#1a3d2f;text-decoration:none;font-weight:700}
.cd-book__quick a:hover{background:#f5f7f6}
.cd-book__break{font-size:.8rem;color:#31443a;border-top:1px dashed #d9e2df;padding-top:8px;margin-top:2px}
.cd-book__break .line{display:flex;justify-content:space-between;margin:4px 0}
.cd-book__break .total{font-weight:800;color:#1a3d2f}

/* Utilities spacing for cabana detail */
.cd-mt-14{margin-top:14px}
.cd-mt-18{margin-top:18px}
.cd-mb-6{margin-bottom:6px}

/* Host inline bar and sections */
.cd-lead{font-size:.92rem;color:#2d3934;margin-bottom:8px}
.cd-hostbar{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e0e7e4;border-radius:12px;background:#fafdfc;margin-bottom:14px}
.cd-hostbar__avatar{width:36px;height:36px;border-radius:50%;background:#e9f2ee;display:flex;align-items:center;justify-content:center;font-weight:900;color:#1a6f4d}
.cd-hostbar__name{font-weight:800;color:#1a3d2f}
.cd-hostbar__meta{color:#4b5c55;font-size:.85rem}

.cd-section{margin-top:14px}
.cd-avg{display:flex;align-items:center;gap:10px}
.cd-avg .cd-badge{background:#eef5f2;color:#0a7b50;border:1px solid #cfe1db;border-radius:999px;padding:2px 8px;font-weight:800;font-size:.8rem}

.cd-knowhost{display:grid;grid-template-columns:300px 1fr;gap:18px}
@media (max-width: 980px){ .cd-knowhost{grid-template-columns:1fr} }
.cd-knowhost-card{border:1px solid #d9e2df;border-radius:14px;padding:14px;background:#fff}
.cd-knowhost-left{display:flex;flex-direction:column;gap:10px}
.cd-knowhost-profile{display:flex;gap:12px;align-items:center}
.cd-badge-superhost{background:#fff0f0;color:#b0382e;border:1px solid #f2b8b5;padding:2px 8px;border-radius:999px;font-weight:800;font-size:.75rem}
.cd-host-stars{display:flex;align-items:center;gap:6px;color:#1a3d2f;font-size:.9rem;margin-top:4px}
.cd-host-stars .star{color:#ffb400}
.cd-knowhost-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cd-knowhost-stat{background:#f7faf9;border:1px solid #d9e2df;border-radius:12px;padding:10px}
.cd-knowhost-stat .n{font-weight:900;color:#1a3d2f}
.cd-knowhost-stat .l{font-size:.72rem;color:#5b6b65}
.cd-knowhost-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.cd-knowhost-list .ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:#1a6f4d}
.cd-knowhost-note{font-size:.9rem;color:#2d3934;line-height:1.6}
.cd-knowhost-right{border:1px solid #d9e2df;border-radius:14px;padding:14px;background:#fff}
.cd-knowhost-right h4{margin:0 0 6px;font-size:1rem;color:#1a3d2f}
.cd-text-small{font-size:.9rem;color:#2d3934}
.cd-safety-note{margin-top:12px;font-size:.75rem;color:#6b7a74}

.cd-needtoknow{display:grid;grid-template-columns:1fr;gap:12px}
.cd-list{list-style:none;padding-left:0;margin:0;display:flex;flex-direction:column;gap:6px}
.cd-list li{display:flex;align-items:center;gap:8px}
.cd-list li.is-disabled{color:#8a8a8a;text-decoration:line-through}
.cd-moreless{margin-top:6px}
/* Generic disabled helper */
.cd-text-disabled{color:#8a8a8a;text-decoration:line-through}
.cd-desc.is-disabled{color:#8a8a8a;text-decoration:line-through}


/* ================================================================== */
/* PWA MOBILE — SINGLE CONSOLIDATED BLOCK (v5-final)                   */
/* ALL PWA mobile styles in ONE place. DO NOT duplicate elsewhere.      */
/* Scope: html.is-pwa  @media (max-width: 760px)                      */
/* ================================================================== */

/* City label hidden by default (desktop) */
.pwa-city-label { display: none; }

/* ── Top Banner base styles (clean HTML, no inline styles) ── */
.top-banner {
    margin: 0;
    overflow: hidden;
    line-height: 0;
}
.top-banner a { display: block; }
.top-banner img {
    width: 100%;
    height: auto;
    max-height: 300px;
    display: block;
    object-fit: cover;
}
/* Desktop decoration */
@media (min-width: 761px) {
    .top-banner {
        padding: 10px 0 0;
        background: linear-gradient(135deg, #0b3b2e, #165a44);
    }
    .top-banner .tb-slides,
    .top-banner > a,
    .top-banner > img {
        max-width: 1100px;
        margin: 0 auto;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 14px 40px -10px rgba(2,6,23,.35);
        border: 1px solid #e2e8f0;
    }
}

/* Shell elements hidden by default */
.pwa-top-shell,
.pwa-global-bottom-nav { display: none; }

/* PWA CSS variables */
html.is-pwa {
    --pwa-bar: 58px;
    --pwa-shell: 50px;
}

/* ============================================================ */
/* DESKTOP ONLY — keep everything normal above 760px            */
/* ============================================================ */
@media (min-width: 761px) {
    #pwaMenuBtn, .pwa-menu-btn { display: none !important; }
    .pwa-global-bottom-nav { display: none !important; }
    .pwa-top-shell { display: none !important; }
    .pwa-city-label { display: none !important; }

    .main-nav ul li a {
        display: inline-flex !important;
        height: auto !important;
        padding: 6px 0 !important;
        position: relative !important;
        font-weight: 700 !important;
    }
    .main-nav ul li a.active {
        color: var(--primary-color) !important;
        font-weight: 700 !important;
    }
    .main-nav ul li a:hover::after,
    .main-nav ul li a.active::after {
        content: '' !important;
        position: absolute !important;
        bottom: -2px !important;
        left: 0 !important;
        width: 100% !important;
        height: 3px !important;
        background-color: var(--primary-color) !important;
    }
    .main-nav .logo::after,
    .main-nav .logo:hover::after,
    .main-nav .logo.active::after {
        display: none !important;
        content: none !important;
    }
    #userMenuBtn.user-gold-btn,
    a.user-gold-btn {
        background-color: transparent !important;
        color: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 4px 0 !important;
    }
    .mobile-menu-toggle a::after,
    .mobile-menu-toggle button::after,
    .user-gold-btn::after { display: none !important; content: none !important; }

    .hero-section {
        padding: 1.6rem 0 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .hero-content {
        background: rgba(0, 0, 0, 0.58) !important;
        backdrop-filter: blur(6px) !important;
        border-radius: 18px !important;
        padding: 2rem 2.5rem !important;
        max-width: 680px !important;
    }
}

/* ============================================================ */
/* PWA MOBILE — all styles for mobile standalone experience     */
/* ============================================================ */
@media (max-width: 760px) {

    /* ── HEADER FIXO ── */
    html.is-pwa .site-header {
        display: block !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important;
        height: calc(var(--pwa-bar) + env(safe-area-inset-top)) !important;
        z-index: 30000 !important;
        background: linear-gradient(145deg, #1a6f3a, #0f4a28) !important;
        box-shadow: 0 2px 16px rgba(0,0,0,.24) !important;
        overflow: visible !important;
    }
    html.is-pwa .main-nav {
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        padding: env(safe-area-inset-top) 14px 0 !important;
    }
    html.is-pwa .main-nav > .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important; max-width: none !important;
        padding: 0 !important;
        height: var(--pwa-bar) !important;
        gap: 10px !important;
    }
    /* Hide desktop menu */
    html.is-pwa .main-nav ul { display: none !important; }

    /* Logo + city name */
    html.is-pwa .main-nav .logo {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        gap: 10px !important;
    }
    html.is-pwa .main-nav .logo img {
        height: 40px !important;
        max-width: 160px !important;
        width: auto !important;
    }
    html.is-pwa .main-nav .logo .pwa-city-label {
        display: inline-block !important;
        color: #fff !important;
        font-size: .72rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        opacity: .96;
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Right side: user + hamburger hidden */
    html.is-pwa .mobile-menu-toggle {
        width: auto !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    html.is-pwa .mobile-menu-toggle .fa-bars { display: none !important; }
    html.is-pwa #pwaMenuBtn { display: none !important; }
    html.is-pwa .mobile-menu-toggle .user-menu { display: block !important; }

    /* User pill */
    html.is-pwa .user-gold-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        background: rgba(255,255,255,.18) !important;
        border: 1px solid rgba(255,255,255,.28) !important;
        padding: 4px 11px 4px 4px !important;
        border-radius: 999px !important;
        color: #fff !important;
        cursor: pointer !important;
        box-shadow: 0 1px 6px rgba(0,0,0,.18) !important;
        white-space: nowrap !important;
    }
    html.is-pwa .user-gold-btn .user-circle {
        width: 28px !important; height: 28px !important; flex-shrink: 0 !important;
    }
    html.is-pwa .user-gold-btn span:not(.user-circle) {
        display: inline !important;
        font-size: .82rem !important;
        font-weight: 800 !important;
        max-width: 100px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    html.is-pwa .user-gold-btn .fa-chevron-down { display: none !important; }

    /* Login button for visitors */
    html.is-pwa .mobile-menu-toggle > a[href="/login.php"] {
        display: inline-flex !important;
        align-items: center !important;
        padding: 5px 12px !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.15) !important;
        color: #fff !important;
        font-size: .73rem !important;
        text-decoration: none !important;
        font-weight: 700 !important;
    }

    /* ── TOP-SHELL (search bar below header) ── */
    html.is-pwa .pwa-top-shell {
        display: block !important;
        position: fixed !important;
        left: 0 !important; right: 0 !important;
        top: calc(var(--pwa-bar) + env(safe-area-inset-top)) !important;
        z-index: 29990 !important;
        background: linear-gradient(145deg, #1a6f3a, #0f4a28) !important;
        padding: .4rem .75rem .1rem !important;
    }
    html.is-pwa .pwa-top-search {
        display: flex !important;
        align-items: center !important;
        border-radius: 12px !important;
        border: 1px solid #d9e1dd !important;
        background: #fff !important;
        overflow: hidden !important;
        box-shadow: 0 4px 12px -10px rgba(2,6,23,.45) !important;
        margin-bottom: .4rem !important;
    }
    html.is-pwa .pwa-top-search input {
        flex: 1 !important; border: 0 !important; outline: 0 !important;
        font-size: 16px !important; padding: 10px 12px !important;
    }
    html.is-pwa .pwa-top-search button {
        border: 0 !important; background: #fff !important; color: #1d3a29 !important;
        min-width: 42px !important; height: 40px !important;
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
    }

    /* ── BOTTOM NAV ── */
    html.is-pwa .pwa-global-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        z-index: 30000 !important;
        background: #fff !important;
        border-top: 1.5px solid #dce8e2 !important;
        height: calc(var(--pwa-bar) + env(safe-area-inset-bottom)) !important;
        align-items: stretch !important;
        box-shadow: 0 -4px 18px rgba(0,0,0,.09) !important;
        padding: 0 !important;
        /* GPU compositing layer — prevents iOS PWA scroll-along bug */
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
    html.is-pwa .pwa-global-bottom-nav a,
    html.is-pwa .pwa-global-bottom-nav button {
        border: 0 !important; background: transparent !important;
        text-decoration: none !important; color: #5a6e66 !important;
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: center !important;
        gap: 3px !important; font-size: .68rem !important; font-weight: 600 !important;
        cursor: pointer !important; line-height: 1 !important;
        padding: 0 4px env(safe-area-inset-bottom) !important;
    }
    html.is-pwa .pwa-global-bottom-nav i {
        display: block !important; font-size: 1.22rem !important; line-height: 1 !important;
    }
    html.is-pwa .pwa-global-bottom-nav a.active,
    html.is-pwa .pwa-global-bottom-nav .active {
        color: #1a6f3a !important; font-weight: 900 !important;
    }
    html.is-pwa .pwa-global-bottom-nav .active i { color: #1a6f3a !important; }

    /* Hide standard footer in PWA */
    html.is-pwa .main-footer { display: none !important; }

    /* ── SCROLL FIX: keep fixed elements truly fixed on iOS PWA ──
       Make html+body non-scrollable; scroll happens inside <main>.
       position:fixed elements are ALWAYS viewport-anchored (overflow:auto
       on a parent does NOT create a fixed containing block). ── */
    html.is-pwa {
        height: 100% !important;
        overflow: hidden !important;
    }
    html.is-pwa body {
        height: 100% !important;
        overflow: hidden !important;
        /* body is display:flex;flex-direction:column — main will flex-grow */
    }

    /* ── CONTENT SPACING ── */
    html.is-pwa main {
        padding-top: calc(var(--pwa-bar) + var(--pwa-shell) + env(safe-area-inset-top)) !important;
        padding-bottom: calc(var(--pwa-bar) + env(safe-area-inset-bottom) + 40px) !important;
        /* Scroll container — replaces body scroll so fixed nav stays truly fixed */
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    html.is-pwa .main-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    html.is-pwa main > .container,
    html.is-pwa .main-content > .container,
    html.is-pwa .main-content .container {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ── DROPDOWNS ── */
    html.is-pwa #pwaMenuDropdown,
    html.is-pwa #userDropdown {
        top: calc(var(--pwa-bar) + env(safe-area-inset-top)) !important;
        z-index: 30001 !important;
    }

    /* ── DRAWER ── */
    html.is-pwa #pwaNavDrawer { z-index: 31000 !important; }
    html.is-pwa #pwaNavOverlay { z-index: 30999 !important; }

    /* ── MODALS ── */
    html.is-pwa .gal-lightbox,
    html.is-pwa .video-modal,
    html.is-pwa .routes-modal,
    html.is-pwa .val-modal,
    html.is-pwa .cd-lightbox,
    html.is-pwa [class*="modal"][style*="fixed"]:not(.pwa-global-bottom-nav) {
        z-index: 32000 !important;
    }

    /* ── STICKY BARS → above bottom-nav ── */
    html.is-pwa .local-mobile-cta,
    html.is-pwa .oferta-mobile-actions,
    html.is-pwa .pk-buy-bar,
    html.is-pwa .mk-sticky,
    html.is-pwa .mc-home-actions {
        bottom: calc(var(--pwa-bar) + env(safe-area-inset-bottom) + 8px) !important;
        z-index: 29000 !important;
    }
    html.is-pwa #pwa-install-banner {
        bottom: calc(var(--pwa-bar) + env(safe-area-inset-bottom) + 6px) !important;
        z-index: 29500 !important;
    }

    /* ── BANNERS (PWA) — fora a fora, sem borda, sem arredondamento ── */
    html.is-pwa .top-banner {
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border-radius: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }
    html.is-pwa .top-banner .tb-slides,
    html.is-pwa .top-banner > a,
    html.is-pwa .top-banner > img,
    html.is-pwa .top-banner .tb-slides img {
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    html.is-pwa .top-banner img {
        max-height: 140px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        display: block !important;
    }

    /* ── HOME PAGE ── */
    html.is-pwa body.is-home-route .hero-content { display: none !important; }
    html.is-pwa body.is-home-route .pwa-home-skeleton { display: none !important; }
    html.is-pwa body.is-home-route .hero-section {
        display: block !important;
        position: relative !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        height: 160px !important; min-height: 160px !important; max-height: 160px !important;
        padding: 0 !important;
        width: 100% !important;
    }
    html.is-pwa body.is-home-route .slideshow-container { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }
    html.is-pwa body.is-home-route .hero-slide {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        background-size: cover !important;
        background-position: top center !important;
        opacity: 0 !important;
        transition: opacity .35s ease !important;
    }
    html.is-pwa body.is-home-route .hero-slide:first-child,
    html.is-pwa body.is-home-route .hero-slide.active { opacity: 1 !important; }
    html.is-pwa body.is-home-route .hero-slide::before { background: rgba(0,0,0,.12) !important; }

    /* Non-home hero */
    html.is-pwa body:not(.is-home-route) .hero-section {
        display: block !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        height: 164px !important; min-height: 164px !important; max-height: 164px !important;
        padding: 0 !important;
        width: 100% !important;
    }
    html.is-pwa body:not(.is-home-route) .hero-content h1,
    html.is-pwa body:not(.is-home-route) .hero-content .search-bar,
    html.is-pwa body:not(.is-home-route) .hero-content p { display: none !important; }

    /* Destaques & Pacotes → horizontal scroll */
    html.is-pwa .home-destaques h2,
    html.is-pwa .pacotes-promos h2 {
        font-size: 1.08rem !important; font-weight: 900 !important;
        margin: 0 0 8px !important; color: #121a17 !important;
    }
    html.is-pwa .pacotes-promos p { display: none !important; }
    /* Remove o padding de 32px do carousel de desktop (lugar das setas) */
    html.is-pwa .home-destaques .home-carousel,
    html.is-pwa .pacotes-promos .home-carousel {
        padding: 0 !important;
    }
    /* Oculta setas do carousel no mobile — usa swipe */
    html.is-pwa .hc-arrow { display: none !important; }
    /* Garante alinhamento à esquerda igual ao pacotes (override do text-align:center inline) */
    html.is-pwa .home-destaques { text-align: left !important; }
    /* Aplica o scroll horizontal no track real (hc-track), não em .destaques-grid inexistente */
    html.is-pwa .home-destaques .hc-track,
    html.is-pwa .home-pacotes-grid {
        display: flex !important; gap: 10px !important;
        overflow-x: auto !important; scroll-snap-type: x mandatory;
        padding-bottom: 6px !important;
        -ms-overflow-style: none !important; scrollbar-width: none !important;
        align-items: stretch !important;
    }
    html.is-pwa .home-destaques .hc-track::-webkit-scrollbar,
    html.is-pwa .home-pacotes-grid::-webkit-scrollbar { display: none; }
    /* PWA dest-card e pacote-card: herdam estilo do desktop (gerido por home.php) */
    html.is-pwa .dest-stars { display: flex !important; gap: 1px; color: #f3b302; font-size: .78rem; }

    /* Carousel arrows hidden on mobile */
    html.is-pwa .hc-arrow { display: none !important; }

    /* ── PAGE: LOCAL ── */
    html.is-pwa .local-hero { min-height: 180px !important; max-height: 220px !important; }
    html.is-pwa .local-hero__inner { padding: 18px 16px !important; }
    html.is-pwa .local-hero__title { font-size: 1.35rem !important; }
    html.is-pwa .local-wrap { grid-template-columns: 1fr !important; gap: 14px !important; padding: 14px 12px 24px !important; }
    html.is-pwa .local-side { order: -1; }
    html.is-pwa .local-side .sticky { position: static !important; }
    html.is-pwa .local-gallery { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
    html.is-pwa .local-gallery img { height: 100px !important; }
    html.is-pwa .guia-head { grid-template-columns: 56px 1fr !important; gap: 12px !important; }
    html.is-pwa .guia-avatar { width: 56px !important; height: 56px !important; }
    html.is-pwa .pg-embed .pacotes-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    html.is-pwa .cta-grid { grid-template-columns: 1fr 1fr !important; }
    html.is-pwa .cta-grid .cta { font-size: .78rem !important; padding: 10px 8px !important; }

    /* ── PAGE: PACOTE DETALHE ── */
    html.is-pwa .pk-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
    html.is-pwa .pk-hero { min-height: 200px !important; margin-bottom: .75rem !important; }
    html.is-pwa .pk-buy { position: static !important; top: auto !important; margin: 0 0 16px !important; }
    html.is-pwa .pk-gallery { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 90px !important; gap: 4px !important; }
    html.is-pwa .pk-main { padding: 0 12px !important; }

    /* ── PAGE: OFERTA DETALHE ── */
    html.is-pwa .oferta-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
    html.is-pwa .oferta-sidebar { position: static !important; top: auto !important; }

    /* ── PAGE: PACOTES ── */
    html.is-pwa .pacotes-wrap { padding: 14px 12px !important; }
    html.is-pwa .pacotes-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    html.is-pwa .hero--slim { min-height: auto !important; padding: 18px 14px !important; }

    /* ── PAGE: OFERTAS / PASSAPORTE ── */
    html.is-pwa .promo-wrap { padding: 14px 12px !important; }
    html.is-pwa .promo-wrap .pacotes-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    html.is-pwa .pp-wrap { padding: 0 12px !important; margin: 16px auto !important; }

    /* ── PAGE: MINHA CONTA ── */
    html.is-pwa .mc-main { flex-direction: column !important; padding-bottom: 20px !important; }
    html.is-pwa .mc-home-grid { grid-template-columns: 1fr 1fr !important; }

    /* ── PAGE: CABANAS ── */
    html.is-pwa .cabanas-band__inner { padding: 14px 12px !important; }

    /* ── PAGE: EXPLORER / ROTEIROS ── */
    html.is-pwa .explore-band__inner { padding: 14px 12px !important; }
    /* Hide page-level search bar — pwa-top-shell already provides one */
    html.is-pwa #exploreSearchForm.search-bar { display: none !important; }
    html.is-pwa .hero-content .search-bar { display: none !important; }

    /* ── PAGE: REVISTA ── */
    html.is-pwa .revista-wrap { padding: 14px 12px !important; }
    html.is-pwa .revista-row { grid-template-columns: 1fr !important; gap: 14px !important; }

    /* ── PAGE: CONTATO ── */
    html.is-pwa main > section[style*="max-width:900px"] { padding: 20px 12px !important; }

    /* ── PAGE: LOGIN / REGISTRO ── */
    html.is-pwa .login-wrap { margin: 20px auto !important; padding: 0 12px !important; }

    /* ── GENERIC GRIDS ── */
    html.is-pwa .cards-grid,
    html.is-pwa .roteiros-grid,
    html.is-pwa .cabanas-grid,
    html.is-pwa .locais-grid,
    html.is-pwa .guias-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ── TABLES ── */
    html.is-pwa table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ── FORMS (prevent iOS zoom) ── */
    html.is-pwa input[type="text"],
    html.is-pwa input[type="email"],
    html.is-pwa input[type="password"],
    html.is-pwa input[type="tel"],
    html.is-pwa input[type="search"],
    html.is-pwa select,
    html.is-pwa textarea {
        font-size: 16px !important;
    }

    /* ── TOUCH TARGETS ── */
    html.is-pwa .btn,
    html.is-pwa a.btn,
    html.is-pwa button.btn {
        min-height: 44px !important;
    }

    /* ── HIDE DESKTOP-ONLY ── */
    html.is-pwa .desktop-only,
    html.is-pwa .hide-mobile { display: none !important; }
}

/* ================================================================== */
/* FALLBACK: display-mode: standalone without is-pwa class             */
/* Handles first-open before cookie/class is set                       */
/* ================================================================== */
@media (max-width: 760px) and (display-mode: standalone) {
    .site-header {
        display: block !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important;
        height: calc(58px + env(safe-area-inset-top)) !important;
        z-index: 30000 !important;
        background: linear-gradient(145deg, #1a6f3a, #0f4a28) !important;
        box-shadow: 0 2px 16px rgba(0,0,0,.24) !important;
    }
    .main-nav {
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        padding: env(safe-area-inset-top) 14px 0 !important;
    }
    .main-nav > .container {
        display: flex !important; align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important; max-width: none !important;
        padding: 0 !important; height: 58px !important; gap: 10px !important;
    }
    .main-nav ul { display: none !important; }
    .main-nav .logo img { height: 36px !important; max-width: 160px !important; width: auto !important; }
    .mobile-menu-toggle { width: auto !important; justify-content: flex-end !important; margin-left: auto !important; }
    .mobile-menu-toggle .fa-bars { display: none !important; }
    .pwa-city-label { display: inline-block !important; color: #fff !important; font-size: .72rem !important; font-weight: 700 !important; }

    .pwa-global-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        z-index: 30000 !important;
        background: #fff !important;
        border-top: 1.5px solid #dce8e2 !important;
        height: calc(58px + env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -4px 18px rgba(0,0,0,.09) !important;
        padding: 0 !important;
        /* Force GPU layer so iOS treats this as truly viewport-fixed */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    .pwa-global-bottom-nav a,
    .pwa-global-bottom-nav button {
        border: 0 !important; background: transparent !important;
        text-decoration: none !important; color: #5a6e66 !important;
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: center !important;
        gap: 3px !important; font-size: .68rem !important; font-weight: 600 !important;
        padding: 0 4px env(safe-area-inset-bottom) !important;
    }
    .pwa-global-bottom-nav i { display: block !important; font-size: 1.22rem !important; }
    .pwa-global-bottom-nav .active { color: #1a6f3a !important; font-weight: 900 !important; }

    /* Scroll fix: html+body non-scrollable; main is the scroll container */
    html, body { height: 100% !important; overflow: hidden !important; }
    main {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .main-footer { display: none !important; }
    .pwa-top-shell {
        display: block !important;
        position: fixed !important;
        top: calc(58px + env(safe-area-inset-top)) !important;
        left: 0 !important; right: 0 !important;
        z-index: 29990 !important;
    }
    main {
        padding-top: calc(58px + 50px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(58px + env(safe-area-inset-bottom) + 40px) !important;
    }
    body { overflow-x: hidden !important; }
}