/* General container styling */
.custom-booking-form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #e6ae48; /* Golden border for the form */
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Add a golden top line for a luxury feel */
.custom-booking-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #e6ae48; /* Golden line at the top */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Labels for all inputs */
.custom-booking-form label {
    margin-top: 10px;
    display: block; /* Labels appear above inputs */
}

/* Styling for inputs, textarea, and button */
.custom-booking-form input,
.custom-booking-form textarea,
.custom-booking-form button {
    width: 100%; /* Full width for uniformity */
    margin: 10px 0;
    padding: 12px; /* Increased padding for better readability */
    font-size: 16px;
    border: 1px solid #ccc; /* Consistent light gray border */
    border-radius: 5px;
    box-sizing: border-box; /* Include padding and border in width calculation */
    background-color: #f9f9f9; /* Same background color for all inputs */
}

/* Checkbox Styling */
.custom-booking-form input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin-right: 5px;
    vertical-align: middle;
}

/* Labels for checkboxes */
.custom-booking-form input[type="checkbox"] + label {
    display: inline-block;
    margin: 0;
    font-size: 14px;
    vertical-align: middle;
}

/* Ensure uniform appearance across all input types */
.custom-booking-form input[type="text"],
.custom-booking-form input[type="tel"],
.custom-booking-form input[type="date"],
.custom-booking-form input[type="time"] {
    appearance: none; /* Normalize styling across browsers */
    -webkit-appearance: none; /* WebKit-specific reset */
    background-color: #f9f9f9; /* Uniform background */
    padding: 12px; /* Ensure uniform padding */
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Styling for the textarea */
.custom-booking-form textarea {
    resize: vertical; /* Allow vertical resizing only */
    background-color: #f9f9f9; /* Match input field background */
}

/* Button styling */
.custom-booking-form button {
    background-color: #e6ae48; /* Golden color */
    color: white; /* White text */
    font-weight: bold; /* Bold font for emphasis */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 12px 20px;
    font-size: 16px; /* Consistent font size */
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effects */
}

.custom-booking-form button:hover {
    background-color: #d89b3c; /* Darker shade on hover */
    transform: translateY(-2px); /* Slight upward movement */
}

/* Fare display styling */
#fare-display {
    font-size: 18px; /* Larger font size for emphasis */
    font-weight: bold; /* Bold text */
    color: #007BFF; /* Blue color for visibility */
    margin-top: 10px;
    text-align: center;
}

/* Fix for any external margin/padding applied */
.custom-booking-form input[type="text"],
.custom-booking-form input[type="tel"] {
    margin: 10px 0 !important;
    padding: 12px !important; /* Enforce consistency */
    background-color: #f9f9f9 !important;
}

/* Customize font color for all input fields */
input#name, 
input#pickup-address, 
input#dropoff-address, 
textarea#message {
    color: #000000; /* Customize color here for all fields */
}

.custom-booking-form input:focus,
.custom-booking-form textarea:focus,
.custom-booking-form input[type="tel"]:focus,
.custom-booking-form input[type="date"]:focus,
.custom-booking-form input[type="time"]:focus {
    border-color: #d89b3c !important; /* Golden border when focused */
    box-shadow: 0 0 5px rgba(255, 165, 0, 0.5) !important; /* Soft glowing effect */
}

/* Remove autofill background and reset the border */
input:-webkit-autofill {
    background-color: transparent !important;
    border-color: #d89b3c !important;  /* Golden border */
    box-shadow: 0 0 5px rgba(255, 165, 0, 0.5) !important; /* Soft glowing effect */
}

/* Specifically for phone number input */
input[type="tel"]:-webkit-autofill {
    background-color: transparent !important;
    border-color: #d89b3c !important;
    box-shadow: 0 0 5px rgba(255, 165, 0, 0.5) !important;
}

/* Error border styling for invalid fields */
.custom-booking-form input.error-border,
.custom-booking-form textarea.error-border {
    border-color: red !important;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important; /* Soft red glow */
}