@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
    --main-color: white;
    --main-textColor: black;
    --secondary-color: #f5f5f5;
    --main-search-placeholder: #A6A6A6;
    --category-clothes: #F7E8FF;
    --category-food: #FFC5BF;
    --category-stocks: #FFEEC5;
    --category-wc: #F5F5F5;
    --menubar-bars: #ffffff80;
    --menubar-active: #679F73;
    --main-svg-color: black;
    --button-green: #679F73;
    --button-secondary: #e0f3e4;
    --search-resultCard: #F3F3F3;
    --counter-color: #00000063;
    --closeroute-svg: #dcdbdb;
    --routePicker-background: #F5F5F5;
    --routePicker-border: 1px solid #dddddd;
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-color: #171614;
        --main-textColor: white;
        --secondary-color: #222222;
        --main-search-placeholder: #A6A6A6;
        --category-clothes: #6A3684;
        --category-food: #7C2E26;
        --category-stocks: #756130;
        --category-wc: #2A2A2A;
        --menubar-bars: #00000075;
        --menubar-active: #487752;
        --main-svg-color: white;
        --button-green: #487752;
        --button-secondary: #263327;
        --search-resultCard: #222222;
        --counter-color: #6b6a69;
        --closeroute-svg: #3f3f3f;
        --routePicker-background: #222222;
        --routePicker-border: 1px solid #383838;
    }
}

html, body {
    height: 100%;
    margin: 0;
}
.mapContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
}
.mapContainer > svg {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}
.storeLabel {
    font-size: 10px;
    pointer-events: none;
}

body {
    display: flex;
    justify-content: center;
    background-color: black;
    font-family: "Manrope", sans-serif;
}
p {
    margin: 0;
}

.ui {
    width: 100%;
    max-width: 500px;
    background-color: white;
    position: relative;
}
.ui .bottomContainer {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.ui .bottomContainer .statusBar {
    border-top: 1px solid #e6e6e6;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: repeat(4, 4fr);
    background: white;
}
.ui .bottomContainer .statusBar .button {
    display: flex;
    justify-content: center;
}
.ui .bottomContainer .statusBar .button svg path {
    fill: #999999;
}
.ui .bottomContainer .statusBar .button[selected] svg path {
    fill: #000000;
}
.ui .bottomContainer .contents {
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 14px;
    border-top: 1px solid #e6e6e6;
    border-radius: 32px 32px 0px 0px;
    background-color: var(--main-color);
}
.ui .bottomContainer .contents .centred {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.ui .bottomContainer .contents .centred .line {
    width: 35px;
    height: 4px;
    background-color: #DDDDDD;
    border-radius: 10px;
}
.ui .bottomContainer .contents .input-container {
    padding: 13px 20px;
    background-color: var(--secondary-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.ui .bottomContainer .contents .input-container svg path {
    fill: #a6a6a6;
}
.ui .bottomContainer .contents .input-container input {
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    background: none;
    border: none;
    outline: none;
    font-size: 16px;
    width: 100%;
}
.ui .bottomContainer .contents .input-container p {
    color: var(--main-search-placeholder);
    font-weight: 500;
}
.ui .bottomContainer .contents .input-container input::placeholder {
    color: #a6a6a6;
}
.ui .bottomContainer .contents .suggestions {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 74px;
    width: 100%;
}
.ui .bottomContainer .contents .suggestions .card {
    display: flex;
    justify-content: center;
    border-radius: 16px;
}
.ui .bottomContainer .contents .suggestions .card .flexed {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 8px;
}
.ui .bottomContainer .contents .suggestions .card .flexed p {
    font-size: 13px;
    font-weight: 500;
    color: var(--main-textColor);
}

.ui .searchContainer {
    position: absolute;
    width: 100%;
    height: calc(100% - 44px);
    background: var(--main-color);
    bottom: 0;
    z-index: 1;
    border-top: 1px solid #e6e6e6;
    border-radius: 32px 32px 0px 0px;
    display: none;
}
.ui .searchContainer[active] {
    display: block;
}
.ui .searchContainer .contents {
    padding: 16px;
    height: calc(100% - 44px);
}
.ui .searchContainer .contents .searchInput {
    display: flex;
    gap: 8px;
}
.ui .searchContainer .contents .searchInput .clearInputBtn[disabled] {
    display: none;
}
.ui .searchContainer .contents .searchInput .input {
    display: flex;
    align-items: center;
    padding: 13px 16px;
    background-color: var(--secondary-color);
    color: var(--main-textColor);
    border-radius: 16px;
    gap: 9px;
    width: 100%;
    transition: 0.2s;
    height: 22px;
}
.ui .searchContainer .contents .searchInput .input:focus-within {
    border: 1px solid #679F73;
    height: 20px;
}
.ui .searchContainer .contents .searchInput .input svg:first-child, .ui .searchContainer .contents .searchInput .input svg:last-child {
    flex-shrink: 0;
}
.ui .searchContainer .contents .searchInput .input input {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--main-textColor);
    font-family: 'Manrope';
    font-size: 15px;
    outline: none;
    font-weight: 500;
}
.ui .searchContainer .contents .searchInput .filters {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary-color);
    border-radius: 16px;
    flex-shrink: 0;
}
.ui .searchContainer .contents .bottom {
    position: absolute;
    width: calc(100% - 32px);
    bottom: 16px;
}
.ui .searchContainer .contents .bottom .button-blue {
    border: none;
    font-family: 'Manrope';
    font-weight: 500;
    font-size: 16px;
    background: var(--button-green);
    color: white;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 14px;
    border-radius: 16px;
    transition: 0.2s;
}
.ui .searchContainer .contents .bottom .button-blue[disabled] {
    background: #cbcbcb;
}

.ui .searchContainer .contents .searchResults {
    display: none;
}
.ui .searchContainer .contents .searchResults[active] {
    display: block;
}

.ui .searchContainer .contents .searchResults {
    margin-top: 24px;
    overflow-y: auto;
    height: calc(100% - 174px);
    border-radius: 16px;
}
.ui .searchContainer .contents .searchResults .card {
    padding: 12px 10px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    transition: 0.2s;
    background: var(--secondary-color);
}
.ui .searchContainer .contents .searchResults .card:active {
    background-color: #F3F3F3;
}
.ui .searchContainer .contents .searchResults .card img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}
.ui .searchContainer .contents .searchResults .card p.name {
    font-size: 16px;
    color: var(--main-textColor);
}
.ui .searchContainer .contents .searchResults .card p.description {
    color: #999999;
    font-size: 12px;
}

.ui .searchContainer .searchSuggestions {
    display: none;
}
.ui .searchContainer .searchSuggestions[active] {
    display: block;
}
.ui .searchContainer .suggestions {
    display: flex;
    justify-content: space-between;
}
.ui .searchContainer .searchSuggestions .banner {
    width: 100%;
    margin-top: 16px;
    margin-bottom: 32px;
}
.ui .searchContainer .bottom .suggestions .card {
    display: flex;
    justify-content: center;
    border-radius: 16px;
}
.ui .searchContainer .bottom .suggestions .card .flexed {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 8px;
}
.ui .searchContainer .bottom .suggestions .card .flexed p {
    font-size: 13px;
    font-weight: 500;
    color: var(--main-textColor);
}


.ui .bottomContainer .contents #home,
.ui .bottomContainer .contents #shopsResult,
.ui .bottomContainer .contents #shopInfo,
.ui .bottomContainer .contents #routeInfo,
.ui .bottomContainer .contents #shopsCategoryResult,
.ui .bottomContainer .contents #parkingInfo,
.ui .bottomContainer .contents #parkingPicked,
.ui .bottomContainer .contents #parkingSelected,
.ui .bottomContainer .contents #routeInfoParking {
    display: none;
}

.ui .bottomContainer .contents #shopsResult {
    margin-top: 0px;
}
.ui .bottomContainer .contents #shopsResult p.resultInfo {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--main-textColor);
}
.ui .bottomContainer .contents #shopsResult p.resultInfo count {
    color: var(--counter-color);
    margin-left: 8px;
}

.ui .bottomContainer .contents[screen="home"] #home {
    display: block;
}
.ui .bottomContainer .contents[screen="shopsResult"] #shopsResult {
    display: block;
}
.ui .bottomContainer .contents[screen="shopInfo"] #shopInfo {
    display: block;
}
.ui .bottomContainer .contents[screen="routeInfo"] #routeInfo {
    display: block;
}
.ui .bottomContainer .contents[screen="shopsCategoryResult"] #shopsCategoryResult {
    display: block;
}
.ui .bottomContainer .contents[screen="parkingInfo"] #parkingInfo {
    display: block;
}
.ui .bottomContainer .contents[screen="parkingPicked"] #parkingPicked {
    display: block;
}
.ui .bottomContainer .contents[screen="parkingSelected"] #parkingSelected {
    display: block;
}
.ui .bottomContainer .contents[screen="routeInfoParking"] #routeInfoParking {
    display: block;
}

.ui .bottomContainer .contents #shopsResult .card, .ui .bottomContainer .contents #shopsCategoryResult .card {
    padding: 10px 10px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    transition: 0.2s;
    background-color: var(--search-resultCard);
}
.ui .bottomContainer .contents #shopsResult .card img, .ui .bottomContainer .contents #shopsCategoryResult .card img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}
.ui .bottomContainer .contents #shopsResult .card p.name, .ui .bottomContainer .contents #shopsCategoryResult .card p.name {
    font-size: 16px;
    color: var(--main-textColor);
}
.ui .bottomContainer .contents #shopsResult .card p.description, .ui .bottomContainer .contents #shopsCategoryResult .card p.description {
    color: #999999;
    font-size: 12px;
}
.ui .bottomContainer .contents #shopsResult .card button.route, .ui .bottomContainer .contents #shopsCategoryResult .card button.route {
    padding: 10px 20px;
    margin-left: auto;
    border: none;
    background: var(--button-green);
    color: white;
    font-family: 'Manrope';
    font-size: 12px;
    border-radius: 12px;
}

.ui .bottomContainer .contents #shopInfo .linear, .ui .bottomContainer .contents #shopsCategoryResult .linear {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
}
.ui .bottomContainer .contents #shopInfo .linear p.openClose {
    margin-left: auto;
    font-size: 14px;
    color: #999999;
    font-weight: 400;
}
.ui .bottomContainer .contents #shopInfo .linear .back, .ui .bottomContainer .contents #shopsCategoryResult .linear .back {
    position: absolute;
    bottom: 64px;
    gap: 2px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 600;
    -webkit-box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-color);
    color: var(--main-textColor);
}
.ui .bottomContainer .contents #shopInfo .linear img.shopPic {
    width: 38px;
    height: 38px;
}
.ui .bottomContainer .contents #shopInfo .linear p.name {
    font-size: 16px;
    font-weight: 600;
    max-width: 100%;
    white-space: nowrap;
    color: var(--main-textColor);
}
.ui .bottomContainer .contents #shopInfo .linear p.description {
    font-size: 12px;
    color: var(--main-textColor);
}
.ui .bottomContainer .contents #shopInfo img.banner {
    width: 100%;
    margin-bottom: 16px;
    border-radius: 16px;
    height: 192px;
    object-fit: cover;
}
.ui .bottomContainer .contents #shopInfo button.route {
    border: none;
    font-family: 'Manrope';
    font-weight: 500;
    font-size: 16px;
    background: var(--button-green);
    color: white;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 14px;
    border-radius: 16px;
}

.ui .bottomContainer .contents #routeInfo .linear, #routeInfoParking .linear {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.ui .bottomContainer .contents #routeInfo .linear p.title, #routeInfoParking .linear p.title {
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    color: var(--main-textColor);
}
.ui .bottomContainer .contents #routeInfo .routePicker, #routeInfoParking .routePicker {
    background-color: var(--routePicker-background);
    border-radius: 16px;
    border: var(--routePicker-border);
    padding: 7px 16px;
    margin-bottom: 8px;
}
.ui .bottomContainer .contents #routeInfo .routePicker p.locate, #routeInfoParking .routePicker p.locate {
    font-size: 14px;
    font-weight: 500;
    color: #acacac;
}
.ui .bottomContainer .contents #routeInfo .routePicker p.name, #routeInfoParking .routePicker p.name {
    font-size: 16px;
    font-weight: 500;
    color: var(--main-textColor);
}


#shopsResult .shop-info {
    width: 100%;
}

.searchBubble {
    position: absolute;
    padding: 16px;
    width: calc(100% - 32px);
    padding-top: 40px;
    display: flex;
    z-index: 2;
}
.searchBubble .searchPointB {
    padding: 17px 16px;
    -webkit-box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
    border-radius: 16px;
    background: white;
    display: flex;
    align-items: center;
}

.catName {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 100px;
    background: #4F6CEB;
    color: white;
    font-weight: 500;
    font-size: 12px;
}
#listShops {
    max-height: 200px;
    overflow-y: auto;
    border-radius: 16px;
}
#home {
    position: relative;
}

.suggestions .card[category="clothes"] {
    background: var(--category-clothes);
}
.suggestions .card[category="food"] {
    background: var(--category-food);
}
.suggestions .card[category="stocks"] {
    background: var(--category-stocks);
}
.suggestions .card[category="wc"] {
    background: var(--category-wc);
}

.menuBar {
    margin-left: auto;
}
.menuBar .bars {
    transition: 0.2s;
}
.menuBar .bars, .menuBar .buttons div {
    width: 44px;
    height: 44px;
    background: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: 12px;
}
.menuBar .buttons div[active] {
    background: var(--button-green);
}
.menuBar .buttons div svg path {
    fill: black;
}
.menuBar .buttons div[active] svg path {
    fill: white;
}
.menuBar .buttons {
    display: none;
}

.menuBar .bars .close {
    display: none;
}
.menuBar.active .bars .close {
    display: block;
}
.menuBar.active .bars .open {
    display: none;
}
.menuBar.active .bars {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: var(--menubar-bars);
}
.menuBar.active .buttons {
    display: block;
}


.ui .searchContainer .contents .bottom .button-blue {
    display: none;
}
.ui .searchContainer .contents .bottom[searchable] .button-blue {
    display: block;
}
.ui .searchContainer .contents .bottom[searchable] .suggestions {
    display: none;
}

.recFilters {
    display: flex;
    gap: 4px;
    margin-top: 16px;
}
.recFilters div {
    background-color: var(--secondary-color);
    color: var(--main-textColor);
    border-radius: 16px;
    padding: 8px;
    font-size: 12px;
    font-weight: 500;
}

#searchBubble[hidden] {
    display: none;
}
#shopsResult .scrollable {
    overflow-y: auto;
    max-height: 250px;
    border-radius: 16px;
}

#basemap {
    transition: 0.2s;
}
#basemap[opacity] {
    opacity: 0.5;
}



polygon[data-parking-id="segment1"] {
    fill: rgba(79, 108, 235, 0.5);
    stroke: #4F6CEB;
    stroke-width: 2;
}
polygon[data-parking-id="segment2"] {
    fill: rgba(236, 83, 67, 0.5);
    stroke: #EC5343;
    stroke-width: 2;
}
polygon[data-parking-id="segment3"] {
    fill: rgba(209, 202, 74, 0.5);
    stroke: #D1CA4A;
    stroke-width: 2;
}
polygon[data-parking-id="segment4"] {
    fill: rgba(103, 159, 115, 0.5);
    stroke: #679F73;
    stroke-width: 2;
}
polygon[data-parking-id="segment5"] {
    fill: rgba(232, 161, 47, 0.5);
    stroke: #E8A12F;
    stroke-width: 2;
}
polygon[data-parking-id="segment6"] {
    fill: rgba(103, 159, 115, 0.5);
    stroke: #679F73;
    stroke-width: 2;
}
polygon[data-parking-id="segment7"] {
    fill: rgba(209, 202, 74, 0.5);
    stroke: #D1CA4A;
    stroke-width: 2;
}

polygon[data-parking-id="segment1"].selected {
    fill: #4F6CEB;
}
polygon[data-parking-id="segment2"].selected {
    fill: #EC5343;
}
polygon[data-parking-id="segment3"].selected {
    fill: #D1CA4A;
}
polygon[data-parking-id="segment4"].selected {
    fill: #679F73;
}
polygon[data-parking-id="segment5"].selected {
    fill: #E8A12F;
}
polygon[data-parking-id="segment6"].selected {
    fill: #679F73;
}
polygon[data-parking-id="segment7"].selected {
    fill: #D1CA4A;
}

#parking .parking-segment-icon {
    display: none;
    pointer-events: none;
}
#parking .parking-segment-group.selected .parking-segment-icon {
    display: block;
}

#parkingInfo p {
    font-size: 16px;
    font-weight: 600;
    color: var(--main-textColor);
}

#parkingPicked p.title, #parkingSelected p.title {
    color: #999999;
    font-size: 14px;
    font-weight: 600;
}
#parkingPicked p#parkingSegment, #parkingSelected p#parkingSegmentSelected {
    font-size: 16px;
    font-weight: 600;
    color: var(--main-textColor);
}
#parkingPicked button, #parkingSelected button {
    margin-top: 24px;
    border: none;
    font-family: 'Manrope';
    font-weight: 500;
    font-size: 14px;
    background: var(--button-green);
    color: white;
    width: 100%;
    padding-top: 11px;
    padding-bottom: 13px;
    border-radius: 16px;
    transition: 0.2s;
}
#parkingSelected button.secondary {
    background: var(--button-secondary);
    color: #599266;
    margin-top: 6px;
}

.menuBar .bars svg path, .menuBar .buttons div svg path {
    fill: var(--main-svg-color);
}
.ui .searchContainer .contents .searchInput .filters svg path {
    fill: var(--main-svg-color);
}
.input svg path {
    fill: var(--main-svg-color);
}
.back svg path {
    fill: var(--main-svg-color);
}
.close svg path {
    fill: var(--closeroute-svg);
}

button.route[disabled] {
    background: var(--button-secondary) !important;
    color: #599266 !important;
}