/* Ride Booking Page Styles */

.create-ride-section {
    position: relative;
    padding: 0;
    overflow: hidden;
    background-color: #f8f9fa;
    height: calc(100vh - 85px); // Fixed height for full screen feel

    .map-container-full {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;

        #map {
            width: 100%;
            height: 100% !important;
        }
    }

    .ride-overlay-wrapper {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none; // Allow clicks on the map
        padding: 20px;

        .form-card-wrapper {
            max-width: 480px; // Increased width as requested
            width: 100%;
            pointer-events: auto; // Re-enable interaction
        }

        .side-cards-wrapper {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: auto;
        }
    }

    .form-card-overlay {
        background: rgba(var(--white), 0.98);
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(var(--black), 0.05);
        max-height: calc(100vh - 150px);
        display: flex;
        flex-direction: column;

        body.dark & {
            background-color: #030712;
            color: white;
        }

        .dashboard-title {
            padding: 15px 20px;
            border-bottom: 1px solid #f0f0f0;
            body.dark & {
                border-color: rgba(var(--white), 0.2) !important;
            }
            h3 {
                font-size: 18px;
                font-weight: 600;
                margin: 0;
            }
        }

        .form-content-scroll {
            overflow-y: auto;
            padding: 20px;

            &::-webkit-scrollbar {
                width: 4px;
            }
            &::-webkit-scrollbar-track {
                background: #f1f1f1;
            }
            &::-webkit-scrollbar-thumb {
                background: #ddd;
                border-radius: 10px;
            }
        }
    }

    .info-card {
        background: rgba(var(--white), 0.98);
        padding: 10px 15px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(var(--black), 0.05);

        i {
            font-size: 20px;
            color: rgba(var(--primary-color), 1);
        }

        .detail {
            .label {
                display: block;
                font-size: 11px;
                color: #889;
                text-transform: uppercase;
                font-weight: 600;
            }
            .value {
                display: block;
                font-size: 14px;
                font-weight: 700;
                color: #222;
            }
        }
    }

    // Vehicle Slider & Box Styles
    .vehicle-slider-box {
        margin: 0 0;
        overflow: hidden;
        padding: 5px;
        padding-bottom: 20px;

        .vehicle-type-slider-box {
            display: flex;


            &::-webkit-scrollbar {
                height: 4px;
            }
            &::-webkit-scrollbar-track {
                background: #f1f1f1;
            }
            &::-webkit-scrollbar-thumb {
                background: #888;
                border-radius: 10px;
            }
        }

        .vehicles-box {
            border: 1px solid #ddd;
            border-radius: 12px;
            position: relative;
            padding: 8px;
            background-color: #fff;
            transition: all 0.3s ease;
            width: 130px; // Fixed width for horizontal scroll
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            cursor: pointer;

            body.dark & {
                background-color: #373737;
                border-color: rgba(255, 255, 255, 0.12);
                color: white;
            }

            &:hover {
                border-color: #aaa;
            }

            &:has(.form-check-input:checked) {
                border: 2px solid #030712;
                padding: 7px;
                background-color: rgba(3, 7, 18, 0.02);

                body.dark & {
                    background-color: rgb(55, 55, 55);
                    border-color: white !important;
                }
                .vehicles-image {
                    background-color: rgba(3, 7, 18, 0.05);
                }
            }

            .form-check-input {
                position: absolute;
                inset: 0;
                z-index: 1;
                margin: 0;
                opacity: 0;
                cursor: pointer;
            }

            .vehicles-image {
                padding: 12px;
                border-radius: 8px;
                background-color: #f8f8f8;
                height: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 8px;

                img {
                    max-width: 100%;
                    max-height: 100%;
                    object-fit: contain;
                }
            }

            .vehicles-details {
                text-align: left;
                display: flex;
                flex-direction: column;
                gap: 4px;

                .name-price {
                    h5 {
                        font-size: 13px;
                        font-weight: 600;
                        margin: 0;
                        color: #111;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                            body.dark & {
                                color: white;
                            }

                        &.price {
                            font-size: 14px;
                            color: #030712;
                               body.dark & {
                                color: white;
                            }
                        }
                    }
                }

                .info-btn {
                    margin-top: 5px;
                    width: 100%;
                    background-color: #030712;
                    color: #fff;
                    border: none;
                    padding: 5px 0;
                    font-size: 12px;
                    font-weight: 500;
                    border-radius: 5px;
                    z-index: 2;
                    position: relative;

                    &:hover {
                        background-color: #333;
                    }
                }
            }
        }
    }

    // Fix for Google Maps Directions/Markers
    .gm-style-iw {
        pointer-events: auto !important;
    }
}

@media (max-width: 991px) {
    .create-ride-section {
        height: auto;
        display: flex;
        flex-direction: column;

        .map-container-full {
            position: relative;
            height: 350px;
        }

        .ride-overlay-wrapper {
            position: relative;
            inset: unset;
            padding: 15px;
            pointer-events: auto;

            .form-card-wrapper {
                max-width: 100%;
            }

            .side-cards-wrapper {
                position: relative;
                top: unset;
                right: unset;
                flex-direction: row;
                margin-bottom: 15px;
            }
        }

        .form-card-overlay {
            max-height: none;
        }
    }
}