/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/
/* ===== WOODMART CUSTOM STYLING - PRODUCT ATTRIBUTES ===== */

/* Estilo Base dos Botões de Atributos */
.variations-wrapper .swatch {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #e0e0e0 !important;
    border-radius: 4px;
    padding: 8px 14px;
    background-color: #ffffff;
}

/* Estilo dos Labels (Tamanho, Cor da Moldura, Acabamento) */
.variations-wrapper .variation-label {
    font-weight: 600;
    color: #333333;
    margin-bottom: 12px;
    display: block;
}

/* ===== ESTADO ATIVO/CLICADO - COR LARANJA ===== */

/* Seletor para botões ativos - Laranja (#FF8C00) */
.variations-wrapper .swatch.selected,
.variations-wrapper .swatch:active,
.variations-wrapper .swatch[aria-checked="true"] {
    background-color: #FF8C00 !important;
    color: #ffffff !important;
    border-color: #E67E00 !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(255, 140, 0, 0.4);
}

/* Hover State - Feedback Visual */
.variations-wrapper .swatch:hover {
    border-color: #999999;
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Hover + Selected State */
.variations-wrapper .swatch.selected:hover {
    background-color: #FF7700 !important;
    border-color: #D66E00 !important;
    box-shadow: 0 3px 10px rgba(255, 140, 0, 0.5);
}

/* ===== ESPECÍFICO PARA CADA TIPO DE ATRIBUTO ===== */

/* Tamanho (Size) */
.variations-wrapper .attribute-size .swatch,
.variations-wrapper .pa_tamanho .swatch {
    min-width: 100px;
    text-align: center;
}

.variations-wrapper .attribute-size .swatch.selected,
.variations-wrapper .pa_tamanho .swatch.selected {
    background-color: #FF8C00 !important;
    color: white;
}

/* Cor da Moldura (Frame Color) */
.variations-wrapper .attribute-color .swatch,
.variations-wrapper .pa_cor-moldura .swatch {
    min-width: 110px;
    text-align: center;
}

.variations-wrapper .attribute-color .swatch.selected,
.variations-wrapper .pa_cor-moldura .swatch.selected {
    background-color: #FF8C00 !important;
    color: white;
}

/* Acabamento (Finish) */
.variations-wrapper .attribute-finish .swatch,
.variations-wrapper .pa_acabamento .swatch {
    min-width: 95px;
    text-align: center;
}

.variations-wrapper .attribute-finish .swatch.selected,
.variations-wrapper .pa_acabamento .swatch.selected {
    background-color: #FF8C00 !important;
    color: white;
}

/* ===== ALTERNATIVA COM GRADIENTE LARANJA ===== */
/* Se preferir um visual mais moderno: */

/*
.variations-wrapper .swatch.selected {
    background: linear-gradient(135deg, #FF8C00 0%, #FF7700 100%) !important;
    color: white !important;
    border-color: #D66E00 !important;
    box-shadow: 0 2px 10px rgba(255, 140, 0, 0.5);
}
*/

/* ===== ANIMAÇÃO AO CLICAR ===== */
@keyframes clickPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.variations-wrapper .swatch.selected {
    animation: clickPulse 0.4s ease-out;
}

/* Adicione !important em TUDO para forçar a aplicação */

.variations-wrapper .swatch.selected {
    background-color: #FFD700 !important;
    border: 3px solid #000000 !important;
    border-radius: 50px !important;
}