html,body{
  margin:0;
  padding:0;
  background:#fff7e8;
  font-family:Arial, Helvetica, sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.app{
  min-height:100svh;
  background:#fff7e8;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex-direction:column;
}
.viewer{
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:0 0 68px;
  box-sizing:border-box;
}
.image-wrap{
  position:relative;
  width:100%;
}
#pageImage{
  display:block;
  width:100%;
  height:auto;
  background:white;
}

.playlist-link{
  position:absolute;
  left:74.5%;
  top:83.3%;
  width:14%;
  height:3.8%;
  border-radius:8px;
  background:transparent;
  cursor:pointer;
  z-index:11;
  display:none;
}
.playlist-link.is-active{display:block}

.maps-link,
.review-link{
  position:absolute;
  background:transparent;
  cursor:pointer;
  z-index:11;
  display:none;
}
.maps-link{
  left:7.5%;
  top:69.4%;
  width:22.5%;
  height:16.2%;
}
.review-link{
  left:37.5%;
  top:63.8%;
  width:22.5%;
  height:15.2%;
}
.maps-link.is-active,
.review-link.is-active{display:block}


.contact-link{
  position:absolute;
  background:transparent;
  cursor:pointer;
  z-index:12;
  display:none;
  border-radius:8px;
}
.contact-link.is-active{display:block}
.host-whatsapp-link{
  left:38.2%;
  top:47.25%;
  width:25.5%;
  height:5.75%;
}
.guest-whatsapp-link{
  left:64.5%;
  top:47.25%;
  width:29.5%;
  height:5.75%;
}
.email-link{
  left:38.2%;
  top:54.0%;
  width:55.8%;
  height:4.1%;
}
.website-link{
  left:38.2%;
  top:58.4%;
  width:55.8%;
  height:4.1%;
}
.address-link{
  left:38.2%;
  top:62.75%;
  width:55.8%;
  height:5.1%;
}

.cover-start{
  position:absolute;
  left:28%;
  top:75.2%;
  width:44%;
  height:5.6%;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  z-index:10;
  padding:0;
  margin:0;
}
.bottom-nav{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(520px,100%);
  min-height:40px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  padding:4px 18px calc(4px + env(safe-area-inset-bottom));
  background:#fff7e8;
  border-top:1px solid rgba(21,21,21,.10);
  box-sizing:border-box;
  z-index:20;
}
.nav-side,.nav-logo{
  border:0;
  background:transparent;
  height:30px;
  display:flex;
  align-items:center;
  font-size:14px;
  color:#151515;
  padding:0;
  font-weight:500;
}
.nav-left{justify-content:flex-start}
.nav-right{justify-content:flex-end}
.chev{
  color:#f58220;
  font-size:26px;
  line-height:1;
  font-weight:300;
  margin:0 7px;
}
.label{line-height:1}
.nav-logo{
  justify-content:center;
  width:38px;
}
.flower-logo{
  display:block;
  width:26px;
  height:26px;
  object-fit:contain;
}
body.on-cover .viewer{
  padding-bottom:0;
}
body.on-cover .bottom-nav{
  display:none;
}
body:not(.on-cover) .cover-start{
  display:none;
}
button:disabled{
  opacity:.22;
  pointer-events:none;
}
@media (min-width:700px){
  .viewer{
    padding-top:18px;
    padding-bottom:82px;
  }
  body.on-cover .viewer{
    padding-bottom:18px;
  }
  #pageImage{
    border-radius:26px;
    box-shadow:0 18px 70px rgba(0,0,0,.18);
  }
  .bottom-nav{
    bottom:18px;
    border:1px solid rgba(21,21,21,.08);
    border-radius:999px;
    box-shadow:0 10px 35px rgba(0,0,0,.10);
    min-height:42px;
  }
}