/* Form Display Fixes for Hope Acres v4.0 */

/* Fix guest selector backgrounds */
.form-group select,
.search-inputs select,
#guests,
#adults,
#children,
select[name="guests"],
select[name="adults"],
select[name="children"],
.guest-selection select {
    background-color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 36px !important;
}

/* Remove any pattern backgrounds from guest selection area */
.guest-selection,
.guest-selection * {
    background-image: none !important;
}

.guest-selection select {
    background-color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

/* Fix form group spacing and backgrounds */
.form-group {
    background-color: transparent !important;
    margin: 0 !important;
}

/* Ensure all inputs have consistent styling */
.search-form input[type="text"],
.search-form select,
.availability-search-form input[type="text"],
.availability-search-form select {
    background-color: white !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    height: 44px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    transition: all 0.3s !important;
}

/* Hover and focus states */
.search-form input[type="text"]:hover,
.search-form select:hover,
.availability-search-form input[type="text"]:hover,
.availability-search-form select:hover {
    border-color: #ccc !important;
}

.search-form input[type="text"]:focus,
.search-form select:focus,
.availability-search-form input[type="text"]:focus,
.availability-search-form select:focus {
    outline: none !important;
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1) !important;
}

/* Fix button alignment */
.search-form button[type="submit"],
.availability-search-form button[type="submit"] {
    height: 44px !important;
    align-self: flex-end !important;
    margin: 0 !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    .search-form input[type="text"],
    .search-form select,
    .availability-search-form input[type="text"],
    .availability-search-form select {
        font-size: 16px !important;
        height: 48px !important;
    }
    
    .search-form button[type="submit"],
    .availability-search-form button[type="submit"] {
        height: 48px !important;
        width: 100% !important;
    }
}

/* Remove any unwanted backgrounds from containers */
.search-section,
.search-refinement {
    background-color: white !important;
}

.search-inputs,
.search-form {
    background-color: transparent !important;
}

/* Ensure labels are properly styled */
.form-group label,
.search-inputs label {
    background-color: transparent !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* Specific fixes for site.php booking form */
.booking-form select,
.booking-container select,
.reservation-form select {
    background-color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    border: 2px solid #e0e0e0 !important;
}

/* Remove ALL background patterns */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-color: white !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

/* Override any inherited patterns */
.guest-selection,
.guest-selection *,
.form-group,
.form-group * {
    background: none !important;
}

.guest-selection select,
.form-group select {
    background-color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}