/* ===== BOOKING FORM - EXACT MATCH ===== */
.booking-section {
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.booking-form {
    background: grey; /* LIGHT GREY background */
    width: 100%;
    max-width: 1000px;
    padding: 0;
    border-radius: 2px;
    border: 1px solid #e0e0e0; /* Light border */
}

.form-row {
    display: flex;
    align-items: stretch;
    height: 60px; /* Slightly shorter */
}

.form-group {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    background: gray; /* WHITE fields inside grey */
}

.form-group:last-child {
    display: flex;
    justify-content: center; /* Center the button */
    align-items: center;
    background: #f5f5f5; /* Match the form background */
    padding: 0; /* Remove padding since button has its own */
}

/* Space between fields - create gap effect */
.form-group:not(:first-child) {
    margin-left: 1px; /* Tiny gap between fields */
}

.form-group label {
    color: white; /* Dark grey labels */
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    text-transform: none;
    font-weight: 500;
}

.booking-form input,
.booking-form select {
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0.9rem; /* Slightly smaller */
    color: orangered;
    font-family: inherit;
    outline: none;
}

/* Remove dropdown arrow */
.booking-form select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 16px;
    padding-right: 25px;
}

.search-button {
    padding: 0 30px; /* Horizontal padding only */
    background: navy;
    color:white;
    border: none;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    height: 100%;
    border-radius: 0 2px 2px 0;
    font-weight: 500;
    border-left: 1px solid #e0e0e0;
    width: auto; /* CHANGED from 100% to auto */
    min-width: 120px; /* Minimum width */
    margin: 0 auto; /* Center within the column */
}

.search-button:hover {
    background:rgb(182, 182, 248);
    color: black; /* Slight hover effect */
}

/* Placeholder - lighter grey */
.booking-form input::placeholder {
    color: rgb(16, 1, 1);
    font-size: 1rem;
}
.form-group:last-child {
    border: none;
}


/* Style date inputs to show placeholder when empty */
.booking-form input[type="date"] {
    color: #999; /* Placeholder color when empty */
}

.booking-form input[type="date"]:valid {
    color: #333; /* Normal color when date selected */
}

/* Remove calendar icon in some browsers */
.booking-form input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}

/* Custom placeholder for date inputs */
.booking-form input[type="date"]:invalid::before {
    content: attr(placeholder);
    color: #999;
}

.booking-form input[type="date"]:focus:invalid::before {
    content: '';
}
/* Mobile responsive */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        height: auto;
    }
    
    .form-group {
        padding: 15px;
        margin-left: 0 !important;
        border-bottom: 1px solid #eee;
    }
    
    .form-group:last-child {
        border-bottom: none;
    }
    
    .search-button {
        height: 50px;
        border-left: none;
        border-top: 1px solid #e0e0e0;
    }
}