/*==========================================================
MAXALUD
05-payment.css
==========================================================*/


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

.payment{

    padding:24px;

    animation:fadeIn .30s ease;

}

.payment-title{

    font-size:28px;

    font-weight:700;

    color:#0D2A94;

    margin-bottom:8px;

}

.payment-description{

    color:#64748B;

    margin-bottom:28px;

    line-height:1.6;

}

/*==========================================================
RESUMEN
==========================================================*/

.payment-summary{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*==========================================================
CARD
==========================================================*/

.payment-card{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:20px;

    padding:22px;

    transition:.30s;

}

.payment-card:hover{

    border-color:#18B93C;

    transform:translateY(-3px);

}

/*==========================================================
LABEL
==========================================================*/

.payment-label{

    font-size:15px;

    font-weight:600;

    color:#64748B;

    margin-bottom:10px;

}

/*==========================================================
VALUE
==========================================================*/

.payment-value{

    font-size:30px;

    font-weight:800;

    color:#18B93C;

}

/*==========================================================
SUBTITLE
==========================================================*/

.payment-subtitle{

    font-size:18px;

    font-weight:700;

    color:#0D2A94;

    margin-bottom:12px;

}

/*==========================================================
DESCUENTOS
==========================================================*/

.discount-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 22px;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:18px;

    margin-top:18px;

}

.discount-title{

    font-size:16px;

    font-weight:600;

    color:#334155;

}

.discount-value{

    font-size:20px;

    font-weight:700;

    color:#18B93C;

}



/*==========================================================
TOTAL
==========================================================*/

.total-card{

    margin-top:22px;

    padding:24px;

    background:linear-gradient(135deg,#0D2A94,#1847D5);

    border-radius:22px;

    color:#FFFFFF;

}

.total-title{

    font-size:16px;

    font-weight:500;

    opacity:.85;

}

.total-value{

    margin-top:10px;

    font-size:38px;

    font-weight:800;

}



/*==========================================================
MÉTODOS DE PAGO
==========================================================*/

.payment-methods{

    margin-top:35px;

}

.payment-methods-title{

    font-size:22px;

    font-weight:700;

    color:#0D2A94;

    margin-bottom:22px;

}

.payment-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}



/*==========================================================
TARJETAS
==========================================================*/

.payment-option{

    background:#FFFFFF;

    border:2px solid #adadad;

    border-radius:20px;

    padding:24px;

    cursor:pointer;

    transition:.30s;

    text-align:center;

}

.payment-option:hover{

    border-color:#18B93C;

    transform:translateY(-4px);

}

.payment-option.active{

    border-color:#18B93C;

    background:#F3FFF5;

    box-shadow:0 12px 25px rgba(24,185,60,.18);

}

.payment-option i{

    font-size:34px;

    color:#18B93C;

    margin-bottom:15px;

}

.payment-option h4{

    font-size:18px;

    font-weight:700;

    color:#0D2A94;

    margin-bottom:8px;

}

.payment-option p{

    font-size:14px;

    color:#64748B;

    line-height:1.5;

}

/*==========================================================
FOOTER
==========================================================*/

.payment-footer{

    position:sticky;

    bottom:0;

    background:#FFFFFF;

    border-top:1px solid #E5E7EB;

    padding:22px 24px;

    margin-top:40px;

    z-index:20;

}

.payment-actions{

    display:flex;

    gap:16px;

}



/*==========================================================
BOTÓN ATRÁS
==========================================================*/

.payment-back{

    flex:1;

    height:60px;

    border:1px solid #CBD5E1;

    border-radius:18px;

    background:#FFFFFF;

    color:#475569;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.payment-back:hover{

    border-color:#0D2A94;

    color:#0D2A94;

    background:#F8FAFC;

}



/*==========================================================
BOTÓN PAGAR
==========================================================*/

.payment-next{

    flex:2;

    height:60px;

    border:none;

    border-radius:18px;

    background:#D8E0E8;

    color:#FFFFFF;

    font-size:17px;

    font-weight:700;

    cursor:not-allowed;

    transition:.30s;

}

.payment-next.enabled{

    cursor:pointer;

    background:linear-gradient(
        135deg,
        #18B93C,
        #129D38
    );

}

.payment-next.enabled:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 22px rgba(24,185,60,.25);

}



/*==========================================================
ESTADO SELECCIONADO
==========================================================*/

.payment-selected{

    border:2px solid #18B93C;

    background:#F3FFF5;

    box-shadow:0 10px 18px rgba(24,185,60,.20);

}



/*==========================================================
ANIMACIONES
==========================================================*/

.payment-fade{

    animation:paymentFade .35s ease;

}

@keyframes paymentFade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

@media(max-width:768px){

    .payment-grid{

        grid-template-columns:1fr;

    }

    .payment-actions{

        flex-direction:column;

    }

    .payment-back,

    .payment-next{

        width:100%;

    }

    .payment-value{

        font-size:26px;

    }

    .total-value{

        font-size:32px;

    }

}