/* 
COLORS
======
#d62300 Fiery Red
#ff8732 Flaming Orange
#502314 BBQ Brown
#f5ebdc Mayo Egg White
#198737 Crunchy Green
#ffaa00 Melty Yellow

#d7c7b5 border when using mayo

*/

/* ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 10px 5px 10px #d7c7b5;
  box-shadow: inset 10px 5px 10px #d7c7b5;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 100px #d62300;
  box-shadow: inset 0 0 100px #d62300;
  border-radius: 10px;;
} */

/* overriding from style.css */
.content-grid {
  /* display: grid;
  min-height: 100vh;
  grid-template-columns: none;
  grid-template-rows: 74px 1fr auto; */
}
.content-grid header {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-column-end: -1;
}
.content-grid main {
  grid-row-start: 2;
}
.content-grid details {
  
}
.content-grid footer {
  grid-row-start: 3;
  grid-column-start: 1;
  grid-column-end: -1;
}

#pg-offers {
  /* height: calc(100vh - 74px); */
  overflow-y: scroll;
  background-color: #f5ebdc;
  display: grid;
  grid-template-rows: 80px auto;
  grid-template-areas: 
      "title"
      "list";
  width: 100%;
  min-height: calc(100vh - 80px - 114px); /*arbitrary 114px so that the footer bk logo is barely visible*/
}


/* #offer-section-map {
  position: sticky;
  min-height: calc(100vh - 74px);

} */
/* #map {
  min-height: calc(100vh - 74px - 80px - 60px - 1.5em);
  width: 100%;
} */

#info-content {
  color: #502314;
  width: 400px;
  min-height: 200px;
  background-color: #f5ebdc;
  /* border: 3px solid #ebebeb; */
}
#info-content h3 {
  font-size: 1.5em;
  font-family: Flame-Regular;
  padding: 20px;
}
#info-content img {
  width: 100%;
  height: auto;
  /* border-bottom: 5px solid #ff8732; */
  margin: -1px;
}
#info-content img ~ img {
  border-top: 5px solid #ff8732;
}
#infowindow-title {
  cursor: pointer;
}
#infowindow-title:hover {
  color: #d62300;
}




/* .tab {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
} */

/* Style the buttons that are used to open the tab content */
/* .tab button {
  outline: none;
  border: none;
  background-color: #f5ebdc;
  cursor: pointer;
  font-family: Flame-Regular;
  font-size: 1.2em;
  color: #502314;
  padding: 8px 15px;
  border-radius: 20px;
} */

/* .tab button ~ button {
  margin-left: 1em;
}

.tab button:hover {
  background-color: #f0cdbb;
}

.tab button.active {
  color: #f5ebdc;
  background-color: #d62300;
}

.tabcontent {
  display: none;
} */

.offers-title-container {
  grid-area: title;
  display: flex;
  position: absolute;
  top: 74px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  background-color: #d62300;

}

#offers-title {
  font-family: Flame-Regular;
  font-size: 1.5em;
  color: #f5ebdc;
}


#offer-section-list {
  margin-top: 80px;
  /* overflow-y: scroll; */
  /* height: 100%; */
}

footer {
  /* display: none; */
}

.offer-list-items {
  margin: 0.5em 0;
  padding: 20px;
}
.offer-list-items ~ .offer-list-items {
  border-top: 3px solid #d7c7b5;
}

.offer-list-items * {
  padding: 0.5em 0;
}

.offer-list-items-title {
  color: #502314;
  font-family: Flame-Regular;
  font-size: 1.3em;
  cursor: pointer;
  padding-bottom: 0;
}
.offer-list-items-title-extra {
  /* color: #502314; */
  font-family: Flame-Regular;
  font-size: 1em;
}

.offer-list-items .offer-sidemenu-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}


/* MODAL */

.offer-section-modal {
  display: none;
}
#offer-modal-mask {
  position: fixed;
  display: none;
  justify-content: center;
  background-color: #000;
  background:rgba(0, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  z-index: 999;
}
.offer-section-modal {
  position: fixed;
  /* display: none; */
  /* top: 74px; */
  background-color: #f5ebdc;
  /* min-height: 100vh;
  min-width: 100vh; */
  height: 100%;
  width: 100%;
  /* padding: 15px; */
  overflow-y: scroll;
  z-index: 999;
}
.btn-modal-close {
  position: fixed;
  /* top: 89px; */
  top: 15px;
  left: 15px;
  background-color: #d62300;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-modal-close:hover {
  background-color: #a71b00;
}
.btn-modal-close img {
  /* width: 50px;
  height: auto; */
  width: 20px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='20'%3E%3Cg%3E%3Ctitle%3Ebackground%3C/title%3E%3Crect fill='none' id='canvas_background' height='22' width='30' y='-1' x='-1'/%3E%3C/g%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath id='svg_1' fill='%23f5ebdc' d='m26.00715,8.02145l-19.2,0l4.62,-4.62c0.394,-0.394 0.58,-0.864 0.58,-1.38c0,-0.984 -0.813,-2 -2,-2c-0.531,0 -0.994,0.193 -1.38,0.58l-7.958,7.958c-0.328,0.328 -0.662,0.733 -0.662,1.462s0.279,1.08 0.646,1.447l7.974,7.973c0.386,0.387 0.849,0.58 1.38,0.58c1.188,0 2,-1.016 2,-2c0,-0.516 -0.186,-0.986 -0.58,-1.38l-4.62,-4.62l19.2,0c1.104,0 2,-0.896 2,-2s-0.896,-2 -2,-2z'/%3E%3C/g%3E%3C/svg%3E");
}

.offer-modal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
}
.offer-modal-wrapper {
  max-width: 600px;
  width: 100%;
  display: grid;
  gap: 25px;
  color: #502314;
  font-family: Flame-Sans;
  grid-template-columns: 1fr;
  /* grid-template-rows: 1fr 1fr 1fr 2fr 1fr 4fr 4fr; */
}
/* .offer-modal-wrapper>* ~ * {
  margin-top: 2em;
} */
.offer-modal-wrapper h3 {
  font-family: Flame-Regular;
  font-size: 1.2em;
}
.offer-modal-wrapper a {
  outline: none;
  border: none;
  background-color: #d62300;
  color: #f5ebdc;
  cursor: pointer;
  font-family: Flame-Regular;
  font-size: 1em;
  padding: 8px 15px;
  border-radius: 20px;
}
.offer-modal-wrapper a:hover {
  background-color: #a71b00;
}

.offer-modal-title {
  /* justify-self: center; */
  font-family: Flame-Regular;
  color: #502314;
  font-size: 1.7em;
  margin-top: 50px;
}

.offer-modal-img {
  width: 100%;
  /* max-width: 500px; */
}

.offer-modal-wrapper p {
  line-height: 2em;
}

.menu-item-description-header {
  font-family: Flame-Regular;
  color: #ff8732;
}

.menu-item-description-body {
  font-family: Flame-Sans;
  color: #198737;
}

.menu-item-description-list-title {
  font-family: Flame-Regular;
  color: #198737;
}

@media screen and (min-width: 650px) {
  .content-grid {
    grid-template-columns: fit-content(35%) 1fr;
  }
  .content-grid header {
    grid-row-start: 1;
  }
  .content-grid main {
    grid-column-start: 1;
  }
  .content-grid details {
    grid-column-start: 2;
    grid-row-end: 3;
  }

  #pg-offers {
    overflow-y: unset;
    max-width: 400px;
    grid-template-columns: 1fr;
    /* position: fixed; */
    /* bottom: 0;
    top: 74px; */
  }
  /* #map {
    min-height: calc(100vh - 74px);
  } */
  /* .tab {
    display: none;
  } */
  /* #offer-section-map {
    display: block;
    grid-area: map;
  } */

  .offers-title-container {
    position: relative;
    top: unset;
  }

  #offer-section-list {
    margin-top: unset;
    display: block;
    grid-area: list;
    height: calc(100vh);
    overflow-y: scroll;
  }
  #offer-section-list .offer-list-items {
    border-right: 10px solid transparent;
  }
  #offer-section-list .offer-list-items:hover {
    border-right: 10px solid #bba391;
  }
  #offer-section-list .offer-list-items:hover .offer-list-items-title {
    color: #d62300;
  }
  #offer-section-list .offer-list-items.active {
    border-right: 10px solid #d62300;
  }

  #offer-modal-mask {
    grid-row-start: 2;
    position: relative;
    display: flex;
    justify-content: center;
    background-color: red;
    height: 100%;
    width: 100%;
    z-index: initial;
    min-height: calc(100vh - 74px);
  }
  .offer-section-modal {
    position: relative;
    /* display: none; */
    /* top: 74px; */
    background-color: #f5ebdc;
    /* min-height: 100vh;
    min-width: 100vh; */
    height: 100%;
    width: 100%;
    /* padding: 15px; */
    overflow-y: unset;
    z-index: initial;
  }
  #offer-modal-mask .offer-section-modal:nth-child(1) {
    display: block;
  }

  .offer-modal-wrapper {
    max-width: 500px;
    grid-template-columns: fit-content(500px);
    /* grid-template-rows: 1fr 1fr 1fr 2fr 1fr 4fr 4fr; */
  }
  .btn-modal-close {
    display: none;
  }
  .offer-modal-title {
    margin-top: 0;
  }
  .offer-modal-img {
    width: 100%;
    max-width: 500px;
  }
}

@media screen and (min-width: 900px) {
  /* .offer-section-modal {
    position: absolute;
    align-self: center;
    height: 400px;
    width: 700px;
    overflow-y: scroll;
    border-radius: 10px;
  } */
  /* .btn-modal-close {
    position: sticky;
    top: 20px;
    left: 20px;
  }
  .btn-modal-close img {
    width: 20px;
    content: url("data:image/svg+xml,%3Csvg fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cline style='stroke:%23f5ebdc;' x1='18' x2='6' y1='6' y2='18'/%3E%3Cline style='stroke:%23f5ebdc;' x1='6' x2='18' y1='6' y2='18'/%3E%3C/svg%3E");
  } */
}

@media screen and (min-width: 992px) {
  /* #pg-offers {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-template-areas: 
        "title map map"
        "list map map"
  } */
  /* .tab {
    display: none;
  } */

  /* #offers-title {
    grid-area: title;
  }
  #offer-section-list {
    display: block;
    grid-area: list;
  } */
}