/* =========== © 2024 Centroarts.com =========== */

.puser {
	--puser-pad-y: 28px; --puser-pad-x: 20px;
	color: var(--text-color); overflow: hidden;
	position: relative; z-index: 1;
}
.puser-top { display: flex; align-items: flex-start; padding: var(--puser-pad-y) var(--puser-pad-x); padding-bottom: 24px; }
.puser-top-center { margin: 0 auto; }
.puser-top-left, .puser-top-right { display: flex; flex: 1; }
.puser-top-right { justify-content: flex-end; }

.puser-status-limit, .puser-status { font-size: var(--fs-sm); line-height: 24px; text-align: center; pointer-events: none; }
.puser-status { opacity: .7; }
.puser-status * { font-weight: inherit !important; color: inherit !important; }
.puser-status-limit { display: block; opacity: .5; margin-top: 0; font-size: 11px; line-height: 16px; }

.puser-online, .puser-offline { height: 24px; border-radius: 12px; padding: 6px; display: flex; align-items: center; font-size: 11px; font-weight: bold; text-transform: uppercase; }
.puser-online::before, .puser-offline::before { content: ""; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; }
.puser-online { color: var(--green-color); background-color: rgba(var(--green-color-rgb),0.1); }
.puser-offline { color: var(--yellow-color); background-color: rgba(var(--yellow-color-rgb),0.1); }
.puser-online::before { background-color: var(--green-color); }
.puser-offline::before { background-color: var(--yellow-color); }

.puser-btn-right {
	width: 40px; height: 40px; padding: 8px; margin: -8px -8px -8px 4px; color: inherit !important;
	border: 0 none !important; background: none !important;
	transition: opacity .2s ease;
}
.puser-btn-right:hover { opacity: .7; }

.puser-avatar {
	width: 124px; height: 124px; position: relative; z-index: 1; margin-bottom: 16px; background-color: rgba(var(--text-color-rgb),0.1);
	text-align: center; margin-left: auto; margin-right: auto; border-radius: 50%; box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

.puser-info { text-align: center; padding: 0 var(--puser-pad-x); }
.puser-login { font-size: var(--fs-xl); margin-bottom: 0; }

.logged-line { position: absolute; opacity: 0; height: 0; visibility: hidden; }
.logged-line + .puser .puser-message { display: none !important; }

.puser-button { padding: 0 var(--puser-pad-x); margin-top: var(--puser-pad-y); }

@media (min-width: 576px) {
	.puser-info { margin-bottom: var(--puser-pad-y); }
}

.puser-data { padding: calc(var(--puser-pad-y) - 20px) var(--puser-pad-x); }
.puser-data-item { display: flex; align-items: center; padding: 20px 0; }
.puser-data-icon {
	display: flex; align-items: center; justify-content: center;
	min-width: 48px; width: 48px; height: 48px; border-radius: 50%; background-color: rgba(var(--text-color-rgb),0.1);
	margin-right: 16px;
}
.puser-data-cont { font-weight: bold; }
.puser-data-cont::before { content: attr(title); display: block; font-weight: normal; }
.puser-data-icon svg { opacity: .5; }

.puser-bg { position: absolute; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; opacity: .15; pointer-events: none; }

@media (max-width: 767px) {
	.puser-data-item { border-top: 1px solid rgba(var(--text-color-rgb),0.1); }
	.puser-data-item:first-child { border-top-width: 0; }
}
@media (min-width: 500px) {
	.puser { --puser-pad-y: 32px; --puser-pad-x: 24px; }
}
@media (min-width: 576px) {
	.puser { --puser-pad-y: 36px; --puser-pad-x: 36px; }
	.page-user #userinfo {
		display: inherit; grid-template-rows: inherit; grid-template-columns: inherit; gap: inherit;
	}
	.page-user #userinfo > *:not(.g-item) { grid-column: auto/span var(--grid-cols); }
}
@media (min-width: 768px) {
	.puser-avatar { width: 140px; height: 140px; }
	.puser-button { display: flex; justify-content: center; }
	.puser-data { border-top: 1px solid rgba(var(--text-color-rgb),0.1); margin-top: var(--puser-pad-y); }
}

/* Login & User Modal */
html.sdo body { overflow: hidden; }
html.sdo #sdialog.modal .modal-box { transform: scale(1); opacity: 1; }
html.sdo #sdialog.modal .modal-over { opacity: 1; }

@media (max-width: 500px) {
	html.sdo #sdialog.modal { --drop-gap: 20px; }
}