/*
 * Everguard Partner Portal — front-end styles.
 *
 * Design language lifted from the Everguard CRM so the portal and the internal
 * tools read as one product: Apple system palette and type, soft layered
 * shadows, 12–16px radii, .15s ease motion.
 *
 * Theme follows the OS by default. The toggle in the portal nav writes
 * data-egpp-theme="light|dark" on <html>, which overrides the OS preference.
 */

/* ============================================================
   Tokens — light (Apple system palette, from the CRM)
   ============================================================ */

:root {
	--egpp-bg: #F5F5F7;
	--egpp-panel: #FBFBFD;
	--egpp-card: #FFFFFF;
	--egpp-soft: #F5F5F7;
	--egpp-ink: #1D1D1F;
	--egpp-muted: #86868B;
	--egpp-line: rgba(0, 0, 0, .09);

	--egpp-brand: #00204B;
	--egpp-accent: #006837;
	--egpp-accent-soft: #E9F4ED;
	--egpp-accent-ink: #FFFFFF;

	--egpp-blue: #0071E3;
	--egpp-blue-soft: #EAF3FE;
	--egpp-ok: #1D8A3C;
	--egpp-ok-soft: #E9F4ED;
	--egpp-warn: #C93400;
	--egpp-warn-soft: #FDF0E8;
	--egpp-error: #D70015;
	--egpp-error-soft: #FDEBEC;

	--egpp-ring: rgba(29, 138, 60, .28);
	--egpp-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .05);
	--egpp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);

	--egpp-radius: 12px;
	--egpp-radius-lg: 16px;
	--egpp-radius-sm: 10px;
	--egpp-pill: 999px;

	--egpp-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--egpp-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

	--egpp-ease: .15s ease;
}

/* Dark — the CRM's navy scheme, which ties back to the brand blue. */
@media (prefers-color-scheme: dark) {
	:root:not([data-egpp-theme="light"]) {
		--egpp-bg: #07111F;
		--egpp-panel: #0B1D45;
		--egpp-card: #122641;
		--egpp-soft: #081525;
		--egpp-ink: #F8FAFC;
		--egpp-muted: #9AA7B8;
		--egpp-line: rgba(255, 255, 255, .13);

		--egpp-brand: #8FB4E6;
		--egpp-accent: #11A04A;
		--egpp-accent-soft: rgba(17, 160, 74, .16);
		--egpp-accent-ink: #04140B;

		--egpp-blue: #2E90FF;
		--egpp-blue-soft: rgba(46, 144, 255, .16);
		--egpp-ok: #11A04A;
		--egpp-ok-soft: rgba(17, 160, 74, .16);
		--egpp-warn: #FBBF24;
		--egpp-warn-soft: rgba(251, 191, 36, .14);
		--egpp-error: #EF4444;
		--egpp-error-soft: rgba(239, 68, 68, .14);

		--egpp-ring: rgba(17, 160, 74, .4);
		--egpp-shadow: 0 18px 55px rgba(0, 0, 0, .28);
		--egpp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
	}
}

:root[data-egpp-theme="dark"] {
	--egpp-bg: #07111F;
	--egpp-panel: #0B1D45;
	--egpp-card: #122641;
	--egpp-soft: #081525;
	--egpp-ink: #F8FAFC;
	--egpp-muted: #9AA7B8;
	--egpp-line: rgba(255, 255, 255, .13);

	--egpp-brand: #8FB4E6;
	--egpp-accent: #11A04A;
	--egpp-accent-soft: rgba(17, 160, 74, .16);
	--egpp-accent-ink: #04140B;

	--egpp-blue: #2E90FF;
	--egpp-blue-soft: rgba(46, 144, 255, .16);
	--egpp-ok: #11A04A;
	--egpp-ok-soft: rgba(17, 160, 74, .16);
	--egpp-warn: #FBBF24;
	--egpp-warn-soft: rgba(251, 191, 36, .14);
	--egpp-error: #EF4444;
	--egpp-error-soft: rgba(239, 68, 68, .14);

	--egpp-ring: rgba(17, 160, 74, .4);
	--egpp-shadow: 0 18px 55px rgba(0, 0, 0, .28);
	--egpp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
}

/* Portal pages take the app background, not the theme's. */
body.egpp-portal {
	background: var(--egpp-bg);
	color: var(--egpp-ink);
}

/* ============================================================
   Base
   ============================================================ */

.egpp {
	color: var(--egpp-ink);
	font-family: var(--egpp-font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.egpp *,
.egpp *::before,
.egpp *::after {
	box-sizing: border-box;
}

/*
 * The portal screens constrain themselves rather than relying on the theme.
 * Hello Elementor's default page template provides no container, so without
 * this the dashboard and forms run edge to edge on wide monitors.
 *
 * If you drop a shortcode inside an Elementor container that already sets a
 * width, override this with `.egpp-app { max-width: none; padding: 0; }` in
 * Elementor's custom CSS so the two don't fight.
 */
.egpp-app {
	max-width: 1180px;
	margin-inline: auto;
	padding: 40px 24px 80px;
}

/*
 * Form screens — apply, login, submit a referral. 1180px is sized for the
 * dashboard's tables; at that width a two-column form gives you input fields
 * over 500px wide, which is uncomfortable to read and to fill in.
 */
.egpp-app--narrow {
	max-width: 880px;
}

@media (max-width: 640px) {
	.egpp-app {
		padding: 24px 16px 56px;
	}
}

.egpp h2,
.egpp h3 {
	letter-spacing: -.021em;
	color: var(--egpp-ink);
}

.egpp a {
	color: var(--egpp-accent);
	text-decoration: none;
}

.egpp a:hover {
	text-decoration: underline;
}

/*
 * Buttons rendered as links need to out-specify the rule above. `.egpp a` is
 * (0,0,1,1) and beats a bare `.egpp-button` at (0,0,1,0), which paints the
 * label in the link colour — green text on a green button, i.e. invisible.
 */
.egpp a.egpp-button,
.egpp a.egpp-button:hover {
	color: var(--egpp-accent-ink);
	text-decoration: none;
}

.egpp a.egpp-button--ghost,
.egpp a.egpp-button--ghost:hover {
	color: var(--egpp-accent);
	text-decoration: none;
}

.egpp-mono,
.egpp .egpp-mono {
	font-family: var(--egpp-mono);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   Layout
   ============================================================ */

.egpp-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 22px;
}

.egpp-header h2 {
	margin: 0;
	font-size: 28px;
	font-weight: 650;
}

.egpp-columns {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.egpp-column {
	min-width: 0;
}

@media (max-width: 860px) {
	.egpp-columns {
		grid-template-columns: 1fr;
	}
}

.egpp-card {
	background: var(--egpp-card);
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius-lg);
	padding: 22px;
	margin-bottom: 18px;
	box-shadow: var(--egpp-shadow);
}

.egpp-card--narrow {
	max-width: 440px;
	margin-inline: auto;
}

.egpp-card h3 {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 650;
}

/* ============================================================
   Public site header
   Same visual language as .egpp-nav below, so the marketing pages
   and the logged-in product read as one system.
   ============================================================ */

.egpp-site-header {
	max-width: 1180px;
	margin: 18px auto 0;
	padding: 0 24px;
	font-family: var(--egpp-font);
}

.egpp-site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: var(--egpp-card);
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius);
	box-shadow: var(--egpp-shadow-sm);
}

.egpp-site-header__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--egpp-brand);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -.02em;
}

.egpp-site-header__logo img {
	display: block;
	max-width: none;
	max-height: 36px;
	width: auto;
	height: auto;
}

.egpp-site-header__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.egpp-site-header__nav a:not(.egpp-button) {
	padding: 8px 14px;
	border-radius: var(--egpp-radius-sm);
	text-decoration: none;
	color: var(--egpp-muted);
	font-weight: 550;
	font-size: 14.5px;
	transition: background var(--egpp-ease), color var(--egpp-ease);
}

.egpp-site-header__nav a:not(.egpp-button):hover {
	background: var(--egpp-soft);
	color: var(--egpp-ink);
}

.egpp-site-header__nav a.is-current {
	background: var(--egpp-accent-soft);
	color: var(--egpp-accent);
}

.egpp-site-header__nav .egpp-button {
	margin-left: 4px;
}

@media (max-width: 720px) {
	.egpp-site-header__inner {
		justify-content: center;
	}

	.egpp-site-header__nav {
		justify-content: center;
	}
}

/* ------------------------------------------------------------
   Overlay header, for pages that open with the navy hero.

   The header is taken out of flow and drawn over the hero, so the
   photograph starts at the top of the page instead of below a white
   band. body is made a positioning context so `top: 0` lands below
   the admin bar rather than underneath it.
   ------------------------------------------------------------ */

body.egpp-header-overlay {
	position: relative;
}

body.egpp-header-overlay .egpp-site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.egpp-header-overlay .egpp-site-header__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 14px 24px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* The brand lockup is deep blue on grey, which all but disappears on
   navy. Knocking it back to solid white keeps it legible. Swap
   header_logo_url for a white or horizontal asset if you have one. */
body.egpp-header-overlay .egpp-site-header__logo img {
	filter: brightness(0) invert(1);
}

body.egpp-header-overlay .egpp-site-header__logo {
	color: #fff;
}

body.egpp-header-overlay .egpp-site-header__nav a:not(.egpp-button) {
	color: rgba(255, 255, 255, .82);
}

body.egpp-header-overlay .egpp-site-header__nav a:not(.egpp-button):hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

body.egpp-header-overlay .egpp-site-header__nav a.is-current {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

body.egpp-header-overlay .egpp-site-header__nav a.egpp-button--ghost,
body.egpp-header-overlay .egpp-site-header__nav a.egpp-button--ghost:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, .45);
	background: transparent;
}

body.egpp-header-overlay .egpp-site-header__nav a.egpp-button--ghost:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .7);
}

/* Narrow screens wrap the nav onto a second row, which would grow the
   header past the hero's top padding and sit on the headline. Below
   this width it returns to the flow, coloured to match the hero so
   there is still no white band. */
@media (max-width: 720px) {
	body.egpp-header-overlay .egpp-site-header {
		position: static;
		background: #00204B; /* matches the hero section colour set in Elementor */
	}

	body.egpp-header-overlay .egpp-site-header__inner {
		padding: 14px 20px;
	}
}

/* ============================================================
   Navigation
   ============================================================ */

.egpp-nav {
	margin-bottom: 26px;
	padding: 6px;
	background: var(--egpp-card);
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius);
	box-shadow: var(--egpp-shadow-sm);
}

.egpp-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.egpp-nav__brand {
	display: flex;
	align-items: center;
	padding: 0 12px 0 6px;
	margin-right: 4px;
	border-right: 1px solid var(--egpp-line);
	align-self: stretch;
}

.egpp-nav__brand a {
	display: block;
	padding: 0 !important;
}

.egpp-nav__brand img {
	display: block;
	max-width: 132px;
	height: auto;
}

@media (max-width: 720px) {
	.egpp-nav__brand {
		border-right: 0;
		width: 100%;
		justify-content: center;
		padding: 4px 0 8px;
		margin: 0 0 4px;
		border-bottom: 1px solid var(--egpp-line);
	}
}

.egpp-nav li a {
	display: block;
	padding: 8px 14px;
	border-radius: var(--egpp-radius-sm);
	text-decoration: none;
	color: var(--egpp-muted);
	font-weight: 550;
	font-size: 14.5px;
	transition: background var(--egpp-ease), color var(--egpp-ease);
}

.egpp-nav li a:hover {
	background: var(--egpp-soft);
	color: var(--egpp-ink);
	text-decoration: none;
}

.egpp-nav li.is-current a {
	background: var(--egpp-accent-soft);
	color: var(--egpp-accent);
}

.egpp-nav__logout {
	margin-left: auto;
}

.egpp-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	margin-left: 4px;
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-pill);
	background: var(--egpp-soft);
	color: var(--egpp-muted);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	transition: background var(--egpp-ease), color var(--egpp-ease), transform .1s ease;
}

.egpp-theme-toggle:hover {
	color: var(--egpp-ink);
}

.egpp-theme-toggle:active {
	transform: scale(.94);
}

/* ============================================================
   Stat tiles
   ============================================================ */

.egpp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: 26px;
}

.egpp-stat {
	background: var(--egpp-card);
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	box-shadow: var(--egpp-shadow-sm);
}

.egpp-stat__label {
	font-size: 13px;
	color: var(--egpp-muted);
	letter-spacing: -.01em;
}

.egpp-stat__value {
	font-size: 27px;
	font-weight: 650;
	line-height: 1.15;
	letter-spacing: -.028em;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   Tables
   ============================================================ */

.egpp-table-wrap {
	overflow-x: auto;
	background: var(--egpp-card);
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius-lg);
	box-shadow: var(--egpp-shadow-sm);
}

.egpp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.egpp-table th,
.egpp-table td {
	padding: 13px 16px;
	text-align: left;
	border-bottom: 1px solid var(--egpp-line);
	vertical-align: top;
	white-space: nowrap;
}

.egpp-table thead th {
	background: transparent;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--egpp-muted);
}

/*
 * Themes and page builders commonly stripe tables via tr:nth-child(). That
 * fights the portal's flat rows, so the zebra is reset explicitly at matching
 * specificity rather than left to load order.
 */
.egpp-table tbody tr,
.egpp-table tbody tr:nth-child(odd),
.egpp-table tbody tr:nth-child(even) {
	background: transparent;
	transition: background var(--egpp-ease);
}

.egpp-table tbody tr:hover,
.egpp-table tbody tr:nth-child(odd):hover,
.egpp-table tbody tr:nth-child(even):hover {
	background: var(--egpp-soft);
}

/* The compensation schedule, rendered into marketing pages by shortcode. */
.egpp-comp {
	margin: 4px 0 8px;
}

.egpp-comp .egpp-table-wrap + .egpp-help,
.egpp-comp .egpp-table-wrap + p {
	margin-top: 14px;
}

.egpp-table tbody tr:last-child td {
	border-bottom: 0;
}

.egpp-table td.num {
	font-variant-numeric: tabular-nums;
}

.egpp-table td.wrap,
.egpp-table th.wrap {
	white-space: normal;
	min-width: 240px;
}

/* ============================================================
   Status pills
   ============================================================ */

.egpp-stage,
.egpp-payout,
.egpp-badge {
	display: inline-block;
	padding: 3px 11px;
	border-radius: var(--egpp-pill);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: -.005em;
	background: var(--egpp-soft);
	border: 1px solid var(--egpp-line);
	color: var(--egpp-muted);
	white-space: nowrap;
}

.egpp-stage--accepted,
.egpp-stage--contacted,
.egpp-stage--set,
.egpp-stage--confirmed,
.egpp-stage--issued,
.egpp-stage--pitched {
	background: var(--egpp-blue-soft);
	border-color: transparent;
	color: var(--egpp-blue);
}

.egpp-stage--closed_won,
.egpp-stage--production,
.egpp-stage--installed,
.egpp-stage--collected,
.egpp-payout--paid,
.egpp-badge--ok {
	background: var(--egpp-ok-soft);
	border-color: transparent;
	color: var(--egpp-ok);
}

.egpp-stage--payout_pending,
.egpp-stage--payout_approved,
.egpp-stage--pitch_follow_up,
.egpp-payout--eligible,
.egpp-payout--approved,
.egpp-badge--warn {
	background: var(--egpp-warn-soft);
	border-color: transparent;
	color: var(--egpp-warn);
}

.egpp-stage--cancelled,
.egpp-stage--pitch_no_sale,
.egpp-payout--failed,
.egpp-payout--reversed,
.egpp-badge--error {
	background: var(--egpp-error-soft);
	border-color: transparent;
	color: var(--egpp-error);
}

/* ============================================================
   Timeline
   ============================================================ */

.egpp-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 20px;
	border-left: 2px solid var(--egpp-line);
}

.egpp-timeline li {
	position: relative;
	padding: 0 0 18px 6px;
}

.egpp-timeline li::before {
	content: "";
	position: absolute;
	left: -27px;
	top: 6px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--egpp-accent);
	box-shadow: 0 0 0 3px var(--egpp-card);
}

.egpp-timeline li.is-next::before {
	background: var(--egpp-line);
}

.egpp-timeline__stage {
	font-weight: 600;
	display: inline-block;
	margin-right: 8px;
}

.egpp-timeline__date {
	color: var(--egpp-muted);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}

.egpp-timeline__note {
	display: block;
	color: var(--egpp-muted);
	font-size: 13.5px;
	margin-top: 2px;
}

/* ============================================================
   Definition lists
   ============================================================ */

.egpp-dl {
	display: grid;
	grid-template-columns: minmax(110px, 38%) 1fr;
	gap: 9px 16px;
	margin: 0;
}

.egpp-dl dt {
	color: var(--egpp-muted);
	font-size: 13.5px;
}

.egpp-dl dd {
	margin: 0;
	font-size: 14.5px;
}

/* ============================================================
   Forms
   ============================================================ */

.egpp-form label,
.egpp-label {
	display: block;
	font-weight: 550;
	font-size: 13.5px;
	margin-bottom: 6px;
	color: var(--egpp-ink);
}

.egpp-form input[type="text"],
.egpp-form input[type="email"],
.egpp-form input[type="tel"],
.egpp-form input[type="url"],
.egpp-form input[type="date"],
.egpp-form input[type="datetime-local"],
.egpp-form input[type="number"],
.egpp-form input[type="search"],
.egpp-form input[type="password"],
.egpp-form select,
.egpp-form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius-sm);
	font: inherit;
	font-size: 15px;
	background: var(--egpp-card);
	color: var(--egpp-ink);
	transition: border-color var(--egpp-ease), box-shadow var(--egpp-ease);
}

.egpp-form input::placeholder,
.egpp-form textarea::placeholder {
	color: var(--egpp-muted);
	opacity: .75;
}

.egpp-form input:focus,
.egpp-form select:focus,
.egpp-form textarea:focus {
	outline: none;
	border-color: var(--egpp-accent);
	box-shadow: 0 0 0 4px var(--egpp-ring);
}

.egpp-form input:focus-visible,
.egpp-form select:focus-visible,
.egpp-form textarea:focus-visible,
.egpp-button:focus-visible,
.egpp-theme-toggle:focus-visible {
	outline: 2px solid var(--egpp-accent);
	outline-offset: 2px;
}

.egpp-fieldset {
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius-lg);
	background: var(--egpp-card);
	padding: 22px 24px;
	margin: 0 0 18px;
	box-shadow: var(--egpp-shadow-sm);
}

.egpp-fieldset legend {
	font-weight: 650;
	font-size: 15px;
	padding: 0 8px;
	letter-spacing: -.015em;
}

.egpp-grid {
	display: grid;
	gap: 16px 18px;
}

.egpp-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.egpp-grid p {
	margin: 0;
}

.egpp-span-2 {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.egpp-grid--2 {
		grid-template-columns: 1fr;
	}
}

.egpp-checkbox label,
.egpp-radios label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: 14.5px;
	line-height: 1.5;
}

.egpp-form input[type="checkbox"],
.egpp-form input[type="radio"] {
	accent-color: var(--egpp-accent);
	width: 17px;
	height: 17px;
	margin-top: 1px;
	flex: none;
}

.egpp-radios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.egpp-radios label {
	padding: 11px 14px;
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius-sm);
	background: var(--egpp-soft);
	cursor: pointer;
	transition: border-color var(--egpp-ease), background var(--egpp-ease);
}

.egpp-radios label:hover {
	border-color: var(--egpp-accent);
}

.egpp-consent label {
	background: var(--egpp-soft);
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius-sm);
	padding: 15px 17px;
}

.egpp-req {
	color: var(--egpp-error);
}

.egpp-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- WordPress login form ----------
 * wp_login_form() emits its own markup and an unclassed submit input.
 */

.egpp #loginform p {
	margin: 0 0 16px;
}

.egpp #loginform label {
	display: block;
	font-weight: 550;
	font-size: 13.5px;
	margin-bottom: 6px;
}

.egpp #loginform input[type="text"],
.egpp #loginform input[type="password"] {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius-sm);
	font: inherit;
	font-size: 15px;
	background: var(--egpp-card);
	color: var(--egpp-ink);
	transition: border-color var(--egpp-ease), box-shadow var(--egpp-ease);
}

.egpp #loginform input[type="text"]:focus,
.egpp #loginform input[type="password"]:focus {
	outline: none;
	border-color: var(--egpp-accent);
	box-shadow: 0 0 0 4px var(--egpp-ring);
}

.egpp #loginform .login-remember label {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 400;
	font-size: 14.5px;
}

.egpp #loginform .login-submit input[type="submit"] {
	display: inline-block;
	width: 100%;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--egpp-radius-sm);
	background: var(--egpp-accent);
	color: var(--egpp-accent-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: filter var(--egpp-ease), transform .1s ease;
}

.egpp #loginform .login-submit input[type="submit"]:hover {
	filter: brightness(1.08);
}

.egpp #loginform .login-submit input[type="submit"]:active {
	transform: scale(.98);
}

/* ============================================================
   Buttons
   ============================================================ */

.egpp-button {
	display: inline-block;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: var(--egpp-radius-sm);
	background: var(--egpp-accent);
	color: var(--egpp-accent-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	text-decoration: none;
	cursor: pointer;
	transition: filter var(--egpp-ease), background var(--egpp-ease), transform .1s ease;
}

.egpp-button:hover {
	filter: brightness(1.08);
	color: var(--egpp-accent-ink);
	text-decoration: none;
}

.egpp-button:active {
	transform: scale(.98);
}

.egpp-button--ghost {
	background: var(--egpp-card);
	border-color: var(--egpp-line);
	color: var(--egpp-accent);
}

.egpp-button--ghost:hover {
	background: var(--egpp-soft);
	color: var(--egpp-accent);
	filter: none;
}

.egpp-button--small {
	padding: 7px 14px;
	font-size: 13.5px;
}

.egpp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
}

/* ============================================================
   Notices
   ============================================================ */

.egpp-notice {
	border: 1px solid var(--egpp-line);
	border-left: 3px solid var(--egpp-muted);
	background: var(--egpp-card);
	border-radius: var(--egpp-radius-sm);
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: 14.5px;
	box-shadow: var(--egpp-shadow-sm);
}

.egpp-notice--success {
	border-color: transparent;
	border-left-color: var(--egpp-ok);
	background: var(--egpp-ok-soft);
}

.egpp-notice--error {
	border-color: transparent;
	border-left-color: var(--egpp-error);
	background: var(--egpp-error-soft);
}

.egpp-notice--info {
	border-color: transparent;
	border-left-color: var(--egpp-blue);
	background: var(--egpp-blue-soft);
}

/* ============================================================
   Misc
   ============================================================ */

.egpp-muted,
.egpp-help {
	color: var(--egpp-muted);
	font-size: 13.5px;
}

.egpp-help {
	margin-top: 8px;
}

.egpp-empty {
	color: var(--egpp-muted);
	padding: 32px 20px;
	background: var(--egpp-card);
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius-lg);
	text-align: center;
	font-size: 14.5px;
	margin: 0;
}

.egpp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.egpp-filters input[type="search"],
.egpp-filters input[type="text"],
.egpp-filters input[type="date"] {
	flex: 1 1 220px;
	padding: 10px 13px;
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius-sm);
	font: inherit;
	font-size: 14.5px;
	background: var(--egpp-card);
	color: var(--egpp-ink);
}

.egpp-filters select {
	padding: 10px 13px;
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius-sm);
	font: inherit;
	font-size: 14.5px;
	background: var(--egpp-card);
	color: var(--egpp-ink);
}

.egpp-pagination {
	display: flex;
	gap: 6px;
	margin-top: 18px;
}

.egpp-pagination a {
	padding: 8px 14px;
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius-sm);
	background: var(--egpp-card);
	text-decoration: none;
	color: var(--egpp-ink);
	font-size: 14px;
	font-weight: 550;
	transition: background var(--egpp-ease);
}

.egpp-pagination a:hover {
	background: var(--egpp-soft);
	text-decoration: none;
}

.egpp-pagination a.is-current {
	background: var(--egpp-accent);
	border-color: transparent;
	color: var(--egpp-accent-ink);
}

.egpp-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.egpp-checklist li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	padding: 13px 0;
	border-bottom: 1px solid var(--egpp-line);
}

.egpp-checklist li:last-child {
	border-bottom: 0;
}

.egpp-checklist li::before {
	content: "—";
	color: var(--egpp-muted);
	font-weight: 700;
	width: 15px;
	flex: none;
}

.egpp-checklist li.is-ok::before {
	content: "✓";
	color: var(--egpp-ok);
}

.egpp-checklist li.is-missing::before {
	content: "!";
	color: var(--egpp-warn);
}

.egpp-checklist__label {
	flex: 1 1 auto;
	font-weight: 550;
	font-size: 14.5px;
}

.egpp-checklist li.is-missing .egpp-checklist__label {
	color: var(--egpp-warn);
}

.egpp-checklist__detail {
	color: var(--egpp-muted);
	font-size: 13.5px;
}

.egpp-notes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.egpp-notes li {
	padding: 13px 0;
	border-bottom: 1px solid var(--egpp-line);
}

.egpp-notes li:last-child {
	border-bottom: 0;
}

.egpp-notes__meta {
	display: block;
	color: var(--egpp-muted);
	font-size: 12.5px;
	margin-bottom: 3px;
}

.egpp-downloads {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.egpp-downloads li {
	padding: 12px 0;
	border-bottom: 1px solid var(--egpp-line);
	font-size: 14.5px;
}

.egpp-downloads li:last-child {
	border-bottom: 0;
}

.egpp-downloads .egpp-muted {
	display: block;
	margin-top: 2px;
}

.egpp-copyrow {
	display: flex;
	gap: 10px;
	align-items: center;
}

.egpp-copyfield,
.egpp-template {
	flex: 1 1 auto;
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius-sm);
	font-family: var(--egpp-mono);
	font-size: 13.5px;
	background: var(--egpp-soft);
	color: var(--egpp-ink);
	resize: vertical;
}

.egpp-qr {
	max-width: 220px;
	height: auto;
	border-radius: var(--egpp-radius);
}

.egpp-zips {
	font-family: var(--egpp-mono);
	font-size: 13.5px;
	color: var(--egpp-muted);
	line-height: 1.9;
}

.egpp hr {
	border: 0;
	border-top: 1px solid var(--egpp-line);
	margin: 24px 0;
}

@media (prefers-reduced-motion: reduce) {
	.egpp *,
	.egpp *::before,
	.egpp *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
   Equal-height cards in Elementor rows

   The card surface (background, border, padding) is set on the
   icon-box widget itself, and Elementor top-aligns widgets inside
   a column rather than stretching them — so each card ends up as
   tall as its own text and a row of three looks ragged.

   Stretching the widget to the row height fixes it wherever it
   appears, so the page templates need no changes.
   ============================================================ */

.egpp-portal .elementor-widget-wrap:has(> .elementor-widget-icon-box) {
	align-content: stretch;
}

.egpp-portal .elementor-widget-icon-box {
	align-self: stretch;
	display: flex;
}

.egpp-portal .elementor-widget-icon-box > .elementor-widget-container {
	width: 100%;
}

/* ============================================================
   FAQ accordion

   Elementor's default draws the items as one boxed grid with
   shared hairlines and square corners. Restyled here as separate
   rounded cards, with the toggle icon moved to the trailing edge.

   The selectors carry an extra class over Elementor's generated
   rules (which are .elementor-NNN .elementor-element.elementor-
   element-XXX .elementor-accordion-item) so the widget's own
   border colour doesn't win.
   ============================================================ */

.egpp-portal .elementor-widget-accordion .elementor-accordion .elementor-accordion-item {
	background: var(--egpp-card);
	border: 1px solid var(--egpp-line);
	border-radius: var(--egpp-radius);
	margin-bottom: 10px;
	overflow: hidden;
	box-shadow: var(--egpp-shadow-sm);
	transition: border-color var(--egpp-ease), box-shadow var(--egpp-ease);
}

.egpp-portal .elementor-widget-accordion .elementor-accordion .elementor-accordion-item:last-child {
	margin-bottom: 0;
}

.egpp-portal .elementor-widget-accordion .elementor-accordion .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 17px 20px;
	border: 0;
	background: transparent;
	transition: background var(--egpp-ease);
}

.egpp-portal .elementor-widget-accordion .elementor-accordion .elementor-tab-title:hover {
	background: var(--egpp-soft);
}

/* Title first, toggle pushed to the trailing edge. */
.egpp-portal .elementor-widget-accordion .elementor-accordion .elementor-accordion-title {
	order: 1;
}

.egpp-portal .elementor-widget-accordion .elementor-accordion .elementor-accordion-icon {
	order: 2;
	float: none;
	width: auto;
	margin-left: auto;
	padding: 0;
	font-size: 13px;
}

.egpp-portal .elementor-widget-accordion .elementor-accordion .elementor-tab-content {
	border: 0;
	padding: 0 20px 20px;
	line-height: 1.65;
}