/* Frontend Booking Form Styles */
.manjul-csb-booking-form {
    margin: 30px auto;
    padding: 20px;
    display: flex;
    gap: 30px;
}

.manjul-csb-booking-form form {
    flex: 1;
}

.booking-step {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.booking-step h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}

/* Car Types Grid */
.car-types-grid,
.services-grid {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    --columns: 3;
}

.car-type-option, .service-option {
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-basis: calc(100% / var(--columns) - 2em*(var(--columns) - 1) / var(--columns)) !important;
}

.car-type-option:hover,
.service-option:hover {
    border-color: #007cba;
    background: #f8f9fa;
}

.car-type-option input[type="radio"],
.service-option input[type="radio"] {
    display: none;
}

.car-type-option .car-type-info{
    padding: 0 15px 15px 15px;
}

.car-type-option label,
.service-option label {
    display: block;
    cursor: pointer;
}

.car-type-option input[type="radio"] + label,
.service-option input[type="radio"] + label {
    padding: 0;
    width: 100%;
    height: 100%;
}
.car-type-option input[type="radio"] + label:before,
.service-option input[type="radio"] + label:before,
.car-type-option input[type="radio"]:checked + label:before,
.service-option input[type="radio"]:checked + label:before  {
    display: none;
}

.car-type-option input[type="radio"]:checked + label,
.service-option input[type="radio"]:checked + label {
    background: #007cba;
    width: 100%;
}

.service-option input[type="radio"] + label{
    padding: 15px;
}

.car-type-option input[type="radio"]:checked + label,
.service-option input[type="radio"]:checked + label,
.car-type-option input[type="radio"]:checked + label h4,
.service-option input[type="radio"]:checked + label h4 {
    color: #ffffff;
}

/* Date Time Selection */
.date-time-selection {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

#booking-date {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.time-slots {
    border-radius: 4px;
}

.time-slots input[type="radio"] + label:before {
    display: none;
}
#available-time-slots-wrapper {
    border: 1px solid #ddd;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
}


.time-slot input[type="radio"] + label {
    display: block;
    border-radius: 4px;
    line-height: inherit;
    padding: 0;
    cursor: pointer;
    width: 100%;
}
.time-slot input[type="radio"]:checked + label {
    background: #007cba;
    color: #fff;
}

.time-slot {
    background: #f0f0f0;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.time-slot:hover {
    background: #f8f9fa;
    border-color: #007cba;
}

.time-slot.selected {
    background: #007cba;
    color: #fff;
    border-color: #007cba;
}

/* Customer Details */
.customer-details input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Booking Summary */
.booking-summary {
    width: 300px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    position: sticky;
    top: 20px;
    height: fit-content;
}

.booking-summary h4 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

/* Navigation Buttons */
.next-step,
.prev-step,
.submit-booking {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.next-step,
.submit-booking {
    background: #007cba;
    color: #fff;
    float: right;
}

.prev-step {
    background: #6c757d;
    color: #fff;
}

.next-step:hover,
.submit-booking:hover {
    background: #005a87;
}

.prev-step:hover {
    background: #545b62;
}

/* Loading State */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

.loader {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    animation: l26 2s infinite;
}
.loader::before {
    content:"Loading...";
}

@keyframes l26{
    0%,10%  {transform:perspective(200px) rotateX(0)      rotateY(0)      scale(1)}
    30%,36% {transform:perspective(200px) rotateX(180deg) rotateY(0)      scale(1)}
    63%,69% {transform:perspective(200px) rotateX(180deg) rotateY(180deg) scale(1)}
    90%,100%{transform:perspective(200px) rotateX(180deg) rotateY(180deg) scale(-1)}
}

/* Error Messages */
.error-message {
    color: #dc3545;
    margin-top: 5px;
    font-size: 0.9em;
}

/* Style for disabled dates with a red cross */
.ui-datepicker-calendar .ui-state-default{
    text-align: center;
}
.ui-datepicker-unselectable.ui-state-disabled {
    position: relative;
    color: #d9534f; /* Bootstrap's danger color */
    background-color: #f9f9f9;
}

.ui-datepicker-unselectable.ui-state-disabled:after {
    content: "\00D7"; /* Unicode for a cross mark */
    color: #d9534f;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    pointer-events: none;
}

.button-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.button-container .prev-step {
    margin-right: auto;
}

.button-container .next-step {
    margin-left: auto;
}

form .next-step,
form .prev-step,
form .submit-booking {
    margin-top: 10px;
    display: block !important;
    padding: 15px 30px !important;
}

/* Responsive styles for mobile devices */
@media (max-width: 768px) {
    .manjul-csb-booking-form {
        flex-direction: column;
        gap: 20px;
    }

    body{
        min-height: 100vh;
    }
    .booking-summary>h4{
        text-align: center;
    }
    .booking-summary {
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        width: 100%;
        background: #f8f9fa;
        padding: 10px;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        transform: translateY(0);
        z-index: 1000;
    }

    .booking-summary.collapsed {
        transform: translateY(calc(100% - 40px));
    }

    .booking-summary>h4::after {
        content: '▼'; /* Downward caret */
        display: inline-block;
        margin-left: 10px;
        transition: transform 0.3s ease;
    }
    
    .booking-summary.collapsed>h4::after {
        transform: rotate(180deg); /* Rotate to point upwards when collapsed */
    } 

    .summary-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .summary-image {
        text-align: center;
        margin-bottom: 10px;
    }

    .summary-details,
    .service-summary,
    .datetime-summary {
        text-align: left;
    }

    .service-summary-details {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .date-time-selection {
        gap: 15px;
    }

    #available-time-slots-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .time-slot input[type="radio"] + label {
        padding: 10px;
    }

    .car-types-grid, .services-grid{
        --columns: 1;
    }

    .car-type-option input[type="radio"] + label {
        display: flex;
        align-items: center;
    }
    .car-type-option input[type="radio"] + label .description {
        display: none;
    }
    .car-type-option input[type="radio"]:checked + label h4,
    .car-type-option input[type="radio"] + label h4 {
        margin-top: 0;
    }

    .car-type-image {
        flex: 2;
    }

    .car-type-info {
        flex: 3;
    }
}

.time-slots-message {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 10px 15px;
    margin: 10px 0;
    color: #495057;
    font-size: 14px;
    text-align: center;
}

.time-slots-message.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 10px 15px;
    margin: 10px 0;
    color: #721c24;
    font-size: 14px;
    text-align: center;
}

textarea#notes {
    border: 1px solid #c9c9c9;
    width: 100%;
}

.form-section {
    background: #fff;
    padding: 15px;
    border-radius: 11px;
    margin-bottom: 15px;
}

.manjul-csb-booking-form .form-section h3 {
    margin-top: 0;
}