/* TNC Wedding Suite -- header account widget (Login / Become a Member,
   or the logged-in user menu). Self-contained: defines its own --tnc-*
   tokens scoped to .tnc-account-widget, so it doesn't depend on
   tnc-base.css -- this widget is meant to sit in the theme's own
   header/nav, where we can't guarantee tnc-base is loaded. Always
   enqueued site-wide (see TNC_Assets::register()) because it can be
   placed outside any page's post_content, where has_shortcode() can't
   find it to enqueue conditionally.

   The "Login" link and the toggle's caret use `color: inherit` on
   purpose -- this widget can land in a dark top bar or a light main
   row depending on where it's dropped in the theme's header builder,
   and it has no way to know which. Inheriting keeps it legible in
   either spot instead of hard-coding one text color. The avatar
   circle and the "Become a Member" button stay a fixed gold/oxblood
   fill instead, since a filled shape reads fine on any background. */

.tnc-account-widget {
	--tnc-oxblood: #3A1A17;
	--tnc-oxblood-dark: #1F0E0C;
	--tnc-gold: #C6A15B;
	--tnc-gold-light: #E5CF9A;
	--tnc-ivory: #FBF8F1;
	--tnc-text: #383334;
	--tnc-muted: #756D6D;
	--tnc-white: #FFFFFF;
	--tnc-border: #E4DED2;

	position: relative;
	display: inline-flex;
	align-items: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.2;
	color: inherit;
}

/* ---------------------------------------------------------------
   Logged out: Login + Become a Member
   --------------------------------------------------------------- */

/* .tnc-acct-guest / .tnc-acct-link (the old "Login" text + "Join Us"
   pill pair) are no longer used by the template -- logged-out now
   reuses the SAME icon-toggle-and-dropdown shape as logged-in (see
   .tnc-acct-join below), just with a generic person icon instead of an
   avatar initial, so the header always shows exactly one compact icon
   regardless of login state. Rules kept harmlessly in case anything
   custom still references the old classes. */
.tnc-acct-guest {
	display: flex;
	align-items: center;
	gap: 10px;
}
.tnc-acct-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1.5px solid currentColor;
	opacity: 0.75;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.tnc-acct-link:hover {
	opacity: 1;
	border-color: var(--tnc-gold);
	text-decoration: none;
}

.tnc-acct-btn {
	display: inline-block;
	background: var(--tnc-gold);
	color: var(--tnc-oxblood-dark) !important;
	text-decoration: none;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.tnc-acct-btn:hover {
	background: var(--tnc-gold-light);
}

/* "Join Us" -- guest dropdown offering both Become a Member and Become
   a Vendor, rather than only ever showing the couple-side CTA and
   leaving vendors to find their own way to the vendor landing page. */
.tnc-acct-join {
	position: relative;
}
/* Same icon-button shape as the logged-in .tnc-acct-toggle (below) --
   one compact circular tap target, hover/active feedback included --
   so the header's account slot is the same size whether the visitor is
   logged in or not; only the icon inside differs. */
.tnc-acct-join-toggle {
	position: relative;
	display: flex;
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 3px;
	border-radius: 999px;
	font-family: inherit;
	color: inherit;
	touch-action: manipulation;
}
.tnc-acct-join-toggle:hover,
.tnc-acct-join-toggle[aria-expanded="true"] {
	background: rgba(128, 128, 128, 0.18);
}
.tnc-acct-join-menu {
	min-width: 230px;
}
.tnc-acct-menu-item-sub {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--tnc-muted);
	margin-top: 2px;
}

/* ---------------------------------------------------------------
   Logged in: icon-only avatar toggle -> dropdown with name inside
   --------------------------------------------------------------- */

.tnc-acct-user {
	position: relative;
}

.tnc-acct-toggle {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 3px;
	border-radius: 999px;
	font-family: inherit;
	color: inherit;
	/* Stops tablet Safari from treating a tap here as the start of a
	   double-tap-zoom gesture instead of a click -- this sits in a
	   theme header, which is exactly where that gesture likes to fire. */
	touch-action: manipulation;
}

/* Payment-reminder count, pinned to the avatar's corner so there's
   something to notice before the dropdown is even opened. */
.tnc-acct-toggle-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: #A23B3B;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--tnc-white);
}
.tnc-acct-toggle:hover,
.tnc-acct-toggle[aria-expanded="true"] {
	background: rgba(128, 128, 128, 0.18);
}

.tnc-acct-avatar {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 50%;
	background: var(--tnc-gold);
	color: var(--tnc-oxblood-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
}

.tnc-acct-caret {
	font-size: 10px;
	color: inherit;
	opacity: 0.75;
	transition: transform 0.15s ease;
}
.tnc-acct-toggle[aria-expanded="true"] .tnc-acct-caret {
	transform: rotate(180deg);
}

.tnc-acct-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 210px;
	background: var(--tnc-white);
	border: 1px solid var(--tnc-border);
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(8, 44, 39, 0.18);
	padding: 8px;
	z-index: 9999;
	color: var(--tnc-text);
}

.tnc-acct-menu-label {
	padding: 8px 10px 10px;
	border-bottom: 1px solid var(--tnc-border);
	margin-bottom: 4px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tnc-acct-menu-name {
	font-weight: 700;
	color: var(--tnc-oxblood-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tnc-acct-menu-role {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tnc-muted);
}

.tnc-acct-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	text-decoration: none;
	color: var(--tnc-text);
	font-family: inherit;
	font-size: 14px;
	padding: 9px 10px;
	border-radius: 6px;
	cursor: pointer;
	touch-action: manipulation;
}
.tnc-acct-menu-item:hover {
	background: var(--tnc-ivory);
}

/* ---------------------------------------------------------------
   Switch Profile / Become a Vendor -- sits between the dashboard
   links and Log Out, marked off with its own divider so it reads as
   a distinct action rather than another plain nav link.
   --------------------------------------------------------------- */

.tnc-acct-menu-divider {
	height: 1px;
	background: var(--tnc-border);
	margin: 6px 4px;
}

.tnc-acct-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--tnc-oxblood-dark);
}
.tnc-acct-switch:hover {
	background: var(--tnc-gold-light);
}

.tnc-acct-switch-icon {
	flex: 0 0 auto;
	font-size: 14px;
	opacity: 0.85;
}

/* Logged-out menu only -- explains why there's no direct "Become a
   Vendor" link here (see the PHP comment in account-widget.php next
   to where this is printed). Same horizontal padding as
   .tnc-acct-menu-item so it lines up with the links above it. */
.tnc-acct-menu-note {
	margin: 2px 0 0;
	padding: 6px 10px 2px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--tnc-muted);
}

.tnc-acct-logout-form {
	margin: 4px 0 0;
	padding-top: 4px;
	border-top: 1px solid var(--tnc-border);
}
.tnc-acct-logout {
	color: #A23B3B;
}

/* ---------------------------------------------------------------
   Payment Reminders section, inside the dropdown -- right after
   "My Dashboard" / "My Profile", before the vendor/logout items.
   --------------------------------------------------------------- */

.tnc-acct-menu-title {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tnc-muted);
	padding: 10px 10px 4px;
	border-top: 1px solid var(--tnc-border);
	margin-top: 4px;
}

.tnc-acct-notif-list {
	max-height: 220px;
	overflow-y: auto;
}

.tnc-acct-notif-empty {
	padding: 8px 10px 10px;
	font-size: 12px;
	color: var(--tnc-muted);
}

.tnc-acct-notif-item {
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
	text-decoration: none;
	color: var(--tnc-text);
	touch-action: manipulation;
}
.tnc-acct-notif-item:hover {
	background: var(--tnc-ivory);
}
.tnc-acct-notif-item.overdue .tnc-acct-notif-when {
	color: #A23B3B;
	font-weight: 700;
}
.tnc-acct-notif-name {
	font-weight: 700;
	font-size: 13px;
}
.tnc-acct-notif-vendor {
	font-size: 11px;
	color: var(--tnc-muted);
	margin-top: 1px;
}
.tnc-acct-notif-meta {
	font-size: 11px;
	color: var(--tnc-muted);
	margin-top: 3px;
}
.tnc-acct-notif-when {
	color: var(--tnc-gold);
	font-weight: 600;
}

/* ---------------------------------------------------------------
   Mobile fallback -- a second copy of this whole widget, printed by
   TNC_Shortcodes::render_mobile_account_fallback(), pinned as a small
   floating icon in the top-right of the screen. Hidden entirely on
   desktop (where the header copy already works); some themes swap to
   a stripped-down mobile header with no slot for the header copy at
   all, so this floating copy is what actually shows there.
   --------------------------------------------------------------- */
.tnc-acct-mobile-fallback {
	display: none !important;
}
@media (max-width: 782px) {
	/* Every rule in this block is deliberately over-specified (explicit
	   px sizes, 0'd-out padding/margin, reset font-size/line-height) and
	   marked !important. This floating copy can land on a page running
	   any theme's own global `button`/`a` styles -- bigger tap-target
	   padding, a larger base font-size, etc. -- and without fighting
	   back this hard, those site-wide rules end up winning and the
	   round icon balloons into an oversized blob instead of a neat 44px
	   circle (seen on the live site: the icon rendered far larger than
	   in an isolated test render that had no theme CSS to compete with).
	   This is the one spot in the widget's CSS where that's warranted --
	   everywhere else in this file should NOT need !important.

	   It only actually shows once tnc-account-widget.js's
	   updateMobileFallback() adds .tnc-fallback-needed -- i.e. only when
	   it's confirmed the theme's own header copy of this widget ISN'T
	   visible on this page at this width. Some themes keep their header
	   copy visible even on a narrow screen (seen on this site's Vendor
	   and Admin dashboard pages), and showing the floating copy on top
	   of a header copy that's already working just doubles it up.

	   This is NOT position:fixed or position:absolute -- it's a normal,
	   plain block sitting in the page's own flow. Every earlier attempt
	   at "visible near the header, gone once scrolled" used fixed/
	   absolute positioning plus JS to fake that scrolling-away effect,
	   and each one broke a different way (absolute anchors to whatever
	   ancestor happens to be positioned, which differs page to page;
	   a scroll-tracking JS listener raced against the browser's own
	   scroll-restore timing on refresh). A plain in-flow element sitting
	   physically near the top of the actual HTML (see
	   TNC_Shortcodes::render_mobile_account_fallback() -- it's hooked to
	   wp_body_open, printed immediately after <body> opens, before the
	   theme's own header markup) scrolls away for the exact same reason
	   any other ordinary page content does: there's no special
	   positioning or JS trying to fake that, so there's nothing left to
	   race or get it wrong. */
	.tnc-acct-mobile-fallback.tnc-fallback-needed {
		all: unset !important;
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center !important;
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 10px 12px !important;
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: 14px !important;
		line-height: 1 !important;
	}
	/* Logged in OR out: both now render the exact same icon-only circle
	   (see .tnc-acct-join in account-widget.php, which reuses
	   .tnc-acct-avatar with a person icon instead of an avatar initial)
	   -- pinned to an exact small circle (the white pill behind it,
	   matching the earlier floating version's look) so no theme
	   button/link style can stretch it. .tnc-account-widget carries the
	   white circle/shadow and exact size; .tnc-acct-user/.tnc-acct-join
	   and .tnc-acct-toggle/.tnc-acct-join-toggle inside it just need to
	   fill that circle, not carry their own size or styling. */
	.tnc-acct-mobile-fallback.is-user .tnc-account-widget,
	.tnc-acct-mobile-fallback.is-guest .tnc-account-widget {
		all: unset !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		height: 44px !important;
		flex: 0 0 44px !important;
		box-sizing: border-box !important;
		background: var(--tnc-white, #fff) !important;
		border-radius: 999px !important;
		box-shadow: 0 4px 14px rgba(8, 44, 39, 0.24) !important;
	}
	.tnc-acct-mobile-fallback.is-user .tnc-acct-user,
	.tnc-acct-mobile-fallback.is-user .tnc-acct-toggle,
	.tnc-acct-mobile-fallback.is-guest .tnc-acct-join,
	.tnc-acct-mobile-fallback.is-guest .tnc-acct-join-toggle {
		all: unset !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		height: 100% !important;
		box-sizing: border-box !important;
		cursor: pointer !important;
		/* .tnc-acct-menu (the opened dropdown) is position:absolute and
		   expects ITS parent to be position:relative -- that's a plain
		   rule from earlier in this file, but all:unset above wipes it
		   out same as everything else on this element, so it has to be
		   re-declared here or the dropdown renders in the wrong place
		   (found this exact bug while testing: the menu rendered far
		   below the visible page instead of under the toggle). */
		position: relative !important;
	}
	.tnc-acct-mobile-fallback.is-user .tnc-acct-avatar,
	.tnc-acct-mobile-fallback.is-guest .tnc-acct-avatar {
		all: unset !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 28px !important;
		height: 28px !important;
		flex: 0 0 28px !important;
		box-sizing: border-box !important;
		border-radius: 50% !important;
		background: var(--tnc-gold) !important;
		color: var(--tnc-oxblood-dark) !important;
		font-weight: 700 !important;
		font-size: 13px !important;
		line-height: 28px !important;
		text-align: center !important;
		text-transform: uppercase !important;
	}
	/* The desktop header copy shows a dropdown caret next to the
	   avatar/icon -- dropped here only to keep this floating version a
	   single tidy circle; tapping the circle still opens the same menu. */
	.tnc-acct-mobile-fallback .tnc-acct-caret {
		display: none !important;
	}
	.tnc-acct-mobile-fallback.is-user .tnc-acct-toggle-badge {
		top: -2px !important;
		right: -2px !important;
	}

	/* The dropdown panel itself (opened on tap) is unaffected by the
	   resets above -- it's a sibling of .tnc-acct-toggle, not reset by
	   the is-user/is-guest rules, so it keeps its normal card styling
	   (width, shadow, menu items etc.) from earlier in this file. */
	.tnc-acct-mobile-fallback .tnc-acct-menu {
		font-family: Arial, Helvetica, sans-serif;
	}

}