/* Commission Page Specific Styles */

:root {
    --rose-gold: #E0C3B2;
    --ivory: #F9F6F0;
    --charcoal-light: #2A2A2A;
}

/* Custom Scrollbar for Luxury Feel */




/* Custom Range Slider Styling */
input[type="range"]::-webkit-slider-runnable-track {
    background: rgba(196, 160, 89, 0.1);
    height: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    height: 16px;
    width: 16px;
    background: var(--gold-dark);
    border-radius: 0;
    /* Strict Royal Rule */
    margin-top: -7px;
    transition: all 0.3s ease;
}

input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
    box-shadow: 0 0 15px var(--gold-dim);
}

/* Hover Effects for Cards */
.aspect-square::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
    transition: all 0.5s ease;
}

.aspect-square:hover::after {
    inset: 15px;
    border-color: var(--gold-dark);
}

/* Selection Buttons */
button.active-selection {
    border-color: var(--gold-dark);
    background-color: rgba(196, 160, 89, 0.1);
    color: var(--gold-light);
}

/* Calendar Styling Adjustments */
.calendar-day-active {
    background-color: var(--gold-dark);
    color: white;
}

.calendar-day-today {
    box-shadow: inset 0 0 0 1px var(--gold-dark);
}

/* Smooth Transitions */
.transition-luxury {
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Panel Styling matching Index Cards */
.glass-panel {
    background: #151515;
    border: 1px solid rgba(196, 160, 89, 0.3);
}

/* Hero Section Refined Shadow/Gradient */
#hero-image-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--ivory) 0%, transparent 40%);
    z-index: 10;
}

/* Responsive Handling */
@media (max-width: 768px) {
    h1 {
        font-size: 3.5rem;
    }
}



/* Budget Slider Styling */
#budget-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    background: rgba(196, 160, 89, 0.1);
    outline: none;
    transition: all 0.3s;
}

#budget-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--lightgold);
    border: 1px solid var(--subgold);
    cursor: pointer;
    transition: all 0.3s;
    margin-top: -5px;
    /* Centers thumb on 2px track */
}

#budget-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--lightgold);
    border: 1px solid var(--subgold);
    cursor: pointer;
    transition: all 0.3s;
}

#budget-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 15px rgba(230, 200, 136, 0.4);
    transform: scale(1.2);
}

/* 
   Polyfills for Tailwind Config Opacity Variants 
   (Replacing removed JS config with CSS specific overrides)
*/

/* Background Opacities */
.bg-gold-dark\/5 {
    background-color: rgba(196, 160, 89, 0.05);
}

.bg-gold\/5 {
    background-color: rgba(230, 200, 136, 0.05);
}

.bg-gold\/10 {
    background-color: rgba(230, 200, 136, 0.1);
}

.bg-rose-gold\/5 {
    background-color: rgba(224, 195, 178, 0.05);
}

/* Text Opacities */
.text-gold\/60 {
    color: rgba(230, 200, 136, 0.6);
}

.text-gold\/70 {
    color: rgba(230, 200, 136, 0.7);
}

.text-gold-dark\/30 {
    color: rgba(196, 160, 89, 0.3);
}

.text-gold-dark\/60 {
    color: rgba(196, 160, 89, 0.6);
}

/* Border Opacities (Supplementary to common.css) */
.border-gold\/10 {
    border-color: rgba(230, 200, 136, 0.1);
}

.border-gold-dark\/30 {
    border-color: rgba(196, 160, 89, 0.3);
}

/* Interactive States */
.accent-gold-dark {
    accent-color: var(--gold-dark);
}

.focus\:border-gold-dark:focus {
    border-color: var(--gold-dark);
}

.placeholder\:text-gold\/20::placeholder {
    color: rgba(230, 200, 136, 0.2);
}

.placeholder\:text-gold-dark\/30::placeholder {
    color: rgba(196, 160, 89, 0.3);
}

/* Metal Selection Ring Logic (Replicating Tailwind Ring Utilities manually) */
.metal-btn .ring-2 {
    /* Default: Transparent ring */
    box-shadow: 0 0 0 2px transparent, 0 0 0 4px transparent;
    transition: all 0.3s ease;
}

/* Active/Hover State: Gold Ring with Charcoal Offset */
.metal-btn.active .ring-2,
.metal-btn:hover .ring-2 {
    box-shadow: 0 0 0 2px var(--charcoal), 0 0 0 4px rgba(230, 200, 136, 0.5);
}