/*
 * FreePresets Account UI — shared chrome for account + auth surfaces.
 *
 * IA picks (2026-05-27):
 *   - Account navigation: horizontal tab row under page H1
 *   - Page header: title only (the WP post-title block; we add nothing above it)
 *   - Section grouping: one card per section (consumed by blocks/shortcodes)
 *   - Primary action placement: bottom of section
 *   - Auth shell: centered narrow card
 *
 * All colour, font, spacing, and radius values come from theme.json presets so
 * this sheet tracks the design system automatically.
 */

/* ===== Account: horizontal tab row ===== */

.fp-acct-tabs {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	flex-wrap: wrap;
	margin: var(--wp--preset--spacing--30, 0.75rem) 0 var(--wp--preset--spacing--60, 2rem);
	border-bottom: 1px solid #e5e7eb;
}

.fp-acct-tabs__link {
	display: inline-block;
	padding: 0.65em 0.95em;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 500;
	color: var(--wp--preset--color--custom-contrast-2, #727272);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.12s ease, border-color 0.12s ease;
}

.fp-acct-tabs__link:hover {
	color: var(--wp--preset--color--custom-contrast, #334155);
	text-decoration: none;
}

.fp-acct-tabs__link.is-active {
	color: var(--wp--preset--color--custom-contrast, #334155);
	border-bottom-color: var(--wp--preset--color--custom-accent, #2563eb);
}

/* ===== Account: section card (one card per section) ===== */

.fp-acct-card {
	background: var(--wp--preset--color--custom-base-2, #ffffff);
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: var(--wp--preset--spacing--50, 1.5rem);
}

.fp-acct-card + .fp-acct-card {
	margin-top: var(--wp--preset--spacing--40, 1rem);
}

/* Narrow variant — used for single-form pages like /edit-profile/. Wide
 * enough that the form labels stop feeling cramped + leaves room for a
 * future 2-column field grid (first/last name side by side). */
.fp-acct-card--narrow {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* When .fp-form (login/register/forgot/edit-profile shared form chrome) lives
 * inside a card, the card owns the box — strip the form's own outer padding +
 * max-width so it fills the card naturally. */
.fp-acct-card .fp-form {
	max-width: none;
	margin: 0;
	padding: 0;
}

.fp-acct-card__head {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	flex-wrap: wrap;
	margin-bottom: var(--wp--preset--spacing--40, 1rem);
}

.fp-acct-card__head > :first-child {
	flex: 1 1 auto;
	margin: 0;
}

.fp-acct-card > :last-child {
	margin-bottom: 0;
}

/* ===== Account: primary-action row (bottom of section) ===== */

.fp-acct-card__cta,
.fp-acct-cta-row {
	display: flex;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	margin-top: var(--wp--preset--spacing--40, 1rem);
}

/* ===== Account: logged-out state (bare login form) =====
 * When logged out, [fp_account_summary] renders just the EDD login form. Its
 * parent group block carries generous spacing--80 vertical padding that frames
 * the signed-in dashboard nicely but leaves the small login form swimming in
 * whitespace. Tighten the surrounding padding for the logged-out case only.
 * The group sets that padding inline, so !important is required to win. */
.wp-block-group:has(> .fp-account-summary--logged-out) {
	padding-top: var(--wp--preset--spacing--50, 1.5rem) !important;
	padding-bottom: var(--wp--preset--spacing--50, 1.5rem) !important;
	/* The group adds its own spacing--50 left/right padding on top of the page
	 * gutter, which inset the form ~24px right of the "Account" heading. Drop it
	 * so the form's left edge lines up with the title (the ancestor layout still
	 * supplies the page gutter). */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* The EDD login block ships its own 16px padding, which inset the form fields
 * to the right of the heading/intro. Strip it so labels, inputs, and the button
 * line up flush-left with everything else. (The /login/ auth shell has the same
 * rule; /account/ uses this wrapper instead.) */
.fp-account-summary--logged-out .wp-block-edd-login {
	padding: 0;
}

/* The group uses WP's constrained layout, which centers its children. Left-align
 * the login column and cap it to a tidy form width instead of centering it. */
.wp-block-group:has(> .fp-account-summary--logged-out) > .fp-account-summary--logged-out {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 420px;
}

/* "New here? Create a free account" prompt, paired with EDD's "Lost Password?"
 * link in one space-between row under the login form (on /login/ and the
 * logged-out /account/ page). The prompt is injected next to EDD's own
 * lost-password link, inside the form column. */
.fp-auth-footer-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30, 0.75rem);
}

/* EDD's lost-password paragraph carries its own margin — zero it so it sits on
 * the row baseline with the prompt. */
.fp-auth-footer-row .edd-blocks-form__group-lost-password {
	margin: 0;
}

.fp-auth-altlink {
	font-size: var(--wp--preset--font-size--sm, 0.8rem);
	color: var(--wp--preset--color--custom-contrast-2, #727272);
}

/* Match the link to the theme's accent (the same blue EDD's links use). */
.fp-auth-altlink a {
	color: var(--wp--preset--color--custom-accent, #2563eb);
}

/* Fallback when no lost-password link is present: prompt sits alone, left. */
.fp-auth-altlink--solo {
	margin-top: var(--wp--preset--spacing--40, 1rem);
}

/* ===== Auth: bare left-aligned form column ===== */

/* Login/signup forms sit directly on the page — no card. Use the theme's
 * content-size token so the form column matches the page H1 and body content
 * (a plain wrapper div doesn't inherit the constrained-layout width on its own,
 * so we set it explicitly). Left-align it under the H1. */
.fp-auth-shell {
	max-width: var(--wp--style--global--content-size);
	margin-left: 0;
	margin-right: auto;
}

/* Soak up the .fp-form container's own padding/margin so the shell controls
 * the box, not the form. */
.fp-auth-shell .fp-form {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* EDD login/register/checkout blocks live on the same auth pages — soak up
 * their wrapper padding so the shell controls the box. */
.fp-auth-shell .wp-block-edd-login,
.fp-auth-shell .wp-block-edd-register {
	padding: 0;
}

/* The EDD register form nests an inner bordered/padded <form> box plus a
 * background+border+radius "control" wrapper around every field. Strip both so
 * each field reads as a single clean input. (Our two-class selectors outrank
 * EDD's single-class rules, so no !important.)
 *
 * Also cap the form column to 420px. The page container is content-width so the
 * heading/intro/notice aren't cramped, but full-width inputs read as too wide —
 * 420px keeps the fields a comfortable size. Shared .edd-blocks-form covers both
 * the login and register forms. */
.fp-auth-shell .edd-blocks-form {
	border: 0;
	padding: 0;
	max-width: 420px;
}

.fp-auth-shell .edd-blocks-form__control {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* ===== Shared input chrome across every account & auth surface =====
 * theme.json doesn't expose `input` in `elements`, so WP can't style inputs
 * site-wide. This sheet only loads on account + auth pages, so a broad
 * selector across the known form contexts is safe and gives every text-like
 * field the same look — regardless of whether it came from a fp_* shortcode,
 * the license-cert block, or an EDD block (login, register, profile editor,
 * checkout). Important is needed to beat EDD's plugin-shipped per-block CSS. */
:is(.fp-form, .fp-ae-form, .fp-lc__modal-form, .wp-block-edd-login, .wp-block-edd-register, .wp-block-edd-profile-editor, .wp-block-edd-checkout) :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], select, textarea) {
	width: 100%;
	padding: 0.65em 0.85em !important;
	font: inherit;
	color: var(--wp--preset--color--custom-contrast, #334155) !important;
	background: var(--wp--preset--color--custom-base, #f9fafb) !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px !important;
	box-sizing: border-box;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

:is(.fp-form, .fp-ae-form, .fp-lc__modal-form, .wp-block-edd-login, .wp-block-edd-register, .wp-block-edd-profile-editor, .wp-block-edd-checkout) :is(input, select, textarea):focus {
	outline: 0;
	border-color: var(--wp--preset--color--custom-accent, #2563eb) !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* EDD ships its field labels at the sm preset (0.8rem ≈ 12.8px), which reads
 * cramped next to the larger inputs. Bump to the md preset so labels carry
 * proper weight and balance the fields across every EDD form on these pages. */
.edd-label {
	font-size: var(--wp--preset--font-size--md);
}

/* Shared submit-button paint — matches theme.json's elements.button (pill,
 * accent bg, base text) for buttons inside fp-form + cert modals where the
 * markup uses .wp-block-button__link directly (no .wp-block-button wrapper).
 * EDD blocks already render their own .wp-element-button so they're fine. */
:is(.fp-form, .fp-lc__modal-form) :is(.wp-block-button__link, button[type="submit"]) {
	background: var(--wp--preset--color--custom-accent, #2563eb);
	color: var(--wp--preset--color--custom-base, #f9fafb);
	border: 0;
	border-radius: 9999px;
	padding: 0.7em 1.4em;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

:is(.fp-form, .fp-lc__modal-form) :is(.wp-block-button__link, button[type="submit"]):hover {
	background: var(--wp--preset--color--custom-base-inverted, #171717);
}

/* ===== EDD block buttons — repaint to match theme.json tokens =====
 * EDD ships its own button paint (radius:4px, near-but-not-quite-our-accent).
 * Pin to our pill + accent + base so Save Changes / Sign In / Register / Pay
 * all match the rest of the site. */
:is(.wp-block-edd-profile-editor, .wp-block-edd-login, .wp-block-edd-register, .wp-block-edd-checkout) :is(input.edd-submit, button.edd-submit, .edd-blocks-button) {
	background: var(--wp--preset--color--custom-accent, #2563eb) !important;
	color: var(--wp--preset--color--custom-base, #f9fafb) !important;
	border: 0 !important;
	border-radius: 9999px !important;
	padding: 0.7em 1.4em !important;
	font: inherit !important;
	font-weight: 500 !important;
	cursor: pointer;
	box-shadow: none !important;
}

:is(.wp-block-edd-profile-editor, .wp-block-edd-login, .wp-block-edd-register, .wp-block-edd-checkout) :is(input.edd-submit, button.edd-submit, .edd-blocks-button):hover {
	background: var(--wp--preset--color--custom-base-inverted, #171717) !important;
}

/* Secondary EDD buttons — Generate Password, Show/Hide, etc.
 * Outlined accent instead of grey fill, pill to match primary. */
:is(.wp-block-edd-profile-editor, .wp-block-edd-register, .wp-block-edd-login) :is(button.wp-generate-pw, button.edd-button-secondary) {
	background: transparent !important;
	color: var(--wp--preset--color--custom-accent, #2563eb) !important;
	border: 1px solid var(--wp--preset--color--custom-accent, #2563eb) !important;
	border-radius: 9999px !important;
	padding: 0.55em 1.2em !important;
	font: inherit !important;
	font-weight: 500 !important;
	cursor: pointer;
}

:is(.wp-block-edd-profile-editor, .wp-block-edd-register, .wp-block-edd-login) :is(button.wp-generate-pw, button.edd-button-secondary):hover {
	background: var(--wp--preset--color--custom-accent, #2563eb) !important;
	color: var(--wp--preset--color--custom-base, #f9fafb) !important;
}