/* ==========================================================================
 * Skin "wc_wey" do widget "Solicitar Orçamento" — o formulário de diagnóstico
 * do design system Wey Barros, dentro do bloco âncora escuro (.wb-section--anchor,
 * data-bs-theme="dark"). A mecânica (pane, honeypot, spinner, alerta/sucesso
 * escondidos) vem do quote.wc.css; aqui só o vestuário: os tokens --wcq-* são
 * redefinidos para a paleta do tema (--wb-*, que derivam da paleta do painel via
 * --bs-*), com fallbacks para a skin não quebrar fora do tema wc_wey.
 * Regra de cor do sistema: sobre o escuro quem escreve é o off-white (--wb-bone)
 * e o verde-300; a escolha marcada INVERTE (off-white preenche, verde escreve).
 * A raiz também leva .wb-diag (cartão, rampa no topo e o contador 01–07 dos
 * rótulos) — a numeração pula o e-mail (.wb-diag__opt).
 * ========================================================================== */
.wc-quote--wey {
    --wcq-bone: var(--wb-bone, #F2F5F3);
    --wcq-bone-rgb: var(--wb-bone-rgb, 242, 245, 243);
    --wcq-g300: var(--wb-green-300, #A9BFB2);
    --wcq-g400: var(--wb-green-400, #8AA697);
    --wcq-g900: var(--wb-green-900, #12271B);
    --wcq-text: var(--wcq-bone);
    --wcq-heading: var(--wcq-bone);
    --wcq-muted: var(--wcq-g300);
    --wcq-border: var(--wb-border-strong, rgba(242, 245, 243, .30));
    --wcq-field-bg: rgba(var(--wcq-bone-rgb), .06);
    --wcq-surface: transparent;
    --wcq-primary: var(--wcq-bone);
    --wcq-primary-rgb: var(--wcq-bone-rgb);
    --wcq-danger: #F2B1A9;       /* vermelho claro: legível sobre o verde-800/900 */
    --wcq-danger-rgb: 242, 177, 169;
    --wcq-radius: var(--wb-radius-md, 9px);
    color: var(--wcq-text);
}

/* ---- Rótulos: voz de especificação do tema (mono, uppercase, numerados).
   O quote.wc.css pesa o mesmo que .wb-diag .form-label e chega depois, por isso
   a regra é repetida aqui (e vence por ordem). ---- */
.wc-quote--wey .form-label {
    display: block; margin-bottom: .5rem;
    font-family: var(--wb-font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--wcq-g300);
}
.wc-quote--wey .qf-req { display: none; }                     /* sem asterisco: o erro avisa */
.wb-diag .form-label.wb-diag__opt::before { content: none; counter-increment: none; } /* e-mail fora da contagem */
.wc-quote--wey .form-group { margin: 0; }

/* ---- Campos: o mesmo desenho dos .form-control do tema no escuro ---- */
.wc-quote--wey .form-control,
.wc-quote--wey .form-select,
.wc-quote--wey textarea.form-control {
    padding: .75rem 1rem; font-size: var(--wb-fs-base, 1rem); line-height: 1.45; font-family: inherit;
    color: var(--wcq-text); background-color: var(--wcq-field-bg);
    border: 1px solid var(--wcq-border); border-radius: var(--wcq-radius); box-shadow: none;
    transition: border-color var(--wb-dur-fast, .15s) linear, box-shadow var(--wb-dur-fast, .15s) linear, background-color var(--wb-dur-fast, .15s) linear;
}
.wc-quote--wey .form-control:focus,
.wc-quote--wey .form-select:focus {
    outline: 0; color: var(--wcq-text); border-color: var(--wcq-g300);
    background-color: rgba(var(--wcq-bone-rgb), .09);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--wcq-g300) 25%, transparent);
}
.wc-quote--wey .form-control::placeholder { color: var(--wcq-g400); opacity: 1; }
.wc-quote--wey .form-control[aria-invalid="true"] { border-color: var(--wcq-danger); }
.wc-quote--wey textarea.form-control { min-height: 104px; resize: vertical; }
/* <select>: seta própria em off-white; a lista nativa abre clara, então as opções escrevem em verde. */
.wc-quote--wey .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F2F5F3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
.wc-quote--wey .form-select option { color: var(--wcq-g900); background: #fff; }

/* ---- Os campos do serviço entram na MESMA .row dos dados de contato. O wrapper
   .wc-quote-fields (que o quote.wc.js usa para ligar/desligar por serviço) some
   do layout com display:contents; como o Bootstrap só dá calha a `.row > *`, as
   colunas dentro dele repetem aqui a regra (as --bs-gutter-* herdam da .row). ---- */
.wc-quote--wey .wc-quote-fields { display: contents; }
.wc-quote--wey .wc-quote-fields[hidden] { display: none; }
.wc-quote--wey .wc-quote-fields > * {
    flex-shrink: 0; width: 100%; max-width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1rem) * .5); padding-left: calc(var(--bs-gutter-x, 1rem) * .5);
    margin-top: var(--bs-gutter-y, 1rem);
}

/* ---- Escolha única/múltipla em blocos (o .wb-choice do tema): 3 por linha,
   transparente com borda; marcada = off-white preenchendo, verde escrevendo ---- */
.wc-quote--wey .qf-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.wc-quote--wey .qf-choice { margin: 0; height: 100%; }
.wc-quote--wey .qf-choice-face {
    display: flex; align-items: center; justify-content: center; text-align: center; height: 100%;
    gap: 0; padding: var(--wb-space-4, 1rem) var(--wb-space-2, .5rem);
    border: 1px solid var(--wcq-border); border-radius: var(--wcq-radius);
    background: transparent; color: var(--wcq-bone); box-shadow: none;
    font-size: var(--wb-fs-sm, .875rem); font-weight: 500; line-height: 1.3;
    transition: border-color var(--wb-dur-fast, .15s) var(--wb-ease, ease), background var(--wb-dur-fast, .15s) var(--wb-ease, ease), color var(--wb-dur-fast, .15s) var(--wb-ease, ease);
}
.wc-quote--wey .qf-choice-mark { display: none; }
.wc-quote--wey .qf-choice-txt { display: block; }
.wc-quote--wey .qf-choice:hover .qf-choice-face { border-color: var(--wcq-bone); }
.wc-quote--wey .qf-choice.is-checked .qf-choice-face,
.wc-quote--wey .qf-choice:has(.qf-choice-input:checked) .qf-choice-face {
    background: var(--wcq-bone); color: var(--wcq-g900); border-color: var(--wcq-bone); font-weight: 600; box-shadow: none;
}
.wc-quote--wey .qf-choice-input:focus-visible ~ .qf-choice-face {
    box-shadow: none; outline: 3px solid color-mix(in srgb, var(--wcq-g300) 50%, transparent); outline-offset: 2px;
}
.wc-quote--wey .qf-choices.is-error .qf-choice-face { border-color: var(--wcq-danger); }

/* ---- Erro / alerta ---- */
.wc-quote--wey .wc-quote-alert { margin-bottom: 1rem; border-radius: var(--wcq-radius); }
.wc-quote--wey .qf-group.is-error .form-label { color: var(--wcq-danger); }

/* ---- Ações: botão no desenho do tema (o bloco âncora inverte o .btn-wb-primary) ---- */
.wb-diag__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.25rem; }
.wc-quote--wey .jwc_quote_submit { position: relative; }
.wc-quote--wey .wc-quote-btn-label { display: inline-flex; align-items: center; gap: .55rem; }
/* Spinner na cor do texto do botão (o do quote.wc.css é branco — sumiria no off-white). */
.wc-quote--wey .jwc_quote_submit .wc-quote-spinner { border-color: color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; }
.wb-diag__note { font-size: var(--wb-fs-xs, .75rem); color: var(--wcq-g300); }

/* ---- Recebido ---- */
/* O quote.wc.js grava min-height inline no pai do form ao trocar pela mensagem (evita o
   "pulo" no assistente); aqui o cartão encolhe junto — no celular sobrariam ~1000px vazios. */
.wc-quote--wey.wc-quote { min-height: 0 !important; }
.wc-quote--wey .wc-quote-success { text-align: left; padding: .25rem 0 0; }
.wc-quote--wey .wc-quote-success-title { margin: .5rem 0 .75rem; color: var(--wcq-heading); }
.wc-quote--wey .wc-quote-success-title:focus { outline: 0; }
.wc-quote--wey .wc-quote-success p { color: var(--wcq-text); margin: 0 0 1rem; max-width: 52ch; }
.wc-quote--wey .wc-quote-success .wb-eyebrow { margin-bottom: 0; }
.wb-diag__whats { display: inline-flex; align-items: center; gap: .55rem; }
.wc-quote--wey .wc-quote-empty { color: var(--wcq-muted); border-color: var(--wcq-border); }

@media (max-width: 575.98px) {
    .wc-quote--wey .qf-choice-face { padding: .85rem .4rem; font-size: var(--wb-fs-xs, .75rem); }
    .wb-diag__actions .btn { width: 100%; justify-content: center; }
}