```css
/* =========================================================
   ATRA DESKTOP ACCOUNT
   Premium / RTL / WooCommerce / Elementor Safe
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

.atra-account--desktop {

    --atra-account-navy: #0b132b;
    --atra-account-blue: #00b4d8;
    --atra-account-blue-dark: #0096b7;
    --atra-account-text: #172033;
    --atra-account-muted: #718096;
    --atra-account-white: #ffffff;

    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    direction: rtl !important;

    font-family: inherit !important;

    box-sizing: border-box !important;
}


/* =========================================================
   GLOBAL RESET
   ========================================================= */

.atra-account--desktop,
.atra-account--desktop *,
.atra-account--desktop *::before,
.atra-account--desktop *::after {

    box-sizing: border-box !important;
}


/* =========================================================
   ACCOUNT LINK
   ========================================================= */

.atra-account--desktop .atra-account__link {

    position: relative !important;

    display: inline-flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 9px !important;

    width: auto !important;

    min-width: 148px !important;

    height: 48px !important;

    margin: 0 !important;

    padding: 5px 9px !important;

    direction: rtl !important;

    cursor: pointer !important;

    text-decoration: none !important;

    color: var(--atra-account-text) !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbfd 100%
        ) !important;

    border: 1px solid rgba(11, 19, 43, 0.10) !important;

    border-radius: 13px !important;

    box-shadow:
        0 3px 12px rgba(11, 19, 43, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;

    outline: none !important;

    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease !important;
}


/* =========================================================
   LOGGED OUT
   ========================================================= */

.atra-account--desktop.is-logged-out
.atra-account__link {

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f3fbfd 100%
        ) !important;

    border-color:
        rgba(0, 180, 216, 0.20) !important;

    box-shadow:
        0 4px 15px rgba(11, 19, 43, 0.07),
        0 1px 4px rgba(0, 180, 216, 0.04) !important;
}


/* =========================================================
   LOGGED IN
   ========================================================= */

.atra-account--desktop.is-logged-in
.atra-account__link {

    background:
        linear-gradient(
            135deg,
            #f0fcff 0%,
            #ffffff 100%
        ) !important;

    border-color:
        rgba(0, 180, 216, 0.28) !important;

    box-shadow:
        0 5px 18px rgba(0, 180, 216, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.atra-account--desktop .atra-account__link:hover {

    color: var(--atra-account-blue-dark) !important;

    background:
        linear-gradient(
            135deg,
            #eafaff 0%,
            #ffffff 100%
        ) !important;

    border-color:
        rgba(0, 180, 216, 0.42) !important;

    box-shadow:
        0 8px 24px rgba(0, 180, 216, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

    transform: translateY(-1px) !important;

    text-decoration: none !important;
}


/* =========================================================
   REMOVE THEME / ELEMENTOR PSEUDO ELEMENTS
   ========================================================= */

.atra-account--desktop .atra-account__link::before,
.atra-account--desktop .atra-account__link::after {

    content: none !important;

    display: none !important;
}


/* =========================================================
   FOCUS
   ========================================================= */

.atra-account--desktop .atra-account__link:focus {

    outline: none !important;

    text-decoration: none !important;
}


.atra-account--desktop .atra-account__link:focus-visible {

    color: var(--atra-account-blue-dark) !important;

    border-color:
        rgba(0, 180, 216, 0.45) !important;

    box-shadow:
        0 0 0 3px rgba(0, 180, 216, 0.13),
        0 6px 18px rgba(0, 180, 216, 0.10) !important;

    transform: none !important;
}


/* =========================================================
   ACTIVE
   ========================================================= */

.atra-account--desktop .atra-account__link:active {

    transform: translateY(0) !important;

    box-shadow:
        0 2px 7px rgba(11, 19, 43, 0.08) !important;
}


/* =========================================================
   ACCOUNT ICON
   ========================================================= */

.atra-account--desktop .atra-account__icon {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 36px !important;

    height: 36px !important;

    min-width: 36px !important;

    flex: 0 0 36px !important;

    color: var(--atra-account-navy) !important;

    background:
        linear-gradient(
            145deg,
            #f4f7fa,
            #ffffff
        ) !important;

    border:
        1px solid rgba(11, 19, 43, 0.09) !important;

    border-radius: 10px !important;

    box-shadow:
        0 2px 7px rgba(11, 19, 43, 0.06) !important;

    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease !important;
}


/* =========================================================
   LOGGED OUT ICON
   ========================================================= */

.atra-account--desktop.is-logged-out
.atra-account__icon {

    color: var(--atra-account-blue-dark) !important;

    background:
        linear-gradient(
            145deg,
            #e9faff,
            #ffffff
        ) !important;

    border-color:
        rgba(0, 180, 216, 0.20) !important;

    box-shadow:
        0 2px 8px rgba(0, 180, 216, 0.08) !important;
}


/* =========================================================
   LOGGED IN ICON
   ========================================================= */

.atra-account--desktop.is-logged-in
.atra-account__icon {

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #00b4d8,
            #0096b7
        ) !important;

    border-color:
        rgba(0, 150, 183, 0.45) !important;

    box-shadow:
        0 4px 10px rgba(0, 180, 216, 0.22) !important;
}


/* =========================================================
   ICON HOVER
   ========================================================= */

.atra-account--desktop .atra-account__link:hover
.atra-account__icon {

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #00b4d8,
            #0096b7
        ) !important;

    border-color:
        rgba(0, 150, 183, 0.45) !important;

    box-shadow:
        0 5px 12px rgba(0, 180, 216, 0.20) !important;

    transform: scale(1.035) !important;
}


/* =========================================================
   ICON SVG
   ========================================================= */

.atra-account--desktop .atra-account__icon svg {

    display: block !important;

    width: 19px !important;

    height: 19px !important;

    max-width: 19px !important;

    max-height: 19px !important;

    color: currentColor !important;

    stroke: currentColor !important;

    fill: none !important;

    overflow: visible !important;
}


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

.atra-account--desktop .atra-account__content {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: center !important;

    min-width: 0 !important;

    max-width: 115px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    line-height: 1 !important;

    text-align: right !important;
}


/* =========================================================
   LABEL
   ========================================================= */

.atra-account--desktop .atra-account__label {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    color: var(--atra-account-text) !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    line-height: 1.5 !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;

    text-decoration: none !important;
}


/* =========================================================
   LOGGED OUT HINT
   ========================================================= */

.atra-account--desktop.is-logged-out
.atra-account__hint {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 1px 0 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    color: var(--atra-account-muted) !important;

    font-size: 9px !important;

    font-weight: 500 !important;

    line-height: 1.5 !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;
}


/* =========================================================
   LOGGED IN HINT / USER NAME
   ========================================================= */

.atra-account--desktop.is-logged-in
.atra-account__hint {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 1px 0 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    color: var(--atra-account-blue-dark) !important;

    font-size: 9px !important;

    font-weight: 600 !important;

    line-height: 1.5 !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;
}


/* =========================================================
   ARROW
   RTL → LEFT
   ========================================================= */

.atra-account--desktop .atra-account__arrow {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 18px !important;

    height: 18px !important;

    min-width: 18px !important;

    flex: 0 0 18px !important;

    color: #8d99aa !important;

    transition:
        color 180ms ease,
        transform 180ms ease !important;
}


/* =========================================================
   ARROW HOVER
   ========================================================= */

.atra-account--desktop .atra-account__link:hover
.atra-account__arrow {

    color: var(--atra-account-blue) !important;

    transform: translateX(-2px) !important;
}


/* =========================================================
   ARROW SVG
   ========================================================= */

.atra-account--desktop .atra-account__arrow svg {

    display: block !important;

    width: 14px !important;

    height: 14px !important;

    max-width: 14px !important;

    max-height: 14px !important;

    color: currentColor !important;

    stroke: currentColor !important;

    fill: none !important;

    overflow: visible !important;
}


/* =========================================================
   LINK SAFETY
   ========================================================= */

.atra-account--desktop .atra-account__link,
.atra-account--desktop .atra-account__link:hover,
.atra-account--desktop .atra-account__link:focus,
.atra-account--desktop .atra-account__link:active,
.atra-account--desktop .atra-account__link:visited {

    text-decoration: none !important;
}


/* =========================================================
   ELEMENTOR / THEME LINK RESET
   ========================================================= */

.atra-account--desktop a {

    font-family: inherit !important;

    letter-spacing: normal !important;

    text-transform: none !important;

    text-shadow: none !important;
}


/* =========================================================
   PREVENT EXTERNAL PSEUDO ELEMENTS
   ========================================================= */

.atra-account--desktop a::before,
.atra-account--desktop a::after {

    content: none !important;

    display: none !important;
}


/* =========================================================
   DESKTOP ONLY
   ========================================================= */

@media (max-width: 1024px) {

    .atra-account--desktop {

        display: none !important;
    }
}


/* =========================================================
   COMPACT DESKTOP
   ========================================================= */

@media (min-width: 1025px) and (max-width: 1200px) {

    .atra-account--desktop .atra-account__link {

        min-width: 130px !important;

        gap: 7px !important;

        padding: 5px 7px !important;
    }


    .atra-account--desktop .atra-account__content {

        max-width: 88px !important;
    }


    .atra-account--desktop .atra-account__arrow {

        display: none !important;
    }


    .atra-account--desktop .atra-account__icon {

        width: 34px !important;

        height: 34px !important;

        min-width: 34px !important;

        flex-basis: 34px !important;
    }
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

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

    .atra-account--desktop *,
    .atra-account--desktop *::before,
    .atra-account--desktop *::after {

        transition: none !important;

        animation: none !important;
    }
}
```