/* =========================================================
   MyLinkz – account menu (header dropdown + profile page menu)
   Loaded on every page from inc/meta.php
   ========================================================= */

/* ---------- Trigger in the header: avatar + @username ---------- */
html body .xp-userprofile.mlm { width: auto !important; margin-right: 0 !important; }
.mlm-trigger {
	display: inline-flex; align-items: center; gap: 9px; max-width: 220px;
	padding: 4px 12px 4px 4px; border-radius: 999px; cursor: pointer; text-decoration: none !important;
	background: rgba(22, 17, 46, .06); border: 1px solid rgba(22, 17, 46, .10);
	transition: background .15s ease, box-shadow .15s ease;
}
.mlm-trigger:hover, .mlm-trigger:focus, .show > .mlm-trigger { background: rgba(108, 71, 255, .10); box-shadow: 0 0 0 3px rgba(108, 71, 255, .12); }
.mlm-trigger::after { display: none !important; }            /* hide Bootstrap caret */
.mlm-avatar {
	position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center; overflow: visible;
	background: linear-gradient(135deg, #6C47FF, #FF4F9A); color: #fff;
	font-family: "Bricolage Grotesque", Poppins, sans-serif; font-weight: 800; font-size: 14px; text-transform: uppercase;
}
.mlm-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mlm-avatar .mlm-online {
	position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
	background: #22C55E; border: 2px solid #fff;
}
.mlm-trigger-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; text-align: left; }
.mlm-trigger-name { font-family: Poppins, sans-serif; font-weight: 600; font-size: 13px; color: #16112E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.mlm-trigger-status { font-family: Poppins, sans-serif; font-size: 11px; font-weight: 600; color: #15803D; }
.mlm-chevron { color: #7A7596; font-size: 12px; transition: transform .2s ease; }
.show > .mlm-trigger .mlm-chevron { transform: rotate(180deg); }

/* Trigger on dark header (dashboard pages) */
.header .mlm-trigger { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.header .mlm-trigger:hover, .header .show > .mlm-trigger { background: rgba(255, 255, 255, .16); box-shadow: none; }
.header .mlm-trigger-name { color: #fff; }
.header .mlm-trigger-status { color: #4ADE80; }
.header .mlm-chevron { color: rgba(255, 255, 255, .6); }
.header .mlm-avatar .mlm-online { border-color: #16112E; }

@media (max-width: 430px) {
	.mlm-trigger { padding-right: 8px; gap: 7px; }
	.mlm-trigger-name { max-width: 84px; font-size: 12px; }
	.mlm-trigger-status { display: none; }
}
@media (max-width: 340px) { .mlm-trigger-text { display: none; } }

/* ---------- The dropdown panel ---------- */
html body .dropdown-menu.mlm-menu {
	width: 276px; max-width: calc(100vw - 24px); min-width: 0 !important; padding: 0; margin-top: 8px;
	border: 0; border-radius: 20px; overflow: visible; background: #fff;
	--mlm-arrow-right: 26px;
	box-shadow: 0 24px 60px rgba(22, 17, 46, .22), 0 0 0 1px rgba(22, 17, 46, .05);
	font-family: Poppins, system-ui, sans-serif; font-size: 14px; color: #16112E;
}
.mlm-head {
	position: relative; padding: 18px 18px 16px; color: #fff; border-radius: 20px 20px 0 0;
	background:
		radial-gradient(260px 120px at 100% 0%, rgba(255, 79, 154, .35), transparent 60%),
		radial-gradient(260px 140px at 0% 0%, rgba(108, 71, 255, .65), transparent 60%),
		#16112E;
}
.mlm-head-row { display: flex; align-items: center; gap: 12px; }
.mlm-head .mlm-avatar { width: 46px; height: 46px; font-size: 19px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.mlm-head .mlm-avatar .mlm-online { border-color: #16112E; width: 13px; height: 13px; }
.mlm-head-name { font-family: "Bricolage Grotesque", Poppins, sans-serif; font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 5px; min-width: 0; }
.mlm-head-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlm-head-name img { width: 16px; height: 16px; flex-shrink: 0; }
.mlm-head-sub { font-size: 12px; color: rgba(255, 255, 255, .7); }
.mlm-head-sub .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; margin-right: 5px; vertical-align: middle; }
.mlm-close {
	position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.mlm-close:hover { background: rgba(255, 255, 255, .22); }

.mlm-share { padding: 14px 16px 6px; }
.mlm-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9A95B3; margin: 0 2px 6px; }
html body .mlm-menu .copy-url-container {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
	padding: 9px 10px 9px 12px; border-radius: 12px; border: 1px solid #ECE9F6; background: #F7F5FD; font-size: 13px;
	transition: background .15s ease;
}
html body .mlm-menu .copy-url-container:hover { background: #F0ECFF; }
html body .mlm-menu .url-container { display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0; color: #16112E; font-weight: 500; }
html body .mlm-menu .url-container img { margin: 0; flex-shrink: 0; }
html body .mlm-menu .copy-text { flex-shrink: 0; font-size: 12px; font-weight: 600; color: #fff; background: #6C47FF; border-radius: 999px; padding: 4px 11px; }
html body .mlm-menu .copy-text.copy-text-success { background: #16A34A; color: #fff; }
.mlm-share-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 10px 14px;
	border-radius: 999px; background: #6C47FF; color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(108, 71, 255, .28);
}
.mlm-share-btn:hover { background: #5634E6; }

.mlm-links { padding: 8px; }
html body .mlm-menu .mlm-links .dropdown-item {
	display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px;
	color: #16112E; font-weight: 500; font-size: 15.5px; white-space: nowrap;
}
html body .mlm-menu .mlm-links .dropdown-item .mdi { width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; background: #F4F2FA; color: #6C47FF; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
html body .mlm-menu .mlm-links .dropdown-item .mdi:before { width: auto; }
html body .mlm-menu .mlm-links .dropdown-item:hover, html body .mlm-menu .mlm-links .dropdown-item:focus { background: #F3F0FF; color: #6C47FF; }
html body .mlm-menu .mlm-links .dropdown-item .ext { margin-left: auto; font-size: 12px; color: #9A95B3; }
html body .mlm-menu .mlm-links .dropdown-item.logout { color: #BE123C; }
html body .mlm-menu .mlm-links .dropdown-item.logout .mdi { background: #FFE4EE; color: #BE123C; }
.mlm-sep { height: 1px; background: #ECE9F6; margin: 6px 10px; }
.mlm-cta { padding: 12px 16px 16px; }
.mlm-cta strong { display: block; font-size: 15px; }
.mlm-cta small { display: block; color: #7A7596; margin-bottom: 12px; }
.mlm-cta .mlm-cta-row { display: flex; gap: 8px; }
.mlm-cta a { flex: 1; text-align: center; padding: 9px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none !important; }
.mlm-cta a.primary { background: #16112E; color: #fff !important; }
.mlm-cta a.secondary { background: #F3F1FA; color: #16112E !important; }
.mlm-foot { display: flex; justify-content: space-between; gap: 10px; padding: 11px 18px; border-radius: 0 0 20px 20px; background: #F7F5FD; border-top: 1px solid #ECE9F6; font-size: 12px; }
.mlm-foot a { color: #7A7596 !important; text-decoration: none !important; }
.mlm-foot a:hover { color: #6C47FF !important; }

/* Small arrow that points at the button that opened the menu */
html body .dropdown-menu.mlm-menu::before {
	content: ""; position: absolute; top: -6px; right: var(--mlm-arrow-right); width: 14px; height: 14px;
	background: #1E1740; border-radius: 3px; transform: rotate(45deg); z-index: -1;
}
/* Profile page: the ⋮ button is small, so the arrow sits closer to the edge */
html body .dropdown-menu.mlm-menu.mlm-menu-profile { --mlm-arrow-right: 11px; }

/* Grows out of the button instead of just appearing */
html body .dropdown-menu.mlm-menu.show { animation: mlmPop .18s cubic-bezier(.2, .9, .3, 1.2) both; }
/* uses translate/scale (not transform) so Bootstrap's positioning is untouched */
@keyframes mlmPop { from { opacity: 0; translate: 0 -6px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (prefers-reduced-motion: reduce) { html body .dropdown-menu.mlm-menu.show { animation: none; } }

/* Long usernames: the button never grows past its max width, names get "…" */
.mlm-trigger-text { max-width: 140px; }
.mlm-head-row > div { flex: 1; }