/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* ******************************************************************************************* */

#searchResults-message {
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    /* Dark theme styles go here */

    #searchResults {
        position: relative;
        width: 100%;
        /* min-height: 50dvh; */
        /* padding: 0 12px; */
        top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .rest-container {
        width: 300px;
        border: 2px solid transparent;
        border-radius: 20px;
        position: relative;
        /* margin-top: 20px; */
        /* padding: 10px 12px; */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        cursor: pointer;
        user-select: none;
        overflow: hidden;
    }

    .rest-container:hover {
        /* background: var(--primary-dark); */
        box-shadow: 0 2px 10px coral;
        outline: 2px solid var(--secondary);
    }

    .rest-container img {
        width: 100%;
        height: 100px;
        background-color: gray;
        object-fit: cover;
    }

    .rest-container hr {
        margin-bottom: 5px;
        border: 1px solid var(--text_primary_color);
        -webkit-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        transition: all ease 0.5s;
    }

    .rest-container .rest-detail {
        padding: 10px 12px;
    }

    .rest-container .rest-detail h2 {
        font-family: myFont;
        font-size: 2rem;
        font-weight: lighter;
        text-transform: capitalize;
        color: var(--text_primary_color);

    }

    .rest-container .rest-detail p {
        font-size: 0.75rem;
    }
}

@media (prefers-color-scheme: light) {
    /* Light theme styles go here */

    #searchResults {
        position: relative;
        width: 100%;
        /* min-height: 50dvh; */
        /* padding: 0 12px; */
        top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .rest-container {
        width: 300px;
        border: 2px solid coral;
        border-radius: 20px;
        position: relative;
        /* margin-top: 20px; */
        /* padding: 10px 12px; */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        top: 10px;
        cursor: pointer;
        user-select: none;
        overflow: hidden;
    }

    .rest-container:hover {
        box-shadow: 0 2px 10px gray;
    }

    .rest-container img {
        width: 100%;
        height: 100px;
        background-color: gray;
        object-fit: cover;
    }

    .rest-container hr {
        margin-bottom: 5px;
        border: 1px solid var(--text_primary_color);
        -webkit-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        transition: all ease 0.5s;
    }

    .rest-container .rest-detail {
        padding: 10px 12px;
    }

    .rest-container .rest-detail h2 {
        font-family: myFont;
        font-size: 2rem;
        font-weight: lighter;
        text-transform: capitalize;
        color: var(--text_primary_color);

    }

    .rest-container .rest-detail p {
        font-size: 0.75rem;
    }



}

/* // Small devices (landscape phones, 576px and down) */
@media (max-width: 576px) {
    .rest-container {
        width: 100%;
        border: none;
        border-radius: 20px;
        position: relative;
        /* margin-top: 20px; */
        /* padding: 10px 12px; */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        top: 10px;
        cursor: pointer;
        user-select: none;
        overflow: hidden;
    }

    #searchResults-message {
        font-size: 0.8rem;
    }

    .rest-container img {
        height: 0px;
    }

    #searchResults {
        gap: 0px;
    }
}

/* // Medium devices (tablets, 768px and down) */
@media (max-width: 768px) {}

/* // Large devices (desktops, 992px and down) */
@media (max-width: 992px) {}

/* // Extra large devices (large desktops, 1200px and down) */
@media (max-width: 1200px) {}