body{
    direction:rtl;
    font-family:'Vazirmatn',sans-serif;
    background:#0b0b0b;
    color:var(--text);
}



.profile-page{

    padding:30px;
    
    }
    
    .profile-header{
    
    display:flex;
    
    align-items:center;
    
    gap:20px;
    
    margin-bottom:30px;
    
    }
    
    .profile-avatar{
    
    width:80px;
    
    height:80px;
    
    border-radius:50%;
    
    background:var(--gold);
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:32px;
    
    font-weight:bold;
    
    color:#111;
    
    }
    
    .profile-stats{
    
    display:grid;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:20px;
    
    }
    
    .profile-card{
    
    background:#1e1e1e;
    
    border:1px solid var(--border);
    
    border-radius:16px;
    
    padding:25px;
    
    text-align:center;
    
    }
    
    .profile-card h3{
    
    font-size:32px;
    
    margin:0;
    
    color:var(--gold);
    
    }
    
    .profile-card p{
    
    margin-top:10px;
    
    color:#bbb;
    
    }

    .account-layout{

        display:flex;
        
        gap:25px;
        
        }
        
        .account-sidebar{
        
        width:260px;
        
        background:#1a1a1a;
        
        border:1px solid var(--border);
        
        border-radius:18px;
        
        padding:20px;
        
        height:fit-content;
        
        }
        
        .account-user{
        
        text-align:center;
        
        margin-bottom:25px;
        
        }
        
        .account-avatar{
        
        width:70px;
        
        height:70px;
        
        border-radius:50%;
        
        background:var(--gold);
        
        color:#111;
        
        display:flex;
        
        align-items:center;
        
        justify-content:center;
        
        font-size:28px;
        
        font-weight:bold;
        
        margin:auto;
        
        margin-bottom:10px;
        
        }
        
        .account-sidebar a{
        
        display:block;
        
        padding:12px;
        
        margin-bottom:8px;
        
        border-radius:10px;
        
        text-decoration:none;
        
        color:var(--text);
        
        transition:.2s;
        
        }
        
        .account-sidebar a:hover{
        
        background:#2a2a2a;
        
        }

        .container-profile{
            width:92%;
            max-width:1300px;
            margin:auto;
        }

        .account-box{

            background:var(--card);
            
            border:1px solid var(--border);
            
            border-radius:14px;
            
            padding:20px;
            
            margin-bottom:15px;
            
            }

            .account-layout{

                max-width:1400px;
                
                margin:40px auto;
                
                display:flex;
                
                gap:25px;
                
                padding:0 20px;
                
                }

                .account-sidebar{

                    width:280px;
                    
                    background:var(--card);
                    
                    border:1px solid var(--border);
                    
                    border-radius:18px;
                    
                    padding:20px;
                    
                    position:sticky;
                    
                    top:20px;
                    
                    height:fit-content;
                    
                    }

                    .account-user{

                        text-align:center;
                        
                        padding-bottom:20px;
                        
                        border-bottom:1px solid #2a2a2a;
                        
                        margin-bottom:20px;
                        
                        }

                        .account-avatar{

                            width:70px;
                            
                            height:70px;
                            
                            border-radius:50%;
                            
                            background:var(--gold);
                            
                            color:#000;
                            
                            font-size:28px;
                            
                            font-weight:bold;
                            
                            display:flex;
                            
                            align-items:center;
                            
                            justify-content:center;
                            
                            margin:auto;
                            
                            margin-bottom:10px;
                            
                            }

                            .account-sidebar a{

                                display:block;
                                
                                padding:12px 15px;
                                
                                margin-bottom:8px;
                                
                                border-radius:12px;
                                
                                text-decoration:none;
                                
                                color:var(--text);
                                
                                transition:.3s;
                                
                                }

                                .account-sidebar a:hover{

                                    background:#242424;
                                    
                                    color:var(--gold);
                                    
                                    }

                                    #accountContent{

                                        flex:1;
                                        
                                        background:var(--card);
                                        
                                        border:1px solid var(--border);
                                        
                                        border-radius:18px;
                                        
                                        padding:30px;
                                        
                                        min-height:600px;
                                        
                                        }

                                        .dashboard-grid{

                                            display:grid;
                                            
                                            grid-template-columns:repeat(3,1fr);
                                            
                                            gap:20px;
                                            
                                            margin-top:25px;
                                            
                                            }

                                            .dashboard-card{

                                                background:var(--card2);
                                                
                                                border:1px solid var(--border);
                                                
                                                border-radius:16px;
                                                
                                                padding:25px;
                                                
                                                text-align:center;
                                                
                                                transition:.3s;
                                                
                                                }

                                                .dashboard-card:hover{

                                                    transform:translateY(-4px);
                                                    
                                                    border-color:var(--gold);
                                                    
                                                    }

                                                    .dashboard-card h3{

                                                        font-size:35px;
                                                        
                                                        color:var(--gold);
                                                        
                                                        margin-bottom:10px;
                                                        
                                                        }

                                                        .account-box{

                                                            background:var(--card2);
                                                            
                                                            border:1px solid var(--border);
                                                            
                                                            border-radius:16px;
                                                            
                                                            padding:20px;
                                                            
                                                            margin-bottom:15px;
                                                            
                                                            }

                                                            .dashboard-welcome{

                                                                background:var(--card2);
                                                                
                                                                border:1px solid var(--border);
                                                                
                                                                padding:20px;
                                                                
                                                                border-radius:16px;
                                                                
                                                                margin-bottom:25px;
                                                                
                                                                font-size:18px;
                                                                
                                                                }

                                                                .account-sidebar a.active{

                                                                    background:var(--gold);
                                                                    
                                                                    color:#000;
                                                                    
                                                                    font-weight:bold;
                                                                    
                                                                    }

                                                                    .order-card{

                                                                        background:var(--card2);
                                                                        
                                                                        border:1px solid var(--border);
                                                                        
                                                                        border-radius:16px;
                                                                        
                                                                        padding:20px;
                                                                        
                                                                        margin-bottom:15px;
                                                                        
                                                                        }

                                                                        .order-top{

                                                                            display:flex;
                                                                            
                                                                            justify-content:space-between;
                                                                            
                                                                            margin-bottom:15px;
                                                                            
                                                                            }

                                                                            .order-status{

                                                                                color:var(--gold);
                                                                                
                                                                                font-weight:bold;
                                                                                
                                                                                }

                                                                                .order-price{

                                                                                    font-size:22px;
                                                                                    
                                                                                    font-weight:bold;
                                                                                    
                                                                                    margin-bottom:10px;
                                                                                    
                                                                                    }

                                                                                    .user-comment-card{

                                                                                        background:var(--card2);
                                                                                        
                                                                                        border:1px solid var(--border);
                                                                                        
                                                                                        border-radius:16px;
                                                                                        
                                                                                        padding:20px;
                                                                                        
                                                                                        margin-bottom:15px;
                                                                                        
                                                                                        }

                                                                                        .user-comment-top{

                                                                                            display:flex;
                                                                                            
                                                                                            justify-content:space-between;
                                                                                            
                                                                                            margin-bottom:15px;
                                                                                            
                                                                                            color:var(--gold);
                                                                                            
                                                                                            font-weight:bold;
                                                                                            
                                                                                            }

                                                                                            .user-comment-body{

                                                                                                line-height:2;
                                                                                                
                                                                                                margin-bottom:15px;
                                                                                                
                                                                                                }

                                                                                                .user-comment-reply{

                                                                                                    background:var(--card);
                                                                                                    
                                                                                                    border-right:4px solid var(--gold);
                                                                                                    
                                                                                                    padding:15px;
                                                                                                    
                                                                                                    border-radius:10px;
                                                                                                    
                                                                                                    }

                                                                                                    .reply-head{

                                                                                                        color:var(--gold);
                                                                                                        
                                                                                                        font-weight:bold;
                                                                                                        
                                                                                                        margin-bottom:10px;
                                                                                                        
                                                                                                        }

                                                                                                        .new-ticket-btn{

                                                                                                            display:inline-flex;
                                                                                                            
                                                                                                            align-items:center;
                                                                                                            
                                                                                                            gap:8px;
                                                                                                            
                                                                                                            background:var(--gold);
                                                                                                            
                                                                                                            color:#000;
                                                                                                            
                                                                                                            padding:12px 18px;
                                                                                                            
                                                                                                            border-radius:12px;
                                                                                                            
                                                                                                            text-decoration:none;
                                                                                                            
                                                                                                            font-weight:bold;
                                                                                                            
                                                                                                            margin-bottom:25px;
                                                                                                            
                                                                                                            transition:.3s;
                                                                                                            
                                                                                                            }
                                                                                                            
                                                                                                            .new-ticket-btn:hover{
                                                                                                            
                                                                                                            background:#e5c04a;
                                                                                                            
                                                                                                            transform:translateY(-2px);
                                                                                                            
                                                                                                            }

                                                                                                            .ticket-header{

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

                                                                                                                .ticket-view-btn{

                                                                                                                    width:42px;
                                                                                                                    
                                                                                                                    height:42px;
                                                                                                                    
                                                                                                                    display:flex;
                                                                                                                    
                                                                                                                    align-items:center;
                                                                                                                    
                                                                                                                    justify-content:center;
                                                                                                                    
                                                                                                                    background:#1f1f1f;
                                                                                                                    
                                                                                                                    border:1px solid var(--border);
                                                                                                                    
                                                                                                                    border-radius:10px;
                                                                                                                    
                                                                                                                    color:var(--gold);
                                                                                                                    
                                                                                                                    text-decoration:none;
                                                                                                                    
                                                                                                                    transition:.3s;
                                                                                                                    
                                                                                                                    }
                                                                                                                    
                                                                                                                    .ticket-view-btn:hover{
                                                                                                                    
                                                                                                                    border-color:var(--gold);
                                                                                                                    
                                                                                                                    background:#252525;
                                                                                                                    
                                                                                                                    transform:scale(1.05);
                                                                                                                    
                                                                                                                    }

                                                                                                                    .ticket-view-btn{

                                                                                                                        width:42px;
                                                                                                                        
                                                                                                                        height:42px;
                                                                                                                        
                                                                                                                        display:flex;
                                                                                                                        
                                                                                                                        align-items:center;
                                                                                                                        
                                                                                                                        justify-content:center;
                                                                                                                        
                                                                                                                        background:#1f1f1f;
                                                                                                                        
                                                                                                                        border:1px solid var(--border);
                                                                                                                        
                                                                                                                        border-radius:10px;
                                                                                                                        
                                                                                                                        color:var(--gold);
                                                                                                                        
                                                                                                                        text-decoration:none;
                                                                                                                        
                                                                                                                        transition:.3s;
                                                                                                                        
                                                                                                                        }
                                                                                                                        
                                                                                                                        .ticket-view-btn:hover{
                                                                                                                        
                                                                                                                        border-color:var(--gold);
                                                                                                                        
                                                                                                                        background:#252525;
                                                                                                                        
                                                                                                                        transform:scale(1.05);
                                                                                                                        
                                                                                                                        }

                                                                                                                        .ticket-view-btn{

                                                                                                                            width:42px;
                                                                                                                            
                                                                                                                            height:42px;
                                                                                                                            
                                                                                                                            display:flex;
                                                                                                                            
                                                                                                                            align-items:center;
                                                                                                                            
                                                                                                                            justify-content:center;
                                                                                                                            
                                                                                                                            background:#1f1f1f;
                                                                                                                            
                                                                                                                            border:1px solid var(--border);
                                                                                                                            
                                                                                                                            border-radius:10px;
                                                                                                                            
                                                                                                                            color:var(--gold);
                                                                                                                            
                                                                                                                            text-decoration:none;
                                                                                                                            
                                                                                                                            transition:.3s;
                                                                                                                            
                                                                                                                            }
                                                                                                                            
                                                                                                                            .ticket-view-btn:hover{
                                                                                                                            
                                                                                                                            border-color:var(--gold);
                                                                                                                            
                                                                                                                            background:#252525;
                                                                                                                            
                                                                                                                            transform:scale(1.05);
                                                                                                                            
                                                                                                                            }

                                                                                                                            



                                                                                                                            /* =========================
   TABLET
========================= */
@media (max-width: 992px){

    .account-layout{
        flex-direction:column;
        padding:0 15px;
    }

    .account-sidebar{
        width:100%;
        position:static;
    }

    #accountContent{
        width:100%;
        min-height:auto;
    }

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

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

}

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

    .profile-page{
        padding:15px;
    }

    .profile-header{
        flex-direction:column;
        text-align:center;
        gap:12px;
    }

    .profile-avatar{
        width:70px;
        height:70px;
        font-size:28px;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .profile-stats{
        grid-template-columns:1fr;
        gap:15px;
    }

    .dashboard-card h3{
        font-size:28px;
    }

    .account-sidebar{
        padding:15px;
    }

    .account-sidebar a{
        padding:14px;
        text-align:center;
    }

    #accountContent{
        padding:20px;
    }

    .order-top,
    .ticket-header,
    .user-comment-top{
        flex-direction:column;
        gap:10px;
        align-items:flex-start;
    }

    .order-price{
        font-size:18px;
    }

    .dashboard-welcome{
        font-size:16px;
        line-height:1.8;
    }

    .new-ticket-btn{
        width:90%;
        justify-content:center;
    }

}

/* =========================
   SMALL PHONES
========================= */
@media (max-width: 480px){

    .container-profile{
        width:95%;
    }

    .profile-avatar,
    .account-avatar{
        width:60px;
        height:60px;
        font-size:24px;
    }

    .dashboard-card,
    .account-box,
    .order-card,
    .user-comment-card{
        padding:15px;
    }

    #accountContent{
        padding:15px;
    }

}