/**
 * @file assets/css/color-swatches.css
 * @ai-rules Color swatch styling only. Loaded by Joalpe_Color_Swatches class.
 *           Color definitions at bottom - add new colors there.
 */

/* Hide color dropdowns when swatches are rendered */
.variations select[name^="attribute_"][name*="kleur"],
.variations select[name^="attribute_"][name*="color"] {
    display: none;
}

/* Reset variations link styling in orange SKU bar */
.single-product .woocommerce-variation .reset_variations {
    display: inline-block;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #ea580c;
    text-decoration: none;
    border: 1px solid rgba(251, 146, 60, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    margin-left: 8px;
}

.single-product .woocommerce-variation .reset_variations:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.3);
    text-decoration: none;
}

/* Variation details flex container for SKU and reset button */
.single-product .woocommerce-variation .variation-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.single-product .woocommerce-variation .reset-variations-wrapper {
    margin: 0;
    flex-shrink: 0;
}

/* Base color swatch styles - apply everywhere */
.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* Selected state - base (archive/product cards) */
.color-swatch.selected {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 2px #ea580c;
    transform: scale(1.06);
    z-index: 1;
}

/* Single product page: larger, calmer selection state */
.single-product .color-swatches-container:not(.archive-swatches) .color-swatch {
    width: 40px;
    height: 40px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.single-product .color-swatches-container:not(.archive-swatches) .color-swatch:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(15,23,42,0.18);
}

.single-product .color-swatches-container:not(.archive-swatches) .color-swatch.selected {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 2px #000000;
    transform: scale(1.03);
}

/* Archive swatches */
.archive-swatches .color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.archive-swatches .color-swatch:hover {
    transform: scale(1.05);
}

/* +N more indicator */
.archive-swatches .swatch-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 8px;
    line-height: 1;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.archive-swatches .swatch-more:hover {
    background: #f9fafb;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.archive-swatches .swatch-more.expanded::before {
    content: '−';
}

.archive-swatches .swatch-more.expanded {
    color: #ea580c;
    box-shadow: inset 0 0 0 1px #ea580c;
}

/* Color definitions - only for colors without specific CSS classes */
.color-swatch.wit, .color-swatch.white { 
    background-color: #FFFFFF; 
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.color-swatch.zwart, .color-swatch.black { background-color: #000000; }

.color-swatch.grijs, .color-swatch.gray, .color-swatch.grey { background-color: #6b7280; }

.color-swatch.zilver, .color-swatch.silver { background-color: #d1d5db; }

.color-swatch.goud, .color-swatch.gold { background-color: #facc15; }

.color-swatch.rood, .color-swatch.red { background-color: #ef4444; }

.color-swatch.groen, .color-swatch.green { background-color: #16a34a; }

.color-swatch.blauw, .color-swatch.blue { background-color: #2563eb; }

.color-swatch.geel, .color-swatch.yellow { background-color: #facc15; }

.color-swatch.oranje, .color-swatch.orange { background-color: #f97316; }

.color-swatch.paars, .color-swatch.purple { background-color: #9333ea; }

.color-swatch.roze, .color-swatch.pink { background-color: #f472b6; }

.color-swatch.bruin, .color-swatch.brown { background-color: #b45309; }

/* Dark variants */
.color-swatch[class*="donkerrood"], .color-swatch[class*="donker-rood"] { background-color: #991b1b; }
.color-swatch[class*="donkerblauw"], .color-swatch[class*="donker-blauw"] { background-color: #1e3a8a; }
.color-swatch[class*="donkergroen"], .color-swatch[class*="donker-groen"] { background-color: #14532d; }
.color-swatch[class*="donkergrijs"], .color-swatch[class*="donker-grijs"] { background-color: #374151; }

/* Light variants */
.color-swatch[class*="lichtblauw"], .color-swatch[class*="licht-blauw"] { background-color: #93c5fd; }
.color-swatch[class*="lichtgroen"], .color-swatch[class*="licht-groen"] { background-color: #86efac; }
.color-swatch[class*="lichtgrijs"], .color-swatch[class*="licht-grijs"] { background-color: #d1d5db; }
.color-swatch[class*="lichtroze"], .color-swatch[class*="licht-roze"] { background-color: #fbcfe8; }

/* Special colors */
.color-swatch.transparant, .color-swatch.transparent { 
    background: repeating-linear-gradient(45deg, #ffffff, #ffffff 3px, #f5f5f5 3px, #f5f5f5 6px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.color-swatch.multi, .color-swatch.multicolor { 
    background: conic-gradient(#ef4444 0deg 60deg, #eab308 60deg 120deg, #22c55e 120deg 180deg, #06b6d4 180deg 240deg, #3b82f6 240deg 300deg, #a855f7 300deg 360deg);
}

/* Archive layout */
.archive-swatches.color-swatches-container {
    padding: 0;
    margin: 0;
    line-height: 1;
}
.archive-swatches .swatch-nav { display: none; }
.archive-swatches .color-swatches { padding: 0; }
.archive-swatches .swatches-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
    max-height: 24px;
    overflow: hidden;
}

/* Expanded state - wrap to second row within card, not overflow */
.archive-swatches .swatches-wrapper.is-expanded {
    flex-wrap: wrap !important;
    max-height: none !important;
    overflow: hidden !important;
    gap: 4px;
}

/* Product card archive swatches - smaller, compact */
.joalpe-product-card .archive-swatches .color-swatch {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.joalpe-product-card .archive-swatches .color-swatch:hover {
    transform: scale(1.1);
    box-shadow: inset 0 0 0 1px #fb923c;
}
.joalpe-product-card .archive-swatches .swatch-more {
    width: 16px;
    height: 16px;
    font-size: 8px;
    flex-shrink: 0;
}

/* Single product layout - only for variation selection, NOT archive swatches (related products) */
.single-product .color-swatches-container:not(.archive-swatches) {
    padding: 0;
}

.single-product .color-swatches-container:not(.archive-swatches) .color-swatches {
    overflow: visible;
    padding-top: 0.25rem;
}

.single-product .color-swatches-container:not(.archive-swatches) .swatches-wrapper {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 10px;
}

/* Wood grain textures for wood types */
.color-swatch.beuken,
.color-swatch.essen,
.color-swatch.onbewerkt {
    position: relative;
    background-size: 200% 100%;
    background-position: 0 0;
}

/* Beech wood - light yellowish wood with subtle grain */
.color-swatch.beuken {
    background-color: #E8D9A8;
    background-image: 
        linear-gradient(90deg, rgba(210, 180, 120, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, #E8D9A8 0%, #F0E4B8 30%, #E5D5A0 60%, #EFE2B5 100%);
    background-size: 4px 100%, 100% 100%;
}

/* Ash wood - light wood with visible vertical grain lines */
.color-swatch.essen {
    background-color: #E8D4B8;
    background-image: 
        repeating-linear-gradient(90deg, 
            transparent 0px, 
            transparent 2px, 
            rgba(180, 140, 100, 0.25) 2px, 
            rgba(180, 140, 100, 0.25) 3px,
            transparent 3px,
            transparent 6px
        ),
        linear-gradient(180deg, #E8D4B8 0%, #F0DCC0 50%, #E5D0B0 100%);
}

/* Unfinished/raw - particleboard/chipboard speckled texture */
.color-swatch.onbewerkt {
    background-color: #9C7B5C;
    background-image: 
        radial-gradient(circle at 20% 30%, #B8956E 1px, transparent 1px),
        radial-gradient(circle at 60% 70%, #8B6D4C 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, #C4A57A 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, #7A5D42 1px, transparent 1px),
        radial-gradient(circle at 10% 60%, #A68860 1px, transparent 1px),
        radial-gradient(circle at 90% 50%, #B08558 1px, transparent 1px),
        radial-gradient(circle at 50% 40%, #8C6E50 1px, transparent 1px),
        radial-gradient(circle at 30% 10%, #C2A070 1px, transparent 1px);
    background-size: 8px 8px, 7px 7px, 9px 9px, 6px 6px, 8px 8px, 7px 7px, 9px 9px, 6px 6px;
}

/* Crystal effect - light shimmer */
.color-swatch.cristal {
    position: relative;
    background: linear-gradient(135deg, #E0FFFF 0%, #B0E0E6 50%, #E0FFFF 100%);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
}

.color-swatch.cristal::before {
    content: '';
    position: absolute;
    inset: 8% 8%;  
    border-radius: 50%;
    background: #000000;  
    border: 4px solid var(--joalpe-strap);  
    z-index: 2;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Transparent effect - checkerboard pattern */
.color-swatch.transparant {
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0),
                linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Variation table swatches - smaller size */
.joalpe-variation-table .color-swatch {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    vertical-align: middle;
    margin-right: 6px;
}

/*
 * Custom swatches: black basket + colored handle (strap) line.
 * Important: some swatches can receive inline background-color via the admin color mapper.
 * We intentionally override that for these 2 special combined colors.
 */
.color-swatch.zwart-hengsel-groen,
.color-swatch.zwart-hengsel-donkerblauw {
    /* Clip the strap inside the circle */
    overflow: hidden;
    position: relative;
    z-index: 0;

    /*
     * Deep black base with a tiny highlight (more premium than flat #000).
     * Use longhands + !important so we override any inline `background-color:` coming from the color mapper.
     */
    background-color: #000000 !important;
    /* Subtle depth + tiny texture so the swatch reads like a real plastic basket */
    background-image:
        radial-gradient(120% 120% at 28% 22%, #2b2b2b 0%, #0b0b0b 42%, #000000 78%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, rgba(255,255,255,0.00) 1px 4px);
    background-repeat: no-repeat, repeat;
    background-size: cover, 12px 12px;

    /* Slight inner depth so the strap reads as a separate layer */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 -6px 10px rgba(0, 0, 0, 0.55);
}

.color-swatch.zwart-hengsel-groen { --joalpe-strap: #22c55e; }  /* Brighter green */
.color-swatch.zwart-hengsel-donkerblauw { --joalpe-strap: #3b82f6; }  /* Brighter blue */

/*
 * Small “handle color” indicator dot inside the swatch (top-right).
 * This stays entirely inside the circle and works on both 14–16px archive swatches and 40px single swatches.
 */
.color-swatch.zwart-hengsel-groen::before,
.color-swatch.zwart-hengsel-donkerblauw::before {
    content: '';
    position: absolute;
    inset: 11% 11%;  /* Further from edges */
    border-radius: 50%;
    background: #000000;  /* Black center */
    border: 3px solid var(--joalpe-strap);  /* 3px colored ring */
    z-index: 2;
    /* Subtle inner shadow for contrast instead of white outline */
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8);
}

/* Disabled state */
.color-swatch.disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.5);
}

.color-swatch.disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 6px);
    pointer-events: none;
    border-radius: 50%;
}