/* AskHole — "Post a request" form (Step 5) */

.askhole-form {
	max-width: var(--ah-form-w, 820px);
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	font-family: 'Inter', system-ui, sans-serif;
	color: #0D1117;
}

/* Progress bar header: "<current step title>   Step X of Y" + a fill bar. */
.ah-wiz-progress { margin: 0 0 26px; }
.ah-wiz-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
/* As a real <h2> the theme's h2 typography (30px, e.g. .entry-content h2 on the
   post-a-request page) outranks a bare .ah-wiz-progress-title, so scope it under
   .ah-wiz-progress-head to raise specificity and keep the step heading clearly
   subordinate to the page H1. */
.ah-wiz-progress-head .ah-wiz-progress-title { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 800 !important; font-size: 22px !important; letter-spacing: -.4px !important; color: #0D1117 !important; margin: 0 !important; padding: 0 !important; line-height: 1.15 !important; }

/* Tighten the gap between the Elementor intro (H1 + sub) and the form below it — the
   containers otherwise leave ~30px. Desktop/tablet only; mobile (and the post form's
   mobile takeover) keep their own spacing. */
@media (min-width: 768px) {
	/* Option B: a faint branded backdrop fills the page (this stylesheet only loads on
	   the post-a-request + Pro-register pages, so it won't leak elsewhere), with the
	   heading sitting on the backdrop and the form floating in a white card. */
	body {
		background-color: #fff !important;
		/* A translucent white wash sits over the backdrop image (first layer is on top)
		   to fade the doodles further back — lift the 0.4 alpha toward 1 to fade more. */
		background-image:
			linear-gradient( rgba( 255, 255, 255, .6 ), rgba( 255, 255, 255, .6 ) ),
			url('/wp-content/uploads/2026/08/post-request-background.png') !important;
		background-repeat: no-repeat, no-repeat !important;
		background-position: center center, center center !important;
		/* wash covers the viewport; the image is capped at the 1120px site content width
		   (centred) so the doodles stay within the page column instead of stretching to
		   the screen edges on wide monitors. */
		background-size: cover, min( 1120px, 100% ) auto !important;
		background-attachment: fixed, fixed !important; /* frames the viewport regardless of scroll */
	}
	.ah-wizard,
	.um.um-650 {
		background: #fff !important;
		border: 1px solid #efeef4 !important;
		border-radius: 18px !important;
		box-shadow: 0 20px 60px rgba( 60, 40, 120, .12 ) !important;
		padding: 32px 40px 36px !important;
		margin-top: 22px !important;   /* clear gap from the heading down to the card */
	}
}
.ah-wiz-progress-count { font-size: 14px; font-weight: 600; color: #9098a4; white-space: nowrap; flex: 0 0 auto; }
.ah-wiz-bar { height: 7px; border-radius: 999px; background: #eceef3; overflow: hidden; }
.ah-wiz-bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: #783FF2; transition: width .35s ease; }

/* The per-step heading now lives in the progress header above, so hide the in-step one
   (its text is still read from the DOM to populate the header). */
.ah-step-title { display: none; }

.ah-f { display: block; margin: 0 0 18px; }
.ah-f > span { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.ah-f > span em { color: #783FF2; font-style: normal; }
.ah-f > span small { font-weight: 500; color: #9098a4; }

.ah-f input[type="text"],
.ah-f input[type="number"],
.ah-f input[type="date"],
.ah-f select,
.ah-f textarea {
	width: 100%;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 16px;
	color: #0D1117;
	background: #fff;
	border: 1.5px solid #dcdce4;
	border-radius: 12px;
	padding: 12px 14px;
}
.ah-f textarea { resize: vertical; min-height: 120px; }
.ah-f input:focus, .ah-f select:focus, .ah-f textarea:focus {
	outline: none; border-color: #783FF2; box-shadow: 0 0 0 3px rgba(120,63,242,.12);
}
.ah-f input[type="file"] {
	width: 100%; font-family: 'Inter', sans-serif; font-size: 14px;
	padding: 12px 14px; border: 1.5px dashed #dcdce4; border-radius: 12px; background: #fafafd;
}
/* Uniform 50px control height across the wizard — inputs, select, date + reward and
   the Next/Back/Post buttons all match (same height as the gate forms + login page).
   Textarea keeps its multi-line height. */
.ah-f input[type="text"],
.ah-f input[type="number"],
.ah-f input[type="date"],
.ah-f select {
	height: 50px !important;      /* !important beats Astra's text-input/select height */
	min-height: 50px !important;
	padding: 0 14px !important;
	line-height: normal !important;
	box-sizing: border-box !important;
}
.ah-wizard .ah-btn,
.ah-wizard .ah-btn-ghost {
	height: 50px;
	padding: 0 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.ah-invalid { border-color: #EF4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important; }

.ah-f-muted { opacity: .5; }
.ah-check { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 15px; }
/* Both poster-option toggles (anonymity + audience) share one boxed treatment so they read as a matched pair. */
.ah-anon-toggle, .ah-open-toggle { align-items: flex-start; margin: 18px 0; padding: 14px; border: 1.5px solid #e2e4ea; border-radius: 12px; background: #fafafd; }
.ah-anon-toggle small, .ah-open-toggle small { display: block; font-weight: 500; font-size: 13px; color: #6a6f7b; margin-top: 3px; }
.ah-check input { width: 18px; height: 18px; }

.ah-reward-field { width: 100%; }
.ah-reward-input { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ah-reward-input > span {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 20px; color: #1B9C5B; padding: 0 8px 0 2px;
	flex: 0 0 auto;
}
.ah-reward-input input { max-width: 200px; font-weight: 700; }

/* Budget-basis unit control — hidden unless the selected lane unlocks extra units.
   When shown, the amount flexes and the unit sits beside it (wraps under on narrow phones). */
.ah-reward-unit { display: none; }
.ah-reward-field.ah-has-units .ah-reward-unit { display: inline-flex; }
.ah-reward-unit {
	width: auto !important;
	min-width: 132px;
	flex: 0 0 auto;
	font-weight: 600;
}
.ah-reward-field.ah-has-units .ah-reward-input input {
	flex: 1 1 120px;
	max-width: none;
}
.ah-budget-hint-optional { color: #6a6f7b !important; }
/* "I’d rather not say" disables the amount field. */
.ah-reward-input input:disabled { background: #f1f2f5; color: #b3b8c2; cursor: not-allowed; -webkit-text-fill-color: #b3b8c2; }
.ah-f small { display: block; color: #9098a4; font-size: 13px; margin-top: 6px; }

/* buttons + nav */
.ah-step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.ah-btn {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 16px;
	color: #fff; background: #783FF2; border: none; border-radius: 12px;
	padding: 12px 26px; cursor: pointer;
}
.ah-btn:hover { background: #6a2fe0; }
.ah-btn-ghost {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 16px;
	color: #0D1117; background: #fff; border: 1.5px solid #dcdce4; border-radius: 12px;
	padding: 12px 26px; cursor: pointer;
}
.ah-btn-ghost:hover { border-color: #b9b9c6; }

/* errors + gate */
.ah-form-errors {
	background: #fdf0f0; border: 1px solid #f4d3d3; border-radius: 12px;
	padding: 12px 16px 12px 8px; margin: 0 0 22px; color: #b42318;
}
.ah-form-errors ul { margin: 0; padding-left: 26px; }
.ah-form-errors li { margin: 4px 0; font-size: 14.5px; }
.ah-form-gate { text-align: center; padding: 30px 0; }
.ah-form-gate p { font-size: 16px; color: #3d424e; margin: 0 0 16px; }

/* JS hides the non-active steps; no-JS shows all */
.ah-step.is-hidden { display: none; }

/* success banner on the request page after posting */
.ah-success {
	background: #eafaf1; border: 1px solid #cdeedd; color: #157347;
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700;
	border-radius: 12px; padding: 12px 16px; margin: 0 0 18px;
}

/* ---- Edit mode: current photos with a remove tick ---- */
.ah-edit-photos { display: flex; flex-wrap: wrap; gap: 12px; }
.ah-edit-photo {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	width: 96px; margin: 0;
}
.ah-edit-photo img {
	width: 96px; height: 96px; object-fit: cover; border-radius: 10px;
	border: 1px solid #e4e4ec; display: block;
}
.ah-edit-photo-rm { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #6a6f7b; }
.ah-edit-photo-rm input { width: 15px; height: 15px; }

/* ====================================================================
   Post-request wrapper + guest sign-up gate
   ==================================================================== */

/* Wrapper keeps the steps, form and gate aligned to the same column. */
.ah-wizard { max-width: var(--ah-form-w, 820px); width: 100%; margin: 0 auto; box-sizing: border-box; }
.ah-wizard .askhole-form { max-width: none; width: auto; margin: 0; }

/* Top bar (logo + close ✕) — only shown in the mobile takeover, hidden otherwise. */
.ah-postwrap-bar { display: none; }
.ah-postwrap-close {
	background: none; border: none; cursor: pointer;
	font-size: 28px; line-height: 1; color: #0D1117; padding: 4px 8px;
}
.ah-postwrap-close:hover { color: #783FF2; }

/* Step 4 — the sign-up gate. */
.ah-gate-sub { font-size: 16px; line-height: 1.5; color: #5c6270; margin: 0 0 20px; }
.ah-gate-social { margin-top: 2px; }
.ah-gate-um { margin: 0 0 8px; }
.ah-gate-um .um { margin: 0 auto !important; }

/* Match the Ultimate Member login/register fields to the wizard steps' rhythm:
   18px between fields, 6px label→input (measured against .ah-f on steps 1–3). UM's own
   markup renders fields near-flush with a loose label gap, so we normalise it here.
   Scoped to .ah-gate-um so the standalone /login/ page keeps its own spacing. */
.ah-gate-um .um-row { margin: 0 !important; }
.ah-gate-um .um-field { margin: 0 0 14px !important; } /* +~4.5px UM baseline ≈ 18px field gap */
.ah-gate-um .um-field-label { margin: 0 0 3px !important; padding: 0 !important; } /* +UM line-box ≈ 6px */
.ah-gate-um .um-field-label label { margin: 0 !important; }
.ah-gate-um .um-field-area { margin: 0 !important; }

.ah-gate-panel.is-hidden { display: none; }
.ah-gate-switch { font-size: 14.5px; color: #3d424e; margin: 14px 0 0; text-align: center; }
.ah-gate-switch a { color: #783FF2; font-weight: 700; text-decoration: none; cursor: pointer; }
.ah-gate-switch a:hover { text-decoration: underline; }

/* Email-first detect entry — matches the gate's UM fields exactly. !important throughout because it's
   a plain <input>, and Astra styles input[type="email"] at higher specificity than a single class —
   without this it renders shorter / less-rounded than the UM login/register fields beside it, and
   Astra's default input margin throws off the vertical rhythm. margin:0 so our own gaps (the "or"
   above, .ah-gate-continue's top margin below) are the only spacing. */
.ah-gate-email-label { display: block; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 14px; color: #0D1117; margin: 0 0 6px; }
.ah-req { color: #783FF2; }
.ah-gate-email-input {
	width: 100% !important; height: 50px !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 14px !important;
	border: 1px solid #e2dff0 !important; border-radius: 12px !important; background: #fff !important;
	font-size: 15px !important; line-height: normal !important; font-family: 'Inter', system-ui, sans-serif !important; color: #0D1117 !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ah-gate-email-input:focus { border-color: #783FF2 !important; box-shadow: 0 0 0 3px rgba(120, 63, 242, .14) !important; outline: none !important; }
.ah-gate-email-input::placeholder { color: #9aa0ac !important; opacity: 1; }
/* Invalid email = just the red outline (the JS adds .ah-invalid) — no worded message under the field. */
.ah-gate-continue { margin-top: 16px; }
.ah-gate-continue.is-loading { opacity: .7; cursor: default; }
/* Even vertical rhythm on the choose screen. Social sits ABOVE the "or" here (unlike the login page,
   where it's below), so the last social button's bottom margin would stack with the divider's — drop
   it, and match the divider gap to the field rhythm so the spacing reads like the other form pages. */
.ah-gate-email-panel .ah-login-social:last-of-type { margin-bottom: 0; }
.ah-gate-email-panel .ah-login-or { margin: 20px 0; }

/* Real UM Social Login buttons (shortcode id 812) restyled to match our .ah-login-social placeholders.
   UM scopes its own button rules with the shortcode's ID (#um-shortcode-social-812) + !important, which
   outranks any class selector — so we match that ID to win, and swap UM's monochrome Bootstrap-icon
   glyph for the brand-colour SVGs. NOTE: the "812" is the UM Social Login shortcode id (set in
   post-form.php's askhole_gate_social_shortcode filter). If that shortcode id ever changes, update the
   id in these selectors to match. */
.ah-gate-social #um-shortcode-social-812 { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; float: none !important; }
.ah-gate-social #um-shortcode-social-812 div,
.ah-gate-social #um-shortcode-social-812 .um-field,
.ah-gate-social #um-shortcode-social-812 .um-col-alt { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; box-sizing: border-box !important; }
.ah-gate-social #um-shortcode-social-812 .um-clear { display: none !important; }
.ah-gate-social #um-shortcode-social-812 a.um-button.um-button-social {
	display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
	width: 100% !important; height: 50px !important; box-sizing: border-box !important;
	padding: 0 16px !important; margin: 0 0 14px !important;
	border: 1px solid #e6e2f1 !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important;
	font-size: 15px !important; font-weight: 600 !important; color: #2b2540 !important;
	text-decoration: none !important; line-height: 1 !important; text-transform: none !important;
	transition: background .15s ease, border-color .15s ease;
}
.ah-gate-social #um-shortcode-social-812 .um-field:last-of-type a.um-button.um-button-social { margin-bottom: 0 !important; }
.ah-gate-social #um-shortcode-social-812 a.um-button.um-button-social:hover { background: #f7f5ff !important; border-color: #d3cbef !important; color: #2b2540 !important; }
.ah-gate-social #um-shortcode-social-812 a.um-button-social i.um-sso { display: none !important; }
.ah-gate-social #um-shortcode-social-812 a.um-button-social::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.ah-gate-social #um-shortcode-social-812 a.um-button-google::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%234285F4%27%20d%3D%27M23.5%2012.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.5c-.3%201.5-1.1%202.7-2.4%203.6v3h3.9c2.3-2.1%203.5-5.2%203.5-8.8z%27%2F%3E%3Cpath%20fill%3D%27%2334A853%27%20d%3D%27M12%2024c3.2%200%205.9-1.1%207.9-2.9l-3.9-3c-1.1.7-2.5%201.2-4%201.2-3.1%200-5.7-2.1-6.6-4.9H1.3v3.1C3.3%2021.3%207.3%2024%2012%2024z%27%2F%3E%3Cpath%20fill%3D%27%23FBBC05%27%20d%3D%27M5.4%2014.3c-.2-.7-.4-1.5-.4-2.3s.1-1.6.4-2.3V6.6H1.3C.5%208.2%200%2010%200%2012s.5%203.8%201.3%205.4l4.1-3.1z%27%2F%3E%3Cpath%20fill%3D%27%23EA4335%27%20d%3D%27M12%204.8c1.8%200%203.3.6%204.6%201.8l3.4-3.4C17.9%201.2%2015.2%200%2012%200%207.3%200%203.3%202.7%201.3%206.6l4.1%203.1C6.3%206.9%208.9%204.8%2012%204.8z%27%2F%3E%3C%2Fsvg%3E"); }
.ah-gate-social #um-shortcode-social-812 a.um-button-facebook::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%231877F2%27%20d%3D%27M24%2012a12%2012%200%201%200-13.9%2011.9v-8.4H7v-3.5h3.1V9.4c0-3%201.8-4.7%204.5-4.7%201.3%200%202.7.2%202.7.2v3h-1.5c-1.5%200-2%20.9-2%201.9v2.2h3.4l-.5%203.5h-2.9v8.4A12%2012%200%200%200%2024%2012z%27%2F%3E%3C%2Fsvg%3E"); }
/* Match the Step-4 CTAs: the purple "Continue with email" button takes the social buttons' text style
   (15px/600) instead of the default .ah-cta 17px/700, so all three read as one set. */
.ah-gate-continue { font-size: 15px; font-weight: 600; }
/* New sign-up routes into the register form, but we already captured the email at the gate — hide it. */
.ah-gate-register-panel .um-field-user_email,
.ah-gate-register-panel .um-field[data-key="user_email"] { display: none !important; }
/* Match the wizard's field hints (.ah-f small): left-aligned grey 13px, with room above the CTA. */
/* Scoped + !important on purpose: the gate sits inside .ah-pro-intro, whose
   `p { font-size:16px !important; margin:0 !important }` rule (specificity 0,1,1, important) otherwise
   beats a plain `.ah-gate-terms` class — which is why every earlier size/margin tweak here never took
   (the line rendered at 16px with a 0 top margin, glued to the CTA). Scoping under .ah-gate-email-panel
   + !important wins it, matching the wizard's small field hints (.ah-f small: 13px, #9098a4). */
.ah-gate-email-panel .ah-gate-terms { display: block !important; text-align: left !important; color: #9098a4 !important; font-size: 13px !important; line-height: 1.5 !important; margin: 26px 0 0 !important; }
.ah-gate-email-panel .ah-gate-terms a { color: #6a6f7b !important; font-size: inherit !important; line-height: inherit !important; text-decoration: underline !important; }
.ah-gate-email-panel .ah-gate-terms a:hover { color: #783FF2 !important; }
.ah-gate-pending-lead { font-weight: 700; font-size: 16px; color: #0D1117; margin: 0 0 8px; }
.ah-gate-pending p { color: #5c6270; font-size: 15px; line-height: 1.55; margin: 0 0 10px; }
.ah-gate-pending-email { color: #0D1117; font-weight: 700; }
.ah-gate-config {
	background: #fff8e6; border: 1px solid #f2e2b3; border-radius: 12px;
	padding: 12px 16px; font-size: 14px; color: #7a5b12;
}
.ah-gate-config code { background: #fff; padding: 1px 6px; border-radius: 6px; font-size: 13px; }

/* ---- Mobile full-screen takeover (app-style window) ---- */
@media (max-width: 767px) {
	body.ah-post-takeover { overflow: hidden; }
	/* Hide the theme chrome so the form owns the screen. */
	body.ah-post-takeover .site-header,
	body.ah-post-takeover #masthead,
	body.ah-post-takeover .ast-above-header-wrap,
	body.ah-post-takeover .ast-below-header-wrap,
	body.ah-post-takeover .site-footer,
	body.ah-post-takeover #colophon { display: none !important; }

	body.ah-post-takeover .ah-postwrap {
		position: fixed; inset: 0; z-index: 9999;
		background: #fff; display: flex; flex-direction: column;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
	}
	body.ah-post-takeover .ah-postwrap-bar {
		display: flex; align-items: center; justify-content: space-between;
		position: sticky; top: 0; z-index: 2;
		padding: 12px 20px; background: #fff; border-bottom: 1px solid #eef0f3;
	}
	body.ah-post-takeover .ah-postwrap-bar .askhole-logo { font-size: 35px !important; margin-left: 0 !important; } /* 35px matches the main-site header logo; margin-left:0 cancels the global ≤767 .askhole-logo{margin-left:20px} so the logo sits at the bar's own 20px padding (matching the wizard gutter), not 40px */
	body.ah-post-takeover .ah-wizard { max-width: none; margin: 0; padding: 22px 20px 40px; } /* margin:0 — auto side-margins would cancel flex stretch and shrink narrow steps (step 1) */

	/* Full-width, stacked Next/Back (Next on top) to match the full-width CTAs elsewhere. */
	body.ah-post-takeover .ah-step-nav { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
	body.ah-post-takeover .ah-step-nav .ah-btn,
	body.ah-post-takeover .ah-step-nav .ah-btn-ghost { width: 100%; }
	body.ah-post-takeover .ah-step-nav span:empty { display: none; } /* drop the placeholder spacer so it adds no stray gap */
}

/* ---- Delete listing (danger zone) inside the edit screen ---- */
.askhole-danger { max-width: 620px; margin: 26px auto 0; }
.ah-danger-details {
	border: 1.5px solid #f0d3d3; border-radius: 12px; background: #fdf7f7; padding: 6px 16px;
}
.ah-danger-details > summary {
	list-style: none; cursor: pointer;
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 14px;
	color: #b42318; padding: 10px 0;
}
.ah-danger-details > summary::-webkit-details-marker { display: none; }
.ah-danger-details > summary::before { content: '⚠ '; }
.ah-danger-copy { font-size: 14px; color: #6a4b4b; margin: 6px 0 12px; }
.ah-danger-check { font-size: 14.5px; }
.ah-btn-danger { background: #d92d20; margin-top: 6px; }
.ah-btn-danger:hover { background: #b42318; }

/* ====================================================================
   AI post-assist — discreet loading spinner on the title field
   (non-blocking; shown only while a suggestion is being fetched).
   ==================================================================== */
.ah-ai-wrap { position: relative; display: block; }
.ah-ai-spin {
	position: absolute; right: 14px; top: 50%; margin-top: -8px;
	width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid #e7e1fb; border-top-color: #783FF2;
	opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.ah-ai-wrap.is-busy .ah-ai-spin { opacity: .6; animation: ah-ai-rot .7s linear infinite; }
/* .ah-f input[type="text"] sets `padding: 0 14px !important` (line 97), so this needs
   the same weight or the text runs under the spinner. */
.ah-ai-wrap.is-busy input[type="text"] { padding-right: 40px !important; }
@keyframes ah-ai-rot { to { transform: rotate( 360deg ); } }

/* ====================================================================
   "Finishing your post…" veil — shown for the brief moment between a
   returning user logging in at the gate and the auto-submit redirect, so
   the wizard's input fields never flash. Toggled by an early inline script
   adding .ah-finishing to <html>.
   ==================================================================== */
.ah-finish-veil { display: none; }
html.ah-finishing .ah-wizard { display: none !important; }
html.ah-finishing .ah-finish-veil {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 16px; min-height: 60vh; text-align: center;
	font-family: 'Inter', system-ui, sans-serif; color: #5c6270;
}
.ah-finish-veil p { margin: 0; font-size: 15px; font-weight: 600; }
.ah-finish-spin {
	width: 40px; height: 40px; border-radius: 50%;
	border: 3px solid #ece7fb; border-top-color: #783FF2;
	animation: ah-finish-rot .8s linear infinite;
}
@keyframes ah-finish-rot { to { transform: rotate(360deg); } }
/* On the mobile takeover the veil fills the window. */
@media (max-width: 767px) {
	body.ah-post-takeover html.ah-finishing .ah-finish-veil,
	html.ah-finishing body.ah-post-takeover .ah-finish-veil { min-height: 100vh; }
}

/* ====================================================================
   Post-submit success screens (replaces the wizard)
   Three variants (live / review / verify). Status pills intentionally
   dropped — the top media slot (.ah-success-media) is the focal point
   and is built to swap the placeholder icon for an <img> illustration.
   ==================================================================== */
/* Belt-and-braces: once the Pro register success screen is showing, hide any UM register
   form still rendered on the page by a builder (e.g. an Elementor widget outside the_content)
   so the poster never sees both the form and the "check your email" screen. */
body.ah-pro-registered .um-register,
body.ah-pro-registered form.um-register,
body.ah-pro-registered .ah-gate-um-register { display: none !important; }
.ah-success-screen {
	max-width: 460px;
	margin: 24px auto 8px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: 'Inter', system-ui, sans-serif;
}
/* Top media slot — placeholder icon now; drop an <img> in here later. */
.ah-success-media { margin: 0 0 22px; }
.ah-success-media img { display: block; width: 120px; height: auto; margin: 0 auto; }
.ah-success-ico {
	width: 76px; height: 76px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}
.ah-success-ico svg { width: 38px; height: 38px; display: block; }
.ah-ico-green  { background: #e9f9ef; }
.ah-ico-purple { background: #f2edff; }
.ah-ico-amber  { background: #fef4e6; }

.ah-success-title {
	font-size: 24px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2;
	color: #0D1117; margin: 0 0 12px;
}
.ah-success-lead {
	font-size: 15px; line-height: 1.62; color: #5c6270; margin: 0 0 8px; max-width: 40ch;
}
.ah-success-req {
	font-family: 'Caveat', 'Kalam', cursive; font-size: 23px; font-weight: 700;
	color: #783FF2; margin: 6px 0 18px; line-height: 1.25;
}
.ah-success-email { font-family: 'Inter', system-ui, sans-serif; font-size: 18px; font-weight: 700; }

/* Expectations tracker (review + verify). */
.ah-success-steps {
	list-style: none; margin: 10px 0 26px; padding: 0; width: 100%; max-width: 340px; text-align: left;
}
.ah-success-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; position: relative; }
.ah-success-steps li:not(:last-child)::before {
	content: ""; position: absolute; left: 13px; top: 32px; bottom: -3px; width: 2px; background: #ececf4;
}
.ah-step-num {
	flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 800; background: #eef0f4; color: #9098a4;
}
.ah-success-steps li.is-on   .ah-step-num { background: #783FF2; color: #fff; }
.ah-success-steps li.is-done .ah-step-num { background: #16a34a; color: #fff; }
.ah-step-tx b { display: block; font-size: 14px; font-weight: 700; color: #0D1117; margin: 3px 0 1px; }
.ah-step-tx span { font-size: 12.5px; color: #5c6270; line-height: 1.45; }

/* Actions — reuse the global .ah-btn; keep them a comfortable width, centred. */
.ah-success-actions {
	display: flex; flex-direction: column; gap: 12px; align-items: center;
	width: 100%; max-width: 300px; margin: 4px auto 0;
}
.ah-success-actions .ah-btn { width: 100%; text-align: center; }

.ah-success-link { font-size: 13.5px; color: #6a6f7b; margin: 14px 0 0; }
.ah-success-link a { color: #783FF2; font-weight: 700; text-decoration: none; }
.ah-success-link a:hover { text-decoration: underline; }
.ah-success-note { font-size: 12.5px; color: #9098a4; margin: 16px 0 0; max-width: 36ch; line-height: 1.5; }

/* On the mobile takeover the success screen owns the full window like the wizard. */
@media (max-width: 767px) {
	body.ah-post-takeover .ah-success-screen { margin-top: 8px; }
}

/* ====================================================================
   "Join as Pro" multi-step wizard (Ultimate Member form, faked steps)
   Reuses the post-request wizard's .ah-wiz-* progress bar + .ah-btn nav.
   Only the UM-specific bits (error styling, control sizing, centring)
   live here. Scoped to .ah-pro-wizard so no other UM form is affected.
   ==================================================================== */

/* Centre + constrain the UM form to the same column as the post wizard (620px).
   UM caps the .um wrapper at its form-width setting (450px by default) via its own
   generated stylesheet, which the inner form can't exceed — so widen the wrapper here
   to match .ah-wizard. Stays responsive: 100% on narrow screens. */
.um.um-650 { max-width: var(--ah-form-w, 820px) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
.ah-pro-wizard { max-width: var(--ah-form-w, 820px); width: 100%; margin: 0 auto; }

/* The Pro form sits in an Elementor "boxed" container capped at 767px, which would
   hold the form back below the new 820px width. Release that cap so the form's own
   width rules govern; :has() targets the boxed inner that wraps the form. */
.e-con-inner:has(.um-650),
.e-con-inner:has(.ah-wizard) { max-width: none !important; }

/* ---- Shared responsive form width: desktop 820 / tablet 90% / mobile full-bleed ----
   One scheme across the post-a-request and Pro-register forms. Desktop uses the
   --ah-form-w max-width (820) set above; tablet narrows to 90%; mobile goes full
   width minus the standard edge gutters (handled per-form: the post form's mobile
   takeover pads 20px, the Pro form's Elementor container + .um padding give 20px). */
@media (max-width: 1024px) {
	.askhole-form,
	.ah-wizard,
	.um.um-650,
	.ah-pro-wizard { width: 90% !important; }
}
@media (max-width: 767px) {
	.askhole-form,
	.ah-wizard,
	.um.um-650,
	.ah-pro-wizard { width: 100% !important; max-width: none !important; }
}

/* Progress header sits above the first field. */
.ah-pro-progress { margin: 0 0 26px; }

/* Match the post wizard's .ah-f inputs (1.5px #dcdce4 border, 12px radius, 50px tall,
   purple focus). UM ships its own !important field CSS at equal specificity, so these
   are prefixed with the wrapping `.um` to outrank it regardless of stylesheet order. */
.um .ah-pro-wizard input[type="text"],
.um .ah-pro-wizard input[type="email"],
.um .ah-pro-wizard input[type="tel"],
.um .ah-pro-wizard input[type="number"],
.um .ah-pro-wizard input[type="password"],
.um .ah-pro-wizard select,
.um .ah-pro-wizard textarea {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 16px !important;
	color: #0D1117 !important;
	background: #fff !important;
	border: 1.5px solid #dcdce4 !important;
	border-radius: 12px !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}
.um .ah-pro-wizard input[type="text"],
.um .ah-pro-wizard input[type="email"],
.um .ah-pro-wizard input[type="tel"],
.um .ah-pro-wizard input[type="number"],
.um .ah-pro-wizard input[type="password"],
.um .ah-pro-wizard select {
	height: 50px !important;
	min-height: 50px !important;
	padding: 0 14px !important;
	line-height: normal !important;
}
/* Service categories is a UM Multi-Select, which UM renders through SELECT2: the native
   <select> is hidden and the visible control is a .select2 container, so our input/select rules
   never reached it — it kept select2's default 40px height + 2px corners and looked short and
   square next to the 50px rounded inputs. Style the select2 box to match the other controls.
   NOTE on specificity: UM's own um-styles.min.css carries `.um-field .select2.select2-container
   .select2-selection { border-radius:2px !important; border:1px … !important }` at 0,4,0 and loads
   AFTER our stylesheet — so a 0,4,0 selector only TIES and loses the corners/border on source order
   (min-height still won because UM doesn't set it). We match UM's own `.um-field .select2` prefix to
   push the specificity to 0,6,0 and win outright. */
.um .ah-pro-wizard .um-field .select2.select2-container { width: 100% !important; }
.um .ah-pro-wizard .um-field .select2.select2-container .select2-selection {
	min-height: 50px !important;
	border: 1.5px solid #dcdce4 !important;
	border-radius: 12px !important;
	background: #fff !important;
	display: flex !important;
	align-items: center !important;
	padding: 4px 10px !important;
	box-sizing: border-box !important;
}
.um .ah-pro-wizard .um-field .select2.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4;
}
.um .ah-pro-wizard .select2-search--inline .select2-search__field {
	margin-top: 0 !important;
	height: auto !important;
	line-height: 1.6 !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 16px !important;
}
/* Placeholder (single-line height) when nothing is chosen. */
.um .ah-pro-wizard .select2-selection--single { padding: 0 10px !important; }
.um .ah-pro-wizard .select2-selection--single .select2-selection__rendered { line-height: 48px !important; padding: 0 !important; }
.um .ah-pro-wizard .select2-selection--single .select2-selection__arrow { height: 48px !important; }
/* Focus / open → purple ring, matching the other inputs. (Same .um-field .select2 prefix so it
   outranks UM's border rule on the box.) */
.um .ah-pro-wizard .um-field .select2.select2-container--default.select2-container--focus .select2-selection,
.um .ah-pro-wizard .um-field .select2.select2-container--open .select2-selection {
	border-color: #783FF2 !important;
	box-shadow: 0 0 0 3px rgba(120,63,242,.12) !important;
}
/* Selected categories render as on-brand purple chips. */
.um .ah-pro-wizard .um-field .select2 .select2-selection__choice {
	background: rgba(120,63,242,.10) !important;
	border: 1px solid rgba(120,63,242,.25) !important;
	border-radius: 8px !important;
	color: #0D1117 !important;
	padding: 2px 8px !important;
	margin: 2px 4px 2px 0 !important;
	font-size: 14px !important;
}
.um .ah-pro-wizard .um-field .select2 .select2-selection__choice__remove { color: #783FF2 !important; margin-right: 4px !important; }
/* Dropdown options list (opens below the field). */
.um .ah-pro-wizard + .select2-container .select2-results__option,
.select2-container .select2-results__option[aria-selected] { font-family: 'Inter', system-ui, sans-serif; }
.um .ah-pro-wizard textarea { padding: 12px 14px !important; min-height: 120px; }
.um .ah-pro-wizard input:focus,
.um .ah-pro-wizard select:focus,
.um .ah-pro-wizard textarea:focus {
	outline: none !important;
	border-color: #783FF2 !important;
	box-shadow: 0 0 0 3px rgba(120,63,242,.12) !important;
}

/* Placeholder / helper contrast (WCAG AA). UM ships #999–#aaa placeholders (≈2.3–2.9:1 on
   white — a double-A failure). Darken to #6B7280 (≈4.9:1) across our UM inputs, the login
   fields and the select2 "Service categories" placeholder. !important + the `.um` prefix so
   it outranks UM core. */
.um .ah-pro-wizard input::placeholder,
.um .ah-pro-wizard textarea::placeholder,
.um .ah-login input::placeholder {
	color: #6B7280 !important;
	opacity: 1 !important;
}
.um .ah-pro-wizard input::-webkit-input-placeholder,
.um .ah-pro-wizard textarea::-webkit-input-placeholder,
.um .ah-login input::-webkit-input-placeholder {
	color: #6B7280 !important;
}
.um .ah-pro-wizard .select2-selection__placeholder,
.um .ah-pro-wizard .select2-search__field::placeholder {
	color: #6B7280 !important;
	opacity: 1 !important;
}

/* Field labels: bold, ink, tight to the input — matching .ah-f > span. */
.um .ah-pro-wizard .um-field-label label {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	color: #0D1117 !important;
}

/* Primary submit (UM's "Register") → the purple .ah-btn look; matched height + radius.
   UM renders it as .um-button; recolour and size it to sit with the Back/Next row. */
.um .ah-pro-wizard input[type="submit"],
.um .ah-pro-wizard .um-button:not(.um-alt) {
	background: #783FF2 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 12px !important;
	height: 50px !important;
	line-height: 50px !important;
	padding: 0 26px !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	box-shadow: none !important;
}
.um .ah-pro-wizard input[type="submit"]:hover,
.um .ah-pro-wizard .um-button:not(.um-alt):hover {
	background: #6a2fe0 !important;
}

/* Back / Next row. .ah-step-nav supplies the flex layout; size the buttons here
   (post wizard scopes button height under .ah-wizard, which this form isn't). */
.ah-pro-nav { margin-top: 24px; }
/* Keep the primary button (Next, or the Register submit on the last step) on the right,
   even when Back is hidden (step 1). The submit is moved into this row by the JS. */
.ah-pro-nav .ah-pro-next,
.ah-pro-nav input[type="submit"],
.ah-pro-nav .um-button { margin-left: auto !important; width: auto !important; }
.ah-pro-wizard .ah-btn,
.ah-pro-wizard .ah-btn-ghost {
	height: 50px; padding: 0 26px;
	display: inline-flex; align-items: center; justify-content: center;
	box-sizing: border-box;
}

/* Inline per-step errors — red field + message (reuses UM's .um-field-error look). */
.um .ah-pro-wizard .um-error input,
.um .ah-pro-wizard .um-error select,
.um .ah-pro-wizard .um-error textarea {
	border-color: #EF4444 !important;
	box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
/* UM's .um-field-error already paints a red background; our text must be white to sit
   on it (was red-on-red). */
.ah-pro-wizard .ah-pro-err {
	color: #fff !important; font-size: 13.5px; font-weight: 600; margin-top: 6px;
}

/* Full-width, stacked Next/Back on phones (Next on top), like the post wizard. */
@media (max-width: 767px) {
	.ah-pro-nav { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
	.ah-pro-nav .ah-btn,
	.ah-pro-nav .ah-btn-ghost,
	.ah-pro-nav input[type="submit"],
	.ah-pro-nav .um-button { width: 100% !important; margin-left: 0 !important; }

	/* Match the post form's 20px mobile gutters. The register page is an Elementor
	   page whose container already supplies 10px of side padding, so add 10px on the
	   .um wrapper to land the fields + progress bar at 20px from each edge. */
	.um.um-650 {
		padding-left: 10px !important;
		padding-right: 10px !important;
		box-sizing: border-box !important;
	}
}

/* ====================================================================
   "Join as a Pro" page intro heading (placed in Elementor above the form)
   Add class .ah-pro-intro to the CONTAINER, .ah-pro-intro-title to the
   Heading widget, .ah-pro-intro-sub to the Text widget (option 2). Elementor
   puts those classes on the widget WRAPPERS and renders the real text in an
   inner .elementor-heading-title (h2) / .elementor-text-editor, which carry
   Elementor's own colour + weight — so we target those inner nodes with extra
   specificity (+ !important on colour/weight, which Elementor's global kit
   sets aggressively). Also supports option 1 (a single Text widget with a
   plain <h2> + <p>).

   Width/placement is left to the Elementor container on purpose, so the header
   uses the same full-width-page ratios as the rest of the site and can sit a
   touch wider than the 620px form. Only typography is controlled here. */
.ah-pro-intro { font-family: 'Inter', system-ui, sans-serif; }

/* Heading — option 2 (Elementor Heading widget) + option 1 (plain h1/h2). */
.ah-pro-intro .ah-pro-intro-title .elementor-heading-title,
.ah-pro-intro-title .elementor-heading-title,
.ah-pro-intro h1,
.ah-pro-intro h2 {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 800 !important;
	font-size: 30px !important;
	line-height: 1.15 !important;
	letter-spacing: -0.5px !important;
	color: #0D1117 !important;
	margin: 0 0 10px !important;
}

/* Elementor lays the heading + sub widgets out in a flex container with a ~20px
   row-gap — that (not any margin) is what put too much air under the H1. Zero it so
   the H1's own 10px bottom margin sets the H1→sub spacing, keeping the pair tight. */
.ah-pro-intro .e-con,
.ah-pro-intro .e-con-inner { gap: 0 !important; row-gap: 0 !important; }

/* Sub-text — option 2 (Text widget) + option 1 (plain <p>). */
.ah-pro-intro .ah-pro-intro-sub .elementor-widget-container,
.ah-pro-intro .ah-pro-intro-sub p,
.ah-pro-intro-sub .elementor-widget-container,
.ah-pro-intro-sub p,
.ah-pro-intro p {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
	color: #5c6270 !important;
	margin: 0 !important;
}

@media (max-width: 767px) {
	.ah-pro-intro .ah-pro-intro-title .elementor-heading-title,
	.ah-pro-intro-title .elementor-heading-title,
	.ah-pro-intro h1,
	.ah-pro-intro h2 { font-size: 24px !important; }
}

/* ---- Align the intro with the form column (desktop + tablet) ----
   The intro is a separate Elementor container that otherwise sits at the theme's
   content gutter, so its heading didn't line up with the centred 820px form. Here
   we release the intro container and centre its inner content on the SAME width
   scale as the form (820 desktop / 90% tablet), then zero the nested Elementor
   container/widget padding so the heading's left edge matches the form fields.
   Mobile (<=767px) is left as-is — the heading already shares the form's 20px
   gutter there. */
@media (min-width: 768px) {
	.ah-pro-intro { max-width: none !important; }
	.ah-pro-intro > .e-con-inner {
		max-width: var(--ah-form-w, 820px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.ah-pro-intro .e-con-inner,
	.ah-pro-intro .e-con,
	.ah-pro-intro .elementor-widget-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.ah-pro-intro > .e-con-inner { max-width: none !important; width: 90% !important; }
}

/* ====================================================================
   Pixabay photo suggestions strip (post-a-request step 2)
   A horizontal row of uniform, cropped tiles so any-ratio photo fills
   the same shape; single-select with a purple ring + tick.
   ==================================================================== */
.ah-stock-field .ah-stock { margin-top: 2px; }
.ah-stock-msg { font-size: 13.5px; color: #6a6f7b; margin: 4px 0 0; }
.ah-stock.is-loading .ah-stock-msg { color: #783FF2; }

.ah-stock-row {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 4px 2px 10px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.ah-stock-tile {
	flex: 0 0 auto;
	width: 132px;
	height: 92px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background: #f1f2f5;
	position: relative;
	transition: border-color .12s ease, transform .08s ease;
}
.ah-stock-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah-stock-tile:hover { border-color: #cdbff6; transform: translateY(-1px); }
.ah-stock-tile.is-picked { border-color: #783FF2; }
.ah-stock-tile.is-picked::after {
	content: "\2713";
	position: absolute; top: 5px; right: 5px;
	width: 20px; height: 20px; border-radius: 50%;
	background: #783FF2; color: #fff;
	font-size: 12px; line-height: 20px; text-align: center; font-weight: 700;
}
.ah-stock-tile:focus-visible {
	outline: none; border-color: #783FF2;
	box-shadow: 0 0 0 3px rgba(120,63,242,.20);
}

/* "or" divider between the upload and the stock-photo CTA (mirrors the login divider). */
.ah-or { display: flex; align-items: center; gap: 14px; margin: -4px 0 12px; color: #9aa0ab; font-size: 13.5px; }
.ah-or::before, .ah-or::after { content: ""; flex: 1; height: 1px; background: #ececf4; }

/* The CTA uses the shared .ah-link-cta look (homepage "browse all"); this just clears the
   default <button> chrome and spaces it. Stock photo is opt-in — hidden until it's clicked. */
.ah-stock-toggle,
.ah-stock-toggle:hover,
.ah-stock-toggle:focus,
.ah-stock-toggle:active {
	margin: 0 0 18px;
	padding: 0 !important;
	background: none !important;   /* kill the theme's button-hover pill */
	border: none !important;
	box-shadow: none !important;
	color: #783FF2 !important;
	cursor: pointer;
}
.ah-stock-toggle:hover { color: #6a2fe0 !important; }
.ah-stock-field { display: none; }
.ah-stock-field.is-open { display: block; margin: 0 0 18px; }

/* Field label (the wrapper is no longer .ah-f, so restate the label look). */
.ah-stock-label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 8px; }
.ah-stock-label small { font-weight: 500; color: #9098a4; }

/* Compact keyword search — deliberately smaller/lighter than the main form inputs so it
   reads as a little utility control, not another form field. Constrained width + a small
   magnifier icon button. */
.ah-stock-search {
	display: flex;
	gap: 8px;
	max-width: 360px;
	margin: 0 0 12px;
}
.ah-stock-search .ah-stock-kw {
	flex: 1 1 auto;
	height: 38px;
	border: 1px solid #e4e4ec;
	border-radius: 9px;
	padding: 0 12px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	color: #0D1117;
	background: #f6f6f8;
	box-sizing: border-box;
}
.ah-stock-search .ah-stock-kw:focus { outline: none; border-color: #783FF2; background: #fff; box-shadow: 0 0 0 3px rgba(120,63,242,.10); }
.ah-stock-search .ah-stock-search-btn {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #783FF2;
	color: #fff;
	border: none;
	border-radius: 9px;
	cursor: pointer;
}
.ah-stock-search .ah-stock-search-btn:hover { background: #6a2fe0; }
.ah-stock-search .ah-stock-search-btn svg { width: 17px; height: 17px; }

/* AI keyword suggestion chips under the search box. */
.ah-stock-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ah-stock-chips:empty { margin: 0; }
.ah-stock-chip {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: #783FF2;
	background: #f1ecfe;
	border: none;
	border-radius: 999px;
	padding: 5px 12px;
	cursor: pointer;
}
.ah-stock-chip:hover { background: #e7defc; }

/* =========================================================================
   Ultimate Member ACCOUNT page (Account / Change password / Privacy tabs)
   restyled to match the AskHole forms. Enqueued on the account page by
   askhole_account_enqueue_assets(). Scoped to .um.um-account. (v0.48.1)
   ========================================================================= */
/* #15 — tightened 700px → 560px: a single-column account form reads better at a comfortable measure,
   and the narrower column keeps the page's background doodles clear of the fields. */
.um.um-account { max-width: 560px !important; width: 100% !important; margin: 0 auto 40px !important; float: none !important; }

/* ---- Shell layout on the account page (member rail beside the form) --------------------------
   The account page is wrapped in the member app shell (askhole_account_wrap_shell). Match the
   dashboard's alignment: cap the shell at the dashboard content width (1140px, centred) so the
   rail sits in the same place instead of flush to the far-left container edge. */
.um-page-account .ah-shell { max-width: 1140px; }

/* Vertical alignment: Astra puts a 60px top margin on .content-area for this template, so the shell
   (and the rail) sat 50px lower than on the Elementor dashboard (10px above its shell). Match the
   dashboard by trimming that top margin to 10px, so the rail lines up at the same height across
   Dashboard / Account / Change password / Privacy. */
.um-page-account .content-area { margin-top: 10px !important; }

/* Hide the theme's page title (it renders above the whole shell, i.e. above the rail). We render
   our own title inside the content column instead — see .ah-account-title below. */
.um-page-account .entry-header { display: none !important; }

/* Our section title, above the form and sharing its left edge (matches the theme H1 styling). */
.ah-account-title { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 32px; line-height: 1.2; font-weight: 600; color: #0D1117; margin: 0 0 20px; }

/* Left-align the form within the content column so it lines up under the title (the base rule
   centres it with margin auto). */
.ah-shell-main .um.um-account { margin-left: 0 !important; margin-right: 0 !important; }

/* Hide the avatar/name header — the member nav already identifies the user; this
   page is for editing account fields. */
.um.um-account .um-account-meta { display: none !important; }

/* In-page tab nav removed — each section is reached only via the member menu / flyout
   (Profile → Account · Change password · Privacy). */
.um.um-account .um-account-side { display: none !important; }

/* Hide UM's per-section accordion heading bar too (it appears because the form is narrow, so UM
   flags it as "uimob800"). The member nav + page title already name the section, and non-active
   tabs stay hidden (inline display:none), so only the relevant form renders. */
.um.um-account .um-account-heading { display: none !important; }

/* And hide UM's *mobile* accordion nav bar (.um-account-nav, uimob340/500-show) — at narrow
   widths UM swaps the heading for this nav, which reintroduced the accordion on mobile. The
   member flyout handles navigation, so neither is needed. */
.um.um-account .um-account-nav { display: none !important; }

/* Form sits directly on the page — no card / outline behind it. In wide mode UM caps
   .um-account-main at max-width:450px, which was squeezing every field to ~450px; clear it
   so the fields fill the form width. */
.um.um-account .um-account-main { float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; box-sizing: border-box; }

/* Mobile side gutter — Astra's container padding is zeroed site-wide on this install, so the
   account form needs its own 20px inset to match the rest of the site. */
@media (max-width: 768px) {
	.um.um-account { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; }
	/* Inside the member shell the shell already supplies the 20px side gutter (≤980px),
	   so drop the account form's own inset to avoid doubling it. */
	.ah-shell-main .um.um-account { padding-left: 0 !important; padding-right: 0 !important; }
	/* Full-width submit on mobile. UM wraps the button in a floated, shrink-to-fit .um-left,
	   so the button must be freed at the wrapper too, not just given width:100%. */
	.um.um-account .um-left { float: none !important; width: 100% !important; }
	.um.um-account .um-button, .um.um-account input[type=submit].um-button { width: 100% !important; display: block !important; }
}

/* Labels. */
.um.um-account .um-field-label label { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 14px !important; color: #0D1117 !important; }

/* Inputs / selects / textareas → 50px, 12px radius, 1.5px border, purple focus. */
.um.um-account input[type=text], .um.um-account input[type=email], .um.um-account input[type=password], .um.um-account input[type=tel], .um.um-account input[type=number], .um.um-account input[type=url], .um.um-account select, .um.um-account textarea {
	font-family: 'Inter', system-ui, sans-serif !important; font-size: 16px !important; color: #0D1117 !important; background: #fff !important;
	border: 1.5px solid #dcdce4 !important; border-radius: 12px !important; box-shadow: none !important; box-sizing: border-box !important; width: 100% !important;
}
.um.um-account input[type=text], .um.um-account input[type=email], .um.um-account input[type=password], .um.um-account input[type=tel], .um.um-account input[type=number], .um.um-account input[type=url], .um.um-account select {
	height: 50px !important; min-height: 50px !important; padding: 0 14px !important; line-height: normal !important;
}
.um.um-account textarea { padding: 12px 14px !important; min-height: 110px; }
.um.um-account input:focus, .um.um-account select:focus, .um.um-account textarea:focus { outline: none !important; border-color: #783FF2 !important; box-shadow: 0 0 0 3px rgba(120,63,242,.12) !important; }
.um.um-account input::placeholder, .um.um-account textarea::placeholder { color: #6B7280 !important; opacity: 1 !important; }

/* select2 (privacy dropdowns) — same treatment as the pro-register wizard. */
.um.um-account .um-field .select2.select2-container { width: 100% !important; }
.um.um-account .um-field .select2.select2-container .select2-selection { min-height: 50px !important; border: 1.5px solid #dcdce4 !important; border-radius: 12px !important; background: #fff !important; display: flex !important; align-items: center !important; padding: 4px 10px !important; box-sizing: border-box !important; }
.um.um-account .select2-selection--single .select2-selection__rendered { line-height: 48px !important; padding: 0 !important; color: #0D1117; }
.um.um-account .select2-selection--single .select2-selection__arrow { height: 48px !important; }
.um.um-account .um-field .select2.select2-container--default.select2-container--focus .select2-selection,
.um.um-account .um-field .select2.select2-container--open .select2-selection { border-color: #783FF2 !important; box-shadow: 0 0 0 3px rgba(120,63,242,.12) !important; }

/* Checkboxes / radios (privacy toggles) → purple. */
.um.um-account input[type=checkbox], .um.um-account input[type=radio] { accent-color: #783FF2 !important; width: 18px !important; height: 18px !important; }

/* Submit ("Update Account" / "Change Password") → AskHole purple button. */
.um.um-account .um-button, .um.um-account input[type=submit].um-button { background: #783FF2 !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; font-family: 'Inter', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 15px !important; height: 50px !important; line-height: 50px !important; padding: 0 28px !important; box-shadow: none !important; cursor: pointer; }
.um.um-account .um-button:hover { background: #6a2fe0 !important; }

/* =========================================================================
   Register page: customer ↔ Pro toggle (register-toggle.php).
   Two-path entry on /register/ — "I need something done" (customer, form 519) and
   "I'm a business" (Pro, form 650). The plugin renders its own heading + tabs, so the
   Elementor "Join as a Pro" intro is hidden while the toggle is showing.
   ========================================================================= */
body.um-page-register.ah-has-register-toggle .ah-pro-intro,
body.um-page-register.ah-register-member-success .ah-pro-intro { display: none !important; }

.ah-reg-switch { max-width: 640px; margin: 0 auto; }
.ah-reg-head { text-align: left; margin: 0 0 22px; }
.ah-reg-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 4vw, 34px);
	letter-spacing: -.02em;
	line-height: 1.15;
	color: #0D1117;
	margin: 0 0 8px;
}
.ah-reg-sub { color: #6a6f7b; font-size: 16px; line-height: 1.5; margin: 0; max-width: 520px; }

.ah-reg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 22px; }
.ah-reg-tab {
	display: flex; flex-direction: column; gap: 2px;
	padding: 13px 16px;
	border: 1.5px solid #e2e4ea; border-radius: 14px; background: #fff;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ah-reg-tab-t { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 15px; color: #0D1117; }
.ah-reg-tab-s { font-size: 12.5px; line-height: 1.35; color: #6a6f7b; }
.ah-reg-tab:hover { border-color: #c9b8fb; }
.ah-reg-tab:focus-visible { outline: none; border-color: #783FF2; box-shadow: 0 0 0 3px rgba(120, 63, 242, .18); }
.ah-reg-tab.is-active { border-color: #783FF2; background: #f6f2ff; box-shadow: 0 0 0 3px rgba(120, 63, 242, .10); }
.ah-reg-tab.is-active .ah-reg-tab-t { color: #783FF2; }

/* The chosen UM form keeps its own card styling inside .ah-reg-body. */
.ah-reg-body { margin: 0; }

@media (max-width: 520px) {
	.ah-reg-tabs { grid-template-columns: 1fr; }
}

/* The customer form (519) rendered on the member tab won't carry the Pro form's
   .um-650 / .ah-pro-wizard hooks, so give ANY UM form inside the toggle body the same
   card + branded-field treatment. On the Pro tab this re-affirms form 650's existing look
   (identical values), so nothing shifts there. */
.ah-reg-body .um { max-width: var(--ah-form-w, 820px) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
@media (min-width: 768px) {
	.ah-reg-body .um {
		background: #fff !important;
		border: 1px solid #efeef4 !important;
		border-radius: 18px !important;
		box-shadow: 0 20px 60px rgba( 60, 40, 120, .12 ) !important;
		padding: 32px 40px 36px !important;
		margin-top: 0 !important;
	}
}
.ah-reg-body .um input[type="text"],
.ah-reg-body .um input[type="email"],
.ah-reg-body .um input[type="tel"],
.ah-reg-body .um input[type="number"],
.ah-reg-body .um input[type="password"],
.ah-reg-body .um select,
.ah-reg-body .um textarea {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 16px !important;
	color: #0D1117 !important;
	background: #fff !important;
	border: 1.5px solid #dcdce4 !important;
	border-radius: 12px !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}
.ah-reg-body .um input[type="text"],
.ah-reg-body .um input[type="email"],
.ah-reg-body .um input[type="tel"],
.ah-reg-body .um input[type="number"],
.ah-reg-body .um input[type="password"],
.ah-reg-body .um select {
	height: 50px !important;
	min-height: 50px !important;
	padding: 0 14px !important;
	line-height: normal !important;
}
.ah-reg-body .um textarea { padding: 12px 14px !important; min-height: 120px; }
.ah-reg-body .um input:focus,
.ah-reg-body .um select:focus,
.ah-reg-body .um textarea:focus {
	outline: none !important;
	border-color: #783FF2 !important;
	box-shadow: 0 0 0 3px rgba( 120, 63, 242, .12 ) !important;
}
.ah-reg-body .um input::placeholder,
.ah-reg-body .um textarea::placeholder { color: #6B7280 !important; opacity: 1 !important; }
.ah-reg-body .um .um-field-label label,
.ah-reg-body .um label { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 14px !important; color: #0D1117 !important; }
.ah-reg-body .um .um-button,
.ah-reg-body .um input[type="submit"] {
	background: #783FF2 !important; color: #fff !important; border: 0 !important; border-radius: 12px !important;
	font-family: 'Inter', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 16px !important;
	height: 50px !important; line-height: 50px !important; padding: 0 28px !important; box-shadow: none !important; cursor: pointer;
}
.ah-reg-body .um .um-button:hover,
.ah-reg-body .um input[type="submit"]:hover { background: #6a2fe0 !important; }

/* Member tab only: an "already have an account?" link sits above the form, and UM's inline
   Login half-button is dropped so Register stands alone, right-aligned. Scoped to
   body.ah-register-member so the Pro tab's form is untouched. */
body.ah-register-member .ah-reg-haveacct { text-align: left; margin: 0 0 16px; font-size: 14.5px; color: #6a6f7b; }
body.ah-register-member .ah-reg-haveacct a { color: #783FF2; font-weight: 700; text-decoration: none; }
body.ah-register-member .ah-reg-haveacct a:hover { text-decoration: underline; }
body.ah-register-member .ah-reg-body .um-col-alt { display: flex !important; justify-content: flex-end !important; }
body.ah-register-member .ah-reg-body .um-col-alt .um-right.um-half { display: none !important; }
body.ah-register-member .ah-reg-body .um-col-alt .um-left.um-half { width: auto !important; float: none !important; margin: 0 !important; }
body.ah-register-member .ah-reg-body .um-col-alt .um-left.um-half .um-button { width: auto !important; display: inline-flex !important; align-items: center; justify-content: center; }