/* Border Radius Previewer specific styles */

/* Different gradient for this tool page */
body {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 50%, #e0e7ff 100%); /* Light Sky -> Light Blue -> Light Indigo */
}

/* Style the tool title with a different gradient */
.gradient-text-brp {
    background: linear-gradient(to right, #0ea5e9, #3b82f6, #6366f1); /* Sky -> Blue -> Indigo */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.25rem;
}

/* Slider Thumb Styling */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #4f46e5; /* Indigo-600 */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #4f46e5; /* Indigo-600 */
    border-radius: 50%;
    cursor: pointer;
    border: none;
     transition: background-color 0.15s ease-in-out;
}

.slider:hover::-webkit-slider-thumb {
     background: #4338ca; /* Darker Indigo */
}
.slider:hover::-moz-range-thumb {
     background: #4338ca; /* Darker Indigo */
}

/* Preview Box */
.preview-box {
    /* Tailwind handles background, width, height */
    /* Transition applied in HTML */
}

/* Code Output Area */
.code-output-container code {
    font-family: 'Fira Code', monospace;
}