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 NON PRESENTE IN LIFE IS GOOD */

.playlist-link,
.playlist-link.is-active{
  display:none !important;
}

/* MAPPA E RECENSIONI */

.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;
}

/* CONTATTI - PAGINA 12 */

.contact-link{
  position:absolute;
  background:transparent;
  cursor:pointer;
  z-index:12;
  display:none;
  border-radius:8px;
}

.contact-link.is-active{
  display:block;
}

/* WHATSAPP */

.host-whatsapp-link{
  left:36.5%;
  top:45.2%;
  width:58%;
  height:3.8%;
}

.guest-whatsapp-link{
  left:64.5%;
  top:45.2%;
  width:29.5%;
  height:3.8%;
}

/* EMAIL */

.email-link{
  left:36.5%;
  top:49.9%;
  width:58%;
  height:3.8%;
}

/* SITO WEB */

.website-link{
  left:36.5%;
  top:54.1%;
  width:58%;
  height:3.8%;
}

/* INDIRIZZO */

.address-link{
  left:36.5%;
  top:58.3%;
  width:58%;
  height:4.2%;
}

/* PULSANTE INVISIBILE COPERTINA */

.cover-start{
  position:absolute;
  left:29%;
  top:71.3%;
  width:42%;
  height:5.8%;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  z-index:15;
  padding:0;
  margin:0;
  touch-action:manipulation;
}

/* NAVIGAZIONE */

.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;
  cursor:pointer;
}

.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;
}

/* COMPORTAMENTO COPERTINA */

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;
}

/* DESKTOP */

@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;
  }
}