/**
 * Pré-avaliação de ouro — estilo da tela.
 *
 * Mesma paleta do resto da casa (verde #063B2E, dourado #BE9B54, creme e ink), na escala de SITE:
 * raio maior, respiro maior, o gradiente dourado do botão principal. A escala apertada do
 * DESIGN.md é a do sistema de balcão, usado em pé oito horas por dia — aqui é um visitante no
 * celular decidindo se fala com a gente.
 *
 * As variáveis são declaradas no próprio bloco: esta tela não pode depender de o plugin de
 * checkout estar ativo na página.
 */

.oep {
    --oep-bg: #FCFAF6;
    --oep-bg-sunken: #F8F4EC;
    --oep-card: #FFFFFF;
    --oep-text: #111512;
    --oep-text-sec: #525C55;
    --oep-text-light: #767F79;
    --oep-border: #E1E4E1;

    --oep-brand: #063B2E;
    --oep-brand-deep: #042A20;

    --oep-gold: #BE9B54;
    --oep-gold-light: #F7EFDB;
    --oep-gold-gradient: linear-gradient(135deg, #DBC078 0%, #BE9B54 100%);

    --oep-warning: #B07F2B;
    --oep-warning-light: #F7EEDC;
    --oep-red: #A8402F;

    --oep-radius-sm: 6px;
    --oep-radius: 16px;
    --oep-shadow: 0 4px 16px rgba(6, 59, 46, 0.08);
    --oep-shadow-gold: 0 8px 24px rgba(190, 155, 84, 0.28);
    --oep-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    font-family: var(--oep-font);
    color: var(--oep-text);
}

.oep * {
    box-sizing: border-box;
}

.oep-card {
    max-width: 560px;
    margin: 24px auto 40px;
    padding: 36px 32px;
    background: var(--oep-card);
    border: 1px solid var(--oep-border);
    border-radius: var(--oep-radius);
    box-shadow: var(--oep-shadow);
}

/* ---------------------------------------------------------------- cabeçalho */

.oep-eyebrow {
    margin: 0 0 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--oep-gold);
}

.oep-titulo {
    margin: 0 0 8px;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--oep-brand);
}

.oep-sub {
    margin: 0 0 24px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--oep-text-sec);
}

/* ---------------------------------------------------------------- campos */

.oep-campo {
    margin-bottom: 18px;
}

.oep-rotulo {
    display: block;
    margin: 0 0 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--oep-text-light);
}

.oep-select,
.oep-input {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    background: var(--oep-card);
    border: 1px solid var(--oep-border);
    border-radius: var(--oep-radius-sm);
    font-family: var(--oep-font);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--oep-text);
}

.oep-select {
    cursor: pointer;
}

.oep-input {
    /* O peso é número: alinhado como número, não como frase. */
    font-variant-numeric: tabular-nums;
}

.oep-select:focus,
.oep-input:focus {
    outline: none;
    border-color: var(--oep-gold);
    box-shadow: 0 0 0 3px var(--oep-gold-light);
}

.oep-invalido {
    border-color: var(--oep-red);
}

.oep-erro {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: var(--oep-red);
}

/* ---------------------------------------------------------------- botões */

.oep-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 54px;
    padding: 16px 24px;
    font-family: var(--oep-font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: var(--oep-radius-sm);
    cursor: pointer;
    transition: box-shadow 150ms, background 150ms, color 150ms;
}

.oep-btn:hover {
    text-decoration: none;
}

.oep-btn--gold {
    background: var(--oep-gold-gradient);
    color: var(--oep-brand-deep);
}

.oep-btn--gold:hover {
    box-shadow: var(--oep-shadow-gold);
    color: var(--oep-brand-deep);
}

.oep-btn:disabled,
.oep-btn[disabled] {
    opacity: 0.7;
    cursor: default;
    box-shadow: none;
}

/* ---------------------------------------------------------------- notas */

/* A frase que explica o que o botão vai fazer. Ela é parte do botão, não decoração. */
.oep-nota {
    margin: 12px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--oep-text-light);
}

.oep-aviso {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: var(--oep-warning-light);
    border-radius: var(--oep-radius-sm);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--oep-warning);
}

/* A tarja do modo de demonstração precisa ser impossível de confundir com preço de verdade. */
.oep-tarja {
    margin: 0 0 20px;
    padding: 10px 14px;
    background: var(--oep-warning-light);
    border-left: 3px solid var(--oep-warning);
    border-radius: var(--oep-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--oep-warning);
}

/* Quando o aviso abre a tela — sem lista de quilates não há formulário abaixo dele. */
.oep-aviso--topo {
    margin: 0 0 16px;
}

/* ---------------------------------------------------------------- celular */

@media (max-width: 600px) {
    .oep-card {
        margin: 16px auto 28px;
        padding: 24px 20px;
    }

    .oep-titulo {
        font-size: 1.375rem;
    }

    /* No celular o rótulo longo do botão principal cabe em duas linhas, não em três. */
    .oep-btn {
        padding: 16px 14px;
        font-size: 0.9375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oep-btn {
        transition: none;
    }
}

/* ---------------------------------------------------------------- as opções (peça e teor)
   Radios de verdade, escondidos, com o rótulo virando o botão. É o que faz a tela funcionar sem
   JavaScript: sem ele os grupos aparecem todos e o formulário posta igual — nada aqui depende de
   script para ser clicável. */
/* As opções de um grupo têm de ter o MESMO tamanho — e por construção, não por coincidência.
   A `min-width` antiga era 5.5rem (88px) e a caixa de "Moeda", a palavra mais larga, pedia 85,7px:
   2,3 pixels de folga. Bastava o tema do site subir a fonte um ponto, ou o Inter não carregar e
   entrar uma fonte de fallback mais larga, para só o "Moeda" passar de 88px e crescer sozinho.
   Empate por raspão não é alinhamento. Agora a folga é de ~9px na pior fonte testada. */
.oep-opcoes {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: stretch;   /* explícito: nenhuma opção sobe, desce ou encolhe sozinha */
}
.oep-radio {
  position: absolute; opacity: 0; width: 0; height: 0;
  margin: 0; padding: 0; pointer-events: none;
}
.oep-opcao {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; flex: 0 0 auto;
  min-width: 6.5rem; min-height: 2.5rem;
  margin: 0; padding: .7rem 1.1rem; cursor: pointer;
  border: 1px solid var(--oep-border); border-radius: .6rem;
  background: var(--oep-card); color: var(--oep-text);
  /* herdadas de propósito: um `label {}` do tema não pode redesenhar a opção */
  font-family: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2;
  text-align: center; white-space: nowrap;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.oep-opcao:hover { border-color: var(--oep-gold); }
.oep-radio:checked + .oep-opcao {
  background: var(--oep-brand); border-color: var(--oep-brand); color: #fff;
}
/* o foco pelo teclado tem de aparecer: o radio está escondido, então quem mostra é o rótulo */
.oep-radio:focus-visible + .oep-opcao { outline: 2px solid var(--oep-gold);
  outline-offset: 2px; }
.oep-teores[hidden] { display: none; }

/* No celular não há largura para três pílulas de 6.5rem: elas dividem a linha em partes iguais.
   Continua "todas do mesmo tamanho" — muda só quem decide o tamanho. */
@media (max-width: 600px) {
  .oep-opcao { flex: 1 1 0; min-width: 0; }
}