/* .dashboard{
    padding:70px 0;
} */

.dashboard-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:35px;
    align-items:stretch;
}


.spinner {
    display: flex;
    gap: 6px;
    justify-content: center;
   margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.spinner div {
    width: 8px;
    height: 8px;
    background: #04205c;
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
}

.spinner div:nth-child(2) {
    animation-delay: 0.2s;
}

.spinner div:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {
    0%, 40%, 60% { transform: scale(0); }
    30% { transform: scale(1); }
}


.text-black {
    color: #000 !important
}
/* ============================
   PROFILE
============================ */

.profile-card{
    background:#fff;
    border-radius:25px;
    padding:45px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.profile-header{
    display:flex;
    align-items:center;
    gap:35px;
    margin-bottom:40px;
}

.avatar{
       width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 8px solid #2c4edb;
    display: flex;
    justify-content: center;
    font-size: 40px;
    align-items: center;
    color: #2849d2;
}

.profile-title h1{
     margin-bottom: 0px !important;
}



.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-user h1{
    font-size:42px;
    margin-bottom:8px;
}

.profile-user p{
    color:#666;
}

.profile-info{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.info{
    display:flex;
    gap:10px;
}

.info i{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#eef2ff;
    color:#2950df;

    display:flex;
    align-items:center;
    justify-content:center;
}

.info span{
    display:block;
    color:#777;
    font-size:12px;
    margin-bottom:0px;
}

.info strong{
    font-size:12px;
    line-height:1.5;
}

/* ============================
   POINTS
============================ */

.blue-bg{
    background:linear-gradient(135deg,#2345d8,#4b6af0);
    color:#fff;
}

.overflow-bkt{
     overflow:hidden;
}

.points-wrapper{
    position:relative;
    margin-top:0px;      /* space for floating badge */
}

.points-card{

    position:relative;
    overflow:hidden;

    border-radius:28px;

    min-height:420px;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    color:#fff;

    box-shadow:0 18px 40px rgba(38,71,216,.28);

}

.badge-start-points{

    position:absolute;

    left:50%;
    top:-28px;

    transform:translateX(-50%);

    width:86px;
    height:86px;

    border-radius:50%;

    background:#3556df;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:36px;

    color:#fff;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18),
        inset 0 2px 5px rgba(255,255,255,.15);

    z-index:100;
}

.points-content{
    position:relative;
    z-index:2;
}

.points-title{
    font-size:16px;
    font-weight:600;
    margin-bottom:20px;
    color:#fff
}

.points-value{
    font-size:72px;
    font-weight:700;
    line-height:1;
    margin-bottom:20px;
}

.points-desc{
    font-size:18px;
    opacity:.95;
}

.coupon{

    position:absolute;
    width:170px;
    right:-20px;
    bottom:-30px;
    transform:rotate(-12deg);
    pointer-events:none;
    opacity: 0.5;
}

.points-card{

    position:relative;
    overflow:hidden;

   

    border-radius:25px;

  

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    min-height:420px;

    box-shadow: 0 3px 10px rgba(36, 71, 216, .35);

}



.points-content{

    z-index:2;
    width:100%;
    padding:20px;

}

.points-title{

    font-size:38px;
    margin-bottom:20px;

}

.points-value{

    font-size:82px;
    font-weight:700;
    line-height:1;

}

.points-divider{

    width:70px;
    height:2px;

    background:rgba(255,255,255,.35);

    margin:25px auto;

}

.points-desc{

    font-size:18px;

}

.coupon{

    position:absolute;

    width:180px;

    right:-20px;
    bottom:-20px;

    pointer-events:none;

}

/* ============================
   Responsive
============================ */

@media(max-width:991px){

.dashboard-grid{

grid-template-columns:1fr;

}

.profile-header{

flex-direction:column;
text-align:center;

}

.profile-info{

grid-template-columns:1fr;

}

.profile-user h1{

font-size:34px;

}

.points-card{

min-height:330px;

}

.points-title{

font-size:30px;

}

.points-value{

font-size:60px;

}

.coupon{

width:130px;

}

}



.points-history-wrap{
    border:1px solid #b3b0b0;
    border-radius:8px;
    overflow:hidden;
    background:#fff;
    margin-top:20px;
}

/* Row */
.points-history-row{
    display:flex;
    align-items:center;
    padding:14px 18px;
    border-bottom:1px solid #bdbdbd;
    font-size:14px;
}

.points-history-row:last-child{
    border-bottom:none;
}

/* Columns */
.history-title{
    flex:1.6;
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:500;
}

.history-date{
    flex:1;
    text-align:center;
    color:#222;
}

.history-points{
    flex:0.5;
    text-align:right;
    font-weight:700;
    font-size:24px;
}

/* Colors */
.plus{
    color:#0a9800;
}

.minus{
    color:#d40000;
}

/* Pagination */
.points-pagination{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:14px;
    flex-wrap:wrap;
}

.points-pagination a,
.points-pagination span{
    min-width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    border:1px solid #d8d8d8;
    background:#fff;
    text-decoration:none;
    color:#0f1849;
    font-weight:600;
    padding:0 10px;
}

.points-pagination .active{
    background:#0f1849;
    color:#fff;
    border-color:#0f1849;
}

/* Mobile */
@media(max-width:768px){

    .points-history-row{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .history-title,
    .history-date,
    .history-points{
        width:100%;
        text-align:left;
    }

    .history-points{
        font-size:20px;
    }

    .points-pagination{
        justify-content:center;
    }
}