/* ═══════════════════════════════════════════════════════════════════════════
   Jornada do consumidor — layout mobile-first (RV-16)

   Duas regras mandam neste arquivo:

   1. NENHUM valor de identidade visual é escrito aqui. Toda cor, fonte, raio e
      altura de toque vem de um token `--ssd-*`, e esses tokens são gerados em
      tempo de execução pelo <BrandStyles/>, a partir da seção `Branding` do
      appsettings. Escrever um `#A3195B` neste arquivo quebraria o RV-13.

   2. A tela é usável EM UMA MÃO e não rola na horizontal em largura nenhuma.
      Por isso: uma coluna só, largura máxima, e a ação primária ancorada na
      faixa de alcance do polegar — não no fim do conteúdo.

   Prefixo `ssd-` (self service discount) em tudo que este arquivo define.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Trava de rolagem horizontal ─────────────────────────────────────────────
   Um único filho largo demais, em qualquer nível, produz a barra horizontal — e
   no celular ela desalinha a tela inteira. A trava fica no documento porque o
   estouro pode nascer acima do shell. */
html,
body {
    max-width: 100%;
    /* `hidden` para navegador antigo; `clip` para o resto. A diferença não é estética:
       `hidden` transforma o documento em contêiner de rolagem e, junto com o
       `overscroll-behavior` abaixo, engole a rolagem vertical inteira. `clip` corta o
       excesso lateral sem criar contêiner. Medido, não suposto. */
    overflow-x: hidden;
    overflow-x: clip;
    /* Desliga o "puxar para atualizar": no PDV o gesto recarregaria a página e faria o
       consumidor perder o carrinho. */
    overscroll-behavior-y: contain;
}

.ssd-shell {
    display: flex;
    flex-direction: column;
    /* dvh acompanha a barra de endereço do navegador móvel; vh não acompanha e
       deixa a ação primária escondida atrás dela. */
    min-height: 100dvh;
    background: var(--ssd-bg, #fff);
    color: var(--ssd-text, #1f1a1d);
    font-family: var(--ssd-font-body, sans-serif);
    font-size: var(--ssd-font-size, 1rem);
}

/* ── Barra superior ───────────────────────────────────────────────────────── */
.ssd-appbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 0 16px 8.8px;
    /* Em aplicativo instalado a faixa da barra de status entra aqui — é o padding de 48
       do desenho, que lá inclui a barra do sistema. No navegador não existe barra, e o
       piso de 12 mantém a proporção sem uma tarja azul vazia no topo. */
    padding-top: max(env(safe-area-inset-top), 12px);
    background: var(--ssd-appbar-bg, #fff);
    color: var(--ssd-appbar-text, #1f1a1d);
    border-bottom: .8px solid rgba(229, 231, 235, .48);
}

.ssd-appbar__logo {
    /* A caixa do logotipo no desenho mede 140 x 60, e a arte ocupa a largura inteira.
       `contain` existe para o programa cuja arte for mais alta que larga: sem ele, o
       teto de altura achataria o desenho em vez de reduzi-lo. */
    width: 140px;
    max-height: 40px;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.ssd-appbar__name {
    font-family: var(--ssd-font-heading, sans-serif);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    /* Nome comprido trunca em vez de quebrar o layout. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Navegação do consumidor ──────────────────────────────────────────────── */
/* Segunda linha da barra: a primeira é do logotipo. */
.ssd-nav {
    display: flex;
    gap: 4px;
}

/* Pilula de icone sobre rotulo, 56 x 48 — e nunca menor que o alvo de toque de 44. */
.ssd-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 56px;
    height: 48px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    border-radius: 10px;
    font-size: .75rem;
    font-weight: 400;
    line-height: 10px;
    /* O rotulo inativo e o texto da barra esmaecido: segue a marca quando ela mudar. */
    color: color-mix(in srgb, var(--ssd-appbar-text, #fff) 80%, transparent);
    text-decoration: none;
}

.ssd-nav__item--active {
    /* Escurecimento da propria barra, nao cor de marca: funciona sobre qualquer fundo
       que o programa escolher para o cabecalho. */
    background: rgba(0, 0, 0, .43);
    color: var(--ssd-appbar-text, #fff);
}

/* Destino de backlog: legivel, nao clicavel, sem cursor de link. */
.ssd-nav__item--pending {
    opacity: .6;
    cursor: default;
}

/* ── Arte de campanha ─────────────────────────────────────────────────────── */
/* Acompanha a largura da coluna de conteúdo em telas grandes. */
.ssd-hero,
.ssd-banner {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
}

/* A arte vem larga (1923 × 775) e o desenho mostra dela uma janela de 402 × 300 —
   o recorte é do CSS, e não do arquivo, para que a mesma arte sirva a telas mais
   largas sem uma segunda exportação. */
.ssd-hero {
    aspect-ratio: 402 / 300;
    object-fit: cover;
    object-position: center;
}


/* 48px, e não 40: o alvo mínimo de toque acessível é 44px, e este botão fica no
   canto da barra — a metade de fora do polegar é justamente onde o toque erra.
   A margem negativa devolve o alinhamento visual com o conteúdo da barra. */
.ssd-appbar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-left: -12px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.ssd-appbar__back:active { background: var(--ssd-divider, rgba(0, 0, 0, .06)); }

/* ── Corpo ────────────────────────────────────────────────────────────────── */
.ssd-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: 560px;      /* no tablet/desktop a coluna para de crescer */
    margin: 0 auto;
    padding: 16px 16px 24px;
    /* Coluna flexível para que a ação primária possa ser empurrada ao pé da tela
       quando o conteúdo é curto — ver .ssd-actions. */
    display: flex;
    flex-direction: column;
}

/* Fora da tela, dentro da árvore de acessibilidade: `display:none` sumiria também
   para o leitor de tela, que é justamente quem precisa deste título. */
.ssd-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.ssd-page-title {
    font-family: var(--ssd-font-heading, sans-serif);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.25;
    margin: 0 0 8px;
    /* Palavra longa (código de produto, e-mail) quebra em vez de estourar. */
    overflow-wrap: anywhere;
}

.ssd-page-lead {
    margin: 0 0 20px;
    color: var(--ssd-text-secondary, #6e6169);
    line-height: 1.5;
}

.ssd-card {
    background: var(--ssd-surface, #fff);
    border: 1px solid var(--ssd-divider, rgba(0, 0, 0, .1));
    border-radius: var(--ssd-radius-card, 16px);
    padding: 16px;
}

.ssd-card + .ssd-card { margin-top: 12px; }

.ssd-placeholder {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 16px;
    border: 1px dashed var(--ssd-divider, rgba(0, 0, 0, .18));
    border-radius: var(--ssd-radius-card, 16px);
    color: var(--ssd-text-secondary, #6e6169);
    background: var(--ssd-surface, #fff);
}

.ssd-placeholder__title {
    font-family: var(--ssd-font-heading, sans-serif);
    font-weight: 600;
    color: var(--ssd-text, #1f1a1d);
}

/* ── Ação primária: ancorada na faixa do polegar (RV-16) ──────────────────────
   Duas forças, na mesma regra:

   • `margin-top: auto` — com conteúdo CURTO, empurra a ação para o pé da coluna.
     Sem isso o botão fica logo abaixo do texto, no meio da tela, e o consumidor
     precisa da segunda mão para alcançá-lo.
   • `position: sticky` — com conteúdo LONGO (a vitrine cheia de produtos), mantém
     a ação visível enquanto a lista rola.

   As duas juntas cobrem os dois extremos sem media query. */
.ssd-actions {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    /* Anula o respiro lateral do .ssd-main para a faixa da ação encostar nas
       bordas, e devolve o respiro por dentro. */
    margin-left: -16px;
    margin-right: -16px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--ssd-bg, #fff);
    border-top: 1px solid var(--ssd-divider, rgba(0, 0, 0, .08));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* O botão do MudBlazor herda cor e raio do MudTheme, que sai da MESMA marca.
   Aqui só garantimos o alvo de toque e a largura total. */
.ssd-actions .mud-button-root {
    width: 100%;
    min-height: var(--ssd-button-height, 52px);
    border-radius: var(--ssd-radius-button, 999px);
}

/* ── Busca da vitrine ─────────────────────────────────────────────────────── */
/* Duas colunas iguais, como no desenho — não é campo elástico com botão pequeno. */
.ssd-search {
    display: grid;
    /* minmax(0,1fr) e nao 1fr: o tamanho intrinseco do <input> faria a primeira coluna
       crescer e espremer o botao. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

/* A lupa fica DENTRO da moldura: a borda é da caixa, não do campo. */
.ssd-search__box {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ssd-divider, #bdbdbd);
    border-radius: var(--ssd-radius, 4px);
    background: var(--ssd-surface, #fff);
}

.ssd-search__box:focus-within {
    border-color: var(--ssd-primary, #1d6be8);
}

.ssd-search__icon {
    flex: 0 0 auto;
    color: var(--ssd-text-secondary, rgba(0, 0, 0, .54));
}

.ssd-search__field {
    flex: 1 1 auto;
    min-width: 0;   /* sem isto o campo se recusa a encolher dentro do flex */
    border: 0;
    background: none;
    color: var(--ssd-text, #424242);
    font-family: inherit;
    font-size: 1rem;   /* menos que 16px faz o iOS dar zoom ao focar */
    line-height: 19px;
    letter-spacing: .15px;
}

.ssd-search__field::placeholder {
    color: var(--ssd-text-secondary, rgba(0, 0, 0, .54));
}

.ssd-search__field:focus-visible {
    outline: none;
}

.ssd-search__mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 15px;
    border: 1px solid var(--ssd-primary, #1d6be8);
    border-radius: var(--ssd-radius, 4px);
    background: var(--ssd-surface, #fff);
    color: var(--ssd-primary, #1d6be8);
    font-family: inherit;
    font-size: .75rem;
    /* Regular, como no desenho: em semibold o rótulo estoura os 177 da coluna. */
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
}

.ssd-search__mode--on {
    background: var(--ssd-primary, #1d6be8);
    color: var(--ssd-on-primary, #fff);
}

/* ── Filtro por marca ─────────────────────────────────────────────────────── */
/* Rola na horizontal dentro da faixa: é a única exceção ao "sem rolagem
   lateral", e fica contida aqui em vez de vazar para a página. */
.ssd-filters {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px 12px;
    padding: 0 16px 2px;
}

.ssd-filters::-webkit-scrollbar {
    display: none;
}

.ssd-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 23px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--ssd-radius-chip, 12px);
    /* A primária a 4% — o desenho não usa cinza aqui, usa a marca esmaecida. */
    background: color-mix(in srgb, var(--ssd-primary, #1d6be8) 4%, transparent);
    color: var(--ssd-text, #424242);
    font-family: inherit;
    font-size: .75rem;
    letter-spacing: .15px;
    line-height: 1;
    cursor: pointer;
}

/* Estado provisório: rótulo, não controle — sem cursor de ponteiro. */
.ssd-chip--static {
    cursor: default;
}

.ssd-chip--on {
    /* Estado de seleção usa a PRIMÁRIA, não a cor da barra. No desenho as duas coincidem
       neste programa, mas o token da barra existe para resolver contraste com o logotipo:
       amarrar o chip a ele faria o texto branco do chip virar refém de uma decisão de
       cabeçalho. Trocar para --ssd-appbar-bg é uma linha, se o desenho preferir. */
    background: var(--ssd-primary, #1d6be8);
    color: var(--ssd-on-primary, #fff);
}

.ssd-chip__count {
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

/* ── Vitrine ──────────────────────────────────────────────────────────────── */
/* Título e traço: o traço é do desenho e mede 48 × 4, com raio maior que a altura. */
.ssd-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.ssd-section-title {
    font-family: var(--ssd-font-heading, sans-serif);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--ssd-secondary, #0f2044);
    margin: 0;
    padding: 8px 0;
}

.ssd-section-title__rule {
    width: 48px;
    height: 4px;
    border-radius: 32px;
    background: var(--ssd-primary, #1d6be8);
}

/* Duas colunas na largura do telefone; cresce sozinha em tela maior. O desenho fixa
   177px de card em quadro de 402 — com margem de 16 e este vão, é exatamente o que dá. */
.ssd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    column-gap: 16px;
    row-gap: 24px;
}

/* Sem borda e sem padding: a imagem sangra até o recorte do card, como no desenho. */
.ssd-product {
    display: flex;
    flex-direction: column;
    border-radius: var(--ssd-radius-card, 14px);
    background: var(--ssd-surface, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    overflow: hidden;
}

/* Proporção fixa: com ou sem imagem, a linha da grade não muda de altura. */
.ssd-product__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    max-width: 100%;
    background: var(--ssd-surface-muted, #f3f4f6);
}

.ssd-product__image--absent {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ssd-text-secondary, rgba(0, 0, 0, .54));
}

.ssd-product__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

/* Com borda e "a partir de" — a versão sólida e pessoal é da B2B2C-782. */
.ssd-product__discount {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    border: 2px solid var(--ssd-success, #00b18e);
    border-radius: 6px;
    color: var(--ssd-success, #00b18e);
    text-align: center;
    text-transform: uppercase;
}

.ssd-product__discount-label {
    font-size: .625rem;
    font-weight: 700;
}

.ssd-product__discount-value {
    font-family: var(--ssd-font-heading, sans-serif);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.ssd-product__industry {
    font-size: .75rem;
    font-weight: 700;
}

/* Duas linhas e reticências: o nome vem da carga e não tem teto de tamanho, mas a
   altura do card é a mesma para todos — senão a grade desalinha a cada linha. */
.ssd-product__name {
    /* Altura de duas linhas, fixa: nome curto e nome longo ocupam o mesmo espaco, e a
       grade nao desalinha de um card para o outro. */
    height: 30px;
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ssd-text-strong, #1e293b);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.ssd-product__action {
    margin-top: auto;
    padding: 0 16px 16px;
}

.ssd-product .mud-button-root {
    min-height: 31px;
    height: 31px;
    padding: 0 10px;
    border-radius: var(--ssd-radius-button, 4px);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .37px;
    /* Altura fixa de 31px: o rotulo em duas linhas vazaria o botao. */
    white-space: nowrap;
}

/* ── Indicador das 4 etapas (RF25) ────────────────────────────────────────── */
.ssd-stepper {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px 4px;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.ssd-stepper__item {
    flex: 1 1 0;
    min-width: 0;          /* sem isto o flex recusa encolher e nasce a rolagem horizontal */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    background: none;
    border: 0;
    padding: 0;
    color: var(--ssd-text-secondary, #6e6169);
    font: inherit;
    cursor: default;
}

.ssd-stepper__item--reachable { cursor: pointer; }

.ssd-stepper__bullet {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    font-weight: 700;
    background: var(--ssd-divider, rgba(0, 0, 0, .08));
    color: var(--ssd-text-secondary, #6e6169);
    border: 2px solid transparent;
    flex: 0 0 auto;
}

.ssd-stepper__item--done .ssd-stepper__bullet {
    background: var(--ssd-primary-light, #c94a83);
    color: var(--ssd-on-primary, #fff);
}

.ssd-stepper__item--current .ssd-stepper__bullet {
    background: var(--ssd-primary, #a3195b);
    color: var(--ssd-on-primary, #fff);
    border-color: var(--ssd-primary-light, #c94a83);
}

.ssd-stepper__label {
    font-size: .6875rem;
    line-height: 1.2;
    /* Rótulo comprido ("Autenticação") quebra em duas linhas em telas de 320px
       em vez de forçar a largura da linha. */
    overflow-wrap: anywhere;
    hyphens: auto;
}

.ssd-stepper__item--current .ssd-stepper__label {
    color: var(--ssd-text, #1f1a1d);
    font-weight: 700;
}

.ssd-stepper__rail {
    height: 2px;
    margin: 0 auto;
    width: 100%;
    background: var(--ssd-divider, rgba(0, 0, 0, .1));
}

/* ── Rodapé discreto ──────────────────────────────────────────────────────── */
/* Rodape da plataforma: escuro, centralizado, com o logotipo da casa. */
.ssd-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 16px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    background: var(--ssd-footer-bg, #223742);
    text-align: center;
}

.ssd-footer__logo {
    display: flex;
    align-items: center;
    gap: 6.6px;
}

.ssd-footer__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-size: .875rem;
    line-height: 20px;
    color: var(--ssd-footer-text, #a5b4c8);
}

.ssd-footer__dot {
    font-size: .75rem;
    line-height: 16px;
}

.ssd-footer__copy {
    margin: 0;
    font-size: .75rem;
    line-height: 16px;
    color: var(--ssd-footer-text-muted, #8fa8be);
}

/* ── Confirmação final (etapa Pronto) ─────────────────────────────────────── */
.ssd-nsu {
    text-align: center;
    padding: 24px 16px;
}

.ssd-nsu__code {
    font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
    font-size: clamp(1.75rem, 9vw, 2.5rem);   /* nunca estoura a largura da tela */
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ssd-primary, #a3195b);
    overflow-wrap: anywhere;
}

.ssd-nsu__hint {
    margin-top: 8px;
    color: var(--ssd-text-secondary, #6e6169);
}

/* ── Acessibilidade ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}