/* GARAGEM88 — Pagamento mobile aprovado em 25/10/2026
   Camada EXCLUSIVAMENTE VISUAL para telas até 600px.
   Checkout e validações mantidos em g88-pagamento.js e g88-sale-transaction.js. */
.g88pm-appbar,.g88pm-summary-compact,.g88pm-summary-toggle{display:none}
@media(max-width:600px){
 #g88PaymentOverlay{
  padding:0!important;inset:0!important;max-width:100vw!important;overflow:hidden!important;
  background:#edf4fb!important;
 }
 #g88PaymentOverlay .g88-v95-payment-frame{
  box-sizing:border-box!important;
  width:100%!important;max-width:100%!important;
  height:100dvh!important;max-height:100dvh!important;
  margin:0!important;padding:0!important;min-height:0!important;
  border:0!important;border-radius:0!important;
  background:#f1f6fc!important;box-shadow:none!important;
  display:flex!important;flex-direction:column!important;overflow:hidden!important;
  font-family:Inter,'Segoe UI',Arial,sans-serif!important;
 }
 #g88PaymentOverlay .g88pm-appbar{
  display:flex!important;flex:0 0 70px!important;
  align-items:center!important;justify-content:space-between!important;
  box-sizing:border-box!important;min-height:70px!important;
  padding:10px 19px!important;background:#031b30!important;
  color:#fff!important;
 }
 #g88PaymentOverlay .g88pm-wordmark{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-width:0;
 }
 #g88PaymentOverlay .g88pm-wordmark strong{
  font-size:22px!important;font-weight:900!important;letter-spacing:-.7px;
  line-height:1!important;font-style:italic;
 }
 #g88PaymentOverlay .g88pm-wordmark strong span{color:#2191ff!important}
 #g88PaymentOverlay .g88pm-wordmark small{
  font-size:9px!important;font-weight:700!important;letter-spacing:1px!important;color:#c7d9ed;
 }
 #g88PaymentOverlay .g88pm-avatar{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid #8fabca;color:#e6f3ff;
 }
 #g88PaymentOverlay .g88-v95-payment-head{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;
  flex:0 0 61px!important;min-height:61px!important;
  margin:0!important;padding:10px 14px!important;border:0!important;
  background:transparent!important;
 }
 #g88PaymentOverlay .g88-v95-payment-head strong{
  font-size:24px!important;line-height:1.2!important;font-weight:850!important;
  color:#0b2946!important;
 }
 #g88PaymentOverlay #g88PaymentBack{
  display:flex!important;align-items:center!important;justify-content:center!important;
  order:-1!important;width:auto!important;max-width:none!important;min-width:98px!important;
  height:43px!important;padding:7px 11px!important;
  margin:0!important;border:1px solid #bed8fa!important;border-radius:11px!important;
  background:#eaf3ff!important;color:#0968d8!important;
  font-size:13px!important;font-weight:800!important;white-space:nowrap!important;
 }
 #g88PaymentOverlay .g88-v95-payment-steps{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  flex:0 0 78px!important;gap:8px!important;width:100%!important;
  margin:0!important;padding:3px 18px 9px!important;
  min-height:78px!important;box-sizing:border-box!important;
 }
 #g88PaymentOverlay .g88pm-stage-name{
  font-size:12px!important;font-weight:750!important;color:#6d89a7!important;
 }
 #g88PaymentOverlay .g88pm-stage-steps{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
  width:100%!important;min-width:0!important;
 }
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-step{
  display:flex!important;flex-direction:row!important;gap:8px!important;align-items:center!important;
  flex:1 1 0!important;min-width:0!important;font-size:12px!important;
 }
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-step span:not(.g88-v95-number){
  display:flex;flex-direction:column;gap:2px;min-width:0;
 }
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-step strong{
  color:#0a62ca!important;font-weight:850!important;font-size:12px!important;
 }
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-step.done strong{color:#098450!important}
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-step small{
  color:#7e90a5!important;font-size:9px!important;line-height:1.2!important;
 }
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-number{
  flex:0 0 29px!important;display:grid!important;place-items:center!important;
  width:29px!important;height:29px!important;font-size:13px!important;border-radius:50%!important;
 }
 #g88PaymentOverlay .g88-v95-payment-steps .done .g88-v95-number{
  background:#0d9955!important;color:#fff!important;
 }
 #g88PaymentOverlay .g88-v95-payment-steps .active .g88-v95-number{
  background:#096ded!important;color:#fff!important;
 }
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-steps-line{
  flex:0 0 30px!important;width:30px!important;min-width:0!important;margin:0!important;
 }
 #g88PaymentOverlay .g88-v95-payment-summary{
  display:block!important;flex:0 0 auto!important;
  margin:1px 13px 10px!important;padding:12px 13px!important;
  min-height:0!important;border:1px solid #d6e5f5!important;
  border-radius:13px!important;background:#fff!important;
  box-shadow:0 1px 3px #133e6b0b!important;
 }
 /* Resumo cabe em uma linha por padrão. Toque para ver cliente, veículo e serviço. */
 #g88PaymentOverlay .g88pm-summary-toggle{
  display:flex!important;align-items:center!important;gap:10px!important;
  width:100%!important;min-height:43px!important;margin:0!important;padding:4px 2px!important;
  border:0!important;background:transparent!important;text-align:left!important;
  color:#0d2a47!important;cursor:pointer!important;
 }
 #g88PaymentOverlay .g88pm-summary-toggle strong{
  flex:1 1 auto!important;min-width:0!important;font-size:15px!important;font-weight:850!important;
 }
 #g88PaymentOverlay .g88pm-summary-amount{
  flex:0 0 auto!important;white-space:nowrap!important;color:#086ee7!important;
  font-size:17px!important;font-weight:900!important;font-variant-numeric:tabular-nums!important;
 }
 #g88PaymentOverlay .g88pm-summary-chevron{
  flex:0 0 auto!important;color:#1467bf!important;transition:transform .18s ease!important;
 }
 #g88PaymentOverlay .g88pm-summary-open .g88pm-summary-chevron{transform:rotate(180deg)!important}
 #g88PaymentOverlay .g88-v95-payment-summary:not(.g88pm-summary-open) .g88pm-summary-details{
  display:none!important;
 }
 #g88PaymentOverlay .g88pm-summary-open .g88pm-summary-details{
  display:block!important;margin-top:8px!important;padding-top:9px!important;
  border-top:1px solid #e2eaf5!important;
 }
 #g88PaymentOverlay .g88pm-summary-open .g88pm-summary-details .g88-v95-payment-summary-head{
  margin:0 0 8px!important;
 }
 #g88PaymentOverlay .g88pm-summary-open .g88pm-summary-details .g88-v95-payment-summary-head>strong{
  display:none!important;
 }
 #g88PaymentOverlay .g88pm-summary-toggle:focus-visible{
  outline:3px solid #2688e8!important;outline-offset:2px!important;border-radius:7px!important;
 }
 #g88PaymentOverlay .g88-v95-payment-summary-head{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  margin:0 0 9px!important;color:#0d2a47!important;font-size:15px!important;
 }
 #g88PaymentOverlay .g88-v95-payment-summary-head strong{font-size:15px!important;font-weight:850!important}
 #g88PaymentOverlay #g88V95EditSale{
  border:1px solid #cbdffd!important;background:#eaf3ff!important;
  color:#0768d6!important;min-height:30px!important;border-radius:8px!important;
  font-size:11px!important;font-weight:800!important;
 }
 #g88PaymentOverlay #g88V95PaymentSaleInfo{display:none!important}
 #g88PaymentOverlay .g88pm-summary-compact{display:block!important;min-width:0!important}
 #g88PaymentOverlay .g88pm-summary-compact>strong{
  display:block!important;color:#183753!important;font-size:12px!important;
  font-weight:850!important;margin-bottom:6px!important;overflow-wrap:anywhere!important;
 }
 #g88PaymentOverlay .g88pm-summary-bottom{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
  min-width:0!important;
 }
 #g88PaymentOverlay .g88pm-summary-bottom span{
  flex:1!important;min-width:0!important;font-size:11px!important;color:#7086a0!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
 }
 #g88PaymentOverlay .g88pm-summary-bottom b{
  flex:0 0 auto!important;font-size:18px!important;color:#086ee7!important;font-weight:900!important;
  font-variant-numeric:tabular-nums!important;
 }
 #g88PaymentOverlay #g88PaymentHost{
  flex:1 1 auto!important;display:block!important;min-height:0!important;
  width:100%!important;max-width:100%!important;overflow-y:auto!important;
  overflow-x:hidden!important;overscroll-behavior:contain!important;
  padding:0 4px 4px!important;box-sizing:border-box!important;
  -webkit-overflow-scrolling:touch;scrollbar-width:none!important;
 }
 #g88PaymentOverlay #g88PaymentHost::-webkit-scrollbar{display:none!important;width:0!important}
 #g88PaymentOverlay .g88-v95-payment-note{display:none!important}
 #g88PaymentOverlay .g88-v95-payment-actions{
  display:flex!important;flex-direction:row!important;justify-content:stretch!important;align-items:center!important;
  box-sizing:border-box!important;flex:0 0 75px!important;gap:9px!important;
  min-height:75px!important;max-height:75px!important;
  margin:0!important;padding:10px 13px calc(10px + env(safe-area-inset-bottom,0px))!important;
  border-top:1px solid #dae6f4!important;background:#fff!important;
 }
 #g88PaymentOverlay .g88-v95-payment-actions button{
  min-height:49px!important;height:49px!important;min-width:0!important;box-sizing:border-box!important;
  border-radius:11px!important;font-size:12px!important;font-weight:850!important;
  padding:8px 9px!important;white-space:nowrap!important;
 }
 #g88PaymentOverlay #g88V95PayBack{
  flex:0 0 39%!important;width:39%!important;max-width:39%!important;
  background:#eef5fc!important;color:#163e6c!important;
  border:1px solid #c8def5!important;
 }
 #g88PaymentOverlay #g88V95PayConfirm{
  flex:1!important;width:auto!important;max-width:none!important;
  background:#096ae8!important;color:#fff!important;
  border:1px solid #096ae8!important;
 }
 #g88PaymentOverlay #g88V95PayConfirm:hover{background:#0058cb!important}
 #g88PaymentOverlay .g88-v98-confirm-check{
  display:inline!important;border:0!important;background:none!important;
  color:#fff!important;width:auto!important;height:auto!important;
  font-size:17px!important;font-weight:850!important;
 }
 #g88PaymentOverlay button:focus-visible{outline:3px solid #4797ec!important;outline-offset:2px!important}
}
@media(max-width:365px){
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-step strong{font-size:11px!important}
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-step small{font-size:9px!important}
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-steps-line{width:15px!important;flex-basis:15px!important}
 #g88PaymentOverlay #g88V95PayBack{flex-basis:40%!important;width:40%!important;max-width:40%!important}
 #g88PaymentOverlay .g88-v95-payment-actions button{font-size:11px!important}
}


/* GARAGEM88 — versão implementável do desenho aprovado: vista real de 400×554.
   O miolo pode rolar; o rodapé fica visível, sem cobrir a segunda fileira. */
@media(max-width:600px){
 #g88PaymentOverlay .g88pm-appbar{
   flex:0 0 52px!important;min-height:52px!important;
   padding:6px 16px!important;
 }
 #g88PaymentOverlay .g88pm-wordmark strong{
   font-size:19px!important;letter-spacing:-.4px!important;
 }
 #g88PaymentOverlay .g88pm-wordmark small{
   font-size:8px!important;letter-spacing:.7px!important;
 }
 #g88PaymentOverlay .g88pm-avatar{width:30px!important;height:30px!important}
 #g88PaymentOverlay .g88pm-avatar svg{width:20px!important;height:20px!important}
 #g88PaymentOverlay .g88-v95-payment-head{
   flex:0 0 48px!important;min-height:48px!important;
   padding:4px 12px!important;gap:9px!important;
 }
 #g88PaymentOverlay .g88-v95-payment-head strong{
   font-size:21px!important;line-height:1.1!important;
 }
 #g88PaymentOverlay #g88PaymentBack{
   min-width:91px!important;width:91px!important;height:39px!important;
   padding:4px 8px!important;border-radius:9px!important;
   font-size:12px!important;
 }
 #g88PaymentOverlay .g88-v95-payment-steps{
   flex:0 0 53px!important;min-height:53px!important;
   padding:4px 16px 5px!important;margin:0!important;gap:0!important;
 }
 #g88PaymentOverlay .g88pm-stage-name{display:none!important}
 #g88PaymentOverlay .g88pm-stage-steps{height:44px!important;gap:5px!important}
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-number{
   flex-basis:27px!important;width:27px!important;height:27px!important;
 }
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-step{
   gap:5px!important;font-size:11px!important;
 }
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-step strong{
   font-size:11px!important;
 }
 #g88PaymentOverlay .g88-v95-payment-steps .g88-v95-steps-line{
   width:18px!important;flex-basis:18px!important;
 }
 #g88PaymentOverlay .g88-v95-payment-summary{
   padding:5px 12px!important;margin:2px 12px 8px!important;
   border-radius:11px!important;
 }
 #g88PaymentOverlay .g88pm-summary-toggle{
   min-height:39px!important;padding:3px 0!important;
 }
 #g88PaymentOverlay .g88pm-summary-toggle strong{
   font-size:13px!important;
 }
 #g88PaymentOverlay .g88pm-summary-amount{
   font-size:15px!important;
 }
 #g88PaymentOverlay #g88PaymentHost{
   flex:1 1 auto!important;min-height:0!important;
   padding:0 8px 9px!important;overflow-y:auto!important;overflow-x:hidden!important;
   scroll-padding-bottom:18px!important;-webkit-overflow-scrolling:touch!important;
   scrollbar-width:none!important;
 }
 #g88PaymentOverlay .g88-v95-payment-actions{
   flex:0 0 69px!important;min-height:69px!important;max-height:69px!important;
   padding:8px 12px max(8px,env(safe-area-inset-bottom,0px))!important;
 }
 #g88PaymentOverlay .g88-v95-payment-actions button{
   min-height:45px!important;height:45px!important;
   font-size:11.5px!important;line-height:1.15!important;
 }
 #g88PaymentOverlay #g88V95PayBack{flex-basis:40%!important;width:40%!important;max-width:40%!important}
 #g88PaymentOverlay .g88-v95-payment-frame{
   overscroll-behavior:contain!important;
 }
}
/* Teclados virtuais e janelas pequenas: nunca permitir rodapé invadir o conteúdo rolável. */
@media(max-width:600px) and (max-height:620px){
 #g88PaymentOverlay .g88-v95-payment-frame{
   height:100dvh!important;max-height:100dvh!important;
 }
 #g88PaymentOverlay .g88-v95-payment-summary{
   margin-bottom:5px!important;
 }
 #g88PaymentOverlay #g88PaymentHost{
   padding-bottom:15px!important;
 }
}