/* css/color-picker.css */

#color-input-cp {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    /* Remove default background */
    border: none;
    /* Remove default border */
    padding: 0;
    /* Remove default padding */
    cursor: pointer;
}

/* Style the color input's "swatch" part */
#color-input-cp::-webkit-color-swatch-wrapper {
    padding: 0;
}

#color-input-cp::-webkit-color-swatch {
    border: 2px solid #cbd5e1;
    /* gray-300, for a subtle border around the color */
    border-radius: 50%;
    /* Make it circular */
}

#color-input-cp::-moz-color-swatch {
    /* For Firefox */
    border: 2px solid #cbd5e1;
    border-radius: 50%;
}


#color-preview-cp {
    /* The text inside will be replaced by the color */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    /* Default text color for preview, will be adjusted by JS */
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* Make text readable on various backgrounds */
    transition: background-color 0.3s ease;
}

.copy-btn-cp {
    min-width: 80px;
    /* Ensure copy buttons have a decent width */
}

/* Responsive adjustments */
@media (max-width: 640px) {
    h1 {
        font-size: 1.8rem;
    }

    #color-input-cp {
        width: 8rem;
        /* 128px */
        height: 8rem;
        /* 128px */
    }

    .grid.md\:grid-cols-2 {
        /* Target the main grid for picker and values */
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

    #color-preview-cp {
        margin-bottom: 1.5rem;
        /* Add space below preview when stacked */
    }
}