/*
 * Estilos base mobile-first compartilhados pelas páginas públicas do AzzePro
 * (/, /login, /cadastro). Ver CLAUDE.md > "Diretrizes de UI/UX — Mobile-First".
 * Regras aqui são genéricas de propósito — nada específico de uma página só;
 * o que for específico de uma página (largura máxima do card, etc.) fica no
 * <style> local dela.
 */

/* Área de toque confortável em qualquer tela: min-height ~44px e font-size
   >=16px nos inputs/botões (o font-size evita zoom automático no Safari iOS). */
.form-control {
    min-height: 44px;
    font-size: 16px;
}

.btn {
    min-height: 44px;
}

/* Border-radius de botão unificado em TODO o projeto (painel, admin/qgazze,
   público, login/cadastro) -- base.css é o único arquivo já carregado em
   toda página do projeto, sempre depois do Bootstrap vendorizado, então
   sobrescrever aqui vence a cascata em qualquer área sem precisar duplicar
   a regra por arquivo. Mantém a mesma PROPORÇÃO que o Bootstrap já usa
   entre sm/base/lg (sm ~2/3, lg ~4/3) em vez de igualar tudo -- uma regra
   genérica ".btn { border-radius: Xpx }" (a antiga, em identidade-visual.css)
   tinha esse efeito colateral: .btn-lg/.btn-sm ficavam idênticos a um botão
   normal, já que a especificidade é igual e ela sempre carregava por
   último. Usando as variáveis nativas do componente em vez disso, cada
   tamanho continua puxando a variável certa (--bs-btn-border-radius já
   aponta pra --bs-border-radius/-sm/-lg conforme o tamanho). */
:root {
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 6px;
}

/* Cor do .btn-secondary (Cancelar/Voltar/Editar/Sair em todo o projeto) --
   teste visual, mesmo mecanismo de variáveis locais do componente já usado
   por identidade-visual.css pro .btn-primary verde (cobre hover/active/
   disabled de uma vez). Hover ~15% mais escuro, active ~20% -- mesma
   proporção já usada lá. Fácil de reverter: só remover este bloco. */
.btn-secondary {
    --bs-btn-bg: #104E8B;
    --bs-btn-border-color: #104E8B;
    --bs-btn-hover-bg: #0E4276;
    --bs-btn-hover-border-color: #0E4276;
    --bs-btn-active-bg: #0D3E6F;
    --bs-btn-active-border-color: #0D3E6F;
    --bs-btn-focus-shadow-rgb: 16, 78, 139;
    --bs-btn-disabled-bg: #104E8B;
    --bs-btn-disabled-border-color: #104E8B;
}

/* Banner de impersonação administrativa (ver public/_banner_impersonacao.php)
   -- carregado tanto em /painel/* quanto em cliente/painel.php, por isso vive
   aqui (o único CSS confirmado carregado nos dois lados). Sticky, não fixed:
   fica sempre visível ao rolar, mas sem precisar de nenhum padding de
   compensação no restante da página (diferente dos headers fixed já
   existentes) -- some do fluxo normal de documento, só "gruda" no topo do
   viewport. Laranja de aviso (mesmo tom oficial do Bootstrap, $orange
   #fd7e14, já usado no badge "Em Separação" — não uma cor nova), nunca verde/
   azul (que já significam "ação positiva"/"institucional" no resto do
   projeto) -- essa cor sinaliza "atenção, contexto incomum". z-index alto o
   bastante pra ficar acima de qualquer navbar/offcanvas das duas áreas. */
.banner-impersonacao {
    position: sticky;
    top: 0;
    z-index: 1050;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0.6rem 1rem;
    background-color: #fd7e14;
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.banner-impersonacao-texto strong {
    font-weight: 700;
}

.banner-impersonacao-btn {
    flex-shrink: 0;
    min-height: 32px;
    padding: 0.25rem 0.75rem;
    border: 1px solid #fff;
    border-radius: var(--bs-border-radius-sm, 3px);
    background-color: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.banner-impersonacao-btn:hover,
.banner-impersonacao-btn:focus {
    background-color: rgba(255, 255, 255, 0.15);
}


/* ---------- Cards clicáveis de seleção ---------- */

/* Um <input type="radio"> real (.visually-hidden, nunca display:none --
   continua acessível/navegável por teclado) imediatamente seguido do <label>
   estilizado como card, pra `:checked + label` funcionar sem JS nenhum pra
   alternar o estado selecionado; JS só entra pra mostrar/esconder blocos
   condicionais de campos. min-height 44px mesmo com o toque sendo no <label>
   inteiro (área de toque, regra mobile-first do projeto).

   MORAVA EM painel.css e foi movido pra cá. Motivo: o seletor PF/PJ (mesmo
   parcial _dados_fiscais.php) passou a ser usado também em /qgazze/lojas/{id},
   e /qgazze/* carrega qgazze.css, nunca painel.css -- lá o radio ficava
   invisível (.visually-hidden) e o label renderizava como texto solto, sem
   borda, sem cursor e sem realce de selecionado. Parecia um seletor quebrado
   quando o problema era só CSS ausente.

   Movido em vez de duplicado: base.css é o único CSS carregado por TODA área
   do projeto, então uma cópia só serve painel, qgazze e o que vier. (A
   duplicação foi o caminho usado antes pra .text-bg-laranja; aqui dá pra
   fazer melhor, porque estas regras não dependem de nada específico de área.)
   `var(--bs-primary)` continua resolvendo pro acento de cada painel -- azul
   no lojista, cinza-chumbo no qgazze -- sem precisar de variante. */
.opcao-selecionavel {
    display: block;
    min-height: 44px;
    padding: 12px;
    border: 2px solid rgba(6, 27, 58, 0.15);
    border-radius: 8px;
    cursor: pointer;
}

.plano-radio:checked + .opcao-selecionavel,
.forma-pagamento-radio:checked + .opcao-selecionavel,
.tipo-pessoa-radio:checked + .opcao-selecionavel {
    border-color: var(--bs-primary);
    background-color: rgba(13, 110, 253, 0.06);
}

/* ---------------------------------------------------------------------------
   Compartilhamento de produto (assets/js/compartilhar.js)

   MORA AQUI, e não em loja-publica.css nem em painel.css, pelo mesmo motivo
   que .opcao-selecionavel acima: o componente é usado pela VITRINE
   (loja-produto.php) e pelo PAINEL (painel/produtos.php), e base.css é o
   único CSS que as duas áreas carregam. Conferido, não presumido -- vitrine:
   bootstrap + base + identidade-visual + loja-publica; painel: bootstrap +
   lineicons + main + base + painel. Se estas regras fossem pra loja-publica,
   o botão do painel renderizaria sem estilo nenhum; se fossem pra painel.css,
   a vitrine é que ficaria sem.

   Área de toque de 44px (regra mobile-first do projeto) mesmo com texto
   pequeno -- é ação secundária na vitrine, nunca pode competir com o botão
   de adicionar ao carrinho, mas precisa continuar tocável. */
.compartilhar-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.compartilhar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid rgba(6, 27, 58, 0.2);
    border-radius: 8px;
    background-color: transparent;
    color: #061B3A;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.compartilhar-btn:hover,
.compartilhar-btn:focus-visible {
    border-color: #00C968;
    color: #061B3A;
}

/* Estado de feedback ("Link copiado!"), removido sozinho pelo JS. */
.compartilhar-btn--ok {
    border-color: #00C968;
    background-color: rgba(0, 201, 104, 0.1);
}

.compartilhar-btn--erro {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.08);
}

/* O par de ícones vive na marcação; o de "copiado" só aparece no feedback,
   sem o JS precisar injetar SVG. */
.compartilhar-btn .compartilhar-icone-ok,
.compartilhar-btn--feedback .compartilhar-icone-padrao {
    display: none;
}

.compartilhar-btn--feedback .compartilhar-icone-ok {
    display: inline-block;
}

.compartilhar-aviso {
    font-size: 13px;
    color: #6c757d;
}

/* ---------------------------------------------------------------------------
   Identificação legal da empresa no rodapé (_identificacao_empresa.php)

   MORA AQUI porque o bloco aparece em mais de uma área: rodapé institucional
   (4 páginas), rodapé da landing e rodapé do painel do lojista -- e base.css é
   o único CSS carregado por todas elas (conferido, ver "CSS compartilhado
   entre áreas" no CLAUDE.md). Em identidade-visual.css o bloco ficaria sem
   estilo no painel; em painel.css, sem estilo na landing.

   Tipografia reduzida de propósito: é exigência legal (Decreto 7.962/2013),
   não conteúdo de destaque. O limite da redução é a LEGIBILIDADE -- informação
   legal ilegível não cumpre a exigência -- por isso 12px com line-height
   confortável, e não um cinza apagado sobre fundo escuro. */
.rodape-identificacao {
    font-size: 12px;
    line-height: 1.45;
    /* Sobre o navy do rodapé institucional/landing: branco a 65% mantém
       contraste de leitura sem competir com o conteúdo do rodapé. */
    color: rgba(255, 255, 255, 0.65);
}

/* No painel o rodapé é claro, então a mesma classe precisa de cor própria --
   herdar o branco deixaria o bloco invisível. */
.painel-rodape-institucional .rodape-identificacao {
    color: #6c757d;
    margin-top: 0.75rem;
}

/* Rodape da vitrine: mesma tipografia reduzida, mas fundo CLARO -- herdar o
   branco dos rodapes navy deixaria o bloco invisivel. Mesmo padrao de
   override ja usado para o rodape do painel logo acima. */
.rodape-loja .rodape-identificacao {
    color: #6c757d;
    /* Mais um passo de reducao, SO na vitrine: 11px com line-height um
       pouco maior pra compensar -- abaixo disso a leitura em ~375px comeca
       a sofrer, e informacao legal ilegivel nao cumpre a exigencia.

       Escopado de proposito: .rodape-identificacao e COMPARTILHADA com o
       bloco da AzzePro (landing, institucional e painel), entao mexer na
       regra base mudaria as tres areas de uma vez. O bloco da AzzePro
       segue em 12px -- ver o relatorio da rodada. */
    font-size: 11px;
    line-height: 1.5;
}

/* Instagram no rodape da vitrine: mesma cor do bloco (nao azul de link),
   com o icone alinhado ao texto. Sublinhado so no hover. */
.rodape-loja-instagram {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}

.rodape-loja-instagram:hover,
.rodape-loja-instagram:focus-visible {
    color: inherit;
    text-decoration: underline;
}