/* ==========================================================
   PAY ECTO — UI global do motorista v0.1.95
   Navegação fixa: INÍCIO | AVISOS | PERFIL
   Pagamento segue a identidade da tela inicial.
   ========================================================== */

.role-payer{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%
}

.role-payer .payer-global-svg{
    display:block!important;
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    min-height:18px!important;
    max-width:18px!important;
    max-height:18px!important;
    margin:0!important;
    padding:0!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important
}

/* Cabeçalho único das páginas internas do motorista */
.role-payer .payer-global-topbar{
    position:sticky;
    z-index:70;
    top:0;
    width:100%;
    height:66px;
    padding:
        env(safe-area-inset-top)
        14px
        0;
    box-sizing:content-box;
    display:grid;
    grid-template-columns:42px 1fr 42px;
    align-items:center;
    color:#fff;
    background:
        radial-gradient(circle at 65% 0,rgba(19,108,240,.25),transparent 42%),
        linear-gradient(135deg,#03142d,#061b39 62%,#03132b);
    box-shadow:0 5px 18px rgba(3,20,45,.13)
}

.role-payer .payer-global-back,
.role-payer .payer-global-logout{
    width:40px;
    height:40px;
    padding:0;
    border:0;
    border-radius:11px;
    display:grid;
    place-items:center;
    color:#fff;
    background:rgba(255,255,255,.045);
    text-decoration:none;
    cursor:pointer
}

.role-payer .payer-global-brand{
    justify-self:center;
    display:flex;
    align-items:center;
    gap:6px;
    color:#fff;
    text-decoration:none;
    font-size:22px;
    line-height:1;
    font-style:italic;
    font-weight:900;
    letter-spacing:-.8px
}

.role-payer .payer-global-brand strong{
    color:#fff
}

.role-payer .payer-global-brand em{
    color:#1475ff;
    font-style:italic
}

.role-payer .payer-global-brand-mark{
    position:relative;
    display:block;
    width:22px;
    height:27px;
    min-width:22px
}

.role-payer .payer-global-brand-mark i,
.role-payer .payer-global-brand-mark b{
    position:absolute;
    display:block;
    clip-path:polygon(0 0,100% 50%,0 100%)
}

.role-payer .payer-global-brand-mark i{
    inset:0 5px 0 0;
    background:#fff
}

.role-payer .payer-global-brand-mark b{
    width:17px;
    height:17px;
    left:6px;
    bottom:0;
    background:#0a66ee
}

/* Dashboard já possui o cabeçalho grande próprio. */
.role-payer.payer-home-layout .payer-global-topbar,
.role-payer.payer-home-layout .payer-global-page-title{
    display:none!important
}

.role-payer .payer-global-content{
    width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    padding:
        15px
        14px
        calc(90px + env(safe-area-inset-bottom));
    box-sizing:border-box;
    background:#f8f9fc
}

.role-payer.payer-home-layout .payer-global-content{
    max-width:none;
    margin:0;
    padding:0 0 calc(86px + env(safe-area-inset-bottom));
    background:transparent
}

.role-payer .payer-global-page-title{
    margin:0 0 11px;
    padding:0 2px
}

.role-payer .payer-global-page-title h1{
    margin:0;
    color:#101d35;
    font-size:20px;
    line-height:1.15;
    font-weight:900
}

/* Barra inferior global: exatamente 3 opções */
.role-payer .payer-global-bottom-nav{
    position:fixed;
    z-index:95;
    left:50%;
    bottom:max(7px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    width:min(calc(100% - 18px),414px);
    height:64px;
    min-height:64px;
    max-height:64px;
    padding:6px;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    overflow:hidden;
    border-radius:16px;
    background:linear-gradient(135deg,#061a39,#03142c);
    box-shadow:
        0 10px 28px rgba(3,21,46,.26),
        0 2px 7px rgba(3,21,46,.1)
}

.role-payer .payer-global-bottom-nav>a{
    min-width:0;
    height:52px;
    border-radius:11px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:#fff;
    text-decoration:none
}

.role-payer .payer-global-bottom-nav>a.active{
    background:linear-gradient(135deg,#0763e9,#0b79ff);
    box-shadow:0 5px 12px rgba(0,91,221,.25)
}

.role-payer .payer-global-nav-icon{
    width:20px;
    height:20px;
    min-width:20px;
    min-height:20px;
    max-width:20px;
    max-height:20px;
    display:grid;
    place-items:center;
    overflow:hidden
}

.role-payer .payer-global-nav-icon .payer-global-svg{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    min-height:18px!important;
    max-width:18px!important;
    max-height:18px!important
}

.role-payer .payer-global-bottom-nav strong{
    color:#fff;
    font-size:8.5px;
    line-height:1;
    font-weight:700;
    letter-spacing:.15px
}

/* Layout geral das páginas internas */
.role-payer:not(.payer-home-layout) .card{
    margin:0 0 11px;
    padding:15px;
    border:1px solid #edf0f4;
    border-radius:15px;
    background:#fff;
    box-shadow:0 5px 15px rgba(14,33,60,.05)
}

.role-payer:not(.payer-home-layout) .card h2{
    margin:0 0 11px;
    color:#111e35;
    font-size:15px;
    line-height:1.2
}

.role-payer:not(.payer-home-layout) .btn{
    min-height:40px;
    padding:9px 13px;
    box-sizing:border-box;
    border-radius:9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#0a68ef;
    color:#fff;
    font-size:11px;
    font-weight:800;
    text-decoration:none
}

.role-payer:not(.payer-home-layout) .btn.btn2,
.role-payer:not(.payer-home-layout) .btn.secondary{
    background:#fff;
    color:#17304f;
    border:1px solid #d9e0ea
}

.role-payer:not(.payer-home-layout) .field label{
    color:#334259;
    font-size:10px;
    font-weight:800
}

.role-payer:not(.payer-home-layout) input,
.role-payer:not(.payer-home-layout) textarea,
.role-payer:not(.payer-home-layout) select{
    border-radius:9px;
    border:1px solid #d9e1eb;
    background:#fff
}

.role-payer:not(.payer-home-layout) .okbox,
.role-payer:not(.payer-home-layout) .alert{
    border-radius:10px;
    font-size:10px;
    line-height:1.4
}

/* ==========================================================
   PAGAMENTO — mesmo idioma visual da página inicial
   ========================================================== */
.role-payer.payer-payment-page{
    background:#f8f9fc
}

.role-payer.payer-payment-page .payer-global-content{
    padding-top:12px
}

.role-payer.payer-payment-page .payer-global-page-title h1{
    font-size:18px
}

/* Primeiro card vira o "card principal" escuro da home. */
.role-payer.payer-payment-page .card:first-of-type{
    position:relative;
    overflow:hidden;
    color:#fff;
    border:0;
    background:
        radial-gradient(circle at 85% 10%,rgba(13,105,238,.20),transparent 34%),
        linear-gradient(135deg,#061a39,#03142c);
    box-shadow:0 9px 23px rgba(3,23,52,.15)
}

.role-payer.payer-payment-page .card:first-of-type h2{
    color:#fff;
    font-size:15px
}

.role-payer.payer-payment-page .card:first-of-type p{
    color:#d9e2ef
}

.role-payer.payer-payment-page .card:first-of-type .muted{
    color:#aebbd0!important
}

.role-payer.payer-payment-page .payment-summary{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:11px 0
}

.role-payer.payer-payment-page .payment-summary>div{
    min-width:0;
    padding:10px;
    border-radius:10px;
    background:rgba(255,255,255,.055)
}

.role-payer.payer-payment-page .payment-summary .muted{
    display:block;
    margin-bottom:4px;
    font-size:8.5px
}

.role-payer.payer-payment-page .payment-summary strong{
    display:block;
    color:inherit;
    font-size:12px;
    line-height:1.15;
    word-break:break-word
}

.role-payer.payer-payment-page .card:first-of-type .payment-total{
    color:#fff!important;
    font-size:23px!important;
    line-height:1!important;
    font-weight:900
}

.role-payer.payer-payment-page .card:first-of-type .success{
    color:#55e79b!important
}

/* Segundo card: escolha 100%/50% e demais ações */
.role-payer.payer-payment-page .card:nth-of-type(n+2){
    border-radius:15px;
    background:#fff
}

.role-payer.payer-payment-page .card:nth-of-type(n+2) h2{
    color:#111e35
}

.role-payer.payer-payment-page .card:nth-of-type(n+2) .muted{
    color:#69768a
}

.role-payer.payer-payment-page .card:nth-of-type(n+2) .btn{
    flex:1 1 130px
}

/* QR: mantém grande o suficiente para leitura, sem extrapolar tela. */
.role-payer.payer-payment-page .pix-card,
.role-payer.payer-payment-page [id$="-pix-area"]{
    width:100%!important;
    max-width:340px!important;
    margin:12px auto!important;
    padding:12px!important;
    box-sizing:border-box!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#17243b!important;
    text-align:center!important
}

.role-payer.payer-payment-page img.pix,
.role-payer.payer-payment-page [id$="-pix-area"] img{
    display:block!important;
    width:min(230px,100%)!important;
    max-width:230px!important;
    height:auto!important;
    margin:10px auto!important;
    padding:7px!important;
    box-sizing:border-box!important;
    border:1px solid #e5eaf1!important;
    border-radius:10px!important;
    background:#fff!important
}

.role-payer.payer-payment-page .pix-title{
    color:#101d35!important;
    font-size:13px!important;
    font-weight:900!important
}

.role-payer.payer-payment-page .pix-copy-field{
    text-align:left!important
}

.role-payer.payer-payment-page textarea{
    width:100%;
    min-height:92px;
    box-sizing:border-box;
    font-size:9px
}

.role-payer.payer-payment-page .pay-wait{
    margin:0 0 11px;
    padding:10px;
    border-radius:10px;
    font-size:10px
}

/* Perfil/Caução: tabelas não estouram a tela */
.role-payer .table-wrap{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch
}

.role-payer table{
    font-size:10px
}

.role-payer .profile-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:11px
}

@media(max-width:360px){
    .role-payer .payer-global-content{
        padding-left:10px;
        padding-right:10px
    }

    .role-payer.payer-payment-page .payment-summary{
        gap:7px
    }

    .role-payer.payer-payment-page .card:first-of-type .payment-total{
        font-size:21px!important
    }
}

/* ==========================================================
   PAY ECTO v0.1.96 — barra inferior realmente fixa
   Evita a navegação acompanhar a rolagem no Perfil/WebView.
   ========================================================== */

html:has(body.role-payer),
body.role-payer{
    min-height:100%!important;
    overscroll-behavior-y:auto!important
}

body.role-payer{
    position:static!important;
    transform:none!important;
    perspective:none!important;
    filter:none!important
}

.role-payer .payer-global-content{
    transform:none!important;
    perspective:none!important;
    filter:none!important;
    overflow:visible!important
}

.role-payer .payer-global-bottom-nav{
    position:fixed!important;
    z-index:2147483000!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(7px + env(safe-area-inset-bottom))!important;
    transform:translate3d(-50%,0,0)!important;
    -webkit-transform:translate3d(-50%,0,0)!important;
    margin:0!important;
    will-change:transform!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    contain:layout paint!important
}

/* Garante espaço para o conteúdo não passar por baixo do menu. */
.role-payer .payer-global-content{
    padding-bottom:calc(92px + env(safe-area-inset-bottom))!important
}

/* No Dashboard, preserva o espaçamento específico sem duplicar menu. */
.role-payer.payer-home-layout .payer-global-content{
    padding-bottom:calc(92px + env(safe-area-inset-bottom))!important
}

/* Perfil e demais páginas: impede qualquer container ancestral de
   transformar o "fixed" em posição relativa ao conteúdo rolável. */
.role-payer .card,
.role-payer .profile-grid,
.role-payer .table-wrap{
    transform:none!important;
    perspective:none!important
}


/* ==========================================================
   v0.1.116 — camada fixa real da navegação PAYER
   Mantém INÍCIO / AVISOS / CARRO fora de qualquer scroll.
   ========================================================== */

html:has(body.role-payer),
body.role-payer{
    min-height:100%!important;
    overflow-x:hidden!important
}

body.role-payer{
    transform:none!important;
    perspective:none!important;
    filter:none!important
}

/* Camada fixa que pertence diretamente ao body. */
.role-payer .payer-global-bottom-layer{
    position:fixed!important;
    z-index:2147483000!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    height:calc(78px + env(safe-area-inset-bottom))!important;
    padding:
        7px
        9px
        env(safe-area-inset-bottom)!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    pointer-events:none!important;
    transform:none!important;
    perspective:none!important;
    filter:none!important;
    overflow:visible!important
}

/* Dentro da camada, o menu não precisa mais ser position:fixed. */
.role-payer .payer-global-bottom-layer .payer-global-bottom-nav{
    position:relative!important;
    z-index:1!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    -webkit-transform:none!important;
    width:min(100%,414px)!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    margin:0!important;
    pointer-events:auto!important;
    will-change:auto!important;
    backface-visibility:visible!important;
    -webkit-backface-visibility:visible!important;
    contain:none!important
}

/* Espaço real para o conteúdo nunca entrar por baixo da barra. */
.role-payer .payer-global-content{
    padding-bottom:
        calc(96px + env(safe-area-inset-bottom))!important
}

.role-payer.payer-home-layout .payer-global-content{
    padding-bottom:
        calc(96px + env(safe-area-inset-bottom))!important
}

/* Página CARRO: nenhum bloco pode criar um novo contexto para a barra. */
.role-payer .payer-car-page,
.role-payer .payer-car-hero,
.role-payer .payer-car-grid,
.role-payer .payer-car-card{
    transform:none!important;
    perspective:none!important;
    filter:none!important
}


/* ==========================================================
   v0.1.118 — rolagem normal da página + menu sempre fixo
   ========================================================== */

html:has(body.role-payer),
html,
body.role-payer{
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important
}

body.role-payer{
    position:static!important;
    top:auto!important;
    bottom:auto!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y pinch-zoom!important;
    transform:none!important;
    perspective:none!important;
    filter:none!important
}

/* O conteúdo é quem rola normalmente. */
.role-payer .payer-global-content{
    position:relative!important;
    height:auto!important;
    max-height:none!important;
    min-height:100vh!important;
    overflow:visible!important;
    overflow-y:visible!important;
    touch-action:pan-y!important
}

.role-payer .payer-car-page{
    position:relative!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    touch-action:pan-y!important
}

/* Somente esta camada fica parada no rodapé. */
.role-payer .payer-global-bottom-layer{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    z-index:2147483000!important;
    transform:none!important;
    pointer-events:none!important
}

.role-payer .payer-global-bottom-layer .payer-global-bottom-nav{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    pointer-events:auto!important
}