body {
  font-family: Tahoma, Arial, sans-serif;
  margin: 0;
  background-color: #f9f9f9;
  direction: rtl;
}

/* هدر */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}
@media(min-width: 768px) {
    .profile-container {
        display: block !important; /* اطمینان از نمایش در دسکتاپ */
        margin-top: -10px;
    }
}
/* آیکون کاربر */
.profile-container {
    position: relative;
    display: inline-block;
   
    margin-left: 80px;
    float: left;
    
}

.profile-icon {
    font-size: 30px; /* اندازه دلخواه */
    
    display: inline-block;
}

    /* اکانت باکس (مخفی در حالت پیش‌فرض) */
    .account-boxx {
        position: absolute;
        top: 50px; /* فاصله پایین‌تر از آیکون */
       
        width: 200px;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 15px;
        display: none; /* مخفی به صورت پیش‌فرض */
        z-index: 1000;
    }

    /* نمایش با هاور روی container */
    .profile-container:hover .account-boxx {
        display: block;
    }

    /* استایل‌های داخل اکانت باکس */
    .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .avatar img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #ddd;
    }

    .user-details {
        margin-right: 10px;
        text-align: right;
    }

        .user-details h3 {
            margin: 0;
            font-weight: 600;
            font-size: 1.2em;
        }

        .user-details p {
            margin: 4px 0 0 0;
            font-size: 0.9em;
            color: #555;
        }

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

        .balance button {
            background-color: #0089e0;
            color: #fff;
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

            .balance button:hover {
                background-color: #0069c0;
            }

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

    .menu li {
        padding: 12px 10px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .menu li:hover {
            background-color: #f0f0f0;
        }

    @media(max-width: 768px) {
        /* استایل‌های واکنش‌گرا */
        .account-boxx {
            width: 90%;
            right: 5%;
        }
    }
    /* نمایش در حالت hover در دسکتاپ */
    .profile-container:hover .account-boxx {
        display: block;
    }

    /* در موبایل، با کلیک فعال می‌شود */
    @media(min-width:768px) {
     
    }

    @media(max-width: 768px) {
        .account-boxx {
            position: fixed;
            top: 70px;
            right: 10px;
            width: calc(100% - 20px);
            max-width: none;
            height: auto;
            display: none;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            overflow-y: auto;
        }
        /* فعال سازی با جاوااسکریپت */
    }

    /* استایل‌های داخلی و ریسپانسیو */
    .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        flex-direction: row-reverse;
    }

    .avatar img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #ddd;
        margin-left: 10px;
    }

    .user-details {
        text-align: right;
    }

        .user-details h3 {
            margin: 0;
            font-weight: 600;
            font-size: 1.2em;
        }

        .user-details p {
            margin: 4px 0 0 0;
            font-size: 0.9em;
            color: #555;
        }

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

        .balance button {
            background-color: #0089e0;
            color: #fff;
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

            .balance button:hover {
                background-color: #0069c0;
            }

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

    .menu li {
        padding: 12px 10px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .menu li:hover {
            background-color: #f0f0f0;
        }

    /* حالت موبایل با جاوااسکریپت */
    .show-account-boxx {
        display: block !important;
    }

    .header-account {
        border-radius: 10px;
        border: 2px solid rgb(9, 9, 9);
        line-height: 39px;
        padding: 0px 15px 0px 15px;
        margin-left: 60px;
        float: left;
    }

    @media (max-width: 510px) {
        .header-account {
            margin-top: -110px;
        }
        .profile-container {
            margin-top: -110px;
        }
        /* برای موبایل، استایل‌های تنظیم‌شده در جاوااسکریپت اضافه می‌شود */