header, footer{
    background-color:#0A2942;
}
main {
    display: flex;
    justify-content: center;
}
#home-container{
    width:100%;
    margin : -80px 0 15px 0;
    background-color: #F7F2EE;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius:15px;
    padding:2% 4% 2% 4%;
    & #col-location, #col-date, #col-people{
        padding:15px;
        display:flex;
        flex-direction:column;
        & input {
            background-color:white;
            border-radius:10px;
            border:none;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            padding:10px;
        }

        & #date-submit ,#people-submit-btn{
            margin:2%;
            width:100%;
            background-color:#0A2942;
            padding:10px;
            border-radius:35px;
            border:none;
            color:#fff;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            &:hover {
                background-color: #fff066;
                color:black;
            }
        }

    }
    & #search-btn{
        margin:1%;
        width:45%;
        background-color:#0A2942;
        padding:25px;
        border-radius:35px;
        border:none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        color:white;
        &:hover {
             background-color: #fff066;
             color:black;
        }
    }
    & #reset-btn{
        width:45%;
        background-color:gray;
        padding:25px;
        border-radius:35px;
        border:none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        &:hover {
            background-color:#4d4d4d;
            color:white;
        }
    }
    & #houses-container{
        padding: 0 ;
        margin: 0;
        & #card-row{
            padding: 0 ;
            margin: 0;
            & a{
                text-decoration: none;
                color: black;
            }
            & .card{
                /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
                margin:4px;
                background-color:white;
                border:1px solid lightgray;
                border-radius:15px;
                padding: 5px;
                &:hover {
                    transform: translateY(-6px);
                }
                & img {
                    border-radius:10px;
                    height: 20vh;
                    z-index:1;
                }
                & .card-body{
                    padding:5%;
                    & .address{
                        font-size: 16px;
                    }
                }
            }
        }

        & #load-btn{
            color:black;
            background-color:transparent;
            &:hover{
                color:blue;
            }
        }
        & * {
            box-sizing: border-box;
          }

    }
}

/* =========================
   MOBILE RESPONSIVE (HOME SEARCH + CARDS)
========================= */
@media (max-width: 768px) {

    main {
        padding: 10px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center; /* ✅ centers text globally */
    }

    /* ================= SEARCH CONTAINER ================= */
    #home-container {
        width: 100%;
        margin: -40px 0 15px 0;
        padding: 15px;
        border-radius: 12px;

        display: flex;
        flex-direction: column;
        align-items: center; /* ✅ center all children */
        justify-content: center;
        text-align: center;
    }

    /* ================= FORCE FULL WIDTH + CENTER ================= */
    #home-container [class*="col-"],
    #home-container .col,
    #home-container .row {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;

        display: flex;
        flex-direction: column;
        align-items: center;   /* ✅ center content inside columns */
        justify-content: center;
        text-align: center;
    }

    /* ================= INPUTS ================= */
    #home-container input {
        width: 100%;
        font-size: 14px;
        text-align: center;
    }

    /* ================= DROPDOWN ================= */
    #home-container .dropdown-menu {
        width: 100%;
        text-align: center;
    }

    #home-container .dropdown-menu #people-submit-btn {
        font-size: 14px;
        padding: 10px;
        width: 100%;
    }

    /* ================= BUTTONS ================= */
    #home-container #search-btn,
    #home-container #reset-btn {
        width: 100%;
        margin: 5px 0;
        padding: 14px;
        border-radius: 20px;
        font-size: 14px;
        border: none;
        color: white;

        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }


    /* ================= CARDS ================= */
    #home-container #card-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center; /* ✅ center cards */
    }

    #home-container #card-row .card {
        width: 100%;
        border-radius: 12px;
        text-align: center;
    }

    #home-container #card-row .card-body {
        text-align: center;
    }

    /* ================= LOAD BUTTON ================= */
    #home-container #load-btn {
        width: 100%;
        text-align: center;
    }
}

/* =========================
   SMALL PHONES
========================= */
@media (max-width: 480px) {

    main {
        text-align: center;
    }

    #home-container {
        margin: -20px 0 10px 0;
        padding: 12px;
    }
}