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