/* Styles for the custom input appearance */
.mega-custom-color-input-wrapper {
    display: inline-flex; 
    align-items: center;
    border: 1px solid #8c8f94;
    border-radius: 4px; 
    background-color: white;
    cursor: pointer;
    height: 28px; 
    overflow: hidden;
    width: auto; 
    box-sizing: border-box;
}
.mega-custom-color-input-swatch {
    width: 30px;
    height: 100%; 
    flex-shrink: 0;
    border-radius: 0; 
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 10px 10px; 
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    position: relative; 
}
.mega-custom-color-input-swatch-color { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-right: 1px solid #8c8f94;
    align-content: center;
    text-align: center;
    font-size: 10px;
}
.mega-color-picker-input-text[type=text] { 
    flex-grow: 1; border: none; outline: none;
    padding: 8px 12px 8px 8px; 
    font-size: 14px; 
    background-color: transparent;
    height: 100%; color: #333; 
    box-sizing: border-box; min-width: 100px; 
}
.mega-color-picker-input.mega-plugin-enhanced {
    display: none !important; 
}


/* Picker styles */
.mega-color-picker-container {
    position: absolute; z-index: 1000; border: 1px solid #cccccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px;
    padding: 15px; background-color: white; 
    width: 280px; box-sizing: border-box; display: none;
}
.mega-color-picker-palette, .mega-css-var-palette { 
    margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eeeeee;
    display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px;
}
.mega-css-var-palette { 
    margin-top: 5px; 
     border-top: 1px solid #eeeeee; 
     padding-top: 10px;
}
.mega-palette-swatch, .mega-css-var-palette-swatch { 
    width: 20px; height: 20px; border-radius: 4px; cursor: pointer;
    border: 1px solid #dddddd; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
.mega-color-picker-main {
    width: 100%; height: 150px; cursor: crosshair; border-radius: 4px;
    position: relative; border: 1px solid #e0e0e0; background-color: #fff; 
}
.mega-color-picker-hue-slider {
    width: 100%; height: 20px; cursor: pointer; border-radius: 4px;
    border: 1px solid #e0e0e0; margin-top:10px; 
}
.mega-color-picker-opacity-slider-container {
    margin-top: 10px; padding: 5px 0; border-radius: 4px;
    display: flex; align-items: center;
}
.mega-color-picker-opacity-slider {
    flex-grow: 1; height: 10px; cursor: pointer; -webkit-appearance: none; appearance: none;
    background-color: #eeeeee; /* Fallback background */
    border-radius: 5px; outline: none; margin-right: 8px; 
    border: 1px solid #ddd; /* Add a light border for definition */
}
.mega-color-picker-opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
    background: #5A67D8; cursor: pointer; border-radius: 50%;
    border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.mega-color-picker-opacity-slider::-moz-range-thumb {
    width: 18px; height: 18px; background: #5A67D8; cursor: pointer;
    border-radius: 50%; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.mega-color-picker-value-input-wrapper { 
     padding: 0; display: flex; align-items: center; margin-top: 12px;
}
.mega-color-picker-preview {
    width: 50px; height: 50px; border-radius: 4px; border: 1px solid #e0e0e0;
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    margin-right: 10px; 
}
.mega-color-picker-preview-color { width: 100%; height: 100%; border-radius: 4px; }
.mega-color-picker-value-input { 
    padding: 8px; border: 1px solid #cccccc; border-radius: 4px;
    flex-grow: 1; font-size: 14px; height: 38px; box-sizing: border-box;
}
.mega-color-picker-opacity-display {
    font-size: 12px; color: #555; width: 40px; text-align: right; flex-shrink: 0;
}
.mega-color-picker-selector-dot {
    width: 10px; height: 10px; border-radius: 50%; border: 2px solid white;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5); position: absolute;
    pointer-events: none; transform: translate(-50%, -50%);
}
.mega-hue-slider-indicator {
    width: 3px; 
    height: 100%; 
    background-color: white; 
    border: 1px solid #555;
    box-shadow: 0 0 1px rgba(0,0,0,0.5);
    position: absolute;
    pointer-events: none; 
    transform: translateX(-50%); 
    top: 0; 
    box-sizing: border-box; 
}