.taxi-booking-plugin {

display: flex; /* Flexbox layout */

justify-content: center; /* Center the form and map */

align-items: flex-start; /* Align items at the start */

width: 60vw; /* Overall width */

margin: 0 auto; /* Center horizontally */

padding: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

/*border: 2px solid #234896;*/

gap: 30px;

}



.taxi-booking-plugin * {

margin: 0;

padding: 0;

box-sizing: border-box;

}



.taxi-booking-plugin #map {

height: 350px;

width: 26vw; /* 26vw Adjust map width */

background-color: lightblue; /* Map background for visualization */

border: 2px solid #234896; /* Add border */

margin-top: 70px;

}



.taxi-booking-plugin h2 {

text-align: center;

margin-bottom: 20px;

}



.taxi-booking-plugin .form-section {

flex: 1;

width: 28vw; /* Adjust form width */

margin-bottom: 20px;

}



.taxi-booking-plugin .form-section h3 {

margin-bottom: 10px;

font-size: 1.5em; /* Smaller heading size */

text-align:center;

}



.taxi-booking-plugin .form-section label {

font-size: 0.85em; /* Smaller label text */

}



.taxi-booking-plugin .form-section input

{

width: 100%;

padding: 8px; /* Reduced padding */

margin-bottom: 1px;

border: 1px solid #ddd;

border-radius: 5px !important;

font-size: 0.85em; /* Adjust input font size */

}

.taxi-booking-plugin .form-section select {

width: 100%;

padding: 8px; /* Reduced padding */

margin-bottom: 8px;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 0.85em; /* Adjust input font size */

}



.taxi-booking-plugin .form-section button {

padding: 8px 16px; /* Smaller button size */

background: #234896;

color: #fff;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 0.9em; /* Adjust button font size */

}



.taxi-booking-plugin .form-section button:hover {

background: #FED700;

border: 3px solid blue;

color: black;

}



.taxi-booking-plugin .fare-display {

font-size: 1.2em;

margin-top: 10px;

text-align: center;

color: #333;

}



.taxi-booking-plugin .location-group {

position: relative;

margin-bottom: 10px;

}



.taxi-booking-plugin .location-group input {

width: calc(100% - 60px); /* Adjust input width */

padding-right: 60px;

}



.taxi-booking-plugin .location-group .add-rem {

position: absolute;

top: 0;

right: 0;

display: flex;

margin-left: 5px;

}



/*.taxi-booking-plugin .vehicle-option {*/

/*border: 1px solid #ccc;*/

/*padding: 10px;*/

/*margin-bottom: 10px;*/
/*}*/

.taxi-booking-plugin .floating-buttons-container {
    position: sticky;
    bottom: 10px; /* Floats 10px above the bottom of the viewport */
    background: #ffffff; /* Solid background so text doesn't show through */
    padding: 15px;
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* Slight drop shadow for depth */
    z-index: 10;
    border-radius: 8px;
    border: 1px solid #ddd;
    text-align: center;
}


.taxi-booking-plugin .vehicle-option img {

max-width: 100px;

}



.taxi-booking-plugin .vehicle-option.dimmed {

opacity: 0.5;

pointer-events: none;

}



.taxi-booking-plugin .vehicle-option.selected {
    border: 5px solid #FED700 !important; /* Increase '3px' to whatever thickness you prefer */
    box-shadow: 0 0 8px rgba(35, 72, 150, 0.4); /* Optional: adds a nice glow to make it pop */
}



.taxi-booking-plugin #selectedVehicleDetails {

margin-top: 20px;

border: 1px solid #ccc;

padding: 10px;

}



.taxi-booking-plugin #payment-form {

display: none;

}



.taxi-booking-plugin #pay {

display: none;

}



/* Update the existing #vehicleOptions and add #vehicleoptions for both forms */
.taxi-booking-plugin #vehicleOptions,
.taxi-booking-plugin #vehicleoptions {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping to new lines */
    overflow-x: auto; /* Enable horizontal scrolling */
    gap: 15px; /* Add space between items */
    padding-bottom: 10px; /* Space for the scrollbar */
    scroll-snap-type: x mandatory; /* Smooth snapping effect */
}

/* Update the vehicle-option cards to fit the slider */
.taxi-booking-plugin .vehicle-option {
    flex: 0 0 auto; /* Prevent the cards from shrinking */
    width: 220px; /* Fixed width for each vehicle card */
    scroll-snap-align: start;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 0; /* Remove bottom margin since we are scrolling horizontally */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.taxi-booking-plugin .next,

.taxi-booking-plugin .previos {

padding: 8px 16px; /* Reduced padding */

background: #234896;

color: #fff;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 0.9em; /* Smaller font */

}



.taxi-booking-plugin .next:hover,

.taxi-booking-plugin .previos:hover {

background: #FED700;

border: 3px solid blue;

color: black;

}

/* Media Queries for Mobile Devices */

@media only screen and (max-width: 768px) {

.taxi-booking-plugin {

flex-direction: column; /* Stack form and map vertically */

width: 100%; /* Full width on smaller screens */

gap: 20px; /* Reduce the gap between sections */

}



.taxi-booking-plugin #map {

width: 100%; /* Make map full width */

height: 250px; /* Reduce map height */

}



.taxi-booking-plugin .form-section {

width: 100%; /* Full width for form */

}



.taxi-booking-plugin .vehicle-option img {

max-width: 60px; /* Smaller vehicle images on mobile */

}



.taxi-booking-plugin .fare-display {

font-size: 1em; /* Smaller fare display */

}



.taxi-booking-plugin .next, .taxi-booking-plugin .previos {

padding: 6px 12px; /* Reduce padding on buttons */

font-size: 0.8em; /* Smaller font size for buttons */

}

}



@media only screen and (max-width: 480px) {

.taxi-booking-plugin h2 {

font-size: 1.5em; /* Reduce heading size */

}



.taxi-booking-plugin .form-section h3 {

font-size: 1.2em; /* Reduce heading size */

}



.taxi-booking-plugin .form-section input,

.taxi-booking-plugin .form-section select {

font-size: 0.8em; /* Smaller font size for inputs */

}



.taxi-booking-plugin .fare-display {

font-size: 0.9em; /* Smaller fare display */

}



.taxi-booking-plugin .vehicle-option img {

max-width: 50px; /* Even smaller vehicle images on very small screens */

}

}