/* =====================================
        CARRITO OXIUM PREMIUM
===================================== */


/* Fuente */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700&display=swap');



body{

    background:#070707;

    color:#fff;

    font-family:'Inter',sans-serif;

}



/* CONTENEDOR */


.carrito-container{

    max-width:1000px;

    margin:60px auto;

    padding:20px;


}



/* TITULO */


.carrito-container h1{


    text-align:center;


    font-family:'Montserrat',sans-serif;


    font-size:36px;


    font-weight:600;


    letter-spacing:.5px;


    margin-bottom:45px;


    color:#f5f5f5;


}





/* ITEM */


.carrito-item{


    display:flex;


    align-items:center;


    gap:25px;



    background:#101010;



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



    border-radius:18px;



    padding:22px;



    margin-bottom:18px;



    transition:.25s ease;


}



.carrito-item:hover{


    border-color:rgba(88,214,141,.35);


}




/* IMAGEN */


.carrito-item img{


    width:95px;


    height:95px;


    object-fit:contain;


    background:#050505;


    border-radius:16px;


}




/* INFO */


.carrito-info{


    flex:1;


}



.carrito-info h3{


    margin:0 0 12px;


    font-size:18px;


    font-weight:600;


    color:white;


}




.precio-unitario{


    color:#58d68d;


    font-size:16px;


    font-weight:600;


}




.subtotal{


    color:#aaa;


    margin-top:12px;


    font-size:14px;


}





/* CANTIDAD */


.cantidad-box{


    display:flex;


    align-items:center;


    gap:10px;


    margin-top:15px;


}



.cantidad-box button{


    width:34px;


    height:34px;


    border-radius:10px;


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


    background:#151515;


    color:white;


    font-size:20px;


    cursor:pointer;


}




.cantidad-box input{


    width:55px;


    height:34px;


    text-align:center;


    background:#0b0b0b;


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


    border-radius:10px;


    color:white;


}




/* TOTAL */


.carrito-total{


    margin-top:35px;


    background:#101010;


    border-radius:20px;


    padding:25px;


    text-align:center;


    border:1px solid rgba(88,214,141,.2);


}



.carrito-total h2{


    margin:0;


    font-size:28px;


    font-weight:600;


    color:#58d68d;


}





/* BOTONES */


.carrito-actions{


    display:flex;


    justify-content:center;


    gap:15px;


    flex-wrap:wrap;


    margin-top:35px;


}




.carrito-actions a{


    padding:13px 26px;


    border-radius:14px;


    text-decoration:none;


    font-size:13px;


    font-weight:600;


    letter-spacing:.5px;


    transition:.25s;


}



/* seguir */


.btn-secundario{


    background:#151515;


    color:#ddd;


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


}


.btn-secundario:hover{


    border-color:#58d68d;


    color:white;


}





/* vaciar */


.btn-danger{


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


    color:#ff7a7a;


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


}



.btn-danger:hover{


    background:#ff4d4d;


    color:white;


}





/* WHATSAPP */


.btn-finalizar{


    background:#58d68d;


    color:#071007;


    box-shadow:0 10px 25px rgba(88,214,141,.25);


}



.btn-finalizar:hover{


    transform:translateY(-2px);


}





/* ELIMINAR */


.btn-eliminar{


    padding:9px 16px;


    border-radius:12px;


    background:rgba(255,80,80,.1);


    color:#ff7777;


    text-decoration:none;


    font-size:13px;


}





.btn-eliminar:hover{


    background:#ff5555;


    color:white;


}




/* CARRITO VACIO */


.carrito-vacio{


    background:#101010;


    padding:50px;


    border-radius:25px;


    text-align:center;


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


}



.carrito-vacio h2{


    font-weight:500;


    color:#aaa;


}



.carrito-vacio a{


    display:inline-block;


    margin-top:20px;


    padding:13px 25px;


    border-radius:14px;


    background:#58d68d;


    color:#071007;


    text-decoration:none;


    font-weight:600;


}






/* MOBILE */


@media(max-width:700px){



.carrito-item{


    flex-direction:column;


    text-align:center;


}



.carrito-info{


    width:100%;


}



.carrito-actions{


    flex-direction:column;


}



.carrito-actions a{


    width:100%;


    text-align:center;


}



.carrito-container h1{


    font-size:30px;


}


}