/**
 * Nexio Account Builder — structural defaults for all three widgets.
 * Colors/sizing are overridable from each widget's Style tab.
 */

.nexio-account__editor-badge {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #eef2ff;
	color: #4338ca;
	font-size: 12px;
	font-weight: 600;
}

.nexio-account__logged-out {
	opacity: 0.7;
}

/* ---------- Shared card ---------- */

.nexio-account__card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	padding: 22px 24px;
}

.nexio-account__card-title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
}

.nexio-account__card-sub {
	margin: 0 0 16px;
	opacity: 0.65;
	font-size: 13.5px;
}

.nexio-account__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.nexio-account__card-link {
	font-size: 13px;
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
}

.nexio-account__empty,
.nexio-account__empty-state {
	opacity: 0.65;
	font-size: 14px;
}

.nexio-account__empty-state {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px 0;
}

/* ---------- Buttons ---------- */

.nexio-account button.nexio-account__button,
a.nexio-account__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.nexio-account__button--primary {
	background: #111;
	border-color: #111;
	color: #fff;
}

.nexio-account__button--primary:hover {
	opacity: 0.88;
	color: #fff;
}

.nexio-account__button--secondary {
	background: transparent;
	border-color: rgba(0, 0, 0, 0.18);
	color: inherit;
}

.nexio-account__button--secondary:hover {
	background: rgba(0, 0, 0, 0.04);
}

.nexio-account__button--ghost {
	background: transparent;
	border-color: transparent;
	color: inherit;
	text-decoration: underline;
	padding-left: 6px;
	padding-right: 6px;
}

.nexio-account__button--danger {
	background: #b91c1c;
	border-color: #b91c1c;
	color: #fff;
}

.nexio-account__button--danger:hover {
	opacity: 0.9;
	color: #fff;
}

.nexio-account__button:focus-visible,
a.nexio-account__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.nexio-account__button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---------- Badges ---------- */

.nexio-account__badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.nexio-account__badge--category {
	background: #e0e7ff;
	color: #4338ca;
	margin-bottom: 0;
}

.nexio-account__download-card .nexio-account__badge--category {
	margin-bottom: 8px;
}

.nexio-account__badge--status {
	background: #f3f4f6;
	color: #374151;
	text-transform: capitalize;
}

/* ================================================================
 * PROFILE WIDGET
 * ============================================================= */

.nexio-account__profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 24px;
	background: #141414;
	color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
}

.nexio-account__profile-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 10px;
}

.nexio-account__profile-name {
	font-size: 16px;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}

.nexio-account__profile-email {
	font-size: 13px;
	opacity: 0.65;
}

.nexio-account__profile-badge,
.nexio-account__profile .nexio-account__profile-badge {
	background: rgba(255, 255, 255, 0.14);
}

.nexio-account__profile-badge {
	display: inline-flex;
	margin-top: 10px;
	padding: 4px 14px;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

/* ================================================================
 * NAVIGATION WIDGET
 * ============================================================= */

.nexio-account__nav {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	padding: 12px;
}

.nexio-account__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nexio-account__nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nexio-account__nav-link:hover {
	background: rgba(0, 0, 0, 0.04);
}

.nexio-account__nav-link.is-active {
	background: #111;
	color: #fff;
}

.nexio-account__nav-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.nexio-account__nav-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.nexio-account__nav-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.nexio-account__nav-divider {
	height: 1px;
	margin: 8px 0;
	background: rgba(0, 0, 0, 0.08);
	list-style: none;
}

/* Mobile nav toggle button — only shown (and only takes over layout)
 * in Dropdown mode; the other three modes never display it, and its
 * list is ALWAYS visible by default so a JS failure never hides
 * navigation entirely. */

.nexio-account__nav-toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.nexio-account__nav-toggle-icon {
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.nexio-account__nav--open .nexio-account__nav-toggle-icon {
	transform: rotate(-135deg);
}

@media (max-width: 767px) {
	.nexio-account-nav-mobile-scroll .nexio-account__nav-list {
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}

	.nexio-account-nav-mobile-scroll .nexio-account__nav-divider {
		width: 1px;
		height: auto;
		margin: 0 8px;
	}

	.nexio-account-nav-mobile-dropdown .nexio-account__nav-toggle {
		display: flex;
	}

	/* Collapsed only once JS confirms the toggle works (adds .js-ready
	 * to .nexio-account__nav itself) — otherwise the full list stays
	 * visible, so a script error never hides account navigation.
	 * prefix_class lands on an ANCESTOR wrapper, hence the descendant
	 * selector rather than a single compound class. */
	.nexio-account-nav-mobile-dropdown .nexio-account__nav.js-ready .nexio-account__nav-list {
		display: none;
		margin-top: 8px;
	}

	.nexio-account-nav-mobile-dropdown .nexio-account__nav.js-ready.nexio-account__nav--open .nexio-account__nav-list {
		display: flex;
	}
}

/* ================================================================
 * CONTENT WIDGET — shared layout
 * ============================================================= */

.nexio-account-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Welcome banner */

.nexio-account__banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 26px 28px;
	background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
	color: #fff;
	border-radius: 14px;
}

.nexio-account__banner-title {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 700;
}

.nexio-account__banner-sub,
.nexio-account__banner-since {
	margin: 0;
	opacity: 0.75;
	font-size: 13.5px;
}

.nexio-account__banner .nexio-account__badge {
	background: rgba(255, 255, 255, 0.15);
	flex-shrink: 0;
}

.nexio-account__badge--banner {
	align-self: flex-start;
	margin-bottom: 10px;
	background: #6366f1;
}

.nexio-account__banner-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Rows (Overview: recent downloads list) */

.nexio-account__rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nexio-account__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
}

.nexio-account__row-meta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.nexio-account__row-thumb,
.nexio-account__download-thumb {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.05);
}

.nexio-account__row-thumb img,
.nexio-account__download-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nexio-account__row-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nexio-account__row-title,
.nexio-account__download-title {
	font-weight: 600;
	font-size: 14.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nexio-account__row-date,
.nexio-account__download-date {
	font-size: 12.5px;
	opacity: 0.6;
}

.nexio-account__row-action {
	flex-shrink: 0;
}

/* Icon-only circular download button (reference design). */

.nexio-account a.nexio-account__icon-btn,
.nexio-account__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #141414;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	list-style: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.nexio-account__icon-btn:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

.nexio-account__icon-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

summary.nexio-account__icon-btn::-webkit-details-marker {
	display: none;
}

.nexio-account__icon-download {
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.nexio-account__file-menu {
	position: relative;
}

.nexio-account__file-menu .nexio-account__file-list {
	position: absolute;
	right: 0;
	z-index: 20;
	min-width: 200px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Order rows */

.nexio-account__order-rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nexio-account__order-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.nexio-account__order-icon {
	position: relative;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #141414;
}

.nexio-account__order-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 15px;
	height: 15px;
	background-color: #fff;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.nexio-account__order-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.nexio-account__order-title {
	font-weight: 600;
	font-size: 14.5px;
}

.nexio-account__order-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12.5px;
	opacity: 0.65;
}

.nexio-account__order-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Pagination */

.nexio-account__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 18px;
}

.nexio-account__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 9px;
	background: #fff;
	color: #3f4147;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	text-decoration: none;
}

.nexio-account__page.is-active {
	background: #1b1b1f;
	border-color: #1b1b1f;
	color: #fff;
}

/* ================================================================
 * DOWNLOADS VIEW
 * ============================================================= */

.nexio-account__downloads-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.nexio-account__downloads-count {
	font-size: 13px;
	opacity: 0.6;
}

.nexio-account__downloads-filters {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 0 4px;
}

.nexio-account__downloads-filters input[type="search"] {
	padding-left: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px;
}

.nexio-account__downloads-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nexio-account button.nexio-account__chip {
	appearance: none;
	padding: 6px 16px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 13px;
	cursor: pointer;
}

.nexio-account__chip.is-active {
	background: #111;
	border-color: #111;
	color: #fff;
}

.nexio-account__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}

.nexio-account__download-card {
	display: flex;
	flex-direction: column;
	padding: 14px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
}

.nexio-account__download-thumb {
	width: 100%;
	height: 140px;
	border-radius: 10px;
	margin-bottom: 10px;
}

.nexio-account__download-card .nexio-account__download-btn,
.nexio-account__download-card details {
	margin-top: 10px;
}

.nexio-account__file-menu summary {
	list-style: none;
	cursor: pointer;
}

.nexio-account__file-menu summary::-webkit-details-marker {
	display: none;
}

.nexio-account__file-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 8px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
}

.nexio-account__file-list a {
	display: block;
	padding: 6px 8px;
	color: inherit;
	text-decoration: none;
	font-size: 13px;
	border-radius: 6px;
}

.nexio-account__file-list a:hover {
	background: rgba(0, 0, 0, 0.05);
}

/* ================================================================
 * GUEST LOGIN / REGISTER
 * ============================================================= */

.nexio-account__lost-password {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	color: inherit;
}

/* ================================================================
 * FORMS (Settings, Notifications)
 * ============================================================= */

.nexio-account__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nexio-account__form > .nexio-account__button--primary {
	align-self: flex-end;
}

.nexio-account__form > .nexio-account__button--danger {
	align-self: flex-end;
}

.nexio-account__form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

.nexio-account__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.nexio-account__field label {
	font-size: 13px;
	font-weight: 600;
}

.nexio-account__input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	background: #fff;
	color: inherit;
}

.nexio-account__input:focus {
	outline: none;
	border-color: rgba(0, 0, 0, 0.5);
}

.nexio-account__input:disabled {
	opacity: 0.6;
	background: rgba(0, 0, 0, 0.03);
}

.nexio-account__password-wrap {
	position: relative;
	display: flex;
}

.nexio-account__password-wrap .nexio-account__input {
	padding-right: 60px;
}

.nexio-account__password-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	appearance: none;
	border: none;
	background: transparent;
	color: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 8px;
}

.nexio-account__checkbox {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13.5px;
	cursor: pointer;
}

.nexio-account__checkbox input {
	margin-top: 3px;
}

.nexio-account__avatar-field {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 6px;
}

.nexio-account__avatar-preview {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.nexio-account__visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.nexio-account__notice {
	margin: 0 0 6px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13.5px;
}

.nexio-account__notice--success {
	background: #ecfdf5;
	color: #047857;
}

.nexio-account__notice--error {
	background: #fef2f2;
	color: #b91c1c;
}

/* ================================================================
 * NOTIFICATIONS
 * ============================================================= */

.nexio-account__notify-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nexio-account__notify-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nexio-account__notify-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nexio-account__notify-label {
	font-weight: 600;
	font-size: 14px;
}

.nexio-account__notify-desc {
	font-size: 12.5px;
	opacity: 0.6;
}

.nexio-account__notify-transactional {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.nexio-account__notify-transactional h4 {
	margin: 0 0 4px;
	font-size: 14px;
}

.nexio-account__notify-transactional p {
	margin: 0 0 10px;
	font-size: 12.5px;
	opacity: 0.6;
}

.nexio-account__notify-transactional ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nexio-account__notify-transactional li {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
}

.nexio-account__notify-locked {
	opacity: 0.5;
	font-weight: 600;
	font-size: 12px;
}

.nexio-account__notify-status {
	font-size: 13px;
	opacity: 0.7;
}

.nexio-account__notify-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 16px;
}

/* Toggle switch */

.nexio-account__toggle {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.nexio-account__toggle input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	margin: 0;
}

.nexio-account__toggle-track {
	--nexio-toggle-handle: #fff;
	position: relative;
	display: inline-block;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.18);
	transition: background-color 0.2s ease;
}

.nexio-account__toggle-track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--nexio-toggle-handle);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease;
}

.nexio-account__toggle input:checked + .nexio-account__toggle-track {
	background: #111;
}

.nexio-account__toggle input:checked + .nexio-account__toggle-track::after {
	transform: translateX(18px);
}

.nexio-account__toggle input:focus-visible + .nexio-account__toggle-track {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ================================================================
 * DANGER ZONE
 * ============================================================= */

.nexio-account__danger {
	background: #fff;
}

.nexio-account__danger-title {
	margin: 0 0 6px;
	color: #b91c1c;
	font-size: 16px;
	font-weight: 700;
}

.nexio-account__danger-desc {
	margin: 0 0 16px;
	font-size: 13.5px;
	opacity: 0.75;
}

/* ================================================================
 * RESPONSIVE
 * ============================================================= */

@media (max-width: 767px) {
	.nexio-account__banner {
		flex-direction: column;
		align-items: flex-start;
	}

	.nexio-account__card {
		padding: 18px;
	}

	.nexio-account__row,
	.nexio-account__order-row {
		flex-wrap: wrap;
	}

	.nexio-account__form-grid {
		grid-template-columns: 1fr;
	}
}

/* Instant tab navigation — brief dim while the next view loads. */
.nexio-account-content.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ==================================================================
 * DESIGN LAYER — matches the supplied account mockups.
 *
 * Appended last on purpose: everything above is structure (layout,
 * states, responsive rules, JS hooks) and stays authoritative. This
 * block only sets the visual language — surfaces, radii, weights —
 * so a future structural change does not have to be re-skinned.
 *
 * One set of tokens drives all five views, which is what keeps the
 * profile card, the overview banner and the active nav pill reading
 * as the same near-black rather than three similar darks.
 * ================================================================== */

.nexio-account,
.nexio-account__profile,
.nexio-account__nav {
	--na-ink: #17171a;
	--na-ink-2: #3f4147;
	--na-muted: #6b7280;
	--na-faint: #9aa0a8;
	--na-line: #e9eaee;
	--na-line-soft: #f1f2f5;
	--na-surface: #fff;
	--na-wash: #f7f8fa;
	--na-dark: #1b1b1f;
	--na-accent: #5b5bd6;
	--na-accent-soft: #eceafe;
	--na-danger: #e02424;
	--na-radius: 16px;
	--na-radius-sm: 10px;
}

/* ---------- Cards ---------- */

.nexio-account .nexio-account__card,
.nexio-account__nav {
	background: var(--na-surface);
	border: 1px solid var(--na-line);
	border-radius: var(--na-radius);
	box-shadow: none;
	padding: 26px 28px;
}

.nexio-account .nexio-account__card + .nexio-account__card {
	margin-top: 22px;
}

.nexio-account .nexio-account__card-title {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 650;
	letter-spacing: -0.015em;
	color: var(--na-ink);
}

/* The rule under a card title is part of the look, not a divider
   between sections — it sits tight under the heading. */
.nexio-account .nexio-account__card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--na-line);
}

.nexio-account .nexio-account__card-sub {
	margin: 4px 0 0;
	font-size: 13.5px;
	color: var(--na-muted);
}

/* ---------- Profile card (dark) ---------- */

.nexio-account__profile {
	background: var(--na-dark);
	border-radius: var(--na-radius);
	padding: 26px 22px;
	text-align: center;
	color: #fff;
}

.nexio-account__profile-avatar img,
.nexio-account__profile-avatar {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto;
	display: block;
}

.nexio-account__profile-name {
	margin: 14px 0 2px;
	font-size: 15.5px;
	font-weight: 600;
	color: #fff;
}

.nexio-account__profile-email {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.62);
	word-break: break-word;
}

/* ---------- Navigation ---------- */

.nexio-account__nav {
	padding: 14px;
}

.nexio-account__nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The <li> is .nexio-account__nav-item; the clickable row is the <a>
   inside it, .nexio-account__nav-link. Styling the <li> left the anchor
   shrink-to-fit, which is why the active pill stopped at the end of the
   label instead of filling the row. */
.nexio-account__nav-item {
	display: block;
	width: 100%;
}

.nexio-account__nav-link {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border-radius: var(--na-radius-sm);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--na-ink-2);
	text-decoration: none;
	transition: background-color 0.14s ease, color 0.14s ease;
}

.nexio-account__nav-link:hover {
	background: var(--na-wash);
	color: var(--na-ink);
}

/* Active item is a solid dark pill — the strongest thing in the
   sidebar, so the current view is never ambiguous. */
.nexio-account__nav-link.is-active,
.nexio-account__nav-link[aria-current="page"] {
	background: var(--na-dark);
	color: #fff;
}

.nexio-account__nav-icon,
.nexio-account__nav-icon svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

/* Logout sits below a hairline rather than in the list proper. */
/* Nothing here for .nexio-account__nav-divider on purpose. It is a
   1px <li> tinted by background-color, and its height, colour and
   spacing are ALL Elementor controls — the earlier padding/border in
   this layer inflated that coloured bar so a Thickness of 1 still
   rendered ~11px. The base rule plus the controls own it entirely. */

/* ---------- Overview banner ---------- */

.nexio-account .nexio-account__banner {
	background: var(--na-dark);
	border: 0;
	border-radius: var(--na-radius);
	padding: 30px 34px;
	color: #fff;
}

.nexio-account .nexio-account__banner-title {
	margin: 12px 0 0;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 650;
	letter-spacing: -0.025em;
	color: #fff;
}

.nexio-account .nexio-account__banner-sub,
.nexio-account .nexio-account__banner-since {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13.5px;
}

.nexio-account .nexio-account__badge--banner {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--na-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
}

/* ---------- Download rows ---------- */

.nexio-account .nexio-account__rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nexio-account .nexio-account__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px;
	border: 1px solid var(--na-line);
	border-radius: 14px;
	background: var(--na-surface);
	transition: border-color 0.14s ease;
}

.nexio-account .nexio-account__row:hover {
	border-color: #d8dade;
}

.nexio-account .nexio-account__row-thumb {
	width: 104px;
	height: 66px;
	flex: 0 0 auto;
	border-radius: 10px;
	overflow: hidden;
	background: var(--na-wash);
}

.nexio-account .nexio-account__row-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nexio-account .nexio-account__row-body {
	flex: 1 1 auto;
	min-width: 0;
}

.nexio-account .nexio-account__row-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 7px;
}

.nexio-account .nexio-account__row-date {
	font-size: 12.5px;
	color: var(--na-muted);
}

.nexio-account .nexio-account__row-title {
	display: block;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--na-ink);
}

/* Category chip: soft lavender, never competing with the title. */
.nexio-account .nexio-account__badge--category {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--na-accent-soft);
	color: var(--na-accent);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* The round download control on each row. */
.nexio-account .nexio-account__row .nexio-account__button,
.nexio-account .nexio-account__row-action {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--na-dark);
	color: #fff;
	transition: transform 0.14s ease, opacity 0.14s ease;
}

.nexio-account .nexio-account__row .nexio-account__button:hover {
	transform: translateY(-1px);
	opacity: 0.92;
}

.nexio-account .nexio-account__row .nexio-account__button svg {
	width: 17px;
	height: 17px;
}

/* ---------- Downloads view ---------- */

.nexio-account .nexio-account__downloads-count {
	margin: 4px 0 0;
	font-size: 13.5px;
	color: var(--na-muted);
}

/* The search field is a plain __input carrying a data hook — styled
   by that hook so it can differ from the form inputs around it. */
.nexio-account .nexio-account__input[data-nexio-download-search] {
	margin-top: 18px;
	padding: 12px 14px;
	border: 1px solid var(--na-line);
	border-radius: 12px;
	background: var(--na-surface);
	font-size: 14px;
	color: var(--na-ink);
}



/* Filter chips: the active one is dark, the rest are outlines. */
.nexio-account .nexio-account__downloads-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 16px;
}

.nexio-account .nexio-account__downloads-cats a,
.nexio-account .nexio-account__downloads-cats button {
	padding: 8px 15px;
	border: 1px solid var(--na-line);
	border-radius: 999px;
	background: var(--na-surface);
	font-size: 13px;
	font-weight: 500;
	color: var(--na-ink-2);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.nexio-account .nexio-account__downloads-cats a:hover,
.nexio-account .nexio-account__downloads-cats button:hover {
	border-color: #d0d3d9;
}

.nexio-account .nexio-account__downloads-cats .is-active,
.nexio-account .nexio-account__downloads-cats [aria-pressed="true"] {
	background: var(--na-dark);
	border-color: var(--na-dark);
	color: #fff;
}

/* ---------- Order rows ---------- */

.nexio-account .nexio-account__order-rows {
	display: flex;
	flex-direction: column;
}

.nexio-account .nexio-account__order-row {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 16px 0;
	border-bottom: 1px solid var(--na-line-soft);
}

.nexio-account .nexio-account__order-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.nexio-account .nexio-account__order-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--na-dark);
	color: #fff;
}

.nexio-account .nexio-account__order-icon svg {
	width: 16px;
	height: 16px;
}

.nexio-account .nexio-account__order-body {
	flex: 1 1 auto;
	min-width: 0;
}

.nexio-account .nexio-account__order-title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--na-ink);
}

.nexio-account .nexio-account__order-meta {
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--na-muted);
}

/* Invoice button: quiet outline, so a list of them stays calm. */
.nexio-account .nexio-account__order-actions .nexio-account__button {
	padding: 9px 16px;
	border: 1px solid var(--na-line);
	border-radius: 9px;
	background: var(--na-surface);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--na-ink);
}

.nexio-account .nexio-account__order-actions .nexio-account__button:hover {
	border-color: #c9ccd2;
	background: var(--na-wash);
}

/* ---------- Forms ---------- */

.nexio-account .nexio-account__form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 22px;
}

.nexio-account .nexio-account__field > label {
	display: block;
	margin-bottom: 7px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--na-ink-2);
}

.nexio-account .nexio-account__input,
.nexio-account .nexio-account__field input[type="text"],
.nexio-account .nexio-account__field input[type="email"],
.nexio-account .nexio-account__field input[type="password"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--na-line);
	border-radius: 9px;
	background: var(--na-surface);
	font-size: 14px;
	color: var(--na-ink);
}

.nexio-account .nexio-account__input::placeholder {
	color: var(--na-faint);
}

.nexio-account .nexio-account__input:focus {
	outline: none;
	border-color: #c9ccd2;
	box-shadow: 0 0 0 3px rgba(27, 27, 31, 0.06);
}

.nexio-account .nexio-account__password-toggle {
	color: var(--na-faint);
}

/* Primary actions are dark and right-aligned, as in the mockups. */
.nexio-account .nexio-account__form .nexio-account__button--primary,
.nexio-account .nexio-account__notify-actions .nexio-account__button--primary {
	padding: 11px 20px;
	border: 0;
	border-radius: 9px;
	background: var(--na-dark);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.nexio-account .nexio-account__form .nexio-account__button--primary:hover {
	background: #000;
}

/* No wrapper element exists around a form's submit, so the button is
   pushed right from the form's own flow. */
.nexio-account .nexio-account__form > .nexio-account__button--primary {
	display: block;
	margin-left: auto;
	margin-top: 20px;
}

.nexio-account .nexio-account__notify-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}

/* Avatar row in Settings. */
.nexio-account .nexio-account__avatar-field {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 22px;
}

.nexio-account .nexio-account__avatar-preview img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.nexio-account .nexio-account__avatar-actions .nexio-account__button,
.nexio-account label.nexio-account__button--secondary {
	padding: 7px 14px;
	border: 1px solid var(--na-line);
	border-radius: 8px;
	background: var(--na-surface);
	font-size: 13px;
	color: var(--na-ink);
}

/* ---------- Notifications ---------- */

.nexio-account .nexio-account__notify-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding: 15px 0;
	border-bottom: 1px solid var(--na-line-soft);
}

.nexio-account .nexio-account__notify-row:last-child {
	border-bottom: 0;
}

.nexio-account .nexio-account__notify-label {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--na-ink);
}

.nexio-account .nexio-account__notify-desc {
	margin: 3px 0 0;
	font-size: 13px;
	color: var(--na-muted);
}

/* iOS-style switch: dark when on, pale when off. */
.nexio-account .nexio-account__toggle-track {
	position: relative;
	flex: 0 0 auto;
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: #dcdee3;
	transition: background-color 0.16s ease;
	cursor: pointer;
}

.nexio-account .nexio-account__toggle-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.16s ease;
}

.nexio-account .nexio-account__toggle input:checked + .nexio-account__toggle-track {
	background: var(--na-dark);
}

.nexio-account .nexio-account__toggle input:checked + .nexio-account__toggle-track::after {
	transform: translateX(20px);
}

.nexio-account .nexio-account__toggle input:focus-visible + .nexio-account__toggle-track {
	outline: 2px solid var(--na-dark);
	outline-offset: 2px;
}

/* ---------- Danger zone ---------- */

.nexio-account .nexio-account__danger-title {
	color: var(--na-danger);
}

.nexio-account .nexio-account__button--danger {
	padding: 11px 20px;
	border: 0;
	border-radius: 9px;
	background: var(--na-danger);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.nexio-account .nexio-account__button--danger:hover {
	background: #c81e1e;
}

/* ---------- Responsive ---------- */

@media ( max-width: 782px ) {
	.nexio-account .nexio-account__card,
	.nexio-account__nav {
		padding: 20px;
	}

	.nexio-account .nexio-account__banner {
		padding: 24px;
	}

	.nexio-account .nexio-account__banner-title {
		font-size: 26px;
	}

	.nexio-account .nexio-account__form-grid {
		grid-template-columns: 1fr;
	}

	.nexio-account .nexio-account__row-thumb {
		width: 76px;
		height: 54px;
	}

	.nexio-account .nexio-account__order-row {
		flex-wrap: wrap;
	}

	.nexio-account .nexio-account__order-actions {
		width: 100%;
	}
}

/* The toolbar's own defaults.
   The chips and the Download All button both inherited `color`, so on
   a page whose surrounding text is pale they rendered as near-invisible
   labels on a near-white field — which is what "I can't see them" was.
   These are ordinary defaults, not !important, so every control in the
   new Downloads Toolbar section still overrides them. */

.nexio-account button.nexio-account__chip {
	background: var(--na-surface);
	border-color: var(--na-line);
	color: var(--na-ink-2);
	font-weight: 500;
	white-space: nowrap;
}

.nexio-account button.nexio-account__chip:hover {
	border-color: #d0d3d9;
	color: var(--na-ink);
}

.nexio-account button.nexio-account__chip.is-active {
	background: var(--na-dark);
	border-color: var(--na-dark);
	color: #fff;
}

.nexio-account [data-nexio-download-all] {
	border: 1px solid var(--na-line);
	background: var(--na-surface);
	color: var(--na-ink);
	font-weight: 500;
	white-space: nowrap;
}

.nexio-account [data-nexio-download-all]:hover {
	border-color: #c9ccd2;
	background: var(--na-wash);
}

/* Disabled only inside the Elementor preview, where customer actions
   are switched off — it should read as intentionally inert, not broken. */
.nexio-account [data-nexio-download-all][disabled] {
	opacity: 0.55;
	cursor: default;
}


/* ---- Downloads search + submit ----
   The field and its submit share one box so the button sits inside the
   input rather than beside it, which keeps the row height unchanged. */

.nexio-account .nexio-account__search {
	position: relative;
	display: block;
}

.nexio-account .nexio-account__search .nexio-account__input {
	width: 100%;
	/* Room for the button, so a long query never runs under it. */
	padding-right: 52px;
}

.nexio-account .nexio-account__search-submit {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--na-dark, #1b1b1f);
	color: #fff;
	cursor: pointer;
	transition: opacity 0.14s ease;
}

.nexio-account .nexio-account__search-submit:hover {
	opacity: 0.9;
}

.nexio-account .nexio-account__search-submit[hidden] {
	display: none;
}

.nexio-account .nexio-account__search-submit svg {
	width: 17px;
	height: 17px;
}

/* Chrome draws its own clear "x" on type=search; with our button in
   the same corner the two overlapped. */
.nexio-account .nexio-account__search .nexio-account__input::-webkit-search-cancel-button {
	margin-right: 4px;
}

/* ---- Order History ----
   The view prints a bare <h2>, not the .nexio-account__card-head
   wrapper the other cards use, so it never picked up the rule under
   the heading that the reference design has. Given the heading is the
   card's first child, the divider can hang off the title itself. */

.nexio-account .nexio-account__orders .nexio-account__card-title {
	padding-bottom: 18px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--na-line);
}

/* ---- Mobile ----
   Below ~600px a download row cannot hold thumb + meta + title + button
   on one line: the title was truncating to "Ultimat…" while the badge
   and date wrapped around the action button. The row becomes a grid so
   the title always gets the full width under the meta. */

@media ( max-width: 600px ) {
	.nexio-account .nexio-account__row {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"thumb meta   action"
			"thumb title  title";
		align-items: center;
		column-gap: 12px;
		row-gap: 6px;
		padding: 12px;
	}

	.nexio-account .nexio-account__row-thumb {
		grid-area: thumb;
		width: 60px;
		height: 60px;
		border-radius: 10px;
	}

	.nexio-account .nexio-account__row-body {
		display: contents;
	}

	.nexio-account .nexio-account__row-meta {
		grid-area: meta;
		margin: 0;
		flex-wrap: wrap;
		gap: 6px 8px;
	}

	.nexio-account .nexio-account__row-title {
		grid-area: title;
		font-size: 15px;
		line-height: 1.3;
		/* No truncation: two lines is better than a cut-off name. */
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.nexio-account .nexio-account__row .nexio-account__row-action,
	.nexio-account .nexio-account__row .nexio-account__button {
		grid-area: action;
		width: 36px;
		height: 36px;
	}

	.nexio-account .nexio-account__row-date {
		font-size: 12px;
	}

	/* Order rows: the invoice button drops to its own full-width line
	   rather than squeezing the order number. */
	.nexio-account .nexio-account__order-row {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.nexio-account .nexio-account__order-body {
		flex: 1 1 60%;
	}

	.nexio-account .nexio-account__order-actions {
		flex: 1 1 100%;
	}

	.nexio-account .nexio-account__order-actions .nexio-account__button {
		display: block;
		width: 100%;
		text-align: center;
	}

	.nexio-account .nexio-account__downloads-head {
		flex-wrap: wrap;
		gap: 10px;
	}

	.nexio-account .nexio-account__card-title {
		font-size: 18px;
	}
}

/* ==================================================================
 * GUEST — split login / register
 * Matches the supplied mockups: media panel on one side, a centred
 * form column on the other, underline inputs, full-width primary.
 * ================================================================== */

.nexio-account .nexio-account__guest--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 28px;
}

/* The image sits second in the DOM order only when asked to, so the
   form stays first for screen readers and keyboard order regardless. */
.nexio-account.nexio-guest-image-right .nexio-account__guest--split .nexio-account__guest-media {
	order: 2;
}

.nexio-account .nexio-account__guest-media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: contain;
	border-radius: 18px;
}

.nexio-account .nexio-account__guest-panel {
	max-width: 380px;
	width: 100%;
	margin: 0 auto;
}

.nexio-account .nexio-account__guest-logo {
	display: block;
	height: 30px;
	width: auto;
	margin: 0 auto 18px;
}

.nexio-account .nexio-account__guest--split .nexio-account__card-title {
	margin: 0 0 4px;
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: -0.03em;
	text-align: center;
	border: 0;
	padding: 0;
}

.nexio-account .nexio-account__guest-sub {
	margin: 0 0 26px;
	text-align: center;
	font-size: 14px;
	color: var(--na-muted);
}

/* Underline fields, as in the reference.
   The base field rule is a list that includes input[type="text"], which
   scores an attribute selector higher than three plain classes — so
   these have to match the same shape to win the cascade rather than
   quietly lose to it. */
.nexio-account .nexio-account__guest--split .nexio-account__input,
.nexio-account .nexio-account__guest--split .nexio-account__field input[type="text"],
.nexio-account .nexio-account__guest--split .nexio-account__field input[type="email"],
.nexio-account .nexio-account__guest--split .nexio-account__field input[type="password"] {
	border: 0;
	border-bottom: 1px solid var(--na-line);
	border-radius: 0;
	padding: 10px 0;
	background: transparent;
}

.nexio-account .nexio-account__guest--split .nexio-account__input:focus,
.nexio-account .nexio-account__guest--split .nexio-account__field input[type="text"]:focus,
.nexio-account .nexio-account__guest--split .nexio-account__field input[type="email"]:focus,
.nexio-account .nexio-account__guest--split .nexio-account__field input[type="password"]:focus {
	border-bottom-color: var(--na-ink);
	box-shadow: none;
}

.nexio-account .nexio-account__guest--split .nexio-account__field {
	margin-bottom: 18px;
}

.nexio-account .nexio-account__guest--split .nexio-account__field > label {
	font-size: 13px;
	color: var(--na-ink-2);
}

.nexio-account .nexio-account__guest--split .nexio-account__form .nexio-account__button--primary {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 13px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--na-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.14s ease, transform 0.14s ease;
}

.nexio-account .nexio-account__guest--split .nexio-account__form .nexio-account__button--primary:hover {
	background: var(--na-accent-dark, #4b4bc4);
}

.nexio-account .nexio-account__guest--split .nexio-account__form .nexio-account__button--primary:active {
	transform: translateY( 1px );
}

.nexio-account .nexio-account__guest--split .nexio-account__checkbox {
	font-size: 13.5px;
}

.nexio-account .nexio-account__guest--split .nexio-account__lost-password {
	float: right;
	font-size: 13.5px;
	color: var(--na-ink-2);
}

.nexio-account .nexio-account__guest-alt {
	margin: 22px 0 0;
	text-align: center;
	font-size: 13.5px;
	color: var(--na-muted);
}

.nexio-account .nexio-account__guest-alt a {
	color: var(--na-ink);
	font-weight: 600;
	text-decoration: none;
}

@media ( max-width: 880px ) {
	.nexio-account .nexio-account__guest--split {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 20px;
	}

	/* The decorative panel is the first thing to go on a phone. */
	.nexio-account .nexio-account__guest-media {
		display: none;
	}

	.nexio-account .nexio-account__guest--split .nexio-account__card-title {
		font-size: 26px;
	}
}

/* Reference-match refinements: the split panel is the default look, so
   these are the details that separate it from a generic form — hint
   text, the Remember/Forgot row, and a full-width primary. */

.nexio-account .nexio-account__guest--split .nexio-account__input::placeholder {
	color: var(--na-faint);
	opacity: 1;
}

.nexio-account .nexio-account__guest-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 4px 0 22px;
}

.nexio-account .nexio-account__guest-row .nexio-account__checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13.5px;
	color: var(--na-ink-2);
}

.nexio-account .nexio-account__guest-row .nexio-account__lost-password {
	float: none;
	font-size: 13.5px;
	color: var(--na-ink-2);
	text-decoration: none;
}

.nexio-account .nexio-account__guest--split .nexio-account__password-wrap {
	position: relative;
}

.nexio-account .nexio-account__guest--split .nexio-account__password-toggle {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: none;
	padding: 4px;
	color: var(--na-faint);
	cursor: pointer;
	line-height: 0;
}

/* The card itself is the page on these screens — no border or shadow
   competing with the two panels inside it. */
.nexio-account .nexio-account__guest--split {
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* ---- Guest: the login / register switch ----
 * Both panels are in the page and only one is displayed. The box
 * around them animates from the height of one to the height of the
 * other so the card never jumps, and the incoming panel fades up into
 * place. With no script the links are ordinary URLs and the server
 * picks the panel, so the switch still works — it just reloads.
 */

.nexio-account .nexio-account__guest-view {
	display: none;
}

.nexio-account .nexio-account__guest-view.is-active {
	display: block;
}

/* The swap is a cross-fade: the outgoing form lifts out of the flow
   (absolute, so the incoming one immediately owns the height) and
   fades upward, while the incoming form fades up into place after a
   short hand-off delay. All three movements — leave, enter, and the
   card's height — share one deceleration curve so they read as a
   single motion. The classes are added by the script for one swap
   only, so the panel painted on page load never animates. */

.nexio-account .nexio-account__guest-views {
	position: relative;
}

.nexio-account .nexio-account__guest-view.is-leaving {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	animation: nexio-guest-leave 0.22s cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) both;
}

.nexio-account .nexio-account__guest-view.is-entering {
	animation: nexio-guest-enter 0.42s cubic-bezier( 0.22, 0.61, 0.36, 1 ) 0.1s both;
}

@keyframes nexio-guest-leave {
	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateY( -12px );
	}
}

@keyframes nexio-guest-enter {
	from {
		opacity: 0;
		transform: translateY( 16px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.nexio-account .nexio-account__guest-views.is-resizing {
	overflow: hidden;
	transition: height 0.42s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

@media ( prefers-reduced-motion: reduce ) {
	.nexio-account .nexio-account__guest-view.is-entering,
	.nexio-account .nexio-account__guest-view.is-leaving {
		animation: none;
	}

	.nexio-account .nexio-account__guest-view.is-leaving {
		display: none;
	}

	.nexio-account .nexio-account__guest-views.is-resizing {
		transition: none;
	}
}

/* ---- Guest: collapse emptied sidebar columns ----
 * For a guest, the navigation and profile widgets render nothing at
 * all — Elementor omits even their wrappers — but the column built to
 * hold them keeps its configured width, leaving a blank stripe beside
 * the login card. When the body carries the guest marker, any column
 * that sits beside the account-content column and ended up with no
 * elements in it is dropped, and the content column takes the row.
 * Scoped to the guest marker so logged-in layouts are never touched.
 */

/* :has() may not nest inside :has(), so the "sibling of the content
   column" relation is written with sibling combinators instead: one
   arm for empty columns before it, one for after. */
body.nexio-account-guest .e-con:not(:has(*)):has(~ .e-con .elementor-widget-nexio-account-content),
body.nexio-account-guest .e-con:has(.elementor-widget-nexio-account-content) ~ .e-con:not(:has(*)) {
	display: none;
}

body.nexio-account-guest .e-con.e-child:has(.elementor-widget-nexio-account-content) {
	--width: 100%;
	width: 100%;
	max-width: 100%;
}