html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:rgba(117,197,80,.18);
}
body{
  overflow-x:hidden;             
  overflow-wrap:break-word;
}
img,svg,video{max-width:100%;}
.ico{max-width:none;}   


.demo-nav .logo-area{color:var(--forest-deep);}


.btn-primary{
  width:auto;
  min-width:120px;
  max-width:100%;
  white-space:normal;
  line-height:1.25;
}
.btn-primary-login{max-width:100%;}
.cad-submit .btn-primary,
.form-submit .btn-primary,
.carrinho-summary .btn-primary,
#screen-agendamento form .btn-primary{width:100%;}
#screen-agendamento form .btn-primary{max-width:340px; display:block;}


.field-relative .eye{
  top:auto; bottom:0; transform:none;
  height:44px; padding:0 12px; right:4px;
  display:flex; align-items:center; justify-content:center;
}

.demo-nav{gap:12px;}
.demo-nav .logo-area{flex-shrink:0;}
.demo-nav .nav-links{
  margin-left:auto;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.demo-nav .nav-links::-webkit-scrollbar{display:none;}
.demo-nav .nav-links button{flex:0 0 auto; white-space:nowrap;}


.notif-desc,.msg-bubble,.perfil-about,.review p,.item-info .name,
.item-info .loc,.carrinho-info .name,.carrinho-info .meta{overflow-wrap:anywhere;}


html{scroll-padding-top:72px;}

.nav-toggle{display:none;}

@media (max-width:1180px){

  .demo-nav{padding:8px 14px; flex-wrap:nowrap;}

  
  .nav-toggle{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    margin-left:auto;
    width:46px; height:46px; padding:0;
    border:none; border-radius:14px;
    background:var(--leaf-soft); cursor:pointer;
    transition:background .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle:hover{background:#dcefd2;}
  .nav-toggle:focus-visible{outline:2px solid var(--forest); outline-offset:2px;}
  .nav-toggle span{
    display:block; width:22px; height:2.5px; border-radius:2px;
    background:var(--forest-deep);
    transition:transform .25s ease, opacity .2s ease;
  }
  .demo-nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .demo-nav.menu-open .nav-toggle span:nth-child(2){opacity:0;}
  .demo-nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

 
  .demo-nav .nav-links{
    position:absolute; top:100%; left:0; right:0;
    margin:0; padding:10px 14px 16px;
    display:flex; flex-direction:column; gap:4px;
    overflow-x:hidden; overflow-y:auto;
    max-height:calc(100vh - 70px);
    max-height:calc(100dvh - 70px);
    background:#fff;
    border-bottom:1px solid #e2e8f0;
    box-shadow:0 18px 30px -14px rgba(21,62,42,.35);
    border-radius:0 0 20px 20px;
    -webkit-mask-image:none; mask-image:none;
    /* fechado */
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .demo-nav.menu-open .nav-links{
    opacity:1; visibility:visible; transform:none;
    transition-delay:0s;
  }
  .demo-nav .nav-links button{
    width:100%; min-height:48px;
    padding:12px 16px;
    justify-content:flex-start; gap:12px;
    font-size:15px; border-radius:14px; text-align:left;
  }
  .demo-nav .nav-links button .ico{width:22px; height:22px;}
  .demo-nav .nav-links button .nav-badge{margin-left:auto;}

  .demo-nav::after{
    content:''; position:fixed; left:0; right:0; bottom:0;
    top:var(--nav-h, 60px);
    background:rgba(21,62,42,.38);
    opacity:0; visibility:hidden;
    transition:opacity .2s ease, visibility 0s linear .2s;
    z-index:-1;
  }
  .demo-nav.menu-open::after{opacity:1; visibility:visible; transition-delay:0s;}


  body.menu-locked{overflow:hidden;}
}



.sorteio-qr{
  background:#fff; border-radius:16px; padding:10px;
  width:fit-content; margin:14px auto;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.35);
}
.sorteio-qr img{display:block; width:170px; height:170px; object-fit:contain; max-width:none;}
.sorteio-qr img[hidden]{display:none;}

.sorteio-qr.qr-missing{
  width:170px; height:170px; padding:12px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:2px dashed #a0aec0; box-shadow:none; background:#f7fafc;
}
.sorteio-qr.qr-missing::before{
  content:'Coloque o QR Code em\A assets/qrcode.png';
  white-space:pre; font-size:12px; line-height:1.5; color:#718096;
}
.sorteio-cta{
  display:inline-block; text-decoration:none; text-align:center;
  background:var(--clay); color:#fff;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:14.5px;
  padding:12px 26px; border-radius:999px;
  transition:background .2s ease, transform .15s ease;
}
.sorteio-cta:hover{background:#D67A3E; transform:translateY(-1px);}
.sorteio-cta[hidden]{display:none;}


.demo-nav .nav-links button.nav-sorteio{background:var(--clay); color:#fff;}
.demo-nav .nav-links button.nav-sorteio:hover{background:#D67A3E;}
.sorteio-menu{display:none;}

.sorteio-modal{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(21,62,42,.55);
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.sorteio-modal.open{opacity:1; visibility:visible; transition-delay:0s;}
.sorteio-card{
  position:relative; width:100%; max-width:480px;
  background:#fff; border-radius:26px; padding:34px 34px 30px; text-align:center;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  transform:translateY(10px) scale(.98); transition:transform .25s ease;
}
.sorteio-modal.open .sorteio-card{transform:none;}
.sorteio-card h3{
  font-family:'Fredoka',sans-serif; font-size:22px; color:var(--forest-deep); margin:0 0 8px;
  text-wrap:balance;
}
.sorteio-card h3 .ico{width:26px; height:26px; vertical-align:-5px;}
.sorteio-card p{font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0;}
.sorteio-card .sorteio-qr{padding:14px; border:1.5px solid var(--line); margin:20px auto;}
.sorteio-card .sorteio-qr img{width:240px; height:240px;}
.sorteio-card .sorteio-qr.qr-missing{width:240px; height:240px;}
.sorteio-close{
  position:absolute; top:12px; right:12px; width:40px; height:40px;
  border:none; border-radius:50%; background:var(--leaf-soft); color:var(--forest-deep);
  font-size:26px; line-height:1; cursor:pointer;
}
.sorteio-close:hover{background:#dcefd2;}
.sorteio-close:focus-visible{outline:2px solid var(--forest); outline-offset:2px;}


@media (max-width:1180px){
  .demo-nav .nav-links button.nav-sorteio{display:none;}
  .sorteio-modal{display:none;}

  .sorteio-menu{
    display:block;
    margin-top:10px; padding:20px 18px 22px;
    border-radius:18px; text-align:center; color:#fff;
    background:linear-gradient(150deg, var(--forest) 0%, var(--forest-deep) 100%);
  }
  .sorteio-menu h4{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Fredoka',sans-serif; font-size:16.5px; margin:0 0 8px;
  }
  .sorteio-menu h4 .ico{width:22px; height:22px;}
  .sorteio-menu p{font-size:13px; line-height:1.5; color:rgba(255,255,255,.88); margin:0;}
  .sorteio-menu .sorteio-cta{display:block; width:100%; max-width:320px; margin:0 auto;}
}
@media (max-width:380px){
  .sorteio-menu{padding:16px 12px 18px;}
  .sorteio-qr img,.sorteio-qr.qr-missing{width:150px; height:150px;}
}



.signup-sub{font-size:12.5px; color:var(--ink-soft); margin:0 0 14px; line-height:1.5;}
.cad-sub{margin:0; font-size:13px; color:var(--ink-soft);}


.demo-nav .nav-links button.nav-doar{
  border:1.5px solid var(--forest); color:var(--forest-deep);
}
.demo-nav .nav-links button.nav-doar:hover{background:var(--leaf-soft);}
.demo-nav .nav-links button.nav-doar.active{background:var(--forest); color:#fff;}

#screen-doar{
  background:linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  padding:38px 46px 46px;
  min-height:560px;
}
.form-grid select.pill-input{
  -webkit-appearance:none; appearance:none;
  padding-right:46px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23153E2A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:13px;
}
.choice-card input[type="checkbox"]{
  margin-top:3px; accent-color:var(--clay); width:16px; height:16px; flex-shrink:0;
}

.upload-box{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  min-height:110px; padding:16px;
  border:2px dashed rgba(255,255,255,.55); border-radius:18px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.92); font-size:13.5px; text-align:center;
  cursor:pointer; transition:background .2s ease, border-color .2s ease;
}
.upload-box:hover{background:rgba(255,255,255,.14); border-color:#fff;}
.upload-box:focus-within{outline:2px solid var(--clay); outline-offset:3px;}
.upload-box input[type="file"]{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.upload-box img{
  display:block; max-width:100%; max-height:220px;
  border-radius:12px; object-fit:contain; background:#fff;
}
.upload-box img[hidden]{display:none;}
.upload-box.has-foto{border-style:solid;}


.meu-aviso{
  margin-top:15px; padding:14px 16px;
  background:var(--leaf-soft); border:1px solid var(--line); border-radius:14px;
}
.meu-aviso p{margin:0 0 12px; font-size:13px; line-height:1.5; color:var(--ink);}
.btn-ghost.btn-remover{color:#c53030; border-color:#c53030;}
.btn-ghost.btn-remover:hover{background:#fff5f5;}


.perfil-cta{width:100%; margin-top:16px;}
.meus-itens{margin-bottom:24px;}
.meu-item{
  display:flex; align-items:center; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.meu-item:last-child{border-bottom:none;}
.meu-item-thumb{
  width:56px; height:56px; border-radius:12px; overflow:hidden; flex-shrink:0;
  background:var(--leaf-soft); display:flex; align-items:center; justify-content:center;
}
.meu-item-thumb img{width:100%; height:100%; object-fit:cover;}
.meu-item-thumb .ico{width:28px; height:28px;}
.meu-item-info{flex:1; min-width:0;}
.meu-item-info .name{
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:14.5px; color:var(--ink);
  margin:0 0 2px; overflow-wrap:anywhere;
}
.meu-item-info .meta{font-size:12.5px; color:var(--ink-soft); margin:0;}
.meu-item-acoes{display:flex; gap:8px; flex-shrink:0;}
.meu-item-acoes .btn-primary{min-width:0; padding:8px 16px; font-size:13px;}
.meus-vazio{font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.6;}

.perfil-stat-row .label{display:inline-flex; align-items:center; gap:8px;}


@media (max-width:1180px){
  .demo-nav .nav-links button.nav-doar{border-color:transparent; background:var(--leaf-soft);}
  .demo-nav .nav-links button.nav-doar.active{background:var(--forest); color:#fff;}
}

@media (max-width:600px){
  .meu-item{flex-wrap:wrap;}
  .meu-item-info{flex:1 1 calc(100% - 72px);}
  .meu-item-acoes{width:100%;}
  .meu-item-acoes .btn-primary{flex:1;}
  .upload-box{min-height:96px;}
}


@media (min-width:1600px){
  .page-shell,.flash{max-width:1320px;}
}



@media (max-width:1100px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .results{padding:22px 22px 30px;}
  .produto-body,.perfil-body{padding:22px 22px 30px;}
  .carrinho-body{padding:26px 24px 34px;}
  #screen-form,#screen-doar{padding:32px 30px 40px;}
  #screen-cadastro{padding:32px 30px 38px;}
}



@media (max-width:900px){
  .tracking-layout{grid-template-columns:1.1fr 1fr;}
}



@media (max-width:820px){

  .page-shell{padding:16px 12px 48px;}
  .flash{padding:0 12px;}
  .page-frame{border-radius:18px; min-height:0;}

  .pill-input,
  .search-nav-bar input,
  .chat-input-area input,
  textarea.pill-input,
  select.pill-input{font-size:16px;}

  #screen-login{min-height:0;}
  .login-visual{padding:28px 20px;}
  .login-logo{width:96px; height:96px; border-radius:24px; margin-bottom:0;}
  .login-form-wrap{padding:28px 20px 34px;}
  .login-form{max-width:420px;}


  #screen-cadastro{padding:24px 18px 30px;}
  .cadastro-head{margin-bottom:22px;}
  .cad-submit{max-width:none;}


  .search-nav-container{padding:14px 14px;}
  .search-nav-bar input{min-width:0;}
  .search-nav-bar .btn-primary{flex:0 0 auto; min-width:0;}
  .search-input-wrap{min-width:0;}
  .search-nav-filters{
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-right:-14px; padding-right:14px;
  }
  .search-nav-filters::-webkit-scrollbar{display:none;}
  .filters{padding:20px 16px;}
  .results{padding:20px 16px 26px;}
  .card-grid{gap:14px; margin-bottom:24px;}

  .chat-layout{
    flex-direction:column;
    height:calc(100vh - 130px);
    height:calc(100dvh - 130px);
    min-height:420px;
    max-height:720px;
    border-radius:16px;
  }
  .chat-sidebar{
    width:100%;
    flex:0 0 auto;
    display:flex;
    overflow-x:auto;
    border-right:none;
    border-bottom:1px solid #e2e8f0;
    scrollbar-width:none;
  }
  .chat-sidebar::-webkit-scrollbar{display:none;}
  .chat-sidebar-header{display:none;}
  .chat-user-item{
    flex:0 0 auto;
    min-width:210px;
    border-bottom:none;
    border-right:1px solid #edf2f7;
    padding:10px 14px;
  }
  .chat-main{min-height:0; flex:1 1 auto;}
  .chat-header{padding:10px 14px;}
  .chat-messages{padding:14px; min-height:0;}
  .msg-bubble{max-width:85%;}
  .chat-input-area{padding:8px 10px; padding-bottom:max(8px, env(safe-area-inset-bottom));}

  .notif-card{padding:14px; gap:12px;}
  .notif-header{flex-wrap:wrap; gap:2px 10px;}


  .produto-body,.perfil-body{padding:18px 14px 26px;}
  .produto-main{gap:16px; margin-bottom:22px;}
  .produto-photo{padding:18px; min-height:220px;}
  .produto-photo .phone-mock{width:140px; height:280px; border-radius:30px;}
  .produto-photo img{max-width:100%;}
  .produto-panel{padding:18px 18px 22px;}
  .produto-panel > div[style*="display:flex"]{flex-wrap:wrap;}
  .produto-panel .btn-primary{max-width:none;}
  #grid-produto-similares{grid-template-columns:repeat(2,1fr) !important;}

  .perfil-hero{
    padding:22px 18px;
    align-items:center;
    text-align:center;
    gap:14px;
  }
  .perfil-avatar{width:76px; height:76px; font-size:26px;}
  .perfil-hero-info{min-width:0; width:100%;}
  .perfil-badges{justify-content:center;}
  .perfil-stars{width:100%;}
  .perfil-card{padding:18px;}
  .perfil-stat-row{gap:12px;}

  .carrinho-body{padding:22px 14px 30px;}
  .carrinho-summary{position:static;}
  .carrinho-item{flex-wrap:wrap; padding:14px; gap:12px;}
  .carrinho-thumb{width:62px; height:62px;}
  .carrinho-info{flex:1 1 180px; min-width:0;}
  .carrinho-donor{flex-wrap:wrap;}


  #screen-confirmar-entrega form{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px;
  }
  #screen-confirmar-entrega form .btn-primary{margin-left:0 !important;}


  .tracking-layout{grid-template-columns:1fr; min-height:0;}
  .tracking-map{width:100%; min-width:0; min-height:0; aspect-ratio:6/5; max-height:420px;}
 
  .tracking-map .map-pin.you{left:20% !important; top:76% !important;}
  .tracking-map .map-pin.donor{left:78.3% !important; top:20% !important;}
  .tracking-map .courier-marker{left:46.7% !important; top:50% !important;}
  .eta-chip{top:12px; left:12px; right:12px; padding:8px 14px; width:fit-content; max-width:calc(100% - 24px);}
  .tracking-panel{padding:22px 18px 26px;}
  .tracking-actions{flex-wrap:wrap;}
  .tracking-actions button{flex:1 1 150px;}


  #screen-form,#screen-doar{padding:24px 16px 30px; min-height:0;}
  .form-card-head{padding:14px 16px; margin-bottom:20px;}
  .form-grid{gap:4px 0;}
  .form-submit button{max-width:none;}
}



@media (max-width:600px){

  .page-shell{padding:12px 8px 40px;}
  .page-frame{border-radius:16px;}

  .demo-nav{padding:8px 10px; gap:8px;}
  .demo-nav .logo-area{font-size:1.15rem;}

  .card-grid{grid-template-columns:1fr; gap:12px;}
  #grid-produto-similares{grid-template-columns:1fr !important;}
  .item-thumb{height:120px;}

  .login-form h2{font-size:20px; margin-bottom:18px;}
  #screen-cadastro{padding:20px 14px 26px;}
  .cadastro-head{flex-direction:column; align-items:stretch; text-align:center;}
  .cadastro-head .brand-mini{justify-content:center;}

  .search-nav-container{padding:12px;}
  .search-nav-bar{gap:8px;}
  .search-nav-bar .btn-primary{padding:10px 16px !important;}

  .results h3{font-size:14.5px;}
  .produto-photo .phone-mock{width:120px; height:240px; border-radius:26px;}
  .produto-panel h2{font-size:18px;}
  .produto-panel .btn-primary{flex:1 1 100%;}

  .carrinho-title{font-size:18px;}
  .carrinho-item{align-items:flex-start;}
  .carrinho-item .btn-primary{width:100%;}

  .perfil-hero-info h2{font-size:19px;}

  .eta-chip .big{font-size:17px;}
  .safety-code .code{font-size:22px;}
  .tracking-donor-card{flex-wrap:wrap;}
  .tracking-donor-card .info{flex:1 1 140px; min-width:0;}

  .form-card-head{flex-direction:column; align-items:flex-start;}
  .choice-card{padding:12px 14px;}

  .notif-icon{width:36px; height:36px;}

  .chat-user-item{min-width:180px;}
  .msg-bubble{max-width:90%;}
}


@media (max-width:380px){
  .page-shell{padding:10px 6px 36px;}

  .login-logo{width:80px; height:80px; border-radius:20px;}
  .login-form-wrap{padding:22px 14px 28px;}


  .produto-body,.perfil-body{padding:14px 10px 22px;}
  .produto-panel{padding:16px 14px 20px;}
  .carrinho-body{padding:18px 10px 26px;}
  #screen-form,#screen-doar{padding:20px 12px 26px;}

  #display-pin{font-size:34px !important; letter-spacing:5px !important;}
  .tracking-panel{padding:18px 14px 22px;}
  .map-pin .lbl{font-size:10px; padding:2px 7px;}

  .chat-input-area{gap:8px;}
  .chat-input-area input{padding:0 16px;}
}


@media (max-height:480px) and (orientation:landscape){
  .chat-layout{height:calc(100vh - 24px); height:calc(100dvh - 24px); min-height:280px;}
  .login-visual{padding:18px;}
  .tracking-map{aspect-ratio:auto; min-height:220px;}
}

@supports (padding:max(0px)){
  .demo-nav{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  .page-shell{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
}



@media (pointer:coarse){

  .demo-nav .nav-links button,
  .btn-primary,.btn-primary-login,.btn-sos,
  .tracking-donor-card .action,
  .chip-filter{min-height:44px;}
  .chip-filter{display:inline-flex; align-items:center;}
  .pill-input{min-height:46px;}
  .slot-card,.choice-card{min-height:52px;}
  .field-relative .eye{height:46px;}
}
@media (hover:none){

  .item-card:hover,
  .btn-primary:hover{transform:none;}
  .chat-input-area .btn-send:hover{transform:none;}
}



@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}