/*==================================================
ADMIN KYC
==================================================*/

.page-title{

    color:#fff;

    font-size:30px;

    font-weight:700;

}

.page-title i{

    color:#D4A52B;

    margin-right:8px;

}

.page-header p{

    color:#9b9b9b;

}

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

.summary-card{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:25px;

    border-radius:18px;

    background:linear-gradient(180deg,#191919,#0f0f0f);

    border:1px solid rgba(212,165,43,.15);

    transition:.35s;

    height:120px;

}

.summary-card:hover{

    transform:translateY(-6px);

    border-color:#D4A52B;

    box-shadow:0 20px 35px rgba(212,165,43,.15);

}

.summary-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:linear-gradient(90deg,#D4A52B,#FFD54F,#D4A52B);

}

.summary-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(212,165,43,.12);

    color:#FFD54F;

    font-size:28px;

}

.summary-content span{

    color:#9b9b9b;

    display:block;

    margin-bottom:8px;

}

.summary-content h2{

    color:#fff;

    font-size:34px;

    font-weight:700;

    margin:0;

}

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

.glass-card{

    background:#161616;

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

    border-radius:20px;

    padding:25px;

}

.card-header-custom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;

}

.card-header-custom h5{

    color:#fff;

    margin:0;

    font-weight:700;

}

.card-header-custom i{

    color:#D4A52B;

    margin-right:8px;

}

/*==================================================
FORM
==================================================*/

.form-label{

    color:#ddd;

    font-weight:600;

}

.form-control,

.form-select{

    background:#111;

    border:1px solid #2d2d2d;

    color:#fff;

    height:48px;

}

.form-control:focus,

.form-select:focus{

    background:#111;

    color:#fff;

    border-color:#D4A52B;

    box-shadow:0 0 0 .2rem rgba(212,165,43,.18);

}

/*==================================================
BUTTON
==================================================*/

.btn-gold{

    background:linear-gradient(90deg,#D4A52B,#FFD54F);

    color:#111;

    border:none;

    font-weight:700;

    height:48px;

    transition:.3s;

}

.btn-gold:hover{

    color:#111;

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(212,165,43,.25);

}

/*==================================================
TABLE
==================================================*/

.table{

    color:#fff;

    margin:0;

}

.table thead{

    background:#101010;

}

.table thead th{

    color:#FFD54F;

    border-bottom:1px solid rgba(212,165,43,.25);

    font-weight:700;

    white-space:nowrap;

}

.table tbody td{

    vertical-align:middle;

    border-color:rgba(255,255,255,.06);

}

.table-hover tbody tr{

    transition:.25s;

}

.table-hover tbody tr:hover{

    background:rgba(212,165,43,.06);

}

/*==================================================
STATUS BADGE
==================================================*/

.badge-pending{

    background:#ffc107;

    color:#111;

}

.badge-approved{

    background:#28a745;

}

.badge-rejected{

    background:#dc3545;

}

/*==================================================
ACTION BUTTON
==================================================*/

.btn-view{

    width:42px;

    height:42px;

    border-radius:12px;

    background:#D4A52B;

    color:#111;

    border:none;

}

.btn-view:hover{

    background:#FFD54F;

}

/*==================================================
MODAL
==================================================*/

.glass-modal{

    background:#171717;

    border:1px solid rgba(212,165,43,.15);

    color:#fff;

}

.glass-modal .modal-header{

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

}

.glass-modal .modal-footer{

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

}

/*==================================================
IMAGE
==================================================*/

.doc-image{

    width:100%;

    border-radius:15px;

    cursor:pointer;

    transition:.3s;

}

.doc-image:hover{

    transform:scale(1.03);

}

/*==================================================
LOADING
==================================================*/

.loading-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

    color:#fff;

}

/*==================================================
EMPTY
==================================================*/

#emptyState h4{

    color:#fff;

}

#emptyState p{

    color:#888;

}

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

@media(max-width:768px){

.page-title{

font-size:24px;

}

.summary-card{

height:auto;

padding:18px;

}

.summary-icon{

width:55px;

height:55px;

font-size:22px;

}

.summary-content h2{

font-size:28px;

}

.glass-card{

padding:18px;

}

}