/* Event Registrations — registration module link list. Self-contained
   component so it's usable on any module page (mirrors components/event-detail.css).
   Prefixed nxtorigin-event-registrations- so it never collides with the
   central-hub / event-gate / booth-view styles. Dark-glass link rows. */

.nxtorigin-event-registrations {
	width: 100%;
	box-sizing: border-box;
}

.nxtorigin-event-registrations-heading {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nx-text-soft, #cdd6e3);
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nxtorigin-event-registrations-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nxtorigin-event-registrations-item {
	display: block;
}

.nxtorigin-event-registrations-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 16px;
	background: rgba(9, 18, 28, 0.72);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 12px;
	box-sizing: border-box;
	text-decoration: none;
	transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.nxtorigin-event-registrations-link:hover,
.nxtorigin-event-registrations-link:focus {
	background: rgba(15, 27, 40, 0.82);
	border-color: rgba(0, 229, 255, 0.28);
	transform: translateX(3px);
	text-decoration: none;
}

/* Module icon (inline SVG from nxtorigin_module_icon(); stroke follows color). */
.nxtorigin-event-registrations-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--nx-cyan, #9fe9f2);
	transition: color 0.25s ease;
}

.nxtorigin-event-registrations-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.nxtorigin-event-registrations-link:hover .nxtorigin-event-registrations-icon,
.nxtorigin-event-registrations-link:focus .nxtorigin-event-registrations-icon {
	color: var(--nx-text-soft, #ccf3f8);
}

.nxtorigin-event-registrations-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--nx-text-soft, #eef3f9);
	word-break: break-word;
}

/* Chevron affordance so each row reads as a link. */
.nxtorigin-event-registrations-link::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--nx-cyan, #9fe9f2);
	border-bottom: 2px solid var(--nx-cyan, #9fe9f2);
	transform: rotate(-45deg);
	opacity: 0.6;
	transition: opacity 0.25s ease;
}

.nxtorigin-event-registrations-link:hover::after,
.nxtorigin-event-registrations-link:focus::after {
	opacity: 1;
}

@media (max-width: 600px) {
	.nxtorigin-event-registrations-name {
		font-size: 15px;
	}
}

/* ============================================================================
   "Register As" dropdown variant (default layout). The toggle reveals the link
   list on hover (CSS) and on click/tap (.is-open added by the JS).
   ========================================================================== */

.nxtorigin-event-registrations--dropdown {
	position: relative;
	display: inline-block;
	width: auto;
}

.nxtorigin-event-registrations-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 13px 18px;
	background: linear-gradient(135deg, var(--nx-emerald, #06d6a0), var(--nx-cyan, #22d3ee));
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 12px;
	cursor: pointer;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--nx-text-soft, #03131a);
	box-shadow: 0 4px 20px rgba(6, 214, 160, 0.25);
	transition: border-color 0.25s ease, background 0.25s ease;
}

.nxtorigin-event-registrations--dropdown:hover .nxtorigin-event-registrations-toggle,
.nxtorigin-event-registrations--dropdown.is-open .nxtorigin-event-registrations-toggle,
.nxtorigin-event-registrations-toggle:focus-visible {
	background: linear-gradient(135deg, var(--nx-emerald, #06d6a0), var(--nx-cyan, #22d3ee));
	border-color: rgba(255, 255, 255, 0.34);
	box-shadow: 0 8px 32px rgba(6, 214, 160, 0.35);
	outline: none;
}

/* Caret on the toggle, rotates when open. */
.nxtorigin-event-registrations-caret {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: -3px;
	border-right: 2px solid var(--nx-text-soft, #03131a);
	border-bottom: 2px solid var(--nx-text-soft, #03131a);
	transform: rotate(45deg);
	transition: transform 0.25s ease, opacity 0.25s ease;
	opacity: 0.7;
}

.nxtorigin-event-registrations--dropdown:hover .nxtorigin-event-registrations-caret,
.nxtorigin-event-registrations--dropdown.is-open .nxtorigin-event-registrations-caret {
	transform: rotate(-135deg);
	margin-top: 3px;
	opacity: 1;
}

/* The menu: anchored under the toggle, hidden until hover/.is-open. The
   transparent padding-top bridges the visual gap so hover doesn't drop while
   moving from the toggle to the list. */
.nxtorigin-event-registrations--dropdown .nxtorigin-event-registrations-list {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	/*
	 * Size to the longest label, not to a fixed floor.
	 *
	 * At a flat 260px "Live Streamer Registration" wrapped onto two lines and
	 * the list read as cramped on a 1920px screen with room all around it. The
	 * menu now takes the width its content needs, keeps 260px as a minimum so
	 * short lists still look deliberate, and is capped so a long module name
	 * cannot stretch it across the page.
	 *
	 * max-content alone was not enough: the rows are `width: 100%` flex links
	 * whose label carries `word-break: break-word` and `min-width: 0`, so the
	 * list's intrinsic width collapsed and it fell back to the 260px minimum —
	 * which is why the longest label kept wrapping. The label is held on one
	 * line below, which is what actually forces the list wider.
	 */
	width: max-content;
	min-width: 260px;
	max-width: min(92vw, 420px);
	padding-top: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.nxtorigin-event-registrations--dropdown .nxtorigin-event-registrations-link {
	background: linear-gradient(135deg, var(--nx-emerald, #06d6a0), var(--nx-cyan, #22d3ee));
	border-color: rgba(255, 255, 255, 0.34);
	box-shadow: 0 4px 20px rgba(6, 214, 160, 0.2);
}

.nxtorigin-event-registrations--dropdown .nxtorigin-event-registrations-link:hover,
.nxtorigin-event-registrations--dropdown .nxtorigin-event-registrations-link:focus {
	background: linear-gradient(135deg, var(--nx-emerald, #06d6a0), var(--nx-cyan, #22d3ee));
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 8px 26px rgba(6, 214, 160, 0.3);
}

.nxtorigin-event-registrations--dropdown .nxtorigin-event-registrations-name {
	color: var(--nx-text-soft, #03131a);
}

.nxtorigin-event-registrations--dropdown .nxtorigin-event-registrations-link::after {
	border-right-color: var(--nx-text-soft, #03131a);
	border-bottom-color: var(--nx-text-soft, #03131a);
}

/*
 * One line per row. The shared label style wraps (`word-break: break-word`) so
 * the LIST layout can use narrow columns; in the dropdown that wrapping is what
 * made "Live Streamer Registration" two lines tall while the menu stayed at its
 * minimum width. Here the label refuses to break, so the menu has to grow to
 * fit it — which is the behaviour `width: max-content` was reaching for.
 * Below 600px the phone rule lets it wrap again, because there the menu is as
 * wide as the screen allows and wrapping is the correct outcome.
 */
.nxtorigin-event-registrations--dropdown .nxtorigin-event-registrations-name {
	white-space: nowrap;
	word-break: normal;
}

/* Dropdown rows are bright-gradient with dark text — the icon follows suit. */
.nxtorigin-event-registrations--dropdown .nxtorigin-event-registrations-icon,
.nxtorigin-event-registrations--dropdown .nxtorigin-event-registrations-link:hover .nxtorigin-event-registrations-icon,
.nxtorigin-event-registrations--dropdown .nxtorigin-event-registrations-link:focus .nxtorigin-event-registrations-icon {
	color: var(--nx-text-soft, #03131a);
}

.nxtorigin-event-registrations--dropdown:hover .nxtorigin-event-registrations-list,
.nxtorigin-event-registrations--dropdown.is-open .nxtorigin-event-registrations-list,
.nxtorigin-event-registrations--dropdown:focus-within .nxtorigin-event-registrations-list {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* ============================================================================
   The "Register As" dropdown on small screens.
 
   This variant had no breakpoint of its own — the 600px rule above governs the
   LIST layout only. So on a phone the toggle stayed `inline-block` at its text
   width while the buttons beside it went full width, and its menu kept a
   260px floor anchored `left: 0`, which does not fit beside anything on a
   360px handset.
 
   The toggle now fills its container like its neighbours, and the menu takes
   the toggle's width rather than a fixed floor. It stays absolutely positioned
   — becoming inline would push the page down on open, which is a different
   control, not a smaller one.
   ========================================================================== */
@media (max-width: 600px) {
	.nxtorigin-event-registrations--dropdown {
		display: block;
		width: 100%;
	}

	.nxtorigin-event-registrations-toggle {
		width: 100%;
		justify-content: center;
	}

	.nxtorigin-event-registrations--dropdown .nxtorigin-event-registrations-list {
		right: 0;
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	/* A long module name wraps rather than widening the row past the screen. */
	.nxtorigin-event-registrations--dropdown .nxtorigin-event-registrations-name {
		white-space: normal;
		word-break: break-word;
		overflow-wrap: anywhere;
	}
}