/* app-mode.css — "pele" de aplicativo das páginas da loja quando abertas
   DENTRO do app Android (ver app-mode.js, que põe a classe html.loira-app).

   No app, a página não pode parecer o site: o app já tem barra de título,
   voltar, menu e suporte, e tem o próprio visual (fonte Plus Jakarta Sans,
   preto profundo, vermelho da marca, cards de vidro, folhas que sobem de
   baixo). Aqui tudo isso é aplicado por cima do CSS de cada página — só
   aparência; nenhuma regra de compra muda.
   No navegador normal NADA daqui vale (tudo depende de html.loira-app). */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("/fonts/plus-jakarta-sans.woff2") format("woff2-variations"),
         url("/fonts/plus-jakarta-sans.woff2") format("woff2");
}

/* ─── paleta do app (as páginas usam estas mesmas variáveis) ─── */
html.loira-app {
    --color-dark: #060608;
    --color-card: #111117;
    --color-darker-card: #0b0b10;
    --color-primary: #ff2d44;
    --color-primary-2: #ff5a6b;
    --color-highlight: #ff2d44;
    --color-green: #2fe38a;
    --color-muted: #9b9bad;
    --color-secondary-text: #9b9bad;
    --color-text: #f6f6f9;
    --line: rgba(255, 255, 255, .07);
    --line-2: rgba(255, 255, 255, .12);
    --radius: 20px;
    --app-card: linear-gradient(165deg, #17171f, #111117);
    --app-red: linear-gradient(135deg, #ff3b52 0%, #d0102a 100%);
    --app-ease: cubic-bezier(.22, 1, .36, 1);
    scroll-padding-top: 12px;
    overscroll-behavior-y: contain;
}

/* ─── o que é do site e some no app ─── */
html.loira-app .main-header,
html.loira-app .float-support,
html.loira-app .app-promo-overlay,
html.loira-app .app-promo-mini,
html.loira-app .app-promo-banner,
html.loira-app .background-fx,
html.loira-app .gradient-overlay,
html.loira-app .dust,
html.loira-app .ticker-container,
html.loira-app .foot,
html.loira-app .footer-disclaimer-box,
html.loira-app .footer-disclaimer-section,
html.loira-app .footer-copyright,
html.loira-app .hero-kicker,
html.loira-app .hero > h1,
html.loira-app .hero > h2,
html.loira-app .hero .badges,
html.loira-app .hero .gold-rule {
    display: none !important;
}
html.loira-app body.app-promo-open { overflow: auto !important; }

/* ─── fundo e fonte ─── */
html.loira-app,
html.loira-app body {
    background: #060608 !important;
}
html.loira-app body {
    background:
        radial-gradient(120% 34% at 50% -4%, rgba(255, 45, 68, .14), transparent 62%),
        #060608 !important;
    background-attachment: fixed !important;
    color: #f6f6f9;
    padding-top: 2px;
    -webkit-font-smoothing: antialiased;
}
html.loira-app :is(body, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, li, small, strong, b, em, div, span, td, th, summary):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab) {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
html.loira-app ::-webkit-scrollbar { width: 0; height: 0; }

/* ─── largura e respiro de tela de app ─── */
html.loira-app :is(.catalog-wrap, .page-wrap, .container) {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 40px !important;
}

/* ─── topo da página: vira um resumo compacto ─── */
html.loira-app .hero {
    text-align: left !important;
    padding: 10px 0 0 !important;
    margin: 0 !important;
}
html.loira-app .hero > p {
    color: #9b9bad !important;
    font-size: .86rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: none !important;
}
html.loira-app .hero-stats {
    margin: 14px 0 0 !important;
    max-width: none !important;
    gap: 8px !important;
}
html.loira-app .hstat {
    background: var(--app-card) !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    padding: 12px 6px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-align: center;
}
html.loira-app .hstat b {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -.2px;
}
html.loira-app .hstat span {
    font-size: .6rem !important;
    letter-spacing: .5px !important;
    font-weight: 700 !important;
    color: #9b9bad !important;
}

/* ─── títulos de seção como no app ─── */
html.loira-app .section-label,
html.loira-app .section-title {
    text-transform: none !important;
    letter-spacing: .1px !important;
    font-size: 1.04rem !important;
    font-weight: 800 !important;
    color: #f6f6f9 !important;
    margin: 28px 2px 12px !important;
    gap: 8px !important;
}
html.loira-app .section-label::after,
html.loira-app .section-title::after { display: none !important; }
html.loira-app .section-label i,
html.loira-app .section-title i { color: var(--color-primary) !important; }
html.loira-app .section-label .cnt {
    font-size: .68rem !important;
    letter-spacing: 0 !important;
    background: rgba(255, 45, 68, .14) !important;
    color: #ff8a96 !important;
    border: 0 !important;
    border-radius: 99px !important;
    padding: 2px 8px !important;
}

/* ─── cards ─── */
html.loira-app :is(.pack, .cat-card, .featured-card, .lvl-card, .plat-card, .dev-card, .result-card,
    .status-card, .lookup-panel, .lookup-box, .prime-alert, .ped-card, .preview-box, .tutorial-box,
    .notice, .unavail-card, .esgotado-geral, .price-hero, .event-card, .info-card, .glass-card, .card) {
    background: var(--app-card) !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.loira-app :is(.pack, .cat-card, .featured-card, .lvl-card, .plat-card) {
    transition: transform .18s var(--app-ease) !important;
}
html.loira-app :is(.pack, .cat-card, .featured-card, .lvl-card, .plat-card):active {
    transform: scale(.975) !important;
}
html.loira-app .step-card {
    background: #111117 !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
}
html.loira-app :is(.item-title, .lvl-card h3, .plat-card h3, .pack h3) {
    letter-spacing: 0 !important;
    font-weight: 800 !important;
}

/* ─── botões ─── */
html.loira-app :is(.premium-button, .btn-buy, .btn-plat, .btn-primary, .btn-danger, .btn-vincular, .ma-btn) {
    border-radius: 16px !important;
    text-transform: none !important;
    letter-spacing: .2px !important;
    font-weight: 800 !important;
    font-size: .92rem !important;
}
html.loira-app :is(.premium-button, .btn-primary, .btn-danger) {
    background: var(--app-red) !important;
    border: 0 !important;
    color: #fff !important;
    min-height: 52px;
    box-shadow: 0 10px 26px rgba(255, 45, 68, .34), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
html.loira-app .btn-buy {
    min-height: 46px !important;
    height: auto !important;
    font-size: .84rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
html.loira-app :is(.premium-button, .btn-buy, .btn-primary, .btn-danger, .btn-ghost, .btn-copy, .btn):active {
    transform: scale(.97) !important;
    filter: brightness(1.08);
}
html.loira-app :is(.btn-ghost, .btn-outline-light, .btn-secondary, .btn-dark) {
    border-radius: 14px !important;
    background: #17171f !important;
    border: 1px solid var(--line-2) !important;
    color: #f6f6f9 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
}
html.loira-app :is(.btn-zap, .btn-success) {
    border-radius: 16px !important;
    text-transform: none !important;
    letter-spacing: .2px !important;
    background: linear-gradient(135deg, #2fe07a, #14a34f) !important;
    border: 0 !important;
}

/* ─── abas (segmentado) e chips ─── */
html.loira-app .tabs {
    background: #111117 !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    margin: 20px 0 16px !important;
    max-width: none !important;
}
html.loira-app :is(.tab-btn, .vr-tab) {
    text-transform: none !important;
    letter-spacing: .1px !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
}
html.loira-app :is(.chip, .pack-chip, .badge-ok, .marca-tag, .lvl-badge) {
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 99px !important;
}
html.loira-app .chips .chip {
    font-size: .78rem !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    background: #111117 !important;
    border: 1px solid var(--line) !important;
}
html.loira-app .chips .chip.active {
    background: #ff2d44 !important;
    border-color: #ff2d44 !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(255, 45, 68, .35);
}
html.loira-app .price-tag {
    font-size: .58rem !important;
    letter-spacing: .3px !important;
    border-radius: 99px !important;
    padding: 2px 7px !important;
}

/* ─── campos ─── */
html.loira-app :is(.form-control, .form-select, .search-wrap input, .lookup-row input, .lp-row input,
    input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="search"], textarea) {
    background: rgba(0, 0, 0, .45) !important;
    border: 1.5px solid rgba(255, 255, 255, .12) !important;
    border-radius: 14px !important;
    color: #fff !important;
    min-height: 50px;
    box-shadow: none !important;
}
html.loira-app :is(.form-control, .form-select, input, textarea):focus {
    border-color: #ff2d44 !important;
    box-shadow: 0 0 0 4px rgba(255, 45, 68, .14) !important;
    outline: none !important;
}
html.loira-app input::placeholder,
html.loira-app textarea::placeholder { color: #636378 !important; }

/* ─── janelas (modal) viram folhas que sobem de baixo ─── */
html.loira-app .modal-backdrop.show { opacity: .7 !important; }
html.loira-app .modal .modal-dialog {
    display: flex !important;
    align-items: flex-end !important;
    min-height: 100% !important;
    max-width: 560px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-top: 5vh;
}
html.loira-app .modal.fade .modal-dialog {
    transform: translateY(100%) !important;
    transition: transform .38s var(--app-ease) !important;
}
html.loira-app .modal.show .modal-dialog { transform: none !important; }
html.loira-app .modal .modal-dialog.modal-dialog-scrollable { height: 100% !important; }
html.loira-app .modal .modal-content {
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #17171f, #0b0b10) !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 28px 28px 0 0 !important;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .6) !important;
    padding-top: 10px;
}
html.loira-app .modal .modal-content::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .18);
    margin: 0 auto 6px;
    flex-shrink: 0;
}
html.loira-app .modal :is(.modal-header, .modal-footer) { border: 0 !important; }
html.loira-app .modal .modal-title {
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* folha de indicação ("Meu link") no mesmo padrão */
html.loira-app .ind-sheet {
    background: linear-gradient(180deg, #17171f, #0b0b10) !important;
    border-radius: 28px 28px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
}
html.loira-app .ind-launcher {
    background: rgba(20, 20, 28, .92) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 201, 77, .4) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ─── PIX dentro das páginas ─── */
html.loira-app :is(.pix-box, .pix-qr) {
    border-radius: 22px !important;
}
html.loira-app .pix-timer {
    letter-spacing: 0 !important;
}