/* ════════════════════════════════════════════════════════════════════════════
   gc-create.css: criar rede (assistente de 2 passos) · form.php
   Só tokens --ui-* e componentes do ui-kit (ui-wizard, ui-choice, ui-seg,
   ui-linkfield, ui-phone + ui-wa-*, ui-steps.is-live, ui-qr...). Aqui fica o
   arranjo da página e o CONTEÚDO da prévia (a página de convite em miniatura).
   O seletor de grupos do passo 2 é o compartilhado (gc-pick-groups.css).
   Sem sombra, sem faixa de cor, sem !important.
   ════════════════════════════════════════════════════════════════════════════ */

.gcc-page { min-width: 0; }
.gcc-blocked { padding: var(--ui-space-6); }

/* ── Assistente ─────────────────────────────────────────────────────────── */
.gcc-wizard { --ui-wizard-aside-w: 340px; overflow: clip; }
/* O .cl-main-inner tem 24 px de respiro embaixo e o sticky para na borda do
   conteúdo: sem o deslocamento, uma faixa do formulário aparece por baixo do
   rodapé fixo. O cartão recorta (clip) o canto reto quando ele chega ao fim. */
.gcc-wizard > .ui-wizard-foot { bottom: calc(var(--ui-space-6) * -1); border-radius: 0; }
.gcc-wizard .ui-wizard-head { min-height: 52px; }
.gcc-preview-btn { margin-left: auto; }
.gcc-wizard .ui-wizard-main > .ui-wizard-step { max-width: 560px; }
.gcc-wizard .ui-wizard-step > .ui-field + .ui-field,
.gcc-wizard .ui-wizard-step > .ui-field + input + .ui-field,
.gcc-wizard .ui-wizard-step > .gcc-picks + .gcc-how { margin-top: var(--ui-space-5); }
.gcc-wizard .ui-wizard-step .ui-field { margin-bottom: 0; }
.gcc-wizard fieldset.ui-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.gcc-wizard fieldset.ui-field > legend.ui-label { float: none; width: auto; padding: 0; margin: 0 0 var(--ui-space-2); }

/* Computador: o palco começa na altura do cabeçalho do assistente (o celular
   e o seletor de vista cabem acima do rodapé fixo mesmo em 1366 x 768). */
@media (min-width: 1100px) {
    .gcc-wizard:has(> .ui-wizard-main):has(> .ui-wizard-aside) { grid-template-areas: ". head aside ." ". main aside ." "foot foot foot foot"; }
}

/* Objetivo: 3 cartões. Tile e rádio no topo, texto embaixo (no celular, em linha). */
.gcc-goals { gap: var(--ui-space-3); }
.gcc-goal-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tile . radio" "body body body"; row-gap: var(--ui-space-3); column-gap: var(--ui-space-3); align-items: start; align-content: start; padding: var(--ui-space-4); }
.gcc-goal-opt > .ui-tile { grid-area: tile; }
.gcc-goal-opt > .ui-choice-body { grid-area: body; }
.gcc-goal-opt > .ui-radio { grid-area: radio; margin-top: 4px; }
.gcc input.ui-radio:checked { background-color: var(--ui-accent); border-color: var(--ui-accent); }
.gcc input.ui-checkbox:checked { background-color: var(--ui-accent); border-color: var(--ui-accent); }
.gcc input.ui-checkbox:checked::after { opacity: 1; transform: none; }
.gcc input.ui-radio:checked::after { background: var(--ui-on-primary, #fff); transform: scale(1); }
.gcc-goal-opt:has(> input:checked) > .ui-tile { background: rgba(var(--ui-accent-rgb), .11); color: var(--ui-accent-ink); }

/* Dispositivo: desconectado fica desabilitado, mas o "Reconectar" segue legível. */
.gcc-dev-ico { color: var(--ui-wa-ink); background: rgba(var(--ui-wa-rgb), .12); }
.gcc-devs .ui-choice { align-items: center; }
.gcc-devs .ui-choice > .ui-choice-body { flex: 1 1 auto; }
.gcc-devs .ui-choice > .ui-radio { margin: 0; }
.gcc-dev.is-off { opacity: 1; cursor: default; background: var(--ui-fill-1); border-color: var(--ui-border); }
.gcc-dev.is-off .ui-choice-title, .gcc-dev.is-off .gcc-dev-ico { opacity: .6; }
.gcc-dev.is-off > .ui-radio { opacity: .45; }
.gcc-dev-off { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ui-space-2); }
.gcc-dev-off > .ui-btn-link { height: auto; padding: 0; font-size: inherit; }

/* Nome: os grupos ao vivo na ajuda. */
.gcc-name-field .ui-help b { font-weight: var(--ui-fw-semibold); color: var(--ui-ink-2); }

/* Foto */
.gcc-photo-row { display: flex; align-items: center; gap: var(--ui-space-4); min-width: 0; }
.gcc-photo-thumb { border: 1px dashed var(--ui-ctl-line); background: var(--ui-fill-1); color: var(--ui-muted); }
.gcc-photo-thumb svg { width: var(--ui-ic-xl); height: var(--ui-ic-xl); }
.gcc-photo-thumb:has(img) { border-style: solid; border-color: var(--ui-border); }
.gcc-photo-act { display: flex; flex-direction: column; gap: var(--ui-space-1); min-width: 0; }
.gcc-photo-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
.gcc-photo .ui-error { margin-top: var(--ui-space-2); }

/* ── Passo 2 ─────────────────────────────────────────────────────────────── */
.gcc-pick[hidden] { display: none; }
.gcc-sync { margin: var(--ui-space-2) 0 0; }
.gcc-sync[hidden] { display: none; }

/* "Como as pessoas entram": resumo recolhido + "Mudar"; aberto, a mesma cara
   da seção "Entrada nos grupos" da aba Ajustes. */
.gcc-how { min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); background: var(--ui-bg-card); }
.gcc-how-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-4); padding: var(--ui-space-4); }
.gcc-how-txt { min-width: 0; }
.gcc-how-t { font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); line-height: 20px; color: var(--ui-ink); }
.gcc-how-sum { margin: 2px 0 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
.gcc-how-head > .ui-btn { flex: 0 0 auto; }
.gcc-how-body { display: flex; flex-direction: column; gap: var(--ui-space-5); padding: var(--ui-space-4); border-top: 1px solid var(--ui-border-subtle); animation: uiFadeIn var(--ui-dur-2) var(--ui-ease-out); }
.gcc-how-body[hidden] { display: none; }
.gcc-how-body .ui-field { margin: 0; }
.gcc-how-body .ui-field > .ui-label { display: block; margin-bottom: var(--ui-space-2); }
.gcc-limit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); }
.gcc-limit-n { width: 128px; font-variant-numeric: tabular-nums; }
.gcc-limit-n[hidden] { display: none; }
.gcc-limit > .ui-help { margin-top: var(--ui-space-2); }
/* Coluna de ~525 px: as 4 regras empilhadas (título e descrição numa linha,
   desenho à direita). Em Ajustes, na coluna larga, o 2 x 2 fica. */
.gcc-rule-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-2); }
.gcc-rule-list > .ui-choice { align-items: center; }
.gcc-rule-list > .ui-choice > .ui-radio { margin-top: 0; }
.gcc-how-note { display: flex; align-items: flex-start; gap: var(--ui-space-2); margin: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-muted); }
.gcc-how-note svg { flex: 0 0 auto; width: var(--ui-ic-sm); height: var(--ui-ic-sm); margin-top: 2px; }

/* ── Palco da prévia ────────────────────────────────────────────────────── */
.gcc-stage { justify-content: flex-start; gap: var(--ui-space-3); min-height: 0; }
/* --gcc-pv-z (gc-create.js) encolhe o celular INTEIRO, moldura e conteúdo, para a
   prévia caber acima do rodapé fixo em telas baixas (1366x768), sem cortar nada. */
.gcc-phone { --ui-phone-scale: .76; zoom: var(--gcc-pv-z, 1); }
.gcc-pv-seg { align-self: center; }
.gcc-pv-cap { max-width: 260px; min-height: 2.8em; }
.gcc-stage > .ui-wizard-aside-close { position: absolute; top: var(--ui-space-2); right: var(--ui-space-2); }

/* Conteúdo do celular: SEMPRE claro (é o que o contato vê). A página de
   convite em miniatura espelha /g/{slug} (fundo creme tingido pela cor do
   botão, como a página pública; a cor real vem do JS em --gcc-lp-c); as telas
   do WhatsApp são as peças ui-wa-* do ui-kit. */
.gcc-phone { --gcc-lp-c: var(--primary, #FF7E01); }
.gcc-phone .ui-phone-screen { font-family: var(--ui-font); }

.gcc-lp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); min-height: 100%; padding: var(--ui-space-5) var(--ui-space-3); background: color-mix(in srgb, var(--gcc-lp-c) 7%, #F6F2EA); color: #1B1714; text-align: center; }
.gcc-lp-card { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); width: 100%; padding: var(--ui-space-5) var(--ui-space-3) var(--ui-space-4); border: 1px solid rgba(27, 23, 20, .08); border-radius: var(--ui-r-xl); background: rgba(255, 255, 255, .78); }
.gcc-lp-logo { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--ui-space-1); overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--gcc-lp-c) 16%, #FFFFFF); color: color-mix(in srgb, var(--gcc-lp-c) 70%, #1B1714); font-size: var(--ui-fs-title); font-weight: var(--ui-fw-semibold); text-transform: uppercase; }
.gcc-lp-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcc-lp-logo img[hidden], .gcc-phone [data-gcc-pv-ini][hidden], .gcc-phone .ui-wa-head-av img[hidden], .gcc-phone .ui-wa-linkcard-img[hidden] { display: none; }
.gcc-lp-eyebrow { margin: 0; font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; color: #6F6862; }
.gcc-lp-name { max-width: 100%; margin: 0; font-size: var(--ui-fs-modal); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-tight); letter-spacing: -.01em; overflow-wrap: anywhere; }
.gcc-lp-text { max-width: 100%; margin: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: #3A332D; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gcc-lp-stats { margin: var(--ui-space-1) 0 0; padding: 4px 10px; border-radius: var(--ui-r-pill); background: rgba(27, 23, 20, .05); font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); color: #3A332D; font-variant-numeric: tabular-nums; }
.gcc-lp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; margin-top: var(--ui-space-2); border-radius: var(--ui-r-pill); background: var(--gcc-lp-c); color: #FFFFFF; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); white-space: nowrap; }
.gcc-lp-cta svg { flex: 0 0 auto; width: var(--ui-ic-sm); height: var(--ui-ic-sm); fill: currentColor; }
.gcc-lp-trust { margin: 0; font-size: var(--ui-fs-caption); color: #6F6862; }

/* Telas do WhatsApp: cabeçalho + conversa (ui-wa-*) + barra de digitar. */
.gcc-pv-wa { display: flex; flex-direction: column; height: 100%; }
.gcc-pv-wa[hidden] { display: none; }
.gcc-pv-wa > .ui-wa-head { flex: 0 0 auto; padding-top: var(--ui-space-5); }
.gcc-pv-wa > .ui-wa-chat { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.gcc-wa-bottom { justify-content: flex-end; }
.gcc-phone .ui-wa-head-av svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.gcc-wa-linkbubble { width: 82%; }
.gcc-wa-url { color: var(--ui-wa-link); overflow-wrap: anywhere; }
.gcc-wa-foot { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 48px; padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-3); background: var(--ui-wa-chat-bg); }
.gcc-wa-input { flex: 1 1 auto; height: 34px; padding: 0 var(--ui-space-3); border-radius: var(--ui-r-pill); background: var(--ui-wa-in-bg); color: var(--ui-wa-meta); font-size: var(--ui-fs-label); line-height: 34px; }
.gcc-wa-input[hidden], .gcc-wa-locked[hidden] { display: none; }
.gcc-wa-locked { padding: var(--ui-space-1) 0; font-size: var(--ui-fs-help); color: var(--ui-wa-meta); text-align: center; }

/* ── Criando ─────────────────────────────────────────────────────────────── */
.gcc-live { gap: var(--ui-space-4); }
.gcc-live > li { align-items: flex-start; }
.gcc-live > li > span { min-width: 0; padding-top: 2px; overflow-wrap: anywhere; }
.gcc-progress [data-gcc-prog-actions][hidden] { display: none; }

/* ── Pronto ──────────────────────────────────────────────────────────────── */
.gcc-done { gap: var(--ui-space-3); }
.gcc-done > .ui-wizard-state-d { text-wrap: balance; }
.gcc-done-link { width: 100%; max-width: 480px; margin-top: var(--ui-space-2); }
.gcc-done-link[hidden] { display: none; }
/* Sem grupo a rede existe, mas o link ainda não leva a lugar nenhum: marca neutra (link reservado), não o verde de sucesso. */
.gcc-done.is-semgrupo .ui-wizard-done-mark { color: var(--ui-ink-2); background: var(--ui-fill-2); }
.gcc-done.is-semgrupo .ui-wizard-done-mark::before { -webkit-mask-image: var(--ui-ico-link); mask-image: var(--ui-ico-link); -webkit-mask-size: 22px; mask-size: 22px; }
.gcc-done-actions { align-items: center; margin-top: 0; }
.gcc-done-actions .ui-btn-link svg { width: 14px; height: 14px; }
.gcc-next { width: 100%; max-width: 480px; margin-top: var(--ui-space-5); padding: var(--ui-space-4) var(--ui-space-5); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); text-align: left; }
.gcc-next-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-3); margin-bottom: var(--ui-space-3); }
.gcc-next-t { font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.gcc-next-n { font-size: var(--ui-fs-label); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.gcc-next-list { gap: 0; }
.gcc-next-list > li { align-items: flex-start; padding: var(--ui-space-3) 0; }
.gcc-next-list > li + li { border-top: 1px solid var(--ui-border-subtle); }
/* O check do ui-kit fica no topo do item; aqui o item tem respiro em cima (linhas
   separadas), então ele desce o mesmo tanto para cair dentro do círculo. A
   especificidade empata com a regra do ui-kit (que tem 2 :not). */
.gcc-next-list.ui-steps:not(.is-live):not(.is-cards) > li.is-done::after { top: var(--ui-space-3); }
.gcc-next-list > li > .ui-steps-act { padding-right: 0; }
.gcc-done-go { margin-top: var(--ui-space-2); }
.gcc-done-go svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }

/* QR Code (modal 10.11): o desenho é do ui-qr; o link do subtítulo numa linha só. */
.gcc-qr-body { display: flex; justify-content: center; }
.gcc-qr-url { font-size: var(--ui-fs-label); }

/* ── Celular ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .gcc-goal-opt { display: flex; align-items: center; padding: var(--ui-space-3) var(--ui-space-4); }
    .gcc-goal-opt > .ui-choice-body { flex: 1 1 auto; }
    .gcc-goal-opt > .ui-radio { margin: 0; }
    .gcc-stage { padding-top: var(--ui-space-8); }
    .gcc-pv-cap { min-height: 0; }
}
@media (max-width: 600px) {
    /* Migalha no celular: só o pai, com a seta de voltar (igual ao detalhe). */
    .gcc-page > .dsh-breadcrumb li { display: none; }
    .gcc-page > .dsh-breadcrumb li:nth-last-child(2) { display: inline-flex; }
    .gcc-page > .dsh-breadcrumb li:nth-last-child(2)::before { transform: rotate(135deg); margin-left: 2px; }
}
@media (max-width: 560px) {
    .gcc-head { margin-bottom: var(--ui-space-4); }
    .gcc-head .ui-page-meta { font-size: var(--ui-fs-label); }
    .gcc-wizard .ui-wizard-head { min-height: 0; }
    .gcc-how-head { flex-direction: column; gap: var(--ui-space-3); }
    .gcc-how-head > .ui-btn { align-self: flex-start; }
    .gcc-limit-row > .ui-seg { display: flex; width: 100%; }
    .gcc-limit-row > .ui-seg .ui-seg-btn { flex: 1 1 0; padding: 0 var(--ui-space-2); }
    .gcc-photo-row { gap: var(--ui-space-3); }
    .gcc-next { padding: var(--ui-space-3) var(--ui-space-4); }
    .gcc-next-list > li { flex-wrap: wrap; row-gap: var(--ui-space-1); }
    /* O texto ocupa a linha toda e a ação desce para baixo dele (nada de frase em coluna de 1 palavra). */
    .gcc-next-list > li > .ui-steps-txt { flex: 1 1 calc(100% - 24px - var(--ui-space-3)); }
    .gcc-next-list > li > .ui-steps-act { margin: 0 0 0 calc(24px + var(--ui-space-3)); padding-left: 0; height: auto; }
    /* Rodapé numa linha só (crítica GC-U2-12): [Cancelar | Voltar] à esquerda e a
       primária ocupando o resto, como no computador. */
    .gcc-wizard > .ui-wizard-foot { flex-wrap: nowrap; }
    .gcc-wizard .ui-wizard-foot-start { flex: 0 0 auto; order: 0; margin: 0; }
    .gcc-done-actions { flex-direction: column; width: 100%; }
    .gcc-done-actions > .ui-btn { width: 100%; }
    .gcc-done-link { flex-wrap: wrap; }
    .gcc-blocked { padding: var(--ui-space-2); }
}
@media (max-width: 420px) {
    /* Celular estreito: o desenho da regra sai e o texto ganha a largura (sem título em 2 linhas). */
    .gcc-rule > .ui-choice-visual { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gcc-how-body { animation: none; }
}