/* style.css */

.travel-enquiry-widget {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.travel-enquiry-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between elements */
    justify-content: space-between;
}

/* Style for all input fields, selects, and button */
.travel-enquiry-form input[type="text"],
.travel-enquiry-form input[type="tel"],
.travel-enquiry-form input[type="email"],
.travel-enquiry-form input[type="number"],
.travel-enquiry-form select,
.travel-enquiry-form button {
    flex: 1 1 calc(25% - 10px); /* 25% width minus gap, 4 elements per row */
    margin: 0; /* Reset default margins */
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
}

/* Ensure No of Adult, No of Child, Arrival Date, and Location are on the same row */
.travel-enquiry-form input[type="number"][name="no_of_adult"],
.travel-enquiry-form input[type="number"][name="no_of_child"],
.travel-enquiry-form select[name="location"],
.travel-enquiry-form input[type="date"][name="arrival_date"] {
    flex: 1 1 calc(25% - 10px); /* 4 elements in a row */
    min-width: 150px; /* Prevents squishing */
}

/* Ensure button aligns with inputs */
.travel-enquiry-form button {
    background-color: #0073aa; /* WordPress blue, adjust as needed */
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.travel-enquiry-form button:hover {
    background-color: #005d82; /* Darker shade on hover */
}

/* Hide hidden fields visually but keep them in the DOM */
.travel-enquiry-form input[type="hidden"] {
    display: none;
}

/* Mobile Responsive: Stack elements vertically on small screens */
@media (max-width: 767px) {
    .travel-enquiry-form input[type="text"],
    .travel-enquiry-form input[type="tel"],
    .travel-enquiry-form input[type="email"],
    .travel-enquiry-form input[type="number"],
    .travel-enquiry-form select,
    .travel-enquiry-form input[type="date"],
    .travel-enquiry-form button {
        flex: 1 1 100%; /* Each element takes full width on mobile */
    }
}

/* Optional: Style for debug text */
.travel-enquiry-widget p {
    font-size: 14px;
    color: #666;
    margin: 5px 0;
}

/* Success message styling */
.elementor-alert-success {
    background-color: #46b450;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}
