/************ 
** niceeat 
** Region StyleSheet
** Created:     13-02-2021
** Updated:     15-01-2022
** App Versión: 1.12
************/
/*--------------------------------------------------------------
TABLE OF CONTENTS:
----------------------------------------------------------------
# VARIABLES
# CONTAINERS
# HEADERS AND MENUS
# TEXT AND TITLES
# FORMS AND MODALS
# BUTTONS
# WIDGETS AND CARDS
# GRAPHICS
# TABLES
# PAGE-HOME
# PAGE-REGION 
# PLAZOLETAS 
# CITY SEARCH
# ALIGNMENT 
--------------------------------------------------------------*/

/* VARIABLES */
:root {
    --color-strawberry: rgb(255, 24, 96);
    --color-eerie-black: rgb(21, 18, 36);
    --color-primary-magenta: rgb(241, 18, 111);
    --color-plump-purple: rgb(103, 58, 183);
    --color-rosolanc-purple: rgb(170, 0, 170);
    --color-lemon-glacier: rgb(242, 255, 0);
    --color-floral-white: rgb(255, 248, 241);
    --color-middle-red-purple: rgb(25, 7, 64);
    --color-primary-lust-priestess: rgb(184, 43, 137);
    --color-sugar-crystal: rgb(251, 249, 255);
    --color-primary-dark: rgb(195, 9, 88);
    --color-primary-light: rgb(241, 192, 207);

    --color-secondary: rgb(25, 7, 64);
    --color-secondary-dark: rgb(18, 5, 46);
    --color-secondary-darker: rgb(28, 36, 47);
    --color-dark-back: rgb(22, 27, 35);
    --color-middark-grey: rgb(94, 102, 110);
    --color-light-text: rgb(222, 222, 222);
    --color-semi-white: rgb(248, 249, 249);
    --color-text: rgb(73, 88, 110);
    --color-pizarra: rgb(29, 35, 38);
    --color-tiza: rgb(220, 228, 232);
    --color-secondary-lighter: rgb(43, 63, 96);

    --color-black: rgb(0, 0, 0);
    --color-dark-grey: rgb(73, 80, 87);
    --color-mid-grey: rgb(172, 181, 189);
    --color-light-grey: rgb(237, 237, 237);
    --color-mid-white: rgba(255, 255, 255, 0.502);
    --color-white: rgb(255, 255, 255);
    --color-grey-33: rgb(51, 51, 51);
    --color-grey-4f: rgb(79, 79, 79);
    --color-grey: rgb(119, 119, 119);
    --color-grey-9b: rgb(155, 155, 155);
    --color-grey-bd: rgb(189, 189, 189);
    --color-grey-e0: rgb(224, 224, 224);
    --color-grey-f2: rgb(242, 242, 242);

    --color-blue: rgb(33, 150, 243);
    --color-blue-light: rgb(211, 234, 253);
    --color-purple: rgb(155, 81, 224);
    --color-purple-light: rgb(235, 220, 249);
    --color-red: rgb(244, 67, 54);
    --color-red-light: rgb(255, 188, 182);
    --color-orange: rgb(250, 105, 15);
    --color-orange-light: rgb(255, 213, 187);
    --color-yellow: rgb(255, 167, 38);
    --color-yellow-light: rgb(255, 238, 214);
    --color-green: rgb(112, 189, 24);
    --color-green-light: rgb(226, 242, 209);
    --color-yellow-basic: rgb(255, 216, 0);
    --color-yellow-basic-light: rgb(255, 247, 204);
    --color-bright-yellow: rgb(252, 249, 52);
    --color-bright-yellow-light: rgb(254, 254, 214);

    --color-instagram: rgb(225, 48, 108);
    --color-facebook: rgb(57, 73, 171);
    --color-whatsapp: rgb(37, 211, 102);
    --color-twitter: rgb(29, 161, 242);
    --color-youtube: rgb(255, 0, 0);
    --color-tripadvisor: rgb(0, 175, 135);
    --color-pinterest: rgb(189, 8, 28);
    --color-mybusiness: rgb(72, 128, 230);
    --color-skype: rgb(0, 175, 240);
    --color-linkedin: rgb(0, 119, 181);
    --color-messenger: rgb(0, 132, 255);
    --color-snapchat: rgb(255, 252, 0);

    --appnice-linear: linear-gradient(208.82deg, #FF2064 10.91%, #4D0071 159.39%);
    --color-linear-nice: linear-gradient(155.1deg, #673AB7 23.78%, #B73AA3 95.04%);
    --color-linear-sunset: linear-gradient(97.37deg, #FFBD1B -0.21%, #F22198 85.16%);
    --color-linear-sunrise: linear-gradient(170.45deg, #FF2064 23.78%, #F8EF1C 95.04%);
    --color-linear-bluesky: linear-gradient(170.45deg, #006CC8 23.78%, #5BAEFD 95.04%);
    --color-linear-mint: linear-gradient(170.45deg, #00E3BB 23.78%, #00A5D9 95.04%);

    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Nunito', sans-serif;
    --font-tertiary: 'Lato', sans-serif;
    --font-poppins: 'Poppins', sans-serif;
    --line-grey: 1px solid rgb(221, 221, 221);
    --line-dark: 1px solid rgb(237, 237, 237);
    --border-radius: 0.5rem;
    --gutter: 1.6rem;
    --space-h: 1.6rem;
    --space-v: 2.4rem;
    --space-v2: 3.2rem;
}

.nice-mnContainer {
    color: var(--color-eerie-black);
}

/*GENERAL CONTAINERS*/
.nice__container {
    width: 100%;
    max-width: 114.8rem;
    margin: 0 auto;
}

.nice__container .col__a {
    max-width: 43rem;
    padding-top: 10rem;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/*ALIGNMENTS*/
.txt-cent {
    text-align: center;
}

/*TEXT COLORS*/
.bg-primary {
    background-color: var(--color-strawberry);
    color: var(--color-white);
}

.bg-yellow {
    background-color: var(--color-yellow);
    color: var(--color-white);
}

/*HERO BANNER HOME*/
.niceeat_search__restaurant {
    padding: 2.4rem;
    background: var(--color-rosolanc-purple);
    background-size: cover;
    background-position: top center;
}

.niceeat_search__restaurant h2 {
    font-size: 4.2rem;
    font-weight: 600;
}

.niceeat_searchbar__restaurant {
    padding: 2.4rem;
}

/*SLIDER HOME*/
.nice__banners .fc__banners {
    position: relative;
    padding: 3.2rem 1.6rem 3.2rem;
}

.fc__banners .owl-nav {
    position: absolute;
    top: 31%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bn_item {
    background-color: var(--color-white);
    height: 25rem;
}

.bn_item img {
    width: 55rem !important;
}

/*CATEGORIES HOME*/
h2.nice__sectionTitle {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2em;
    padding: 0 var(--gutter);
}

.nice__hzct {
    padding: var(--gutter) 0;
    display: grid;
    grid-gap: var(--gutter) 0;
    grid-template-columns: 1fr;
    align-content: start;
}

.nice__hzct>* {
    grid-column: 2 / -2;
}

.nice__hzct>.full {
    grid-column: 1 / -1;
}

.hs-cat {
    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: minmax(15rem, 1fr);
    scroll-snap-type: x proximity;
    padding-bottom: calc(.75 * var(--gutter));
    margin-bottom: calc(-.25 * var(--gutter));
}

.hs-cat>li,
.cat-item {
    scroll-snap-align: center;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    text-align: center;
}

.hs-cat>li,
.cat-item img {
    width: 10rem;
    margin-bottom: 1.6rem;
}

.hs-cat>li,
.cat-item a h3 {
    font-size: 1.4rem;
    line-height: 1.2em;
    font-weight: 500;
    color: var(--color-eerie-black);
    font-family: var(--font-titles);
}

.location-module-title {
    padding: 5px
}

.location-module-title h3 {
    line-height: 20px;
    font-size: 18px;
    text-transform: uppercase;
    margin: 0
}

/*PROMOS HOME*/

/*FEATURED HOME*/
.hs-rest {
    display: grid;
    grid-gap: calc(var(--gutter) / 2);
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: minmax(18rem, 1fr);
    scroll-snap-type: x proximity;
    padding-bottom: calc(.75 * var(--gutter));
    margin-bottom: calc(-.25 * var(--gutter));
}

.hs-rest>li,
.item {
    scroll-snap-align: center;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

.hs-rest>li,
.item img {
    width: 10rem;
    margin-bottom: 1.6rem;
}

.hs-rest>li,
.item a h3 {
    font-size: 1.4rem;
    line-height: 1.2em;
    font-weight: 500;
    color: var(--color-eerie-black);
}

.nice__rm {
    width: 100%;
    transition: all ease 0.3s;
    text-align: center;
    display: grid;
    grid-gap: 1.6rem;
}

.bg-rm {
    position: relative;
    z-index: 998;
    min-height: 17rem;
    background-size: cover;
    background-position: top center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.nice__rmInfo {
    position: relative;
    z-index: 999;
    padding: 2rem var(--space-h);
}

.bg-rm .review-r {
    position: absolute;
    color: var(--color-white);
    right: 1rem;
    bottom: -1.5rem;
    font-size: 1.4rem;
    border-radius: 5rem;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
}

.nice__rm__itemName {
    font-size: 1.6rem;
    line-height: 1.4em;
    font-weight: bold;
    color: var(--color-eerie-black);
}

.nice__rm__itemAddress {
    display: block;
    font-size: 1.3rem;
    max-width: 25rem;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nice__rm a,
.nice__rm a:hover,
.nice__rm a:visited {
    color: var(--color-eerie-black);
}

.nice__rm a.module-info__itemLogocontainer {
    width: 11rem;
    height: 11rem;
}

.nice__rm__buttons {
    padding: 0 var(--space-h) var(--space-h);
}

.food-court .btn {
    font-size: 1.4rem;
    letter-spacing: 0.2px;
    font-weight: 500;
}

#modalInAppMessageDialog .modal-dialog {
    max-width: 60rem;
}

/*RESULTS PAGE HOME*/



@media (max-width: 768px) {
    header.nice__header {
        padding: 1rem 0;
    }

    .niceeat__logo a {
        width: 15rem;
    }

    .nice_linkIcon {
        display: block;
        padding: 1rem;
    }

    .nice__navigation {
        display: none;
    }

    .menu-resp {
        display: block;
        padding: 1rem;
    }

    .nice__navbarIcon {
        width: 3rem;
        height: 3rem;
        fill: var(--color-eerie-black);
    }

    .navbar-header__item img {
        height: 3rem;
        margin-left: 2rem;
    }

    .nice__closeIcon {
        width: 1.7rem;
        height: 1.7rem;
        fill: var(--color-eerie-black);
    }

    .nice__site-menu {
        display: block;
        padding: 2rem 3rem;
    }

    .nice__menuItem {
        margin: 0 0 1rem 0;
    }

    .nice__menuItem a {
        display: block;
        padding: 1rem 0;
    }

    .niceeat_search__restaurant {
        padding: 1.6rem;
    }

    .niceeat_searchbar__restaurant {
        padding: 1.6rem;
    }

    .nice__banners .fc__banners {
        padding: 1.6rem 0 1.6rem 1.6rem;
    }
}

/*HOME REGION STYLES*/
.nice__bhBox {
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    height: 45rem;
}

.nice__bhBox h1 {
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 3.6rem;
}

.nice__bhBox h2 {
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.2em;
    margin-bottom: 6rem;
}

.nice__bhBox p {
    font-size: 1.6rem;
    line-height: 1.2em;
}

.nice__bhBox p a {
    font-weight: 600;
    color: var(--color-strawberry);
}







/*HEADER REGION*/
/************ CITY SEARCH ************/
.niceeat_search__city select {
    width: 100%;
}

.niceeat_search__signup {
    text-align: center;
}

.niceeat_search__city .niceeat_search__signup a {
    text-align: center;
    color: var(--color-white);
    text-transform: uppercase;
    font-size: 1.6rem;
    display: inline-block;
    cursor: pointer;
    padding: 1rem;
    border-bottom: 0.1rem solid;
}

span.suggested_category {
    color: var(--color-white);
    font-size: 1.8rem;
    line-height: 1.4em;
    text-align: center;
    padding: 1.5rem;
    display: block;
}

span.suggested_category a,
span.suggested_category a:hover,
span.suggested_category a:visited,
span.suggested_category a:focus {
    color: var(--color-white);
    font-weight: bold;
}

.row_home__search div {
    padding: 0;
}

.search button.btn-header {
    cursor: pointer;
    background-color: transparent;
    border: 0;
}

.niceeat_search__modalBox .modal-header {
    background-color: transparent;
}

.niceeat_search__modalBox .modal-header .modal-content__title {
    padding: 1rem;
    position: relative;
    height: 5rem;
}

.niceeat_search__modalBox .modal-body {
    padding: 0;
}

.banner-search {
    height: calc(100vh - 12rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.banner-home .search_engine_city,
.banner-home__region .search_engine_city {
    color: var(--color-white);
    background-color: rgba(195, 9, 88, 0.9);
}

@media (max-width: 768px) {
    .appheader__logo {
        max-width: 17rem;
        width: 100%;
    }

    .appheader__logo--image {
        width: 100%;
        height: 3.2rem;
    }

    .appheader__logo a {
        height: 3.2rem;
    }

    .regionHome {
        height: auto;
    }

    .niceeat_search__restaurant h2 {
        display: none;
    }

    .niceeat_search__restaurant h3 {
        display: none;
    }

    .niceeat_search__modal {
        height: 100%;
    }

    .niceeat_search__searchForm .niceeat_btn__search {
        margin-left: 0;
        height: 4rem;
    }

    .niceeat_search__modal .niceeat_search__modalBox {
        border-radius: 0;
        height: 100%;
    }
}

/************ SEARCH RESULTS ************/
.searchbar-group {
    border-radius: 4rem;
    background: var(--color-white);
}

section.search-page {
    padding: 0 2.4rem;
    height: calc(100vh - 42rem);
    overflow-y: auto;
    overflow-x: hidden;
}

.result-header h1 {
    font-family: var(--font-titles);
    color: var(--color-eerie-black);
    font-size: 2.4rem;
    font-weight: 600;
    padding: 0;
}

section.search-page .description-result {
    font-size: 1.4rem;
    margin-bottom: 2.4rem;
}

.result-items {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
    grid-gap: 1.6rem;
}

.listing-item {
    display: flex;
    justify-content: center;
}

.restaurant-module {
    width: 100%;
    transition: all ease 0.3s;
}

.btn__niceCard {
    border-radius: 3rem;
    font-size: 1.4rem;
    text-transform: uppercase;
    padding: 0.8rem 1.6rem;
}

.bg-restaurant {
    position: relative;
    z-index: 998;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.bg-restaurant .review-r {
    position: absolute;
    color: var(--color-white);
    right: 1rem;
    bottom: -2.5rem;
    font-size: 1.7rem;
    border-radius: 5rem;
    width: 5rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
}

.bg-restaurant .review-r i {
    font-size: 1.4rem;
    margin-left: 0.2rem
}

.r-closed {
    background: var(--color-white);
    color: var(--color-grey-9b);
    border: 1px solid;
    padding: 0.4rem 1.5rem;
    text-align: center;
    border-radius: 0.4rem;
    right: 0;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.closed__message {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
}

.closed__message .closed__messageBox {
    background: var(--color-strawberry);
    box-shadow: 0px -6px 1.5rem rgba(0, 0, 0, 0.7);
    color: var(--color-white);
    font-size: 1.4rem;
    margin: 0 auto;
    padding: 1rem 1rem;
    text-align: center;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.closed__message .closed__messageBox a {
    color: var(--color-white);
    font-weight: 500;
    text-decoration: underline;
}

.btn-niceSm {
    padding: 0.8rem 1.6rem;
    color: var(--color-white);
    cursor: pointer;
    font-weight: 500;
    background: var(--color-strawberry);
    border-radius: 0.4rem;
    border: 0;
    display: block;
    align-items: center;
    font-size: 1.4rem;
    transition: all ease 0.3s;
}

.restaurant-module-info {
    position: relative;
    z-index: 999;
    text-align: right;
}

.review-r i {
    color: var(--color-yellow);
}

.module-info__itemButtons {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}

.module-info__itemLogocontainer {
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.1);
    border: 0.3rem solid var(--color-white);
    transition: all ease 0.3s;
    display: inline-block;
    padding: 0.7rem;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--color-grey-f2);
}

.module-info__itemLogo {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.module-info__itemTitle {
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.8rem;
}

.module-info__itemName {
    font-size: 1.4rem;
    line-height: 1.4em;
    font-weight: 600;
    color: var(--color-eerie-black);
    text-transform: uppercase;
}

.module-info__itemAddress {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 1.3rem;
    display: block;
    max-width: 20rem;
}

.module-info__item .module-info__category {
    font-family: var(--font-epilogue);
    font-size: 1rem;
    background-color: var(--color-green);
    color: var(--color-white);
    text-transform: uppercase;
    padding: 0.4rem 1.2rem;
    border-radius: 3rem;
}

.restaurant-module a,
.restaurant-module a:hover,
.restaurant-module a:visited {
    color: var(--color-secondary-dark);
}

ul.pagination-nice {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

ul.pagination-nice li {
    display: inline;
}

ul.pagination-nice li a {
    background-color: var(--color-strawberry);
    border-radius: 0.3rem;
    color: var(--color-white);
    cursor: pointer;
    padding: 0.8rem 1.5rem;
    margin: 1rem;
    min-width: 3.6rem;
    position: relative;
    float: left;
    transition: all ease 0.3s;
}

ul.pagination-nice li a:hover {
    opacity: 0.7;
}

ul.pagination-nice li.active a {
    background-color: var(--color-eerie-black);
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: #f04d4a;
    color: #FFF
}

.restaurant-module-info img.logo-r {
    margin: 10px;
}

img.logo-r {
    position: relative;
    z-index: 28;
    width: 100%;
    max-width: 100px;
    background-color: #e2e2e2;
    border-radius: 100px;
    box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.4);
    border: 0;
}


@media (max-width: 768px) {

    .result-items {
        grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
        grid-gap: 1rem;
    }

    .restaurant-module {
        min-width: 13rem;
    }

    .restaurant-module-info {
        grid-gap: 0.8rem;
        padding: 0;
    }

    .module-info__itemLogocontainer {
        width: 9rem;
        height: 9rem;
    }

    .nice__rm a.module-info__itemLogocontainer {
        width: 8rem;
        height: 8rem;
    }

    .bg-restaurant {
        min-height: 13rem;
    }

    .module-info__itemName {
        font-size: 1.2rem;
    }

    .module-info__itemAddresscontainer {
        display: flex;
        justify-content: center;
    }

    .r-closed {
        font-size: 1.2rem;
    }

    .module-info__itemAddress {
        max-width: 13rem;
        font-size: 1.2rem;
    }

    .module-info__itemButtons {
        display: none;
    }

    .closed__message .closed__messageBox {
        font-size: 1.2rem;
    }

    .fooditem-check_group,
    .delivery__form--addonsGroup,
    .delivery__form--drinksGroup {
        min-width: initial;
    }
}


/*CATEGORIAS*/
.hs-cat>li,
.cat-item a h3 {
    font-size: 1.6rem;
    line-height: 1.2em;
    font-weight: 500;
    color: var(--color-eerie-black);
}

/*PROMOS*/
.hs-promo {
    display: grid;
    grid-gap: calc(var(--gutter) / 2);
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: minmax(15rem, 1fr);
    scroll-snap-type: x proximity;
    padding-bottom: calc(.75 * var(--gutter));
    margin-bottom: calc(-.25 * var(--gutter));
}

.hs-promo>li,
.item {
    scroll-snap-align: center;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

.hs-promo>li,
.item .nice__prbg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
    height: 12rem;
    width: 12rem;
    margin-bottom: 1.6rem;
}

.hs-promo>li,
.item a h3 {
    font-size: 1.4rem;
    line-height: 1.2em;
    font-weight: 500;
    color: var(--color-eerie-black);
}

/*CREAR CUENTA*/
.nice__ca {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

.nice__ca .nice__caBox {
    padding: var(--space-v2) var(--gutter);
}

.nice__ca h2 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    line-height: 1.2em;
    font-family: var(--font-titles);
}

.nice__ca p {
    font-size: 1.6rem;
    line-height: 1.2em;
    margin-bottom: var(--space-v);
}

/*FOOTER*/
.nice__fNav {
    display: flex;
    justify-content: space-between;
    padding: var(--space-v2) var(--gutter);
    border-bottom: 1px solid var(--color-light-grey);
}

.nice__fNav .nice__fl {
    display: flex;
    align-items: center;
    gap: var(--gutter);
}

.nice__fNav .nice__fl .nice__flItem a,
.nice__fNav .nice__fl .nice__flItem a:hover,
.nice__fNav .nice__fl .nice__flItem a:visited {
    color: var(--color-eerie-black);
}

.nice__fNav .nice__fl .nice__flItem {
    transition: all ease 0.2s;
}

.nice__fNav .nice__fl .nice__flItem:hover {
    transform: translateY(-3px);
}

.nice__copyright {
    padding: var(--space-v2) var(--gutter);
}

/************ Scrollbar ************/

::-webkit-scrollbar {
    width: 0.8rem;
    height: 0.8rem;
}

::-webkit-scrollbar-track {
    background: rgb(238, 238, 238);
}

::-webkit-scrollbar-thumb {
    background: var(--color-strawberry);
    border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb:active {
    background: rgb(255, 87, 34);
}

/************ Maps ************/
.search_resultsContainer {
    grid-template-columns: 1fr 1fr;
}

.result-header {
    padding: 1.6rem 2.4rem 1.6rem;
}

.nice__mapContainer {
    width: 100%;
    height: 100%;
}

.mapouter {
    position: relative;
    text-align: right;
    height: 100%;
    width: 100%;
}

.gmap_canvas {
    overflow: hidden;
    background: none !important;
    height: 100%;
}

.gm-ui-hover-effect {
    display: none !important;
}

.custom-marker .marker-bg {
    background-color: white;
    /* Fondo blanco */
    border-radius: 50%;
    /* Forma circular */
    padding: 5px;
    /* Espaciado interno */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    /* Sombra para mayor visibilidad */
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-marker .marker-img {
    width: 50px;
    /* Ancho de la imagen */
    height: 50px;
    /* Alto de la imagen */
    object-fit: cover;
    /* Mantener proporción de la imagen */
    border-radius: 50%;
    /* Imagen circular */
}

/* Estilo del contenedor de los botones */
.info-window .buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: flex-end;
}

/* Estilo del botón de "Cómo llegar" */
.directions-link,
.order-link {
    display: inline-block;
    padding: 10px 15px;
    background-color: var(--color-rosolanc-purple);
    color: var(--color-white) !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    text-align: center;
}

.directions-link:hover,
.order-link:hover {
    background-color: var(--color-plump-purple);
}

/* Estilo para el texto de estado */
.closed-text {
    color: red;
    font-weight: bold;
}

.open-text {
    color: green;
    font-weight: bold;
}

.info-window-logo-img {
    width: 100%;
    max-width: 9rem !important;
    border-radius: 50%;
}

.info-window-text h2 {
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
}

.info-window-text .address {
    max-width: 24rem;
}

.property {
    align-items: center;
    background-color: #FFFFFF;
    border-radius: 50%;
    color: #263238;
    display: flex;
    font-size: 14px;
    gap: 15px;
    height: 30px;
    justify-content: center;
    padding: 4px;
    position: relative;
    transition: all 0.3s ease-out;
    width: 30px;
}

.property .logo {
    align-items: center;
    display: flex;
    justify-content: center;
    background: var(--color-white);
    border-radius: 3rem;
}

.property .icon {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%;
}

.property .icon img,
.property .logo img {
    width: 4.8rem;
    height: auto;
    object-fit: cover;
    border-radius: 3rem;
}

.property .details {
    display: none;
    flex-direction: column;
    flex: 1;
}

.property .price {
    font-weight: bold;
}

.property .address {
    color: #9E9E9E;
    font-size: 10px;
    margin-bottom: 10px;
    margin-top: 5px;
}

.property .features {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.property .features>div {
    align-items: center;
    background: #F5F5F5;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    font-size: 10px;
    gap: 5px;
    padding: 5px;
}

.property.highlight {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
    height: 80px;
    padding: 8px 15px;
    width: auto;
}

.property.highlight .details {
    display: flex;
}

.property .bed {
    color: #FFA000;
}

.property .bath {
    color: #03A9F4;
}

.property .size {
    color: #388E3C;
}

.property.highlight:has(.fa-house) .icon {
    color: var(--house-color);
}

.property:not(.highlight):has(.fa-house) {
    background-color: var(--house-color);
}

.property:not(.highlight):has(.fa-house)::after {
    border-top: 9px solid var(--house-color);
}

.property.highlight:has(.fa-building) .icon {
    color: var(--building-color);
}

.property:not(.highlight):has(.fa-building) {
    background-color: var(--building-color);
}

.property:not(.highlight):has(.fa-building)::after {
    border-top: 9px solid var(--building-color);
}


.property.highlight:has(.fa-warehouse) .icon {
    color: var(--warehouse-color);
}

.property:not(.highlight):has(.fa-warehouse) {
    background-color: var(--warehouse-color);
}

.property:not(.highlight):has(.fa-warehouse)::after {
    border-top: 9px solid var(--warehouse-color);
}

.property.highlight:has(.fa-shop) .icon {
    color: var(--shop-color);
}

.property:not(.highlight):has(.fa-shop) {
    background-color: var(--shop-color);
}

.property:not(.highlight):has(.fa-shop)::after {
    border-top: 9px solid var(--shop-color);
}

/* Estilo general */
.searchresultpage-header {
    background-color: var(--color-rosolanc-purple);
    color: var(--color-white);
}

.results-breadcrumbs {
    padding: 0.8rem 2.4rem;
    display: block;
}

.results-breadcrumbs a {
    color: var(--color-white);
}

.tabs-container {
    display: flex;
    justify-content: center;
    max-width: 60rem;
    margin: 0 auto 3rem;
    background: var(--color-grey-e0);
    border-radius: 3rem;
}

.tabs-container button {
    flex: 1;
    padding: 10px;
    border: 0;
    background-color: var(--color-grey-e0);
    border-radius: 3rem;
    cursor: pointer;
}

.tabs-container button.active {
    background-color: var(--color-rosolanc-purple);
    color: white;
    border-radius: 3rem;
    border: 0;
}

#tab-map {
    height: calc(-42rem + 100vh);
}

/*RESPONSIVE*/
@media (max-width: 768px) {
    .nice__ca h2 {
        font-size: 2rem;
    }

    .nice__bhBox .col__a {
        background: var(--color-yellow);
        padding: var(--space-v) var(--gutter);
    }

    .nice__bhBox {
        display: flex;
        align-items: flex-end;
        height: 40rem;
    }

    .nice__bhBox h1 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    .nice__bhBox h2 {
        font-size: 1.4rem;
        margin-bottom: 3rem;
    }

    .nice__bhBox p {
        font-size: 1.4rem;
    }

    .user-nav .search {
        padding: 0 1.5rem;
    }

    .nice__banners {
        margin-bottom: 0;
    }

    h2.nice__sectionTitle {
        font-size: 1.8rem;
    }

    .hs-cat {
        display: grid;
        grid-gap: 0;
        grid-template-columns: repeat(8, calc(36% - var(--gutter) * 2));
        grid-template-rows: minmax(150px, 1fr);
        overflow-x: scroll;
        scroll-snap-type: x proximity;
        padding-bottom: calc(.75 * var(--gutter));
        margin-bottom: calc(-.25 * var(--gutter));
    }

    .hs-cat>li,
    .cat-item {
        scroll-snap-align: center;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 8px;
    }

    .hs-cat>li,
    .cat-item a h3 {
        font-size: 1.2rem;
    }

    .hs-rest>li,
    .item a h3 {
        font-size: 1.2rem;
        min-height: 3.2rem;
        font-weight: 600;
    }

    .hs-promo {
        display: grid;
        grid-gap: calc(var(--gutter) / 2);
        grid-template-columns: repeat(8, calc(50% - var(--gutter) * 2));
        grid-template-rows: minmax(150px, 1fr);

        overflow-x: scroll;
        scroll-snap-type: x proximity;
        padding-bottom: calc(.75 * var(--gutter));
        margin-bottom: calc(-.25 * var(--gutter));
    }

    .hs-promo>li,
    .item {
        scroll-snap-align: center;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 8px;
    }

    .hs-rest {
        display: grid;
        grid-gap: calc(var(--gutter) / 2);
        grid-template-columns: repeat(5, 14rem);
        grid-template-rows: minmax(150px, 1fr);

        overflow-x: scroll;
        scroll-snap-type: x proximity;
        padding-bottom: calc(.75 * var(--gutter));
        margin-bottom: calc(-.25 * var(--gutter));
    }

    .hs-rest>li,
    .item {
        scroll-snap-align: center;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 8px;
    }

    .bg-rm {
        min-height: 10rem;
    }

    .nice__newsContainer h3 {
        font-size: 1.4rem;
    }

    .nice__newsContainer p {
        font-size: 1.2rem;
    }

    .bn_item {
        height: 15rem;
    }

    .bn_item img {
        width: 32rem !important;
    }

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .nice__footer-container {
        display: none;
    }

    .nice__hzct {
        grid-template-columns: var(--gutter) 1fr
    }

    .hs-cat>li,
    .cat-item img {
        width: 7rem;
    }

    #modalInAppMessageDialog .modal-dialog {
        max-width: 35rem;
    }

    .result-header h1 {
        font-size: 2rem;
    }
}