/* Layout */
.booking-wrapper {
    margin: 30px auto;
    max-width: 1200px;
}
.left-panel, .right-panel {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

/* Section Titles */
.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    border-bottom: 2px solid #28a745;
    padding-bottom: 5px;
}
.form-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
    color: #25ab4c;
}

/* Price Table */
.price-table {
    margin-bottom: 30px;
}
.price-table th {
    background: #25ab4c;
    color: #fff;
    text-align: center;
}
.price-table td {
    text-align: center;
}

/* Calendar */
#calendar {
    margin: 10px 0;
}

.ui-datepicker {
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
}

.ui-datepicker td a {
    display: block;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
}

.ui-datepicker .ui-state-active {
    background: #28a745 !important;
    color: #fff !important;
}

.calendar-legend {
    margin-top: 10px;
}
.legend {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border-radius: 3px;
}
.legend.available { background: #28a745; }
.legend.unavailable { background: #ccc; }
.legend.booked { background: #000; }

/* Form */
#custom-booking-form label {
    margin-top: 10px;
    font-weight: 600;
}
#custom-booking-form input {
    width: 100%;
    margin-top: 3px;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: whitesmoke !important;
    color: #000000 !important;
}

/* Buttons */
#calculate_fare {
    background: #005f8d;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
}
#calculate_fare:hover { background: #004466; }

#submit_booking {
    padding: 12px;
    font-size: 16px;
    border-radius: 6px;
}

/* Fare Display */
.fare-box {
    margin-top: 10px;
    font-weight: bold;
    font-size: 16px;
    color: #333;
}


/* Inline calendar (#calendar) apni jagah rahe */
#calendar .ui-datepicker {
    width: 100% !important;
}

/* Popup calendar (input par click karne se jo khulta hai) */
#ui-datepicker-div {
    width: 280px !important;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999 !important;
}

/* Popup calendar ka active date style */
#ui-datepicker-div .ui-state-active {
    background: #28a745 !important;
    color: #fff !important;
}

/* Fare + Map */
.fare-map-wrapper {
    width: 100%;
}

#map_preview {
    height: 250px;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.fare-box {
    margin-top: 12px;
    font-weight: bold;
    font-size: 18px;
    color: #25ab4c; /* green highlight */
    text-align: center;
}