/* LOGIN-NOTIF */

.login-notif {
    gap: 1rem;
    position: relative;
}

.login-notif::before {
    content: "";
    display: block;
    background-image: url("../img/svg/bg-user-menu.svg");
    background-size: cover;
    width: 270px;
    height: 14rem;
    position: absolute;
    top: -0.7rem;
    left: -0.7rem;
    z-index: 11;
    filter: drop-shadow(rgba(0, 0, 0, 0.08) 0px 4px 12px);
    opacity: 0;
    transition: 0.25s ease-in-out;
    visibility: hidden;
}

.login-notif::after {
    content: "";
    display: block;
    background-image: url("../img/svg/loginbef.svg");
    background-size: cover;
    width: 176px;
    height: 7rem;
    position: absolute;
    top: -0.5rem;
    left: -5.6px;
}

.sos::before {
    opacity: 1 !important;
    visibility: unset !important;
}

.sos:after {
    opacity: 0;
    visibility: hidden;
}

.sos .login-notif-details {
    opacity: 1 !important;
}

.sos .login-notif-details-header {
    opacity: 1 !important;
    visibility: unset !important;
}

.sos .login-notif-details {
    visibility: unset !important;
}

.login-notif-name:focus .login-notif::before {
    opacity: 1;
}

.sos .login-notif-name {
    transform: translateX(2rem);
}

.login-notif-header {
    gap: .5rem;
    transition: 0.25s ease-in-out;
    cursor: pointer;
    width: 17rem;
    justify-content: end;
}

.login-notif-header img {
    width: 6rem;
    z-index: 111;
}

.login-notif-name {
    transform: translateX(0);
    gap: .5rem;
    cursor: pointer;
    z-index: 1111;
    transition: 0.25s ease-in-out;
}

.login-notif-name span {
    max-width: 8rem;
    min-width: 7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-notif-details-header {
    z-index: 11;
    width: 270px;
    left: -0.7rem;
    top: 6.4rem;
    /*background-color: #ffff;*/
    opacity: 0;
    transition: 0.25s ease-in-out;
    color: #fff;
    font-weight: 520;
    filter: drop-shadow(0 0 7px #0772bfaa);
    text-shadow: 0 0 2px #000a;
    visibility: hidden;
}

.login-notif-details-header li {
    padding: 0.5rem 0;
}

.login-notif-details {
    padding: 1rem 0;
    width: 270px;
    left: -0.7rem;
    top: 13rem;
    background-color: white;
    border-radius: 0 0 var(--border-md) var(--border-md);
    opacity: 0;
    transition: 0.25s ease-in-out;
    filter: drop-shadow(rgba(0, 0, 0, 0.08) 0px 4px 12px);
    visibility: hidden;
}

.login-notif-details li i {
    vertical-align: middle;
}

.login-notif-details a {
    padding: 0.7rem;
    transition: 0.25s ease-in-out;
    display: block;
    border-radius: var(--border-sm);
}

.login-notif-details li {
    padding: 0.3rem 0;
}

.login-notif-details li a:hover {
    background-color: rgba(185, 185, 185, 0.44);
}

.login-notif-details hr {
    border: 0.5px solid #d9d9d96b !important;
}

.vl {
    border-left: 1px solid var(--bordergray);
    height: 2rem;
    width: 1rem;
}

.exit {
    color: var(--red) !important;
}

.price::after {
    content: "";
    background-image: url("../img/svg/toman.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.9rem;
    height: 1.5rem;
    margin-right: 0.4rem;
    filter: drop-shadow(0 0 5px #0772bfaa);
}

/* LOGIN-NOTIF END */