/* Modal de COMPARTILHAR — o painel, o QR e os destinos.
 *
 * Mora em arquivo próprio pelo mesmo motivo do `flip-modal.css`, que fica ao
 * lado: o `base.html` é um god-file na allowlist do guard-rail de tamanho, e
 * CSS de uma feature inteira não precisa estar lá dentro.
 *
 * ⚠️ NÃO contém nada do flip. O efeito (backdrop, transform, transição,
 * reduced-motion) vive em `flip-modal.css` e é compartilhado por todos os
 * modais — mexer lá muda todos.
 */
/* Overlay = backdrop + flex centering for the panel. */
/* Backdrop, flip transform and reduced-motion override all live
   in flip-modal.css under .flip-modal-overlay and
   .flip-modal-panel. The overlay element below gets both
   .qr-modal-overlay (z-index + this modal's own quirks) and
   .flip-modal-overlay (the shared visual identity). */
.qr-modal-overlay {
    z-index: 60;
}

/* Panel-specific looks (size, padding, background) only — flip
   transform and transition are inherited from .flip-modal-panel.
   QR sharpness on iOS: the panel is rasterized as a GPU layer
   while it's transforming. The QR SVG renders AFTER the flip
   ends (see openModal), so it lands in a settled panel. */
.qr-modal {
    /* Âncora do X do canto. O painel não tinha `position`, então o botão
       absoluto escaparia para o overlay. */
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 1.5rem 1.25rem 1.25rem;
    max-width: 20rem;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    text-align: center;
}
/* Fechar no canto. Discreto de propósito: é saída, não ação — competir com o
   QR e com os destinos seria o contrário do que a tela quer. */
.qr-modal-x {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.qr-modal-x:hover { background: #f1f5f9; color: #334155; }
.qr-modal-x svg { width: 18px; height: 18px; }

.qr-modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.25rem;
    /* Corredor livre para o X, dos DOIS lados — só à direita tiraria o texto do
       centro. O X ocupa a mesma faixa vertical do título, então sem isto um
       título longo passaria por baixo dele. */
    padding: 0 2rem;
}
.qr-modal-subtitle {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 1rem;
    /* `break-word`, não `break-all`: o nome do negócio é TEXTO, e `break-all`
       partia palavra no meio ("Barbea|ria"). Ele fazia sentido quando aqui
       ficava uma URL. */
    overflow-wrap: break-word;
}
/* Mirrors the Pix modal layout EXACTLY — that one renders correctly
   on Android Chrome, ours wasn't (corner finders clipped, off-center).
   The combo that works:
     wrapper = flex column + align-items:center (centers the host)
     host    = display:block, intrinsic size (NO inline-block, NO
               width:100%, NO transform anywhere up the tree)
   qr-code-styling positions modules via <use> with transforms; any
   parent that promotes a GPU layer (transform, will-change) or that
   messes with intrinsic sizing (inline-block) seems to confuse
   Android Chrome's SVG renderer here. */
.qr-modal-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}
.qr-modal-canvas-host {
    background: #ffffff;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    /* Lock the QR's footprint EXACTLY so the panel can't grow
       when the SVG lands. Earlier `min-width/min-height` left
       room for the host to push a few pixels — enough to make
       the modal "settle" downward when the QR appeared. With
       box-sizing: content-box (default), 240×240 content +
       8px padding + 1px border = 258×258 outer, fixed. */
    box-sizing: content-box;
    width: 240px;
    height: 240px;
}
.qr-modal-canvas-host svg {
    display: block;
    /* Force exact SVG size — qr-code-styling sets width/height
       attrs, but some renderers add fractional pixels. Hard pin
       removes the possibility. */
    width: 240px;
    height: 240px;
}
/* ── Destinos de compartilhamento ─────────────────────────────────
   Vivem DENTRO do painel do QR, que já tem o efeito de flip. Nada aqui
   mexe em `.flip-modal-*` — só conteúdo. */
.share-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.25rem 0 0.75rem;
}
.share-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 4.25rem;
    padding: 0.5rem 0.25rem;
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}
/* ⚠️ `display:flex` na regra acima VENCE o `[hidden] { display:none }`
   que o navegador aplica por padrão — então os botões marcados como
   escondidos apareciam mesmo assim. No desktop isso significava
   Messenger e "Mais…" visíveis e falhando em silêncio, que é o caso que
   o `hidden` existia para evitar. */
.share-item[hidden] { display: none; }
.share-item:hover { background: #f1f5f9; }
.share-item:active { background: #e2e8f0; }
/* Círculo neutro em vez de logo colorido: quatro marcas coloridas em
   linha viram um semáforo, e a tela precisa continuar limpa. A forma do
   logo já identifica — a cor é redundante aqui. */
.share-ic {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-ic svg { width: 20px; height: 20px; }
/* O "Mais…" tem os dois ícones aninhados (um escondido). Sem isto o <span>
   interno vira caixa inline dentro do flex e desalinha o desenho. */
.share-ic > span { display: flex; }
.share-ic > span[hidden] { display: none; }
.share-lb {
    font-size: 0.7rem;
    color: #475569;
    line-height: 1.1;
    text-align: center;
}
/* Convite, separado por uma linha — o mesmo recurso do Linktree: quem
   recebe um guia é o público do produto. */
.share-cta {
    border-top: 1px solid #e2e8f0;
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}
.share-cta a {
    font-size: 0.8rem;
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}
.share-cta a:hover { text-decoration: underline; }

.qr-modal-close {
    margin-top: 0.5rem;
    background: #f1f5f9;
    border: 0;
    border-radius: 12px;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.625rem 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
.qr-modal-close:hover {
    background: #e2e8f0;
}