:root{



--bg-main:#0d0f14;

--bg-card:#171a22;

--bg-card-opacity:#171a22a8;

--border:#242833;



--text-primary:#ffffff;

--text-secondary:#9aa3b2;



--accent:#ff2d2d;



--radius-md:10px;

--radius-lg:14px;



--transition:.25s cubic-bezier(.4,0,.2,1);



--shadow-card:0 10px 30px rgba(0,0,0,.35);



}



/* RESET */



*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{

position: relative;

background:var(--bg-main);

color:var(--text-primary);



font-family: 'Open Sans', sans-serif;



display:flex;

align-items:center;

justify-content:center;



min-height:100vh;

padding:20px;

position:relative;

margin-bottom: 10vw;



}



body main {

    overflow: hidden;

}



body::before{



content:"";

position:absolute;

inset:0;

background-image:url(../_assets/imagens/auth/01.jpg);

background-size:100% auto;

background-repeat:no-repeat;

background-position:center top;

filter:grayscale(1) brightness(0.2);

z-index:-1;



}



body::after{



content:"";

position:absolute;

inset:0;

background:radial-gradient(

circle,

rgba(0,0,0,0) 35%,

rgba(0,0,0,0.24) 68%,

rgba(0, 0, 0, 0.767) 100%

);

z-index:-1;



}



body.with-header{



flex-direction:column;

align-items:center;

justify-content:flex-start;

padding-top:0;

min-height: 100vh;



}







/* CONTAINER */



.auth-container{



width:100%;

max-width:420px;



background:var(--bg-card-opacity);



border:1px solid var(--border);



border-radius:var(--radius-lg);



padding:40px;



box-shadow:var(--shadow-card);



text-align:center;



margin-bottom: 5vw;

margin-top: 2vw;



}





/* LOGO */



.auth-logo{



height:40px;



margin-bottom:25px;



}





/* TITLES */



.auth-title{



font-size:22px;



font-weight:600;



margin-bottom:10px;



}



.auth-subtitle{



font-size:14px;



color:var(--text-secondary);



margin-bottom:30px;



}





/* INPUT */



.auth-input{



width:100%;



padding:12px 14px;



margin-bottom:15px;



border-radius:var(--radius-md);



border:1px solid var(--border);



background:#12151c;



color:var(--text-primary);



font-size:14px;



}



.code-inputs{



display:grid;

grid-template-columns:repeat(6, minmax(0, 1fr));

gap:10px;

margin-bottom:15px;



}



.code-input{



width:100%;

height:52px;

border-radius:var(--radius-md);

border:1px solid var(--border);

background:#12151c;

color:var(--text-primary);

font-size:22px;

font-weight:600;

text-align:center;

outline:none;

transition:border-color var(--transition), box-shadow var(--transition);



}



.code-input:focus{



border-color:var(--accent);

box-shadow:0 0 0 3px rgba(255,45,45,.15);



}





/* BUTTON */



.auth-button{



width:100%;



padding:13px;



border:none;



border-radius:var(--radius-md);



background:var(--accent);



color:white;



font-weight:600;



cursor:pointer;



transition:var(--transition);



}



.auth-button:hover{



opacity:.9;



}





/* METHOD BUTTON */



.method{



display:flex;

align-items:center;

gap:12px;



padding:14px;



border-radius:var(--radius-md);



border:1px solid var(--border);



margin-bottom:12px;



cursor:pointer;



transition:var(--transition);



}



.method:hover{



background:#1e222c;



}



.method-icon{



font-size:22px;



color:var(--accent);



}



.method-text{



text-align:left;



}



.method-text strong{



display:block;



font-size:14px;



}



.method-text span{



font-size:12px;



color:var(--text-secondary);



}



/* ========================= */

/* FORM LAYOUT (REGISTER) */

/* ========================= */



.auth-form{



display:flex;

flex-direction:column;



gap:18px;



width:100%;



}





/* ROW */



.auth-row{



display:flex;



gap:14px;



width:100%;



}





/* FIELD */



.auth-field{



flex:1;



display:flex;



flex-direction:column;



}



.auth-field.large{



flex:2;



}





/* LABEL */



.auth-label{



font-size:13px;



color:var(--text-secondary);



margin-bottom:6px;



}





/* INPUT / SELECT */



.auth-input{



width:100%;



padding:12px 14px;



border-radius:var(--radius-md);



border:1px solid var(--border);



background:#12151c;



color:var(--text-primary);



font-size:14px;



}





/* SELECT FIX */



select.auth-input{



appearance:none;



}







/* ================= REGISTER PAGE ================= */



.register-main{



width:100%;

display:flex;

justify-content:center;

align-items:stretch;

margin-bottom: 5vw;



}



.register-section{



width:100%;

max-width:1200px;

min-height:100%;



background:var(--bg-card-opacity);



border:1px solid var(--border);



border-radius:var(--radius-lg);



padding:40px;



margin-top:40px;



box-shadow:var(--shadow-card);



}



/* TITLES */



.register-title{



font-size:26px;

font-weight:600;



text-align:center;



margin-bottom:6px;



}



.register-subtitle{



text-align:center;



color:var(--text-secondary);



margin-bottom:30px;



}



/* BACK */



.register-back{



display:flex;

align-items:center;

gap:6px;



font-size:14px;



color:var(--text-secondary);



margin-bottom:20px;



text-decoration:none;



}



.register-back:hover{

color:white;

}



/* PROGRESS */



.register-progress{



display:flex;

gap:10px;



margin-bottom:30px;



}



.progress-step{



flex:1;



height:6px;



border-radius:6px;



background:#2a2f3b;



}



.progress-step.active{



background:var(--accent);



}



/* FORM */



.register-form{



display:flex;

flex-direction:column;

gap:30px;



}



/* BOX */



.register-box{



display:flex;

flex-direction:column;

gap:18px;





}



.register-box-title{



font-size:18px;

font-weight:600;



}



/* ROW */



.register-row{



display:flex;

gap:14px;



}



/* FIELD */



.register-field{



flex:1;

display:flex;

flex-direction:column;



}



.register-field.large{

flex:2;

}



.register-field label{



font-size:13px;

color:var(--text-secondary);



margin-bottom:6px;



}



/* BUTTONS */



.register-buttons{



display:flex;

justify-content:space-between;

gap:12px;



margin-top:10px;



}



.register-back-btn{



background:#2a2f3b;

color:white;



border:none;



padding:13px 20px;



border-radius:var(--radius-md);



cursor:pointer;



}



.register-back-btn:hover{

background:#353a46;

}



/* ================= PAYMENT ================= */



.payment-layout{



display:grid;

grid-template-columns:280px 1fr;



gap:28px;



margin-top:25px;



align-items:start;



}





/* LEFT */



.payment-methods{



display:flex;

flex-direction:column;



gap:12px;



}





/* BUTTON */



.method-btn{



display:flex;



align-items:center;



gap:12px;



padding:16px;



border-radius:12px;



border:1px solid var(--border);



background:#12151c;



cursor:pointer;



color:white;



transition:var(--transition);



font-size:14px;



}



.method-btn:hover{



background:#1e222c;



}



.method-btn.active{



border-color:var(--accent);



background:#1e222c;



}





/* ARROW */



.method-arrow{



margin-left:auto;



color:var(--text-secondary);



}







/* RIGHT SIDE */



.payment-area{



background:var(--bg-card-opacity);



border:1px solid var(--border);



border-radius:var(--radius-lg);



padding:26px;



min-height:260px;



display:flex;

flex-direction:column;



}





/* MESSAGE */



.payment-message{



color:var(--text-secondary);



margin-bottom:10px;



}



.payment-security-badge{



display:flex;

align-items:flex-start;

gap:12px;

padding:14px 16px;

margin-top: 18px;

margin-bottom:18px;

border:1px solid rgba(255,255,255,.08);

border-radius:var(--radius-md);

background:rgba(255,255,255,.04);

text-align:left;



}



.payment-security-badge .material-symbols-outlined{



color:#7ddc8b;

font-size:24px;



}



.payment-security-badge strong{



display:block;

font-size:14px;

margin-bottom:4px;



}



.payment-security-badge p{



font-size:12px;

color:var(--text-secondary);



}







/* BOX */



.payment-box{



display:flex;



flex-direction:column;



gap:16px;



margin-top:10px;



}







/* QR */



.pix-qrcode{



max-width:220px;



margin:15px auto;



border-radius:10px;



}



#pix_payment {

    display: none;

}



#card_form {

    display: flex;

}



#voucher_payment {

    display: none;

}





/* INPUT OVERRIDE (MercadoPago) */



#form-checkout__cardNumber,

#form-checkout__expirationDate,

#form-checkout__securityCode{



height:44px;



display:flex;

align-items:center;



padding:10px;



}







/* ================= TERMS ================= */



.terms-box{



max-height:380px;



overflow-y:auto;



text-align:left;



background:#12151c;



border:1px solid var(--border);



border-radius:var(--radius-md);



padding:20px;



margin-bottom:25px;



}



.terms-box::-webkit-scrollbar{



width:10px;



}



.terms-box::-webkit-scrollbar-track{



background:#0f1218;

border-radius:999px;



}



.terms-box::-webkit-scrollbar-thumb{



background:linear-gradient(180deg, #7a1111 0%, var(--accent) 100%);

border-radius:999px;

border:2px solid #0f1218;



}



.terms-box{



scrollbar-width:thin;

scrollbar-color:var(--accent) #0f1218;



}



.terms-box h3{



font-size:15px;



margin-top:15px;



margin-bottom:6px;



}



.terms-box p{



font-size:14px;



line-height:1.6;



color:var(--text-secondary);



}



.terms-check{



display:flex;

align-items:center;

gap:10px;

margin-bottom:18px;

font-size:14px;

color:var(--text-secondary);

cursor:pointer;



}



.terms-check input{



width:18px;

height:18px;

accent-color:var(--accent);

cursor:pointer;



}



.auth-button:disabled{



opacity:.55;

cursor:not-allowed;



}



/* ================= WARNING ================= */



.warning-progress{



opacity:.75;



}



.warning-box{



align-items:center;

text-align:center;



padding:28px;



background:#12151c;

border:1px solid var(--border);

border-radius:var(--radius-lg);



}



.warning-icon{



width:68px;

height:68px;



display:flex;

align-items:center;

justify-content:center;



border-radius:999px;

background:rgba(255,45,45,.12);

border:1px solid rgba(255,45,45,.22);



}



.warning-icon .material-symbols-outlined{



font-size:32px;

color:var(--accent);



}



.warning-text{



max-width:680px;

font-size:15px;

line-height:1.7;

color:var(--text-secondary);



}



.warning-link-btn{



display:flex;

align-items:center;

justify-content:center;

text-decoration:none;



}



/* Payment - VALOR */

.order-summary { margin-bottom: 24px; }



.order-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 0;

}



.order-item-name {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 15px;

}



.order-item-price {

    font-weight: 500;

    font-size: 15px;

}



.order-divider {

    border-top: 1px solid var(--color-border-tertiary);

    margin: 8px 0;

}



.order-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 14px;

    color: var(--color-text-secondary);

}



.order-total #order-total-value {

    font-size: 22px;

    font-weight: 600;

    color: var(--color-text-primary);

    letter-spacing: -0.5px;

}



/* ============================================================

   MOBILE — @media screen (768px e abaixo)

   ============================================================ */



@media screen and (max-width: 768px) {



    body {

        padding: 0;

        background-size: auto 100%;

    }



    body.with-header {

        padding-top: 0;

    }



    /* Formulário de cadastro principal */

    .register-main {

        padding: 0 4vw;

        margin-bottom: 12vw;

        width: 100%;

    }



    .register-section {

        padding: 22px 16px;

        margin-top: 76px; /* garante que não fique atrás do header sticky */

        border-radius: 14px;

        max-width: 100%;

    }



    .register-title {

        font-size: 22px;

    }



    .register-subtitle {

        font-size: 14px;

        margin-bottom: 20px;

    }



    .register-progress {

        gap: 6px;

        margin-bottom: 22px;

    }



    .progress-step {

        height: 5px;

    }



    /* Campos lado a lado → coluna */

    .register-row,

    .auth-row {

        flex-direction: column;

        gap: 0;

    }



    /* Botões de ação → coluna invertida */

    .register-buttons {

        flex-direction: column-reverse;

        gap: 10px;

        margin-top: 14px;

    }



    .register-back-btn,

    .auth-button {

        width: 100%;

        padding: 13px;

    }



    /* Inputs */

    .auth-input {

        font-size: 16px; /* evita zoom automático no iOS */

    }



    /* Auth container (páginas standalone: login, reset) */

    .auth-container {

        padding: 28px 18px;

        border-radius: 14px;

        max-width: 100%;

        margin: 80px auto 20px;

    }



    /* Código de verificação */

    .code-inputs {

        gap: 7px;

    }



    .code-input {

        height: 48px;

        font-size: 1.4rem;

        border-radius: 8px;

    }



    /* Pagamento: layout em coluna */

    .payment-layout {

        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 16px;

    }



    /* Métodos de pagamento: botões em linha */

    .payment-methods {

        flex-direction: row;

        flex-wrap: wrap;

        gap: 10px;

    }



    .method-btn {

        flex: 1 1 calc(50% - 5px);

        flex-direction: column;

        gap: 6px;

        text-align: center;

        padding: 12px 8px;

        font-size: 13px;

        justify-content: center;

    }



    .method-arrow {

        display: none; /* esconde a seta em layout coluna */

    }



    /* Área de pagamento */

    .payment-area {

        padding: 18px 14px;

        min-height: auto;

    }



    .payment-message {

        font-size: 14px;

    }



    .payment-security-badge {

        margin-top: 10px;

        margin-bottom: 10px;

        padding: 12px 14px;

    }



    /* Resumo do pedido */

    .order-summary {

        margin-bottom: 16px;

    }



    /* Termos */

    .terms-box {

        max-height: 260px;

        padding: 16px;

    }



    .terms-check {

        font-size: 13px;

    }



    /* Warning */

    .warning-box {

        padding: 22px 16px;

    }



    /* PIX QR */

    .pix-qrcode {

        max-width: 180px;

    }

}



/* RESPONSIVE (legado — mantido para compatibilidade) */



@media(max-width:500px){



.auth-container{



padding:30px 25px;



}



.auth-row{



flex-direction:column;



}



.register-section{



padding:28px;



}



.register-row{



flex-direction:column;



}



.register-buttons{



flex-direction:column-reverse;



}



.warning-box{



padding:22px 18px;



}



.payment-layout{



grid-template-columns:1fr;



}



.payment-methods{



flex-direction:row;



flex-wrap:wrap;



}



.method-btn{



flex:1;



}



.payment-area{



margin-top:10px;



}



}