/* =========== © 2025 Centroarts.com - https://demo.kalataka.ru =========== */

/* --- 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); }