/* .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;
}

.button.ideal-points-btn{
    width: 70%;
    border-radius: 12px;
    border: none;
    background: linear-gradient(90deg, #b9a71e, #f1c33d);
    border: 1px solid #a59411;
    font-weight: bold;
    letter-spacing: 3px;
}

.button.ideal-points-btn:hover{
    border:1px solid #968507;
   background: linear-gradient(90deg, #a57f0e, #c4af12);
}

.d-none{
    display: none !important;
}

/**Coupons**/
.coupons-div{
    display: flex;
}

.md-4{
    width: 33.3333333333%;
}


.md-6{
    width: 50%;
}

.md-12{
    width: 100%;
}

.redeem-card{
    padding:10px
}

.bg-blue{
    background: #f4f6ff !important;
}

.squire-icon{
    padding: 2px 6px;
    border-radius: 5px;
}

.squire-icon-blue{
    background: #EEF4FF;
    color: #1E40D8;
    border: 1px solid #e3ebfb;
    font-size: 20px;
}


.squire-icon-warning{
     background: #FFF3E8;
    color: #FF7A00;
    border: 1px solid #f4e2d2;
    font-size: 20px;
}


.squire-icon-success{
    background: #dbfdef;
    color: #16C784;
    border: 1px solid #c4f9e5;
    font-size: 20px;
}

.text-blue{
     color: #1E40D8 !important;
}

.text-orange{
     color: #FF7A00 !important;
}

.text-green{
     color: #16C784 !important;
}

.border-radius-12{
    border-radius: 12px  !important;
}

.border-radius-25{
    border-radius: 25px;
}

.min-height-400{
    min-height:400px
}

.redeem-title h3{
    font-size: 25px;
}

.redeem-available-points{
    display: flex;
    justify-content: space-between;
}

.redeem-available-points .title{
    font-size: 17px;
    color:#000;
    font-weight: bold;
}

.redeem-available-points .points{
    font-size: 17px;
    font-weight: bold;
}

.text-weight-bold{
    font-weight: bold;
}

.redeem-form form input{
    width: 100%;
    background: #FFFFFF;
border: 2px solid #DCE7FF;
border-radius: 5px;
}

.redeem-form form select{
    width: 100%;
    border: 2px solid #DCE7FF;
    border-radius: 5px;
}

.alert{
    border:1px solid #DCE7FF !important
}

.points-view-coupons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f4f6ff;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #d7daf5;
    padding-bottom: 0px;
}

.redeem-button-div button.primary{
background: linear-gradient(
    90deg,
    #2952F2 0%,
    #3E67FF 100%
);
color: #fff;
border-radius: 3px;
border: 1px solid #3E67FF;
}

.redeem-button-div button.warning{
background: linear-gradient(
    90deg,
    #FF7A00 0%,
    #f78a25 100%
);
color: #fff;
border-radius: 3px;
border: 1px solid #f78a25;
}

.redeem-button-div button{
    padding:5px 10px
}


.text-dark-blue{
    color:#04205c
}

.point-coupon-icon {
    justify-content: center;
    display: flex;
}

.coupon-list-div {
    display: flex;
    justify-content: space-between;
}

.redeem-button-div{
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pointconverted,.pointconverted-2{
    font-size: 50px;
}


.bg-warning-conversion {
    background-color: #fff3e2 !important;
    border: 1px solid #f5e1c1 !important;
    color: #fb820f;
    font-weight: 500 !important;
}

.bg-warning-conversion i {
    color: #fb820f;
}


.coupon-counter-div .point-circle{
    background: #0a9800;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.redeem-available-points .points span{
    font-size: 10px;
    color: #000;
}

.coupons-div .card-coupon{
    padding: 20px 10px;
    background: linear-gradient(92deg, #072784, #607cf7);
    border-radius: 12px;
    text-align: center;
}

.coupons-div .card-coupon button{
    background: #fff;
    border: none  !important;
    border-radius: 12px;
    width: 30%;
    padding:5px 15px
}

.coupons-div .card-coupon h3{
    color: #fff;
    margin-bottom: 0px;
    font-size: 20px;
}

.coupons-div .card-coupon p{
    color: #fff;
    font-size: 12px;
}

/* 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;
    }
}

@media(max-width:768px){
    .md-6{
        width: 100%;
    }
}