/* ==========================================================================
   Smart App Install Banner — componente ÚNICO para os 4 temas.

   Todas as cores vêm dos tokens gerados por /?page=colors-styles. Zero hex,
   rgb, rgba, hsl ou nome de cor literal neste arquivo — é o que garante que
   o banner herde a identidade de cada instalação sem ajuste manual.

   Nenhum seletor toca o #player: a convivência é resolvida por offset
   (--sab-offset), medido em runtime pelo JS.

   Sem <p> e sem <li> no markup: a regra global `p:not(.font-preview), li`
   de Settings::getThemeCSS() aplica cor/tamanho com !important e venceria
   qualquer estilo local (o --body-font-color padrão ficaria ilegível sobre
   o painel em tema dark).
   ========================================================================== */

/* ── Card do banner ─────────────────────────────────────────────────────── */
.sab {
    position: fixed;
    left: 12px;
    right: 12px;
    /* --sab-offset = espaço ocupado pelo player, medido pelo JS. Com player
       presente a safe-area já está embutida na medição. */
    bottom: calc(var(--sab-offset, 0px) + 12px);
    z-index: 10100; /* > mobile nav (9999) e player (9998); < cookie banner (10500) */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}

/* Página sem player: aqui a safe-area precisa entrar explicitamente. */
.sab--no-player {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.sab--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sab__card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "icon title close"
        "icon sub   sub"
        "cta  cta   cta";
    align-items: center;
    gap: 2px 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--bg-card, var(--bg-primary));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    max-width: 460px;
    margin-left: auto;
}

.sab__icon {
    grid-area: icon;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    object-fit: cover;
    flex-shrink: 0;
    align-self: center;
}

.sab__title {
    grid-area: title;
    font-family: var(--card-title-font-family, inherit);
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    align-self: end;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sab__subtitle {
    grid-area: sub;
    font-family: var(--body-font-family, inherit);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
    align-self: start;
}

/* Botão de fechar (×) */
.sab__close {
    grid-area: close;
    align-self: start;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: -4px -4px 0 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, var(--text-secondary));
    border-radius: 50%;
    flex-shrink: 0;
}

.sab__close svg {
    width: 15px;
    height: 15px;
    pointer-events: none;
}

.sab__close:hover,
.sab__close:focus-visible {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

/* CTA primário — <a> para loja, <button> para o prompt da PWA.
   Ambos existem no DOM; o JS revela o correto. */
.sab__cta {
    grid-area: cta;
    justify-self: stretch;
    margin-top: 12px;
    padding: 12px 18px;
    border: none;
    border-radius: 11px;
    background: var(--color-primary);
    color: var(--player-text-color);
    font-family: var(--body-font-family, inherit);
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sab__cta:hover {
    background: var(--color-secondary);
}

.sab__cta:active {
    opacity: 0.85;
}

.sab__cta[hidden] {
    display: none;
}

.sab__cta svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* Desktop: card compacto, ancorado à direita. */
@media (min-width: 769px) {
    .sab {
        left: auto;
        right: 20px;
        max-width: 400px;
    }

    .sab__card {
        max-width: none;
    }
}

/* ── Bottom sheet de instruções (iOS) ──────────────────────────────────── */
.sab-sheet {
    position: fixed;
    inset: 0;
    z-index: 10200; /* acima do card, abaixo do cookie banner */
    display: flex;
    align-items: flex-end;
}

/* OBRIGATÓRIO: o `display` de autor acima vence o `[hidden] { display: none }`
   da folha de estilo do navegador. Sem esta regra o sheet fica visível em
   TODA plataforma já no page load — cobrindo o card do banner (z-index menor)
   e, pior, deixando o backdrop transparente capturar todo clique da página.
   Mesma guarda de .sab__cta[hidden] acima; toda regra nova que declarar
   `display` num elemento controlado por `hidden` precisa da sua. */
.sab-sheet[hidden] {
    display: none;
}

/* Captura o clique fora do painel. Sem scrim colorido: não existe token de
   cor que seja escuro nos dois temas, e blur está proibido no WAVE. A
   separação visual fica por conta da sombra do painel. */
.sab-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}

.sab-sheet__panel {
    position: relative;
    width: 100%;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--shadow-lg);
    padding: 8px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    animation: sab-sheet-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 85vh;
    overflow-y: auto;
}

@keyframes sab-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.sab-sheet__handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-light, var(--border-color));
    margin: 0 auto 18px;
}

.sab-sheet__title {
    font-family: var(--card-title-font-family, inherit);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.sab-sheet__lead {
    display: block;
    font-family: var(--body-font-family, inherit);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.sab-sheet__steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.sab-sheet__step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--body-font-family, inherit);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.sab-sheet__num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--player-text-color);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

/* Ícone vetorial do Compartilhar do iOS — nunca bitmap, para não quebrar
   entre versões do sistema (D10). */
.sab-sheet__share {
    width: 17px;
    height: 17px;
    color: var(--color-primary);
    vertical-align: -3px;
    display: inline-block;
    margin: 0 2px;
}

.sab-sheet__done {
    display: block;
    width: 100%;
    padding: 13px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--body-font-family, inherit);
    font-size: 0.93rem;
    font-weight: 600;
    cursor: pointer;
}

.sab-sheet__done:hover {
    background: var(--bg-card-hover, var(--bg-tertiary));
}

/* Respeita quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
    .sab {
        transition: none;
    }

    .sab-sheet__panel {
        animation: none;
    }
}