/* ── Botão flutuante de WhatsApp ────────────────────────────────────────────── Bolha fixa num dos cantos inferiores (lado escolhido no Customizer). Carregado só quando ativo + com número, e nunca nas páginas de produto (a barra sticky de compra ocupa lá o fundo). Ver inc/cos-whatsapp.php. Este ficheiro entra DEPOIS do bundle principal, por isso o override dos toasts (no fim) vence a cascata. */ .cos-wa { position: fixed; bottom: 20px; z-index: 990; /* acima do conteúdo/header; abaixo dos modais (1100+) e toasts (1000) */ display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #25d366; /* verde de marca do WhatsApp, para reconhecimento imediato */ color: #fff; text-decoration: none; box-shadow: 0 6px 22px rgba(20, 18, 14, 0.22); transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .2s ease, visibility .2s ease; } /* Lado — escolhido no Customizer (direita por defeito). */ .cos-wa--right { right: 20px; } .cos-wa--left { left: 20px; } .cos-wa:hover, .cos-wa:focus-visible { background: #1ebe5d; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20, 18, 14, 0.28); } .cos-wa:focus-visible { outline: 2px solid #0e1011; outline-offset: 3px; } .cos-wa__icon { width: 56%; /* escala com o botão — encolhe junto com ele nos breakpoints */ height: 56%; display: block; } .cos-wa__icon svg { width: 100%; height: 100%; display: block; fill: currentColor; } /* Etiqueta — tooltip que sai ao passar o rato / focar (desktop), para o lado oposto à borda do ecrã. */ .cos-wa__label { position: absolute; top: 50%; white-space: nowrap; background: var(--ink, #0e1011); color: var(--paper, #fff); font-family: var(--sans, system-ui, sans-serif); font-size: 12px; letter-spacing: 0.04em; padding: 8px 12px; border-radius: var(--radius, 8px); box-shadow: 0 6px 20px rgba(20, 18, 14, 0.18); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } /* Botão à direita → tooltip à esquerda; à esquerda → tooltip à direita. */ .cos-wa--right .cos-wa__label { right: calc(100% + 12px); transform: translateY(-50%) translateX(6px); } .cos-wa--left .cos-wa__label { left: calc(100% + 12px); transform: translateY(-50%) translateX(-6px); } .cos-wa:hover .cos-wa__label, .cos-wa:focus-visible .cos-wa__label { opacity: 1; transform: translateY(-50%) translateX(0); } /* ── Tamanho por ecrã ───────────────────────────────────────────────────────── Tablet e abaixo: mais pequeno e sem tooltip (toque não tem hover). */ @media (max-width: 1024px) { .cos-wa { width: 50px; height: 50px; bottom: 18px; } .cos-wa--right { right: 18px; } .cos-wa--left { left: 18px; } .cos-wa__label { display: none; } } /* Telemóvel: ainda mais pequeno e mais junto à borda. */ @media (max-width: 600px) { .cos-wa { width: 46px; height: 46px; bottom: 14px; } .cos-wa--right { right: 14px; } .cos-wa--left { left: 14px; } } /* ── Esconder com qualquer overlay aberto ───────────────────────────────────── Quando abre um overlay do tema (cart drawer, pesquisa, filtros, menu mobile, modais de checkout), o botão desaparece — assim NUNCA fica por cima desses elementos, mesmo que o overlay tenha z-index inferior ao do botão (é o caso do cart drawer). O tema marca o com estas classes ao abrir cada um. */ body.cart-drawer-open .cos-wa, body.cos-search-open .cos-wa, body.cos-filters-locked .cos-wa, body.cos-modal-open .cos-wa, body.site-nav-open .cos-wa { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); } /* Levanta a pilha de toasts acima do botão para nunca se sobreporem — só quando o botão está à DIREITA (os toasts vivem no canto inferior direito). À esquerda não há conflito, por isso não se mexe nos toasts. */ body.cos-wa-pos-right .cos-toasts { bottom: 88px; } @media (min-width: 720px) { body.cos-wa-pos-right .cos-toasts { bottom: 96px; } } @media (prefers-reduced-motion: reduce) { .cos-wa, .cos-wa__label { transition: none; } .cos-wa:hover, .cos-wa:focus-visible { transform: none; } }