/* =========================================
   GLOBAL RESET
========================================= */
button{
    outline:none!important;
    border:0!important;
}

input,
select{
    height:auto!important;
    padding:.6rem .95rem!important;
}

table{
    border-collapse:collapse!important;
    width:100%;
}

th,
td{
    padding:.5rem 1rem .5rem 0;
}

/* =========================================
   COMMON COLORS
========================================= */
:root{
    --primary:#7f236e;
    --primary-light:#9d2b88;
    --soft-bg:#eff0f1;
    --border:#eee;
    --text:#444;
    --muted:#777;
}

/* =========================================
   ACCOUNT BREADCRUMB
========================================= */
.account-breadcrumb{
    padding:20px 0 10px;
    font-size:14px;
    color:var(--muted);
}

.account-breadcrumb a{
    color:var(--muted);
    text-decoration:none;
}

.account-breadcrumb span{
    color:var(--primary-light);
    font-weight:600;
}

/* =========================================
   ACCOUNT HERO CARD
========================================= */
.account-card{
    background:#F1D7EC;
    border-radius:10px;
    padding:25px;
    margin-bottom:1rem;
    overflow:hidden;
    background-image:
        linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
        url('https://i1.sndcdn.com/visuals-000116825322-AP1eKp-original.jpg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    box-shadow:0 10px 29px rgb(68 88 144 / 10%);
}

.welcome-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
}

.welcome-left{
    display:flex;
    align-items:center;
    gap:25px;
}

.welcome-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    background:#fdf1fa;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary-light);
    font-size:30px;
    font-weight:500;
}

.welcome-content h4{
    font-size:1.5rem;
    color:#fff;
    margin:0;
}

.welcome-content p{
    color:#cbc7c7;
    line-height:1.8;
    margin:0;
}

/* =========================================
   STATS
========================================= */
.stats-wrap{
    display:flex;
    align-items:center;
    gap:40px;
}

.stat-box{
    display:flex;
    align-items:center;
    gap:18px;
    position:relative;
    padding-left:40px;
}

.stat-box:first-child{
    padding-left:0;
}

.stat-box:first-child::before{
    display:none;
}

.stat-box::before{
    content:"";
    position:absolute;
    left:0;
    width:1px;
    height:40px;
    background:#9d7c8f;
}

.stat-icon{
    width:48px;
   height:48px;
   border-radius:12px;
   background:#eff0f1;
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:18px;
   /*color:#9d2b88;*/
   margin:auto auto 18px;
}

.stat-info h3{
    font-size:40px;
    margin:0;
}

.stat-info h4{
    color:#fff;
}

.stat-info p{
    margin:0;
    color:#cbc7c7;
}

/* =========================================
   DASHBOARD LAYOUT
========================================= */
.dashboard-wrapper{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
}

.sidebar-account{
    width:280px;
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    margin-bottom:1rem;
    box-shadow:0 10px 29px rgb(68 88 144 / 10%);
}

.sidebar-account ul{
    margin:0;
    padding:0;
    list-style:none;
}

.sidebar-account ul li a{
    display:flex;
    align-items:center;
    gap:15px;
    padding:14px 20px;
    border-radius:10px;
    color:var(--text);
    text-decoration:none;
    transition:.3s;
}

.sidebar-account ul li a:hover{
    background:var(--soft-bg);
}

.sidebar-account ul li.active a{
    background:var(--primary);
    color:#fff;
}

.main-dashboard{
    flex:1;
    min-width:0;
}

.dashboard-card{
    background:#fff;
    border-radius:10px;
    margin-bottom:1rem;
    box-shadow:0 10px 29px rgb(68 88 144 / 10%);
}

.container-card{
    padding:1rem 1.25rem;
}

.container-card2{
    padding:1rem 1.25rem 0;
}

/* =========================================
   CARD HEADER
========================================= */
.card-header-flex{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding:1rem 1.25rem;
    border-bottom:1px solid #dee2e6;
}

.card-header-flex h4{
    margin:0;
    color:#333;
}

.view-link,
.action-link{
    color:var(--primary-light);
    font-weight:600;
    text-decoration:none;
}

/* =========================================
   QUICK ACTIONS
========================================= */
.quick-actions{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
    padding:1rem 1.25rem;
}

.quick-box{
    text-align:center;
}

.quick-box-inner{
    width:100%;
    height:90px;
    border-radius:10px;
    background:var(--soft-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    margin-bottom:12px;
}

.quick-box p{
    margin:0;
    font-size:14px;
    color:var(--text);
}

/* =========================================
   PROFILE DETAILS
========================================= */
.profile-detail-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:15px;
    background:#fff;
    padding:18px;
    border-radius:16px;
    border:1px solid var(--border);
    overflow:hidden;
}

.detail-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:var(--soft-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.detail-content{
    flex:1;
}

.detail-content h6{
    margin:0;
    font-size:15px!important;
    font-weight:600;
    color:#222;
}

.detail-edit-btn{
    position:absolute;
    top:17px;
    right:18px;
    width:25px;
    height:25px;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--soft-bg);
    border-radius:8px;
    transition:.3s;
}

.detail-edit-btn:hover{
    color:var(--primary);
    transform:rotate(-8deg) scale(1.08);
}

/* =========================================
   ADDRESS CARD
========================================= */
.modern-address-card{
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    background:#fafafa;
    transition:.3s;
}

.address-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:15px;
}

.address-type{
    font-size:16px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px;
    color:#222;
}

.default-badge{
    background:#f3e4f0;
    color:var(--primary);
    font-size:11px;
    font-weight:700;
    padding:5px 12px;
    border-radius:10px;
}

.address-body p{
    font-size:14px;
    color:#666;
    line-height:1.8;
    margin-bottom:15px;
}

.address-contact{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
}

/* =========================================
   LABELS
========================================= */
.label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:.8rem;
    font-weight:400;
}

.label-inline{
    width:auto;
    padding:.15rem .75rem;
    border-radius:.42rem;
}

.label-light-success{
    color:#1BC5BD;
    background:#C9F7F5;
}

.label-light-danger{
    color:var(--primary);
    background:#ffebfb;
}

.label-light-warning{
    color:#f0ad4e;
    background:#fff2e0;
}

/* =========================================
   TABLE CONTAINER
========================================= */
.table-container{
    width:100%;
    overflow-x:auto;
    position:relative;
}

th:first-child,
td:first-child{
    position:sticky!important;
    left:0;
    z-index:1;
}

thead th:first-child{
    z-index:2;
    background:#eaeaea!important;
}

/* =========================================
   RESPONSIVE
========================================= */
@media(max-width:991px){

    .sidebar-account{
        width:100%;
    }

    .quick-actions{
        grid-template-columns:repeat(3,1fr);
    }

    .welcome-box{
        flex-direction:column;
        justify-content:center;
    }

    .stats-wrap{
        gap:20px;
    }

    .stat-box{
        padding-left:16px;
    }

    

   
}

@media(max-width:767px){

    table{
        min-width:600px!important;
    }

    .welcome-content h4{
        font-size:20px;
    }

    .welcome-icon{
        width:70px;
        height:70px;
        font-size:20px;
    }

    .welcome-left{
        flex-direction:column;
        align-items:center;
        gap:15px;
    }

    .stats-wrap{
        width:100%;
        justify-content:center;
        gap:15px;
    }

    .quick-actions{
        grid-template-columns:repeat(2,1fr);
    }

    .table-container::-webkit-scrollbar{
        display:none;
    }

    .table-container{
        scrollbar-width:none;
        -ms-overflow-style:none;
    }
}