

/* Make sure the main-container takes the full height of the viewport */
.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 240px;
    height: 100%;

}

.form-container {
    background-color: white;
    border-radius: 15px;
    text-align: center;
    width: 70%; /* You can adjust this based on your design */
    max-width: 90vw; /* Optional: Set a max-width for larger screens */
    padding: 2em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}

.form-container div {
    /padding: 0.1em;
}

/* Price and Area section together */
.price-area-homepage {
    display: flex; /* Align price and area divs side by side */
    gap: 1em; /* Adds space between price and area divs */
    justify-content: space-between; /* Distribute space evenly between price and area divs */
    width: 100%; /* Takes the full width of the parent container */
}

/* put location logo in location search field */
#location-search-home {
    border-radius: 40px;
    background: url('/static/aqar/images/svg/location_svg.svg') no-repeat white;
    background-size: 1em;
    background-position: 0.5em center;
    padding-left: 2em; /* Adjust padding to make space for the SVG */
}

.price-homepage,
.area-homepage {
    display: flex; /* Flexbox for inputs inside each section */
    flex-direction: column; /* Stack price and area inputs vertically */
    gap: 0.6em; /* Space between the input fields */
    width: 48%; /* Each section takes half the width of the form */
}

.price-homepage input,
.area-homepage input {
    padding: 0.5em;
    width: 100%; /* Makes input take the full width of its container */
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
}

.price-homepage input:focus,
.area-homepage input:focus {
    outline: none;
    border-color: #3498db;
}

/* Location and Property Type Sections */
.location-homepage,
.property-type-homepage {
    margin-bottom: 1em;
}

.property-type-homepage select::after {
  content: '';
}

input[type="text"],
select {
    padding: 0.8em;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
}

input[type="text"]:focus,
select:focus {
    outline: none;
    border-color: #3498db;
}

/* Button Styles */
.home-form-submit-button {
    padding: 0.7em 1.2em;
    margin-top: 1em;
    background-color: green;
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    filter: brightness(120%);
}

/* Responsive Layout */
@media (max-width: 768px) {
    .form-container {
        width: 90%;
        padding: 1.5em;
    }

    .price-area-homepage {
        flex-direction: column; /* Stacks price and area divs vertically */
        gap: 1em;
    }

    .price-homepage,
    .area-homepage {
        width: 100%; /* Makes the price and area sections 100% width on small screens */
    }

    .price-homepage input,
    .area-homepage input {
        width: 100%; /* Makes inputs take up full width */
    }
}

/* sell rent buttons */
    /* Flex container to arrange the buttons */
.sell-rent-homepage {
    display: flex;
    gap: 1em; /* Space between buttons */
    margin-bottom: 1em; /* Add some space at the bottom */
    justify-content: center;
}

/* Label styling to look like buttons */
.sell-rent-homepage .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2em;
    background-color: white; /* Default background color */
    color: green;
    font-size: 1.1em;
    font-weight: bold;
    border: solid 2px green;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    width: 100px; /* Fixed width for buttons */
    text-align: center;
    user-select: none;
}

/* Hide actual radio buttons */
.sell-rent-homepage input[type="radio"] {
    display: none;
}

/* When radio button is checked, apply the "pressed" effect to the label */
.sell-rent-homepage input[type="radio"]:checked + .button {
    background-color: #feff47; /* Color when selected (appears pressed) */
    /border-color: #533b1c;
    /color: #533b1c;
}

/* Hover effect for buttons */
.sell-rent-homepage .button:hover {
    filter: brightness(90%);
}

/* When the radio button is checked, add hover effect for active state */
.sell-rent-homepage input[type="radio"]:checked + .button:hover {
    filter: brightness(120%);
}
