.page{

    display:flex;
    flex-direction:column;

}

@media(min-width:1024px){

    .mobile-container{

        padding:24px 28px 24px;
        border-radius:28px;
        background:var(--surface);
        border:1px solid var(--border);
        box-shadow:var(--shadow-md);

    }

    .promo-card,
    .option-card,
    .info-card,
    .history-card,
    .last-order-card,
    .profile-card,
    .selection-card,
    .summary-card,
    .product-card,
    .stat-card,
    .action-card,
    .recent-card{
        transition:transform .25s ease, box-shadow .25s ease;
    }

    .promo-card:hover,
    .option-card:hover,
    .info-card:hover,
    .history-card:hover,
    .last-order-card:hover,
    .profile-card:hover,
    .selection-card:hover,
    .summary-card:hover,
    .product-card:hover,
    .stat-card:hover,
    .action-card:hover,
    .recent-card:hover{
        transform:translateY(-4px);
        box-shadow:var(--shadow-md);
    }

    .stats-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:16px;
    }

    .option-card a{
        display:block;
    }

}

.content{

    padding:18px;
    padding-bottom:95px;

}

.home{

    padding:20px;

}

.home-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.home-header h3{

    margin:0;

}

.home-header span{

    color:#7a869a;

}

.avatar{

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

.welcome-card{

    margin-top:25px;

    background:linear-gradient(135deg,var(--primary),#3f8cff);

    color:white;

    border-radius:22px;

    padding:25px;

}

.welcome-card h1{

    margin:8px 0;

}

.stats-grid{

    margin-top:20px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}

.stat-card{

    background:white;

    border-radius:18px;

    padding:20px;

    text-align:center;

    box-shadow:var(--shadow);

}

.stat-card i{

    color:var(--primary);

    font-size:22px;

    margin-bottom:10px;

}

.action-card{

    margin-top:25px;

    background:white;

    padding:20px;

    border-radius:20px;

    display:flex;

    align-items:center;

    gap:15px;

    box-shadow:var(--shadow);

}

.action-card i{

    font-size:35px;

    color:var(--primary);

}

.btn-start{

    margin-left:auto;

    background:var(--primary);

    color:white;

    padding:10px 18px;

    border-radius:12px;

}

.recent-card{

    margin-top:20px;

    background:white;

    border-radius:20px;

    padding:20px;

    box-shadow:var(--shadow);

}

.recent-card ul{

    margin-top:10px;

    padding-left:18px;

}

.mobile-container{

    max-width:430px;

    margin:auto;

    padding:25px;

    padding-bottom:110px;

}

.profile-card{

    background:#1565c0;

    color:white;

    border-radius:20px;

    padding:30px;

    text-align:center;

    margin-bottom:25px;

}

.avatar{

    width:90px;

    height:90px;

    border-radius:50%;

    background:white;

    color:#1565c0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:45px;

    margin:auto;

    margin-bottom:15px;

}

.page{

    background:

    linear-gradient(

        180deg,

        #EEF5FF,

        #FDFDFD);

}

.page-title{

    margin-bottom:25px;

}

.card-mobile{

    background:white;

    border-radius:18px;

    padding:20px;

    margin-bottom:18px;

    box-shadow:0 10px 20px rgba(0,0,0,.08);

}

/*=========================
DRAWER
=========================*/

.mobile-sidebar{

    position:fixed;

    top:0;

    left:-320px;

    width:300px;

    height:100vh;

    background:white;

    transition:.35s;

    box-shadow:0 20px 50px rgba(0,0,0,.2);

    z-index:9999;

}

.mobile-sidebar.active{

    left:0;

}

.drawer-header{

    background:#1565c0;

    color:white;

    padding:30px;

    text-align:center;

}

.avatar-card{

    width:100px;

    height:100px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

    border:4px solid white;

    margin-bottom:15px;

}

.drawer-avatar{

    width:100%;

}

.drawer-route{

    display:inline-block;

    margin-top:10px;

    padding:8px 15px;

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

    border-radius:20px;

}

.drawer-stats{

    display:flex;

    justify-content:space-between;

    margin-top:25px;

}

.drawer-stats div{

    flex:1;

}

.drawer-stats strong{

    font-size:22px;

    display:block;

}

.drawer-menu{

    display:flex;

    flex-direction:column;

}

.drawer-menu a{

    padding:18px 25px;

    color:#333;

    text-decoration:none;

    transition:.3s;

}

.drawer-menu a:hover{

    background:#edf5ff;

    color:#1565c0;

}

.drawer-menu i{

    width:30px;

}