/* PWA / visual de app mobile - Chalé Alves */
:root{
  --chale-app-orange:#ff9d2f;
  --chale-app-orange2:#ffb347;
  --chale-app-dark:#151515;
  --chale-app-cream:#fff8dc;
}

.chale-install-bar{
  position:fixed;
  left:14px;
  right:14px;
  bottom:84px;
  z-index:10050;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(17,17,17,.94);
  color:#fff;
  box-shadow:0 12px 35px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
}
.chale-install-bar strong{font-size:14px;display:block;line-height:1.2}
.chale-install-bar span{font-size:12px;color:#f6deb9;display:block;margin-top:2px}
.chale-install-bar button{
  border:0;border-radius:999px;background:var(--chale-app-orange2);color:#111;
  font-weight:800;padding:10px 13px;white-space:nowrap;cursor:pointer;
}
.chale-install-bar.is-visible{display:flex}

.chale-bottom-nav{
  display:none;
}

.chale-app-spacer{height:0}

@media (max-width: 820px){
  html, body{max-width:100%;overflow-x:hidden!important;-webkit-text-size-adjust:100%}
  body{padding-bottom:82px!important;background:#f5f5f5;}

  .topo{
    min-height:82px!important;
    padding:8px 14px!important;
    justify-content:center!important;
    gap:10px!important;
  }
  .logo-area{gap:10px!important;justify-content:center!important;}
  .topo img{height:58px!important;max-width:90px!important;object-fit:contain!important;}
  .nome-chale{font-size:30px!important;line-height:1!important;text-align:center!important;}

  .menu{display:none!important;}
  .conteudo{padding-top:96px!important;}

  .hero{padding:10px 12px 16px!important;}
  .hero-box{min-height:420px!important;border-radius:22px!important;}
  .hero-content{padding:26px 16px!important;}
  .hero-content h1{font-size:34px!important;}
  .hero-content p{font-size:16px!important;line-height:1.55!important;}

  img, video, iframe{max-width:100%;height:auto;}
  table{max-width:100%;}
  input, select, textarea, button{font-size:16px;}

  .chale-bottom-nav{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:10040;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    padding:8px 7px calc(8px + env(safe-area-inset-bottom));
    background:rgba(17,17,17,.96);
    border-top:1px solid rgba(255,179,71,.55);
    box-shadow:0 -8px 26px rgba(0,0,0,.25);
    backdrop-filter:blur(10px);
  }
  .chale-bottom-nav a{
    color:#fff!important;
    text-decoration:none!important;
    text-align:center;
    font:700 11px/1.15 Poppins, Arial, sans-serif;
    border-radius:14px;
    padding:8px 4px 7px;
    min-height:48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
  }
  .chale-bottom-nav a .ico{font-size:18px;line-height:1;}
  .chale-bottom-nav a.is-active,
  .chale-bottom-nav a:active{
    background:#ffb347;
    color:#111!important;
  }

  .btn-principal, .btn-secundario, .whatsapp-btn, .btn{
    min-height:44px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
}

@media (max-width: 420px){
  .nome-chale{font-size:26px!important;}
  .topo img{height:52px!important;}
  .hero-content h1{font-size:30px!important;}
  .chale-bottom-nav a{font-size:10px;}
}


/* Convite de instalação do app no celular */
.chale-install-modal{
  position:fixed;
  inset:0;
  z-index:12000;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  background:rgba(12,11,10,.56);
  backdrop-filter:blur(7px);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}
.chale-install-modal.is-visible{opacity:1;visibility:visible}
.chale-install-card{
  position:relative;
  width:min(100%,460px);
  display:grid;
  grid-template-columns:68px 1fr;
  gap:16px;
  padding:24px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:26px;
  background:#fffdf8;
  color:#211e1a;
  box-shadow:0 28px 80px rgba(0,0,0,.34);
  transform:translateY(24px);
  transition:transform .22s ease;
}
.chale-install-modal.is-visible .chale-install-card{transform:translateY(0)}
.chale-install-card>img{border-radius:18px;box-shadow:0 9px 20px rgba(0,0,0,.16)}
.chale-install-copy{padding-right:15px}
.chale-install-kicker{display:block;margin-bottom:4px;color:#9a681d;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.chale-install-copy h2{margin:0;font:700 24px/1.08 "Playfair Display",Georgia,serif;color:#211e1a}
.chale-install-copy p{margin:9px 0 0;color:#665f56;font-size:14px;line-height:1.5}
.chale-install-ios-note{grid-column:1/-1;margin-top:12px;padding:12px 13px;border-radius:13px;background:#fff1cf;color:#57431c;font-size:13px;line-height:1.45}
.chale-install-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#5f584f;font-size:25px;cursor:pointer}
.chale-install-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:4px}
.chale-install-primary,.chale-install-later{min-height:46px;border-radius:999px;padding:11px 18px;font-weight:800;cursor:pointer}
.chale-install-primary{border:0;background:#d99a2b;color:#17130d;box-shadow:0 8px 18px rgba(217,154,43,.25)}
.chale-install-later{border:1px solid #ded6ca;background:#fff;color:#655d53}
@media (min-width:821px){.chale-install-modal{display:none!important}}
@media (max-width:390px){
  .chale-install-card{grid-template-columns:56px 1fr;padding:20px;gap:13px}
  .chale-install-card>img{width:56px;height:56px}
  .chale-install-copy h2{font-size:21px}
  .chale-install-actions{grid-template-columns:1fr}
}