/* A página pública /apps: a vitrine dos apps da família BiP, livre para não logados. */

.apps-page {
    --ap-bg: #f5f8fd;
    --ap-surface: #ffffff;
    --ap-text: #14233b;
    --ap-muted: #607188;
    --ap-border: #dfe8f2;
    --ap-accent: #4070b0;
    --ap-accent-ink: #ffffff;
    --ap-ok-bg: #e9f7ef;
    --ap-ok-ink: #1c7a42;
    --ap-err: #c62828;
    min-height: 100vh;
    color: var(--ap-text);
    background: var(--ap-bg);
    font-family: var(--font, Inter, system-ui, sans-serif);
}

/* UMA LOGO SÓ (22/10/26, defeito do dono: *"corrigir este bug de ter 2 logos"*). Esta página usa a casca
   mínima, que não carrega a vk-player-bar.css — e é ela que esconde a marca do topo do rail nas outras
   telas. Sem isso, a logo do rail aparecia embaixo da logo da barra de cima. Mesma regra, mesmo alvo. */
body:has(.apps-page) .sidebar-head,
body:has(.apps-page) .rail-topo-row {
    display: none !important;
}

/* DENTRO DA CASA: se um dia a página nascer no main-content (layout do rail), o 100vh e o fundo
   próprios são do modo visitante, que ocupa a tela sozinho. */
.bip-layout-with-rail .apps-page {
    min-height: 0;
    background: transparent;
}

[data-theme="dark"] .apps-page {
    --ap-bg: #0b1423;
    --ap-surface: #142238;
    --ap-text: #eef5ff;
    --ap-muted: #a9bad1;
    --ap-border: #2c3e55;
    --ap-ok-bg: #123524;
    --ap-ok-ink: #7fe3ab;
}

.apps-page *, .apps-page *::before, .apps-page *::after { box-sizing: border-box; }

.apps-page a:focus-visible,
.apps-page button:focus-visible,
.apps-page input:focus-visible {
    outline: 3px solid #54b9ff;
    outline-offset: 3px;
}

.apps-hero,
.apps-grid,
.apps-page__footer {
    width: min(100%, 1100px);
    margin-inline: auto;
    padding-inline: 24px;
}

/* COMEÇA MAIS PARA CIMA (22/10/26, ordem do dono): o vão do topo era quase uma tela em branco
   antes do primeiro cartão. O respiro continua, bem menor. */
.apps-hero {
    padding-top: clamp(14px, 2.2vw, 26px);
    padding-bottom: 12px;
    text-align: center;
}

/* A chamada embaixo do subtítulo: o que fazer na página, em uma linha. */
.apps-hero__chamada {
    margin: 10px 0 0;
    color: var(--ap-text);
    font-weight: 650;
}

.apps-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ap-accent) 14%, transparent);
    color: var(--ap-accent);
    font-weight: 750;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.apps-hero h1 {
    margin: 16px 0 10px;
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1.18;
}

.apps-hero p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--ap-muted);
    font-size: 1.02rem;
    line-height: 1.55;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    padding-top: 32px;
    padding-bottom: 40px;
}

/* A FICHA USA A LARGURA INTEIRA (22/10/26, defeito do dono: *"no pc está certo escreve na frente, mas
   não usa o espaço abaixo aí fica estranho este monte de faixa branca. vamos usar o espaço todo"*).
   Em flex, o ícone era uma coluna e TODO o resto ficava espremido na coluna ao lado dele — sobrava uma
   faixa branca embaixo do ícone. Agora é uma grade de duas colunas: o ícone e o cabeçalho (nome + selo)
   dividem a primeira linha, e da descrição para baixo cada bloco atravessa a ficha de ponta a ponta,
   passando por baixo do ícone. */
.apps-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
    padding: 20px;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(8, 30, 63, 0.06);
}

/* O `display: contents` dissolve o corpo: os filhos dele viram itens da grade da ficha, e por isso o
   cabeçalho consegue subir para o lado do ícone sem mexer no HTML. */
.apps-card__corpo { display: contents; }

.apps-card__icone { grid-column: 1; grid-row: 1; }

.apps-card__topo { grid-column: 2; grid-row: 1; }

.apps-card__corpo > :not(.apps-card__topo) { grid-column: 1 / -1; }

/* BOTÃO NO MEIO, EM QUALQUER LARGURA (22/10/26, ordem do dono: *"no desktop deixar centralizado tb os
   botões"*). O "Pedir convite" é filho do <form>, não da grade: quem centra é o próprio form, que vira
   coluna — campo em cima ocupando a largura, botão centrado embaixo. O `justify-self` também impede a
   pílula de esticar de ponta a ponta, que é o que um item de grade faz sem ele. */
.apps-card__baixar { justify-self: center; }

.apps-card__ja-tem { justify-content: center; }

/* A FICHA DO BiP É LARGA, ENTÃO O CONTEÚDO VAI NO MEIO (22/10/26, ordem do dono: *"o bip ficar
   centralizado"*). Ela ocupa as três colunas da vitrine; encostado à esquerda, sobrava meia ficha
   vazia à direita. Com as colunas do tamanho do conteúdo e `justify-content: center`, o bloco
   inteiro (ícone + nome, descrição e botão) fica centrado. */
.apps-card--principal {
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Sem o teto de largura o centro não acontece: numa coluna `auto`, o parágrafo entra na conta pelo
   tamanho que teria TODO numa linha só, estufa as colunas até a ficha inteira e não sobra folga para
   o `justify-content` centrar nada. Com o teto, o bloco fica estreito e vai para o meio. */
.apps-card--principal .apps-card__corpo > p {
    justify-self: center;
    max-width: 62ch;
}

/* O parágrafo atravessa as duas colunas e reparte a largura dele entre elas, o que afastava o ícone
   do nome. Encostando um no fim da coluna e o outro no começo da seguinte, os dois voltam a andar
   juntos, no meio da ficha. */
.apps-card--principal .apps-card__icone { justify-self: end; }
.apps-card--principal .apps-card__topo { justify-self: start; }

.apps-card__icone {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
}


.apps-card__topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.apps-card__topo h2 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 750;
}

.apps-card__selo {
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ap-accent) 12%, transparent);
    color: var(--ap-accent);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.apps-card__selo--livre {
    background: var(--ap-ok-bg);
    color: var(--ap-ok-ink);
}

.apps-card__corpo > p {
    margin: 0;
    color: var(--ap-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.apps-card__forma {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.apps-card__campo {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.apps-card__rotulo {
    font-size: 0.74rem;
    color: var(--ap-muted);
}

/* O ENVIAR MORA DENTRO DO CAMPO (22/10/26, ordem do dono): a caixa é a moldura, o input não tem
   borda própria e o botão fica encostado na direita, como num campo de mensagem. */
.apps-card__caixa {
    position: relative;
    display: block;
}

.apps-card__caixa input {
    padding-right: 48px;
}

.apps-card__enviar {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
    cursor: pointer;
    transition: opacity .15s, transform .15s;
}

.apps-card__enviar:hover { transform: translateY(-50%) scale(1.06); }

.apps-card__enviar:disabled {
    opacity: 0.55;
    cursor: default;
    transform: translateY(-50%);
}

/* "Enviando": o avião pisca em vez de virar texto, que apagaria o ícone. */
.apps-card__enviar.is-enviando svg { animation: apps-piscar 1s ease-in-out infinite; }

@keyframes apps-piscar {
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .apps-card__enviar,
    .apps-card__enviar.is-enviando svg { transition: none; animation: none; }
}

.apps-card__campo input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ap-border);
    border-radius: 10px;
    background: var(--ap-bg);
    color: var(--ap-text);
    font-size: 0.92rem;
}

.apps-card__isca {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    white-space: nowrap;
}

.apps-card__status {
    margin: 2px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--ap-ok-bg);
    color: var(--ap-ok-ink);
    font-size: 0.85rem;
    line-height: 1.45;
}

.apps-card__erro {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--ap-err);
}

.apps-card__baixar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--ap-accent);
    color: var(--ap-accent-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}

/* QUEM JÁ TEM O CONVITE (22/10/26): o selo oficial da Play embaixo do pedido. A ficha da loja
   só abre para quem já é testador, então isto é atalho, não a porta principal. */
.apps-card__ja-tem {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--ap-border);
    color: var(--ap-muted);
    font-size: 0.8rem;
}

.apps-card__play {
    display: inline-flex;
    line-height: 0;
    border-radius: 6px;
}

.apps-card__play img {
    width: 113px;
    height: 44px;
}

/* No cartão do BiP o selo é o botão principal da ficha, então vem maior e centrado. */
.apps-card__play--grande {
    justify-self: center;
}

.apps-card__play--grande img {
    width: 155px;
    height: 60px;
}

.apps-card__play:focus-visible {
    outline: 2px solid var(--ap-accent);
    outline-offset: 2px;
}

.apps-page__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 18px;
    padding-bottom: 32px;
    border-top: 1px solid var(--ap-border);
    color: var(--ap-muted);
    font-size: 0.82rem;
}

.apps-page__footer nav { display: flex; gap: 16px; }
.apps-page__footer a { color: var(--ap-muted); text-decoration: none; }
.apps-page__footer a:hover { color: var(--ap-accent); }

/* NO CELULAR (22/10/26, defeito do dono: *"no celular web ficou bem feio... escrever o nome do app e a
   badge ao lado e o texto já começar na linha debaixo"*). A grade de duas linhas já vem da regra base;
   aqui só o que é do telefone: ícone um pouco menor e o botão no meio. */
@media (max-width: 520px) {
    .apps-card__icone {
        width: 56px;
        height: 56px;
    }

}