/* =========== © 2025 Centroarts.com - https://5play.org =========== */

/* --- Modal --- */
.modal-overlay {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: none;
    opacity: 0;
    background-color: var(--modal-overlay);
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal {
    --modal-pad: 40px;

    position: relative;
    pointer-events: all;
    width: 100%;
    max-width: var(--modal-w);
    border-radius: var(--modal-rd);
    background-color: hsl(var(--modal-bg));
    transform: scale(.98);
    transition: transform .3s ease;
}

.modal-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100%;
    pointer-events: none;
    padding: 8px;
}

.modal::after {
    pointer-events: none;
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    border: 1px solid;
    opacity: 0.07;
}

.modal-cont-pad {
    padding: var(--modal-pad, 40px);
}

@media (max-width: 767px) {
    .modal-side-pic {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .modal-side {
        display: flex;
        max-width: var(--modal-pc-w);
    }

    .modal-side-pic {
        position: relative;
        z-index: 1;
        color: hsl(var(--c-text-white));
        flex: 0 0 48%;
        max-width: 320px;
        overflow: hidden;
        background-color: hsl(var(--c-yellow));
        border-top-left-radius: inherit;
        border-bottom-left-radius: inherit;
    }

    .modal-side-pic .cover {
        position: absolute;
        inset: 0;
        z-index: -1;
        margin: 0;
        pointer-events: none;
        user-select: none;
    }

    .modal-logo {
        display: block;
        padding: 32px;
    }

    .modal-logo.im {
        --im-size: 32px;
        --im-color: hsl(var(--c-text-white));
    }

    .modal-cont {
        flex: 1 1 auto;
    }
}

.modal-open .modal-overlay {
    display: block;
    opacity: 1;
    visibility: visible;
}

.modal-open .modal {
    transform: scale(1);
}

.modal-open body {
    overflow: hidden;
}

/* Form Login */
.sep-text {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-3);
    line-height: 20px;
    height: 1px;
    margin-top: var(--modal-pad);
}

.sep-text>span {
    margin: 0 8px;
}

.sep-text>span::after {
    content: attr(title);
    opacity: .5;
}

.sep-text::after,
.sep-text::before {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background-color: var(--c-border);
}

.social-links {
    margin: calc(var(--modal-pad)/-1);
    margin-top: 0;
}

.social-links .soc-item:first-child {
    order: -1;
}

.social-links::before {
    content: "";
    height: 24px;
    width: 1px;
    background-color: var(--c-border);
}

.soc-item {
    flex: 1;
    padding: 32px;
    text-align: center;
}

.soc-item img {
    transition: transform .2s ease;
}

.soc-item:hover img {
    transform: scale(1.02);
}

/* --- USERPANEL --- */
.upanel-profile {
    --title-mb: 4px;
    padding: 32px;
    padding-bottom: 24px;
    text-align: center;
}

.upanel-admin {
    padding: 0 32px;
}

.upanel-menu {
    padding: 20px;
}

.upanel-profile+.upanel-menu {
    border-top: 1px solid hsla(var(--c-text), 0.1);
}

.upanel-status *,
.upanel-status {
    color: inherit !important;
    opacity: .7;
    font-size: var(--fs-2);
}

.upanel-profile .title {
    font-size: var(--fs-title-sect);
    display: block;
}

.upanel-profile .item-link:not(.title) {
    font-size: var(--fs-2);
    opacity: .7;
    transition: opacity .2s ease;
}

.upanel-profile .item-link:not(.title):hover {
    opacity: 1;
}

.upanel-profile .cover {
    max-width: 100px;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    margin-bottom: 8px;
}

.upanel-profile .mask {
    --mask-img: url(../img/icons/user-mask.svg);
    --mask-w: 100%;
    --mask-h: 100%;
    --mask-size: auto 100%;
}

.upanel-profile .mask:not(.cover) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: inherit;
    height: inherit;
}

.upanel-profile .mask {
    --mask-bg: hsla(var(--c-second), 0.2);
}

html.darkmod .upanel-profile .mask {
    --mask-bg: hsla(var(--c-text), 0.2);
}

/* --- Profile Card --- */
.dle-popup-userprofile .upanel-profile {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 16px;
    background-color: hsla(var(--c-second), 0.05);
    border-radius: 12px;
    margin-bottom: var(--uidialog-gap);
}

.dle-popup-userprofile .upanel-profile:hover {
    background-color: hsla(var(--c-second), 0.07);
}

html.darkmod .dle-popup-userprofile .upanel-profile {
    background-color: hsla(var(--c-text), 0.05);
}

html.darkmod .dle-popup-userprofile .upanel-profile:hover {
    background-color: hsla(var(--c-text), 0.07);
}

.dle-popup-userprofile .upanel-profile .cover {
    margin: 0;
    max-width: 64px;
    width: 64px;
    height: 64px;
}

.dle-popup-userprofile .upanel-profile .cont {
    padding: 0 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.usinf>li {
    padding: 12px 0;
}

.usinf>li:not(:first-child) {
    border-top: 1px solid var(--c-border);
}

.usinf>li:first-child {
    padding-top: 0;
}

.usinf>li:last-child {
    padding-bottom: 0;
}

.ui-c1,
.ui-c2 {
    display: block;
}

.ui-c1 {
    opacity: .7;
    font-size: var(--fs-2);
}