/* ============================================================ fpv-carrinho-flutuante.css — botão flutuante fixo de acesso rápido ao carrinho (task 35, fase 2c). Incluído em TODAS as páginas do site (ver fpv-carrinho-flutuante.js), visível só quando o carrinho tem >= 1 item e nunca na própria página do carrinho (ver comentário no topo do .js). Posição: canto inferior direito, ACIMA do botão flutuante do WhatsApp existente (`a[data-cy="whatsapp-button"]`, hoje só em index.html): `right-4 bottom-4` (16px/16px), `lg:h-14 lg:w-14` (56px no desktop). `bottom: 96px` = 16 (offset do WhatsApp) + 56 (altura dele no desktop) + 24 (folga clara) = 96, alinhado no mesmo `right: 16px` do WhatsApp para os dois ficarem na mesma coluna vertical. No mobile o WhatsApp é menor (~40px de altura), então a folga ali é ainda maior — decisão deliberada de manter os DOIS botões na mesma coordenada horizontal em vez de calcular um offset diferente por breakpoint. Paleta: reaproveita as MESMAS variáveis --fpv-h-* já definidas por fpv-header.css (carregado em toda página, sempre ANTES deste arquivo — ver de cada .html) — assim o fab acompanha o alternador de tema (.joog-dark) automaticamente, sem duplicar nenhuma cor nem precisar de uma regra `.joog-dark .fpv-cf-fab` própria. Só o badge de contagem é uma cor fixa (laranja da marca #FF6B00, pedido explícito da tarefa), igual nos dois temas — mesmo raciocínio do badge vermelho do header (--fpv-h-tip), que também não muda entre claro/escuro. z-index: 55 — acima do header (`nav` do template e o próprio WhatsApp são z-40) e do conteúdo normal da página, mas abaixo do overlay da quick view (`fpv-qv-overlay`, z-index:1000 em fpv-quickview.css) — o flutuante nunca deve ficar por cima de uma modal aberta. ============================================================ */ .fpv-cf-fab { position: fixed; right: 16px; bottom: 96px; z-index: 55; display: inline-flex; align-items: center; height: 56px; max-width: 56px; padding: 0 16px; border-radius: 999px; white-space: nowrap; text-decoration: none; cursor: pointer; background-color: var(--fpv-h-bg, #101114); color: var(--fpv-h-text, #fff); border: 1px solid var(--fpv-h-border, rgba(0, 0, 0, 0.08)); box-shadow: 0 10px 24px rgba(16, 17, 20, 0.22), 0 2px 8px rgba(16, 17, 20, 0.12); transition: max-width 0.3s ease, box-shadow 0.2s ease, transform 0.15s ease; } /* guarda do cascade para `hidden` — mesmo padrão de fpv-qv-overlay[hidden] em fpv-quickview.css: uma regra "author" sem !important perderia. */ .fpv-cf-fab[hidden] { display: none !important; } .fpv-cf-fab:hover, .fpv-cf-fab:focus-visible { max-width: 320px; box-shadow: 0 14px 30px rgba(16, 17, 20, 0.28), 0 4px 10px rgba(16, 17, 20, 0.16); } .fpv-cf-fab:active { transform: scale(0.96); } .fpv-cf-fab:focus-visible { outline: 2px solid #FF6B00; outline-offset: 3px; } .fpv-cf-icon { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .fpv-cf-icon svg { width: 24px; height: 24px; } /* badge sobreposto no canto do ÍCONE (não do botão inteiro) — assim ele fica parado no lugar quando o botão expande no hover, em vez de "voar" para a ponta direita da pílula junto com o rótulo. */ .fpv-cf-badge { position: absolute; top: -6px; right: -8px; display: flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background-color: #FF6B00; color: #fff; border: 2px solid var(--fpv-h-bg, #101114); font-size: 11px; font-weight: 700; font-family: var(--fpv-h-font, "Segoe UI", Arial, sans-serif); line-height: 1; } /* rótulo "Ver carrinho · R$ XX,XX" — colapsado (max-width:0, invisível) por padrão, expande no hover/focus do botão inteiro (não precisa de `overflow:hidden` no `.fpv-cf-fab` pai: o rótulo se auto-clipa aqui, então o pai nunca corta o badge do ícone por engano). */ .fpv-cf-label { max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; font-size: 13px; font-weight: 700; font-family: var(--fpv-h-font, "Segoe UI", Arial, sans-serif); transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease; } .fpv-cf-fab:hover .fpv-cf-label, .fpv-cf-fab:focus-visible .fpv-cf-label { max-width: 240px; margin-left: 10px; opacity: 1; } /* animação de entrada — dispara sozinha sempre que o atributo `hidden` sai do elemento: display:none -> display:flex é, por si só, o gatilho que o CSS usa pra (re)iniciar uma `animation`, sem nenhum JS de timing/rAF envolvido. */ @keyframes fpv-cf-pop { 0% { opacity: 0; transform: translateY(8px) scale(0.85); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .fpv-cf-fab:not([hidden]) { animation: fpv-cf-pop 0.28s ease; } @media (prefers-reduced-motion: reduce) { .fpv-cf-fab, .fpv-cf-label { transition: none; } .fpv-cf-fab:not([hidden]) { animation: none; } } @media (max-width: 480px) { .fpv-cf-fab { right: 12px; bottom: 84px; height: 48px; max-width: 48px; padding: 0 13px; } .fpv-cf-icon, .fpv-cf-icon svg { width: 20px; height: 20px; } }