/* 
   KOVOLAZ SWATCHES STYLES
   -------------------------------------------------- 
   This file contains specific styles for product variations.
   It handles the "Metallic" look (Gold, Silver, Copper) and various Black combinations.
   Loaded separately to keep style.css clean.
*/

/*
   FOUC PREVENTION
   Hide the native WooCommerce <select> immediately on all product pages,
   before JS has a chance to run. JS replaces it with swatch buttons.
*/
.single-product .variations select {
    display: none !important;
}

/* 
   A) BLACK BASE VARIANTS
   -------------------------------------------------- 
*/

/* 1. ČERNÁ (Pure Black) */
.swatch-btn.style-black {
    border-color: #333 !important;
}

.swatch-btn.style-black:hover,
.swatch-btn.style-black.active {
    background: #000 !important;
    border-color: #fff !important;
    /* Bright white border for clarity */
    color: #fff !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
}

.swatch-btn.style-black.active {
    transform: translateY(1px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.15) !important;
    /* Extra glow when active */
}

/* 2. ČERNOZLATÁ (Black & Gold) */
.swatch-btn.style-black-gold {
    border-color: #665533 !important;
}

.swatch-btn.style-black-gold:hover,
.swatch-btn.style-black-gold.active {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d00 100%) !important;
    border-color: #FFD700 !important;
    color: #FFD700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4) !important;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    transform: translateY(-2px);
}

.swatch-btn.style-black-gold.active {
    transform: translateY(1px);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.25) !important;
}

/* 3. ČERNOSTŘÍBRNÁ (Black & Silver) */
.swatch-btn.style-black-silver {
    border-color: #555 !important;
}

.swatch-btn.style-black-silver:hover,
.swatch-btn.style-black-silver.active {
    background: linear-gradient(135deg, #222 0%, #111 100%) !important;
    border-color: #E0E0E0 !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(224, 224, 224, 0.4) !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

.swatch-btn.style-black-silver.active {
    transform: translateY(1px);
    box-shadow: 0 0 15px rgba(224, 224, 224, 0.25) !important;
}

/* 4. ČERNOMĚDĚNÁ (Black & Copper) */
.swatch-btn.style-black-copper {
    border-color: #5a3a2a !important;
    font-weight: 500 !important;
    /* Keep standard weight */
}

.swatch-btn.style-black-copper:hover,
.swatch-btn.style-black-copper.active {
    background: linear-gradient(135deg, #2b1d16 0%, #150a05 100%) !important;
    border-color: #d2691e !important;
    color: #ff9e66 !important;
    box-shadow: 0 0 15px rgba(210, 105, 30, 0.5) !important;
    text-shadow: 0 0 5px rgba(210, 105, 30, 0.5);
    transform: translateY(-2px);
    font-weight: 500 !important;
    /* Prevent bold shift on hover */
}

.swatch-btn.style-black-copper.active {
    transform: translateY(1px);
    box-shadow: 0 0 15px rgba(210, 105, 30, 0.4) !important;
}


/* 
   B) PURE METALS (Ingot Style - Bright & Solid)
   -------------------------------------------------- 
*/

/* 1. ZLATÁ (Pure Gold) */
.swatch-btn.style-gold {
    border-color: rgba(197, 160, 89, 0.3) !important;
    /* Subtle gold hint */
    font-weight: 700 !important;
}

.swatch-btn.style-gold:hover,
.swatch-btn.style-gold.active {
    background: linear-gradient(135deg, #fce38a 0%, #f38181 100%) !important;
    /* fallback if metal fails */
    background: linear-gradient(135deg, #FFD700 0%, #C5A059 50%, #B8860B 100%) !important;
    border-color: #fff !important;
    color: #000 !important;
    /* Dark text on bright gold */
    text-shadow: none !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
}

.swatch-btn.style-gold.active {
    transform: translateY(1px);
}

/* 2. STŘÍBRNÁ (Pure Silver) */
.swatch-btn.style-silver {
    border-color: #aaa !important;
    font-weight: 700 !important;
}

.swatch-btn.style-silver:hover,
.swatch-btn.style-silver.active {
    background: linear-gradient(135deg, #fff 0%, #e0e0e0 50%, #d3d3d3 100%) !important;
    border-color: #fff !important;
    color: #000 !important;
    /* Dark text on bright silver */
    text-shadow: none !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-2px);
}

.swatch-btn.style-silver.active {
    transform: translateY(1px);
}

/* 3. MĚDĚNÁ (Pure Copper) */
.swatch-btn.style-copper {
    border-color: rgba(210, 105, 30, 0.3) !important;
    /* Subtle copper hint */
    font-weight: 700 !important;
}

.swatch-btn.style-copper:hover,
.swatch-btn.style-copper.active {
    background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) !important;
    /* fallback */
    background: linear-gradient(135deg, #E9967A 0%, #d2691e 50%, #8b4513 100%) !important;
    border-color: #ffccbc !important;
    color: #000 !important;
    /* Dark text on copper */
    text-shadow: none !important;
    box-shadow: 0 0 20px rgba(210, 105, 30, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px);
}

.swatch-btn.style-copper.active {
    transform: translateY(1px);
}