:root {
            /* Theme Colors */
            --color-primary-red: #CB0808;
            --color-success: #CB0808; /* Will be overridden by red */
            --color-warning: #CB0808;
            --color-info: #CB0808;
            --color-dark: #333333;
            
            /* Background & Surface Colors */
            --color-background-light: #f8f9fa;
            --color-surface: #ffffff;
            --color-white: #ffffff;
            
            /* Text Colors */
            --color-text-dark: #333333;
            --color-text-secondary: #555555;

            /* Utility Colors */
            --color-border: #ced4da;
            --color-backdrop: rgba(0, 0, 0, 0.7);
            --color-disabled-bg: #e9ecef;
            --color-booked-overlay: rgba(220, 53, 69, 0.8);

            /* Effects */
            --shadow-hover: 0 1rem 3rem rgba(0, 0, 0, 0.15);
            --transition-pop: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }

        /* Custom Styles to enhance Bootstrap dark mode and maintain aesthetics */
        * {
            border-radius: 0 !important;
        }
        body {
            /* background-color: var(--color-background-light) !important; */
            color: var(--color-text-dark);
        }
        
        .bg-white {
            background-color: var(--color-surface) !important;
        }
        .text-ci-red {
            color: var(--color-primary-red);
        }
        .page-intro-text {
            font-size: 1.1rem;
            line-height: 1.6;
        }
        .car-card {
            transition: var(--transition-pop);
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }
        .car-card:hover {
            transform: scale(1.03); /* "Pop" effect */
            box-shadow: var(--shadow-hover);
            z-index: 10; /* Ensure card pops over adjacent items */
        }
        .laps-button {
            transition: background-color 0.15s, transform 0.1s;
            font-size: 15px !important;
        }
        .laps-button:hover:not(:disabled) {
            transform: translateY(-1px);
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .hidden {
            display: none !important;
        }
        .category-card {
            transition: var(--transition-pop);
            cursor: pointer;
            overflow: hidden;
        }
        .category-card:hover {
            transform: scale(1.03); /* "Pop" effect */
            box-shadow: var(--shadow-hover);
            z-index: 10;
        }
        .category-card:hover .card-img-top {
            transform: scale(1.05);
        }
        .card-img-top {
            transition: transform 0.3s ease;
            height: auto; 
            aspect-ratio: 16 / 10; 
            object-fit: cover; /* Changed from contain */
        }

        /* Car & Addon card images */
        .car-card-img {
            height: auto;
            aspect-ratio: 16 / 10; 
            object-fit: contain; /* Remains contain as requested */
        }
        .addon-card-img {
            height: auto; 
            aspect-ratio: 16 / 10;
            object-fit: contain; /* Changed from contain */
        }
        .cart-item-img {
            height: auto;
            width: 200px; /* Larger cart image */
            aspect-ratio: 16 / 10;
            object-fit: contain;
        }
        .cart-addon-img {
            height: auto;
            width: 100px; /* Addon image in cart */
            aspect-ratio: 16 / 10;
            object-fit: contain;
        }


        /* Gift Card Preview */
        .gift-card-preview {
            background: #f4f4f4;
            border: 2px dashed var(--color-primary-red);
            padding: 1.5rem;
            text-align: center;
        }
        .gift-card-preview img {
            max-width: 100%;
            height: auto;
            max-height: 200px;
            object-fit: cover;
            margin-bottom: 1rem;
        }
        .gift-card-preview .amount {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--color-primary-red);
        }
        .gift-card-preview .recipient {
            font-size: 1.2rem;
            font-style: italic;
            color: var(--color-text-secondary);
        }

        /* Calendar & Details Modal Styles */
        .calendar-modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--color-backdrop);
            backdrop-filter: blur(5px);
            z-index: 1055;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-y: auto; 
            padding: 1rem; 
        }
        .calendar-modal-content {
            max-width: 384px;
            width: 100%;
            margin: auto;
            transform: translateY(0);
            transition: transform 0.3s ease-out;
            pointer-events: auto; 
            z-index: 1056; 
        }
        .calendar-grid-container {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px; 
        }
        .calendar-day-cell {
            width: 100%;
            aspect-ratio: 1 / 1; 
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .grayscale {
            filter: grayscale(100%);
        }
        .date-fully-booked {
            background-color: var(--color-disabled-bg) !important;
            color: var(--color-text-secondary) !important;
            border-color: var(--color-border) !important;
            text-decoration: line-through;
            cursor: not-allowed;
        }
        .product-unavailable {
            opacity: 0.5;
            pointer-events: none;
            cursor: not-allowed;
        }
        .product-unavailable .card-body {
            position: relative;
        }
        .product-unavailable .card-body::after {
            content: 'Booked';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: var(--color-booked-overlay);
            color: var(--color-white);
            padding: 0.5rem 1rem;
            font-weight: bold;
            z-index: 10;
        }

        /* --- Color Overrides --- */

        /* Danger (Red) */
        .btn-danger {
            background-color: var(--color-primary-red);
            border-color: var(--color-primary-red);
            color: var(--color-white);
        }
        .btn-danger:hover {
            background-color: color-mix(in srgb, var(--color-primary-red) 85%, black);
            border-color: color-mix(in srgb, var(--color-primary-red) 85%, black);
            color: var(--color-white);
        }
        .btn-outline-danger {
            color: var(--color-primary-red);
            border-color: var(--color-primary-red);
        }
        .btn-outline-danger:hover {
            color: var(--color-white);
            background-color: var(--color-primary-red);
            border-color: var(--color-primary-red);
        }
        .text-danger {
            color: var(--color-primary-red) !important;
        }
        .spinner-border.text-danger {
            color: var(--color-primary-red) !important;
        }
        
        /* Add a dedicated class for the red spinner to avoid conflicts */
        .spinner-danger {
            color: var(--color-primary-red) !important;
        }

        /* Center event title within its container */
        .fc-event-title-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .border-danger {
            border-color: var(--color-primary-red) !important;
        }
        aside .border-danger {
             border-top-color: var(--color-primary-red) !important;
        }
        .laps-button.btn-danger {
             background-color: var(--color-primary-red) !important;
        }
        /* Active lap state */
        .laps-button.active-lap {
             background-color: var(--color-primary-red) !important;
             border-color: var(--color-primary-red) !important;
             color: var(--color-white) !important;
        }
        .laps-button:disabled:not(.active-lap) {
            background-color: var(--color-disabled-bg);
            border-color: var(--color-border);
            color: var(--color-text-secondary);
            opacity: 0.7;
        }


        /* Custom Success (Red) */
        .btn-ci-success {
            background-color: var(--color-primary-red);
            border-color: var(--color-primary-red);
            color: var(--color-white);
        }
        .btn-ci-success:hover {
            background-color: color-mix(in srgb, var(--color-primary-red) 85%, black);
            border-color: color-mix(in srgb, var(--color-primary-red) 85%, black);
            color: var(--color-white);
        }
        .btn-ci-success:disabled {
            background-color: var(--color-primary-red);
            border-color: var(--color-primary-red);
            color: var(--color-white);
            opacity: 0.65;
        }
        .text-ci-success {
            color: var(--color-primary-red) !important;
        }
        .bg-danger { /* Keep this for alerts */
            background-color: var(--color-primary-red) !important;
            color: #ffffff !important;
        }
        .alert-danger {
            background-color: var(--color-primary-red);
            color: var(--color-white);
            border-color: var(--color-primary-red);
        }


        /* Dark */
        .btn-dark {
            background-color: var(--color-dark);
            border-color: var(--color-dark);
            color: var(--color-white);
        }
        .btn-dark:hover {
            background-color: color-mix(in srgb, var(--color-dark) 85%, black);
            border-color: color-mix(in srgb, var(--color-dark) 85%, black);
            color: var(--color-white);
        }
        .text-black {
            color: var(--color-text-dark) !important;
        }

        /* Warning & Info (for alerts) */
        .bg-secondary {
            background-color: var(--color-surface) !important;
            color: var(--color-text-dark) !important;
        }
        .text-warning {
            color: var(--color-warning) !important;
        }
        .bg-info {
            background-color: var(--color-info) !important;
            color: var(--color-text-dark) !important;
        }
        .text-secondary{
            color: var(--color-text-dark) !important;
        }

        .btn-ci-red {
            background-color: var(--color-primary-red);
            border-color: var(--color-primary-red);
            color: var(--color-white);
        }
        .btn-ci-red:hover {
            background-color: color-mix(in srgb, var(--color-primary-red) 85%, black);
            border-color: color-mix(in srgb, var(--color-primary-red) 85%, black);
            color: var(--color-white);
        }
        /* .form-check-input{
            background-color: var(--color-primary-red) !important;
        } */

        .bg-light-grey{
            background-color: #E9E9E9 !important;
        }
        .bg-darker-grey{
            background-color: #6E6E6E !important;
        }
        .bg-dark-grey{
            background-color: #C6C6C6 !important;
        }

        .text-light-grey{
            color: #E9E9E9 !important;
        }
        .text-darker-grey{
            color: #6E6E6E !important;
        }
        .text-dark-grey{
            color: #C6C6C6 !important;
        }