/* ============================= */
/* RESET */
/* ============================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Arial, Helvetica, sans-serif;
}

body{
background:#9fbddc;
color:#333;
}


/* ============================= */
/* CONTENEDOR PRINCIPAL */
/* ============================= */

.checkout{
max-width:1200px;
margin:30px auto;
display:flex;
gap:30px;
padding:20px;
}


/* ============================= */
/* LADO IZQUIERDO */
/* ============================= */

.checkout-left{
flex:2;
background:#cdceea;
padding:20px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);

display:flex;
flex-wrap:wrap;
justify-content:space-between;
}

.checkout-left h2{
width:100%;
margin-bottom:15px;
font-size:24px;
color:#222;
}


/* ============================= */
/* CAMPOS */
/* ============================= */

.field{
display:flex;
flex-direction:column;
margin-bottom:12px;
width:49%;
}

.field.full{
width:100%;
}

.field label{
font-size:13px;
margin-bottom:4px;
font-weight:600;
}

.field input,
.field select{
padding:8px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
transition:0.2s;
background:#f9f9f9;
}

.field input:focus,
.field select:focus{
border-color:#0d6efd;
outline:none;
background:#fff;
}


/* ============================= */
/* LADO DERECHO */
/* ============================= */

.checkout-right{
flex:1;
background:#fff;
padding:25px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
height:fit-content;
}

.checkout-right h3{
margin-bottom:18px;
font-size:20px;
}


/* ============================= */
/* PEDIDO */
/* ============================= */

.pedido{
border-bottom:1px solid #eee;
padding-bottom:12px;
margin-bottom:18px;
}

.pedido-row{
display:flex;
justify-content:space-between;
font-size:15px;
}


/* ============================= */
/* METODO PAGO */
/* ============================= */

.metodo-pago{
margin-bottom:18px;
}

.metodo-pago label{
font-weight:600;
display:block;
margin-bottom:10px;
}

.aviso-compra{
background:#fff3cd;
padding:14px;
border-radius:6px;
font-size:13px;
line-height:1.5;
border:1px solid #ffe69c;
}

.aviso-compra p{
margin-bottom:8px;
}


/* ============================= */
/* TERMINOS */
/* ============================= */

.terminos{
display:flex;
align-items:center;
gap:8px;
margin:15px 0;
font-size:13px;
}

.terminos a{
color:#0d6efd;
text-decoration:none;
}

.terminos a:hover{
text-decoration:underline;
}


/* ============================= */
/* BOTON PAGAR */
/* ============================= */

.btn-pagar{
width:100%;
padding:13px;
background:#28a745;
border:none;
border-radius:8px;
color:#fff;
font-size:16px;
font-weight:bold;
cursor:pointer;
transition:0.3s;
}

.btn-pagar:hover{
background:#218838;
}


/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width:900px){

.checkout{
flex-direction:column;
}

.field{
width:100%;
}

.checkout-left{
padding:18px;
}

.checkout-right{
padding:18px;
}

}

/* =========================
ANIMACIÓN PROCESANDO
========================= */

.procesando-overlay{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.procesando-box{
background:white;
padding:40px;
border-radius:10px;
text-align:center;
width:300px;
}

.loader{
width:60px;
height:60px;
border:6px solid #eee;
border-top:6px solid #28a745;
border-radius:50%;
animation:girar 1s linear infinite;
margin:auto;
}

@keyframes girar{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(360deg); }
}