/*
 * GUERRILLA Account — account-shell styles.
 *
 * Every colour is a CSS custom property scoped to .gacct (never :root), so a rebrand is a
 * one-block change and the tokens can never leak into the surrounding theme. The values here
 * are the defaults; GAcct_Theme injects the client's configured tokens as an inline override
 * on top of them, and other GUERRILLA products can read the same palette via gacct_css_vars().
 *
 * Builder-proofing: a page builder (Elementor) drops the shortcode into a widget whose own
 * selectors out-specify `.gacct`, so anything a builder's global styles commonly repaint —
 * buttons, form controls, the resend link — is locked with !important AND selected through
 * the .gacct ancestor, so it also out-specifies a builder's ".kit input" / ".kit button" rules.
 */
.gacct {
	/* Neutral, unbranded defaults — a client overrides these from Settings, which injects an
	   inline block that also forces the font past page-builder widget styles. */
	--gacct-primary: #34495e;
	--gacct-primary-deep: #2c3e50;
	--gacct-accent: #7f8c8d;
	--gacct-ink: #222b2f;
	--gacct-muted: #6b7785;
	--gacct-surface: #ffffff;
	--gacct-bg: #f4f6f8;
	--gacct-border: #dfe4e8;
	--gacct-radius: 12px;
	--gacct-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
	--gacct-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	/* Derived tokens — GAcct_Theme recomputes both from the configured palette. The primary as
	   an RGB triplet feeds translucent focus rings via rgba() (supported everywhere, unlike
	   color-mix()); the <select> chevron is tinted with the muted colour. */
	--gacct-primary-rgb: 52, 73, 94;
	--gacct-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");

	max-width: 1080px;
	margin: 0 auto;
	color: var(--gacct-ink);
	font-family: var(--gacct-font);
}

.gacct * {
	box-sizing: border-box;
}

/* Header */
.gacct-header {
	margin-bottom: 24px;
}
.gacct-eyebrow {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--gacct-primary);
	margin-bottom: 6px;
}
.gacct-title {
	color: var(--gacct-primary);
	margin: 0 0 8px;
	line-height: 1.2;
	font-weight: 700;
	overflow-wrap: anywhere;
}
/* Explicit sizes so the shell page title and the auth-card title don't inherit whatever the
   theme sizes h1/h2 at. */
.gacct-header .gacct-title {
	font-size: 1.85rem;
}
.gacct-auth .gacct-title {
	font-size: 1.4rem;
	margin-bottom: 4px;
}
/* overflow-wrap: a display name is member-supplied and may be one unbreakable token (an email
   address); without this it is the one thing that can force a horizontal scrollbar. */
.gacct-signedin {
	color: var(--gacct-muted);
	margin: 0;
	font-size: 0.95rem;
	overflow-wrap: anywhere;
}
.gacct-signedin strong {
	overflow-wrap: anywhere;
}
.gacct-signedin a {
	color: var(--gacct-primary);
	white-space: nowrap;
}

/* Cards */
.gacct-card {
	background: var(--gacct-surface);
	border: 1px solid var(--gacct-border);
	border-radius: var(--gacct-radius);
	box-shadow: var(--gacct-shadow);
	padding: 24px 26px;
	margin: 0 0 20px;
}
.gacct-gate {
	text-align: center;
	background: var(--gacct-bg);
	padding: 40px 28px;
}
.gacct-empty {
	color: var(--gacct-muted);
}

/* Sections (one per contributing product) */
.gacct-section {
	background: var(--gacct-surface);
	border: 1px solid var(--gacct-border);
	border-radius: var(--gacct-radius);
	box-shadow: var(--gacct-shadow);
	padding: 24px 26px;
	margin: 0 0 20px;
}
.gacct-section-title {
	color: var(--gacct-primary);
	margin: 0 0 14px;
	font-size: 1.15rem;
	overflow-wrap: anywhere;
}
.gacct-section-body > *:last-child {
	margin-bottom: 0;
}

/* Membership status */
.gacct-status {
	margin: 0 0 8px;
	font-size: 1rem;
	overflow-wrap: anywhere;
}
.gacct-status--active strong {
	color: var(--gacct-primary);
}
.gacct-period {
	color: var(--gacct-muted);
	margin: 0 0 16px;
	font-size: 0.9rem;
	overflow-wrap: anywhere;
}
.gacct-manage {
	margin: 0;
}

/* Buttons.
   Every visual property is locked (many with !important) so a page builder's global button
   styles — fills, uppercasing, serif fonts, square corners — can't repaint them. Primary and
   secondary buttons share one size/shape and differ only in fill, so they read as a set. */
.gacct .gacct-btn,
.gacct .gacct-btn-ghost {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border-radius: 999px !important;
	padding: 12px 28px !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	line-height: 1.2 !important;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.gacct .gacct-btn {
	background: var(--gacct-primary) !important;
	color: #fff !important;
	border: 2px solid var(--gacct-primary) !important;
}
.gacct .gacct-btn:hover,
.gacct .gacct-btn:focus-visible {
	background: var(--gacct-primary-deep) !important;
	border-color: var(--gacct-primary-deep) !important;
	color: #fff !important;
}
.gacct .gacct-btn-ghost {
	background: transparent !important;
	color: var(--gacct-primary) !important;
	border: 2px solid var(--gacct-primary) !important;
}
.gacct .gacct-btn-ghost:hover,
.gacct .gacct-btn-ghost:focus-visible {
	background: var(--gacct-primary) !important;
	color: #fff !important;
}
/* Focus rings are a translucent rgba() halo rather than color-mix(): on browsers without
   color-mix() the whole declaration is dropped, which with a bare `outline: none` would leave
   keyboard users with no focus indicator at all. The transparent outline keeps a ring in
   forced-colours mode, where box-shadow is ignored. */
.gacct .gacct-btn:focus-visible,
.gacct .gacct-btn-ghost:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(var(--gacct-primary-rgb), 0.3);
}

/* Auth panel (login / register / verify / reset) */
.gacct-auth {
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}
.gacct-tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 20px;
	border-bottom: 1px solid var(--gacct-border);
}
.gacct-tab {
	flex: 1;
	text-align: center;
	padding: 10px 8px;
	text-decoration: none;
	color: var(--gacct-muted);
	font-weight: 600;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.gacct-tab:hover {
	color: var(--gacct-primary);
	border-bottom-color: var(--gacct-border);
}
.gacct-tab.is-active {
	color: var(--gacct-primary);
	border-bottom-color: var(--gacct-primary);
}
.gacct-tab:focus-visible,
.gacct-auth-alt a:focus-visible,
.gacct-signedin a:focus-visible {
	outline: 2px solid var(--gacct-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Forms */
.gacct-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.gacct-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.gacct-field > span {
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
/* Two fields side by side. align-items:flex-end bottom-aligns them so their inputs line up
   even if one label wraps to two lines (the taller label just extends upward) — no fragile
   fixed heights. The small-screen block below stacks them and resets that alignment. */
.gacct-field-row {
	display: flex;
	gap: 16px;
	align-items: flex-end;
}
.gacct-field-row .gacct-field {
	flex: 1 1 0;
	min-width: 0;
}
.gacct .gacct-input {
	width: 100%;
	padding: 10px 12px !important;
	border: 1px solid var(--gacct-border) !important;
	border-radius: 8px !important;
	background-color: var(--gacct-surface) !important;
	color: var(--gacct-ink) !important;
	/* 16px floor: iOS Safari zooms the page when it focuses a control set smaller than that,
	   and a builder's own input rules out-specify .gacct-input — so lock it like the buttons.
	   The plain 16px line is the fallback for browsers without max(). */
	font-size: 16px !important;
	font-size: max(1rem, 16px) !important;
	font-family: inherit;
	line-height: 1.25;
}
.gacct .gacct-input:focus {
	outline: 2px solid transparent;
	outline-offset: 0;
	border-color: var(--gacct-primary) !important;
	box-shadow: 0 0 0 3px rgba(var(--gacct-primary-rgb), 0.18);
}
/* <select> shares .gacct-input, but browsers give it their own height and draw the arrow over
   the text. Flatten it to match the text inputs and draw our own chevron (a derived token, so
   it follows the palette). Must come after .gacct-input: that rule's `background` shorthand
   would otherwise reset the image. */
.gacct select.gacct-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: auto;
	padding-right: 38px !important;
	background: var(--gacct-surface) var(--gacct-select-arrow) no-repeat right 14px center !important;
	background-size: 12px 8px !important;
	text-overflow: ellipsis;
}
.gacct select.gacct-input::-ms-expand {
	display: none;
}
@media (forced-colors: active) {
	.gacct select.gacct-input {
		-webkit-appearance: menulist;
		appearance: menulist;
		padding-right: 12px !important;
	}
}
/* Autofilled inputs: browsers paint their own background and text colour with UA precedence;
   an inset shadow is the one reliable way to keep the palette (and the focus ring). */
.gacct .gacct-input:-webkit-autofill,
.gacct .gacct-input:-webkit-autofill:hover,
.gacct .gacct-input:-webkit-autofill:focus,
.gacct .gacct-input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--gacct-surface) inset;
	box-shadow: 0 0 0 1000px var(--gacct-surface) inset;
	-webkit-text-fill-color: var(--gacct-ink);
	caret-color: var(--gacct-ink);
	transition: background-color 9999s ease-out 0s;
}
.gacct .gacct-input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--gacct-surface) inset, 0 0 0 3px rgba(var(--gacct-primary-rgb), 0.18);
	box-shadow: 0 0 0 1000px var(--gacct-surface) inset, 0 0 0 3px rgba(var(--gacct-primary-rgb), 0.18);
}
.gacct-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.9rem;
	color: var(--gacct-muted);
}
.gacct-checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
}
.gacct-form .gacct-btn {
	align-self: flex-start;
}

/* Honeypot: kept in the DOM for bots, removed from view and flow for humans. The clip pattern
   rather than an off-screen offset, which in an RTL layout becomes a 9999px scroll region. */
.gacct-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Alerts */
.gacct-alert {
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 0.92rem;
	overflow-wrap: anywhere;
}
.gacct-alert--error {
	background: #fbeaea;
	color: #8a1f1f;
	border: 1px solid #f0c9c9;
}
.gacct-alert--ok {
	background: #eef7e9;
	color: #2f5d1e;
	border: 1px solid #cfe6c0;
}

/* Small print + secondary links/buttons */
.gacct-fine {
	font-size: 0.82rem;
	color: var(--gacct-muted);
	margin: 0;
	overflow-wrap: anywhere;
}
.gacct-auth-alt {
	margin: 16px 0 0;
	font-size: 0.9rem;
}
.gacct-auth-alt a {
	color: var(--gacct-primary);
}
.gacct-resend {
	margin: 14px 0 0;
	font-size: 0.9rem;
	color: var(--gacct-muted);
}
/* A plain text link rendered as a <button> (it submits the resend form). Every box property is
   reset with !important so a page builder's global button rules — fills, borders, uppercasing,
   pill padding — can't turn it back into a chip; it stays an inline underlined link. */
.gacct .gacct-linkbtn {
	display: inline-block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 2px 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--gacct-primary) !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: 600 !important;
	line-height: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline !important;
	cursor: pointer;
}
.gacct .gacct-linkbtn:hover {
	color: var(--gacct-primary-deep) !important;
}
.gacct .gacct-linkbtn:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	border-radius: 4px !important;
	box-shadow: 0 0 0 3px rgba(var(--gacct-primary-rgb), 0.3) !important;
}

@media (prefers-reduced-motion: reduce) {
	.gacct *,
	.gacct *::before,
	.gacct *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Small screens: stack paired fields, give thumbs full-width buttons and 44px targets, and
   trade card padding for content width. */
@media (max-width: 480px) {
	.gacct-card,
	.gacct-section {
		padding: 18px 16px;
	}
	.gacct-gate {
		padding: 28px 18px;
	}
	.gacct-header {
		margin-bottom: 16px;
	}
	.gacct-header .gacct-title {
		font-size: 1.5rem;
	}
	/* Column direction flips the flex cross axis to horizontal, so the row's
	   align-items:flex-end would right-align the fields at content width — stretch them. */
	.gacct-field-row {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}
	.gacct-field-row .gacct-field {
		width: 100%;
	}
	.gacct .gacct-input {
		padding: 12px 14px !important;
	}
	.gacct-tab {
		padding: 13px 8px;
	}
	.gacct-form .gacct-btn,
	.gacct-form .gacct-btn-ghost,
	.gacct-manage .gacct-btn-ghost,
	.gacct-gate .gacct-btn {
		align-self: stretch;
		width: 100% !important;
	}
	.gacct .gacct-linkbtn {
		min-height: 44px;
		padding: 12px 4px !important;
		line-height: 20px !important;
	}
	.gacct-auth-alt a,
	.gacct-signedin a {
		display: inline-block;
		min-height: 44px;
		padding: 12px 4px;
		line-height: 20px;
	}
	.gacct-auth-alt {
		margin-top: 8px;
	}
	.gacct-checkbox {
		min-height: 44px;
		padding: 4px 0;
	}
	.gacct-checkbox input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
}