/* ================================ REGISTRANDO ============================== */
section#registrando-page {  width: -webkit-fill-available; display: flex;padding: 12vh 0 0;}
section#registrando-page h1 {padding-bottom: var(--spac20); align-self: center; }
section#registrando-page .grid-container { grid-template-columns: 2fr 1fr;border-radius: var(--box-border-radius);overflow: hidden;background-color: var(--darkbg); border: 1px solid var(--border-color); gap: 0;}
section#registrando-page .payment {display: flex; background-color: var(--lightbg);border-right: 1px solid var(--border-color); padding: var(--spac12);}
section#registrando-page .dados-produto { padding: var(--spac12);}
section#registrando-page .dados-produto h4 { padding: var(--spac8) 0 0 0;}
section#registrando-page .dados-produto .dados-top p { padding: var(--spac8) 0 0 0;}

section#registrando-page .dados-produto ul.plano {display: flex; flex-direction: column; border-top: 1px solid var(--border-color);padding: var(--spac8) 0 var(--spac4) 0;}
section#registrando-page .dados-produto ul.plano {gap: var(--spac3);}
section#registrando-page .dados-produto ul.plano li {display: flex; gap: var(--spac3); align-items: center;}  
section#registrando-page .dados-produto ul.plano li i {background-color: var(--lightgreen);}
section#registrando-page .dados-produto ul.plano li p {color: var(--darkgreen);}


section#registrando-page .payment form {width: 100%;  gap: var(--spac8);}
section#registrando-page .payment form .flex-container {width: 100%; gap: 0; flex-direction: column; padding-bottom: 0; }
section#registrando-page .payment form .form_division {gap: 0;}


section#registrando-page .payment form .input_field input {border-radius: 0;border: 1px solid var(--border-color); background-color: var(--darkbg); } 
section#registrando-page .payment form .input_field select {border-radius: 0;border: 1px solid var(--border-color); background-color: var(--darkbg); padding: 0 var(--spac4) 0 var(--spac4);}

section#registrando-page .payment form .input_field select + label {margin-top: -8px; opacity: .6; font-size: 12px; font-weight: var(--font-medium); }


section#registrando-page .payment .input_field input:focus, 
section#registrando-page .payment .input_field input:autofill, 
section#registrando-page .payment .input_field input:active, 
section#registrando-page .payment .input_field input.filled,
section#registrando-page .payment .input_field select:focus, 
section#registrando-page .payment .input_field select:autofill, 
section#registrando-page .payment .input_field select:active, 
section#registrando-page .payment .input_field select.filled {background-color: var(--white); }


section#registrando-page .payment form .input_field.topleft input { border-top-left-radius: var(--spac2); }
section#registrando-page .payment form .input_field.topright input { border-top-right-radius: var(--spac2); }
section#registrando-page .payment form .input_field.bottomleft input { border-bottom-left-radius: var(--spac2); }
section#registrando-page .payment form .input_field.bottomright input { border-bottom-right-radius: var(--spac2); }
section#registrando-page .payment form .input_field.bottomright select { border-bottom-right-radius: var(--spac2); }
section#registrando-page .payment form .etapa2 { display: flex; flex-direction: column; gap: var(--spac6); padding-top:var(--spac6) ; }


section#registrando-page .payment form .new-switch { width: -webkit-fill-available; }
section#registrando-page .payment form .new-switch a { width: -webkit-fill-available; }
section#registrando-page .payment form .new-switch a i { background-color: var(--text); }
section#registrando-page .payment form .new-switch a.active i { background-color: var(--darkgreen); }

section#registrando-page .payment form .new-switch a.active .tag.green { background-color: var(--lightgreen); color: var(--white); }

section#registrando-page .payment #box-credit {flex-direction: column; gap: var(--spac6);}

section#registrando-page .payment #box-credit .gridexcep {display: grid;display: inline-grid;grid-template-columns: 1fr 1fr;}

section#registrando-page .payment #box-credit .gridexcep .gridexcep {grid-template-columns: 2fr 1fr;}


section#registrando-page .payment .input_field span.cards {display: flex;gap: var(--spac2);position: absolute; top: 13px; right: var(--spac4); pointer-events: none;}
section#registrando-page .payment .input_field span.cards img {width: 50px;}

section#registrando-page .payment #box-pix,
section#registrando-page .payment #box-boleto {flex-direction: column;  gap: var(--spac8); }
section#registrando-page .payment #box-pix img,
section#registrando-page .payment #box-boleto img {height: 50px; align-self: self-start;}






/* ================================ CONFIRMACAO DE PAGAMENTO ============================== */
section#confirma-pagamento {  width: -webkit-fill-available; display: flex;padding: 160px 0 0;}
section#confirma-pagamento h1 {padding-bottom: var(--spac20); align-self: center; }
section#confirma-pagamento .flex-container { flex-direction: column; border-radius: var(--box-border-radius);overflow: hidden;background-color: var(--darkbg); border: 1px solid var(--border-color); gap: 0;}
section#confirma-pagamento .confirma-compra { width: -webkit-fill-available;display: flex; flex-direction: column; background-color: var(--lightbg);border-bottom: 1px solid var(--border-color);gap: var(--spac10);}
section#confirma-pagamento .confirma-compra.card-compra { padding: var(--spac12);}

/* ========== PIX ========== */
section#confirma-pagamento .confirma-compra.pix-compra{ display: grid; grid-template-columns: 2fr 1fr;} 
section#confirma-pagamento .confirma-compra.pix-compra .infos-compra {flex-direction: column;}
section#confirma-pagamento .confirma-compra.pix-compra .infos-box { padding: var(--spac12);gap: var(--spac10); display: flex; flex-direction: column;}
section#confirma-pagamento .confirma-compra.pix-compra .pay-box { padding: var(--spac12); background-color: var(--white); border-left: 1px solid var(--border-color); display: flex; gap: var(--spac4); flex-direction: column;}


/* ========== BOLETO ========== */
section#confirma-pagamento .confirma-compra.boleto-compra{ display: grid; grid-template-columns: 2fr 1fr;} 
section#confirma-pagamento .confirma-compra.boleto-compra .infos-compra {flex-direction: column;}
section#confirma-pagamento .confirma-compra.boleto-compra .infos-box { padding: var(--spac12);gap: var(--spac10); display: flex; flex-direction: column;}
section#confirma-pagamento .confirma-compra.boleto-compra .pay-box { padding: var(--spac12); background-color: var(--white); border-left: 1px solid var(--border-color); display: flex; gap: var(--spac4); flex-direction: column;}
section#confirma-pagamento .confirma-compra.boleto-compra .pay-box img { width: 260px; align-self: center;}


section#confirma-pagamento .confirma-compra .infos-compra {display: flex; flex-direction: row; width: -webkit-fill-available; gap: var(--spac12);}
section#confirma-pagamento .confirma-compra .infos-compra ul {display: flex; flex-direction: column; width: -webkit-fill-available; gap: var(--spac2);}
section#confirma-pagamento .confirma-compra .infos-compra ul h4 {padding-bottom: var(--spac4);}
section#confirma-pagamento .confirma-compra .infos-compra ul li {display: flex; flex-direction: row; width: -webkit-fill-available; }
section#confirma-pagamento .confirma-compra .infos-compra ul li p {display: flex;width: -webkit-fill-available;}
section#confirma-pagamento .confirma-compra .infos-compra ul li h5 {display: flex;width: -webkit-fill-available;word-break: break-all;
     line-height: 1.4;}

section#confirma-pagamento .confirma-compra.card { padding: var(--spac12);}


section#confirma-pagamento .sistema-compra  {  height: 230px; overflow: hidden; position: relative;}
section#confirma-pagamento .sistema-compra h3 { align-self: center; padding: var(--spac12); max-width: 360px;}
section#confirma-pagamento .sistema-compra img { position: absolute; right: 0; bottom: -75px;}


section#registrando-page .validation { display: flex; gap: var(--spac4);    padding-top: var(--spac8);margin-top: var(--spac4);border-top: 1px solid var(--border-color);}
section#registrando-page .validation .content { display: flex; flex-direction: column; gap: var(--spac2);}
section#registrando-page .validation ul { display: flex; }
section#registrando-page .validation ul li { border-right: 1px solid var(--border-color); padding: 0 var(--spac4); color: var(--darkgreen);font-size: 14px; }
section#registrando-page .validation ul li:first-child {padding: 0 var(--spac4) 0 0; }
section#registrando-page .validation ul li:last-child { padding: 0 0 0 var(--spac4); border-right:0;}
section#registrando-page .validation img { display: flex; width: 75px; height: 77px;margin-top: -14px;}





@media (max-width: 1150px) {
     section#registrando-page {padding: 100px 0 0;}
     section#registrando-page .grid-container{grid-template-columns:1fr; }
     section#registrando-page .dados-produto ul.plano{display: none;}
     section#registrando-page .payment{padding: var(--spac6);}
     section#registrando-page .dados-produto{padding: var(--spac6);}
     section#registrando-page .payment form{gap: var(--spac4);}
     section#registrando-page .dados-produto h4{padding: var(--spac4) 0 0 0;}
     section#registrando-page .dados-produto .dados-top p { padding: var(--spac4) 0 0 0;}

     section#registrando-page .payment {border-right:0;border-bottom: 1px solid var(--border-color);}

     section#confirma-pagamento .confirma-compra{grid-template-columns:1fr !important}
     section#confirma-pagamento .confirma-compra .pay-box {border-left:0 !important;border-top: 1px solid var(--border-color) !important;}
     section#confirma-pagamento .confirma-compra .infos-box{padding: var(--spac6) !important}
     section#confirma-pagamento .confirma-compra .pay-box{padding-top: var(--spac6) !important}
     section#confirma-pagamento .confirma-compra .infos-box {gap: var(--spac6) !important;}
     section#confirma-pagamento .confirma-compra .infos-compra ul h4 { padding-bottom: var(--spac2); }
     section#confirma-pagamento .confirma-compra .infos-compra { gap: var(--spac6); }
     section#confirma-pagamento .confirma-compra .infos-compra {flex-direction: column;}

     section#confirma-pagamento .sistema-compra img {position: relative;right: 0;bottom: -25px;}
     section#confirma-pagamento .confirma-compra.card-compra {padding: var(--spac6);gap: var(--spac6);}
}
@media (max-width: 750px) {
     
     section#registrando-page .payment .new-switch a {padding: var(--spac3) 0; gap: var(--spac1);flex-direction: column;}
     section#registrando-page .payment .new-switch a i {display: none;}
     section#registrando-page .payment .input_field span.cards {display: none;}
     section#registrando-page .payment form .form_division {flex-direction: column; gap: var(--spac2);}
     section#registrando-page .payment form .flex-container{gap: var(--spac2);}

     section#registrando-page .payment form .input_field input{ border-radius: var(--spac2); }
     section#registrando-page .payment form .input_field select{ border-radius: var(--spac2); }
     section#registrando-page .payment #box-credit .gridexcep {grid-template-columns:1fr;gap: var(--spac2);}
     section#registrando-page .payment form .new-switch a .tag{font-size: 12px;}

     section#confirma-pagamento .sistema-compra{height: auto; flex-direction: column !important; align-items: end;}
     section#confirma-pagamento .sistema-compra h3 {align-self: start;padding: var(--spac6);}
     
     section#confirma-pagamento { padding: 85px 0 0;}

     section#registrando-page .validation { flex-direction: column;}

     section#registrando-page .validation ul { flex-direction: column; gap: var(--spac1); }
     section#registrando-page .validation ul li { border-right: 0; padding: 0; }
     section#registrando-page .validation ul li:last-child { padding: 0;  }

}