/*
Theme Name: POET Labs Landing
Theme URI: https://poetlabs.co
Author: POET Labs
Description: Standalone single-page marketing landing theme for the POET Labs research community signup page. Separate codebase from the main WooCommerce store — no shared dependencies. Plain CSS, no build step, no JS framework.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: poet-landing
*/

/* ==================== Tokens ====================
   Matches the main poetlabs.co store's existing design tokens (separate
   codebase, same brand) — colors, fonts, and the background gradient are
   all the exact values used there, not new ones invented for this page. */
:root {
	--color-primary: #3A1C1D;
	--color-primary-hover: #4A2527;
	--color-luxury-gold: #C9A24A;
	--color-soft-gold: #F2E8D2;
	--color-background: #FCFAF6;
	--color-borders: #E9DDC3;
	--color-heading: #3A1C1D;
	--color-body-text: #4A3B35;
	--color-muted-text: #8C7B72;
	--font-heading: 'Montserrat', Georgia, serif;
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--container: 1180px;
}

/* ==================== Reset ==================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--color-body-text);
	background-color: var(--color-background);
	/* Exact colors/anchor-points confirmed from the peptide-store theme —
	   two radial maroon tints, lighter from the top right, stronger from
	   the bottom left. Fade-out stops extended to 100% (the true farthest
	   corner) rather than the original 45%/50%: a radial "circle" sizes
	   itself by distance-to-farthest-corner, and on a very tall mobile
	   page that distance is large, so a 45%/50% stop reached full
	   transparency well before the section's actual bottom — visible as
	   a hard seam partway down. 100% guarantees full-height coverage on
	   any aspect ratio. */	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	min-height: 100dvh;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, p { margin: 0; }
button, .btn { font-family: inherit; }

.container {
	max-width: var(--container);
	width: 100%;
	margin: 0 auto;
	padding: 0 24px;
}

.icon svg {
	display: block;
}

/* ==================== Homepage viewport fit ====================
   Header + hero together fill one viewport (100dvh — the dynamic
   viewport-height unit, so mobile browser toolbars showing/hiding don't
   throw the math off). Scoped to `body.home` — WordPress's own automatic
   body class on the front page — rather than a wrapping div, since
   header.php/footer.php are now shared across every template (including
   template-legal.php) and shouldn't carry homepage-specific layout
   behavior. The hero flexes to fill whatever's left after the header and
   centers its own content within that space, so if the fluid sizing
   below runs very slightly long or short on a given screen, the result
   is a gracefully centered block (or a tiny scroll as a safety net)
   rather than anything ever getting clipped. */
body.home {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* ==================== Buttons ==================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--color-primary);
	border-radius: 8px;
	background: #c9a24a;
	color: #ffff;
	font-weight: 800;
	font-size: clamp(10.5px, 1.3vw, 12px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: clamp(9px, 1.4vh, 13px) clamp(16px, 3vw, 26px);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn:hover {
	background: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.btn:active { transform: translateY(1px); }
.btn--hero { margin-top: clamp(4px, 1vh, 10px); }

/* ==================== Header ==================== */
.site-header {
	border-bottom: 1px solid var(--color-borders);
	flex-shrink: 0;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: clamp(10px, 1.8vh, 16px);
	padding-bottom: clamp(10px, 1.8vh, 16px);
}
.site-header__logo,
.site-header__logo img {
	display: block;
	max-height: clamp(28px, 4vh, 38px);
	width: auto;
}

/* ==================== Hero ==================== */
.hero {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	padding: clamp(10px, 2.4vh, 28px) 0;
	height:90vh;
	    background-image: radial-gradient(circle at 100% 0, #3a1c1d24 0%, #3a1c1d00 45%), radial-gradient(circle at 0 100%, #3a1c1d4d 0%, #3a1c1d00 50%);
}
.hero__inner {
	max-width: 1070px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}

.hero__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: clamp(8px, 1.6vh, 14px);
}
.hero__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--color-luxury-gold);
}
.hero__rating-divider {
	width: 20px;
	height: 1px;
	background: var(--color-muted-text);
}
.hero__eyebrow-text {
	font-size: clamp(10px, 1.1vw + 0.6vh, 12px);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted-text);
}
@media (max-width: 640px) {
	.hero__stars,
	.hero__rating-divider {
		display: none;
	}
}

.hero__heading {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(24px, 3.2vw + 1.6vh, 42px);
	line-height: 1.15;
	text-align: center;
	color: var(--color-heading);
	max-width: 640px;
	margin: 0 auto;
}

.hero__subtitle {
	font-size: clamp(12.5px, 1vw + 0.6vh, 15px);
	line-height: 1.55;
	text-align: center;
	color: var(--color-body-text);
	max-width: 1070px;
	margin: clamp(10px, 1.8vh, 18px) auto 0;
}

.hero__image-wrap {
	display: flex;
	justify-content: center;
	margin: clamp(12px, 2.6vh, 28px) 0;
}
.hero__image-wrap img {
	height: clamp(150px, 32vh, 340px);
	width: auto;
	max-width: 92%;
	object-fit: contain;
}
.hero__image-placeholder {
	width: 100%;
	max-width: 380px;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	border: 1px dashed var(--color-borders);
	background: var(--color-soft-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: var(--color-muted-text);
	text-align: center;
	padding: 24px;
}

/* ==================== Divider + trust row ==================== */
.hero__divider {
	border: none;
	border-top: 1px solid var(--color-borders);
	margin: clamp(14px, 2.4vh, 28px) 0 0;
}

.trust-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(14px, 3vw, 36px);
	padding-top: clamp(12px, 2vh, 22px);
}
.trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
}
.trust-item__icon {
	flex-shrink: 0;
	width: clamp(28px, 4vw + 1.6vh, 38px);
	height: clamp(28px, 4vw + 1.6vh, 38px);
	border-radius: 999px;
	background: rgba(58, 28, 29, 0.14);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}
.trust-item__title {
	font-size: clamp(11px, 1.1vw + 0.4vh, 13px);
	font-weight: 700;
	color: var(--color-heading);
	line-height: 1.3;
}
.trust-item__subtitle {
	margin-top: 2px;
	font-size: clamp(9.5px, 0.9vw + 0.3vh, 11px);
	color: var(--color-muted-text);
	line-height: 1.3;
}

/* ==================== Footer ====================
   On the homepage, sits below the body.home flex container above (not
   inside it), so it isn't part of the "fit hero in one viewport"
   behavior — a small scroll to reach it there is normal, expected
   behavior. On every other page (e.g. template-legal.php), it's just a
   normal footer at the end of normally-flowing content. */
.site-footer {
	background-color: var(--color-primary);
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 20px;
	padding-top: 44px;
	padding-bottom: 32px;
}
.site-footer__brand {
	grid-column: 1 / -1;
}
@media (min-width: 700px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 24px;
	}
	.site-footer__brand {
		grid-column: auto;
	}
}

.site-footer__logo-img,
.site-footer__logo-img img {
	display: block;
	max-height: 54px;
	width: auto;
}

/* Fine-print disclaimer — deliberately its own full-width section below
   the nav row, not squeezed into the brand column: at ~300 words it made
   that column far taller than "Quick Links"/"Get in Touch" next to it,
   which read as broken/unbalanced. Kept visible (not collapsed behind a
   toggle) since it's a compliance disclaimer, but set small and dense,
   flowing into two columns on wider screens the way footer fine print
   commonly does, so it doesn't dominate the footer visually. */
.site-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 8px;
	padding-top: 24px;
	padding-bottom: 8px;
}
.site-footer__legal-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 14px;
}
.site-footer__disclaimer {
	color: rgba(255, 255, 255, 0.45);
	font-size: 11px;
	line-height: 1.6;
}
.site-footer__disclaimer p {
	margin: 0 0 10px;
}
.site-footer__disclaimer p:last-child {
	margin-bottom: 0;
}
@media (min-width: 780px) {
	.site-footer__disclaimer {
		column-count: 2;
		column-gap: 48px;
	}
}

.site-footer__col-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 14px;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.site-footer__col a {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	width: fit-content;
}
.site-footer__col a:hover {
	color: var(--color-luxury-gold);
	text-decoration: underline;
}

.site-footer__contact-line {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.5;
}
.site-footer__contact-line .icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--color-luxury-gold);
}
.site-footer__contact-line a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}
.site-footer__contact-line a:hover {
	color: var(--color-luxury-gold);
	text-decoration: underline;
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding: 16px 0;
}
.site-footer__copy {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
}

/* ==================== Legal / Policy pages (template-legal.php) ==================== */
.legal {
	padding: 48px 0 80px;
}

.legal__header {
	max-width: 780px;
	margin: 0 auto 40px;
	text-align: center;
}
.legal__header .eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted-text);
	margin: 0 0 10px;
}
.legal__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.2;
	color: var(--color-heading);
	margin: 0 0 10px;
}
.legal__updated {
	font-size: 13px;
	color: var(--color-muted-text);
	margin: 0;
}

.legal__content--centered {
	max-width: 780px;
	margin: 0 auto;
}

/* Two-column layout (TOC sidebar + content) only when the page actually
   has H2/H3 headings to build a table of contents from. */
@media (min-width: 1024px) {
	.legal__layout {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 48px;
		align-items: start;
	}
}

.legal__toc {
	margin-bottom: 32px;
}
@media (min-width: 1024px) {
	.legal__toc {
		position: sticky;
		top: 100px;
		margin-bottom: 0;
	}
}
.legal__toc-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-heading);
	margin: 0 0 14px;
}
.legal__toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-left: 2px solid var(--color-borders);
}
.legal__toc-item a {
	display: block;
	padding: 2px 0 2px 14px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-size: 13px;
	color: var(--color-body-text);
	text-decoration: none;
}
.legal__toc-item a:hover {
	color: var(--color-primary);
	border-left-color: var(--color-luxury-gold);
}
.legal__toc-item--h3 a {
	padding-left: 26px;
	font-size: 12.5px;
	color: var(--color-muted-text);
}

/* Prose styling for the page's own content (wp-admin edited), used by
   both the two-column and centered layouts above. */
.page-content {
	color: var(--color-body-text);
	font-size: 15px;
	line-height: 1.7;
}
.page-content h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 24px;
	color: var(--color-heading);
	margin: 40px 0 16px;
	scroll-margin-top: 100px;
}
.page-content h2:first-child {
	margin-top: 0;
}
.page-content h3 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 19px;
	color: var(--color-heading);
	margin: 32px 0 12px;
	scroll-margin-top: 100px;
}
.page-content h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 16px;
	color: var(--color-heading);
	margin: 24px 0 10px;
}
.page-content p {
	margin: 0 0 16px;
}
.page-content a {
	color: var(--color-primary);
	text-decoration: underline;
}
.page-content strong {
	font-weight: 700;
	color: var(--color-heading);
}
.page-content ul,
.page-content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}
.page-content li {
	margin-bottom: 6px;
}
.page-content blockquote {
	margin: 20px 0;
	padding: 12px 20px;
	border-left: 3px solid var(--color-luxury-gold);
	background: rgba(58, 28, 29, 0.04);
	color: var(--color-body-text);
	font-style: italic;
}
.page-content hr {
	border: none;
	border-top: 1px solid var(--color-borders);
	margin: 32px 0;
}
.page-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 14px;
}
.page-content th,
.page-content td {
	padding: 10px 12px;
	border: 1px solid var(--color-borders);
	text-align: left;
}
.page-content th {
	background: var(--color-soft-gold);
	font-weight: 700;
	color: var(--color-heading);
}
.page-content code {
	background: rgba(58, 28, 29, 0.06);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}

/* ==================== Contact page (template-contact.php) ====================
   Same header pattern as .legal (eyebrow + title) for visual consistency
   across selectable page templates. Details column reuses the footer's
   own Customizer fields (address/phone/email) rather than adding a
   second place to set them — see functions.php's "Footer" section. */
.contact {
	padding: 48px 0 80px;
}
.contact__header {
	max-width: 780px;
	margin: 0 auto 40px;
	text-align: center;
}
.contact__header .eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted-text);
	margin: 0 0 10px;
}
.contact__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.2;
	color: var(--color-heading);
	margin: 0;
}

.contact__layout {
	max-width: 1040px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
@media (min-width: 900px) {
	.contact__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 40px;
	}
	.contact__details {
		flex: 0 0 320px;
	}
	.contact__form-card {
		flex: 1;
	}
}

.contact__intro,
.contact__intro-fallback {
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-body-text);
	margin: 0 0 28px;
}

.contact__card {
	background: #fff;
	border: 1px solid var(--color-borders);
	border-radius: 16px;
	padding: clamp(24px, 3vw, 36px);
}
.contact__card-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-heading);
	margin: 0 0 18px;
}

.contact__detail {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.contact__detail + .contact__detail {
	margin-top: 16px;
}
.contact__detail-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: rgba(58, 28, 29, 0.14);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact__detail-text {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--color-body-text);
	text-decoration: none;
	padding-top: 6px;
}
a.contact__detail-text:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.contact__form-missing {
	font-size: 14px;
	color: var(--color-muted-text);
	margin: 0;
}

/* ---- Fluent Forms, restyled to match theme tokens ----
   Targets Fluent Forms' own stable class names (ff-el-*, ff-btn-submit,
   ff_asterik) alongside plain input/textarea/select tags as a fallback,
   since exact markup can shift slightly between Fluent Forms versions.
   Scoped under .contact__form-card so none of this leaks into any other
   shortcode used elsewhere on the site. */
.contact__form-card .ff-el-group,
.contact__form-card .ff_form_group {
	margin-bottom: 18px;
}
.contact__form-card label,
.contact__form-card .ff-el-input--label label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-heading);
	margin-bottom: 6px;
}
.contact__form-card .ff_asterik,
.contact__form-card .ff-required {
	color: var(--color-luxury-gold);
}
.contact__form-card input[type="text"],
.contact__form-card input[type="email"],
.contact__form-card input[type="tel"],
.contact__form-card input[type="number"],
.contact__form-card input[type="url"],
.contact__form-card textarea,
.contact__form-card select,
.contact__form-card .ff-el-form-control {
	width: 100%;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--color-body-text);
	background: var(--color-background);
	border: 1px solid var(--color-borders);
	border-radius: 8px;
	padding: 11px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact__form-card textarea {
	min-height: 120px;
	resize: vertical;
}
.contact__form-card input:focus,
.contact__form-card textarea:focus,
.contact__form-card select:focus,
.contact__form-card .ff-el-form-control:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(58, 28, 29, 0.12);
}
.contact__form-card .ff-el-is-error .ff-el-form-control,
.contact__form-card .error {
	border-color: #B3261E;
}
.contact__form-card .ff-btn-submit,
.contact__form-card .ff-btn,
.contact__form-card .ff_submit_btn_wrapper button,
.contact__form-card button[type="submit"],
.contact__form-card input[type="submit"] {
	/* Fluent Forms ships its own default button color and sometimes injects
	   it as a <style> block right at the shortcode's render point, which
	   lands later in the document than this stylesheet — at equal
	   specificity, "later" wins, which is why the theme color was being
	   overridden. !important here is deliberate: this rule exists
	   specifically to beat a third-party plugin's own late-loading
	   default, not to fight anything else in this theme. */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--color-primary) !important;
	border-radius: 8px !important;
	background: var(--color-primary) !important;
	background-color: var(--color-primary) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 13px 26px !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.contact__form-card .ff-btn-submit:hover,
.contact__form-card .ff-btn:hover,
.contact__form-card .ff_submit_btn_wrapper button:hover,
.contact__form-card button[type="submit"]:hover,
.contact__form-card input[type="submit"]:hover {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--color-primary) !important;
}
.contact__form-card .ff-message-success {
	font-size: 14px;
	color: var(--color-primary);
	background: var(--color-soft-gold);
	border: 1px solid var(--color-borders);
	border-radius: 8px;
	padding: 14px 18px;
}

/* ==================== Account page (template-account.php) ====================
   Same eyebrow + title header pattern as .contact/.legal. A single
   centered card (not the two-column layout Contact uses) since a
   login/sign-up form is inherently one focused task, not a page with
   supporting detail alongside it — the narrow centered-card pattern is
   the standard, expected shape for this kind of page. Login/Sign Up
   share one card via a CSS-only tab toggle (two radios + labels; no JS),
   consistent with the rest of this theme having no build step or JS. */
.account {
	padding: 48px 0 80px;
}
.account__header {
	max-width: 780px;
	margin: 0 auto 32px;
	text-align: center;
}
.account__header .eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted-text);
	margin: 0 0 10px;
}
.account__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.2;
	color: var(--color-heading);
	margin: 0;
}
.account__wrap {
	max-width: 440px;
	margin: 0 auto;
}
.account-card {
	background: #fff;
	border: 1px solid var(--color-borders);
	border-radius: 16px;
	padding: clamp(28px, 4vw, 40px);
}

/* ---- Tabs (CSS-only: two visually-hidden radios drive both the active
   label style and which panel shows, via the general sibling combinator —
   works because the radios, the nav, and both panels are all direct
   children of .account-tabs) ---- */
.account-tabs__radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.account-tabs__nav {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--color-borders);
	margin-bottom: 24px;
}
.account-tabs__label {
	flex: 1;
	text-align: center;
	padding: 10px 8px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-muted-text);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.account-tabs__label:hover {
	color: var(--color-heading);
}
.account-tabs__panel {
	display: none;
}
#tab-login:checked ~ .account-tabs__panel--login,
#tab-register:checked ~ .account-tabs__panel--register {
	display: block;
}
#tab-login:checked ~ .account-tabs__nav label[for="tab-login"],
#tab-register:checked ~ .account-tabs__nav label[for="tab-register"] {
	color: var(--color-primary);
	border-color: var(--color-primary);
}
#tab-login:focus-visible ~ .account-tabs__nav,
#tab-register:focus-visible ~ .account-tabs__nav {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---- Form fields — our own markup (not a third-party plugin's), so
   plain semantic selectors are enough; no specificity fight needed. ---- */
.account-card .form-row {
	margin-bottom: 18px;
}
.account-card label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-heading);
	margin-bottom: 6px;
}
.account-card input[type="text"],
.account-card input[type="email"],
.account-card input[type="password"] {
	width: 100%;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--color-body-text);
	background: var(--color-background);
	border: 1px solid var(--color-borders);
	border-radius: 8px;
	padding: 11px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-card input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(58, 28, 29, 0.12);
}
.account-card .form-row--split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.account-card .form-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: var(--color-body-text);
	cursor: pointer;
	margin: 0;
}
.account-card .form-check input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--color-primary);
}
.account-card .form-check a {
	color: var(--color-primary);
	text-decoration: underline;
}
.account-card .form-forgot {
	font-size: 13px;
	color: var(--color-muted-text);
	text-decoration: none;
}
.account-card .form-forgot:hover {
	color: var(--color-primary);
	text-decoration: underline;
}
.account-card .btn--block {
	width: 100%;
	margin-top: 4px;
}
.account-card .form-switch {
	margin: 18px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--color-muted-text);
}
.account-card .form-switch label {
	display: inline;
	color: var(--color-primary);
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	margin: 0;
}
.account-card .form-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

.form-errors {
	background: #FBEAEA;
	border: 1px solid #E4B8B4;
	color: #8A2E27;
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.5;
}
.form-errors ul {
	margin: 0;
	padding-left: 18px;
}
.form-errors li + li {
	margin-top: 4px;
}

/* ---- Signed-in "My Account" view ---- */
.account-loggedin {
	text-align: center;
}
.account-loggedin__avatar {
	display: block;
	margin: 0 auto 16px;
	border-radius: 999px;
	border: 3px solid var(--color-soft-gold);
}
.account-loggedin__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	color: var(--color-heading);
	margin: 0 0 4px;
}
.account-loggedin__email {
	font-size: 13px;
	color: var(--color-muted-text);
	margin: 0 0 24px;
}
.account-loggedin__meta {
	border-top: 1px solid var(--color-borders);
	border-bottom: 1px solid var(--color-borders);
	padding: 16px 0;
	margin-bottom: 24px;
	text-align: left;
}
.account-loggedin__meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	padding: 6px 0;
}
.account-loggedin__meta-row span:first-child {
	color: var(--color-muted-text);
}
.account-loggedin__meta-row span:last-child {
	color: var(--color-body-text);
	font-weight: 600;
}