/* ==========================================================
   FIBERPAY
   COMPONENTES
========================================================== */


/* ===========================================
   BOTONES
=========================================== */

.btn{

    width:100%;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:16px;

    padding:16px;

    font-size:17px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

    box-shadow:var(--shadow);

}

.btn-success{

    background:var(--success);

    color:white;

}

.btn-success:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow);

}


/* ===========================================
   INPUTS
=========================================== */

.input-group{

    margin-top:18px;

}

.input-group label{

    display:block;

    margin-bottom:8px;

    color:var(--text);

    font-weight:500;

}

.input{

    width:100%;

    padding:16px 18px;

    border-radius:16px;

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

    font-size:17px;

    transition:var(--transition);

    background:white;

}

.input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 5px rgba(0,87,184,.08);

    outline:none;

}


/* ===========================================
   BADGES
=========================================== */

.badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    font-size:14px;

    font-weight:600;

}

.badge-warning{

    background:#FFF5D8;

    color:#A86E00;

}

.badge-success{

    background:#EAFBF2;

    color:#10884E;

}

.badge-danger{

    background:#FDECEC;

    color:#C62828;

}


/* ===========================================
   QR
=========================================== */

.qr-box{

    text-align:center;

    margin:30px 0;

}

.qr-box img{

    width:260px;

    max-width:100%;

    border-radius:20px;

    box-shadow:var(--shadow);

}


/* ===========================================
   MONTO
=========================================== */

.amount{

    text-align:center;

    font-size:46px;

    font-weight:700;

    color:var(--primary);

    margin:15px 0;

}


/* ===========================================
   CONTADOR
=========================================== */

.timer{

    text-align:center;

    margin-top:20px;

}

.timer-value{

    font-size:42px;

    font-weight:700;

    color:var(--danger);

    letter-spacing:2px;

}


/* ===========================================
   ALERTAS
=========================================== */

.alert{

    padding:18px;

    border-radius:16px;

    margin-top:20px;

}

.alert-success{

    background:#EAFBF2;

    color:#10884E;

}

.alert-warning{

    background:#FFF8E6;

    color:#8A5A00;

}

.alert-danger{

    background:#FDECEC;

    color:#B71C1C;

}


/* ===========================================
   IMAGENES
=========================================== */

.image-center{

    text-align:center;

    margin:25px 0;

}

.image-center img{

    max-width:100%;

}


/* ===========================================
   TABLAS
=========================================== */

.table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}

.table td{

    padding:12px 0;

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

}