/* =========================================
   Custom Styles for MG Detailing
========================================= */

/* 1. Custom Scrollbar for a premium feel */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #000000; /* Deep black track */
}

::-webkit-scrollbar-thumb {
    background: #2B54D1; /* Brand blue thumb */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1e3a8a; /* Darker blue on hover */
}

/* 2. Glassmorphism effect for the service cards */
.glass-card {
    /* Slightly transparent background */
    background: rgba(30, 30, 30, 0.7);
    /* The blur effect behind the card */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 3. Smooth fade-in animation for page load */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, visibility;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
    visibility: visible;
}

/* 4. A subtle floating animation */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

.float-anim {
    animation: float 6s ease-in-out infinite;
}

/* =========================================
   Build Your Detail Calculator Styles
========================================= */

/* Custom styling for the calculator inputs to match the brand */
.calc-input[type="radio"], 
.calc-input[type="checkbox"] {
    /* Uses the brand blue for the checked state in modern browsers */
    accent-color: #2B54D1;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Add a subtle glow when the inputs are focused */
.calc-input[type="radio"]:focus, 
.calc-input[type="checkbox"]:focus {
    outline: 2px solid rgba(43, 84, 209, 0.5);
    outline-offset: 2px;
}

/* Smooth transition for the Copy Button */
#copy-details-btn {
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

#copy-details-btn:active {
    transform: scale(0.98);
}

/* =========================================
   Custom Calendar & Time Slot UI Styles
========================================= */

/* Calendar day grid styling */
.calendar-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    color: #D1D5DB;
}

/* Hover state for available days */
.calendar-day:hover:not(.disabled):not(.selected) {
    background-color: #1F2937; /* Tailwind gray-800 */
    color: #ffffff;
}

/* Selected day styling */
.calendar-day.selected {
    background-color: #2B54D1;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(43, 84, 209, 0.5);
}

/* Disabled/Past day styling */
.calendar-day.disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

/* Indicator for today's date */
.calendar-day.today {
    border: 1px solid rgba(43, 84, 209, 0.6);
}

/* Time slot button styling */
.time-slot {
    background-color: #121212;
    border: 1px solid #374151; /* Tailwind gray-700 */
    color: #D1D5DB;
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

/* Hover state for time slots */
.time-slot:hover:not(.disabled):not(.selected) {
    border-color: #2B54D1;
}

/* Selected time slot styling */
.time-slot.selected {
    background-color: #2B54D1;
    border-color: #2B54D1;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(43, 84, 209, 0.4);
}

/* Disabled time slot styling (when not enough time before close) */
.time-slot.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Thinner custom scrollbar for the time slots dropdown area */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #374151; /* Tailwind gray-700 */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #2B54D1;
}