html {
  height:100vh;
  width: 100vw;
  -ms-touch-action: none; 
    -ms-overflow-style: none;
    -ms-scroll-chaining: none;
}

  :root {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);

    --animation-time: .5s;
    --bg-light-movement: 7s;
    --objLeftPos:0;
    --objBottomPos:0;
    --newLeftPos:0;
    --newBottomPos:0;

    --white-bg:rgb(240,240,240);
    --white-bg-bright:rgb(245,245,245);
    --white-bg-bright-seethru1:rgb(245 245 245 / .75);
    --white-bg-bright-seethru2:rgb(245 245 245 / .5);
    --white-bg-soft:rgb(235,235,235);
    --white-bg-softest:rgb(232,232,233);
    --white-bg-body:rgb(230,230,232);
    --white-bg-darker:rgb(220,220,221);
    --black-bg-extra-bright:rgb(15,15,15);
    --black-bg-bright:rgb(30,30,30);
    --black-bg:rgb(40,40,40);
    --black-bg-light-soft:rgb(47,47,47);
    --black-bg-soft:rgb(55,55,55);
    --black-bg-seethru:rgba(55,55,55,.9);

    --gray:rgb(68, 68, 68);
    --gray-soft:rgb(100, 100, 100);
    --gray-softer:rgb(140, 140, 140);
    --gray-extra-soft:rgb(182, 182, 182);
    --gray-extra-softest:rgb(210, 210, 210);

    --gray-box-shadow:0 1px 5px -2px #333;
    --gray-light-box-shadow:0 1px 5px -2px #777;
    --gray-dark-box-shadow:0 2px 6px -2px #222;
    --gray-inset-box-shadow:inset 0 0 4px -2px #333;
    --gray-dark-inset-box-shadow:inset 0 0 5px -2px #222;

    --brown-light-bg: rgb(223 193 169);
    --brown-gray-light-bg: rgb(213 201 192);

    --blue-bg:rgb(30,144,255);
    --blue-shadow:rgb(81 99 135 / 40%);
    --blue-shadow-light:rgb(81 99 135 / 25%);
    --blue-shadow-darker:rgb(81 99 135 / 50%);
    --purple-bg:rgb(91,113,255);
    --purple-shadow:rgba(70, 87, 194, 0.4);
    --purple-shadow-darker:rgb(70, 87, 194, 0.8);
    --indigo-bg: #606daa;
    --red-bg:rgb(245, 75, 30);
    --red-bg-soft: rgb(255 181 161);
    --red-bg-extra-soft: rgb(243 217 210);
    --red-shadow:rgb(119 20 20 / 40%);
    --red-shadow-darker:rgb(119 20 20 / 50%);
    --orange-bg:rgb(255, 115, 0);
    --orange-bg-soft: rgb(248 166 99);
    --orange-bg-softer: rgb(250, 185, 131);
    --orange-light: rgb(248 225 208);
    --orange-shadow:rgb(139 83 43 / 40%);
    --orange-shadow-darker:rgb(139 83 43 / 50%);
    --yellow-bg:#f3c623;
    --yellow-shadow:rgb(130 130 47 /40%);
    --yellow-shadow-darker:rgb(130 130 47 /50%);
    --gray-green-soft: rgb(184 203 184);
    --gray-green-extra-soft: rgb(203 211 203);
    --green-bg:rgb(6, 183, 42);
    --green-bg-soft: rgb(133 214 150);
    --green-bg-dark: rgb(91, 165, 98);
    --green-shadow:rgb(81 135 106 / 40%);
    --green-shadow-darker:rgb(81 135 106 / 50%);

    --foam:   #f7f3ef;
    --latte:  #d3b8ae;
    --bean:   #6f4e37;
    --espresso:#3b2f2f;
    --cream:  #fff9f2;
    --accent: #c48e5c;

    --font-size-body:max(16px,calc(.6vw + .6vh));
    --font-size-body-smaller:max(15px,calc(.55vw + .55vh));
    --font-size-small:max(13px,calc(.45vw + .45vh));
    --font-size-tiny:max(11px,calc(.4vw + .4vh));
    --font-size-tiniest:max(10px,calc(.35vw + .35vh));
    --font-size-h1:max(24px,calc(1.2vw + 1.2vh));
    --font-size-h2:max(20px,calc(1vw + 1vh));
    --font-size-h3:max(18px,calc(.8vw + .8vh));
    --font-size-h4:max(17px,calc(.7vw + .7vh));
    --font-size-h5:max(16.5px,calc(.65vw + .65vh));
  }
  .particleFountainRight {
    animation: particleFountainRight var(--animation-time) infinite;
  }

  .meterPulse {
    animation: meterPulse 2.5s infinite;
    position: relative;
    box-shadow:inset 0 .25rem .25rem rgba(255,255,255,.05), .5px .5px 1.5px 0 rgba(0,0,5,.15);
  }
  .meterPulse2 {
    animation: meterPulsetwo 2.5s infinite;
      box-shadow:inset 0 .25rem .25rem rgba(255,255,255,.1), .5px .5px 1.5px 0 rgba(0,0,5,.1);
  }

  .text-sm{
    font-size: var(--font-size-small);
  }

  .text-tiny{
    font-size: var(--font-size-tiny) !important;
  }

  .particleBorderRight {
    animation: particleBorderRight var(--animation-time) infinite;
    }

    .meterBlue {
      background-color: var(--blue-bg);
      box-shadow:inset 0 .25rem .25rem rgba(255,255,255,.05), .5px .5px 1.5px 0 var(--blue-shadow);
    }
    .meterRed {
      background-color: var(--red-bg);
      box-shadow:inset 0 .25rem .25rem rgba(255,255,255,.05), .5px .5px 1.5px 0 var(--red-shadow);
    }
    .meterOrange {
      background-color: var(--orange-bg);
      box-shadow:inset 0 .25rem .25rem rgba(255,255,255,.05), .5px .5px 1.5px 0 var(--orange-shadow);
    }
    .meterYellow {
      background-color: var(--yellow-bg);
      box-shadow:inset 0 .25rem .25rem rgba(255,255,255,.05), .5px .5px 1.5px 0 var(--yellow-shadow);
    }
    .meterGreen {
      background-color: var(--green-bg);
      box-shadow:inset 0 .25rem .25rem rgba(255,255,255,.05), .5px .5px 1.5px 0 var(--green-shadow);
    }
  
  .meter-track{
    width: 90%;
    margin-left: 5%;
    height: 23px;
    outline: none;
    border-radius: 4px;
    border: none;
    background-color: var(--white-bg);
    box-shadow: inset 0 1px 3px 0 rgb(215,215,215);
    margin-bottom: 10px;
  }
  .challenge-container:hover .meter-track{
    box-shadow: inset 0 1px 2px 0 rgb(205,205,205), inset 0 -1px 0 0 rgb(230,230,230);
  }
  .challenge-container:hover .meter-track .meterPulse{
    box-shadow: .5px .5px 1.5px 0 rgba(0,0,5,.2);
  }
  .challenge-container:hover .meter-track .meterBlue{
    box-shadow: .5px .5px 1.5px 0 var(--blue-shadow-darker);
  }
  .challenge-container:hover .meter-track .meterRed{
    box-shadow: .5px .5px 1.5px 0 var(--red-shadow-darker);
  }
  .challenge-container:hover .meter-track .meterOrange{
    box-shadow: .5px .5px 1.5px 0 var(--orange-shadow-darker);
  }
  .challenge-container:hover .meter-track .meterYellow{
    box-shadow: .5px .5px 1.5px 0 var(--yellow-shadow-darker);
  }
  .challenge-container:hover .meter-track .meterGreen{
    box-shadow: .5px .5px 1.5px 0 var(--green-shadow-darker);
  }
  .personalSkillSeasonSummary{
    width: 50vw;
    margin: 35px 0 0 0;
    max-width: 450px;
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-items: flex-start;
    font-size: var(--font-size-h4);
  }

.decor{
    -webkit-tap-highlight-color: transparent;
    border: none;
    outline: none;
}

.click, .click2l, .click2r{
  cursor:pointer;
  font-size:16px;
  animation-duration: .3s;
}
.click2l:hover, .click2r:hover {
  transform: scale(1.005);
}
.click:active {
  outline:none !important;
  box-shadow: 0 .75px 1px 0 rgba(0,0,0,.1)!important;
  animation-duration: .3s;
  transform:scale(.995) translate3d(0,1px,0);
}
.click:after {
  outline:none !important;
  box-shadow:inset 0 .75px 1.5px 0 rgba(0,0,0,.1),inset 0 -.25px .5px 0 rgba(0,0,0,.1) !important;
  border:none;
  transform:scale(.995) translate3d(0,1px,0);
}
.hover-click{
  &:hover{
    transform: translateY(-1px);
    transition:transform ease .1s;
    box-shadow: 0 2px 3px -1px #4a4a4a;
  }
}

.flex {
    display: flex;

    &.a-c{
      align-items: center;
    }
    &.j-c{
      justify-content: center;
    }
    &.j-sb{
      justify-content: space-between;
    }
    &.j-sa{
      justify-content: space-around;
    }
}
.w100{
  width: 100%;
}

.cgap1{
  column-gap: min(1vw, 10px)
}
.cgap2{
  column-gap: min(2vw, 15px)
}
.cgap3{
  column-gap: min(3vw, 20px)
}

.mt1{
  margin-top: 1vh;
}
.mt2{
  margin-top: 2vh;
}
.mt3{
  margin-top: 3vh;
}
.mb1{
  margin-bottom: 1vh;
}
.mb2{
  margin-bottom: 2vh;
}
.mb3{
  margin-bottom: 3vh;
}
.my1{
  margin: 1vh 0;
}
.my2{
  margin: 2vh 0;
}
.my3{
  margin: 3vh 0;
}

.link-temporarily-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: wait;
}

.button{
  outline: none;
  cursor: pointer;
  border:solid 2px transparent;

  &.nowrap{
    white-space: nowrap;
  }

  &.round{
    border-radius: 50px;
    padding: 5px 10px;
  }

  &.pd1{
    padding: 2px max(1vw, 7px);
  }
  &.pd2{
    padding: min(7px, 2vh) min(20px, 4vw);
  }
  &.px3{
    padding: min(14px, 3vh) min(30px, 6vw);
  }

  &.active{
    border-color: var(--green-bg);
    background-color: var(--green-bg-soft);
  }
}

.bgwhite{
  background-color: var(--white-bg-bright);
  color: var(--black-bg);
}

.flex.columns {
    flex-wrap: nowrap;
    overflow-x: auto;
}

.flex.wrap {
    flex-wrap: wrap;
}

.column.flex.wrap {
    row-gap: 10px;
}

.column .row {
    width: 100%;
}

.small-text{
  font-size: var(--font-size-small);
}
.tiny-text{
  font-size: var(--font-size-tiny);
}
.tiniest-text{
  font-size: var(--font-size-tiniest);
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
}
a{
    text-decoration: none;
    color: inherit;
}

.bs1{
    box-shadow: 0 2px 3px #3334;
}
button:active{
 box-shadow: 0 0 1px #3338;
}
button:focus {
  outline-color:#00d6a1;
}
.bg-green{
    background: #06b72a;
    color: #fffa;
}
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (overscroll-behavior-y: none) {
    html {
      min-height: 100.3%;
      overscroll-behavior-y: none;
    }
  }
}
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (not (overscroll-behavior-y: none) ){
    html {
      min-height: 100%;
      overflow: hidden;
    }
    body {
      margin: 0px;
      max-height: 100%;
      /* overflow: auto; */
      -webkit-overflow-scrolling: touch;
    }
  }
}
body {
    width:100%;
    height:100vh;
    clear: both;
    background: linear-gradient(#dcdad8, #e0dedb);
    transition: background ease .2s;
    font-family: 'poppins-reg', 'sanf serif';
    font-weight: normal!important;
    color:rgb(20,20,20);
    -webkit-touch-callout: none;
    -webkit-overflow-scrolling: touch;
    position:fixed;
    left:0;
    top:0;
    margin:0;
    overflow: hidden;
    overscroll-behavior:contain;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    font-size:var(--font-size-body);

    &.blur{
      filter:blur(2px) brightness(0.95);

      & content{
        height: 100vh!important;
        overscroll-behavior:contain;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: none;
      }
    }

    &.darkMode{
      background: radial-gradient(circle at center, #141413 0%, #1b1a1a 40%, #161717 70%, #191918 100%);
      background-attachment: fixed;
      background-repeat: no-repeat;
      color:var(--white-bg-bright);

      & .discover_filters {
        background-color: var(--black-bg);
        &.show{
          background: var(--black-bg-soft);

          & ~ :is(#filterConfirm, #filterClear, #filterReset) {
            &#filterConfirm {
              background-color: var(--gray-green-soft);
            }
          }
        }

        & .customSlider:not(.switch) {
          .wrapper{
            padding-top: 8px;
            img {
              max-height: 33px;
              filter:drop-shadow(0 1px 2px #111);
            }
          }
          .slider{
            background: #66666666;
            height: 55px;
            padding:5px 0;
          }
        }
        .filter.show{
          background: var(--black-bg);
          color: var(--white-bg-soft);
        }
        :is(.filter, .inners){
          background: var(--black-bg);
          color: var(--white-bg);

          .slidecontainer + .label{
            color: var(--white-bg-body);
          }

          &.open_til {
            & .openUntil {
              & .time {
                box-shadow: var(--gray-box-shadow);
                background: var(--black-bg-bright);
                color: var(--white-bg-darker);
              }
            }
          }
        }
      }

      #mapToggle{
        background-color: var(--espresso);
      }
      nav.map #mapToggle img{
        filter: invert(1);
      }
    }
}
body :is(div, h1, h2, h3, h4){
  box-sizing: border-box;
}
body.dark {
    background:#333333;
}
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px 7px #ffcf3b88;
  }
  50% {
    box-shadow:0 0 40px 12px #ffcf3bbb;
  }
}

@keyframes pulse-twice {
  0%, 100% {
    transform: scale(1);
  }
  25%, 75% {
    transform: scale(1.03);
  }
  50% {
    transform: scale(1);
  }
}

#logo-loader-canvas-wrapper.pulse-twice {
  animation: pulse-twice 0.4s ease-in-out;
  transform-origin: center center;
}

#logoDissolveCanvas.pulse {
  background: transparent;
  animation: pulseGlow 2s ease-in-out forwards;
  border-radius: 50%;
  pointer-events: none;
}

#coffeePopCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  width: 100vw;
  height: 100vh;
  display: none;
  background: transparent;
  pointer-events: none;
}
.bean-canvas{
  position: absolute;
  top: -2vh;
  cursor: pointer;
}
#cafeTagManager{
  position: fixed;
  bottom: 0;
  z-index: 100;
  right: 0;
  display: flex;
  align-items: center;
  background: var(--white-bg);
  padding: 5px 15px;
  border-radius: 8px 0 0 0;
  height: 100px;
  box-shadow: var(--gray-dark-box-shadow);
  width: 50vw;
  max-width: 300px;
  column-gap: 10px;
  color: var(--black-bg);
  & .label{
    font-size: var(--font-size-small);
  }
  & .actions {
    display: flex;
    min-width: 36px;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
    align-items: center;

    .save{
      background: var(--blue-bg);
      color: var(--white-bg);
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
    }

    .close{
      height: 33px;
      width: 33px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    img {
      height: 20px;
    }
  }
}
nav {
  max-width: 100vw;
  height:8vh;
  min-height: 36px;
  font-size: var(--font-size-h1);
  display:flex;
  align-items:center;
  justify-content: center;
  background: rgb(230, 228, 224);
  user-select:none;
  padding: 0 calc(min(5%, 5px) + 1vw);
  overflow: hidden;
  position: relative;
  z-index: 10;
  box-shadow: 0 2px 5px rgb(125 61 37 / 10%);
  transition: height .2s, min-height .2s, background .2s ease;
}

nav.siteLinks{
  display: flex;
  column-gap: 3vw;
  justify-content: flex-start;
  overflow-x: auto;
  z-index: 0;
  width: 100%;
  padding: 0 5vw 0 3vw;
  margin-bottom: calc(62px + 5vh);

  & a{
    width: unset;
    display: inline-flex;
    font-size: var(--font-size-body);
    white-space: nowrap;
    padding-left: 1vw;
    
    &:not(:last-child):after{
      content: "";
      display: block;
      height: 75%;
      width: 1px;
      background: #ccc;
      margin-left: 4vw;
    }

    &:first-of-type{
      font-weight: normal;
      font-size: var(--font-size-body);
      color: inherit;
      margin: 0;
    }
  }
}

.bhl-color-bar {
  position:fixed;
  top:8vh;
  background: linear-gradient(to right, #ffcc3b, #ff7300);
  box-shadow: none;
  width:100%;
  height:4px;
  border-radius:0;
  transition:height ease-in .2s;
  z-index:2;
  opacity: 0;
  transition: opacity .3s ease;
}

.bhl-color-bar.on {
  animation: shootRightOffScreen .6s forwards;
  opacity: 1;
}

.bhl-color-bar.on .turnLightBarOn {
  box-shadow: 0 0 8px #ffba3b55;
}

.turnLightBarOn {
  animation: shootRight .4s;
  opacity: 0;
  transition: opacity .3s ease;
}

#PageDetails .turnLightBarOn, #PageDetails .turnedOn {
  right:calc(100vw + 500px);
  animation: shootRight 1s infinite;
}

.turnLightBarOn, .turnedOn {
  position: absolute;
  width: calc(100vw + 15px);
  height: 100%;
  border-radius: 20px;
  background-color: #ffdf3b;
  right: -15px;
  box-shadow: 0 0 10px 3px #ffda3b45;
  animation: fadeout .2s forwards;
}

body.darkMode nav{
  /* background: rgb(39, 37, 36); */
  background-color: transparent;
  

  & #mapToggle{
    background-color: rgba(77 85 82 / 99%);
    color: var(--cream);
    box-shadow: -4px -3px 40px #353733, -1px 2px 5px #19211a, inset -2px 2px 5px #687771;

    &.hidden img{
      filter: invert(.8);
    }
  }

  .location_filter {
    background-color: rgba(70 75 91 / 99%);
    box-shadow: 4px -3px 40px #2c2d306b, -3px 2px 5px #242b2563, inset 2px 2px 5px #5f5b52;
  }

  & ~ .saved_cafes_modal{
    background-color:rgba(70 75 91 / 99%);
    box-shadow: 4px -3px 40px #2c2d30, 1px 2px 5px #19211a, inset 2px 2px 5px #5f5b52;

    .savedListsIcon {
      background: rgb(65 67 68 / 94%);
      box-shadow: 3px -3px 40px #31333a60, 1px 2px 5px #1515188f, inset 2px 2px 5px #8e9598;
    }

    img[src="/assets/icons/heart.png"]{
      filter: invert(.9);
    }
  }
  & ~ .saved_cafes_modal img[src="/assets/icons/heart.png"]{
      filter: invert(.8), brightness(.6);
  }
}

nav:is(.fade,.hide){
  animation: fadeout .2s ease forwards;
  opacity: 0;
  height: 0;
  min-height: 0;
}

nav a, nav div{
  text-align: left;
}
nav div{
  text-align: right;
}

nav.fade ~ content{
  height: 100vh;
}
nav a{
    outline: none;
    width: 70px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius:8px;
}
nav a:first-of-type{
    font-size: 1.3rem;
    color: #333;
    font-weight: bold;
    margin: 0 auto 0 0;
}
nav a img{
    height: 16px;
    object-fit: contain;
}
nav div{
    outline: none;
    width: auto;
    cursor: pointer;
    margin: 0 0 0 auto;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
nav div img{
    height: 22px;
    width: 70px;
}
nav img {
    height:100%;
    max-height: 50%;
    max-width:100px;
    object-fit: contain;
}
.logo_wrapper {
  margin: 0 calc(.1vw + 54px) 0 15px;
  position: relative;
  width: calc(100% - 54px);
  transition: width ease .3s, margin ease .3s;
  & .close{
    position: absolute;
    right: 0;
    width: 50px;
    height: 100%;
    padding: 10px 0;
    pointer-events: none;
    opacity: 0;
    display: flex;
  }
  & input{
    border-radius: 12px;
    background-color: rgb(159 159 159 / 3%);
    border: none;
    outline: none;
    height: 5vh;
    font-size: var(--font-size-h3);
    transition: padding ease .2s;
    padding-left: calc(6vw + 20px);
    padding-bottom: 4px;
    font-weight: 600;
    font-family: 'quicksand', 'sanf serif';
    color: #d36032;
    width: 100%;
    box-shadow: inset 0px 0px 2px #c2bebd, 0px 0px 1px #868483;
    color: var(--black-bg);

    &::placeholder{
      color:var(--gray);
      color: var(--espresso);
    }

    &:focus{
      padding-left: calc(5vw + 20px);
      background-color: rgb(159 159 159 / 5%);
      box-shadow: inset 0px 0px 3px #696461;
      color: var(--black-bg);
    }
    &:not(:placeholder-shown){
      background-color: rgb(178 236 223 / 61%);

      & ~ .close{
        pointer-events: auto;
        animation: fadein ease forwards .2s;
        opacity: 1;
      }
    }
  }
}

.location-bar {
  display: inline-flex;
  float: right;
  align-items: center;
  padding: 0 1vw 1vh 2vw;
  justify-content: flex-end;
  gap: 0.15rem;
  position: relative;
  font-size: var(--font-size-small);
  color: var(--gray-softer);
  top: 0;
  right: 0;

  #current-area{
    cursor: pointer;
  }
}
#locate-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
}

.out-of-area {
  text-align: center;
  padding: 2rem 4%;
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 800px;

  & .head {
    font-size: var(--font-size-h2);
    margin: 1rem 0;
  }
  & .buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
  }
  & .btn {
    background: var(--purple-shadow-darker);
    box-shadow: var(--gray-light-box-shadow);
    font-size: var(--font-size-body);
    font-weight: bold;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    outline: none;
    border: none;
    cursor: pointer;

    &:is(:focus, :active){
      outline:none;
      border:none;

    }
  }
  & .votes {
    margin-top: 1rem;
    font-size: var(--font-size-body-smaller);
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  & .exploreDenver{
    width: 100%;
    margin-bottom: 6vh;
    
    .btn {
      background: var(--blue-bg);
      cursor: pointer;
    }
  }

  & .joinExplorers{
    width: 100%;
    margin-top: 5vh;

  .headline {
      font-size: var(--font-size-h2);
      color: var(--espresso);
      font-weight: 700;
      margin-bottom: 2vh;
  }

  button.row {
      background:transparent;
      height: 33px;
      border: solid 2px #333333;
      border-radius: 6px;
      width: 100%;
      padding: 0;
      margin: 0 auto;
      outline: none;
      color: var(--black-bg);
      cursor: pointer;
      font-family: inherit;
      font-weight: 600;
      font-size: var(--font-size-body-smaller);
  }

  .column {
      justify-content: space-between;
      text-align: left;
  }

  .description {
      font-size: var(--font-size-h4);
      text-align: left;
      width: 97%;
      margin: 0 auto 2vh auto;
  }

  img {
      max-height: 28px;
  }

  .flex.columns {
      column-gap: min(20px, 3vw);

      &.row{
        column-gap: min(15px, 2vw);
        font-size: var(--font-size-small);
      }
  }



    h4 {
      font-weight: 400;
      margin-bottom: 1vh;
    }

    .wrapper {
      line-height: 22px;
      margin: 3vh 0;
      font-size: var(--font-size-body);
      color: var(--espresso);
      background: var(--white-bg);
      border-radius: 4px;
      padding: min(2.5vh, 20px) min(4vw, 15px);
    }

    ul {
      width: 86%;
      margin: 2vh auto;
      text-align: left;
      font-size: var(--font-size-body-smaller);
      color: var(--black-bg);
    }
    
    .btn {
      background: var(--accent);
      cursor: pointer;
      font-family: 'quicksand', sans-serif;
      font-size: var(--font-size-h4);
      letter-spacing: .25px;
    }
  }
}


nav.hide_filters #mapToggle:not(.hidden) ~ .logo_wrapper{
  margin-right: 20px;
  width: calc(100% - 0vw - 20px);
}
nav.homeCardShown #mapToggle{
  display: none;
}

body.darkMode .logo_wrapper{

  img{
    left: 2.5vw;
  }
  & input{
    box-shadow: inset 0px 0px 3px #6d6d6d38;
    text-shadow: 0px 1px #272727;
    padding-left: calc(5vw + 20px);
    padding-bottom: 4px;
    font-weight: bold;
    font-family: 'quicksand', 'sanf serif';
    color: #d36032;
    background-color: rgb(159 159 159 / 5%);
    border: none;

    &::placeholder{
      color: #d36032;
    }

    &:focus {
      background-color: rgba(185, 181, 179, 0.096);
      padding-left: calc(5vw + 27px);
    }
    &:not(:placeholder-shown) {
      background-color: #b2b8ec59;
      & ~ .close {
        img{
          filter: invert(.9);
        }
      }
    }
  }
}

nav img.logo{
  min-height: 20px;
  width: 20px;
  position: absolute;
  left: 2vw;
  margin-top: -3px;
}
nav .nav_menu{
	column-gap:15px;
}
.dark nav {
    background:#444444;
}

.searchHistoryWrapper {
  position: fixed;
  top: 8vh;
  left: 0;
  width: 100%;
  display: flex;
  background-color: var(--white-bg-darker);
  box-shadow: 0 2px 8px -2px #33333399;
  border-radius: 0 0 10px 10px;
  padding: 2vh 1vw;
  flex-wrap: wrap;
  justify-content: center;
  overflow-x: hidden;
  z-index: 1000;
  row-gap: 1px;
  cursor: default;

  & .header{
    padding: 0 5% 2vh 5%;
    width: 100%;
    text-align: left;
    font-size: var(--font-size-h4);
    display: flex;
    justify-content: space-between;
    align-items: center;

    & img {
      height: 12px;
      width:33px;
      cursor: pointer;
      pointer-events: auto;
    }
  }

  & .result{
    text-align: left;
    padding: 15px 3vw;
    font-size: var(--font-size-body-smaller);
    color: var(--black-bg-soft);
    width: 94%;
    border: none;
    outline: none;
    box-shadow: 0 1px 2px -1px #aaa;
    cursor: pointer;
  }
}
content{
    height:92vh;
    width: 100vw;
    display:flex;
    flex-wrap: wrap;
    overflow-x:hidden;
    overflow-y: auto;
    z-index:1;
    -ms-overflow-style:none;
    scrollbar-width:none;
    align-content: flex-start;
    user-select: none;

    position: relative;

    & .geometry-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
      
      & .geo-line {
        stroke: rgb(139, 106, 75);
        stroke-width: 2;
        fill: none;
        opacity: 0.2;
      }
    }
    
}
#ball {
  width: 25px;
  height: 25px;
  position: absolute;
  background-color: white;
  border-radius:50px;
  display:none;
  z-index:11;
}
#my-element {
  width: 0;
  height: 0;
  background-color: #f0f0f0;
  justify-content: center;
  align-items: center;
  line-height: 220px;
  font-size: 24px;
  margin:0 auto;
  overflow: hidden;
  transition: height .5s ease, width .4s ease;
  transform-origin: center;
  user-select: none;
}
#my-element .map{
    min-width: 300%;
    height: 300%;
    display: flex;
    flex-wrap: wrap;
}
#my-element .map div{
    min-width: 33.33%;
    width:33.33%;
    height: 33.33%;
    text-align: center;
    white-space: normal;
    background-color:lightblue;
}
#my-element .map div.center{
    background-color:inherit;
}
#my-element.fadein{
    width: 220px;
    height: 220px;
    animation:fadein ease forwards .4s;
}

.custom-cursor {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
  z-index: 1001;
}
.custom-cursor:hover{
    cursor: none;
}

.custom-cursor.snowball{
    background:var(--white-bg);
    box-shadow: var(--gray-box-shadow);
}

.typewriter h1 {
      overflow: hidden;
      border-right: .15em solid orange;
      white-space: nowrap;
      margin: 0 auto;
      letter-spacing: 2px;
      animation: typing 3s steps(30, end), blink-caret .75s step-end infinite;
    }

    .typewriter {
      text-align: center;
      display: inline-block;
    }

    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }

    @keyframes blink-caret {
      from, to { border-color: transparent }
      50% { border-color: orange; }
    }
    @keyframes fadein {
        from{opacity: 0;}
        to{opacity: 1;}
    }
    @keyframes fadeout {
        from{opacity: 1;}
        to{opacity: 0;}
    }
    .fade-out {
      animation: fadeout 1s forwards;
    }
    @keyframes shrinkWidth {
      from{transform: scaleX(1)}
      to{transform: scaleX(0)}
    }
    @keyframes growWidth {
      from{transform: scaleX(0)}
      to{transform: scaleX(1)}
    }

    #avoidThisElement {
    width:50px;
    height:50px;
    border: 5px solid var(--green-shadow);
    background-color: rgb(210 210 210);
    text-align:center;
    display: flex;
    user-select: none;
    align-items: center;
    justify-content: center;
    position:absolute;
    border-radius: 3px;
    top: calc(4vh + 20px);
    left: 400px;
    transition: left ease .4s,top ease .4s, background ease .8s;
    z-index: 1000;
    cursor: pointer;
    }

    #avoidThisElement.initialize{
        opacity: 0;
        animation: fadein .2s ease forwards;
        animation-delay: 3s;
    }

@keyframes caughtEm {
      0%{ transform:scale(1); 
        width:50px;
        height:50px;
      }
      50%{transform: scale(1.15);
        width:80px;
        height:80px;
      }
      100%{ transform:scale(1); 
        width:70px;
        height:70px;
      }
    }

#avoidThisElement:before{
    content: 'Catch Me!';
}
#avoidThisElement:after {
    content: '';
    position: absolute;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    opacity: 0;
    height: 100%;
    animation: opacity 1s ease-in-out;
    width: 100%;
}

#avoidThisElement.caught:after{
  opacity: 1;
}
#avoidThisElement:hover,#avoidThisElement.caught{
    background: var(--white-bg-softest);
    animation:caughtEm .2s ease forwards;
    animation-delay:.8s;
}
#avoidThisElement.caught{
    cursor: none;
}
#avoidThisElement.caught:before{
    content:'Oh You Think So?';
    animation:fadein ease 1s forwards;
}

@keyframes phasetwoAvoidfadeinout {
    0%{opacity: 0;}
    60%{opacity: 1;}
    100%{opacity:0;}
}
@keyframes phasetwoAvoidfadeout {
    from{opacity: 1;width: 70px;height: 70px;}
    to{opacity: 0;width: 50px;height: 50px;}
}
#avoidThisElement.caught.fadeout{
    z-index: 0;
    cursor: default;
    animation:phasetwoAvoidfadeout .5s ease forwards;
}
#avoidThisElement.caught.fadein{
    z-index: 0;
    font-size: var(--font-size-small);
    left: auto;
    top: auto;
    animation:phasetwoAvoidfadeinout 3s ease forwards;
}
#avoidThisElement.caught.fadein:before{
    content:'Catch Me Again!';
    min-width: 50px;
    line-height: 15px;
}
.emailPromptOverlay{
    position: fixed;
    height: 100vh;
    top: 0;
    z-index: 1000000;
    background: var(--black-bg-seethru);
    color: var(--black-bg-light-soft);
    width: 100%;
    overflow-y: auto;
    padding-bottom: 3vh;

    & .emailPromptForm{
      width: 96%;
      max-width: 750px;
      background: var(--white-bg);
      margin: 1vh auto;
      padding: 2vh 4vw 4vh 4vw;
      border-radius: 8px;

      & h1 {
        padding: 10px 1vw;
      }

      & p{
        padding: 0 2vw;

        &.tx-small{
          font-size: var(--font-size-small);
        }
      }

      & .current-benefits{
        margin-top: 2vh;

        h2{
          padding: 0 2vw;
          font-size: var(--font-size-h3);
        }
      }

      & label{
        display: block;
        margin-bottom: 1vh;
        text-align: center;
        padding: 0 3vw;
        margin-bottom: 1vh;

        &.upgradeSelect{
          margin-top: 3.5vh;
        }
      }

      & select {
        min-width: 50%;
        padding: 5px 2vw;
        border-radius: 4px;
        border: solid 1px #888888;
        margin:0 auto 2vh auto;
        background-color: var(--white-bg-bright);
        color: var(--black-bg);
        outline: none;
        box-shadow: var(--gray-light-box-shadow);
        height: 33px;
        display: flex;
        justify-content: center;
      }

      & .divider{
        padding: 0 3vw;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase;
      }

      & input, & textarea{
        border-radius: 6px;
        height: 40px;
        outline: none;
        box-shadow: var(--gray-inset-box-shadow);
        padding: 0 1rem;
        width: 94%;
        font-size: var(--font-size-body);
        border: 1px solid #ccc;
        margin: 1rem auto 0.5rem auto;
        display: block;
        box-sizing: border-box;

        &:is(textarea){
          height: auto;
          min-height: 120px;
          padding: 1rem;
        }
      }

      .email-error {
        color: var(--red-bg); min-height:1em; margin-bottom:1rem;
      }
      .email-buttons {
        display:flex; gap:0.5rem; justify-content:center;
      }
      .email-buttons button {
        flex:1;
        padding:0.5rem;
        font-size:var(--font-size-body-smaller);
        border:none;
        border-radius:4px;
        cursor:pointer;

        &.email-cancel { background:#ccc; }
        &.email-submit { background:var(--blue-bg); color:var(--white-bg); box-shadow: var(--gray-box-shadow);}
        &.email-submit2 { background:var(--green-bg); color:var(--white-bg); }
      }

      .email-cancel-sub {
        background-color: transparent;
        color: var(--espresso);
        font-size: var(--font-size-small);
        border: solid 1px var(--white-bg-darker);
        border-radius: 3px;
        cursor: pointer;
        padding: 4px 12px;
        margin: 4vh auto 0 auto;
        display: block;
      }

      .expiration {
        margin: 2vh 0;
        padding: 0 2vw;
        font-style: italic;
      }

      .share-prompt{
        width: 100%;
        height: 50px;
        margin-bottom: 4vh;

        & .share-btn{
          margin-left: auto;
          padding: 5px 10px;
        }
      }

      ul {
        list-style: none;
        padding: 0;
        line-height: 1.4;
        margin: 1rem auto;
        width: 94%;
        font-size: var(--font-size-body-smaller);
      }
      ul li {
        position: relative;
        padding-left: 1.75rem;
        margin-bottom: 0.6rem;

        b.link{
          cursor: pointer;
        }
      }
      ul li::before {
        content: "☕";
        position: absolute;
        left: 0;
        top: 0;
        font-size: 1rem;
        color: var(--accent);
      }

      .btn-link {
        background: var(--blue-bg);
        font-weight: bold;
        color: var(--cream);
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 8px;
        font-size: var(--font-size-h4);
        cursor: pointer;
        margin: 4vh auto;
        display: block;
        text-align: center;
        max-width: 82%;
      }
      .btn-link:hover {
        background: var(--bean);
        transform: scale(1.03);
      }

      .explorersApp{
        margin-bottom: 3vh;
        h4{
          margin: 2vh 0 1vh 0;
        }
        p {
            margin: 1vh 0;
            font-size: var(--font-size-body-smaller);

            &.small-text{
              font-size: var(--font-size-small);
              padding: 0 1vw;
            }
        }
        .rewardGrid {
            display: flex;
            flex-wrap: wrap;
            border: solid 1px var(--gray-extra-soft);
            border-radius: 4px;

            &.hidden{
              display: none;
            }

            &.verified{
              margin-top: 2vh;
            }
        }

        .rewardGrid .row {
            width: 100%;
            display: flex;
            border-top: 1px solid var(--gray-extra-soft);

            p{
              padding: 0;
              margin: 0;
            }
        }

        .rewardGrid .row div:first-of-type {
          flex: 3;
          border-right: solid 1px var(--gray-extra-soft);
          justify-content: flex-start;
          text-align: left;
        }

        .rewardGrid .row div {
            flex: 1;
            padding: 0 5px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .rewardGrid .row:first-of-type {
            border-top: none;
        }

        button{
          background: var(--gray-extra-softest);
          border: none;
          height: 40px;
          padding: 0 min(5vw, 21px);
          box-shadow: var(--gray-light-box-shadow);
          display: flex;
          align-items: center;
          font-family: 'quicksand', sans-serif;
          font-weight: 500;
          column-gap: min(15px, 1.5vw);
          font-size: var(--font-size-body-smaller);
          color: var(--black-bg);
          cursor: pointer;
          outline: none;
          margin-top: 2vh;

          img{
            height: 60%;
            min-height: 20px;
          }
        }
      }
    }

    & .previewCard{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 1vh 0;
      padding: 0 0 3vh 0vw;
      box-shadow: 0 2px 6px -2px #c7c5c2;
      background-color: var(--white-bg-soft);
      border-radius: 18px;
      position: relative;
      overflow: visible;

      & .footer {
        display: none;
      }

      canvas.electric-border {
        position: absolute;
        top: -8px;
        left: -8px;
        width: calc(100% + 16px);
        height: calc(100% + 16px);
        pointer-events: none;
        z-index: 2;
      }

      & .media-wrapper{
        width: 100%;
        border-radius: 18px 18px 0 0;
        padding: 0;
        max-height: 240px;

        & :is(img.media-img,.media-vid){
          object-fit: cover;
          width: 100%;
          min-width: 100%;
          min-height: 100%;
          height: auto; 
        }

        & .video-play-button {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 64px;
          height: 64px;
          background: url('/assets/icons/play-button.png') no-repeat center center;
          background-size: contain;
          cursor: pointer;
          z-index: 2;
          pointer-events: auto;
          opacity:1;
        }

        & .video-wrapper.playing .video-play-button {
          transition:opacity .1s;
          opacity: 0;
          pointer-events: none;

        }
      }

      & .inline{
        position: absolute;
        right:2vw;
        font-size: var(--font-size-small);
        top: 1vh;
        background:rgba(182, 182, 182, 95%);
        border-radius: 8px;
        padding:4px 12px;
        color:rgb(18 18 18);

        &.open{
          
          &.one{
            background-color:rgba(255, 127, 80,95%);
            font-size: var(--font-size-body-smaller);
          }
          &.two{
            background-color:rgb(247 184 109 / 95%);
          }
          &.three{
            background-color:rgb(179 238 165 / 90%);
          }
        }

        &.closed{
          background-color:rgb(179 238 165 / 95%);
          &.one{
            font-size: var(--font-size-body);
          }
          &.two{
            background-color:rgb(247 184 109 / 95%);
          }
          &.three{
            background-color:rgba(255, 127, 80,95%);
          }
          &.four{
            background-color:rgb(231 227 221 / 95%);
          }
        }
      }

      & .details{
        display: block;
        overflow: visible;
        padding:0 2vw;
        width: 100%;
        margin: 18px auto;
        background: transparent;
        & .rewards{
          display: none;
        }
    
        & .changes{
          display: none;
        }
        & .hours-container{
          display: none;
        }
        & .ownership-section{
          display: none;
        }
        & .not-workable-cafe{
          display: none;
        }
      }

      &.supercharged .details{
        &:after{
          content: '*Boosted Cafe*';
          width: 150px;
          bottom: 0px;
          height: 27px;
          background-color: var(--black-bg);
          color: var(--white-bg);
          position: absolute;
          display: flex;
          left: calc(50% - 85px);
          justify-content: center;
          padding: 0 10px;
          align-items: center;
          border-radius: 10px 10px 0 0;
          font-size: var(--font-size-small);
        }
                
      }

      & .actions{
        display: none;
      }

      & :is(.name,.description){
        width: auto;

        &.name{
          padding:0 3vw 0 3vw;
          font-family: 'quicksand', sans-serif;
          font-size: var(--font-size-h3);
          overflow: visible;
          position: relative;
          display: flex;
          align-items: center;
          margin: 0;
        }
      }

      & .status.inactive{
        display: none;
      }

      & .description{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        row-gap: 1vh;
        padding-top: 1vh;
        justify-content: center;
        position: relative;

        & img{
          object-fit: contain;

          &.rating-star{
            max-width: 6%;

          }
        }

        & .address-link{
          width: 100%;
          margin:3px 0 10px 0;
          padding-left: 1vw;

          & span{
            box-shadow:0 1px 0 0 rgba(0,0,0,0.1);
            cursor: pointer;
          }

          & img{
            max-height: 20px;
            margin:0 1vw 0 1vw;
          }

          & .directions{
            display: none;
          }
        }
        

        & .note-label{
          display: none;
        }

        & :is(.general-notes, .merchant-notes){
          width: 100%;
          padding: 0 5%;
          font-size: var(--font-size-small);
          list-style: none;
          margin-bottom: 1vh;
          height: 43px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        & :is(.open, .closed){

          color:#333333;
          font-size: var(--font-size-body-smaller);

        }

        & .stats{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          overflow-x: auto;
          flex-wrap: nowrap;
          padding: 6px 2px 6px 2px;
          margin: 10px auto;
          border-radius: 8px;

          &:not(:empty){
            background: #dbd7d4;
            box-shadow: inset 1px 1px 2px rgba(50, 50, 50, 5%);
          }
        }

        & :is(.rating, .price-level, .stats, .hours, .address-link){
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 96%;

          &.rating{

            padding-left:1vw;

            & span{
              margin:1px 0 0 max(5px, .7vw);
            }
          }

          & span{
            margin-left: max(5px, .7vw);

            &:last-of-type{
              padding-top: 3px;
              margin-left: max(5px, .3vw);
              font-size: var(--font-size-small);
            }
          }

          &.price-level{
            margin-left: max(10px, 1vw);
            display: inline-flex;

            & .dollar-sign{
              max-height: 30px;
              background-image: url('/assets/icons/dollar-sign.png');
              background-size: cover;
              width: 13px;
              height: 30px;
              margin: 0;
              background-repeat: no-repeat;
              background-position-x: center;
            }

            & img{
              max-height:20px;
              margin-right: max(7px, .75vw);
            }
          }

          &.stats {
            width: 100%;
            & p{
              margin: 0 max(5px, .5vw);
              min-width: max-content;
              display: inline-flex;
              justify-content: center;
              background: var(--white-bg-bright);
              background-color: #ebe9e7;
              box-shadow: 0 0px 1px rgb(165 162 161), 0 1px 1px rgb(212 210 209);
              border-radius: 7px;
              height: 25px;
              width: auto;
              padding: 7px 12px;
              column-gap: max(5px, .5vw);
              align-items: center;

              &[data-hide-label="true"]{
                display: none;
              }

              & .label{
                display: none;
              }

              &.sm{
                font-size: var(--font-size-small);
              }

              & img{
                max-height:24px;
                max-width: 27px;
              }
            }
          }
        }
        & .rewards{
          display: none;
        }
        & .hours-container{
          display: none;
        }
        & .tags{
          font-size: var(--font-size-small);
          display: flex;
          width: 100%;
          flex-wrap: wrap;
          margin: 2vh 0 1vh 0;
          padding: 5px;
          border-radius: 10px;
          background-color: #dbd7d4;

          & .cafe-tag{
            opacity: 1;
            box-shadow: 0px 0px 1px rgb(165 165 165);
            border-radius: 4px;
            margin: 3px;
            padding: 7px 11px;
            white-space: nowrap;
            background: var(--white-bg-soft);
          }
        }
      }

      & .bow{
        display: flex;
        position: absolute;
        top: 21px;
        left: -1vw;
        transform: rotateZ(-14deg);
        background-color: rgb(237 155 155);
        border-radius: 8px 8px 6px 6px;
        box-shadow: 0 2px 5px rgb(36 29 29 / 29%);
        width: 90px;
        justify-content: center;
        z-index: 1;

        &.top{
          background-color:rgb(179 238 165);
        }
      }

      & .popup-container{
        position: absolute;
        left: 0;
        top: 0;
        border-radius: inherit;
        padding: 20vh 0px 0 0px;
        background: rgb(30 30 30 / 40%);
        z-index: 4 !important;
        animation: fadein ease forwards .2s;

        & .popup{
          display: flex;
          position: relative;
          gap: .5rem;
          flex-wrap: wrap;
          color: var(--black-bg);
          background-color: var(--white-bg-bright);
          border-radius: 14px;
          padding: 0 2vw 1vh 2vw;
          max-height: min(70vh, 100%);
          overflow-y: auto;
          bottom: 0;
          height: inherit;
          align-content: flex-start;
          opacity: 0;
          animation: fadein ease forwards .3s;
          animation-delay: .1s;

          & .label{
            width: 100%;
            padding: 10px 1.5vw 15px 1.5vw;
          }

          & .day{
            background: #f9f9f9;
            padding: 10px;
            border-radius: 8px;
            flex: 1 1 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            max-width: 48%;

            &:first-of-type{
              border: 3px solid rgb(74 150 255);
              width: 98%;
              min-width: 98%;
            }
          }

          & .day-label {
            font-weight: bold;
            margin-bottom: 5px;
          }

          & .time {
            font-size: 14px;
            color: #555;

            & span{
              transition: font-weight ease .2s, font-size ease .2s, color ease .2s;
              &.bold{
                font-weight: bold;
                font-size: var(--font-size-h4);
                color: var(--black-bg-soft);
              }
            }
          }

          & .more {
            width: 100%;
            margin-top: 15px;
            font-size: var(--font-size-body-smaller);
            text-align: center;
            cursor: pointer;
            &:hover{
              color: var(--blue-bg);
            }
          }

          & .close{
            position: absolute;
            top: 7px;
            right: 7px;
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            & img{
              height: 60%;
              max-width: 60%;
              object-fit: contain;
            }
          }
        }

        &.tagNoteDetails{

          padding-top: 40vh;

          & .popup {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 50px 3vw 10px 3vw;
          }
        }
      }
    }
}

body.darkMode{
  .emailPromptOverlay{
    & .previewCard {
        color: var(--white-bg-soft);
        background: var(--black-bg-soft);
        box-shadow: var(--gray-dark-box-shadow);

        .media-wrapper{
          background: var(--black-bg-bright);
        }

        & .name{
          text-shadow: 1px 1px #2e2e2e;
          letter-spacing: .8px;
        }

        & .bow{
          color: var(--black-bg);
        }

        & .description{

          & .rating-star {
            filter: brightness(.6);

            &:is([src="/assets/icons/star.png"],[src="/assets/icons/star-gold-hf.png"],[src="/assets/icons/star-gold-he.png"]){
              max-width: 5%;
            }
          }
          & .tags{
            background-color: rgb(115 115 115);
            & .cafe-tag{
              border: transparent solid 1px;
              border-radius: 6px;
              box-shadow: var(--gray-box-shadow);
              background: #8e8e8e;
              padding: 7px 12px;
              color: var(--black-bg-bright);
            }
          }

          & .stats{
            &:not(:empty) {
              background-color: var(--black-bg-light-soft);
            }
          }

          & .stats p {
            color: var(--gray-extra-soft);
            background-color: var(--gray);
            box-shadow: var(--gray-dark-box-shadow);

            &:is(.open,.closed,.time){
              & img{
                filter: invert(.8);
              }
            }
          }

          & .address-link{
            & img{
              filter: brightness(0.5) sepia(1) hue-rotate(151deg);
            }
          }
        }
      }
  }
}

.cafe-search-modal {
  padding: 1rem;

  .message{
    font-size: var(--font-size-body-smaller);
  }

  .wide-input {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .cafe-results {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 0.5rem;
  }
  .cafe-result-btn {
    display: block;
    width: 100%;
    padding: 0.5rem;
    text-align: left;
    background: #f0f0f0;
    margin-bottom: 0.25rem;
    border: 1px solid #ccc;
    cursor: pointer;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cafe-result-btn.selected {
    background: #d0f0d0;
    font-weight: bold;
  }
  .notice {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: #555;
  }
}


.main-content{
    width: 100vw;
    padding-bottom: 50px;
    transition: padding-top .2s ease;
    z-index: 1;

    & .pull-refresh-indicator{
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(0);
      height: 50px;
      width: 100%;
      line-height: 50px;
      padding-left: min(3vw, 30px);
      white-space: nowrap;
      color: #6f4e37;
      font-size: 14px;
      user-select: none;
      opacity: 0;
      transition: opacity 0.3s, transform 0.3s;
      z-index: 100;
      display: flex;
      align-items: center;
    }

    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color:#dcdad8;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .loading-overlay.show {
      opacity: 1;
      visibility: visible;
      transition: opacity 0s, visibility 0s;
    }

    .loading-overlay video {
      max-width: min(90%,750px);
      border-radius: 16px;
      max-height: 90%;
      box-shadow: var(--gray-dark-box-shadow);
    }
    #refresh-text{
      width: 100%;
      text-align: center;
      display: block;
      font-size: var(--font-size-small);
      color: var(--bean);
      opacity: 0;
      animation: fadein .2s ease forwards;
    }
}
h1 {
  font-size: var(--font-size-h1);
  padding: 10px 2vw;
}
h2,h3{
    font-weight: bold;
    font-size: var(--font-size-h2);
    padding: 0;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
h3{
    font-size: var(--font-size-h3);
}
h4{
    font-size: var(--font-size-h4);
}
h5{
  font-size: var(--font-size-h5);
}
.link:hover{
    box-shadow: 0 2px 0 #3339;
}
.link:active{
    color: black;
    box-shadow: 0 2px 0 #333d;
}
.select.multi{
  text-align: left;
  cursor: pointer;
}
.select.multi i{
  margin-left:10px;
}
.select.multi :is(.option, .inners){
  display:none;
}

.hidden{
  display: none;
}

#mapToggle{
  position: fixed;
  top: auto;
  /* bottom: calc(0vh + 4px); */
  bottom: 0;
  left: 0;
  /* height: 54px; */
  height: 62px;
  /* background: var(--espresso); */
  background-color: var(--white-bg-bright);
  width: 59px;
  font-size: var(--font-size-body);
  padding: 0 max(2vw, 15px) 0 max(2vw, 15px);
  /* box-shadow: -3px -3px 40px #6261588a, -1px 2px 5px #211c1933, -1px 2px 5px #777068, inset -2px 2px 5px #575454; */
  box-shadow: 0px 1px 6px -1px #39383870;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 14px 14px 0;
  transition: height ease .3s;
  cursor: pointer;
  z-index: 11;

  & img{
    height:0;
    width: 0;
    object-fit: contain;
    opacity: 0;

    &.show{
      height:35%;
      width: 20px;
      animation: fadein ease forwards .5s;
    }

    &:first-child.show + img{
      display: none;
      opacity: 0;
    }

    &:first-child:not(.show) + img{
      height:35%;
      width: 20px;
      display: inline;
      opacity: 1;
      animation: fadein ease .5s;
      margin-left: min(-.6vw, -10px);
    }
  }

  & span:before{
    content: '';
  }

  & span:empty{
    display: none;
  }

  &.hidden{
    bottom: 0;
    top: auto;
    left: 0;
    z-index: 2;
    height: 62px;
    width: auto;
    border-radius: 0 14px 14px 0;
    padding:0 max(3vw + 5px, 25px) 0 max(3vw, 20px);
    column-gap: 2vw;
    transition: height ease .3s, width ease .3s;
    /* background-color: var(--white-bg); */
    box-shadow: -3px -3px 40px #6261588a, -1px 2px 5px #211c1933, -1px 2px 5px #777068, inset -2px 2px 5px #e4e2e0;

    & span:empty{
      display: none;
    }
    & span:before{
      display: none;
      content:'Map';
    }
  }
}

body.guest{
  /* & #mapToggle{
    &.hidden{
      bottom: 2vh;
      border-radius: 44px;
        width: 33vw;
        left: auto;
        box-shadow: 1px 6px 14px -4px #333333bb;
        background: linear-gradient(0, #1c1c1c 2px, #505050);
        color: var(--white-bg-bright);

        img[src="/assets/icons/map-loc.png"]{
          filter: invert(.9);
        }

        &:before{
          content: '';
          width: 104%;
          height: 104%;
          background: linear-gradient(45deg, #1660a5, #b33030);
          z-index: -3;
          position: absolute;
          border-radius: inherit;
          filter: blur(4px);
        }

        &:after{
          content: '';
          width: 100%;
          height: 100%;
          border-radius: inherit;
          background: inherit;
          z-index: -2;
          position: absolute;
        }
    & span:empty{
      display: inline;
    }
      & span:before{
        display: block;
      }
    }
  }
  &.pwa{
    #mapToggle.hidden{
      bottom: 4vh;
      border-radius: 44px;
        width: 33vw;
        left: auto;
        box-shadow: 1px 6px 14px -4px #333333bb;
        background: linear-gradient(0, #1c1c1c 2px, #505050);
        color: var(--white-bg-bright);

        img[src="/assets/icons/map-loc.png"]{
          filter: invert(.9);
        }
    }
  } */
  & nav.map ~ .saved_cafes_modal{
    display: none;
  }
}

body.pwa{
  & #mapToggle{
    /* bottom: calc(2vh + 4px); */
    bottom: 2vh;
    &.hidden{
      bottom: 2vh;
      left: 0;
    }
  }
  .saved_cafes_modal, .location_filter{
    bottom: 2vh;
  }

  .saved_cafes_modal {
    right: 0;
  }

  .location_filter {
    &:not(.solo) {
      right: 69px;
    }
  }

}

#mapResults{
  position: absolute;
  left: 0;
  width: 100%;
  height: 92vh;
  top: 0;
  z-index: 3;
  display: none;
  transition: padding-top .3s ease, top .4s ease;

  & .content{
    transform: scaleY(0) translateY(92vh);
    transition: transform ease 1s;
    transform-origin: bottom;

    & .resultsCount {
      width: 100%;
      text-align: right;
      padding: 10px max(15px, 2vw) 15px max(15px, 2vw);
      margin: 1vh 0 0 0;

      & b{
        margin:0 3px 0 5px;
      }
      

      & div:only-child {
        text-align: center;
      }
    }
    
    & .resultsCount div:nth-child(2) {
      font-size: var(--font-size-small);
    } 

    & .message{
      text-align: center;
      width: 100%;
      color: var(--orange-bg);
      margin-top: 2vh;
      padding: 0 2vw;
    }

    & .action{
      text-align: center;
      margin-top: 4vh;
      width: 100%;
      & .btn{
        display: inline-flex;
        justify-content: center;
        background: var(--green-shadow);
        padding: 1vh 5vw;
        border-radius: 8px;
        box-shadow: 0 1px 2px 2px var(--green-shadow-darker);
        font-size: var(--font-size-h3);
        cursor: pointer;
      }

    }
  
    & .card{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 1vh 1vw;
      padding: 2vh 0vw;
      box-shadow: 0 2px 6px -2px #c7c5c2;
      background-color: var(--white-bg);
      border-radius: 16px;
      position: relative;

      & .footer {
        display: none;
      }

      canvas.electric-border {
        position: absolute;
        top: -8px;
        left: -8px;
        width: calc(100% + 16px);
        height: calc(100% + 16px);
        pointer-events: none;
        z-index: 2;
      }

      & .media-wrapper{
        width: 98%;
        border-radius: 18px;
        padding: 0;
        max-height: 250px;

        & :is(img.media-img,.media-vid){
          object-fit: cover;
          width: 100%;
          min-width: 100%;
          min-height: 100%;
          height: auto; 
        }

        & .video-play-button {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 64px;
          height: 64px;
          background: url('/assets/icons/play-button.png') no-repeat center center;
          filter: drop-shadow(1px 1px 1px #333);
          background-size: contain;
          cursor: pointer;
          z-index: 2;
          pointer-events: auto;
          opacity:1;
        }

        & .video-wrapper.playing .video-play-button {
          transition:opacity .1s;
          opacity: 0;
          pointer-events: none;

        }
      }

      & .inline{
        position: absolute;
        right: 3vw;
        font-size: var(--font-size-small);
        top: 3vh;
        background:rgba(182, 182, 182, 95%);
        border-radius: 10px;
        padding:4px 12px;
        color:rgb(18 18 18);

        &.open{
          
          &.one{
            background-color:rgba(255, 127, 80,95%);
            font-size: var(--font-size-body-smaller);
          }
          &.two{
            background-color:rgb(247 184 109 / 95%);
          }
          &.three{
            background-color:rgb(179 238 165 / 95%);
          }
        }

        &.closed{
          background-color:rgb(179 238 165 / 95%);
          &.one{
            font-size: var(--font-size-body);
          }
          &.two{
            background-color:rgb(247 184 109 / 95%);
          }
          &.three{
            background-color:rgba(255, 127, 80,95%);
          }
          &.four{
            background-color:rgb(231 227 221 / 95%);
          }
        }
      }

      & .details{
        display: block;
        overflow: hidden;
        padding:0 2vw;
        width: 100%;
        margin: 5px auto 18px auto;
        background: transparent;
        & .rewards{
          display: none;
        }
    
        & .changes{
          display: none;
        }
        & .hours-container{
          display: none;
        }
        & .ownership-section{
          display: none;
        }
        & .not-workable-cafe{
          display: none;
        }
      }

      &.nomedia .inline ~ .details{
        padding-top: 15px;
        margin-top: 13px;
      }
      &:not(.nomedia) .media-wrapper{
        min-height: 240px;
      }

      &.supercharged .details{
        &:after{
          content: '*Boosted Cafe*';
          width: 150px;
          bottom: 0px;
          height: 27px;
          background-color: var(--black-bg);
          color: var(--white-bg);
          position: absolute;
          display: flex;
          left: calc(50% - 85px);
          justify-content: center;
          padding: 0 10px;
          align-items: center;
          border-radius: 10px 10px 0 0;
          font-size: var(--font-size-small);
        }
                
      }

      & .name{
        padding:2vh 3vw 0 3vw;
        font-family: 'quicksand', sans-serif;
        font-size: var(--font-size-h3);
        position: relative;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        &.verified{
          padding-right: max(58px, 3vw);
        }

        :is(.savedBadge, .verifiedBadge){
          top: 0;
          right: 0;
          &.verifiedBadge{
            top: 0;
            right: 0;
          }
        }
      }

      & .actions{
        display: none;
      }

      & :is(.name,.description){
        width: 100%;
      }

      & .description{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        row-gap: 1vh;
        padding-top: 1vh;
        justify-content: center;
        position: relative;

        & img{
          object-fit: contain;

          &.rating-star{
            max-width: 5%;
            opacity: .9;
          }
        }

        & .address-link{
          width: 100%;
          margin:3px 0;
          padding-left: 1vw;

          & span{
            /* box-shadow:0 1px 0 0 rgba(0,0,0,0.1); */
            pointer-events: none;
            cursor: pointer;

            & .distance{
              display: inline;
            }
          }

          & img{
            max-height: 20px;
            margin:0 1vw 0 1vw;
          }

          & .directions{
            display: none;
          }
        }
        

        & .note-label{
          display: none;
        }

        & :is(.general-notes, .merchant-notes){
          width: 100%;
          padding: 0 5%;
          font-size: var(--font-size-small);
          list-style: none;
          margin-bottom: 1vh;
          height: 43px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        & :is(.open, .closed){

          color:#333333;
          font-size: var(--font-size-body-smaller);

        }

        & .stats{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          overflow-x: auto;
          flex-wrap: nowrap;
          padding: 6px 2px 6px 2px;
          margin: 10px auto;
          border-radius: 8px;

          &:not(:empty){
            background: #dbd7d4;
            box-shadow: inset 1px 1px 2px rgba(50, 50, 50, 5%);
          }
        }

        & :is(.rating, .price-level, .stats, .hours, .address-link){
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 96%;

          &.rating{
            font-size: var(--font-size-small);
            padding-left:1vw;

            & span{
              margin:1px 0 0 max(5px, .7vw);
            }
          }

          & span{
            margin-left: max(5px, .7vw);

            &:last-of-type{
              padding-top: 3px;
              margin-left: max(5px, .3vw);
              font-size: var(--font-size-small);
            }
          }

          &.price-level{
            margin-left: max(10px, 1vw);
            display: inline-flex;

            & .dollar-sign{
              max-height: 30px;
              background-image: url('/assets/icons/dollar-sign.png');
              background-size: cover;
              width: 13px;
              height: 30px;
              margin: 0;
              background-repeat: no-repeat;
              background-position-x: center;
            }

            & img{
              max-height:20px;
              margin-right: max(7px, .75vw);
            }
          }

          &.stats {
            width: 100%;
            & p{
              margin: 0 max(5px, .5vw);
              min-width: max-content;
              display: inline-flex;
              justify-content: center;
              background: var(--white-bg-bright);
              background-color: #ebe9e7;
              box-shadow: 0 0px 1px rgb(165 162 161), 0 1px 1px rgb(212 210 209);
              border-radius: 7px;
              height: 25px;
              width: auto;
              padding: 7px 12px;
              column-gap: max(5px, .5vw);
              align-items: center;

              &[data-hide-label="true"]{
                display: none;
              }

              & .label{
                display: none;
              }

              &.sm{
                font-size: var(--font-size-small);
              }

              & img{
                max-height:24px;
                max-width: 27px;
              }
            }
          }
        }
        & .rewards{
          display: none;
        }
        & .hours-container{
          display: none;
        }
        & .tags{
          font-size: var(--font-size-small);
          display: flex;
          width: 100%;
          flex-wrap: wrap;
          margin: 1vh 0 1vh 0;
          padding: 5px;
          border-radius: 10px;
          background-color: #dbd7d4;
          max-height: 100px;
          overflow-y: hidden;
          text-overflow: ellipsis;

          & .cafe-tag{
            opacity: 1;
            box-shadow: 0px 0px 1px rgb(165 165 165);
            border-radius: 4px;
            margin: 3px;
            padding: 7px 11px;
            white-space: nowrap;
            background: var(--white-bg-soft);
          }
        }
      }

      & .bow{
        display: flex;
        position: absolute;
        top: 21px;
        left: -1vw;
        transform: rotateZ(-14deg);
        background-color: rgb(237 155 155);
        border-radius: 8px 8px 6px 6px;
        box-shadow: 0 2px 5px rgb(36 29 29 / 29%);
        width: 90px;
        justify-content: center;
        z-index: 1;

        &.top{
          background-color:rgb(179 238 165);
        }
      }

      & .popup-container{
        position: absolute;
        left: 0;
        top: 0;
        border-radius: inherit;
        padding: 20vh 0px 0 0px;
        background: rgb(30 30 30 / 40%);
        z-index: 4 !important;
        animation: fadein ease forwards .2s;

        & .popup{
          display: flex;
          position: relative;
          gap: .5rem;
          flex-wrap: wrap;
          color: var(--black-bg);
          background-color: var(--white-bg-bright);
          border-radius: 14px;
          padding: 0 2vw 1vh 2vw;
          max-height: min(70vh, 100%);
          overflow-y: auto;
          bottom: 0;
          height: inherit;
          align-content: flex-start;
          opacity: 0;
          animation: fadein ease forwards .3s;
          animation-delay: .1s;

          & .label{
            width: 100%;
            padding: 10px 1.5vw 15px 1.5vw;
          }

          & .day{
            background: #f9f9f9;
            padding: 10px;
            border-radius: 8px;
            flex: 1 1 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            max-width: 48%;

            &:first-of-type{
              border: 3px solid rgb(74 150 255);
              width: 98%;
              min-width: 98%;
            }
          }

          & .day-label {
            font-weight: bold;
            margin-bottom: 5px;
          }

          & .time {
            font-size: 14px;
            color: #555;

            & span{
              transition: font-weight ease .2s, font-size ease .2s, color ease .2s;
              &.bold{
                font-weight: bold;
                font-size: var(--font-size-h4);
                color: var(--black-bg-soft);
              }
            }
          }

          & .more {
            width: 100%;
            margin-top: 15px;
            font-size: var(--font-size-body-smaller);
            text-align: center;
            cursor: pointer;
            &:hover{
              color: var(--blue-bg);
            }
          }

          & .close{
            position: absolute;
            top: 7px;
            right: 7px;
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            & img{
              height: 60%;
              max-width: 60%;
              object-fit: contain;
            }
          }
        }

        &.tagNoteDetails{

          padding-top: 40vh;

          & .popup {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 50px 3vw 10px 3vw;
          }
        }
      }

      &.nomedia{
        padding: 0;

        & .inline{
          top:1vh;
        }

        & .bow{
          top:3px;
          transform: rotateZ(-10deg);
        }

        & .popup-container{
          padding-top: 0;
        }
      }
    }

    .submit-new-cafe{
      margin-top: 1em;
      margin-bottom: 3vh;
      padding: 0.75em;
      background: var(--white-bg-bright);
      border-radius: 8px;
      text-align: center;

      & button{
        padding: 0.5em 1em;
        font-size: 0.9em;
        border: none;
        color: var(--black-bg);
        outline:none;
        border-radius: 5px;
        cursor: pointer;
        font-family: 'quicksand';
      }
    }
  }
}

body.darkMode{
  .main-content{
    .loading-overlay {
      background-color: rgb(35, 35, 35);
    }
  }
  & .main-content.mapShown{
    .mapFilters {
      & .filter {
        box-shadow: 0 1px 8px -2px #272727, inset 0 1px 5px -2px #bbb3aa;
        color: var(--white-bg-body);
        background: #222222fb;
      }
    }
    #mapResults {
      & .content {
        background-color: var(--black-bg-soft);
        border-top: solid #5b5b5b 1px;
        box-shadow: 0 4px 5px 8px #4444442e;

        & .action{
          & .btn{
            box-shadow: 0 1px 2px 2px rgb(12 43 26 / 50%);
          }
        }
        & .card {
          color: var(--white-bg-soft);
          background: var(--black-bg-soft);
          box-shadow: var(--gray-dark-box-shadow);

          & .name{
            text-shadow: 1px 1px #2e2e2e;
            letter-spacing: .8px;
          }

          & .bow{
            color: var(--black-bg);
          }

          & .description{

            & .rating-star {
              filter: brightness(.6);

              &:is([src="/assets/icons/star.png"],[src="/assets/icons/star-gold-hf.png"],[src="/assets/icons/star-gold-he.png"]){
                max-width: 5%;
              }
            }
            & .tags{
              background-color: rgb(115 115 115);
              & .cafe-tag{
                border: transparent solid 1px;
                border-radius: 6px;
                box-shadow: var(--gray-box-shadow);
                background: #8e8e8e;
                padding: 7px 12px;
                color: var(--black-bg-bright);
              }
            }

            & .stats{
              &:not(:empty) {
                background-color: var(--black-bg-light-soft);
              }
            }

            & .stats p {
              color: var(--gray-extra-soft);
              background-color: var(--gray);
              box-shadow: var(--gray-dark-box-shadow);

              &:is(.open,.closed,.time){
                & img{
                  filter: invert(.8);
                }
              }
            }

            & .address-link{
              & img{
                filter: brightness(0.5) sepia(1) hue-rotate(151deg);
              }
            }
          }
        }
        &:after {
          background-color: rgb(133, 130, 126);
          box-shadow: rgb(49, 49, 49) 0px 0px 3px inset;
          top: 10px;
          height: 10px;
        }

        .submit-new-cafe{
          background: var(--black-bg-seethru);
          color: var(--cream);

          & button{
            background-color: var(--accent);
            font-weight: bold;
          }
        }
      }
    }
  }
  & .main-content .cloned-card {
    color: var(--black-bg);
    background-color: var(--black-bg-soft);

    & .details{
      background-color: var(--black-bg-soft);
      color: var(--white-bg-darker);

      & :is(p, .address-link){
        color: var(--gray-extra-soft);

        &:is(p):is(.open,.closed,.time){
          & img{
            filter: invert(.8);
          }
        }
      }
    }

    & .close-button{
      background: #e1e1e1e3;
      filter: invert(.8);
      cursor: pointer;
    }

    &.clicked {
      & .details {

        background: var(--black-bg-soft);
        color: var(--white-bg-darker);

        & .name{
          box-shadow: 0 1px 0 #333;
        }

        & .actions {
          & div {
            background-color:var(--gray);
            border-radius: 8px 12px;

              & img[alt="share"]{
                filter: invert(.8);
              }
          }
        }

        & .description {
          & .address-link {
            color: var(--gray-extra-soft);

            & img{
              filter: invert(.8);

              &.directions{
                filter: drop-shadow(1px 2px 2px #222222) hue-rotate(218deg) !important;
              }
            }
          }
          & .stats {
              & :is(p,.label) {
                color:var(--gray-extra-soft);

                &:is(.open, .closed, .time){
                  & img{
                    filter: invert(.8);
                  }
                }
              }
          }

          & .note-label{
            color: var(--white-bg-body);
          }

          & .tags {
            & .cafe-tag {
              background: var(--gray-extra-soft);
              color: var(--black-bg-bright);
              border-radius: 6px;
              box-shadow: var(--gray-box-shadow);
            }
          }
        }

        & :is(.rewards, .hours-container) {
          & .reward{
            background: var(--gray-extra-soft);
            color: var(--black-bg-bright);
            box-shadow: var(--gray-box-shadow);
          }
          & .day {
            background: var(--gray-extra-soft);
            color: var(--black-bg-bright);
            box-shadow: var(--gray-box-shadow);
            &:first-of-type{
              box-shadow: 0 3px 9px 1px #111;
            }
          }

          & .time {
            color: var(--black-bg-bright);
          }
        }

        & .changes {
          
          & button {
            color:var(--black-bg-bright);
            background-color: var(--green-bg-dark);
          }

          & .reviews {
            & .review {
              color: var(--black-bg);
            }
          }
        }
      }
    }
  }

  .discover-wrapper .cards-wrapper.featured .card {
    .media-wrapper{
      border-radius: 18px 18px 0 0;
    }
  }

  & .main-content .card .media-wrapper{
    background-color: var(--black-bg-light-soft);
  }
}
@keyframes unfadeUp{
  from{transform: scaleY(0) translateY(92vh);}
  to{transform: scaleY(1) translateY(0);}
}

.main-content .mapFilters{
  display: none;
  height: 0;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.main-content.mapShown .homePageTopDecor{display: none;}
.main-content.mapShown .mapFilters{
  position: absolute;
  top: 1vh;
  width: 100%;
  height: 48px;
  padding: 5px 2vw;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  column-gap: 1vh;
  align-items: center;
  z-index: 2;

  &:empty{
      display: none;
      height: 0;
  }

  & :first-child{
    border-radius: 6px;
  }

  & .filter{
      height: 100%;
      width: auto;
      padding: 5px 16px;
      border-radius: 10px;
      background-color: var(--white-bg);
      color: var(--black-bg-bright);
      font-size: var(--font-size-body-smaller);
      display: flex;
      align-items: center;
      box-shadow: var(--gray-box-shadow);
      white-space: nowrap;

      &.pulse {
        animation: pulse 300ms ease;
      }

      &.clicked{
        border: solid 2px var(--blue-bg)
      }

      &.filtered{
        background: var(--brown-gray-light-bg);
        font-family: 'lexend', sans-serif;
        color: var(--espresso);
        border-left: solid 2px var(--bean);
        border-radius: 6px;
        cursor: pointer;
      }
  }
}
.main-content.mapShown #mapResults{
  display: flex;
  overflow-y: auto;
  flex-wrap: wrap;
  overflow-x: hidden;
  padding-top: 36vh;

  &.down{
    padding-top : 0px;
    top : 82vh;
    overflow-y : hidden;

    & .content{
      border-top: solid #bababa 1px;
    }
  }

  &.fadeout{
    animation: fadeout ease .2s forwards;
  }

  &.fadein{
    opacity: 0;
    animation: fadein ease .1s forwards;
  }

  & .back{
    height: 100%;
    width: 100%;
    z-index: 0;
    position: absolute;
    top: 0;
  }
  & .content{
    background-color: var(--white-bg);
    background-color: #edeceb;
    border-top-left-radius: 40px 4px;
    border-top-right-radius: 40px 4px;
    min-height: 92vh;
    z-index: 1;
    width: 100%;
    position: relative;
    animation: unfadeUp ease 1s forwards;
    padding-top: 20px;
    padding-bottom: 85px;
    box-shadow: 0 4px 5px 8px #6262623d;

    &:before{
      content: '';
      position: absolute;
      top: 12px;
      width: 12%;
      left: 44%;
      height: 4px;
      background-color: rgb(230 230 230);
      border-radius: 2px;
      z-index: 1;
      box-shadow: 0 1px 2px rgb(185 185 185);
    }

    &:after{
      content: '';
      position: absolute;
      top: 8px;
      width: 20%;
      left: 40%;
      height: 12px;
      background-color: #ddd7d1;
      border-radius: 5px;
      box-shadow: inset 0 0 3px #c4c2c1;
    }
  }

  
  & .guestLimitMessage{
    margin-top: 5vh !important;
    width: max(300px, 100%);
    max-width: 100%;
    h2{
      padding:0 min(4vw, 15px);
      font-weight: 300;
    }

    .card{
      max-width: 98% !important;
      margin: 0 auto !important;
      background: transparent;
      box-shadow: none;
      .media-wrapper{
        box-shadow: var(--gray-light-box-shadow);
      }
      .message{
        padding: 0;
      }
    }
  }
}

@keyframes animateInClone {
  from{bottom:0}
  to{bottom: calc(10vh - 5px);}
}

.main-content .cloned-card {
    overscroll-behavior-y: contain;
    position: fixed;
    bottom: calc(10vh + 20px);
    height: 37vh;
    overflow: hidden;
    left: 3vw;
    width: 94vw;
    right: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    background: #edeceb;
    box-shadow: 0 3px 6px 1px rgb(0 0 0 / 40%), 0 1px 0 #33333313;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: var(--font-size-small);
    border-radius: 16px;
    transition: top ease .3s, left ease .2s, height .3s ease, width .3s ease;

  .ghost-card {
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    will-change: transform;
    pointer-events: none;

    & .details{
      overflow-y: auto;
    }
  }

  & .media-wrapper{
    height: 60%;
    min-height: unset;
    border-radius: 14px 14px 0 0;
    min-width: fit-content;
    max-width: 100%;
  }


  &.clicked {
    height: 100vh;
    width: 100vw;
    z-index: 101;
    align-content: flex-start;
    border-radius: 0;
    animation: slideInFromBottomFadeIn ease .3s;
  
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: transform 0.5s ease, opacity 0.3s ease-out;
  
    &.fade-out-down {
      transform: translateY(-100%);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease-out;
    }
  
    &.slide-in-from-bottom {
      transition: none;
      transform: translateY(100vh);
    }
    
    &.slide-in-from-bottom.show {
      transition: transform 0.5s ease, opacity 0.3s ease;
      transform: translateY(0);
    }

    & .media-wrapper{
      border-radius: 0;
      height: auto;
      min-height: 240px;
      max-height: 240px;

      .claimMessage {
        position: absolute;
        color: var(--foam);
        bottom: 1vh;
        display: block;
        right: 10px;
        font-size: var(--font-size-tiniest);

        &:before{
          content: 'Are you the owner? Add your café photos.';
          position: relative;
        }
      }

      &.full{
        position: fixed;
        top:0;
        left: 0;
        height: 100vh;
        max-height: unset;
        overflow: hidden;
        width: 100vw;
        z-index: 9999;

        .video-wrapper{

          .video-close-button{
            width: 40px;
            height: 40px;
            pointer-events: auto;
            opacity:1;
            animation: fadein ease .2s forwards;
            visibility: visible;
          }
        }

        .image-wrapper.full, .video-wrapper.full{
          position: fixed;
          top:0;
          left: 0;
          height: 100vh;
          max-height: unset;
          overflow: hidden;
          width: 100vw;
          z-index: 3;

          img.media-img, video.media-vid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0,0,0,0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            max-width: 100%;
            max-height: unset !important;
            object-fit: contain !important;
            transition: transform 0.25s ease;
          }

          .video-play-button, .video-close-button{
            z-index: 10000;
          }
        }
      }

      .image-wrapper{
        display: block;
      }

      & img{
        height: unset;
        max-width: 100%;
        object-fit: cover;
        border-radius: 0;
      }

      & :is(img.media-img,.media-vid){
        object-fit: cover;

        &.media-vid{
          object-fit: contain;
          width: 100%;
          min-width: 100%;
        }
      }
    }

    &.home-clone{
      & .media-wrapper{
  
        & :is(img.media-img,.media-vid){
          min-width: 100%;
          object-fit: cover;
        }

        .claimMessage {
          position: absolute;
          color: var(--foam);
          bottom: 1vh;
          display: block;
          right: 10px;
          font-size: var(--font-size-tiniest);

          &:before{
            content: 'Are you the owner? Add your café photos.';
            position: relative;
          }
        }
      }

      & .popup-container{
        position: absolute;
        left: 0;
        top: 0;
        border-radius: inherit;
        padding: 20% 0px 0 0px;
        background: rgb(30 30 30 / 40%);
        z-index: 4 !important;
        height: 99%;
        animation: fadein ease forwards .2s;

        & .popup{
          display: flex;
          position: relative;
          gap: .5rem;
          flex-wrap: wrap;
          color: var(--black-bg);
          background-color: var(--white-bg-bright);
          border-radius: 14px;
          padding: 0 2vw 1vh 2vw;
          max-height: min(70vh, 100%);
          overflow-y: auto;
          bottom: 0;
          height: inherit;
          align-content: flex-start;
          opacity: 0;
          animation: fadein ease forwards .3s;
          animation-delay: .1s;

          & .label{
            width: 100%;
            padding: 10px 1.5vw 15px 1.5vw;
          }

          & .day{
            background: #f9f9f9;
            padding: 10px;
            border-radius: 8px;
            flex: 1 1 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            max-width: 48%;

            &:first-of-type{
              border: 3px solid rgb(74 150 255);
              width: 98%;
              min-width: 98%;
              box-shadow: var(--gray-box-shadow)
            }
          }

          & .day-label {
            font-weight: bold;
            margin-bottom: 5px;
          }

          & .time {
            font-size: 14px;
            color: #555;

            & span{
              transition: font-weight ease .2s, font-size ease .2s, color ease .2s;
              &.bold{
                font-weight: bold;
                font-size: var(--font-size-h4);
                color: var(--black-bg-soft);
              }
            }
          }

          & .more {
            width: 100%;
            margin-top: 15px;
            font-size: var(--font-size-body-smaller);
            text-align: center;
            cursor: pointer;
            &:hover{
              color: var(--blue-bg);
            }
          }

          & .close{
            position: absolute;
            top: 7px;
            right: 7px;
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            & img{
              height: 60%;
              max-width: 60%;
              object-fit: contain;
            }
          }
        }

        &.tagNoteDetails{

          padding-top: 40vh;

          & .popup {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 50px 3vw 10px 3vw;
          }
        }
      }
      
    }

    & .details{
      padding: 0 2vw 2vh 2vw;
      overflow-y: auto;
      max-height: 70%;
      background-color: #edeceb;

      & .name{
        font-size: var(--font-size-h3);
        position: sticky;
        top: 0;
        background: inherit;
        padding: 1.5vh 3vw;
        z-index: 2;
        box-shadow: 0 1px 0 #dbdbdb;
        position: relative;
        display: flex;
        align-items: center;

        .savedBadge{
          display: none;
        }

        .verifiedBadge{
          height: 35px;
          width: 45px;
          position: relative;
          top:unset;
          margin-left: auto;
        }

        .foundingBadge ~ .verifiedBadge{
          margin-left: 2vw;
        }
      }

      & .status{
        &.inactive{
          color: var(--orange-bg-soft);
          font-weight: bold;
          padding-left: 4vw;
          margin: 1vh 0;
        }
      }

      & .actions{
        display: flex;
        justify-content: space-around;
        padding: 0 2vw;

        & div{
          background: #f1f1f1;
          border-radius: 8px;
          box-shadow: 0 0 1px #abababb5;
          width: 23%;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 3px 0;
          height: min(35px, 4.8vh);
          cursor: pointer;

          & a{
            height: 100%;
            display: flex;
            width: 100%;
            justify-content: center;
            align-items: center;
          }
  
          & img{
            max-height: 80%;
            object-fit: contain;
            width: 100%;
            max-width: 55%;

            &[alt="share"]{
              filter: brightness(.5);
            }
          }
        }
      }

      & .description{
        display: grid;
        padding: 0 3vw;
        & .rating{
          margin: 2vh 0 4vh 0;
          font-size: var(--font-size-body-smaller);
          align-items: center;

          &.empty{
            margin: 2vh 0 1vh 0;
          }

          & span{
            margin-left: 1vw;
          }
        }
        & :is(p, .address-link) {
          &.address-link {
            margin-top: 0;
            display: flex;
            column-gap: 3vw;
            font-size: var(--font-size-body-smaller);

            & span{
              /* box-shadow: 0px 5px 0 -4px rgb(0 0 0 / 4%); */
              box-shadow: none;
              width: 100%;
              pointer-events: all;

              .distance{
                display: inline;
              }
            }

            & .directions{
              display: inline-block;
              max-width: max(55px, calc(2.1vw + 2.1vh));
              max-height: unset;

              filter: drop-shadow(1px 2px 2px #888999) hue-rotate(218deg);
              margin-bottom: 10px;
            }
          }

          &:is(.wifi,.parking) span{
            display: inline;
          }
        }

        & .note-label{
          display: block;
          font-size: var(--font-size-body);
          margin-top: 4vh;
          padding: 0 0vw;
          text-decoration: underline;
          color: var(--black-bg);
          order: 1;
        }

        & .tags{
          font-size: var(--font-size-small);
          display: flex;
          width: 98%;
          order: 4;
          margin-top: 6vh;
          flex-wrap: wrap;

          & .cafe-tag{
            opacity: 1;
            box-shadow: 0px 0px 2px rgb(165 165 165);
            border-radius: 4px;
            margin: 3px;
            padding: 5px 10px;
            white-space: nowrap;
            background:var(--white-bg);
          }

        }

        & :is(.general-notes, .merchant-notes){
          margin-top: 1.5vh;
          padding: 0 0vw;
          margin-bottom: 0;
          list-style: disc;
          order:1;
          font-size: var(--font-size-body-smaller);
          display: block;
          line-clamp: unset;
          height: unset;
        }
        & .stats{
          margin-top: 5vh;
          row-gap: 4vh;
          padding: 0 1vw;

          & .label{
            color:var(--black-bg-soft);
          }

          & p{
            width: 100%;
            font-size: var(--font-size-body);
            column-gap: 3vw;

            &:is(.open,.closed){
              order:-1;
            }
          }
          & img{
            max-width: max(20px, calc(2.5vw + 2.5vh));
            max-height: max(20px, calc(2.5vw + 2.5vh));
            width: 10%;
          }
        }
      }

      & :is(.rewards, .hours-container){
        display: flex;
        margin-top: 6vh;
        padding: 0 4vw;
        width: 100%;
        flex-wrap: wrap;

        & .label{
          font-size: var(--font-size-h5);
          font-weight: normal;
          width: 100%;
          text-decoration: underline;
          margin-bottom: 3vh;
        }

        & .reward{
          background: var(--white-bg);
          display: flex;
          flex-wrap: wrap;
          width: 98%;
          margin: 0 auto;
          border-radius: 10px;
          padding-bottom: 2vh;
          align-content: flex-start;
          box-shadow: var(--gray-light-box-shadow);

          & .title{
            font-size: var(--font-size-h3);
            padding: 1vh min(5vw,40px);
            margin: 1vh 0;
          }

          & .description{
            padding: 10px min(4vw,40px);
            text-indent: .5rem;
          }

          & .label{
            text-align: center;
            width: 100%;
            padding: 10px min(8vw,40px);
            text-decoration: none;
          }
        }

        & .day {
          background: #f9f9f9;
          padding-bottom: 5px;
          border-radius: 6px;
          flex: 1 1 120px;
          display: flex;
          flex-direction: column;
          align-items: center;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
          max-width: 32%;
          min-height: 90px;
          min-width: 115px;

          &:first-of-type{
            border-top: 3px solid rgba(74, 149, 255, 0.3);

            .day-label {
              background: rgb(74 150 255 / 36%);
            }
          }
        }
        
        & .day-label {
          font-weight: bold;
          margin-bottom: 5px;
          padding: 5px;
          min-width: 100%;
          text-align: center;
          font-size: var(--font-size-body-smaller);
        }
        
        & .time {
          font-size: var(--font-size-small);
          color: #555;

          & .time-label{
            display: none;
          }

          & span:nth-of-type(2):empty:before{
            content: '?';
            font-size: var(--font-size-body);
          }
        }
      }

      .hours-container{
        gap:.5rem 1%;
        position: relative;
        left: unset;
        top: unset;
        background: transparent;
        padding: 0 0;
        justify-content: space-around;
        justify-content: space-evenly;

        & .label{
          padding: 0 4vw;
        }
      }

      & .changes {
        width: 100%;
        justify-content: center;
        display: flex;
        padding: 0 2vw;
        margin: 12vh 0 6vh 0;
        flex-wrap: wrap;
        font-size: var(--font-size-body-small);

        & .label{
          width: 100%;
          margin-bottom: 2vh;
          padding: 0 2vw;
          font-size: var(--font-size-h4);

          & .cta{
            font-size: var(--font-size-h3);
            font-weight: normal;
            margin-top: 6vh;
            text-align: center;
          }

          & b{
            font-size: var(--font-size-h2);
            background: linear-gradient(322deg, #580080, #ee3d5c);
            padding: 10px 18px;
            border-radius: 12px;
            color: var(--white-bg);
            text-shadow: 1px 1px black;
            box-shadow: var(--gray-box-shadow);
            margin-left: 1vw;
          }
        }

        & button{
          width: 70%;
          height: max(36px, 5vh);
          border-radius: 6px;
          margin: 3vh 15%;
          border: none;
          outline: none;
          background-color: var(--green-shadow-darker);
          font-size: var(--font-size-body-smaller);
          font-weight: bold;
          color: #333;
        }

        &.approval{
          background-color: #f6f4eb;
          color: var(--black-bg);
          border-radius: 8px;
          padding: calc(10px + 1vh) 2vw;

          .btn-wrapper{
            display: flex;
            width: 100%;
            padding: calc(10px + 1vh) 4vw;
            justify-content: space-between;

            & button{
              min-width: 40%;
              background: var(--green-bg);
              padding: 0;
              width: auto;
              margin: 0;

              &.deny{
                background-color: var(--red-bg-soft);
              }

              &.call{
                background-color: var(--black-bg);
                display: flex;
                align-items: center;
                justify-content: flex-start;
                color: var(--green-bg-soft);
                font-family: 'poppins-reg', 'sanf serif';
                text-shadow: none;
                letter-spacing: 1px;
                padding-right: 20px;

                a{
                  width: 50px;

                  & img{
                    width:80%;
                  }
                }
              }
            }
          }
        }

      }

      & .reviews, .viewReviews{
          margin: min(20px, 3vh) 0;

          &.viewReviews{
            color: var(--black-bg);
            margin: 0 auto;
            width: 100%;
            padding: 0 1vw;

            .titleLabel{
              font-size: var(--font-size-body);
              text-decoration: underline;
            }

            .title{
              margin: 1vh 0 .5vh 0;
            }

            .description p{
              color: var(--gray) !important;
            }
          }

          .review {
            margin-bottom: min(2vh, 25px);
            background: var(--white-bg-bright);
            padding: min(12px, 1.5vh) min(3vw, 20px);
            border-radius: 6px;
            .score{
              margin-bottom: min(15px, 1.5vh);
              display: flex;
              font-size: var(--font-size-body-smaller);
              align-items: center;
              padding-top: 1vh;

              img{
                object-fit: contain;
                max-width: max(18px, calc(1.5vw + 1.5vh));
                width: auto;
                max-height: max(18px, calc(1.5vw + 1.5vh));

                &:last-of-type{
                  margin-right: 3vw;
                }
              }
            }
            .title{
              font-size: var(--font-size-body);

              .voter{
                font-size: var(--font-size-body-smaller);
                font-style: italic;
                float: right;
                color: var(--gray);
                margin: 4vh 3vw 2vw 0;
                &:before{
                  content: " - ";
                }
              }

              .blur{
                color: rgb(144 99 77);
                filter: blur(2px);
              }
            }

            &:not(.empty) .title:before{
              content: '"';
            }
            &:not(.empty) .title:after{
              content: '"';
            }

            &.empty{

              & .voter{
                margin-top: 1vh;
              }
            }

            .replyWrapper{
              margin-top:2vh;

              .replyHeader {
                font-size: var(--font-size-body);
                text-decoration: underline;
                display: none;
              }
              .reply{
                text-indent: 1rem;
                background: var(--brown-gray-light-bg);
                margin-top: 1vh;
                border-radius: 4px;
                padding: 5px;
                display: none;
              }

              .replyTime{
                display: none;
                width: 100%;
                margin-top: .5vh;
                text-align: right;
              }

              button{
                cursor: pointer;
                margin-bottom: .5vh;
              }

              button.clicked{
                display: none;

                & ~ .replyHeader, & ~ .reply, & ~ .replyTime{
                  display: block;
                }
              }
            }

            & .description{
              margin-top: 5px;
              text-align: right;
              font-size: var(--font-size-small);
            }
          }
        }

        & .review-reply-section {
          margin: 12px auto 0 auto;
          padding: 12px;
          border-top: 1px solid #ccc;
          background-color: #f9f9f9;
          border-radius: 6px;
          font-family: inherit;
          width: 100%;

          .reply-edit-note{
            color: var(--green-bg-dark);
            margin-bottom: 1vh;
            font-weight: bold;
          }

          .policy-preview {
              background-color: #fff3cd;
              border-left: 4px solid #ffeeba;
              padding: 8px 10px;
              font-size: 0.85rem;
              margin-bottom: 8px;
              border-radius: 4px;
              color: #856404;

              p{
                height: auto;
                display: block;
                color: var(--black-bg);
              }
          }

          label {
              display: block;
              font-weight: 600;
              margin-bottom: 6px;
              font-size: 0.95rem;
              color: var(--gray-soft);
              padding-left: .5rem;
          }

          textarea {
              width: 100%;
              min-height: 70px;
              padding: 8px;
              border: 1px solid #bbb;
              border-radius: 4px;
              resize: vertical;
              margin-bottom: 8px;
              font-size: 0.9rem;
              font-family: inherit;
          }

          button {
              padding: 7px 14px;
              border: none;
              background-color: #007bff;
              color: white;
              border-radius: 4px;
              cursor: pointer;
              font-size: 0.95rem;
              margin-left: .6rem;

              &:hover {
                  background-color: #0069d9;
              }
          }

          .flag-toggle-link,
          .policy-link-info {
              display: block;
              margin: max(1vh, 8px);
              font-size: 0.85rem;
              color: #007bff;
              cursor: pointer;
              text-decoration: underline;
              height: auto;

              &.flag-toggle-link{
                margin-top: 2vh;
              }

              &:hover {
                  text-decoration: underline;
              }
          }
        }

      & .not-workable-cafe {
        display: block;
        margin: 2vh 0 8vh 0;
        background: #eae6da;
        border-left: 4px solid #b0aa92;
        padding: 12px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.2s ease;
        

        & .title{
          font-weight: bold;
          margin-bottom: 6px;
          color: var(--black-bg);
        }
        & .description{
          font-size: 0.9rem;
          color: #333;
          margin: 0;
        }
        &:hover {
          background-color: #dddbd2;
        }
      }

      & .ownership-section {
        display: block;
        margin: 4vh 0;
        background: #f6f4eb;
        border-left: 4px solid #f4c542;
        padding: 12px 16px;
        border-radius: 6px;
        font-size: 0.95rem;
        font-weight: 500;
        color: #333;
        cursor: pointer;
        transition: background-color 0.2s ease;
        

        &:hover {
          background: #d2ecff;
        }
        .ownership-section__title {
          margin: 0 0 4px;
          font-weight: bold;
          color: var(--black-bg);
        }
        .ownership-section__desc {
          margin: 0;
          font-size: 14px;
          color: #333;
        }
      }

    }
    &.nomedia{
      & .media-wrapper{
        min-height: 75px;
      }
    }

  }

  & .details {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
    padding: 10px 0 20px 10px;

    & .name{
      width: 100%;
      position: relative;
    }

    & .actions{
      display: none;
      column-gap: 2vw;
      margin: 2vh 0 1vh 0;
      width: 100%;
    }

    & .price-level img{
      width:6%;
    }

    & .stats{
      display: flex;
      flex-wrap: wrap;
      margin:0 0 4px 0;
      column-gap: 1vw;
    }

    & :is(p, .address-link) {
      margin: 0 3px;
      font-size: 14px;
      color: #444;
      display: inline-flex;
      align-items: center;
      height: 25px;
      column-gap: 3px;

      &.address-link{
        margin-top:3px;
        display: none;
      }

      &:is(.wifi,.parking) span{
        display: none;
      }
    }

    & .description{
      & :is(.general-notes, .merchant-notes, .note-label){
        display: none;
      }

      & :is(.tags){
        display:none;
      }
    }

    & h4 {
      font-size: var(--font-size-body);
      font-weight: bold;
      margin: 0;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 25px;
      width: calc(100% - 57px);
      white-space: nowrap;
    }

    & .description{
      width: 100%;
      & img{
        object-fit: contain;
        max-width: max(18px, calc(1.5vw + 1.5vh));
        width: auto;
        max-height: max(18px, calc(1.5vw + 1.5vh));

        &.rating-star{
          max-width: 6%;
        }
      }

      & .rating{
        display: flex;
        flex-wrap: wrap;
        row-gap:.5vh;
        margin: 1vh 0;
        column-gap: 1vw;

        & .price-level{
          display: inline-flex;
          max-width: 33%;
          align-items: center;
          justify-content: center;
          margin: 0 min(15px, 20%);
          column-gap: max(5px, .5vw);
        }

        & p{
          max-width: 33%;
          display: inherit;
          column-gap: 6%;
          width: min(50px,(25px + 20%));
        }
      }
    }

    & .rewards{
      display: none;
    }
    & .hours-container{
      display: none;
    }
    & .changes{
      display: none;
    }
    & .ownership-section{
      display: none;
    }
    & .not-workable-cafe{
      display: none;
    }
  }

  & img {
    width: 15%;
    height: auto;
    border-radius: 5px;
    object-fit: cover;

    &.media-img{
      width: 100%;
      height: 100%;
      min-width: 100%;
    }
  }
  & .media-vid {
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
    min-width: 100%;
    width: 100%;
    object-position: top;
  }

  & .close-button {
    cursor: pointer;
    z-index: 2;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    top: 4px;
    right: 4px;
    color: #fff;
    background: #e1e1e191;
    border: none;
    padding: 10px;
    object-fit: contain;
    width: 17px;
    height: 13px;
    border-radius: 10px;
    z-index: 100;
  }

  & :is(.closed,.open){

    &.inline{
      display: none;
    }
  }

  & .bow{
    display: none;
  }
}

@keyframes fadeDown{
  from{transform: scaleY(1) translateY(0);}
  to{transform: scaleY(.75) translateY(min(19vh, 420px));}
}

.discover_filters{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  column-gap: 2vw;
  margin-top: 0;
  top:0;
  bottom: 0;
  padding: 10px 2vw;
  opacity: 0;
  animation: fadein .2s ease forwards;
  animation-delay: .5s;
  position: fixed;
  height: 100vh;
  will-change: transform;
  transition: transform 0.25s ease;
  touch-action: pan-y;
  backface-visibility: hidden;

  &.shrink{
    height: 0;
    padding:0;
    animation: fadeDown ease .5s;
  }

  &.unshrink{
    opacity: 1;
    width: 100%;
    top: auto;
    height: 100vh;
    z-index: 4;
    animation: unfadeUp ease .5s forwards;
    transform-origin: bottom;
    padding: calc(5vh + 50px) 0 calc(62px + 4vh) 0;
    margin-top: 0;
    flex-wrap: wrap;
    row-gap: 1vh;
    align-content: flex-start;
    overflow-y: auto;
    background-color: rgb(239, 239, 239);

    &.filtering ~ :is(#filterConfirm, #filterClear){
      display: flex;

      &#filterConfirm{
        margin: 0;
        left: auto;
        background-color:var(--green-bg-soft);
      }

      &#filterClear{
        width: 30%;
        left: 0;
        top: calc(3vh + 55px);
        box-shadow: 0 1px 3px -1px #9c9c9c;
        border-radius: 0 12px 12px 0;
        height: 55px;
        background-color: var(--white-bg-soft);
      }
    }

    & ~ .mapFilters{
      display: none;
    }

    &.filters ~ :is(#filterReset){
      display: flex;
      width: 30%;
      left: unset;
      right: 0;
      top: calc(3vh + 55px);
      box-shadow: 0 1px 3px -1px #9c9c9c;
      border-radius: 12px 0 0 12px;
      height: 55px;
      background-color: rgb(223 219 215);
    }
  }

  & .open_til{
    & .label{
      display: flex;
      align-items: center;
      justify-content: space-between;
      color:var(--gray-soft);
      padding-left:3vw;
    }
  }

  & .filter{
    padding: 0 max(30px,calc(1.8vw + .5vh));
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 10px;
    white-space: nowrap;
    font-family: 'poppins-reg', 'sanf serif';
    letter-spacing: 1.2px;
    font-weight: 500;

    min-width: 100%;
    font-size: var(--font-size-h4);
    position: relative;
    letter-spacing: 1.5px;
    font-weight: 500;
    color: var(--black-bg-soft);
    transition: font-size .5s ease, background-color .3s ease, border-radius .3s ease;

    &.recents{

      p{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        & img {
          height: 13px;
          width: 13px;
          filter: invert(.8);
        }
      }
    }
  }

  & .inners{
    display: none;
      width: 100%;
      border-radius: 0 0 8px 8px;
      padding:0 max(20px, 2vw) 10px max(20px, 2vw);
      margin: 0 0 1vh 0;
      z-index: 2;

      & :is(.header){
        padding: 10px;
      }

    & .sectionLabel{
      margin:2vh 0;
      padding: 10px;
      text-align: left;
    }

    & label:not(span label){
      display: block;
      margin: calc(5px + .8vh) 0 calc(8px + 1.6vh) 0;
      & span{
        display: block;
      }
    }

    &.recents{
      padding:0;
      margin-bottom: 3vh;

      .see-more-btn{
        display: none;
      }
    }
  }

  & .recentlyViewed{
    display: flex;
    column-gap: 3vw;
    row-gap: 1.5vh;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 max(20px, 2vw);

    .mini {
      max-width: 38%;
      min-width: 38%;
      margin-bottom: 5px;
      display: block;

      & .media {
        height: 90px;
        background: var(--black-bg-bright);
        border-radius: 10px;

        .video-wrapper{
          height: inherit;
        }

        &:empty{
          width: 90%;
          margin: 0 auto 5px auto;
          position: relative;
        }

        :is(img, video){
          border-radius: inherit;
          width: 100%;
          height: 100%;
        }
      }
      & .info{
        font-size: var(--font-size-tiny);
        padding: 0 5px;
      }
    }
  }

  & .openUntil{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 2vw;
    row-gap: 1.5vh;
    padding: 10px 0;

    & .time{
      max-width: unset;
      background: var(--white-bg-bright);
      box-shadow: 0 1px 3px -2px #333;
      margin: 0;
      color: var(--black-bg-soft);
      padding: 5px 0;
      border-radius: 6px;
      width: 20vw;
      text-align: center;
      min-width: 70px;
    }
  }

  & .filter.show {
    & + .inners {
        display: block;

        & .drinkTags{
          margin-top: 1vh;
        }
    }
  }

  & .customSlider {
    .wrapper{
      overflow: visible;
      .slidecontainer{
        position:absolute;
        top:-5px;
        right:0;
        width:100%;
      }
    }
  }
}

:is(#filterConfirm, #filterClear, #filterReset){
  position: absolute;
  top: 2vh;
  bottom: auto;
  left: 20%;
  height: 50px;
  font-size: var(--font-size-body);
  width: 60%;
  padding:0 max(2.5vw, 15px);
  display: none;
  justify-content: center;
  align-items: center;
  column-gap: 2vw;
  border-radius: 12px;
  transition: none;
  cursor: pointer;
  background-color: var(--white-bg-bright);
  box-shadow: 0 3px 5px -2px #3338;
  align-content: center;
  z-index: 11;
  animation: fadein ease .4s;
  color: var(--black-bg);

  &#filterConfirm{
    background: var(--gray-green-soft);
    color: var(--black-bg);
    letter-spacing: .75px;
    font-weight: 400;
    font-size: var(--font-size-h4);
    box-shadow: 0 1px 3px -1px #9c9c9c;
    max-width: 100%;
    width: 100%;
    margin: 0;
    left: 0;
    border-radius: 0 0 8% 8%;
    top: 0vh;
    height: 55px;
  }

  &#filterClear{
    right:auto;
    left: 2vw;
  }
  &#filterReset{
    left:auto;
    right: 0;
  }

  & img{
    max-height:35%;
    max-width: 20px;
    object-fit: contain;

    &.sm{
      max-height:30%;
      max-width: 12px;
    }
  }

}

body.darkMode :is(#filterConfirm){
  color: var(--white-bg);
}
.discover_filters:is(.show,.unshrink) ~ :is(#filterConfirm):not(.hide){
  display: flex;
}
.personal-challenges{
    margin-top: 6vh;
    row-gap:.75vh;
    display: flex;
    flex-wrap: wrap;
}
.challenge-container{
    font-size: var(--font-size-h4);
    position: relative;
    padding:1.5vh 0 1.5vh 1vw;
    width: 100%;
    border-radius: 6px;
    background: transparent;
    transition: background .2s ease;
}
.challenge-container:hover{
    box-shadow: 0 3px 17px -10px #3333;
    background: var(--white-bg-softest);
}
.challenge-container .name{
    cursor: pointer;
    padding-bottom: 4px;
}

.bean-canvas{
  position: relative;
    width: 50%;
    cursor: pointer;
    background: #6f4e3769;
    border: var(--bean) solid 4px;
    box-shadow: -1px 3px 4px #3c281673;
    border-radius: 167px 24px / 41px;
    margin: 0 auto;
    display: block;
    height: 100px;
    object-fit: contain;
    transform: skew(2deg, 0deg) rotate(7deg);
    margin-top: min(100px, 6vh);
}

 .discover-wrapper {
    width:100%;
    position:relative;
    margin:1.5vh 0 6vh 0;
    justify-content: space-between;
    user-select: none;
    /* transition: filter 0.2s ease-out, background-color 0.2s ease-out, padding-top .3s ease; */
    transition: background-color 0.2s ease-out, padding-top .3s ease;

    &.cafeMultiSelector{
      .home-card{
        border: solid 2px var(--blue-bg);
        .selectClicker{
          position: absolute;
          content: '';
          top:-15px;
          left: -10px;
          min-height: 30px;
          min-width: 30px;
          z-index: 2;
          border-radius: 50%;
          border: solid 3px var(--blue-bg);
          background-color: var(--blue-shadow);
          cursor: pointer;

          &.active{
            background-color: var(--white-bg-body);
            &:after{
              content: "\2713";
              color: var(--black-bg);
              position: absolute;
              left: 2px;
              font-size: 30px;
              top: -14px;
              font-weight: bold;
            }
          }
        }
      }
    }

    .sectionWrapper{
      width: auto;
    }

    .out-of-area ~ section {
      display: none;
    }

    .location-fallback-message {
      background: #fff8f0;
      border: 2px solid #d17f45;
      border-radius: 14px;
      padding: .65em 1rem;
      margin: 0 auto;
      color: #6b4f2a;
      box-shadow: 0 1px 3px rgba(209, 127, 69, 0.3), inset 0 0 2px #f1d8b1;
      width: min(92%, 480px);
      line-height: 1.4;
      position: relative;
      overflow: hidden;
    }

    .location-fallback-message p {
      font-size: 1rem;
    }

    .location-fallback-message strong {
      color: #c75e1a;
      font-weight: 600;
    }

    .sideScrollWrapper {
      display: flex;
      flex-wrap: wrap;
      width: 95%;
      padding: 5px 0 1vh 0;
      border: none;
      border-radius: 12px;
      background-color: transparent;
      margin: 2vh auto 0 auto;

      .header {
        width: 100%;
        margin-bottom: 1vh;
        padding: .5vh 2vw .5vh 1.5vw;
        font-family: 'quicksand', sans-serif;
        font-weight: 700;
        font-size: var(--font-size-h2);
        color: var(--black-bg-seethru);

        img{
          width: 13px;
          padding: 12px;
          cursor:pointer;
        }
      }
      .scroll{
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        align-items: center;
        column-gap: 1.5vw;
        padding: 0 calc(10px + 2vw);
        margin-top: 1.5vh;

        button{
          background: rgb(245 227 206);
          font-family: 'quicksand', sans-serif;
          font-weight: 500;
          outline: none;
          cursor: pointer;
          border: solid 2px var(--accent);
          border-radius: 8px;
          color: var(--espresso);
          min-width: 40%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          padding: 5px 10px;
          max-height: 44px;
          min-height: 35px;
          box-shadow: 0 1px 1px #bb8572a6;
        }

        .card{
          height: 170px;
          width: 45%;
          overflow: hidden;
          display: flex;
          min-width: 45%;
          flex-wrap: wrap;
          align-content: flex-start;
          
          .media-wrapper{
            width: 99%;
            margin: 0 auto;
            height: calc(100% - 50px);
            border-radius: 14px;
            box-shadow: 0 1px 3px #20202091;

            & :is(img.media-img,.media-vid){
              width: 100%;
            }
          }
          .title{
            white-space: normal;
            overflow: visible;
            padding-left: .5rem;
            margin-top: 3px;
            font-weight: 800;
            display: flex;
            font-size: var(--font-size-body);
            color: var(--white-bg-darker);
            font-family: 'quicksand', sans-serif;
          }
        }
      }
      &.hidden{
        padding: 5px 0;
        background-color: rgb(234 222 210);
        box-shadow: 0px 1px 2px #75696038;

        .header{
          margin:0;
          font-size: var(--font-size-body);
          font-weight: 600;
          color: var(--espresso);
          padding: .5vh 2vw .5vh calc(10px + 2vw);
        }
        .scroll{
          opacity: 0;
          transition: ease forwards .2s;
          height: 0;
          margin: 0;
          pointer-events: none;
          visibility: hidden;
        }
      }
    }
  }

  .discover-wrapper .header {
    padding:0;
    font-size:var(--font-size-h3);
    width:100%;
    position: relative;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .discover-wrapper .header .wrapper{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
  }
  .discover-wrapper .header label {
    position:relative;
    font-weight:bold;
    white-space: nowrap;
  }
.countdownLabel {
  flex:auto;
  font-size: var(--font-size-h4);
  font-weight: normal;
  margin: 0 0 0 auto;
  text-align:right;
  width: 100%;
}

.discover-wrapper .cards-wrapper{
    display: flex;
    overflow-x: hidden;
    -webkit-scroll-snap-points-x: repeat(100%);
      scroll-snap-points-x: repeat(100%);
      scroll-snap-destination: 0 0;
      scroll-snap-type: x mandatory;
      scroll-snap-type: mandatory;
      scroll-snap-align:start;
    flex-wrap: wrap;
    row-gap:calc(4vh + 55px);
    justify-content: space-around;
    column-gap: 1.5vw;
    margin-top: calc(2vh + 10px);
    padding-bottom: calc(3vh + 10px);
}

.discover-wrapper .cards-wrapper.featured{
  overflow-y: hidden;
  padding-bottom: calc(4vh + 10px);
  flex-wrap: wrap;
  overflow-x: hidden;
}

.discover-wrapper .cards-wrapper.featured:nth-of-type(1) {
  padding-top: 40px;
  margin-top: 0px;
}

.discover-wrapper h2{
    margin-top: 3vh;
    display: flex;
    padding: 0 4vw;
    align-items: center;
    scroll-snap-align: start;
    height: 55px;
    font-family: 'quicksand', 'sanf serif';
    letter-spacing: 1.1px;
    border-radius: 8px;
    color: var(--black-bg-seethru);
    font-family: 'quicksand', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-h2);
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;

    img{
      height: 45px;
      margin-left: 2vw;
    }
}

body.darkMode .discover-wrapper {
  h2{
    color: var(--gray-extra-soft);
    background-color: transparent;
  }
  .sideScrollWrapper {
    background-color: transparent;
    border-color: var(--bean);
    box-shadow: none;

    &.hidden{
      background:var(--black-bg);
    }

    .header {
      color: var(--gray-extra-soft);
      img{
          filter:invert(.95);
      }
    }
    .scroll{
      button{
        background: rgb(233 182 142);
      }
    }
  }
}
.discover-wrapper h2 .see-all{
    font-weight: normal;
    font-size: var(--font-size-h4);
    cursor: pointer;
}
.discover-wrapper .cards-wrapper .card{
    width:95%;
    min-width: 270px;
    max-width: 400px;
    flex:none;
    height: 350px;
    border-radius:12px 12px 4% 4%;
    transition: border-radius ease .3s;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    scroll-snap-align: start;
    background-color: transparent;
    cursor: pointer;

    & .cupLabelWrapper{
      background: var(--brown-gray-light-bg);
      width: 98%;
      padding: 2vh 2vw;
    }
}
.discover-wrapper .cards-wrapper.featured:first-child .card {
  box-shadow: 0 15px 20px -12px #3338;
}
    
body.darkMode .discover-wrapper .cards-wrapper .card{
    background: var(--black-bg);
    color: var(--white-bg-soft);
    
    .name{
      color: inherit;
    }
  &.home-card {
    & .description{
      color: var(--gray-extra-softest);
    }
    & .items{
      color: var(--gray-extra-soft);
    }
    & .stats {
      background-color: var(--black-bg);
      margin: 10px;
      & p {
        background: var(--black-bg-seethru);
        color: var(--gray-extra-soft);
        font-size: var(--font-size-small);
        box-shadow: 0 0px 1px rgb(45 42 41), 0 1px 1px rgb(22 20 29);

        &:is(.open,.closed){
          img{
            filter: invert(.9);
          }
        }

      }
    }
    &.nomedia{
      box-shadow: 1px 1px 3px #191818;
    }
  }
  &:hover{
    box-shadow: -2px 0 8px #2020209c;
  }
}

.main-content.default .discover-wrapper .cards-wrapper .card{
  opacity: .9;
}

.media-wrapper-container {
  position: relative;
}

.media-wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  max-height: 50vh;
  border-radius: 18px;
  user-select: auto;
  scroll-behavior: smooth;
}

.media-dots {
  display: flex;
  gap: 6px;
  width: auto;
  max-width: 70%;
  z-index: 10;
  overflow-x: auto;
  scroll-behavior: smooth;
  margin: -25px auto 0 auto;
  align-items: center;
}

.media-dot {
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  background: white;
  opacity: 0.5;
  transition: margin-bottom ease .1s;

  &.active{
    min-width: 12px;
    min-height: 12px;
    opacity: .9;
    margin-bottom: 2px;
  }
}

.video-dot {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid white;
  background: none;
  opacity: 0.5;
  transition: margin-bottom ease .1s;

  &.active{
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid white;
    opacity: .9;
    margin-bottom: 2px;
  }
}


@keyframes shimmerPlaceholder {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.discover-wrapper .cards-wrapper.featured .card{
    height: auto;
    position: relative;
    padding-bottom: 1vh;
    border-radius:20px;
    user-select: none;

    & .media-wrapper {
      max-height: 240px;
      border-radius: 18px;
      user-select: auto;
       
      & :is(img, video){
        object-fit: cover;
        width: 100%;
        min-width: 100%;
        &img{
          height: fit-content;
        }
      }

                    
      & :is(img, video):is([loading="lazy"]) {
        background: linear-gradient(90deg, #242323 25%, #202020 37%, #242323 63%);
        background-size: 400% 100%;
        animation: shimmerPlaceholder 1.4s ease infinite;
        box-shadow: none;
        border: none;
        
        /* --- ADD THESE LINES TO FIX THE GRAY BORDER --- */
        display: block;       /* Removes inline spacing gaps */
        color: transparent;   /* Hides the alt text/broken icon, which removes the browser border */
        font-size: 0;         /* Ensures no line-height artifacts appear */
        height: 100%;
      }

        & .video-play-button {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 64px;
          height: 64px;
          background: url('/assets/icons/play-button.png') no-repeat center center;
          background-size: contain;
          cursor: pointer;
          z-index: 2;
          pointer-events: auto;
          opacity:1;
          filter: drop-shadow(0px 1px 2px #33333399);
        }

        & .video-wrapper.playing{
          border-radius: 2px;
        }

        & .video-wrapper.playing .video-play-button {
          transition:opacity .1s;
          opacity: 0;
          pointer-events: none;

        }
    }

    & .inline {
        position: absolute;
        right: min(3vw, 10px);
        font-size: var(--font-size-small);
        top: 1.1vh;
        background: rgba(182, 182, 182, 95%);
        border-radius: 10px;
        padding: 4px 12px;
        color: rgb(18 18 18);

        &.open{
          
          &.one{
            background-color:rgba(255, 127, 80,95%);
            font-size: var(--font-size-body);
          }
          &.two{
            background-color:rgb(247 184 109 / 95%);
            font-size: var(--font-size-body);
          }
          &.three{
            background-color:rgb(179 238 165 / 95%);
          }
        }

        &.closed{
          background-color:rgb(179 238 165 / 95%);
          &.one{
            font-size: var(--font-size-body);
          }
          &.two{
            background-color:rgb(247 184 109 / 95%);
          }
          &.three{
            background-color:rgba(255, 127, 80,95%);
          }
          &.four{
            background-color:rgb(231 227 221 / 95%);
          }
        }
    }

    &:after {
      content: '';
      position: absolute;
      height: 20px;
      z-index: 1;
      left: 15%;
      width: 70%;
      bottom: -30px;
      background-color: #d1c0b287;
      box-shadow: 0 3px 6px -2px rgb(69 65 60 / 23%);
      border-radius: 72%;
      border-top-left-radius: 24px 13px;
      border-top-right-radius: 24px 13px;
    }

    & .footer {
      display: none;
    }
}

@media only screen and (max-height: 700px) {
  .discover-wrapper .cards-wrapper.featured .card{
    max-height: unset;
  }
}
.discover-wrapper .cards-wrapper .card:hover{
    border-radius:20px 20px 22px 22px;
}
.discover-wrapper .cards-wrapper .card .name{
    padding:1vh calc(7px + 2vw) 2vh calc(7px + 2vw);
    margin-top: 1vh;
    width: 100%;
    font-size:var(--font-size-h3);
}
.discover-wrapper .cards-wrapper .card :is(.description,.items,.time){
    padding: 1vh calc(10px + 2vw);
    width: 100%;
    transition: padding ease .4s;
    font-size: var(--font-size-body-smaller);

    &.name h2{
      font-size: var(--font-size-h1);
    }
}



.discover-wrapper .cards-wrapper .home-card{

  & .name{
    font-family: 'quicksand', 'sanf serif';
    font-weight: 600;
    color: var(--black-bg-soft);
    font-size: var(--font-size-h3);
    padding:1vh calc(7px + 2vw) 1vh calc(7px + 2vw);
    position: relative;
    display: flex;
    align-items: center;
  }

  &.nomedia .inline ~ .name{
    margin-top: 25px;
  }

  & .description{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 58px;

    &:empty{
      padding:0;
    }
  }

  & .stats{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 6px 2px 6px 2px;
    margin: 10px auto;
    border-radius: 8px;

  &:not(:empty) {
    background: #dbd7d4;
    box-shadow: inset 1px 1px 2px rgba(50, 50, 50, 5%);
  }

    & p {
      margin: 0 max(5px, .5vw);
      min-width: max-content;
      display: inline-flex;
      justify-content: center;
      background: var(--white-bg-bright);
      background-color: #ebe9e7;
      box-shadow: 0 0px 1px rgb(165 162 161), 0 1px 1px rgb(212 210 209);
      border-radius: 7px;
      height: 25px;
      width: auto;
      padding: 7px 12px;
      column-gap: max(5px, .5vw);
      align-items: center;

      & img {
        max-height: 24px;
        object-fit: contain;
        max-width: 27px;
      }
    }
  }

  &.accolade-card {

    & .name{
      color: var(--black-bg-soft);

      & h2{
        color: inherit;
      }
    }
    & :is(.time,.description){
      padding-left: 8vw;
      padding-top: 0;
    }
  }

  & .popup-container{
        position: absolute;
        left: 0;
        top: 0;
        border-radius: inherit;
        padding: 20% 0px 0 0px;
        background: rgb(30 30 30 / 40%);
        z-index: 4 !important;
        height: 99%;
        animation: fadein ease forwards .2s;

        & .popup{
          display: flex;
          position: relative;
          gap: .5rem;
          flex-wrap: wrap;
          color: var(--black-bg);
          background-color: var(--white-bg-bright);
          border-radius: 14px;
          padding: 0 2vw 1vh 2vw;
          max-height: min(70vh, 100%);
          overflow-y: auto;
          bottom: 0;
          height: inherit;
          align-content: flex-start;
          opacity: 0;
          animation: fadein ease forwards .3s;
          animation-delay: .1s;

          & .label{
            width: 100%;
            padding: 10px 1.5vw 15px 1.5vw;
          }

          & .day{
            background: #f9f9f9;
            padding: 10px;
            border-radius: 8px;
            flex: 1 1 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            max-width: 48%;

            &:first-of-type{
              border: 3px solid rgb(74 150 255);
              width: 98%;
              min-width: 98%;
            }
          }

          & .day-label {
            font-weight: bold;
            margin-bottom: 5px;
          }

          & .time {
            font-size: 14px;
            color: #555;

            & span{
              transition: font-weight ease .2s, font-size ease .2s, color ease .2s;
              &.bold{
                font-weight: bold;
                font-size: var(--font-size-h4);
                color: var(--black-bg-soft);
              }
            }
          }

          & .more {
            width: 100%;
            margin-top: 15px;
            font-size: var(--font-size-body-smaller);
            text-align: center;
            cursor: pointer;
            &:hover{
              color: var(--blue-bg);
            }
          }

          & .close{
            position: absolute;
            top: 7px;
            right: 7px;
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            & img{
              height: 60%;
              max-width: 60%;
              object-fit: contain;
            }
          }
        }

        &.tagNoteDetails{

          padding-top: 40vh;

          & .popup {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 50px 3vw 10px 3vw;
          }
        }
  }

  &.nomedia{
    background-color: #e7e4e0;
    box-shadow: 1px 1px 3px #c5c2bf;
    padding-top: 15px;

    & .stats{
      margin: 10px;
    }
  }

  &:not(.nomedia) .media-wrapper{
    min-height: 240px;
  }

}
.discover-wrapper .cards-wrapper .card h4{
    font-weight: normal;
}
.featuredShortcutWrapper {
  
  display: flex;
  justify-content: center;
  row-gap: 1vh;
  column-gap: 1.5vw;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 2vh;
  user-select: none;

  .shortcutWrapper{
    display: flex;
    justify-content: center;
    row-gap: 1vh;
    column-gap: 1.5vw;
    background: var(--brown-gray-light-bg);
    flex-wrap: wrap;
    width: 97%;
    border: solid 5px var(--brown-light-bg);
    padding: 1vh 0;
    box-shadow: -1px 3px 4px #b59a86;
    border-radius: 12px;

    &.allShortcuts{
      width: 96%;
    }

    .shortcut {
      color: var(--espresso);
      padding: 4px 10px;
      border: solid 4px var(--accent);
      font-size: var(--font-size-body-smaller);
      border-radius: 10px;
      width: 47%;
      height: min(10vh, 65px);
      box-shadow: 0 2px 3px #b59a86;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      user-select: none;
      cursor: pointer;
      background-image: url(../assets/images/brownSand.jpg);
      background-size: cover;
      background-color: rgb(255 233 210 / 78%);
      background-blend-mode: lighten;
      background-repeat: no-repeat;

      &:only-of-type{
        width: 94%;
        height: min(8vh, 70px);
        border-radius: 10px;
        background-position: 5% 20%;
      }

      &.hide, &.hide-by-limit{
        display: none;
      }
      
      &:nth-of-type(odd):not(.hide):not(:only-of-type) {
        background-position: 0 31%;
      }
      img{
        margin-right: min(1vw, 15px);
        max-height: 30px;
        object-fit: contain;
      }

      &.admin-schedule-btn{
        width: 94%;
        height:65px;
        box-shadow: 0px 2px 4px 1px #b59a86;
      }
      &.view-more-btn {
        width: 94%;
        height: 45px;
        box-shadow: 0px 2px 4px 1px #b59a86;
      }
    }

    &.topSearches{
      .shortcut{
        height: min(10vh, 55px);
        font-size: var(--font-size-small);
        img{
          max-height: 45%;
        }
      }
    }

    &.dailyDrip{
      width: 98%;
      justify-content: flex-start;
      column-gap: 3vw;
      flex-wrap: nowrap;
      overflow-x: auto;
      border-radius: 16px;
      padding: 1vh 2vw;

      .shortcut{
        height: min(15vh, 120px);
        width: auto;
        min-width: 30%;
        border-color: var(--accent);
        border-radius: 13px;

        &:only-of-type{
          width: 96%;
          margin: 0 auto;
        }
      }
    }
  }

  & h2{
    margin: 0 0 1vh 0;
    user-select: none;

    &:not(:first-of-type){
      margin-top: 2vh;
    }
  }

  .drag-ghost {
    opacity: 0.4;
    background: #f0f0f0;
  }

  .homeHistoryWrapper {
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    padding: 5px 0 1vh 0;
    border: none;
    border-radius: 12px;
    /* background-color: rgba(239, 216, 192, 0.612); */
    background-color: transparent;
    margin: 2vh auto 0 auto;

    .header {
      width: 100%;
      margin-bottom: 1vh;
      padding: .5vh 2vw .5vh 1.5vw;
      font-family: 'quicksand', sans-serif;
      font-weight: 700;
      font-size: var(--font-size-h2);
      color: var(--black-bg-seethru);
      letter-spacing: .6px;

      img{
        width: 13px;
        padding: 12px;
        cursor:pointer;
      }
    }
    .scroll{
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      width: 100%;
      column-gap: 1vw;
      align-items: center;
      padding-bottom: 5px;
      button{
        background: rgb(245 227 206);
        font-family: 'quicksand', sans-serif;
        font-weight: 500;
        outline: none;
        cursor: pointer;
        border: solid 2px var(--accent);
        border-radius: 8px;
        color: var(--espresso);
        min-width: 40%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        padding: 5px 10px;
        max-height: 44px;
        min-height: 35px;
        box-shadow: 0 1px 1px #bb8572a6;
      }
    }
    & .recentlyViewed {
      column-gap: 1.5vw;
      padding: 0 calc(10px + 2vw);
      margin-top: 1.5vh;

      .card{
        max-height: 125px;
        width: 45%;
        overflow: hidden;
        min-width: 45%;
        
        .media-wrapper{
          width: 99%;
          margin: 0 auto;
          max-height: calc(100% - 30px);
          min-height: 100px;
          border-radius: 14px;
          box-shadow: 0 1px 3px #20202091;
          & :is(img.media-img,.media-vid){
            width: 100%;
          }
        }
        .title{
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: var(--font-size-small);
          padding-left: .5rem;
          margin-top: 3px;
        }
      }
    }
    &.hidden{
      padding: 5px 0;
      /* background-color: rgb(234 222 210); */
      /* box-shadow: 0px 1px 2px #75696038; */

      .header{
        margin:0;
        font-size: var(--font-size-body);
        font-weight: 500;
        color: var(--espresso);
        padding: .5vh 1vw .5vh calc(5px + 1vw);
      }
      .recentlyViewed{
        opacity: 0;
        transition: ease forwards .2s;
        height: 0;
        margin: 0;
        pointer-events: none;
        visibility: hidden;
      }
    }
  }
}

.community-section{
  margin-bottom: 4vh;
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px;
  color: rgb(34, 34, 34);
  margin-top: 2vh;
  display: flex;
  background-image: radial-gradient(at bottom, var(--white-bg), rgb(215 194 172));
  background-size: 50% 50%;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  

  &:before{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgb(183 144 100 / 25%) 0%, rgb(203 140 109 / 10%) 40%, transparent 70%);
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    animation: galactic-move-spotlight 10s infinite ease-in-out alternate;
    will-change: transform;
    content: '';
  }

  & h1{
    color: var(--espresso);
    display: inline-flex;
    height: auto;
    justify-content: center;
    text-shadow: none;
    padding: 0 10vw;
    font-size: min(calc(8vw + 1vh), 40px);
    text-align: center;
    margin-top: 2.5vh;
    text-transform: uppercase;
    font-family: 'poppins-reg';
    line-height: 2.5rem;
    font-weight: 900;
  }

  & img.booth{
    height: auto;
    max-height: 175px;
    margin: 1vh auto;
    width: 100%;
    display: block;
    object-fit: contain;
  }
  & .community-view-more{
    margin: 0 auto 3vh auto;
    padding: 0.75rem 1rem;
    border: none;
    border-top: 1px solid #a2cbff;
    border-radius: 8px;
    background: #3e92ff;
    font-size: var(--font-size-h2);
    color: rgb(255, 255, 255);
    width: 50%;
    cursor: pointer;
    font-weight: 600;
    font-family: 'oxanium', sans-serif;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: #102745 1px 1px 3px;
  }

  &.hidden {
    padding: 5px 0;
    background: rgb(234 222 210);
    box-shadow: 0px 1px 2px #75696038;
    justify-content: flex-start;
    width: 95%;
    margin: 2vh auto 4vh auto;
    border-radius: 12px;

    &:before{
      display: none;
      background:transparent;
      animation:none;
    }

    h1{
      margin: 0;
      font-size: var(--font-size-body);
      font-weight: 200;
      color: var(--espresso);
      padding: .5vh 2vw .5vh calc(10px + 2vw);
      display: inline;
      text-transform: none;
    }
    img.booth{
      max-height: 12px;
      align-self: center;
      margin: 0 5vw 0 auto;
      padding: 9px 15px;
      width: 13px;
      padding: 12px;
    }
    .community-view-more{display: none;}
  }
}
.community-list-modal{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 1px;
  overflow-y: auto;

  .closeButton{
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: none;
    background-color: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    width: 35px;
    z-index: 2;
    height: 35px;
    background-image: url('/assets/icons/closeCircle.png');
    background-size: cover;
  }

  &.fadeout{
    animation: fadeout ease .5s forwards;
  }

  & .content{
    background: rgb(255, 255, 255);
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    overflow-y: auto;
    color: rgb(51, 51, 51);
    width: 100%;
    max-width: 900px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 20px;
  }

  & .threedbutton{
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    border-width: 0;
    padding: 0 8px 12px;
    width: 88px;
    box-sizing: border-box;
    background: transparent;
    font: inherit;
    cursor: pointer;
    color: var(--white-bg);

    &:active .top {
      transform: translateY(6px);
    }

    .top:after {
      content: '';
      position: absolute;
      z-index: -1;
      border-radius: 16px;
      width: 100%;
      height: 100%;
      box-sizing: content-box;
      background-image: radial-gradient(#cd3f64, #9d3656);
      text-align: center;
      color: var(--white-bg);
      box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .2), 0 1px 2px 1px rgba(255, 255, 255, .2);
      transition-property: border-radius, padding, width, transform;
      transition-duration: .2s;
    }

    &:active .top:after {
      border-radius: 18px;
      padding: 0 2px;
    }

    &:active .bottom {
      border-radius: 19px / 25px 19px 14px 14px;
      padding-top: 0;
    }

    &.small{
      width: 75px;
    }

    .top{
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      padding: 8px 16px;
      transform: translateY(0);
      text-align: center;
      color: #fff;
      text-shadow: 0 -1px rgba(0, 0, 0, .25);
      transition-property: transform;
      transition-duration: .2s;
      -webkit-user-select: none;
      user-select: none;

      &:after{
        content: '';
        position: absolute;
        z-index: -1;
        border-radius: 21px;
        width: 100%;
        height: 100%;
        box-sizing: content-box;
        background-image: radial-gradient(var(--green-bg-soft), var(--green-bg));
        text-align: center;
        color: #fff;
        box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .2), 0 1px 2px 1px rgba(255, 255, 255, .2);
        transition-property: border-radius, padding, width, transform;
        transition-duration: .2s;
      }
    }

    .bottom{
      position: absolute;
      z-index: 0;
      bottom: 4px;
      left: 4px;
      border-radius: 21px / 27px 21px 16px 16px;
      padding-top: 6px;
      width: calc(100% - 8px);
      height: calc(100% - 10px);
      box-sizing: content-box;
      background-color: var(--green-bg);
      background-image: radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(16px at -4px 0, white, transparent), radial-gradient(16px at calc(100% + 4px) 0, white, transparent);
      box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5), inset 0 -1px 3px 3px rgba(0, 0, 0, .4);
      transition-property: border-radius, padding-top;
      transition-duration: .2s;
    }

    &.blue{
      .top{
        &:after{
          background-image: radial-gradient(var(--blue-bg), var(--blue-bg));
        }
      }
      .bottom{
        background-color: var(--blue-bg);
      }
    }

    &.red{
      .top{
        &:after{
          background-image: radial-gradient(var(--red-bg-soft), var(--red-bg));
        }
      }
      .bottom{
        background-color: var(--red-bg);
      }
    }

    .base{
      position: absolute;
      z-index: -2;
      top: 4px;
      left: 0;
      border-radius: 21px;
      width: 100%;
      height: calc(100% - 4px);
      background-color: rgba(0, 0, 0, .15);
      box-shadow: 0 1px 1px 0 rgb(255 255 255 / 17%), inset 0 2px 2px rgba(0, 0, 0, .25);
    }
  }

  & .poll-slide{
    padding: 1.5rem;
    max-width: 480px;
    margin: 0 auto;
    color: var(--white-bg);
    position: relative;
    background: var(--black-bg-bright);
    border-radius: 12px;
    text-align: center;
  }
}


.admin-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black-bg-soft);

   .acm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
  }

   .acm-box {
    position: relative;
    background: #fff;
    padding: 1.5rem;
    border-radius: 14px;
    width: 280px;
    text-align: center;
    z-index: 1;
  }

  .acm-buttons button {
    margin: 0.5rem;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: #3498db;
    color: white;
    font-size: 1rem;
  }

  .acm-buttons button:hover {
    background: #2980b9;
  }
}

.curtain-root {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 999999;
overflow: hidden;
}


.curtain-root .curtain {
position: absolute;
top: 0;
width: 50vw;
height: 100%;
background: linear-gradient(90deg, #4b0000, #9b0000 20%, #4b0000 60%, #200000);
background-size: 300% 300%;
filter: brightness(1.15) saturate(1.4);
box-shadow: inset -20px 0 40px rgba(0, 0, 0, 0.6);
animation: curtainSheen 6s infinite linear;
transform-origin: top;
}


.curtain-root .left {
left: 0;
border-right: 3px solid rgba(0, 0, 0, 0.4);
animation: leftOpenTop var(--open-top) forwards ease-in-out,
leftOpenBottom var(--open-bottom) forwards ease-out;
}


.curtain-root .right {
right: 0;
border-left: 3px solid rgba(0, 0, 0, 0.4);
animation: rightOpenTop var(--open-top) forwards ease-in-out,
rightOpenBottom var(--open-bottom) forwards ease-out;
}


@keyframes curtainSheen {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}


/* Top moves faster (like rods sliding) */
@keyframes leftOpenTop {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}


@keyframes rightOpenTop {
0% { transform: translateX(0); }
100% { transform: translateX(100%); }
}


/* Bottom lags behind with elastic momentum */
@keyframes leftOpenBottom {
0% { transform: translateX(0) skewY(0deg); }
60% { transform: translateX(-90%) skewY(-2deg); }
85% { transform: translateX(-105%) skewY(1deg); }
100% { transform: translateX(-100%) skewY(0deg); }
}


@keyframes rightOpenBottom {
0% { transform: translateX(0) skewY(0deg); }
60% { transform: translateX(90%) skewY(2deg); }
85% { transform: translateX(105%) skewY(-1deg); }
100% { transform: translateX(100%) skewY(0deg); }
}
body.darkMode{
  .featuredShortcutWrapper {
    & .shortcutWrapper{
      background: #6f4e3769;
      border: var(--bean) solid 4px;
      box-shadow: -1px 3px 4px #3c281673;

      &.dailyDrip{
        background-color: var(--black-bg-bright);
        border-color: #4f3828;
      }

      & .shortcut {
        box-shadow: 0 2px 3px 1px #54423273;
        background-color: var(--brown-light-bg);
        color: var(--espresso);
        background-position: 0 31%;
        border-color: var(--bean);
        border-width: 3px;

        &.admin-schedule-btn{
          box-shadow: 3px 3px 4px 1px #54423273;
        }

        &:nth-of-type(odd):not(.hide) {
          &:only-of-type{
            box-shadow: none;
            background-image: none;
            background-color: rgb(238, 209, 177);
          }
        }
      }
    }
    .homeHistoryWrapper {
      background-color: transparent;
      border-color: var(--bean);
      box-shadow: none;

      &.hidden{
        background:var(--black-bg);
      }

      .header {
        color: var(--gray-extra-soft);
        img{
            filter:invert(.95);
        }
      }
      .scroll{
        button{
          background: rgb(233 182 142);
        }
      }
    }
  }
  .community-section{
    background-image: linear-gradient(transparent 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.01) 1px, transparent 1px), radial-gradient(at bottom, black, rgb(9 6 84 / 30%));
    background-size: 50px 50px;

    &:before{
      background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, rgba(123, 44, 191, 0.1) 40%, transparent 70%);
    }

    & h1{
      color: #8bf5fa;
      font-size: min(calc(9vw + 1vh), 44px);
    }

    &.hidden {
      background:var(--black-bg);

      h1{
        color: var(--gray-extra-soft);
      }

      img{
        filter: invert(.95);
      }
    }
  }
}

.guestLimitMessage{
  margin-top: 2vh !important;
  row-gap: 2vh !important;
}
.card {
  
  & .media-wrapper {
    width: 100%;
    align-self: flex-start;
    background: rgb(73, 61, 50);
    border-radius: 0;
    min-height: 240px;
    overflow-y: hidden;
    overflow-x: auto;
    cursor: default;
    position: relative;
    display: flex;
    content-visibility: auto;
    -webkit-scroll-snap-points-x: repeat(100%);
      scroll-snap-points-x: repeat(100%);
      scroll-snap-destination: 0 0;
      scroll-snap-type: x mandatory;
      scroll-snap-type: mandatory;

      & :is(img.media-img,.media-vid){
        scroll-snap-align:start;
        opacity: 0;
        transition:opacity .1s ease;

        &.loaded{
          opacity:1;
        }
      }

      .video-wrapper{
        min-width: 100%;
        max-width: 100%;
        position: relative;
        max-height: 50vh;
      }
      .image-wrapper{
        min-width: 100%;
        max-width: 100%;
        display: flex;

        .placeholder{
          width: 100%;
          object-fit: cover;
        }
      }
  }

  & .scroll-arrow{
    position: absolute;
    right: 2.5vw;
    top: calc(50% - 16.5px);
    display: none;
    justify-content: center;
    align-items: center;
    height: 33px;
    width: 33px;
    z-index: 4;
    cursor: pointer;
    border-radius: 50px;
    background: rgba(182, 182, 182, 85%);
    box-shadow: var(--box-shadow-light);
    padding:0 0 0 2px;

    &.leftArrow {
      left: 2.5vw;
      right: auto;
      padding:0 2px 0 0;
    }

    &.media{
      display: none;
      top:calc(50% - 43px);
      right: .5vw;
      background: rgb(71 71 71 / 41%);

      &.leftArrow {
        left: .5vw;
        right: auto;
      }

      img{
        filter: invert(.9);
      }
    }

    & img {
      height: 13px;
      width: 13px;
      object-fit: contain;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;
    }

    &:hover{
      background: var(--white-bg-soft);
    }
  }

  & .description .scroll-arrow{
    position: absolute;
    top: unset !important;
    bottom: 14px !important;
    background: rgb(220 220 220);
    color: black;
    border-radius: 0 3px 3px 0;
    box-shadow: var(--gray-box-shadow);
    left: auto !important;
    right: 2px !important;
    height: 44px !important;
    width: calc(max(15px, 1.4vw) + 1%) !important;
    display: none;

    &.leftArrow{
      border-radius: 3px 0 0 3px;
      right:auto!important;
      left: 2px !important;
    }
  }

  &.limit{
    padding-bottom: 2vh !important;

    .img-wrapper{
      filter: blur(5px);
    }
    .message {
      position: absolute;
      display: grid;
      width: 100%;
      text-align: center;
      top: 15px;
      row-gap: 2vh;
      font-size: var(--font-size-h1);
      color: var(--espresso);
      font-weight: 800;
      transform: translateY(25%);

      div{
        backdrop-filter: blur(7px);
        padding: 5px;
        box-shadow: var(--gray-light-box-shadow);
        border-top: solid 1px #ffffff10;
        background-color: #ffffff20;
        color: var(--orange-bg);
      }

      button{
        outline: none;
        border: none;
        border-radius: 6px;
        width: 52%;
        height: 40px;
        padding: 0 22px;
        font-size: var(--font-size-h2);
        box-shadow: var(--gray-dark-box-shadow);
        background-color: var(--brown-light-bg);
        color: var(--black-bg);
        font-family: 'quicksand', sans-serif;
        margin: 2vh auto 0 auto;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
@keyframes scaleUpDown { 0%, 100% { transform: scaleY(1) scaleX(1); } 50%, 90% { transform: scaleY(1.1); } 75% { transform: scaleY(0.95); } 80% { transform: scaleX(0.95); } } @keyframes shake { 0%, 100% { transform: skewX(0) scale(1); } 50% { transform: skewX(5deg) scale(0.9); } } @keyframes particleUp { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; top: -100%; transform: scale(0.5); } } @keyframes smoothColorShift { 0% { filter: hue-rotate(0deg) drop-shadow(0 0 10px #d43322); } 25% { filter: hue-rotate(270deg) drop-shadow(0 0 10px #800080); } 50% { filter: hue-rotate(90deg) drop-shadow(0 0 10px #008000); } 75% { filter: hue-rotate(180deg) drop-shadow(0 0 10px #0000ff); } 100% { filter: hue-rotate(360deg) drop-shadow(0 0 10px #d43322); } } @keyframes smokeOut { 0% { opacity: 1; filter: grayscale(0) blur(0); transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; filter: grayscale(100%) blur(10px); transform: translate(-50%, -60%) scale(1.5); } } /* --- CONTAINER & FIRE STRUCTURE --- */.fire-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; z-index: 5; pointer-events: none; /* Performance optimization: promote to own layer */ will-change: transform, opacity;transition: opacity ease .2s; } .fire-loader.hide{opacity: 0;} .fire-center { position: absolute; height: 100%; width: 100%; animation: scaleUpDown 3s ease-out infinite both; } .fire-center .main-fire { position: absolute; width: 100%; height: 100%; background-image: radial-gradient(farthest-corner at 10px 0, #d43300 0%, #ef5a00 95%); transform: scaleX(0.8) rotate(45deg); border-radius: 0 40% 60% 40%; animation: smoothColorShift 4s linear infinite; filter: blur(2px); } .fire-center .particle-fire { position: absolute; top: 60%; left: 45%; width: 10px; height: 10px; background-color: #ef5a00; border-radius: 50%; animation: particleUp 2s ease-out infinite both, smoothColorShift 4s linear infinite; } .fire-right { height: 100%; width: 100%; position: absolute; animation: shake 2s ease-out infinite both; } .fire-right .main-fire { position: absolute; top: 15%; right: -25%; width: 80%; height: 80%; background-color: #ef5a00; transform: scaleX(0.8) rotate(45deg); border-radius: 0 40% 60% 40%; animation: smoothColorShift 4s linear infinite reverse; } .fire-right .particle-fire { position: absolute; top: 45%; left: 50%; width: 15px; height: 15px; background-color: #ef5a00; transform: scaleX(0.8) rotate(45deg); border-radius: 50%; animation: particleUp 2s ease-out infinite both, smoothColorShift 4s linear infinite reverse; } .fire-left { position: absolute; height: 100%; width: 100%; animation: shake 3s ease-out infinite both; } .fire-left .main-fire { position: absolute; top: 15%; left: -20%; width: 80%; height: 80%; background-color: #ef5a00; transform: scaleX(0.8) rotate(45deg); border-radius: 0 40% 60% 40%; animation: smoothColorShift 4s linear infinite -1s; } .fire-left .particle-fire { position: absolute; top: 10%; left: 20%; width: 10%; height: 10%; background-color: #ef5a00; border-radius: 50%; animation: particleUp 3s infinite ease-out both, smoothColorShift 4s linear infinite -1s; } .fire-bottom .main-fire { position: absolute; top: 30%; left: 20%; width: 75%; height: 75%; background-color: #ff7800; transform: scaleX(0.8) rotate(45deg); border-radius: 0 40% 100% 40%; filter: blur(10px); animation: smoothColorShift 4s linear infinite; } .fire-loader.smoke-it { animation: smokeOut 0.5s ease-out forwards !important; } .fire-loader.smoke-it * { animation: none !important; }


.card .media-wrapper{
  min-height: 0;

  .claimMessage {
    display: none;
  }

  .endOfMediaWrapper {
    width: 100%;
    scroll-snap-align: start;
    min-width: 100%;
    display: flex;
    align-items: center;
    padding: 4vh 4vw;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow: hidden;

    button.action {
        background: var(--green-bg);
        height: 50px;
        width: 43%;
        border-radius: 6px;
        border: 1px solid var(--black-bg);
        font-family: 'quicksand', sans-serif;
        font-weight: 800;
        font-size: var(--font-size-h5);
        color: var(--gray-extra-softest);
        box-shadow: 0 3px 6px #222222, inset 1px 2px 9px #999999;
    
        &.save {
            background-color: var(--blue-bg);
            color: var(--gray-extra-softest);
        }
    
        &.nointerest {
            background-color: var(--red-bg-soft);
            color: var(--red-shadow);
        }
        &.share {
            background-color: var(--orange-bg-soft);
            color: var(--espresso);
        }
    }
  }
}
.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: url('/assets/icons/play-button.png') no-repeat center center;
  background-size: contain;
  filter: drop-shadow(1px 1px 1px #333);
  cursor: pointer;
  z-index: 2;
  pointer-events: auto;
  opacity:1;
}

#fullscreen-media-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999; 
    display: flex;
    overflow: hidden;

    .video-wrapper{
      position: relative;
    }
      & .video-close-button{
        position: absolute;
        top: 1rem;
        left: auto;
        right: 1rem;
        background: url('/assets/icons/closeCircle.png') no-repeat center center;
        background-size: contain;
        cursor: pointer;
        width: 40px;
        height: 40px;
        pointer-events: auto;
        opacity:1;
        animation: fadein ease .2s forwards;
      }

      & .video-wrapper.playing .video-play-button {
        transition:opacity .1s;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .overlay-slider-track {
          display: flex;
          height: 100%;
          width: 100%;
          overflow-x: scroll; 
          scroll-snap-type: x mandatory; 
          -webkit-overflow-scrolling: touch;
      }

      .overlay-slide {
          flex-shrink: 0;
          width: 100vw; 
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          scroll-snap-align: start;
      }

      .overlay-slide img,
      .overlay-slide video {
          max-width: 100%;
          max-height: 100% !important;
          object-fit: contain; 
      }
}

.card .name {
  .foundingBadge{
    top: calc(-1vh - 25px);
    left: -8px;
    z-index: 1;
    height: 50px;
    width: 50px;
    object-fit: contain;
    position: absolute;
    background: var(--white-bg);
    border-radius: 50px;
  }
  :is(.savedBadge, .verifiedBadge){
    z-index: 1;
    object-fit: contain;
    border-radius: 10px;
    height: 24px;
    width: 21px;
    position: absolute;
    top: calc(-1vh - 11px);
    margin: 0;
    right: 54px;

    &.verifiedBadge{
      height: 38px;
      width: auto;
      position: absolute;
      top: calc(-1vh - 18px);
      margin: 0;
      right: -4px;
    }
  }
}

.card.nomedia .name {
  .foundingBadge{
    top: calc(-1vh - 35px);
  }

  :is(.savedBadge, .verifiedBadge){
    position: relative;
    top: unset;
    right: unset;
    margin-left: auto;
    z-index: 1;
    height: 24px;
    width: 21px;
    object-fit: contain;
    border-radius: 50px;
  }
}
.card.clicked .name .foundingBadge{
  position: relative;
  margin-left: auto;
  top: unset;
  float: unset;
  left: unset;
}

.discover-wrapper .cards-wrapper .card .points-wrapper{
    width: 100%;
    align-self: flex-end;
    padding:2vh 3vw;
    border-radius: 0 0 10px 10px;
    height: 150px;
    overflow: hidden;
    display: flex;
}
.discover-wrapper .cards-wrapper .card .points-wrapper .xp-count{
    width: 100%;
    height: 100%;
    border-top:solid 1px #3332;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-h3);
}
.discover-wrapper .cards-wrapper .card .points-wrapper .xp-count .amount{
    font-size: var(--font-size-h2);
    font-weight: bold;
    text-align: center;
    margin:0 .7vw 0 .3vw;
}

#main-table{
    margin-bottom: 3vh;
}
.home_filters:not(.hide) ~ #main-table{
    max-width: 62vw;
}
:is(.home_filters:not(.hide),.home_menu:not(.hide)) ~ .modal_back{
  display: block;
  animation: fadein cubic-bezier(0,0,0,.1) forwards .2s;
}
::-webkit-scrollbar{
    display:none;
}
.table-nav{
    width:100%;
    height:40px;
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    align-items:center;
    justify-content: space-around;
    column-gap:15px;
    position: relative;
    user-select:none;
    padding: 5px 0;
}
.table-nav .right{
    position: fixed;
    bottom: 2vh;
    max-height: 50px;
    right: 3vw;
    height:100%;
    width:auto;
    color:rgb(30,30,30);
    font-size:22px;
    font-weight:bold;
    justify-content:center;
    column-gap: 20px;
    display:flex;
    align-items:center;
}
.table-nav .right button{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90%;
    width: 60px;
    border-radius: 10px;
    background: #fffa;
    color: #222;
    font-size: 22px;
    border: none;
    cursor: pointer;
}
.table-nav .right button .content {
    height: 100%;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.table-nav .right button img{
    max-height: 60%;
    object-fit: contain;
}
.table-nav .right button input{
    visibility: hidden;
    width: 0;
}
label[data-tooltip="import csv"]:hover:before {
    position: absolute;
    content: "*import csv";
    top: 12px;
    padding: 6px 9px 4px 9px;
    background: #444;
    color:#fffb;
    border-radius: 7px;
    right: -105px;
    height: 20px;
    font-size:13px;
}

.table-nav .op{
    padding:7px 15px;
    border-radius:4px;
    font-size: 1.5rem;
    white-space: nowrap;
    font-weight: bold;
}
.table-nav .op span{
    margin-left: 28px;
    font-size: 1.25rem;
    position: relative;
}

.table-nav .op span:before{
    content: '-';
    position: absolute;
    left: -18px;
    top: -2px;
}

table{
    border-radius:8px;
    box-shadow: 1px 3px 10px rgba(100,100,102,.1);
}

thead {
    white-space:nowrap;
    user-select:none;
}

th,tr, td{
    height:45px;
    padding:0 40px;
    vertical-align:middle;
    text-align:center;
    white-space:nowrap;
}

tr{
    position: relative;
}

td{
    overflow:hidden;
    text-overflow: ellipsis;
    max-width:inherit;
}

.menuBack{
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vw;
}

.entryMenu{
    position: fixed;
    width: 150px;
    z-index: 3;
    border-radius: 10px;
    background: white;
    padding: 1px 0;
    box-shadow: 1px 3px 10px rgba(100,100,102,.1);
    overflow:hidden;
}

.entryMenu div{
    height: 45px;
    display: flex;
    cursor: pointer;
    align-items: center;
    padding:0 15px;
    position: relative;
    justify-content: flex-start;
    box-shadow: 0 1px 0 #3332;
}
.entryMenu div:hover{
    background: #eeea;
}

.entryMenu div:last-of-type{
    box-shadow: none;
}

td{
    max-width: 30vw;
    white-space: normal;
    overflow-x: hidden;
    padding: 10px;
}

td[data-type='textarea'] {
    text-align: left;
    padding: 10px 40px;
}

td.menu img{
    cursor: pointer;
    padding:10px;
    height: 25px;
    width: auto;
}
td.select{
    padding:0;
    height:100%;
    width:60px;
}
td.select label{
    height: 45px;
    width: inherit;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
}
td.nopad{
    padding: 0;
}
td :is(input,textarea):focus{
    background:#f5f57e;
    width: 100%;
    padding: 15px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;  
}
td :is(input,textarea){
    border: none;
    background: transparent;
    height: 100%;
    width: 100%;
    text-decoration:none;
    padding:0;
    font-size: 1rem;
    outline: none;
}
td.select input{
    cursor: pointer;
}

td.action span{
    width: 90%;
    min-width:80px;
    max-width:150px;
    height: 80%;
    max-height: 100px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

thead tr:nth-child(1){
    background:rgb(240,240,241);
}
tbody tr:nth-child(2n + 2){
    background:rgb(237,237,239);
}

tbody tr:hover{
    background:#ede7d7;
}
th{
    position: relative;
}
th i {
    display: none;
    position: absolute;
    left: 5px;
    top: 5px;
}
th:hover i{
    display: block;
}
th span{
    cursor: pointer;
}
th .resize{
    position:absolute;
    right:0;
    top:0;
    cursor: col-resize;
    width:7px;
    height:100%;
    background: transparent;
    transition: background .3s ease;
}

th .resize:hover{
    background:rgba(80,80,80);
}
.table-nav{
    width: 90%;
    margin: 0 5% 1vh 5%;
    padding: 2vh 0 1vh 0;
    height: 5vh;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white-bg-body);
}

.table-nav .right{
    position: relative;
    bottom: unset;
    max-height: none;
    right: unset;
}
nav.fade .location_filter{
  animation: shrinkWidth ease .2s forwards;
  transform-origin: right;
  overflow:hidden;
}
nav.hide_filters{
  & #mapToggle{
    display: none;
  }

  & ~ content{
    height: 100vh;
    max-height: 100vh;
    overflow-y: hidden;
    position: fixed;
    bottom: 0;
    z-index: 11;
    .discover-wrapper{
      pointer-events: none;
      position: fixed;
      bottom: 0;
      z-index: -1;
      height: 92vh;
      margin: 0;

      .cards-wrapper{
        position: relative;
        z-index: -1;
        .card{
          position: relative;
          z-index: -1;
        }
      }
    }

    #mapResults{
      height: 100vh;
    }

    .siteLinks{
      display: none;
    }

    .main-content.mapShown .mapFilters{
      animation: fadeout ease forwards .2s;
    }
  }
}
.home_filters{
  opacity: 0;
  animation: fadein forwards ease .3s;
  animation-delay: .4s;
}
nav.hide_filters .location_filter, nav.hide_filters ~ .home_filters{
  display: none;
}
#user_geo_result{
  display: none;
}
.homePageTopDecor {
  height: 20px;
  width: 70%;
  margin: 0 auto;
  background-color: #d1c0b287;
  transition: width ease .4s;
  box-shadow: 0 3px 6px -2px rgb(69 65 60 / 23%);
  border-radius: 72%;
  border-top-left-radius: 24px 13px;
  border-top-right-radius: 24px 13px;
  display: block;
  transform: translateY(-8px);
  transition: width .4s ease, transform .2s ease-out;
}

nav:not(.map) .location_filter{
  display: none;
}
.location_filter{
    width: auto;
    display: flex;
    position: fixed;
    height: 62px;
    background: var(--white-bg-bright);
    bottom: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    border-radius: 16px 0 0 16px;
    box-shadow: -1px 1px 6px -1px #39383870;
    transition: padding ease .2s;
    cursor: pointer;
    z-index: 2;

    &:not(.solo){
      right: 69px;
    }

    &:not(.home){
    
      padding-right: 5px;

      &.solo{
        border: none;
        right: 0;
      }
    }

    & .secondary{
      font-size: var(--font-size-h4);
      padding: 0 max(15px, 2vw);
      white-space: nowrap;
      width: max-content;
      transition: padding ease .3s;
      font-family: 'poppins-reg', 'sanf serif';
      color: #666666;
      cursor: default;
      position: relative;
      height: 100%;
      width: 65px;
      opacity: 1;
    
      img{
        max-height:80%;
        object-fit: contain;
        width:30px;
        position: absolute;
        opacity:1;
        animation: fadein .5s forwards;
        transform-origin: left;
        transition: transform ease .5s;

        &:first-of-type{
          z-index: 2;
        }
      }
    }
}
.location_filter.hide{
  display: none;
}
.location_filter.unfaded{
  transform-origin: right;
  animation: growWidth ease .2s forwards;
  overflow:auto;
}
.location_filter.faded ~ .home_filters.hide{
  border-radius: 14px;
  transition: border-radius .4s ease;
}
.modal_back{
    position: fixed;
    left: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 9;
    display: none;
}
  .home_modal{
    position: fixed;
    right: 0;
    z-index: 10;
    width: max(450px,30vw);
    max-width: 100vw;
    top: auto;
    bottom:0;
    height: 100vh;
    background: var(--white-bg-body);
    box-shadow: 1px 6px 10px -4px #3332, 1px 6px 24px -4px #3339;
    padding-bottom: 5vh;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    transition: width cubic-bezier(0,0,0,.1) .2s, transform .2s ease;
    animation-delay: .1s;
    flex-wrap: wrap;
    align-content: flex-start;

    &:before {
      content: 'Menu';
      font-size: var(--font-size-h1);
      color: var(--black-bg-bright);
      margin-bottom: 5vh;
      font-weight: bold;
      display: block;
      padding: 3vh min(7vw, 30px) 0 min(7vw, 30px);
    }

    &.secondary:before{
      content: '';
      padding: 0 min(7vw, 30px);
      margin-bottom: 2vh;
    }

    &.hide{
      padding-bottom: 0;
      overflow-y: hidden;
      &:before {
        content: '';
        margin-bottom: 0;
        display: none;
        padding: 0;
      }

      &.secondary:before{
        content: '';
      }
       & .search-content{
        display: none;

        & .nav {
          display: none;
        }
       }
    }

    & .search-content{
      display: flex;
      flex-wrap: wrap;
      row-gap: 2vh;
      align-content: flex-start;
      padding:calc(1vh + .5vw) max(10px, 2vw) calc(6vh + .5vw) max(10px, 2vw);
      width:100%;

      & .nav {
        display: none;
      }

      & .profileWrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2vh;

        & img{
          width: 30vw;
          max-width: 120px;
          background: var(--yellow-bg);
          padding: 8vw;
          border-radius: 50%;
          height: 30vw;
          max-height: 120px;
        }
      }

      & .header{
        width: 90%;
        margin: 2vh auto;
        text-transform: capitalize;

        &.history-header{
          font-weight: normal;
          margin-bottom: .5vh;
          display: flex;

          & img{
            height: 15px;
            align-self: center;
            margin: 0 1vw 0 auto;
            padding: 4px 10px 12px 10px;
          }
        }
      }

      & :is(.history-container, .saved-history-container){
          display: flex;
          flex-wrap: wrap;
          &.history-container{
            margin-bottom: 3vh;
          }
          row-gap: 1vh;
          width: 100%;

          & .result{
            background-color: var(--white-bg);
            width: 92%;
            text-align: left;
            font-family: 'quicksand', 'sanf serif';
            font-weight: bold;
            color: var(--black-bg-light-soft);
            font-size: var(--font-size-body-smaller);
            box-shadow: 0 1px 3px #bdb5afaa;
            border: none;

            &.history-item {
              height: auto;
              min-height: max(45px, calc(1vw + 15px + 4vh));
              padding: 7px min(25px, 6vw);
              border:none;
              outline: none;
              position: relative;

              & .indicator {
                  height: 14px;
                  object-fit: contain;
                  width: 14px;
                  position: absolute;
                  right: 6px;
                  top: 4px;
              }

              &:is(:focus,:hover){
                border:none;
                outline: none;
                box-shadow:0 2px 6px -4px #353534ad;
                color:#333333;
              }

              :is(.close-btn, .save-btn) {
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 45px;
                background-color: #e74c3c;
                border: none;
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.2s ease;
                z-index: 10;
                border-radius: 0 6px 6px 0;
                animation: fadein ease forwards .3s;

                .show {
                  opacity: 1;
                }

                & img {
                  height: 14px;
                  width: 14px;
                  filter: invert(1) brightness(2);
                }

                &.save-btn{
                  border-radius: 3px 0 0 3px;
                  right: 45px;
                  background-color: var(--blue-bg);

                  & img {
                    height: 16px;
                    width: 16px;
                  }
                }
              }
            }

            &.history-item.hidden {
              display: none;
            }

            &.show-more{
              background: var(--blue-shadow-darker);
              justify-content: center;
              border-radius: 16px 10px;
              box-shadow: 0 2px 1px #d6d6d633, 0 -1px 2px #ffffffaa, 0 1px 2px #a6a7a8aa;
            }

            &:is(:focus,:hover){
              border:none;
              outline: none;
              box-shadow: 0 4px 12px -4px #008f7c, 0 4px 13px -4px #00546d28;
              color:#333333;
            }
          }

          &.expanded .result{
            animation: fadein ease .2s;
            &.show-more{
              display: none;
            }
          }
      }

      & .announcementWrapper{
        width: 100%;
        margin: 0vh 0 3vh 0;
        background: rgb(119 135 168 / 20%);
        padding: 0 0 3vh 0;
        border-radius: 6px;
        box-shadow: 0 5px 13px -5px #9da0a2;
      }

      & .result{
        width:95%;
        margin: 0 auto;
        height: max(45px, calc(1vw + 15px + 4vh));
        display:flex;
        align-items: center;
        justify-content: flex-start;
        padding:0 min(22px, 5.5vw);
        font-size: var(--font-size-h4);
        box-shadow: 0 -1px 1px #b0b0b08f, 0 1px 2px #8a8989aa;
        border:transparent solid 4px;
        border-radius: 6px;
        cursor: pointer;
        color: #555555;
        letter-spacing: .6px;
        font-family: sans-serif;
        outline: none;

        &:is(:focus,:hover){
          border:4px solid #00d6a1;
          outline: none;
          box-shadow: 0 4px 12px -4px #008f7c, 0 4px 13px -4px #00546d28;
        }

        &.login{
          font-family: 'outfit', sans-serif;
          font-size: var(--font-size-h1);
          font-weight: 600;
          letter-spacing: 1px;
          color: rgb(246 186 93 / 95%);
          text-shadow: 1px 2px 3px #913d34;
          background: linear-gradient(#c45043 2px, rgb(230, 199, 173) 249px);
          &:is(:focus,:hover){
            border:4px solid #913d34;
            outline: none;
            box-shadow: 0 4px 12px -4px #913d34, 0 4px 13px -4px #00546d28;
          }
        }
        &.saved{
          font-family: 'outfit', sans-serif;
          font-size: var(--font-size-h2);
          font-weight: 600;
          letter-spacing: 1px;
          color: rgb(247 235 177 / 95%);
          text-shadow: 1px 2px 3px #915e34;
          background: linear-gradient(#c47d43 2px, rgb(230, 199, 173) 249px);
        }

        &.create{
          font-family: 'lexend';
          font-size: var(--font-size-h1);
          background: rgb(240 169 112);
          color: var(--red-bg);
          padding-bottom: 2px;
          text-shadow: 1px 1px #9b3f3fde;
          box-shadow: #957c73de 1px 2px 3px -1px;
          font-weight: bold;
          &:is(:focus,:hover){
            border:4px solid #d63d00;
            text-shadow: 1px 1px #9b3f3fde;
            outline: none;
            box-shadow: 0 4px 12px -4px #c04515, 0 4px 13px -4px #00546d28;
          }
        }

        &.suggest{
          background: var(--brown-light-bg);
          font-family: 'lexend';
          font-size: var(--font-size-h3);
          color: var(--black-bg-light-soft);
          font-weight: 400;
          padding-bottom: 2px;
        }

        &.bugReport{
          background: var(--brown-gray-light-bg);
          font-family: 'lexend';
          font-size: var(--font-size-h3);
          color: var(--black-bg-light-soft);
          font-weight: 400;
          padding-bottom: 2px;
        }
        &.voucher{
          font-family: 'lexend';
          font-size: var(--font-size-h3);
          color: var(--black-bg-light-soft);
          font-weight: 400;
          padding-bottom: 2px;
          background: rgb(255 226 203);
          box-shadow: 0 -1px 1px #dcbc928f, 0 1px 2px #b68b67aa;
        }

        &.settings{
          background: var(--brown-gray-light-bg);;
          font-family: 'lexend';
          font-size: var(--font-size-h3);
          color: var(--black-bg-light-soft);
          font-weight: 400;
          padding-bottom: 2px;
        }

        &.devPlans{
          background: var(--gray);
          font-family: 'lexend';
          font-size: var(--font-size-h3);
          color: var(--white-bg-soft);
          font-weight: 400;
          padding-bottom: 2px;
        }

        &.manage{
          background-color: var(--blue-shadow);
          box-shadow: 0px 1px 1px #b0b0b066, 0 0px 2px #8a898955;
          font-family: 'lexend';
          font-size: var(--font-size-h3);
          color: var(--black-bg-bright);
          font-weight: 400;
          padding-bottom: 2px;
          text-align: left;
        }

        &.console{
          background: var(--black-bg);
          font-family: 'lexend';
          font-size: var(--font-size-h3);
          color: var(--white-bg-soft);
          font-weight: 400;
          padding-bottom: 2px;
        }

        &.report{
          background: var(--brown-gray-light-bg);
          font-family: 'lexend';
          font-size: var(--font-size-h3);
          color: var(--black-bg);
          font-weight: 400;
          padding-bottom: 2px;
        }

        &.about{
          font-family: 'lexend';
          background: var(--brown-gray-light-bg);
          color: var(--black-bg-light-soft);
          position: relative;
          box-shadow: 0 -1px 1px #b0b0b08f, 0 1px 3px #453d38aa;

          span{
            height: 33px;
            width: 33px;
            display: inline-flex;
            background: var(--blue-shadow);
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            position: absolute;
            top: 0;
            right: 0;

            &:empty{
              display: none;
            }
          }
        }

        &.logout{
          background: var(--orange-shadow);
          font-family: 'lexend';
          font-size: var(--font-size-h3);
          color: var(--black-bg-light-soft);
          font-weight: 400;
          padding-bottom: 2px;
          margin: 6vh auto 3vh auto;
        }

      }

      .loginForm{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        animation: fadein ease .2s;
        padding: 2.5vh 2vw;
        border-radius: 14px;
        font-family: 'quicksand', sans-serif;

        &:is(.signin,.signup,.help){
          background: var(--white-bg);
          box-shadow: 0 0 2px rgb(155 154 153);
        }
        & .label{
          font-size: var(--font-size-h2);
          font-weight: bold;
          margin-bottom: 4vh;
          width: 100%;
          padding: 0 5vw;

          &:first-child{
            font-size: var(--font-size-h1);
          }
        }

        & .label2{
          margin: 0 auto 2vh auto;
          text-align: center;
          width: 88%;
          font-size: var(--font-size-body);
          font-weight: 500;
        }
        & .label3{
          margin: -1vh auto 2.5vh auto;
          text-align: center;
          width: 88%;
          font-size: var(--font-size-small);
          color: var(--gray);
        }

        .inputLabel{
          position: relative;
          width: 85%;
          height: 40px;
          margin: calc(3vh + 10px) 0 calc(0vh + 15px) 0;
          display: flex;
          align-items: center;

          &:before {
            content: 'Email';
            font-size: var(--font-size-body-smaller);
            position: absolute;
            top: -30px;
            font-weight: 500;
          }

          &.none{
            margin: 0 0 15px 0;
            &:before {
              content: '';
            }
          }

          &.username:before {
            content: 'Username';
          }

          &.password:before {
            content: 'Password';
          }

          &.confirmpassword:before {
            content: 'Confirm Password';
          }

          img{
            object-fit: contain;
            width: 20px;
            height: 15px;
            position: absolute;
            left: 15px;
          }
        }

        & input:is([type='input'],[type='password'],[type='text'],[type='email']), textarea{
          width:100%;
          height: 40px;
          padding-left: 1rem;
          border-radius: 8px;
          border: none;
          outline: none;
          box-shadow: inset 0px 0 2px #7f8182b0, inset -1px 0 3px #7f81821c;
          font-size: var(--font-size-small);
          background: #d9d9da;
          font-family: 'quicksand', sans-serif;

          &::placeholder{
            color: var(--black-bg);
          }

          &:is([type='input']) + input[type='input']{
            margin-top: 1vh;
          }

          &:is(textarea){
            height: auto;
            min-height: 120px;
            margin-bottom: 1vh;
          }

          &:not(:placeholder-shown){
            border-color:var(--brown-light-bg);
          }

          &.matched{
            border:rgb(141 225 158) solid 3px;
          }

          &.blinking {
            animation-name: blinker;
            animation-duration: 1s;
            animation-iteration-count: 1;
          }
        }

        img ~ input:is([type='input'],[type='password'],[type='text'],[type='email']){
          padding-left: calc(1rem + 36px);
        }

        & .forgot{
          width: 85%;
          text-align: right;
          margin-top: -1vh;
          font-size: var(--font-size-small);
          cursor: pointer;
          font-weight: 500;
          font-family: 'quicksand', sans-serif;

          &:hover{
            text-decoration: underline;
          }
        }

        & button{
          width: 60%;
          height: 40px;
          border-radius: 10px;
          border: none;
          outline: none;
          box-shadow: var(--gray-box-shadow);
          background: var(--black-bg-soft);
          color: var(--white-bg-bright);
          font-size: var(--font-size-body);
          font-weight: bold;
          text-transform: capitalize;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: 'quicksand', sans-serif;

          img{
            object-fit: contain;
            height: 35%;
            width: auto;
            margin-left: min(3vw, 15px);

            &.left{
              margin-left: 0;
              margin-right: min(3vw, 15px);
            }

            &.sm{
              height: 25%;
            }
          }

          &.submit{
            background: linear-gradient(to right, rgb(233 161 94) 21%, #e96445);
            box-shadow: var(--gray-light-box-shadow);
            margin-top: 4vh;
            height: 40px;
            width: 86%;
            font-weight: 400;
            font-size: var(--font-size-body);
            font-family: 'outfit', sans-serif;
            letter-spacing: .5px;
            border-radius: 6px;
          }

          &.signup{
            box-shadow: none;
            background-color: transparent;
            color: var(--gray);
            font-size: var(--font-size-small);
            font-weight: 500;
            margin-top: 3vh;
            position: relative;
            width: auto;
            min-width: 60%;
            text-transform: none;

            &:before{
              content: '';
              height: 1px;
              width: 100%;
              background-color: var(--gray-extra-soft);
              margin-bottom: 3vh;
              display: block;
              position: absolute;
              top: -0;
              left: 0;
            }
          }
        }

        & .reportTable{
          justify-content: flex-start;
          display: flex;
          width: 100%;
          overflow-x: auto;
          flex-wrap: wrap;
          margin-top: 4vh;

          .table{
            color: var(--black-bg);
          }

          tr.expanded td {
            white-space: normal;
            text-overflow: initial;
            word-break: break-word;
            overflow: visible;
            height: auto;
            padding-top: 20px;
            padding-bottom: 20px;
          }

          tr {
            transition: all 0.2s ease;

            & .location-list{
              text-align: left;
              margin-left:1rem;

              &:before{
                content:'Visits by Country:';
                margin-right: .5rem;
              }

              div{
                display: inline-block;
                margin-left: 1rem;
              }
            }
          }
        }

        &.unclaimedVouchers {
          padding: 1.5rem 0;
          background: #fafafa;
          border-radius: 0.5rem;
          max-width: 600px;
          margin: 6vh auto 0 auto;

          .voucherContainer {
            display: flex;
            margin-top: 4vh;
            flex-direction: column;
            gap: 1.25rem;
            padding: 0 max(2vw, 20px);

            & > .label {
              font-size: 1.25rem;
              font-weight: 600;
              margin-bottom: 0.75rem;
            }

            & > button[type="button"] {
              background: transparent;
              border: none;
              color: #007bff;
              font-size: 0.9rem;
              margin-bottom: 1rem;
              cursor: pointer;

              &:hover {
                text-decoration: underline;
              }
            }

            .voucherCard {
              padding: 1rem;
              background: #fff;
              border-radius: 0.5rem;
              box-shadow: 0 1px 5px -2px #b8b8b8;

              h3 {
                margin: 0 0 0.5rem;
                font-size: 1.1rem;
                text-transform: uppercase;
                color: #333;
              }

              em {
                color: #555;
              }

              p {
                margin: 0.5rem 0;
                color: #444;

                &.voucherMessage {
                  font-style: normal;
                  color: #0069d9;
                  margin-bottom: 6vh;
                  a {
                    color: #0056b3;
                    text-decoration: underline;

                    &:hover {
                      color: #004085;
                    }
                  }
                }
              }

              select.cafeSelect {
                width: 100%;
                padding: 0.5rem;
                margin-top: 0.75rem;
                border: 1px solid #ccc;
                border-radius: 0.25rem;
                font-size: 0.95rem;
              }

              button {
                display: block;
                margin: 2rem auto 1rem auto;
                padding: 0.5rem 1rem;
                background: #28a745;
                border: none;
                border-radius: 0.25rem;
                white-space: nowrap;
                color: #fff;
                font-size: 0.95rem;
                cursor: pointer;
                font-family: 'quicksand', sans-serif;

                &.search{
                  background: var(--purple-bg);
                  padding: 0.5rem 1.5rem;
                  width: auto;
                }

                &:disabled {
                  background: #94d3a2;
                  cursor: default;
                }

                &:hover:not(:disabled) {
                  background: #218838;
                }
              }
            }

            .inactiveInfo {

              .card{
                background: #fff3cd;
                border-left: 4px solid #ffeeba;
                padding: 0.75rem;
                margin: 1rem 0 2vh 0;
                font-size: 0.95rem;
                color: #856404;
              }

              .linkBtn {
                margin: 2vh auto;
                font-family: 'quicksand', sans-serif;
                width:auto;
                background-color: var(--purple-shadow-darker);

                &.search{
                  background-color: var(--green-bg);
                }

                &.submit{
                  background-color: var(--blue-bg);
                }

                &:hover {
                  color: #004085;
                }
              }

              p {
                margin-top: 0.75rem;
                text-align: center;

                span{
                  display: inline-block;
                }
              }
            }

          }
        }

        &.accountsVouchers{

          .cityLabel{
            margin-top: 3vh;
          }

          .label{
            font-size: var(--font-size-h4);
            margin-bottom:1vh;
          }

          .reportSection{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 3vh 0;
            background: var(--white-bg-body);
            border-radius: 6px;
            padding: .5vh 3vw 2vh 3vw;
            box-shadow: 0px 1px 3px #AAAAB6;

            .label2{
              width: 96%;
            }

            .expand{
              width: 100%;
              margin-top: 3vh;
              padding: 0 3vw;
            }
          }

          select.filterSelect {
              width: 98%;
              background: var(--white-bg-bright);
              outline: none;
              border: none;
              color: var(--black-bg);
              box-shadow: 0 1px 2px #777777;
              height: 40px;
              border-radius: 8px;
              padding: 0 2vw;
              font-weight: 700;
              font-size: var(--font-size-h4);
              font-family: 'poppins-reg';
              margin-bottom: 3vh;
          }

          .collapsed{
            display:none;
          }

          button{
            font-weight: normal;

            &.filterBtn{
              height: 35px;
              border-radius: 8px;
              background: var(--blue-shadow-light);
              color: var(--black-bg);
              font-family: 'quicksand', sans-serif;
              font-weight: 500;
            }
            &.blue{
              background-color: #0074d9;
              height: 40px;
              color: var(--white-bg);
            }
          }

          .foundingDetails {
            text-align: center;

            .founderList{
              width: 100%;
              margin-top:5vh;
            }
          }
        }

        &.marketingDashboard {
          background-color: var(--white-bg-body);
          box-shadow: none;

          .label.managedListings{
            margin-top: 4vh;
          }

          .reportSection{
            font-family: 'quicksand', sans-serif;
            width: 100%;
            margin-top: 2vh;

            &.campaign{
              padding-top: 2vh;
              .label2{
                margin: 0 auto calc(2vh + 15px) auto;
              }
            }

            &.activeCampaigns{
              margin-top: 5vh;
            }

            &.activeCampaigns .userSuggestions{
              .suggestion{
                margin-bottom: 10px;
              }
              .name{
                font-size: var(--font-size-h3);
                text-transform: capitalize;
                font-family: 'quicksand', sans-serif;
                font-weight: 800;
                text-decoration: underline;
              }

              .address{
                padding: 4px 1vw;
                font-family: 'lexend', sans-serif;
                font-weight: 300;
              }

              .status{
                padding: 4px 1vw;
                margin-top: 10px;
              }

              .see-past-btn{
                margin: 2vh 0 0 4vw;
                display: block;
                background: var(--blue-shadow-darker);
                color: var(--black-bg);
                font-weight: 600;
                font-size: var(--font-size-body-smaller);
                font-family: 'quicksand', sans-serif;
                padding: 0 max(12px, 5vw);
              }

              .message{
                margin: 1vh auto 10px auto;
                padding: 0 2vw;

                &.second{
                  margin-top: 3vh;
                }
              }
            }

            &.tools{

              .userSuggestions.tools{
                display: flex;
                padding: 2vh 2vw;
                column-gap: 1.25vw;
                row-gap: 10px;
                flex-wrap: wrap;

                button{
                  background: var(--accent);
                  color: var(--black-bg);
                  width: auto;
                  font-weight: 600;
                  font-size: var(--font-size-body-smaller);
                  font-family: 'quicksand', sans-serif;
                  padding: 0 max(15px, 1.5vw);
                }
              }
            }

            .dayCardsContainer{
              display: flex;
              gap: 8px;
              margin-top: 10px;
              width: 100%;
              overflow-x: auto;
              padding: 0 3vw;

              .dayCard{
                background-color: var(--white-bg);
                transition: border .2s ease;
                flex:1;
                padding:1.25vh 0;
                border:solid #ddd;
                text-align:center;
                cursor:pointer;
                position: relative;
                min-width: max(65px, 20vw);

                #explosionCanvas {
                  position: absolute;
                  pointer-events: none;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  z-index: 1000;
                }

                &.active{
                  border: solid var(--green-bg);
                  border-radius: 4px;
                }

                &.blur{
                  filter: blur(1px);
                }

                &.soldOut{
                  pointer-events: none;
                  overflow: hidden;
                  min-width: 22vw;
                }
                &.soldOut::before {
                  content: "SOLD OUT";
                  position: absolute;
                  top: 37px;
                  left: -21%;
                  width: 150%;
                  text-align: center;
                  font-weight: bold;
                  font-size: var(--font-size-body-smaller);
                  color: rgb(153 61 63);
                  background: rgba(255, 182, 193, 0.9);
                  transform: rotate(-45deg);
                  pointer-events: none;
                  padding: 4px 0;
                  z-index: 1000;
                  user-select: none;
                  box-shadow: 0 0 5px rgba(178, 34, 34, 0.7);
                  border-radius: 3px;
                }

                &.purchased{
                  pointer-events: none;
                  overflow: hidden;
                  min-width: 22vw;
                  & ::before {
                    content: "PURCHASED";
                    position: absolute;
                    top: 31px;
                    left: -36%;
                    width: 180%;
                    text-align: center;
                    font-weight: bold;
                    font-size: var(--font-size-body-smaller);
                    color: rgb(40, 107, 40);
                    background: rgba(182, 255, 192, 0.9);
                    transform: rotate(-45deg);
                    pointer-events: none;
                    padding: 4px 0;
                    z-index: 1000;
                    user-select: none;
                    box-shadow: 0 0 5px rgba(25, 121, 21, 0.342);
                    border-radius: 3px;
                  }
                }

                &.maxedOut{
                  pointer-events: none;
                  overflow: hidden;
                  min-width: 22vw;
                  & ::before {
                    content: "TOP SPOT";
                    position: absolute;
                    top: 31px;
                    left: -36%;
                    width: 180%;
                    text-align: center;
                    font-weight: bold;
                    font-size: var(--font-size-body-smaller);
                    color: rgb(61, 134, 61);
                    background: rgba(190, 233, 196, 0.9);
                    transform: rotate(-45deg);
                    pointer-events: none;
                    padding: 4px 0;
                    z-index: 1000;
                    user-select: none;
                    box-shadow: 0 0 5px rgb(12 63 9 / 17%);
                    border-radius: 3px;
                  }
                }

                .curPos{
                  font-size: var(--font-size-tiny);
                  margin: 1vh max(8px, 3vw) 0 max(8px, 3vw);
                }
              }
            }

            .dayCardsContainer.supercharge{
              .dayCard{
                &.maxedOut{
                  pointer-events: auto;
                }
                &.purchased{
                  pointer-events: auto;
                }
              }
            }
            .label3{
              font-size: var(--font-size-body-smaller);
              font-style: italic;
            }

            .userSuggestions{
              margin-top: 1vh;
              background: rgb(225 220 216);
              padding: 2vh 0;
              border-radius: 4px;

              .message{
                width: 94%;
                margin: 0 auto;
              }
              .suggestion{
                width: 94%;
                margin: 0 auto;
              }

              &.analytics{

                b.header{
                  display: block;
                  padding: 10px 0 5px 0;
                  color: var(--gray);
                  margin: 0;
                  &.top{
                    color: var(--black-bg);
                  }
                }
                .clickable b{
                  color: #0056b3;
                }
                .suggestion{
                  margin-bottom: 1vh;
                }

                .monthAnalytics{
                  margin: 10px 0;
                  background: var(--white-bg-body);
                  padding: 5px 2vw;

                  .monthLabel{
                    margin-bottom: 5px;
                  }

                  .address{
                    padding: 0 1vw;

                    &.white{
                      padding:2px 10px 10px 10px;
                      background:#f8f9fa;
                      border-radius:6px;
                      margin-bottom:10px;
                    }
                  }
                }

                button.seeMonthStats{
                  margin-top: 2vh;
                  padding: 0 min(20px, 4.5vw);
                  font-size: var(--font-size-body-smaller);
                  background: var(--green-shadow-darker);
                  font-family: 'quicksand', sans-serif;
                  border-radius: 8px;
                  color: var(--black-bg);
                }

                .upgradeMessage{
                  font-size: var(--font-size-small);
                  text-align: right;
                  font-weight: bold;

                  span{
                    cursor: pointer;
                  }
                }

                .profileCompletion {
                    font-style: italic;
                    opacity: 0.7;
                    width: 100%;
                    font-size: var(--font-size-body-smaller);
                    margin: 2vh 0;
                }
              }

              &.campaign{
                position: relative;
                padding-top: 74px;
                .label3{
                  background: var(--foam);
                  position: absolute;
                  top: -9px;
                  padding: 7px 5px;
                  width: 85%;
                  left: 7.5%;
                  box-shadow: 0 1px 5px -2px #bbb7b7;
                }

                .boostCreditWrapper{
                  &.hide{
                    display: none;
                  }
                  .switchWrapper {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 10px;
                  }
                }
              }
            }
            .currentPosition{
              display: inline-flex;
              align-items: center;
              gap: 10px;

              b{
                font-size: var(--font-size-h3);
              }
            }
            .desiredPosition:not(.hide){
              margin: 3vh 0 1vh 0;
              padding:0 4vw;
              display: inline-flex;
              align-items: center;
              gap: 10px;
              .positionValue {
                font-weight: bold;
                color: var(--indigo-bg);
                font-size: var(--font-size-h2);
              }
            }

            .increasePosition, .maxMessage{
              padding: 0 4vw;
              margin-top: 3vh;
            }
          }

          .cafeAccount{
            margin-bottom: 7px;
            span{
              font-size: var(--font-size-small);
              padding: 0 3vw;
            }
          }

          & button {
            padding: 0 12px;
            width: auto;
            border-radius: 6px;
            box-shadow: var(--gray-light-box-shadow);

            &.back{
              width: 60%;
            }

            &.launch{
              background-color: var(--blue-bg);
              color: #fff;
              border: none;
              padding: 8px 14px;
              font-weight: 400;
              font-size: var(--font-size-body-smaller);
              border-radius: 6px;
              font-family: 'lexend';
              margin: 0 0 0 4vw;
              position: relative;
            }

            &#calendarBtn{
              padding: 0 10px;
              background-color: var(--indigo-bg);
              border-radius: 5px;
              height: 40px;

              img{
                height: 70%;
                object-fit: contain;
                margin-left: 0;
              }
            }

            &.upgradeBtn{
              background: transparent;
              color: var(--espresso);
              box-shadow: unset;
              border-radius: 0;
              border-bottom: 1px solid var(--espresso);
              display: inline-flex;
              align-items: end;
              padding: 0;
              height: 33px;
              font-weight: normal;
              font-size: var(--font-size-small);
            }

            &:is(.green,.orange,.gold){
              background: var(--green-bg-soft);
              color: var(--black-bg);
              font-family: 'quicksand', sans-serif;
              padding: 0 min(4vw, 25px);
              display: block;
              margin: 3vh auto;

              &.orange{
                background:var(--accent);
              }
              &.gold{
                background:var(--orange-light);
              }

              &.hide{
                display: none;
              }

              &:disabled {
                background: var(--gray-extra-soft);
                cursor: not-allowed;
                color: var(--black-bg-soft);
              }
            }
          }

          .weekSelector{
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 0 2vh 0;
            width: 100%;
            background: var(--black-bg-seethru);
            justify-content: space-around;
            padding: 10px 0;
            color: var(--white-bg);

            .wrapper{
              display: inline-flex;
              gap: 10px;
              align-items: center;
              height: 100%;
            }
          }

          select{
            height: 36px;
            padding: 0 1vw;
            background: var(--white-bg-bright);
            border-radius: 10px;
            color: var(--black-bg);
            margin: 10px 5px;
            outline: none;
            border-color: #cac9c9;
            box-shadow: inset 2px 1px 2px #fefefe, 1px 1px 2px #dddddd;

            &#cafeSelector {
                min-width: 70%;
                margin: 10px 0;
                padding: 0 min(2vw, 20px);
                background: rgb(238 175 135);
                display: block;
                font-weight: 700;
                font-family: 'quicksand', sans-serif;
                font-size: var(--font-size-body);
                border: rgb(242 184 148) solid 2px;
                border-radius: 6px;
                box-shadow: inset 2px 2px 10px #ffc49f, 1px 1px 4px #b18f7b;
            }
          }
        }

        &.verifiedCafes{
          .reportSection{
            width: 100%;
          }
          .cityLabel{
            margin-top: 4vh;
          }
          .filterSelect{
            width: 100%;
            padding-left: 1rem;
            height: 36px;
          }
        }

        &.globalTags{
          .reportSection{
            width: 100%;

            .userSuggestions{
              margin-top: 3vh;
            }
          }
          .filterSelect{
            width: 100%;
            padding-left: 1rem;
            height: 36px;
            margin-top: 4vh;
          }

          & button{
            &.saveTagsBtn{
              background-color: var(--blue-bg);
              margin-top: 3vh;
            }
          }
        }

        .collapsed{
          display:none;
        }

      }

      & .userSuggestions{
        width: 100%;
        margin-top: min(8vh, 30px);

        & .label{
          font-size: var(--font-size-h2);
        }

        & .suggestion {
          background: var(--white-bg);
          box-shadow: var(--gray-light-box-shadow);
          padding: 10px 1rem;
          border-radius: 5px;
          margin-bottom: 1rem;

          .title {
            font-weight: bold;
            margin-bottom: 4px;

            &:before{
              content: '"';
            }
            &:after{
              content: '"';
            }
          }

          .status{
            color: var(--orange-bg);

            &.denied{
              color: var(--red-bg);
            }
            &.active{
              color: var(--green-bg);
            }
            &.future{
              color: var(--purple-bg);
            }
            font-weight: bold;
          }

          .name {
            font-weight: bold;
            margin-bottom: 4px;
            text-transform: capitalize;
            font-family: 'quicksand', sans-serif;
            text-decoration: underline;
          }

          .repro-container{
            & .toggle-btn{
              background: var(--gray-extra-soft);
              padding: 1vh 1rem;
              border-radius: 4px;
              margin: 10px 0;
              cursor: pointer;
            }
          }

          .repro:empty:not(.minimize){
            margin: 15px 0 2vh 0;
            min-height: 33px;
            background: var(--white-bg-body);
            &:before{
              content: 'No repro yet.';
              padding-left: 1rem;
            }
          }
          .repro:not(:empty){
            display: flex;
            align-items: center;
            border-radius: 6px;

            &.minimize{
              border-radius: 4px;
              width: 98%;
              display: none;
            }

            & textarea{
              margin: 0;
            }
          }

          .expected {
            margin-bottom: 10px;
          }
          .severity {
            width: 100%;
            margin-bottom: 5px;
            font-size: var(--font-size-small);
            
            &.medium{
              color: var(--orange-bg);
            }
            &.high{
              color: var(--red-bg);
            }
            &.critical{
              color: var(--red-bg);
              font-weight: bold;
            }
          }

          .chosen {
            width: auto;
            font-size: var(--font-size-body);
            margin-top: 3vh;
            text-align: center;
            border-top: solid 1px #ccc;
            padding: 2vh 0;
            color: var(--white-bg-soft);
            background: var(--indigo-bg);
            border-radius: 0 0 20px 20px;
          }

          .vote-icon {
            width: 14px;
            height: 14px;
            vertical-align: middle;
            margin: 0 1px 0 4px;
            object-fit: contain;
          }

          .stats {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.9rem;
            color: var(--gray-text);
            margin-top: 6px;
            flex-wrap: wrap;

            .voter {
              font-style: italic;
              opacity: 0.7;
              width: 100%;
            }
.
            .vote-count {
              background: #eee;
              padding: 2px 6px;
              border-radius: 10px;
            }

            .upvoteBtn {
              padding: 4px 15px;
              background: var(--green-bg-soft);
              border-radius: 5px;
              cursor: pointer;
              transition: all 0.2s ease;
              color: var(--black-bg-light-soft);
              width: auto;
              margin-left: auto;
              box-shadow: 0 1px 3px -2px #777;

              &:not(:first-of-type) {
                margin-left: 0;
              }
            }

            .upvoteBtn:hover {
              background: #dbeafe;
              border-color: #93c5fd;
            }

            .wrongBtn{
              width: auto;
              padding: 0 10px;
              font-size: var(--font-size-small);
              border-radius: 5px;
              margin-left: -.5rem;
              box-shadow: 0 1px 3px -2px #777;

              &.indev {
                padding: 0;
                width: 90%;
                margin: 0 auto;
                color: var(--black-bg);
                background-color: var(--green-shadow-darker);
                &::before{
                  content: 'Complete';
                  margin-right: 1rem;
                }
              }
            }
          }

          .bottom-actions:not(:empty) {
            display: flex;
            justify-content: center;
            margin-top: 3vh;
            flex-wrap: wrap;
          }
        }

        &.myListings{
          margin-top: 0;
        }
      }

      & .tagListWrapper{
        .tagControls{
          column-gap: 7px;
          display: flex;
        }
        .tagDOMManager{
          color: var(--blue-bg);
          font-weight: 600;
          margin-top: 2vh;
        }
      }

      :is(#suggestionForm,#bugReportForm){

        & .selectWrapper{
          width: 88%;

          & label {
            margin-bottom: 2vh;
            min-width: 51%;
            display: inline-block;
          }
        }

        & input:is([type='input'],[type='password'],[type='email']), textarea{
          width: 90%;
          height: 45px;

          &:is(textarea){
            padding-top: 10px;
          }
        }

        & select{
          width: 80%;
          height: 45px;
          border-radius: 5px;
          padding: 0 1rem;
          border: none;
          box-shadow: var(--gray-light-box-shadow);
          outline: none;
          margin-bottom: 3vh;
        }
      }

      #myListings {
        & .notice{
          padding: 15px 4vw;
          margin-top: 2vh;
          border-left: solid 10px var(--blue-shadow-light);
          background-color: var(--gray-green-extra-soft);
          color: var(--espresso);
          font-size: var(--font-size-body-smaller);
          border-radius: 10px;
        }
        & .listings{
          width: 90%;
          margin: 6vh 0;

          .listing {
            background-color: var(--orange-shadow);
            padding: 2vh 3vw;
            border-radius: 6px;
            text-align: center;

            &.active{
              background-color: var(--gray-green-soft);
            }
          }

          .status{
            color: var(--orange-bg);
            font-weight: bold;
          }

          .stats {
            width: 100%;
            margin-top: 3vh;
          }
        }
        & .newListing{
          margin: 0 0 7vh 0;
          & button{
            width: auto;
            background: none;
            outline: none;
            border: none;
            color: var(--black-bg);
            box-shadow: none;
          }
          &:hover{
            box-shadow: 0 1px 0 #999999;
          }
        }
        
        .account{
          cursor: pointer;

          &::after{
            content: '\1F517';
            margin-left: 4px;
          }
          &:hover{
            text-decoration: underline;
          }
        }
      }

      #claimedCafes{
        #claimedWrapper{
          width: 100%;
        }
        & .badge.founding {
            background-color: gold;
            color: #000;
            padding: 2px 6px;
            border-radius: 6px;
            font-weight: bold;
            font-size: 0.85em;
            margin-left: 6px;
        }

        & .badge.account-type.premium {
            background-color: #7c3aed;
            color: white;
            padding: 2px 6px;
            border-radius: 6px;
            font-weight: bold;
        }

        & .badge.account-type.basic {
            background-color: #a3a3a3;
            color: white;
            padding: 2px 6px;
            border-radius: 6px;
            font-weight: normal;
        }

        & .expiration {
            font-size: 0.85em;
            margin-top: 4px;
        }

        & .expiration.expired {
            color: red;
            font-weight: bold;
        }

        & .expiration.warning {
            color: darkorange;
        }

        & .expiration.neutral {
            color: #666;
        }

        & .suggestion.active {
            border-left: 4px solid green;
        }

        & .suggestion.cancelled {
            border-left: 4px solid red;
        }

        & .suggestion.inactive {
            border-left: 4px solid #999;
            opacity: 0.85;
        }

        & .filterBtn{
          width: auto;
          padding: 0 15px;
          background: var(--gray-green-extra-soft);
          color: var(--black-bg);
          font-weight: normal;
          margin: 0 0 2vh 2vw;
          height: 35px;
          border-radius: 4px;
        }
      }

      & .marketing-section {
        padding: 16px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08);
        margin-top: 1vh;
        font-size: var(--font-size-body-smaller);
        color: #333;
        width: 100%;

        & .marketing-section__cta {
          margin:1vh 0 4vh 0;
          text-align: center;
        }

        & .marketing-section__cta-button {
            background-color: var(--blue-bg);
            color: #fff;
            border: none;
            padding: 8px 14px;
            font-weight: 400;
            font-size: var(--font-size-body-smaller);
            border-radius: 6px;
            width: auto;
            font-family: 'lexend';
            margin-bottom: 2vh;
            position: relative;
        }

        & .marketing-section__cta-button:hover {
          background-color: #0074d9;
        }

        & .marketing-section__cta-text {
          margin-top: 6px;
          color: #555;
          font-size: var(--font-size-small);
        }

        & .marketing-section__subheader {
          font-weight: bold;
          margin-bottom: 6px;
          font-size: 15px;
        }

        & .marketing-section__list {
          padding-left: 20px;
          margin-bottom: 16px;
        }

        & .marketing-section__vote-meter {
          margin: 20px 0;
        }

        & .marketing-section__vote-list {
          list-style: none;
          padding: 0;
        }

        & .marketing-section__vote-list li {
          display: flex;
          justify-content: space-between;
          margin: 4px 0;
          padding: 4px 0;
          border-bottom: 1px dashed #ccc;
        }

        & .marketing-section__form {
          margin-top: 10px;

          label {
            width: 90%;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;

            & input {
              margin-top: 4px;
              max-width: 95%;
              margin-right: .5rem;
            }
          }
        }

        & .marketing-section__form-label {
          font-weight: 600;
          margin-bottom: 6px;
        }

        & .marketing-section__text-input {
          padding: 3px 6px;
          margin-left: 5px;
          font-size: 13px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }

        & .marketing-section__submit-button {
          margin-top: 10px;
          color: var(--white-bg);
          padding: 6px 12px;
          border: none;
          outline: none;
          cursor: pointer;
          margin-bottom: 2.5vh;
        }

        & .marketing-section__submit-button:hover {
          background-color: #1e7e34;
        }

        & .marketing-section__promo {
          margin-top: 24px;
          background: #fff8dc;
          border-left: 4px solid #f4c542;
          padding: 12px;
          border-radius: 6px;
        }

        & .marketing-section__promo-title {
          font-weight: bold;
          margin-bottom: 6px;
        }

        & .marketing-section__promo-link {
          display: inline-block;
          margin-top: 6px;
          color: #0056b3;
          text-decoration: underline;
        }
      }

      .consoleOutput {
        width: 96%;
        
        .label {
          font-size: var(--font-size-h2);
          margin-bottom: 1rem;
        }

        .apiConsoleLogs {
          margin-top: 1rem;
          width: 100%;

          .consoleGroupLabel {
            margin: 3vh 0 1vh 0;
          }

          .clearConsoleBtn{
            margin: 0 auto 4vh auto;
            display: block;
            padding: 0.5rem 1rem;
            background: var(--red-bg-extra-soft);
            color: var(--black-bg);
            border: 1px solid #555;
            border-radius: 4px;
            cursor: pointer;
          }

          .consoleCard {
            background: #1f1f1f;
            border: 1px solid #444;
            border-radius: 8px;
            margin-bottom: 12px;
            overflow: hidden;

            &.error {
              border-color: var(--red);
              background: var(--red-bg-soft);

              .consoleCardHeader {
                background: rgba(255, 0, 0, 0.15);
                color: #fff;
              }
            }

            & .consoleCardHeader {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 10px;
              background: #2a2a2a;
              color: #ccc;
              font-size: var(--font-size-body-smaller);
              cursor: pointer;

              .apiPath {
                flex-grow: 1;
                overflow-wrap: anywhere;
              }

              .toggleJson {
                margin-left: 10px;
                color: #aaa;
              }
              .successCountBadge, .consoleTimeLabel{
                white-space: nowrap;
                font-size: var(--font-size-small);
              }
            }

            & .consoleCardBody {
              background: #111;
              padding: 10px;
              font-size: 12px;
              color: #eee;
              overflow-x: auto;

              &.hidden {
                display: none;
              }

              .jsonBlock {
                color: var(--white-bg-bright);
                background: var(--black-bg-soft);
                font-family: monospace;
                font-size: 14px;
                white-space: pre-wrap;
                word-break: break-word;
                border: 1px solid #333;
                padding: 10px;
              }
            }
          }

          .noLogs {
            font-size: var(--font-size-body);
            color: #888;
            text-align: center;
            margin-top: 1rem;
          }
        }
      }

      .devPlans{
        & .label {
          margin-bottom: 3vh;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: s-resize;

          .dev-sort-btn{
            float: right;
            font-size: var(--font-size-h3);
            cursor: pointer;
          }
        }

        & .stats button{
          height: 40px;
          border: none;
          outline: none;
          font-size: var(--font-size-body);
          font-weight: bold;
          letter-spacing: .5px;
          text-transform: capitalize;

          &.wrongBtn:not(.indev){
            font-size: var(--font-size-h1) !important;
            background: var(--purple-bg);
          }
          &.wrongBtn.indev{
            font-size: var(--font-size-h3) !important;
            margin-bottom: 2vh !important;
          }
        }

        & .userSuggestions {
          & .suggestion {
            .chosen {
              width: 100%;
              border-radius: 6px;
              padding: 5px 5vw;
              background: none;
              color: var(--black-bg);
              border: none;
              text-align: right;
            }
          }
        }
      }

      .clearcache{
        background-color: var(--gray);
        color: var(--white-bg-soft);
        font-weight: 400;
        font-size: var(--font-size-h3);
        padding-bottom: 2px;
        img {
          filter: invert(.9);
          height: 55%;
          margin-right: .5rem;
          object-fit: contain;
        }
      }

      .testing{
        background-color: var(--black-bg);
        font-weight: 400;
        color: var(--white-bg-soft);
        padding-bottom: 2px;
      }

      .half{
        width: 47%;
        padding:0 min(10px, 2vw);
        justify-content: center;
      }
    }
  }
  #shortcutGraphModal{
    display: flex;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;

    & .content{
      background:white;
      padding:20px;
      border-radius:8px;
      width:90%;
      max-width:600px;
      position:relative;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    .close{
      position:absolute;
      top:10px;
      right:15px;
      font-size:24px;
      cursor:pointer;
      color:#aaa;
      z-index: 1;
    }
    #shortcutGraphTitle{
      margin-top:0;
      margin-bottom:15px;
      border-bottom:1px solid #eee;
      padding-bottom:10px;
      color: var(--espresso);
    }
  }

  #devFlyerContainer{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 9999;
    background-color: var(--white-bg);
    padding: 1rem 1rem 8vh 1rem;
    color: black;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display: none;
    overflow-y: auto;
    height: 100vh;
    max-height: 100vh;

    .close{
      font-size: 1.5rem;
      background: transparent;
      border: none;
      cursor: pointer;
      width: 100%;
      height: 33px;
      text-align: right;
      color: var(--black-bg);
      background-color: transparent;
      font-size: var(--font-size-h3);
    }

    .dev-flyer-entry{
      strong{
        text-transform: capitalize;
      }
    }

    .deleteFlyerBtn{
      background: var(--white-bg-bright);
      color: var(--black-bg);
      min-height: 33px;
      font-size: var(--font-size-h2);
    }

  }
  body.safari:not(.pwa){
    & .home_modal{
      button.close{
        top: calc(11vh + 15px);
      }
      &:not(.hide){
        &:before {
          content: '';
        }
        & .search-content{
          form, .loginForm{
             margin-top: 10vh;
          }
          & .nav {
            width: 100%;
            padding: 6vh 0 4vh 2vw;
            display: block;
            position: relative;
          }
        }
      }
    }

    & .main-content.mapShown #mapResults{

      &.down{
        top : calc(74vh - 30px);
      }

    }

    & .main-content .cloned-card:not(.clicked){
      top : calc(31vh - 30px);
      height: 52vh;
      bottom: unset;
    }

    .discover_filters {
      &.unshrink {
        padding-top: calc(2vh + 75px);
      }
    }

    nav.siteLinks{
      padding-bottom: calc(62px + 4vh);
    }

  }

  body.pwa{
     & .home_modal:not(.hide){
      button.close{
        top: calc(3vh + 2px);
      }
      .search-content form{
        margin: 0;
      }
     }
    & .home_modal:not(.hide,.secondary){
      
      &:before {
        content: 'Menu';
        font-size: var(--font-size-h1);
        color: var(--black-bg-bright);
        margin-bottom: 5vh;
        font-weight: bold;
        display: block;
        padding: 3vh min(7vw, 30px) 0 min(7vw, 30px);
      }
      .search-content{
        &:before{
          width: 100%;
          height: 100px;
          position: relative;
        }
        .nav {
          display: none !important;
        }
      }
    }
    
  }

  body.darkMode .home_modal{
    & .search-content{
      color: var(--black-bg);
      .loginForm{
        color: var(--black-bg);

        &:is(.signin,.signup,.help){
          background: var(--white-bg);
        }
      }
    }
  }

  .home_menu{
    top:.5vh;
    bottom: auto;
    height: max(150px, 15vh);
    padding:calc(2vh + 60px) max(10px,1vw) calc(.5vh + 10px) max(10px,1vw);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: center;
    row-gap:1vh;
    box-shadow: #333 0 4px 25px;
  }
  .home_menu .overlay{
    width: 100%;
    height: 100%;
    background: inherit;
  }
  .home_menu .overlay ~ .option{
    display: none;
  }
  .home_menu .option{
    width: 99%;
    height:max(50px,4vh);
    border-radius:6px;
    border: solid var(--gray) 1px;
    background-color:var(--white-bg);
    transition: background-color cubic-bezier(0,0,0,.1) .1s;
    box-shadow: var(--gray-box-shadow);
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-wrap: nowrap;
    font-size: var(--font-size-h4);
    column-gap: 1.5vw;
    padding:0 min(5px,1vw) 0 min(15px,4vw);
    justify-content: space-between;
  }
  .home_menu .option:hover{
    background-color:var(--white-bg-bright);
  }
  .home_menu .option img{
    height: 40%;

  }

  .home_filters input.search{
    width: 100%;
    flex-grow: 1;
    height: 45px;
    background: rgb(245,245,245);
    margin: 13px 3%;
    border: none;
    box-shadow: inset 1px 1px 3px #3331, inset 0 0 5px #3332;
    padding: .3vh 0 0 1.5rem;
    border-radius: 8px;
    font-size: var(--font-size-h3);
    font-family: 'bungee', serif;
    outline: #00d6a1;
    font-weight: bold;
    transition: font-size .1s ease;
    display: none;
    height: 0;
    padding: 0;
    &.hide{
      animation: fadeout ease .3s;
      height: 0;
      padding: 0;
    }
  }
  .home_filters input.search[placeholder="Search Locations"]::placeholder{
    font-variant: small-caps;
  }
  .home_filters input.search::placeholder{
    font-size: var(--font-size-h2);
    padding-top: 6px;
    font-family: 'bungee', serif;
    transition: font-size .1s ease;
  }
  .home_filters input.search:not(:focus)::placeholder{
    font-size: var(--font-size-h3);
  }
  .home_filters input.search:focus{
    box-shadow: inset 1px 1px 3px #3331, inset 0 0 5px #3333;
  }
  .home_modal img.hide_icon{
    display: none;
    height:35%;
    width:100%;
    object-fit: contain;
  }
  .home_modal button.close{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height:35px;
    border: none;
    background: transparent;
    outline: none;
    position: absolute;
    top: 3vh;
    cursor: pointer;
    right: 0;
  }
  .home_modal.secondary button.close{
    top: calc(2vh + .5vw + 14px);
    color: #333333;
    & img{
      display: none;
    }

    &:before{
      content: 'x';
      font-weight: bold;
      font-size: var(--font-size-h1);
      top: 0;
      position: absolute;
      font-family: 'quicksand', 'sanf serif';
      padding: 7px 15px 7px 8px;
      transform: scaleY(.85);
    }
  }
  .home_menu button.close{
    bottom: auto;
    top: 1vh;
    height: 50px;
  }
  .home_modal button.close img{
    height: 15px;
    width: auto;
    object-fit: contain;
  }

  .saved_cafes_modal{
    position: fixed;
    bottom: 0;
    top: auto;
    right: 0;
    z-index: 9;
    height: 62px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px 0 0 14px;
    transition:none;
    cursor: pointer;
    background-color:var(--white-bg);
    box-shadow: 3px -3px 40px #62615860, 1px 2px 5px #211c1933, 1px 2px 5px #777068, inset 2px 2px 5px #f5f4f3;
    align-content: center;
    padding:3vh 0;
    box-sizing: border-box;
    user-select: none;

    &.hide{
      display: none;
    }

    & img.hide_icon{
      display: block;
      height: 100%;
      width: 100%;
      object-fit: contain;
      min-height: 25px;
      user-select: none;
      pointer-events: none;
    }

  
    .savedListsIcon {
      position: absolute;
      top: -60px;
      background: rgb(59 47 47);
      z-index: 500;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      border-radius: 12px;
      right: 5px;
      box-shadow: 3px -3px 40px #31333a60, 1px 2px 5px #1515188f, inset 2px 2px 6px #6b6563;

      img{
        height: 65%;
        filter: drop-shadow(2px 3px 5px #33333377);
      }
    }
  }

  nav.map ~ .saved_cafes_modal{
    border-radius: 0;
    box-shadow: 3px -3px 40px #8e8e8e60, -1px 6px 7px -4px #39383870, inset 2px 2px 5px #f5f4f3;
  }

  nav.map ~ content .discover-wrapper{
    background-color: rgba(0, 0, 0, 0.2);
  }

  nav.homeCardShown ~ .saved_cafes_modal{
    display: none;
  }

  nav.hide_filters ~ .saved_cafes_modal{
    display: none;
  }

  .home_modal.hide{
    position: absolute;
    bottom: auto;
    top: calc(4vh - 31px);
    right: 0;
    height: 62px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    transition: none;
    cursor: pointer;
    background-color: transparent;
    box-shadow: none;
    align-content: center;
  }
  #mapToggle:not(.hidden) ~ .home_modal.hide{
    bottom: unset;
    top: 0;
    height: 8vh;
    right: 0;
    background-color: transparent;
    box-shadow: none;
  }
  @keyframes roundBorder{
    from{border-radius: 0 14px 14px 0}
    to{border-radius: 14px}
  }
  nav.fade ~ .home_modal.hide{
    animation: roundBorder ease .1s forwards;
    opacity: 1;
    transform: scale(.98);
    background-color:var(--white-bg-bright-seethru2);
  }
  .home_menu.hide{
    display: none;
  }
  .home_modal.hide :is(.content, input, button.close){
    display:none;
  }
  .home_modal.hide img.hide_icon{
    display:block;
  }

  body.darkMode .home_modal.hide img.hide_icon{
    margin-right: 1vw;
    padding: 10px;
    filter: invert(0);
    border-radius: 12px;
  }

.pwa-background{
  top:0;
  left: 0;
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 0;
}

.pwa-prompt {
  position: fixed;
  top: 0;
  height: auto;
  max-height: min(50vh, 400px);
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border-radius: 0 0 1rem 1rem;
  z-index: 9999;
  padding: 1rem;
  font-family: sans-serif;
  max-width: 500px;
  margin: auto;
  flex-wrap: wrap;
}

.pwa-prompt.hidden {
  display: none;
}

.pwa-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  z-index: 1;
  position: relative;
}

.pwa-text h2 {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
}

.pwa-text p {
  margin: 0.2rem 0;
  font-size: 0.9rem;
  text-align: center;
  color: #555;
}

.pwa-steps {
  width: 100%;
  overflow-x: auto;
}

.pwa-carousel {
  display: flex;
  gap: 0.5rem;

  &.full {
    position: fixed;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    top: var(--safe-area-inset-top);
    bottom: var(--safe-area-inset-bottom);
    left: 0;
    height: 100vh;
    height: calc(98vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
    width: 100vw;
    padding: 2vh 2vw 6vh 2vw;
    background: var(--black-bg);
  }
}

.pwa-carousel img {
  height: 100px;
  border-radius: 0.5rem;
  flex-shrink: 0;
  border: 1px solid #ddd;
}

.pwa-carousel {
  &.full img{
    border: none;
    object-fit: contain;
    height: auto;
    max-height: 90%;
    max-width: 100%;
  }
}

#pwaDismiss {
  background-color: #eee;
}

#pwaDone {
  background-color: #4CAF50;
  color: white;
}

.pwa-banner {
  position: fixed;
  top: 8.5vh;
  left: 1rem;
  right: 1rem;
  background: #fffbe6;
  color: #333;
  font-size: var(--font-size-body-smaller);
  border: 1px solid #f0e6b8;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 1rem 1rem;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 59;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  flex-wrap: wrap;
}

.pwa-banner.show {
  opacity: 1;
  pointer-events: all;
}

.pwa-banner.hidden {
  display: none;
}

.pwa-text {
  flex: 1;
  line-height: 1.4;
  width: 100%;

  & strong{
    margin-right: .5rem;
  }
}

.pwa-actions {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  margin-top: 15px;
}

.pwa-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  padding: 0 0.25rem;
}

#pwa-install {
  background-color: var(--color-secondary, #f5a623);
  color: #111;
  font-weight: 600;
  font-size: var(--font-size-body-smaller);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(245,166,35,0.2);
  border: none;
  cursor: pointer;
}


  #newPopUp-wrapper{
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
  }
  :is(#newPopUp-wrapper,#newPopUp-wrapper2) .close{
    cursor:pointer;
    position:absolute;
    left:10px;
    top:10px;
    background:white!important;
    border-radius:50%;
    height:40px;
    width:40px;
    padding:2px 0 0 0;
    z-index:50;

    & img{
      max-height: 35%;
      max-width: 35%;
    }
  }
  :is(#newPopUp-wrapper,#newPopUp-wrapper2) .title{
    width: 100%;
    text-align: center;
    height: 50px;
    position: relative;
  }
  :is(#newPopUp-wrapper,#newPopUp-wrapper2):is(.share,.playlist) .title{
    display: flex;
    justify-content: flex-end;
    padding-right: 25px;
    padding-left: 50px;
    text-align: right;
    height:50px;
    position: relative;
    font-size: 18px;
  }
  :is(#newPopUp-wrapper,#newPopUp-wrapper2):is(.share,.playlist) .title span{
    cursor: pointer;
  }
  :is(#newPopUp-wrapper,#newPopUp-wrapper2):is(.share,.playlist) .title span i{
    margin-right: 10px;
    font-size: 14px;
  }
  :is(#newPopUp-wrapper,#newPopUp-wrapper2):is(.share,.playlist) .title .save{
    border-radius: 10px;
    position: absolute;
    top: -5px;
    padding-bottom: 2px;
    width: 120px;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 12px;
    cursor: pointer;

    &.blue{
      background: var(--blue-bg);
      color: var(--white-bg);
      font-size: var(--font-size-h5);
      font-family: 'quicksand', sans-serif;
      font-weight: 500;
      border: none;
      outline: none;
      height: 80%;
      width: 100px;
      box-shadow: var(--gray-box-shadow);
    }
}
:is(#newPopUp-wrapper,#newPopUp-wrapper2):is(.share,.playlist) .title .save i{
  margin-top: 3px;
}
  :is(#newPopUp-wrapper,#newPopUp-wrapper2) .display{
    position:fixed;
    box-shadow:0 5px 10px rgba(0,0,0,.4);
    background:rgba(238,238,240,.99);
    color: var(--black-bg);
    border-radius:16px 16px 0 0;
    padding:15px 0 0 0;
    height: fit-content;
  }
  #newPopUp-wrapper .display.blur{
    filter: brightness(0.9);
  }

  :is(#newPopUp-content,#newPopUp-content2) {
    opacity:0;
    animation: fadein .05s forwards ease-in;
    align-content:flex-start;
    height: 100%;
    padding: 0;
    display:none;
    position: relative;
    -webkit-user-select:none;
    user-select: none;

    &.timePicker{
      height: 100%;
    }
  }
  :is(#newPopUp-wrapper,#newPopUp-wrapper2) .back{
    position: absolute;
    left:0;
    top:0;
    z-index:-1;
    background:rgba(30,30,30,.4);
    height:100%;
    width:100%;
    animation: fadein .2s ease;
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper{
    background: rgb(250,250,250);
    width: 90%;
    margin: 2.5% auto 0 auto;
    padding: calc(2vh + 1vw) 20px 80px 20px;
    max-height: 98%;
    overflow-y: auto;
    border-radius: 12px;
    overflow-x: hidden;

    & .shortcut-editor{
      .editor-actions{
        margin-top: 10px;
      }

      .add-json-field, .editor-actions button{
        width: 47%;
        height: 35px;
        border: solid 1px #666666;
        border-radius: 4px;
        outline: none;
        color: var(--black-bg);

        &.add-json-field{
          margin: 15px 0;
          background-color: var(--green-bg-soft);
        }

        &.save{
          background-color: var(--blue-bg);
          color: var(--white-bg);
        }

        &.delete{
          background-color: transparent;
          border: none;
          color: var(--red-bg);
          margin: 3vh auto 0 auto;
          width: 50%;
          display: block;
        }
      }

      .json-row{
        margin-top: 10px;
      }

      .json-key{
        text-align: left;
      }

      .tag-button-wrapper{
        margin-top: 3vh;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;

        &:before {
            content: 'Tags';
            width: 100%;
            display: block;
            margin-bottom: 2vh;
        }

        button{
          cursor: pointer;
          height: 33px;
          padding: 0 10px;
          &.active{
            background-color: var(--blue-bg);
            color: var(--white-bg);
            border-radius: 50px;
          }
        }
      }
    }

    .schedule-calendar-container {
        padding: 10px;
        border: 1px solid #ccc;
        background: #f9f9f9;
        overflow-y: auto;
    }

    /* Month Headers */
    .schedule-calendar-container h3 {
        margin: 15px 0 5px 0;
        padding: 5px 0;
        border-bottom: 2px solid #555;
        font-size: 1.2em;
        color: #333;
    }

    /* Timeline container for the entries in a month */
    .month-timeline {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 5px 0;
        overflow-x: auto;
    }

    /* Individual schedule block styling */
    .schedule-calendar-entry {
        flex: 0 0 auto;
        min-width: 150px;
        padding: 8px 12px;
        border-radius: 6px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.1s, box-shadow 0.1s;
        border-left: 5px solid;
    }

    .schedule-calendar-entry:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .calendar-entry-label {
        font-weight: bold;
        font-size: 0.9em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .calendar-entry-dates {
        font-size: 0.8em;
        color: #666;
        margin-top: 3px;
    }

    /* Status-specific coloring (Visual overlap indication) */
    /* Status 1: Active/Scheduled */
    .schedule-calendar-entry.status-1 {
        background-color: #e6f7ff; /* Light Blue */
        border-left-color: #0099e6; /* Blue */
    }

    /* Status 0: Draft/Inactive */
    .schedule-calendar-entry.status-0 {
        background-color: #fff4e6; /* Light Orange */
        border-left-color: #ff9900; /* Orange */
    }

    /* Highlight potential overlaps by making the hover more noticeable, 
      though true overlap detection requires more complex JS logic. */
    .schedule-calendar-entry + .schedule-calendar-entry:hover {
        /* If entries are visually close/overlapping, the hover effect helps */
    }

    /* Button to add new schedule */
    .add-schedule-btn {
        padding: 10px 15px;
        margin-bottom: 15px;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1em;
        transition: background-color 0.2s;
    }

    .add-schedule-btn:hover {
        background-color: #218838;
    }

    button.newList{
      padding: 10px 20px;
      font-size: var(--font-size-h4);
      border: none;
      outline: none;
      color: var(--black-bg);
      background: var(--gray-green-soft);
      font-family: 'quicksand', sans-serif;
      font-weight: 600;
      border-radius: 4px;
      margin-top: min(30px, 3.5vh);
      cursor: pointer;
      box-shadow: var(--gray-dark-box-shadow);
    }
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper label:not(.customSlider){
    height: 45px;
    width: 100%;
    display: flex;
    padding-right: 4%;
    border-top: solid 1px #d8d8d8;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;

    &.admin-shortcut-item{
      .name{
        padding-right: 12px;
      }
    }

    &.view-list {
      position: relative;
      overflow: hidden;
      user-select: none;

      b {
        background: var(--blue-shadow);
        height: 25px;
        width: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 40px;
        flex-shrink: 0;
      }
      img {
        height: 67%;
      }

      .list-content-wrapper {
        position: relative;
        z-index: 2;
        background-color: var(--white-bg, #fff);
        transition: transform 0.3s ease-out;
        padding: 10px 10px 10px calc(10px + 2vw);
        margin: -10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: calc(100% + 20px);
        box-sizing: border-box;
      }

      .swipe-actions {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        z-index: 1;
        display: flex;
        align-items: stretch;
        width: 160px;
      }

      .swipe-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        color: var(--white-bg-bright);
        background-color: transparent;
        font-size: 14px;
        font-weight: 600;
        transition: background-color 0.2s;
        width: 80px;
        flex: 0 0 80px;

        &.delete {
          background-color: var(--white-bg-body);

          img{
            height: auto;
            width: 23px;
            object-fit: contain;
          }
        }
      }

      .list-content-wrapper.swiped-open {
        transform: translateX(-160px);

        & ~ .swipe-actions .swipe-btn {
          &.edit {
            background-color: var(--white-bg-soft);
            &:hover {
              background-color: var(--blue-shadow-light);
            }
          }

          &.delete {
            background-color: var(--red-bg-extra-soft);
            &:hover {
              background-color: #c9302c;
            }
          }
        }
      }
    }

    &.place-item{
      border:none;
      padding-left: 10px;
    }
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper .wrapper label:not(.customSlider){
    padding:1vh 4% 1vh 0;
    font-family: 'poppins-reg', 'sanf serif';
    color:#333333;
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper label:not(.customSlider).active{
    font-weight: bold;
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper label.range{
    justify-content: center;
    gap: 20px;
  }
.option {
    min-width: 99%;
    font-size: 18px;
}
.option span {
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    column-gap: 20px;
    min-width: 99%;
}
.option img {
    max-height: 80%;
    width: 20%;
    object-fit: contain;
}
:is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper label:first-of-type{
    border:none;

    &.any{
      font-family: 'quicksand', 'sanf serif';
      color: #444444;
    }
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper.any label:first-of-type{
    font-weight: bold;
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper.topic label:last-of-type{
    font-weight: bold;
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper label input:not([type='date']){
    border-radius: 50px;
    width: 20px;
    height: 20px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    position: relative;
    transition: height .1s ease, width ease .1s;
    transform-origin: center;
    cursor: pointer;

    &.new-list-input{
      width:auto;
      border-radius: 4px;
      height: 35px;
      padding-left: 5px;

      &.edit-label{
        width: inherit;
        margin-left: 10px;
        border:solid 1px #bbbbbb;
        outline:none;
        color: var(--black-bg);
      }
    }
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper label input:not([type='date']):not(:checked):after{
    content: '';
    position: absolute;
    right:2.5px;
    border: solid 1px #9d9d9d;
    border-radius:50px;
    height: 90%;
    width:90%;
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper label input:not([type='date']):checked{
    background: #ff73008c;
    color: white;
    width: 30px;
    height: 30px;
    border: solid 2px #fdb96a;
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper label.topic input:not([type='date']):checked{
    background: #ff73003c;
    border: solid 2px #fdb96a1c;
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper label input:not([type='date']):checked:after{
    content: "\2713";
    position: absolute;
    top: 0px;
    left: 5px;
    font-weight: bold;
    font-size: 18px;
  }
  :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper.topic label:nth-of-type(1).checked ~ label.topic input:not([type='date']):not(:checked){
  background: #ff73004c;
  color: white;
  width: 30px;
  height: 30px;
  border: solid 2px #fdb96a1c;
}
:is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper.topic label:nth-of-type(1).checked ~ label.topic input:not([type='date']):not(:checked):after{
  content: "\2713";
  position: absolute;
  top: 0px;
  left: 6px;
  font-weight: bold;
  font-size: 18px;
  border: none;
}
:is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper label.topic input:not([type='date']):checked{
  background: #ff73008c;
  color: white;
  width: 30px;
  height: 30px;
  border: solid 2px #fdb96a;
}
@keyframes animateFromBottom{
  from{bottom: -100px;} to{bottom:0;}
  }
.animateFromBottom {
  bottom:0;
  transition:bottom ease .4s forwards;
  animation:animateFromBottom .4s;
}

@keyframes animateFromObjPos{
  from{left:var(--objLeftPos);top:var(--objTopPos);} to {left:var(--newLeftPos);top:var(--newTopPos);}
  }
  @keyframes animateFromObjWidth{
  from{width:var(--objWidth);} to {width:var(--newObjWidth);}
  }
  @keyframes animateFromObjHeight{
  from{height:var(--objHeight);} to {height:var(--newObjHeight);}
  }

.animateFromObj {
  animation:animateFromObjPos .5s, animateFromObjWidth .2s, animateFromObjHeight .5s;
  transform-origin:center;
}

.serverModal {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: rgba(240, 128, 128, .98);
  color: white;
  padding: 10px;
  height: auto;
  max-height: 30vh;
  overflow-y: auto;
  border-radius: 5px;
  z-index: 1001;
  width: auto;
  max-width: max(300px,40vw);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
  box-shadow: var(--gray-box-shadow);

  &.info{
    background-color: rgba(240, 178, 128, 0.98);
    color: var(--black-bg-soft);
  }

  &:is(.success, .loginSuccess){
    background-color: rgba(128, 240, 137, 0.98);
    color: var(--black-bg-soft);
  }

  &.plain{
    background-color: var(--white-bg-body);
    color: var(--black-bg-soft);
  }

  &.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
  }

  & .modal-content {
    padding: 10px 15px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: normal;
    word-break: break-word;
    
  }
}

#submissionLoadingOverlay{
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(212, 121, 78, 0.98);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    color: var(--black-bg);
    flex-direction: column;
    font-family: sans-serif;
    font-size: var(--font-size-h3);

    & .progressBar{
      width:60%;
      height:12px;
      background:#eee;
      margin-top:12px;
      border-radius:8px;
      overflow:hidden;

      #progressFill{
        width:0%;
        height:100%;
        background:#007bff;
        transition:width 3s linear;
      }
    }
    & #coffeeExplosion {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      display: none;
      z-index: 9999;
    }
}
.edit-list-modal-wrapper {
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    justify-content: center;
    border-radius:16px 16px 0 0;
    box-shadow:var(--gray-box-shadow);
    height: 100vh;
    padding-top: 30vh;
    
    & .modal-content {
        border-radius:16px 16px 0 0;
        margin: 0 auto;
        width: 100%;
        position: relative;
        padding: max(10px, 2vh) max(3vw, 25px) max(62px, 8vh) max(3vw, 25px);
        background: var(--white-bg);
        overflow-y: auto;
    
        .modal-header {
            display:flex;

            button{
              background: transparent;
              outline: none;
              padding: 10px;
              border: none;

              img{
                height: 14px;
              }
            }
        }
        .modal-body{
            padding: 10px 1vw 5px 1vw;
            .edit-name-section{
                font-family:'quicksand', sans-serif;
                margin: 10px 0;
                input{
                    height:33px;
                    padding:0 0 0 .5rem;
                }
                button{
                    height:33px;
                    color:var(--white-bg-bright);
                    font-weight:600;
                    background:var(--blue-bg);
                    border:none;
                    outline:none;
                    padding: 0 20px;
                    border-radius:6px;
                }
            }
            .places-list{
              margin-top: 10px;
              
              .place-item-row{
                display: flex;
                width: 100%;
                justify-content: space-between;
                background-color: var(--white-bg-soft);
                padding: 10px 0px 10px 10px;
                border-bottom: solid 1px var(--gray-extra-softest);

                button{
                  background-color: transparent;
                  outline: none;
                  border: none;
                  color: var(--black-bg);

                  img{
                    height: 25px;
                  }
                }
              }
            }
        }
    }
    .back{
      position: absolute;
      left:0;
      top:0;
      z-index:-1;
      background:rgba(30,30,30,.4);
      height:100%;
      width:100%;
      animation: fadein .2s ease;
    }
}

/* --- 1. The Placeholder Container --- */
.shortcut.placeholder {
    background-color: #e6e6e6; /* Light gray background */
    position: relative;
    overflow: hidden; /* Keeps fire inside the box */
    border: none;
    cursor: wait; /* Indicates loading */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Force specific dimensions if your generic .shortcut class doesn't have them */
    min-height: 100px; 
}

/* --- 2. The Fire Animation (Optimized DOM nodes) --- */
.fire-container {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -20%; 
    left: 0;
    /* This filter creates the "gooey" liquid fire look */
    filter: blur(20px) contrast(1.5); 
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

.fire-blob {
    position: absolute;
    border-radius: 50%;
    bottom: 0;
    animation: fireRise linear infinite;
}

/* The Colors you asked for: Purple, Red, Blue, Green tip */
.blob-1 { width: 70%; height: 70%; left: 10%; background: #6a0dad; animation-duration: 4.5s; } /* Purple */
.blob-2 { width: 60%; height: 60%; left: 30%; background: #ff4500; animation-duration: 3.5s; } /* Red */
.blob-3 { width: 50%; height: 50%; left: 50%; background: #0000ff; animation-duration: 2.8s; } /* Blue */
.blob-4 { width: 40%; height: 40%; left: 60%; background: #00ff00; animation-duration: 2.2s; } /* Green */

@keyframes fireRise {
    0% { transform: translateY(0) scale(1); opacity: 0.8; }
    50% { transform: translateY(-40%) scale(0.95); opacity: 0.5; }
    100% { transform: translateY(-120%) scale(0.6); opacity: 0; }
}

/* --- 3. The 3D Flip Transition --- */
.shortcutWrapper {
    perspective: 1000px; /* Required for 3D flipping */
}

.flip-in {
    animation: flipCard 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    opacity: 0;
    transform: rotateY(-180deg);
}

@keyframes flipCard {
    from {
        opacity: 0;
        transform: rotateY(-180deg);
    }
    to {
        opacity: 1;
        transform: rotateY(0);
    }
}

@media only screen and (min-width: 763px) {
  content{
    scrollbar-width: auto;
    
    &::-webkit-scrollbar-track{
      background: #33333333;
      transition: background ease .3s;
    }
    &::-webkit-scrollbar-track:hover {
      background: #33333340;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #888;
      border-radius: 10px;
      border: 2px solid #888;
    }
    &::-webkit-scrollbar {
      width: 10px;
      display: block;
    }
  }
  
  body.darkMode .discover_filters{
    scrollbar-width: auto;
    &::-webkit-scrollbar-track {
      background: var(--black-bg-light-soft);
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--black-bg-soft);
      border-radius: 10px;
      border: 2px solid var(--black-bg-soft);
    }
    &::-webkit-scrollbar {
      width: 5px;
      display: block;
    }
  }
.homePageTopDecor{
  display: none;
}
  .home_modal {
    & .search-content {
      & .profileWrapper {
          & img {
            max-height: 110px;
            max-width: 110px;
            padding: 4vw;
          }
      }
    }
  }
  .home_menu{
    top:.5vh;
    bottom: auto;
    width: 98vw;
    height: auto;
    padding:3vh 2vw;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    row-gap:1.5vh;
    z-index: 10;
    box-shadow: #3337 0 2px 6px;
  }
  .discover-wrapper .cards-wrapper{
    padding:2vh 2vw;
  }
  .discover-wrapper .cards-wrapper .card{
    width: auto;
    max-width: calc(19vw + 19px);
  }

  nav {
    box-shadow: 0 8px 8px -6px #3333332f;
    background:rgb(230, 228, 224);
    &.siteLinks{
      column-gap: 1.5vw;
      padding: 0 min(10vw, 100px);
      margin: 0;
      a{
        font-size: var(--font-size-body-smaller);
        &:first-of-type{
          font-size: var(--font-size-body-smaller);
        }
      }
    }
  }

  nav img.logo{
    max-height: 45px;
    margin:0 auto;
  }

  .logo_wrapper{
    margin:0 auto;
    position: relative;
    width: 60%;
    transition: width ease .4s;

    & img {
      cursor: default;
      pointer-events: none;
      left: 1.5vw !important;
    }

    & input{
      font-size: var(--font-size-h4);
      padding-left: calc(2.5vw + 25px);
      background-color: rgb(159 159 159 / 8%);
      background: var(--white-bg);
      box-shadow: inset 0px 0px 3px #bebebe;
    
      &:is(:focus, :active){
        box-shadow: var(--gray-dark-inset-box-shadow);
        padding-left: calc(2.5vw + 25px);
        background-color: var(--white-bg-soft);
      }
    }
  }

  .searchHistoryWrapper {
    width: 75%;
    max-width: 900px;
    left: max(12.25%, 50vw - 450px);
    box-shadow: 0 6px 7px -2px #33333399;
  }

  body.darkMode .logo_wrapper{
    & input{
      background-color: rgb(239 239 239 / 8%);
      box-shadow: inset 0px 0px 3px #242424;
      padding-left: calc(2.5vw + 25px);

      &:focus{
        padding-left: calc(3.25vw + 27px);
      }
    }
  }

  #mapToggle:not(.hidden) ~ .logo_wrapper{
    width: 60%;
  }

  .main-content {
    .discover-wrapper .cards-wrapper.featured .card{
      &:after {
        display: none;
      }
    }
  }

}

@media only screen and (min-width: 1030px) {

  .out-of-area{
    & .joinExplorers{
      .wrapper{
        padding: min(2.5vh, 20px) min(6vw, 45px);
        .headline{
          margin:2vh 0 4vh 0;
        }
      }
      .description{
        width: 100%;
      }
    }
  }
  .searchHistoryWrapper {
    left: 0;
  }

  .location-bar{
    font-size: var(--font-size-body);
  }

  #mapToggle:not(.hidden) ~ .logo_wrapper{
    width: 30%;
    margin-left: calc(max(((25px + max(2vw, 20px))*1.04 + 85px),(210px + max(25px, 3vw))));
  }

  .logo_wrapper{
    width: 30%;
  }

  body.guest{
    & #mapToggle{
      &.hidden{
        width: auto;
        max-width: 120px;
        column-gap: 0.5vw;
        background: var(--white-bg);
        box-shadow: 1px 4px 4px -5px #6b4827bb;
        height: 5.5vh;
        color: var(--espresso);
        border-radius: 10px;
        top: 1.25vh;

        & img[src="/assets/icons/map-loc.png"]{
          font-size: .8rem;
          height: 39%;
          filter: invert(0);
        }

        &:before{
          display: none;
          background: transparent;
        }
      }
    }
  }

  .card{
    & .scroll-arrow{

      &.media{
        display: flex;
        background-color: rgb(131 131 131 / 61%);
      }
    }

    &.home-card{
      .scroll-arrow{
        &.media{
          top: 153px;
          background-color: rgb(91 91 91 / 0%);
          transition: background-color ease .2s;
        }
      }

      &:hover{
        .scroll-arrow{
          &.media{
            background-color: rgb(21 21 21 / 90%);

            &:hover{
              background-color: rgb(71 71 71 / 91%);
            }
          }
        }
      }
    }
  }

    .hover-click{
      &:hover{
        transform: translateY(-1px);
        transition:transform ease .1s;
        box-shadow: 0 2px 3px -1px #b1b1b1;
      }
      &:hover:after{
        content:'';
        position: absolute;
        bottom: -10px;
        left: 25%;
        width: 50%;
        background: #00d6a1;
        height: 5px;
        border-radius: 4px;
        animation: fadein ease forwards .4s, pulse-up-down 1s infinite;
      }

      &:not(.filter):hover:after{
        bottom:-12px;
        box-shadow: 0 1px 2px -1px #66666659;
      }
      &:active{
        transform: translateY(2px);
        transition:transform ease .1s;
        box-shadow: 0 2px 3px -1px #9e9e9e;

        &:after{
          animation: none;
        }
      }
    }
    .main-content{
      max-width: 100%;
      display: flex;
      min-height: calc(92vh - 62px);

      .cloned-card {
        &.clicked {
          animation: none;
        }
      }
    }

    #mapToggle{
      bottom: auto;
      top: 1vh;
      left: auto;
      padding: 0;
      border-radius: 12px;
      padding:0 max(2vw, 20px);
      right: calc(min(5%, 5px) + 70px + ((100% - min(5%, 5px)) * .03));
      height: 6vh;
      column-gap: min(.6vw, 10px);
      width: auto;
      min-width:120px;
      box-shadow: 0 1px 3px -1px #9e9e9e;
      background-color: var(--white-bg-bright);

      & span:before{
        content: 'Home';
      }

      &.hidden{
        bottom: auto;
        left: auto;
        top: 1vh;
        height: 6vh;
        padding:0 max(2vw, 20px);
        column-gap: min(.6vw, 10px);
        box-shadow: -1px -1px 2px #f1f1f18a, -1px 0px 2px #211c1933;
        border-radius: 10px;

        & span:empty{
          display: inline;
        }

        & span:before{
          display: block;
        }
      }
    }

    body.darkMode {
      & nav{
        & #mapToggle{
          background-color: var(--black-bg-light-soft);
          box-shadow: -1px -1px 2px #3f403e, -1px 2px 5px #272c28;
          &:not(.hidden){
            background-color: var(--black-bg-light-soft);
          }

          & img{
            filter: invert(.8);
          }
        }
        .location_filter {
          background-color: transparent;
          box-shadow: none;

          & .secondary{    
            &:after{
              color: var(--gray-extra-soft)
            }
          }
        }
        &:not(.map) ~ .saved_cafes_modal{
          background-color: var(--black-bg-light-soft);
          box-shadow: var(--gray-dark-box-shadow);
        }
      }

      &.guest{
        & #mapToggle{
          &.hidden{
            background: var(--black-bg-light-soft);
            box-shadow: 0px -1px 2px #3f403e, -1px 3px 5px #212121;
            color: var(--cream);

            & img[src="/assets/icons/map-loc.png"]{
              filter: invert(.8);
            }
          }
        }
      }
    }

    @keyframes unfadeUp {
      from {
          transform: scaleX(0.75) translateX(min(19vw, 420px));
          opacity: 0;
      }
      to {
          transform: scaleX(1) translateX(0);
          opacity: 1;
      }
  }

    @keyframes flashClickedBorder{
      from{border:solid 4px rgb(30,144,255)}
      to{border:solid 4px rgb(30,144,255, .4)}
    }

    .main-content .cloned-card {
      &.clicked {
        width: calc(min(48%, 850px) - 19%);
        right: 19%;
        left: auto;
        /*  width: calc(100vw - max(400px, min(19vw, 400px)));
            left: max(400px, min(19vw, 400px));*/
        top: auto;
        bottom: 0;
        height: 92vh;
        border-radius: 0 14px 14px 0;
        box-shadow: 3px 3px 5px 1px rgb(0 0 0 / 40%), 0 1px 0 #33333313;

        & .media-wrapper{
          min-height: 40%;
          max-height: 50%;
          border-radius: 0;
          display: none;

          /* min-height: 100%;
          max-height: 100%;
          border-radius: 0;
          display: flex;
          position: absolute;
          right: 0;
          width: 50%;
          max-width: 50%;
          overflow-x: hidden;
          min-width: unset;
          left: auto;
          flex-wrap: wrap;
          overflow-y: auto; */

          :is(.image-wrapper, .video-wrapper) {
            min-width: 50%;
            max-width: 50%;
            padding: max(10px, 1vh + 1.5vw);
            background-color: var(--black-bg-light-soft);
            display: flex;
            align-items: center;
            height: 50vh;
            /* min-width: 100%;
            max-width: 100%;
            padding: max(10px, 1vh + 1.5vw);
            background-color: var(--black-bg-light-soft);
            display: flex;
            align-items: center;
            height: auto;
            padding: 0; */
            /* & :is(img.media-img,.media-vid){
              max-height: none !important;
            } */
          }
        }
        /* .media-dots{
          display: none;
        } */
        /* .close-button{
          right: calc(50% + 6px);
        } */
        & .details {
          padding: 2vh 2vw;
          min-height: 100%;
          max-height: 100%;
          /* max-width: 50%; */

          & .name {
            background-color: transparent;
            position: relative;
            top: unset;
            z-index: 1;
            order: -1;
            padding: 1.5vh min(3vw, 15px);
          }

          & .actions{
            margin-bottom: 0;
            padding: 0;
            & div{
              height: min(40px, 4vh);

              &:hover{
                box-shadow: 0 0 1px 1px #727171b5;
              }
            }
          }

          & .changes {
            padding: 0 1vw;

            & .label {
              padding: 0 1vw;
            }

            & .reviews {
              & .review {
                  & .score {
                      & img {
                        max-width: min(25px, calc(1vw + 2vh));
                        max-height: min(25px, calc(1vw + 2vh));
                      }
                  }
              }
            }
            & button{
              border-radius: 8px;
            }
          }
          
          & .description {
            padding: 0;
            & .rating{
              margin: 3vh 0 3vh 0;
              padding: 0 1vw;
              column-gap: .2vw;

              & span{
                margin-left: .4vw;
              }
            }

            & img {
              &.rating-star{
                max-width: 5%;
              }
            }
            & :is(.note-label,.general-notes, .merchant-notes){
              padding: 0 1vw;
            }
            & .stats{
              padding:0 1vw;
              row-gap: 3vh;
              margin-top: 3vh;

              & p{
                column-gap: 1.5vw;
              }

              & img{
                max-width: max(18px, calc(1vw + 1vh));
                max-height: max(18px, calc(1vw + 1vh));
              }

            }
            & :is(p, .address-link) {
              &.address-link {
                column-gap: 1.5vw;
                padding: 0 1vw;
                
                & span{
                  cursor: pointer;
                }
                & img{
                  width: 10%;
                  cursor: pointer;
                  max-width: max(18px, calc(1vw + 1vh));
                  max-height: max(18px, calc(1vw + 1vh));
                }
              }
            }
          }
        }

        &.home-clone{
          right: 0;
          width: 100%;
          box-shadow: -3px 3px 5px 1px rgb(0 0 0 / 20%), 0 1px 0 #33333313;
          border-radius: 0;

          & .close-button{
            right: auto;
            left: calc(min(48%, 850px) - 19% - 33px - .75vw);
            background-color: var(--red-bg-soft);
            filter: none;
            box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0 1px 0 #33333330;
            top: 1.5vh;
          }
          & .media-wrapper{
            display: flex;
            min-height: 100%;
            max-height: 100%;
            overflow-y: auto;
            left:calc((min(48%, 850px) - 19%) * 1);
            width: calc(100vw - (min(48%, 850px) - 19%));
            max-width: calc(100vw - (min(48%, 850px) - 19%));
            position: absolute;
            border-radius: 0;
            flex-wrap: wrap;
            box-shadow: 3px 3px 5px 1px rgb(0 0 0 / 10%), 0 1px 0 #33333313;

            .video-wrapper{
              position: relative;
            }

            & :is(img.media-img,.media-vid){
              width: 50%;
              max-height: 100% !important;
              object-fit: contain;
              background-color: var(--black-bg-bright);
              border-radius: 14px;
            }
          }

          .media-dots{
            display: none;
          }

          & .details{
            width: calc((min(48%, 850px) - 19%) * 1);
            border-radius: 0 12px 12px 0;
            flex-grow: unset;
            padding-top: calc(7vh + max(18px,calc(.8vw + .8vh)));

            & .name {
              position: absolute;
              top: 1vh;
              left: 0;
              background: rgb(197 201 210);
              border-radius: 0 10px 10px 0;
              box-shadow: 0 2px 6px -3px #4f4f4f !important;
              padding: 1.5vh 1.5vw;
              width: auto;
              max-width: calc((min(48%, 850px) - 19%) - 36px);
              color:var(--black-bg);
              text-shadow: none;

              .foundingBadge{
                margin-left: 2vw;
              }
            }

            & .description {
              & .rating {
                padding-left: 1.25vw;
              }
            }
          }
        }

      }
    }
    .main-content.mapShown #mapResults{
      padding-top: 0;

      & .content{
        background-color: rgb(230, 228, 224);
        border:none;
        animation: unfadeUp ease .5s forwards, fadein ease .4s;
         border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        &:before{
          content: unset;
        }

        & .card{
          width: max(300px, 45%);
          padding-top: 0;
          padding-bottom: 1.5vh;
          border-radius: 18px;
          box-shadow: unset;
          background-color: transparent;
          align-content: flex-start;

          &.nomedia .inline ~ .details{
            margin-top: 30px;
          }

          &:not(.cloned-card).clicked .name{
            font-size: var(--font-size-h4);
            animation: fadein ease .3s;
          }

          & .inline{
            top: .75vh;
            right: 1vh;
            border-radius:8px;
          }
          
          & .details{
            padding:1vh 0 0 0;
            font-size: var(--font-size-body-smaller);
          }

          &.clicked{
            /* box-shadow: 1px 3px 10px -3px #512e1ff7; */
            background: var(--white-bg-softest);
            border-bottom: solid 4px var(--orange-shadow);

            .media-wrapper{
              border-radius: 18px 18px 0 0;
            }

            & .scroll-arrow{
              display: flex;
              
              &:hover{
                opacity: 1;
                transform: scale(1.3);
              }
            }

          }
          

          & .bow{
            left: -14px;
            top: 10px;
            transform: rotateZ(-26deg);

            &.top:nth-child(2){
              z-index: 2;
            }
          }

          &:hover .scroll-arrow{
            display: flex;
            opacity:.9;
          }

          & .media-wrapper{
            border-radius: 18px;
            width: 100%;
          }

          & .scroll-arrow{
            right: .5vw;
            left:auto;
            top: calc(clamp(250px, 70%, 100px) / 1.5 );
            transform: translateY(-33%);
            height: 38px;
            width: 38px;
            transition: opacity .3s;
            animation-delay: .2s;
            display: flex;
            opacity:.3;

            &:hover{
              opacity: .95;
              background: var(--white-bg-bright);
            }
      
            &.leftArrow {
              left: .5vw;
              right: auto;
            }

            & img{
              height: 15px;
              width: 15px;
            }
          }

          & .description .scroll-arrow{
            box-shadow: none;
            top: calc(50% - 13px);
            transform: none;
            display: flex;
            background: transparent;
          }

          & :is(.name,.description){
            width: 100%;
            padding:1vh max(15px, 1.5vw) 0 max(15px, 1.5vw);

            &.name{
              padding-left: max(19px, 1.7vw);
              font-size: var(--font-size-h4);
              width: 100%;
              white-space: normal;
            }

            & :is(.rating, .price-level, .stats, .hours, .address-link){
              width: 98%;

              &:is(.rating,.address-link){
                padding:0;

                &.address-link img{
                  margin:0 .25vw;
                }
              }

              &.stats{
                margin-top: 2px;
                position: relative;
                & p{
                  margin: 0 max(5px, .25vw);

                  &[data-hide-label="true"]{
                    display: flex;
                  }

                  & .label{
                    display: inline-flex;
                    margin: 0;
                  }
                }
              }
            }
    
            & img{
              object-fit: contain;
              max-height: 2.5vh;
      
                &.rating-star{
                  max-width: 6%;
      
                  &:not(:first-child){
                    display: inline;
                  }
                }

              &:is(.savedBadge, .verifiedBadge) {
                max-height: unset;
              }
            }
          }
        }
      }
    }
    .main-content.mapShown .mapFilters{
      z-index: 3;
    }

    body.darkMode{
      & .main-content.mapShown #mapResults {
        & .content {
          background: rgb(45 43 43);
          border:none;
          border-radius: 0;
            & .card {
              background: transparent;
              box-shadow: unset;

              &.clicked{
                background-color: var(--black-bg-soft);
              }

              & .scroll-arrow{
                filter: invert(.9);
              }  
              & .description {
                & .tags {
                    & .cafe-tag {
                        color: #222 !important;
                    }
                }
              }
            }
        }
        }
    }

    #mapResults{
      top: 0;
      width: calc(100vw - min(48%, 850px));
      transition: width ease .5s;
    }

    .location_filter{
      bottom:auto;
      right:calc(1vw + 70px);
      background:transparent;
      box-shadow: none;
      cursor: default;
      padding: 0 max(25px, 3vw);
      border:none;
      left: 0;
      max-width: 200px;
      margin: 0;
      position: fixed;

      &.hpcard-shown{
        width: 0;
        animation: fadeout ease .5s forwards;
      }

      &:not(.home){
        left: 0;
        max-width: 200px;
        max-width: fit-content;
        margin: 0;
        position: fixed;
      }
      
      & .secondary{
        padding:0;
        position: absolute;
        top: 0;
        height: 100%;
        cursor: pointer;
        left: 1vw;
        width: 55px;

        &.fade{

          & img{
            &:first-of-type{
                transform: scaleX(.95);
            }
          }
        }

        &:after{
          content: 'filters';
          font-size: var(--font-size-body-smaller);
          position: absolute;
          left: 126%;
          animation: fadein ease .4s;
          color:#333;
        }

        &.unfade{

          &:before{
            content: '';
            position: absolute;
            left: 0;
            width: calc(104% + 85px);
            height: 80%;
            border-radius: 8px;
            animation: fadein ease .3s;
          }
          
          & img{
            &:first-of-type{
              animation-delay: .2s;
              animation: fadein .7s forwards;
                animation-delay: .4s;
            }
          }
        }
      }
    }

    .home_modal.hide{
      bottom: auto;
      top: calc(4vh - 31px);
      right: 1vw;
      border-radius: 8px;
      background-color: transparent;
      box-shadow: none;
      transition: right ease .3s;
    }

    .home_modal img.hide_icon{
      height: 45%;
    }
    nav.hide_filters{
      display: flex;
      animation:none;
    }
    nav.fade ~ .home_modal.hide{
      right: calc(1vw + 1vh);
      top: 2vh;
      background-color:var(--white-bg-bright-seethru1);
      box-shadow: 1px 6px 10px -4px #3333;
    }

    nav.fade ~ .home_modal img.hide_icon{
      height: 58%;
    }

    nav.fade ~ .home_modal.hide:hover{
      background-color:var(--white-bg-bright);
      box-shadow: 1px 6px 10px -4px #3337;
    }
    .saved_cafes_modal{
      padding: 0;

      & img.hide_icon{
        height: 35%;
      }
    }
    nav.map ~ .saved_cafes_modal{
      border-radius: 14px;
      right: calc(1vw + 25px);
      bottom: max(25px, 2vh);
    }

    nav.map ~ content nav{
      display: none;
    }
    nav.map #mapToggle img{
      filter: unset;
    }
    nav:not(.map) .location_filter{
      display: flex;
    }

    .home_modal{
      height: max(450px,99vh);
      border-radius: 8px 0 0 0;

      & .search-content {

        & .profileWrapper {
          max-height: calc(5vh + 85px);
          & img{
            width: 70px;
            height: 70px;
            object-fit: contain;
            padding: 40px;
          }
        }
        & .loginForm {

          & .label{
            font-size: var(--font-size-h3);
            padding: 0 1vw;

            &.verifiedLabel{
              margin-top: 2vh;
            }
          }

          &.marketingDashboard {
            .reportSection{
              .dayCardsContainer{
                .dayCard{
                  min-width: min(100px, 10vw);
                  &:is(.soldOut,.purchased,.maxedOut){
                    min-width: min(100px, 10vw);
                  }
                }
              }
            }
          }

          &.accountsVouchers{
            .reportSection .expand{
              padding: 0 1vw;
            }
          }
        }
        & :is(.history-container, .saved-history-container) {
          & .result {
            &.history-item{
              font-size: var(--font-size-body) !important;
              min-height: max(40px, calc(1vw + 12px + 3vh));
              padding: 5px min(25px, 6vw);
            }
          }
        }

        & .result{
          font-size: var(--font-size-h5) !important;
          &.login{
            font-size: var(--font-size-h3) !important;
          }
          &.create{
            font-size: var(--font-size-h3) !important;
          }
        }
      }

    }
    

    .home_modal button.close{
      width: max(50px,5vw);
      max-width: 75px;
    }

    .home_modal button.close img{
      height: max(15px,2vh);
    }

    :is(.home_menu:not(.hide)) ~ .modal_back{
      display: none;
    }

    .home_menu{
      right: .5vw;
      top: 9vh;
      padding: 1vh .5vw;
      width: max(250px, 15vw);
      height: 7vh;

        & .option{
          height: 98%;
          max-height: 60px;
        }
    }
    
    .home_menu .new_entry_form{
        height: 40vh;
    }
    content{
        position:absolute;
        width:100vw;
        left:0;
        justify-content: center;
        transition: height .2s ease;
    }

  .bean-canvas{
    top: 1vh;
    left: 1vw;
  }

  .discover_filters{
    padding: 5vh 0 max(25px, 6vh) 0;
    margin-top: 0;
    flex-wrap: wrap;
    width: min(18vw, 400px);
    row-gap: 2vh;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow-y: auto;
    position: fixed;
    z-index: 2;
    height: 92vh;
    opacity:1;
    animation: none;
    transition: unset;
    /* animation: fadein .7s forwards; */
    /* transform-origin: left; */
    /* transition: width ease .5s; */
    background-image: url('../assets/images/coffee-beans-light.png');
    background-repeat: repeat-y;
    background-size: contain;
    top:8vh;
    animation:none;
    transition:none;

    &.show{
      background-color: rgb(233, 231, 227);
      box-shadow: 1px 2px 6px rgba(85, 85, 85, 0.1);

      & ~ .discover-wrapper .bean-canvas{
        top: -1vh;
        left: max(400px,min(19vw, 400px));
      }

      & :is(.filter, .inners) {
        background-color: var(--white-bg-bright);
        box-shadow: 0 1px 3px -2px #333;
      }
      & ~ :is(#filterConfirm, #filterClear, #filterReset) {
        column-gap: 1vw;
        &#filterConfirm{
          width:calc(max(400px,min(19vw, 400px)) * .85);
          background-color: var(--white-bg-bright);
          left: calc(max(400px,min(19vw, 400px)) * .075);
          font-weight: normal;
          text-shadow: none;
          letter-spacing: normal;
          color:var(--black-bg);
          top: calc(9vh + 7px);
          border-radius: 8px;
          height: 50px;
          position: fixed;
        }

        &#filterReset{
          transition: left ease .3s;
          left:calc(max(400px, min(19vw, 400px)) - 130px);
          background: var(--white-bg-soft);
          width: 120px;
          border-radius: 10px;
          top: 1vh;
        }
      }
    }

    & .open_til{
      & .label{
        padding-left: 1vw;
      }

      & .openUntil {
        column-gap: 1vw;
        justify-content: space-around;
        & .time {
          width: 44%;
          border-radius: 8px;
          font-size: var(--font-size-small);
        }
      }
    }

    &.shrink{
      width: max(400px,min(18vw, 400px));
      left: min(-400px,max(-18vw, -400px));
      height: 92vh;
      opacity: 0;
      top: 8vh;
      background-image: none;

      & .filter{
        font-size: var(--font-size-body);
      }
    }

    &.unshrink{
      width: max(400px,min(19vw, 400px));
      left: 0;
      opacity:1;
      top: 8vh;
      padding-top: 5vh;
      row-gap: 2vh;
      justify-content: center;
      animation:none;

      &.filtering ~ :is(#filterConfirm, #filterClear, #filterReset) {
        &#filterConfirm {
            left: calc(max(400px,min(19vw, 400px)) * .075);
            width: calc(max(400px,min(19vw, 400px)) * .55);
            background-color: var(--green-bg-soft);
        }
        &#filterClear {
            width:120px;
            left: calc(max(400px,min(19vw, 400px)) * .65);
            top: calc(9vh + 7px);
            height: 50px;
            border-radius: 10px;
            position: fixed;
            column-gap: 1vw;
            animation:none;
        }
        &#filterReset {
            width:120px;
            left: calc(max(400px, min(19vw, 400px)) + (100% - max(400px, min(19vw, 400px))) - max(400px, min(48%, 850px)) - 130px);
            top: 9vh;
            border-radius: 10px;
            position: fixed;
            column-gap: 1vw;
        }
      }
    }

    & .filter{
      min-width:96%;
      font-size: var(--font-size-body-smaller);
      position: relative;
      letter-spacing: 1.5px;
      font-weight: 500;
      color: var(--black-bg-soft);
      background-color: rgb(245, 245, 245, .98);
      transition: font-size .5s ease, background-color .3s ease, border-radius .3s ease;

      &:hover{
        transform: translateY(1px);
        transition:transform ease .1s;
        box-shadow: 0 2px 3px -1px #b1b1b1;
      }
      &:hover:after{
        content:'';
        position: absolute;
        bottom: -10px;
        left: 30%;
        width: 40%;
        background: #00d6a1;
        height: 5px;
        border-radius: 4px;
        animation: fadein ease forwards .4s, pulse-up-down 1s infinite;
      }

      &:first-of-type {
        margin-top: 5vh;
      }

    }

    & .inners{
      padding:1vh 1vw 10px 1vw;
      margin-top: -2vh;
      box-shadow: 0 1px 3px -2px #333;
      width:96%;
      z-index: 2;

      &.customSlider{
        padding: 2vh 1.5vw 0 1.5vw;
      }
      & :is(.header){
        padding: 10px 0 0 0;
        border-top: solid 1px rgb(235, 235, 235);
      }

      & .sectionLabel{
        margin:3vh 0 2vh 0;
        padding: 0px;
      }


      &.recents{
        margin-bottom: 0;

        .see-more-btn{
          margin: 10px auto;
          background: var(--black-bg-seethru);
          color: var(--black-bg);
          cursor: pointer;
          outline: none;
          border-radius: 4px;
          box-shadow: var(--gray-dark-box-shadow);
          background-image: url(/assets/icons/expand-white.png);
          background-size: auto 50%;
          height: 33px;
          background-repeat: no-repeat;
          width: 63px;
          display: flex;
          align-items: center;
          background-position: center;
          justify-content: center;
          border: solid 2px var(--gray);
          filter: drop-shadow(1px 2px 4px #11111166);
        }
      }
    }

    & .filter.show{
      border-radius: 8px 8px 0 0;
      background-color: rgb(245, 245, 245);
      font-family: 'poppins-reg';
      font-size: var(--font-size-h4);
      padding-top: 2vh;
      &:hover{
        transform: none;
      }

      & + .inners{
        display: block;
        font-size: var(--font-size-small);

        .cafe-tag{
          padding: 1vh var(--font-size-tiny);
        }
      }
    }

    & .recentlyViewed{
      column-gap: 1vw;
      padding-bottom: 10px;
      flex-wrap: wrap;

      .mini{
        max-width: unset;
        min-width: max-content;
        background:var(--gray-green-extra-soft);
        border-radius: 8px;
        display:flex;
        align-items: center;
        cursor: pointer;
        animation: fadein ease .2s forwards;
        &.hidden{
          display: none;
          opacity: 0;
        }
        & .media{
          display: none;
          :is(.image-wrapper,.video-wrapper){
            border-radius: inherit;
          }
        }
        .info {
          font-size: var(--font-size-body-smaller);
          padding: 5px 15px;
          color: var(--espresso);
        }
      }
    }
  }

  @keyframes pulse-border {
    0%, 100% {
      border: 3px solid transparent;
    }
    50% {
      border: 3px solid #00d6a1;
    }
  }
  .discover_filters:not(.hide,.shrink) ~ #filterConfirm{
    top: auto;
    width: min(16vw, 380px);
    left: calc(1vw + 2px + min(1vw, 10px));
    border: 3px solid transparent;
    transition:left .4s ease;
    box-shadow: 1px 6px 10px -4px #4b4b4b18, 1px 6px 20px -4px rgba(34, 34, 34, 0.226);
    border: 3px solid transparent;
  }
  .discover_filters:not(.hide,.shrink) ~ #filterClear{
      animation: pulse-up-down 2s infinite;
  }
  .main-content.mapShown{

    & .mapFilters{
      right: 0;
      width: min(48%, 850px);
      opacity:0;
      animation: fadein ease .4s forwards;
      animation-delay: .7s;
    }

    .discover_filters:not(.hide,.shrink) ~ #filterConfirm{
      border-color: #00d6a1;
      box-shadow: 1px 6px 10px -4px #3333, 1px 6px 20px -4px rgba(34, 34, 34, 0.582) !important;
    }

      & .discover_filters:not(.show){
        width:0;
        animation: fadeout .2s ease;

        & ~ #mapResults{

          & .content{

            & .card{
              /* opacity: 0; */
              /* animation: fadein ease .3s forwards; */
              /* animation-delay: .3s; */

              & .media-wrapper{
                height: 250px;
              }

            }
          }
        }
      }

      & .discover_filters.show{
        display: flex !important;
        background-color: rgb(233, 231, 227);
        left: -10vw;
        box-shadow: 1px 2px 6px rgba(85, 85, 85, 0.1);
        z-index: 4;
        left:0;
        padding-top: 2vh;
        padding-right: 10px;

        & .open_til{
          visibility: hidden;
          pointer-events: none;
          height: 0;
          margin: 0;
          padding: 0 !important;
          display: none;
        }

        &:not(.filtering) ~ :is(#filterConfirm,#filterClear){
          display: none;
        }
        &.filtering ~ :is(#filterConfirm,#filterClear){
          display: flex;
        }
        
        & ~ .mapFilters{
          display: flex;
        }
        & ~ :is(#filterConfirm,#filterClear){
          width:fit-content;
          position: fixed;
          column-gap: min(1.5vw, 20px);
          left: min(19vw, 430px);
          top:10vh;
          bottom:auto;
          height: calc(50px + 1vh);
          padding: 0 max(2vw, 20px);

          &#filterConfirm{
            width:fit-content;
            background-color: var(--white-bg-bright);
            left: min(19vw, 430px);
            font-weight: normal;
            text-shadow: none;
            letter-spacing: normal;
            color:var(--black-bg);
            border-radius: 10px;
          }

          &#filterClear{
            top: calc(10.25vh + 55px);
            height: calc(42px + .5vh);
            left: min(19.25vw, 435px);
            border-radius: 10px;
            width: auto;
          }
        }
        .discover_filters:is(.show,.unshrink) ~ :is(#filterConfirm, #filterClear):not(.hide){
          display: flex;
        }

        & :is(.filter, .inners){
          background-color: var(--white-bg-bright);
          box-shadow: 0 1px 3px -2px #333;

          &.filter{
            &:first-of-type {
              margin-top: 1vh;
            }
          }
        }

        & ~ #mapResults{
          /* width: calc(100% - max(400px, min(19vw, 400px)) - max(400px, min(48%, 850px))); */
          /* margin-left: max(400px, min(19vw, 400px)); */

          & .content{
            padding-left: max(400px, min(19vw, 400px));

            &:after {
              display: none;
            }

            & .card{
              width: max(300px, 94%);
              margin: 1vh 0;
              max-width: 100%;

              & .description{
                & .tags{
                  & .cafe-tag{
                    color: var(--black-bg-soft);
                  }
                }
              }

              & :is(.savedBadge, .verifiedBadge) {
                max-height: unset;
                &.verifiedBadge {
                  top: -1vh;
                }
              }
            }
          }
        }

        & .cafe-tag {
          border-radius: 8px;
        }
      }

      & .discover-wrapper{
        
        width: calc(100% - min(48%, 850px));
        margin:0 auto 0 0;
        animation: fadeout ease .2s forwards;

        & .cards-wrapper.featured{
          column-gap: max(1vw, 10px);
          & .card{
            width: max(225px, 31%);
            min-height: 350px;

            & .name{
              padding: .75vh calc(7px + 1.3vw) .5vh calc(7px + 1.3vw);
              margin-top: 0;
              position: relative;
            }

            & :is(.description,.items,.time) {
              padding: .5vh calc(7px + 1.3vw);
            }
          }
        }
      }
  }

  body.darkMode{
    & .card{
      & .media-wrapper{
        background-color: var(--black-bg-light-soft);
      }
    }
    & .main-content.mapShown{

      & .discover_filters.show{
        background-color: rgb(39, 37, 36);
        box-shadow: 2px 0 1px #2f2e2e;
        color: var(--white-bg);

        & .cafe-tag {
          box-shadow: var(--gray-box-shadow);
          background: var(--black-bg-bright);
          color: var(--white-bg-darker);
          padding: 8px 15px;

          &:not(.active){
            opacity: .6;
          }
        }

        & .customSlider:not(.switch) {
          .slider{
            border-radius: 6px;
            background: #4f4f4f7a;
          }
          & .wrapper {
              & img {
                filter: drop-shadow(0 1px 1px #111111);
                  &.sm {
                      &[alt="Wifi symbol"] {
                          width: 11%;
                      }
                  }
              }
          }
        }
        
        & :is(.filter, .inners){
          background-color: rgb(45 43 43);
          color: var(--gray-extra-soft);
        }

        & .customSlider {
          & .wrapper {
            & img {
              filter: brightness(.75);
            }
          }
        }
        & .customSlider:not(.switch) {
          .slider{
            height: 50px;
          }
        }
        
      }

      & .mapFilters {
        top: 0;
        background: rgba(55,55,55, .98);
        & .filter {
          background-color: transparent;
          box-shadow: none;
          border-radius: 4px;
          color: var(--gray-extra-soft);
        }
      }
    }

    #mapResults{
      & .content{
        & .resultsCount {
          color: var(--gray-extra-soft);
        }
        .card.clicked{
          background-color: var(--black-bg-soft);
        }
      }
    }

    & .main-content .cloned-card {

      &.clicked {
        & .details {
          & .actions {
            & div {
              background-color:var(--gray);

              &:last-of-type{
                & img{
                  filter: invert(.8);
                }
              }
            }
          }
        }

        &.home-clone{

          & .media-wrapper{
            background-color: var(--black-bg);
          }

          & .details{

            & .name {
              background: var(--gray);
              color: rgb(173 95 40);
              box-shadow: 0 2px 10px -3px #1f1f1f !important;
              text-shadow: 1px 1px #333;
            }
          }
        }
      }
    }
  }

    @keyframes pulse-up-down {
      0%, 100% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(2px);
      }
    }

    .featuredShortcutWrapper {
      padding: 0 0 2vh 0;
      justify-content: space-around;

      & h2{
        padding: 0 min(4vw, 45px) 0 min(6vw, 120px);
        margin-bottom:2vh;
      }

      & .shortcutWrapper{
        column-gap: 1vw;
        margin: 0 calc(2.5vw + 19px);
        justify-content: space-between;

        &.allShortcuts {
          justify-content: flex-start;
          padding: 1vh calc(.5vw + 19px);

          .shortcut{
            padding: 0 calc(.5vw + 19px);
          }
        }

        &.topSearches {
          padding: calc(.25vh + 19px) calc(.5vw + 19px);
          justify-content: flex-start;
          gap: min(2vw, 30px);
          .shortcut {
            font-size: var(--font-size-body-smaller);
            height: 75px;
            width: min(23%, 400px);
            min-width: 175px;
          }
        }
        .shortcut{
          width: min(23%, 300px);
          font-size: var(--font-size-body);
          background-image: none;

          &:only-of-type{
            width: auto;
          }

          &:nth-of-type(odd):not(.hide):not(:only-of-type){
            box-shadow: none;
          }

          &.admin-schedule-btn,&.view-more-btn{
            width: min(47%, 300px);
          }
          &.view-more-btn{
            height: 65px;
          }
        }
      }

      & .homeHistoryWrapper {
        width: 97%;
        & .recentlyViewed {

          .card{
            width: 214px;
            min-width: 214px;
            max-height: 140px;
            .media-wrapper{
              height: 120px;
            }
          }
        }
      }
    }
    body.darkMode {
      & .featuredShortcutWrapper {
          & .shortcutWrapper {
            box-shadow: none;
            border-radius: 14px;
            border:none;
            /* background-color:#8a6a4b; */
            background-color: transparent;

            &.allShortcuts{
              background:transparent;
              border: none;

              .shortcut{
                /* padding: 4px 24px; */
              }
            }

              & .shortcut {
                box-shadow: none;
                border-radius: 12px;

                &.admin-schedule-btn{
                  box-shadow: none !important;
                }

                &:nth-of-type(odd):not(.hide) {
                    box-shadow: none !important;
                }

                &:nth-of-type(2n+1):not(.hide) {
                  &:only-of-type {
                    color: var(--espresso);
                  }
                }
              }
          }
      }
    }

    .discover-wrapper{
      padding:1vh 1vw 2vh 1vw;
      opacity: 1;
      transition: background-color 0.2s ease-out;

      .sectionWrapper{
        margin-left: max(400px,min(19vw, 400px));
      }

      .location-fallback-message{
        font-size: var(--font-size-body-smaller);
        margin: 0 0 2vh min(5vw, 100px);
        cursor: pointer;
        border-radius: 10px;
        p{
          font-size: var(--font-size-body-smaller);
        }
      }

      & .sideScrollWrapper {
        width: 97%;
        & .recentlyViewed {

          .card{
            width: 214px;
            min-width: 214px;
            max-height: 140px;
            .media-wrapper{
              height: 120px;
            }
          }
        }
      }
    }

    .discover_filters.shrink + .discover-wrapper{
      margin:0;
      .sectionWrapper{
        margin-left: 0;
      }
    }
    
    .discover-wrapper .sectionHeader{
        padding: 0 min(4vw, 45px) 0 min(6vw, 120px);
        width: fit-content;
        margin-top: 3vh;
        height: 50px;
        position: relative;
    }

    .discover-wrapper .cards-wrapper{
      flex-wrap: wrap;
      padding:2vh min(6vw, 120px) max(25px, 3.5vh) min(6vw, 120px);
      column-gap: .5vw;
      row-gap: calc(5px + .25vh);
      margin-top: 6vh;
      overflow-x: visible;
    }

    .discover-wrapper .cards-wrapper .card .media-wrapper{
      left: 0%;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .discover-wrapper .cards-wrapper .card {
      &.home-card {

        &:not(.accolade-card){
          overflow-y: hidden;

          & :is(.name, .description,.items,.time){
            font-size: var(--font-size-small);
            color: var(--black-bg-soft);
            &.name{
              font-size: var(--font-size-h4);
              color:inherit;
              text-overflow: ellipsis;
              height: auto;
              padding-bottom: .5vh;
              padding-top: calc(1vh + 5px);
              overflow-y: visible;
              white-space: nowrap;
            }

            &.description{
              height: 43px;
              padding: 0 calc(7px + 1vw);
              overflow-y: hidden;
              display: none;
              &:empty{
                height: 0;
                padding: 0;

                & ~ .stats{
                  max-height: calc(2.4vh + 136px);
                  display: -webkit-box;
                  line-clamp: 4;
                  -webkit-line-clamp: 4;
                  border-radius: 0;
                }
              }
            }

            &.items{
              font-size: var(--font-size-tiny);
              font-style: italic;
            }
          }

          &.nomedia {
            height: fit-content;

            .media-wrapper{
              display: none;
            }

            & .stats {
              max-height: 115px;
            }
            & :is(.name, .description,.items,.time){
              &.description{
                &:empty{
                  & ~ .stats{
                    max-height: 154px;
                  }
                }
              }
            }
          }
        }
        
        & :is(.name, .description,.items,.time){
          padding:1vh calc(7px + 1vw);
        }

        &.accolade-card{
          & :is(.description,.items,.time){
            padding:1vh calc(10px + 2vw);
          }
        }

        & .stats{
          flex-wrap: wrap;
          overflow: hidden;
          white-space: normal;
          row-gap: 1vh;
          max-height: calc(1.8vh + 103px);
          margin-top: 0;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 5px 1vw;
          border-radius: 10px 10px 18px 18px;

          &:not(:empty) {
            background: unset;
            box-shadow: unset;
          }

          & p{
            margin: .3vh min(2px, .2vw);
            vertical-align: middle;
            padding: 4px 10px;
            font-size: var(--font-size-body-smaller);
            color: var(--black-bg-soft);
            & img{
              max-height: 20px;
              max-width: 20px;
            }
          }
        }
      }
  }

    .discover-wrapper .cards-wrapper.featured{
      justify-content: space-evenly;
      padding: 0 2vw max(25px, 3.5vh) 2vw;
      margin-top: 5vh;
      column-gap: calc(.5vw + 19px);
      overflow-x: auto;

      &:nth-of-type(1){
        padding-top: 30px;
      }
    }

    .discover-wrapper .cards-wrapper.featured .card{
      margin-top: calc(1vh + 20px);
      border-radius:18px 18px 6% 6%;

      /* .handle {
        position: absolute;
        top: 7%;
        height: 29%;
        left: -7%;
        width: 7%;
        border-radius: 28px 0 0 25px;
        border-bottom-left-radius: 26px 30px;
        background: transparent;
        border: 12px solid rgb(78 68 61 / 27%);
        border-right: none;
        box-sizing: border-box;
        box-shadow: inset -1px 0 3px #6f69669c;
      } */

      & .name{
        transition: padding ease .4s;
        margin-top: 0;
        position: relative;
        overflow-y: visible;

          & :is(.savedBadge, .verifiedBadge) {
            
            &.verifiedBadge {
              width: auto;
              position: absolute;
              top: -17px;
              margin: 0;
              right: -3px;
              height: 30px;
            }
          }
      }
      & .footer {
        position:absolute;
        bottom:14px;
        right:15px;
        opacity: .2;
        pointer-events: none;
        transition: opacity 0.3s;
        display: block;
      }
      &:hover{
        & .footer {
          opacity: 1;
          pointer-events: auto;
        }
      }

      & .media-wrapper{
        border-radius: 18px;
        min-height: unset;
        height: auto;
        aspect-ratio: 3 / 2;

        & :is(img, video){
          object-fit: cover;
        }
      }
    }

    body.darkMode {
      .discover-wrapper .cards-wrapper .card{
        background: var(--gray-extra-softest);
      }
      & .discover-wrapper .cards-wrapper.featured .card {
        background: var(--black-bg);
        color: var(--white-bg-soft);
          .media-wrapper {
            border-radius: 18px 18px 0 0;
          }
      }
    
      .discover_filters {

        &.show{
          background-color: var(--black-bg-light-soft);
        }
        & .recentlyViewed {
          margin-top: 10px;
          & .mini {
            margin-bottom: 0;
            box-shadow: var(--gray-box-shadow);
            background: var(--blue-shadow);
            .info {
              color: var(--gray-extra-soft);
            }
          }
        }
      }
    }

    :is(#newPopUp-content,#newPopUp-content2){
      height: auto;
      padding-bottom:40px;
    }
    
    :is(#newPopUp-wrapper,#newPopUp-wrapper2) .display{
      border-radius:16px;
    }
    :is(#newPopUp-content,#newPopUp-content2) .multiSelectWrapper{
      padding: 10px 20px;
    }
}

 .hide {
    display: none;
  }