/* ==========================================================
   FONT
========================================================== */

@font-face {
    font-family: "Kalameh";
    src: url("https://drgraphic.net/wp-content/uploads/2026/08/KalamehWeb-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================
   VARIABLES
========================================================== */

.dg-user-panel {

    --dg-user-primary: #533AE8;
    --dg-user-white: #FFFFFF;

    --dg-user-text: #18181B;
    --dg-user-muted: #777782;

    --dg-user-border:
        rgba(83, 58, 232, 0.14);

    --dg-user-soft:
        rgba(83, 58, 232, 0.065);

    --dg-user-hover:
        rgba(83, 58, 232, 0.085);

    --dg-user-danger:
        #E5484D;

    --dg-user-menu-width:
        330px;

    --dg-user-radius:
        18px;

    --dg-user-shadow:
        0 18px 55px rgba(20,15,60,.12),
        0 4px 16px rgba(20,15,60,.05);


    position: relative;

    display: inline-flex;

    width: auto;

    direction: rtl;

    font-family:
        "Kalameh",
        sans-serif !important;

    z-index: 999998;

}


.dg-user-panel *,
.dg-user-panel *::before,
.dg-user-panel *::after {

    box-sizing: border-box;

    font-family:
        "Kalameh",
        sans-serif !important;

}


/* ==========================================================
   TRIGGER
========================================================== */

.dg-user-panel__trigger {

    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin: 0 !important;

    padding: 0 14px !important;

    border:
        1px solid
        var(--dg-user-border) !important;

    border-radius: 14px !important;

    background:
        var(--dg-user-white) !important;

    color:
        var(--dg-user-primary) !important;

    outline: none !important;

    text-decoration: none !important;

    white-space: nowrap;

    cursor: pointer;

    box-shadow: none;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;

}


.dg-user-panel__trigger:hover,
.dg-user-panel.is-open
.dg-user-panel__trigger {

    background:
        var(--dg-user-soft) !important;

    border-color:
        rgba(83,58,232,.30) !important;

    color:
        var(--dg-user-primary) !important;

    box-shadow:
        0 5px 18px
        rgba(83,58,232,.08);

}


.dg-user-panel__trigger:active {

    transform: scale(.98);

}


.dg-user-panel__trigger-text {

    color: inherit !important;

    font-size: 13px;

    font-weight: 400;

    line-height: 1;

}


/* ==========================================================
   TRIGGER ICON
========================================================== */

.dg-user-panel__trigger-icon {

    width: 21px;
    height: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 21px;

}


.dg-user-panel__trigger-icon svg {

    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* ==========================================================
   TRIGGER ARROW
========================================================== */

.dg-user-panel__trigger-arrow {

    width: 15px;
    height: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 1px;

    transition:
        transform .18s ease;

}


.dg-user-panel__trigger-arrow svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

}


.dg-user-panel.is-open
.dg-user-panel__trigger-arrow {

    transform:
        rotate(180deg);

}


/* ==========================================================
   MENU
========================================================== */

.dg-user-panel__menu {

    position: fixed;

    width:
        var(--dg-user-menu-width);

    padding: 9px;

    background:
        var(--dg-user-white);

    border:
        1px solid
        var(--dg-user-border);

    border-radius:
        var(--dg-user-radius);

    box-shadow:
        var(--dg-user-shadow);

    overflow: hidden;

    z-index: 1000001;

    opacity: 0;

    transform:
        translateY(-7px)
        scale(.985);

    transform-origin:
        top left;

    transition:
        opacity .18s ease,
        transform .18s ease;

}


.dg-user-panel__menu.dg-visible {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

}


/* ==========================================================
   MENU ITEMS
========================================================== */

.dg-user-panel__item {

    position: relative;

    width: 100%;

    min-height: 52px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 7px 9px;

    border-radius: 12px;

    background: transparent;

    color:
        var(--dg-user-text) !important;

    text-decoration: none !important;

    outline: none;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;

}


.dg-user-panel__item:hover,
.dg-user-panel__item:focus {

    background:
        var(--dg-user-hover);

    color:
        var(--dg-user-primary) !important;

}


.dg-user-panel__item:active {

    transform:
        scale(.99);

}


/* ==========================================================
   ITEM ICON
========================================================== */

.dg-user-panel__item-icon {

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        var(--dg-user-soft);

    color:
        var(--dg-user-primary);

}


.dg-user-panel__item-icon svg {

    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* ==========================================================
   ITEM CONTENT
========================================================== */

.dg-user-panel__item-content {

    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;

    color: inherit;

    font-size: 13px;

    line-height: 1.6;

}


.dg-user-panel__item-title {

    display: block;

}


.dg-user-panel__item-arrow {

    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #AAAAB4;

    transition:
        transform .15s ease,
        color .15s ease;

}


.dg-user-panel__item:hover
.dg-user-panel__item-arrow {

    color:
        var(--dg-user-primary);

    transform:
        translateX(-2px);

}


.dg-user-panel__item-arrow svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* ==========================================================
   WALLET
========================================================== */

.dg-user-panel__wallet-value {

    margin-top: 1px;

    color:
        var(--dg-user-primary);

    font-size: 11px;

    line-height: 1.5;

}


/* ==========================================================
   DIVIDER
========================================================== */

.dg-user-panel__divider {

    height: 1px;

    margin: 6px 7px;

    background: #F0EFF8;

}


/* ==========================================================
   LOGOUT
========================================================== */

.dg-user-panel__item--logout {

    color:
        var(--dg-user-danger) !important;

}


.dg-user-panel__item--logout
.dg-user-panel__item-icon {

    background:
        rgba(229,72,77,.07);

    color:
        var(--dg-user-danger);

}


.dg-user-panel__item--logout:hover {

    background:
        rgba(229,72,77,.07);

    color:
        var(--dg-user-danger) !important;

}


/* ==========================================================
   MOBILE BACKDROP
========================================================== */

.dg-user-panel__backdrop {

    display: none;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

    .dg-user-panel__trigger {

        min-height: 42px;

        padding:
            0 12px !important;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .dg-user-panel__trigger {

        min-height: 42px;

        padding:
            0 11px !important;

        gap: 7px;

    }


    .dg-user-panel__trigger-text {

        font-size: 12px;

    }


    .dg-user-panel__menu {

        width:
            calc(100vw - 24px);

        max-width: none;

        height: auto;

        max-height: auto;

        padding: 10px;

        border-radius: 20px;

        overflow-y: auto;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;

        transform-origin:
            top center;

    }


    .dg-user-panel__item {

        min-height: 54px;

    }


    .dg-user-panel__backdrop {

        position: fixed;

        inset: 0;

        z-index: 1000000;

        background:
            rgba(83,58,232,.07);

        backdrop-filter:
            blur(2px);

        -webkit-backdrop-filter:
            blur(2px);

        opacity: 0;

        pointer-events: none;

        transition:
            opacity .18s ease;

    }


    .dg-user-panel.is-open
    .dg-user-panel__backdrop {

        display: block;

        opacity: 1;

        pointer-events: auto;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .dg-user-panel__trigger {

        padding:
            0 10px !important;

    }


    .dg-user-panel__trigger-icon {

        width: 19px;
        height: 19px;

        flex-basis: 19px;

    }


    .dg-user-panel__trigger-icon svg {

        width: 19px;
        height: 19px;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .dg-user-panel *,
    .dg-user-panel *::before,
    .dg-user-panel *::after {

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;

    }

}


.dg-user-panel__menu[hidden] { display: none !important; }
.dg-user-panel__menu { height: auto !important; min-height: 0 !important; max-height: min(640px,calc(100dvh - 105px)) !important; overflow-y: auto !important; overscroll-behavior: contain; }
.dg-user-panel__item { flex-shrink:0; }
@media(max-width:767px){ .dg-user-panel__menu{width:calc(100vw - 24px)!important; height:auto!important; max-height:calc(100dvh - 110px)!important;} }