/*
 * Placa Customizável — Compatibilidade com Variation Swatches for WooCommerce
 *
 * Carregado em TODAS as páginas de produto (com ou sem o customizador de
 * placa ativo), pois o problema que este arquivo corrige é do seletor de
 * variação do WooCommerce, não da placa em si.
 *
 * O estilo global "Round"/"Rounded" desse plugin é pensado para swatches de
 * Cor e Imagem (círculos pequenos). Quando aplicado a atributos do tipo
 * Botão, o texto do rótulo fica espremido dentro de um círculo. Aqui
 * garantimos que cada tipo de swatch mantenha a forma correta — botão como
 * botão, radio como radio, cor/imagem como círculo — usando os mesmos
 * tokens de borda do restante do customizador de placa.
 */

:root {
    --placacustom-accent: var(--e-global-color-secondary, #d23268);
    --placacustom-border: #21212124;
    --placacustom-border-width: 1px;
    --placacustom-radius: 10px;
    --placacustom-ring: color-mix(in srgb, var(--placacustom-accent) 18%, transparent);
}

/*
 * Borda padronizada para todo item de swatch (botão, radio, cor, imagem) —
 * mesma largura/cor usada nos campos de texto e no seletor de fontes da
 * placa. O estado hover/selecionado (mais abaixo) sobrepõe esta regra.
 */
.variable-items-wrapper .variable-item {
    border-width: var(--placacustom-border-width) !important;
    border-style: solid !important;
    border-color: var(--placacustom-border) !important;
    outline: none !important;
    box-shadow: none !important; /* remove o contorno preto grosso que o plugin aplica no item selecionado */
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s, color 0.15s;
}
.variable-items-wrapper .variable-item:focus,
.variable-items-wrapper .variable-item:focus-visible {
    outline: none !important;
}

/*
 * Botão: nunca deve virar círculo, precisa acomodar o texto do rótulo.
 * O Variation Swatches for WooCommerce aplica uma caixa fixa de ~34x34px
 * (pensada para os swatches de Cor/Imagem) em TODOS os tipos, com seletores
 * de especificidade alta. Por isso repetimos as classes reais do markup do
 * plugin (variable-items-wrapper + button-variable-items-wrapper + o modificador
 * de estilo wvs-style-*) para garantir especificidade igual ou maior, além
 * de !important em cada propriedade de tamanho/recorte.
 */
.variable-items-wrapper.button-variable-items-wrapper .variable-item.button-variable-item,
.variable-items-wrapper .button-variable-item {
    width: auto !important;
    height: auto !important;
    min-width: 44px !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: var(--placacustom-radius) !important;
    padding: 0 !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
}
.variable-items-wrapper .button-variable-item .variable-item-contents {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    line-height: normal !important;
}
.variable-items-wrapper .button-variable-item .variable-item-span,
.variable-items-wrapper .button-variable-item .variable-item-span-button {
    position: static !important;
    display: inline !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 0.85em !important;
    line-height: normal !important;
}

/* Radio: mantém a forma redonda pequena, típica de um botão de opção. */
.variable-items-wrapper .radio-variable-item {
    border-radius: 50% !important;
}

/* Cor e imagem: círculo é o formato esperado para esses tipos — só muda cor/espessura da borda. */
.variable-items-wrapper .color-variable-item,
.variable-items-wrapper .image-variable-item {
    border-radius: 50% !important;
}

/* Select nativo (quando o atributo não usa swatch nenhum): mantém o padrão do tema. */
.woo-variation-raw-select {
    max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOVER / SELECIONADO
   Botão e Radio: preenchem com a cor secundária (não representam uma cor ou
   imagem própria, então preencher não conflita com nada).
   Cor e Imagem: mantêm o preenchimento real do swatch (a cor/imagem do
   atributo) — só a borda muda para a secundária, com um anel de destaque.
══════════════════════════════════════════════════════════════════════════ */
.variable-items-wrapper.button-variable-items-wrapper.wvs-style-rounded .variable-item.button-variable-item[aria-checked="true"],
.variable-items-wrapper.button-variable-items-wrapper.wvs-style-rounded .variable-item.button-variable-item.selected,
.variable-items-wrapper .button-variable-item:hover,
.variable-items-wrapper .radio-variable-item:hover,
.variable-items-wrapper .button-variable-item[aria-checked="true"],
.variable-items-wrapper .button-variable-item.selected,
.variable-items-wrapper .radio-variable-item[aria-checked="true"],
.variable-items-wrapper .radio-variable-item.selected {
    background: var(--placacustom-accent) !important;
    border-color: var(--placacustom-accent) !important;
}
.variable-items-wrapper.button-variable-items-wrapper.wvs-style-rounded .variable-item.button-variable-item[aria-checked="true"] .variable-item-span-button,
.variable-items-wrapper.button-variable-items-wrapper.wvs-style-rounded .variable-item.button-variable-item.selected .variable-item-span-button,
.variable-items-wrapper .button-variable-item:hover .variable-item-span-button,
.variable-items-wrapper .button-variable-item[aria-checked="true"] .variable-item-span-button,
.variable-items-wrapper .button-variable-item.selected .variable-item-span-button {
    color: #fff !important;
}

.variable-items-wrapper .color-variable-item:hover,
.variable-items-wrapper .image-variable-item:hover,
.variable-items-wrapper .color-variable-item[aria-checked="true"],
.variable-items-wrapper .color-variable-item.selected,
.variable-items-wrapper .image-variable-item[aria-checked="true"],
.variable-items-wrapper .image-variable-item.selected {
    border-color: var(--placacustom-accent) !important;
    box-shadow: 0 0 0 3px var(--placacustom-ring);
}

/* ══════════════════════════════════════════════════════════════════════════
   TIPOGRAFIA E LIMPEZA VISUAL DA TABELA DE VARIAÇÕES
══════════════════════════════════════════════════════════════════════════ */
table.variations {
    font-family: 'Roboto Condensed' !important;
}

/*
 * Título padronizado — EXATAMENTE o mesmo tratamento dos rótulos das linhas
 * de texto da placa (.placacustom-field-label / .placacustom-font-choice-label):
 * mesma fonte, peso, tamanho, cor e espaçamento. !important porque o tema
 * costuma sobrepor esses valores em th.label label com maior especificidade.
 */
th.label label {
    font-family: 'Roboto Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: #2d3748 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    display: block !important;
    margin: 0 !important;
    margin-top: 20px !important;
}

th.label {
    padding: 0 !important;
}

/*
 * O botão/swatch já indica visualmente qual valor está selecionado, então
 * este texto extra ao lado do rótulo ("Tipo de Instalação: Fixar com
 * Parafuso") é redundante.
 */
.woo-selected-variation-item-name {
    display: none !important;
}

td.value.woo-variation-items-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
    background-color: transparent !important;
    border: none !important;
}

table tbody tr:hover > td,
table tbody tr:hover > th {
    background-color: transparent !important;
}