/* V1.26.0 — checkout organizado e realmente centralizado no mobile. */

/* Mantém o modal no centro da viewport, acima do header, respeitando apenas a área segura do aparelho. */
@media (max-width:700px){
  body #checkoutModal.modal.open{
    position:fixed!important;
    inset:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:auto!important;
    padding-top:max(12px,env(safe-area-inset-top,0px))!important;
    padding-right:max(10px,env(safe-area-inset-right,0px))!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom,0px))!important;
    padding-left:max(10px,env(safe-area-inset-left,0px))!important;
  }

  body #checkoutModal.modal.open > .modal-card{
    position:relative!important;
    inset:auto!important;
    width:min(520px,100%)!important;
    max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    margin:auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    border-radius:19px!important;
    padding:16px 15px 15px!important;
    transform:none!important;
  }

  /* Cabeçalho limpo, sem barra escura. */
  body #checkoutModal.modal.open > .modal-card > .modal-head{
    position:relative!important;
    top:auto!important;
    z-index:10!important;
    display:block!important;
    min-height:42px!important;
    margin:0 0 8px!important;
    padding:2px 52px 8px 0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  body #checkoutModal .modal-head h3{
    margin:0!important;
    color:#0f172a!important;
    font-size:1.08rem!important;
    line-height:1.28!important;
    font-weight:800!important;
    letter-spacing:-.018em!important;
  }

  body #checkoutModal .modal-head .icon-btn{
    position:absolute!important;
    top:0!important;
    right:0!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    border-radius:12px!important;
    z-index:20!important;
  }

  /* Remove o segundo "card/TAG" de dentro do checkout. As informações passam a pertencer ao próprio modal. */
  body #checkoutModal #checkoutDetails{
    display:block!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  body #checkoutModal #checkoutDetails .sum-line{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:12px!important;
    margin:0!important;
    padding:10px 0!important;
    border:0!important;
    border-bottom:1px solid #e2e8f0!important;
    background:transparent!important;
    font-size:.86rem!important;
    line-height:1.35!important;
  }

  body #checkoutModal #checkoutDetails .sum-line > span{
    color:#64748b!important;
    font-size:.82rem!important;
    font-weight:650!important;
    line-height:1.35!important;
  }

  body #checkoutModal #checkoutDetails .sum-line > strong{
    max-width:58vw!important;
    color:#0f172a!important;
    font-size:.89rem!important;
    font-weight:800!important;
    line-height:1.35!important;
    text-align:right!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }

  /* Nome da campanha usa toda a largura e quebra somente entre palavras. */
  body #checkoutModal #checkoutDetails .checkout-campaign-line{
    display:block!important;
    padding:4px 0 11px!important;
  }

  body #checkoutModal #checkoutDetails .checkout-campaign-line > span{
    display:block!important;
    margin:0 0 4px!important;
    color:#64748b!important;
    font-size:.73rem!important;
    line-height:1.2!important;
    font-weight:700!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
  }

  body #checkoutModal #checkoutDetails .checkout-campaign-line > strong{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    color:#0f172a!important;
    font-size:.96rem!important;
    line-height:1.38!important;
    font-weight:800!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }

  body #checkoutModal #checkoutDetails .checkout-quantity-line{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  body #checkoutModal #checkoutDetails .checkout-quantity-line > span,
  body #checkoutModal #checkoutDetails .checkout-quantity-line > strong{
    white-space:nowrap!important;
  }

  body #checkoutModal #checkoutDetails .sum-total{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:end!important;
    gap:12px!important;
    margin:0!important;
    padding:13px 0 8px!important;
    border:0!important;
    border-bottom:1px solid #e2e8f0!important;
    background:transparent!important;
  }

  body #checkoutModal #checkoutDetails .sum-total > span{
    color:#334155!important;
    font-size:.9rem!important;
    font-weight:750!important;
  }

  body #checkoutModal #checkoutDetails .sum-total > strong{
    color:#126e38!important;
    font-size:1.3rem!important;
    line-height:1!important;
    font-weight:900!important;
    text-align:right!important;
    white-space:nowrap!important;
  }

  /* O aviso de oportunidade deixa de parecer outra TAG/card. */
  body #checkoutModal .wheel-checkout-tip{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:10px!important;
    margin:0!important;
    padding:11px 0 4px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#475569!important;
    font-size:.78rem!important;
    line-height:1.4!important;
  }

  body #checkoutModal .wheel-checkout-tip.achieved{
    display:block!important;
    color:#126e38!important;
  }

  body #checkoutModal .wheel-checkout-tip strong{
    color:#126e38!important;
    font-weight:800!important;
  }

  body #checkoutModal .wheel-checkout-add{
    min-height:34px!important;
    padding:7px 10px!important;
    border:1px solid rgba(18,110,56,.3)!important;
    border-radius:10px!important;
    background:#f0f9f4!important;
    color:#126e38!important;
    font-size:.72rem!important;
    font-weight:800!important;
    box-shadow:none!important;
  }

  /* Termos também deixam de ser um card separado. */
  body #checkoutModal .check{
    display:grid!important;
    grid-template-columns:20px minmax(0,1fr)!important;
    align-items:start!important;
    gap:9px!important;
    margin:12px 0!important;
    padding:2px 0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#475569!important;
    font-size:.8rem!important;
    line-height:1.42!important;
  }

  body #checkoutModal #confirmCheckoutBtn{
    min-height:50px!important;
    margin-top:4px!important;
    border-radius:14px!important;
    font-size:.94rem!important;
  }
}

/* Desktop: mantém o modal atual, mas remove o card interno para consistência visual. */
@media (min-width:701px){
  body #checkoutModal #checkoutDetails{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body #checkoutModal #checkoutDetails .checkout-campaign-line{
    display:grid!important;
    grid-template-columns:150px minmax(0,1fr)!important;
  }
}

/* V1.26.2 — destaque leve e unificado para benefícios do pedido. */
body #checkoutModal #checkoutDetails .checkout-benefit-row{
  position:relative!important;
  margin:5px 0!important;
  padding:9px 10px!important;
  border:0!important;
  border-left:3px solid rgba(18,110,56,.55)!important;
  border-radius:8px!important;
  background:rgba(18,110,56,.055)!important;
}
body #checkoutModal #checkoutDetails .checkout-benefit-row > span{
  color:#355d45!important;
  font-weight:750!important;
}
body #checkoutModal #checkoutDetails .checkout-benefit-row > strong{
  color:#126e38!important;
  font-weight:900!important;
  font-variant-numeric:tabular-nums!important;
}
@media(max-width:700px){
  body #checkoutModal #checkoutDetails .checkout-benefit-row{
    margin:4px 0!important;
    padding:8px 9px!important;
    border-radius:8px!important;
  }
  body #checkoutModal #checkoutDetails .checkout-benefit-row > span{
    font-size:.81rem!important;
  }
  body #checkoutModal #checkoutDetails .checkout-benefit-row > strong{
    font-size:.91rem!important;
  }
}