/**
 * Combined Product Options CSS - Color Swatches and Custom Dropdowns
 * 
 * Place this file in: n-theme/includes/woo/products-switchers/product-options.css
 */

/* ---------- COLOR SWATCHES STYLES ---------- */

/* Hide original color dropdowns */
.variations select[id="colour"],
.variations select[id$="_colour"],
.variations select[id*="color"],
.variations select[id$="_color"] {
    display: none !important;
}

/* Color swatch container */
.n-theme-color-swatches {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

/* Individual swatch */
.n-theme-color-swatch {
    width: 36px;
    height: 36px;
    margin: 0 10px 10px 0;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ddd;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Selected swatch */
.n-theme-color-swatch.selected {
    border-color: var(--e-global-color-secondary);
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Hover effect */
.n-theme-color-swatch:hover {
    transform: scale(1.05);
    border-color: #999;
}

/* Tooltip for color name */
.n-theme-color-swatch .tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    margin-bottom: 5px;
    z-index: 100;
}

/* Show tooltip on hover */
.n-theme-color-swatch:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Arrow for tooltip */
.n-theme-color-swatch .tooltip:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Color mappings - These are the common colors */
.n-theme-color-swatch[data-value="Black"] { background-color: #000000; }
.n-theme-color-swatch[data-value="White"] { 
    background-color: #ffffff; 
    border-color: #ccc; 
}
.n-theme-color-swatch[data-value="Red"] { background-color: #ff0000; }
.n-theme-color-swatch[data-value="Blue"] { background-color: #0000ff; }
.n-theme-color-swatch[data-value="Green"] { background-color: #00aa00; }
.n-theme-color-swatch[data-value="Yellow"] { background-color: #ffff00; }
.n-theme-color-swatch[data-value="Purple"] { background-color: #800080; }
.n-theme-color-swatch[data-value="Orange"] { background-color: #ffa500; }
.n-theme-color-swatch[data-value="Pink"] { background-color: #ffc0cb; }
.n-theme-color-swatch[data-value="Brown"] { background-color: #a52a2a; }
.n-theme-color-swatch[data-value="Grey"],
.n-theme-color-swatch[data-value="Gray"] { background-color: #808080; }
.n-theme-color-swatch[data-value="Silver"] { background-color: #c0c0c0; }
.n-theme-color-swatch[data-value="Gold"] { background-color: #ffd700; }
.n-theme-color-swatch[data-value="Chrome"] { background: linear-gradient(to bottom, #f5f5f5 0%, #e5e5e5 25%, #c2c2c2 50%, #9e9e9e 75%, #d6d6d6 100%); }

/* ---------- CUSTOM DROPDOWNS STYLES ---------- */

/* Hide original non-color select dropdowns */
.variations select:not([id="colour"]):not([id$="_colour"]):not([id*="color"]):not([id$="_color"]) {
    display: none !important;
}

/* Custom dropdown wrapper */
.n-theme-custom-dropdown {
    position: relative;
    width: 100%;
    font-family: inherit;
    font-size: 14px;
}

/* Selected option display */
.n-theme-dropdown-selected {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    color: var(--e-global-color-text);
}

.n-theme-dropdown-selected:hover {
    background-color: rgb(255, 255, 255, 0.12);
}

.n-theme-dropdown-selected.active {
    background-color: rgb(255, 255, 255, 0.12);
}

/* Dropdown arrow */
.n-theme-dropdown-selected:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #555;
    transition: transform 0.3s;
}

.n-theme-dropdown-selected.active:after {
    transform: rotate(180deg);
}

/* Dropdown options list */
.n-theme-dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.9);
    border-top: none;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    z-index: 100;
    transition: all 0.3s;
}

.n-theme-dropdown-options.visible {
    max-height: 240px;
    opacity: 1;
    overflow-y: auto;
}

/* Individual option */
.n-theme-dropdown-option {
    padding: 5px 15px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
	color: var(--e-global-color-primary);
}

.n-theme-dropdown-option:hover {
    background-color: var(--e-global-color-text);
}

.n-theme-dropdown-option.selected {
    background-color: var(--e-global-color-text);
    font-weight: 500;
    position: relative;
}

/* Add checkmark to selected option */
.n-theme-dropdown-option.selected:after {
    content: '✓';
    position: absolute;
    right: 15px;
    color: #4CAF50;
}

/* Separator between options */
.n-theme-dropdown-option:not(:last-child) {
    border-bottom: 1px solid var(--e-global-color-text);
}

/* "Choose an option" placeholder styling */
.n-theme-dropdown-placeholder {
    color: var(--e-global-color-text);
    font-style: italic;
}

/* Custom scrollbar for dropdown */
.n-theme-dropdown-options::-webkit-scrollbar {
    width: 6px;
}

.n-theme-dropdown-options::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 5px 5px 0;
}

.n-theme-dropdown-options::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.n-theme-dropdown-options::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* For Firefox */
.n-theme-dropdown-options {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.n-theme-dropdown-options.visible {
    animation: fadeIn 0.2s ease-out;
}

/* Responsiveness for mobile */
@media screen and (max-width: 480px) {
    .n-theme-color-swatch {
        width: 32px;
        height: 32px;
        margin: 0 8px 8px 0;
    }
    
    .n-theme-custom-dropdown {
        max-width: 100%;
    }
    
    .n-theme-dropdown-selected {
        padding: 10px 12px;
    }
    
    .n-theme-dropdown-option {
        padding: 8px 12px;
    }
}