/**
 * Header widget (email + avatar dropdown), the guest "Sign in with
 * Google" button, the gated-page sign-in card, and the sign-in error
 * banner. Uses the theme's own design tokens (--space-*, --radius-*,
 * --color-*) so it matches the rest of the site without its own theme.
 */

.client-login-google-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.client-login-google-btn__logo {
	flex-shrink: 0;
}

.client-login-not-configured {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* ---------- Logged-in header widget ---------- */

.client-login-widget {
	position: relative;
}

.client-login-widget__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: none;
	border: none;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-neutral-800);
	cursor: pointer;
}

.client-login-widget__trigger:hover,
.client-login-widget__trigger[aria-expanded="true"] {
	background: var(--color-bg-subtle);
}

.client-login-widget__avatar {
	width: 28px;
	height: 28px;
	padding: 5px;
	border-radius: var(--radius-full);
	background: var(--color-primary-50);
	color: var(--color-primary);
	flex-shrink: 0;
}

.client-login-widget__email {
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.client-login-widget__caret {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform var(--transition-base);
}

.client-login-widget__trigger[aria-expanded="true"] .client-login-widget__caret {
	transform: rotate(180deg);
}

.client-login-widget__menu {
	position: absolute;
	top: calc(100% + var(--space-2));
	right: 0;
	min-width: 200px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: var(--space-2);
	display: none;
	z-index: 50;
}

.client-login-widget__menu.is-open {
	display: block;
}

.client-login-widget__menu a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
}

.client-login-widget__menu a:hover {
	background: var(--color-bg-subtle);
	text-decoration: none;
}

.client-login-widget__menu a svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.client-login-widget__logout {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-1);
}

/* Inside the mobile slide-out nav panel, expand inline instead of
   floating — a full-width tap target and an inline menu read better in
   a narrow panel than a small floating dropdown would. */
@media (max-width: 1023.98px) {
	.mobile-nav__actions .client-login-widget {
		width: 100%;
	}

	.mobile-nav__actions .client-login-widget__trigger {
		width: 100%;
		justify-content: space-between;
		border: 1px solid var(--color-border);
		padding: var(--space-3);
	}

	.mobile-nav__actions .client-login-widget__menu {
		position: static;
		box-shadow: none;
		border: none;
		padding: 0;
		margin-top: var(--space-2);
	}

	/* The desktop top-bar instance (.header-actions), by contrast, has to
	   share a single cramped row with the logo and hamburger toggle —
	   collapses to just the avatar icon instead (was showing the full
	   email unclipped here, which could overflow the viewport on a long
	   address; the dropdown menu still shows the full email once opened,
	   only the closed trigger's label is hidden). */
	.header-actions .client-login-widget__email,
	.header-actions .client-login-widget__caret {
		display: none;
	}

	.header-actions .client-login-widget__trigger {
		padding: var(--space-2);
	}

	.header-actions .client-login-widget__menu {
		right: calc(-1 * var(--space-2));
	}
}

/* ---------- Mobile guest person-icon toggle ---------- */
/* Rendered only in the mobile nav panel, only while sign-in isn't
   actually being offered (appiappi_client_login_is_enabled() false) —
   see appiappi_client_login_render_mobile_guest_toggle(). Collapses
   what would otherwise be a permanent row of "not set up yet" text
   into a single icon, revealed on demand. */

.client-login-mobile-toggle__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-bg-subtle);
	color: var(--color-neutral-700);
	cursor: pointer;
	transition: background var(--transition-base), color var(--transition-base);
}

.client-login-mobile-toggle__trigger svg {
	width: 20px;
	height: 20px;
}

.client-login-mobile-toggle__trigger:hover,
.client-login-mobile-toggle__trigger[aria-expanded="true"] {
	background: var(--color-primary-50);
	color: var(--color-primary);
}

.client-login-mobile-toggle__panel {
	position: relative;
	margin-top: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg-subtle);
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows var(--transition-base), opacity var(--transition-base), margin-top var(--transition-base), padding var(--transition-base);
	margin-top: 0;
	padding-block: 0;
	overflow: hidden;
}

.client-login-mobile-toggle__panel > * {
	min-height: 0;
}

.client-login-mobile-toggle__panel.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: var(--space-3);
	padding-block: var(--space-4);
}

.client-login-mobile-toggle__panel > .client-login-google-btn,
.client-login-mobile-toggle__panel > .client-login-not-configured {
	overflow: hidden;
}

.client-login-mobile-toggle__close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: none;
	color: var(--color-text-muted);
	cursor: pointer;
}

.client-login-mobile-toggle__close svg {
	width: 16px;
	height: 16px;
}

/* ---------- Gated Dashboard/Profile page card ---------- */

.client-account-card {
	padding: var(--space-8);
}

.client-account-card__welcome {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-neutral-900);
	margin-bottom: var(--space-1);
}

.client-account-card__email {
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

.client-account-card--signin {
	text-align: center;
}

.client-account-card--signin p {
	margin-bottom: var(--space-5);
}

/* ---------- Sign-in error banner ---------- */

.client-login-error-banner {
	position: fixed;
	top: calc(var(--header-height) + var(--space-3));
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background: var(--color-danger);
	color: var(--color-white);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	font-size: var(--fs-sm);
	max-width: calc(100vw - var(--space-6));
}

.client-login-error-banner[hidden] {
	display: none;
}

.client-login-error-banner__close {
	background: none;
	border: none;
	color: inherit;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

/* ---------- Sitewide sidebar "Account" card ---------- */
/* page-sidebar/page-sidebar__card/page-sidebar__account are the
   theme's (components.css) — only the content inside is this plugin's. */

.sidebar-account__header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.sidebar-account__avatar {
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: var(--radius-full);
	background: var(--color-primary-50);
	color: var(--color-primary);
	flex-shrink: 0;
}

.sidebar-account__identity {
	min-width: 0;
}

.sidebar-account__name {
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebar-account__email {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebar-account__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-4);
}

.sidebar-account__links a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
}

.sidebar-account__links a:hover {
	background: var(--color-bg-subtle);
	text-decoration: none;
}

.sidebar-account__links svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.sidebar-account__title {
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
	margin-bottom: var(--space-2);
}

.sidebar-account__hint {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}