/* ==========================================================================
   Apex Medical — theme customisations layered on top of the Hectolab design.
   Keep all bespoke overrides here so the original vendor CSS stays untouched.
   Loaded last (see inc/enqueue.php), so these rules win.
   ========================================================================== */

:root {
	/* Deep navy "scrim" base (RGB triplet, used with variable alpha).
	   Navy reads as clinical / calm / trustworthy and gives cleaner text
	   contrast than harsh pure black. */
	--apex-scrim: 10, 27, 42;
	/* Brand accent (matches the Hectolab theme green). */
	--apex-accent: #4ab242;
}

/* --------------------------------------------------------------------------
   1. Hero banner — world-class legibility
   Strategy: contrast comes from a DIRECTIONAL deep-navy scrim (strong under
   the left-aligned copy, fading to reveal the photo on the right) plus a
   bottom vignette for depth. Text is pure white with a TIGHT 1–2px edge
   shadow — this sharpens small type instead of haloing it. No wide glow.
   -------------------------------------------------------------------------- */
.fullscreen-banner .item {
	position: relative;
}

.fullscreen-banner .item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1; /* above the bg image, below the copy (.align-center is z-index:9) */
	pointer-events: none;
	background:
		/* horizontal scrim: dark behind the text, clear over the photo */
		linear-gradient(
			90deg,
			rgba(var(--apex-scrim), 0.88) 0%,
			rgba(var(--apex-scrim), 0.74) 26%,
			rgba(var(--apex-scrim), 0.45) 52%,
			rgba(var(--apex-scrim), 0.15) 76%,
			rgba(var(--apex-scrim), 0) 100%
		),
		/* subtle bottom vignette for grounding/depth */
		linear-gradient(
			180deg,
			rgba(var(--apex-scrim), 0) 58%,
			rgba(var(--apex-scrim), 0.42) 100%
		);
}

.fullscreen-banner .align-center {
	z-index: 9; /* keep copy above the scrim */
}

/* Eyebrow / small heading above the title — brand accent, spaced caps. */
.fullscreen-banner .item h5 {
	color: var(--apex-accent);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Headline — pure white, crisp edge shadow (no glow). */
.fullscreen-banner .item h1 {
	color: #ffffff;
	font-weight: 700;
	line-height: 1.12;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.20);
}

.fullscreen-banner .item h1 span {
	color: var(--apex-accent);
}

/* Body / lead — fully white, readable measure, TIGHT shadow so small text
   stays sharp (this is the fix for "small font looks blurry"). */
.fullscreen-banner .item p,
.fullscreen-banner .item p.lead {
	color: #ffffff;
	font-weight: 400;
	opacity: 1;
	max-width: 620px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.60);
}

/* On the centred slide variant, balance the scrim symmetrically. */
.fullscreen-banner .item .row.text-center {
	text-align: center;
}

/* --------------------------------------------------------------------------
   2. Inner-page banner (apex_page_banner -> .page-title)
   Same white-text-on-photo case on About / Contact / archive headers.
   -------------------------------------------------------------------------- */
.page-title {
	position: relative;
	z-index: 0;
}

.page-title::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		90deg,
		rgba(var(--apex-scrim), 0.82) 0%,
		rgba(var(--apex-scrim), 0.58) 55%,
		rgba(var(--apex-scrim), 0.40) 100%
	);
}

.page-title .container {
	position: relative;
	z-index: 1;
}

.page-title h1,
.page-title p,
.page-title .breadcrumb,
.page-title .breadcrumb a,
.page-title .breadcrumb .breadcrumb-item.active {
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   3. Quote-form & CTA bands carrying a background image
   The quote band uses a deeper, slightly graded navy scrim so the white
   "consultation card" reads as crisp and elevated against the photo.
   -------------------------------------------------------------------------- */
section#quote[data-bg-img]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(
			135deg,
			rgba(var(--apex-scrim), 0.90) 0%,
			rgba(var(--apex-scrim), 0.78) 55%,
			rgba(var(--apex-scrim), 0.66) 100%
		);
	pointer-events: none;
}

.apex-cta[data-bg-img]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(var(--apex-scrim), 0.68);
	pointer-events: none;
}

section#quote[data-bg-img],
.apex-cta[data-bg-img] {
	position: relative;
}

section#quote[data-bg-img] > .container,
.apex-cta[data-bg-img] > .container {
	position: relative;
	z-index: 1;
}

.apex-cta h2,
.apex-cta p {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
}

/* --------------------------------------------------------------------------
   3b. "Request a Free Quote" — the consultation card
   A two-panel card: a navy→green info rail (value proposition + trust
   signals) beside a clean, fully-labelled white form panel. Self-contained:
   it does not rely on the vendor .form-control / Bootstrap grid styles.
   -------------------------------------------------------------------------- */
.apex-quote-section {
	padding-top: 90px;
	padding-bottom: 90px;
}

.apex-quote-card {
	display: flex;
	flex-wrap: wrap;
	border-radius: 22px;
	overflow: hidden;
	background: #ffffff;
	box-shadow:
		0 2px 8px rgba(8, 22, 33, 0.18),
		0 38px 80px -32px rgba(8, 22, 33, 0.55);
}

/* ---- Left info rail ---- */
.apex-quote-aside {
	flex: 1 1 38%;
	min-width: 290px;
	padding: 3.25rem 2.75rem;
	color: #ffffff;
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(74, 178, 66, 0.42) 0%, rgba(74, 178, 66, 0) 55%),
		linear-gradient(160deg, rgba(13, 33, 51, 1) 0%, rgba(9, 23, 37, 1) 100%);
}

/* faint decorative ring for depth */
.apex-quote-aside::before {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -90px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.04);
	pointer-events: none;
}

.apex-quote-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #cdeccb;
	padding: 0.45rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
}

.apex-quote-eyebrow i {
	color: var(--apex-accent);
	font-size: 0.85rem;
}

.apex-quote-title {
	color: #ffffff;
	font-size: 2rem;
	line-height: 1.2;
	font-weight: 700;
	margin: 1.25rem 0 0.85rem;
	text-transform: none;
}

.apex-quote-lead {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1rem;
	line-height: 1.65;
	margin-bottom: 1.85rem;
}

.apex-quote-points {
	list-style: none;
	margin: 0 0 1.85rem;
	padding: 0;
}

.apex-quote-points li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.apex-quote-points li:last-child {
	border-bottom: 0;
}

.apex-quote-check {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--apex-accent);
	color: #ffffff;
	font-size: 0.62rem;
}

.apex-quote-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
}

.apex-quote-meta i {
	color: var(--apex-accent);
}

/* ---- Right form panel ---- */
.apex-quote-main {
	flex: 1 1 62%;
	min-width: 300px;
	padding: 3.25rem 2.85rem;
	background: #ffffff;
}

.apex-quote-form .apex-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
}

.apex-quote-form .apex-field-row .apex-field {
	flex: 1 1 calc(50% - 0.55rem);
	min-width: 180px;
}

.apex-quote-form .apex-field {
	margin-bottom: 1.1rem;
}

.apex-quote-form label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #1e2a35;
	margin-bottom: 0.45rem;
}

.apex-quote-form .apex-req {
	color: var(--apex-accent);
}

.apex-quote-form .apex-hint {
	font-weight: 400;
	color: #9aa7b1;
	text-transform: none;
	letter-spacing: 0;
}

.apex-input {
	position: relative;
	display: flex;
	align-items: center;
}

.apex-input > i {
	position: absolute;
	left: 1rem;
	top: 0.95rem;
	font-size: 0.95rem;
	color: #9aa7b1;
	pointer-events: none;
	transition: color 0.2s ease;
}

.apex-input--area > i {
	top: 1.05rem;
}

.apex-input input,
.apex-input textarea {
	width: 100%;
	font-family: inherit;
	font-size: 0.95rem;
	color: #202125;
	background: #f4f7f9;
	border: 1px solid #e3e9ee;
	border-radius: 12px;
	padding: 0.85rem 1rem 0.85rem 2.75rem;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.apex-input textarea {
	resize: vertical;
	min-height: 116px;
}

.apex-input input::placeholder,
.apex-input textarea::placeholder {
	color: #9aa7b1;
	opacity: 1;
}

.apex-input input:focus,
.apex-input textarea:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--apex-accent);
	box-shadow: 0 0 0 3px rgba(74, 178, 66, 0.16);
}

.apex-input input:focus ~ i,
.apex-input:focus-within > i {
	color: var(--apex-accent);
}

/* ---- Actions ---- */
.apex-quote-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 1.4rem;
	margin-top: 1.5rem;
}

.apex-quote-submit {
	flex: 0 0 auto;
}

.apex-quote-assure {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.82rem;
	color: #6b7884;
}

.apex-quote-assure i {
	color: var(--apex-accent);
}

/* ---- Status alerts ---- */
.apex-quote-alert {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	border-radius: 12px;
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.5rem;
	font-size: 0.92rem;
	line-height: 1.45;
}

.apex-quote-alert i {
	margin-top: 2px;
	font-size: 1rem;
}

.apex-quote-alert--success {
	background: rgba(74, 178, 66, 0.12);
	border: 1px solid rgba(74, 178, 66, 0.4);
	color: #2f7a2a;
}

.apex-quote-alert--error {
	background: rgba(214, 69, 69, 0.10);
	border: 1px solid rgba(214, 69, 69, 0.38);
	color: #b53b3b;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
	.apex-quote-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.apex-quote-aside,
	.apex-quote-main {
		flex-basis: 100%;
		padding: 2.25rem 1.6rem;
	}

	.apex-quote-title {
		font-size: 1.6rem;
	}

	.apex-quote-form .apex-field-row {
		gap: 0;
	}

	.apex-quote-form .apex-field-row .apex-field {
		flex-basis: 100%;
	}

	.apex-quote-actions {
		justify-content: center;
		text-align: center;
	}

	.apex-quote-submit {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   4. "Why Choose Us" stat counters — keep the brand-green accent (the old
   circular skills were green; only the gauge changed to a plain number).
   -------------------------------------------------------------------------- */
.apex-why .counter .count-number {
	color: var(--apex-accent);
}

/* --------------------------------------------------------------------------
   5. Feature grid ("Everything You Need…") — tidy grey cards
   Each feature sits in a light-grey card with an accent icon badge. Cards are
   equal height and the description is given a comfortable measure and clamped
   to 3 lines so the grid stays even regardless of copy length.
   -------------------------------------------------------------------------- */
.apex-features .row.g-4 > [class*="col-"] {
	display: flex; /* equal-height cards — scoped to the cards row only, so it
	                  doesn't turn the centred heading row into a flexbox */
}

.apex-features .featured-item {
	width: 100%;
	height: 100%;
	background: #f5f7f9;
	border: 1px solid #e9eef2;
	border-radius: 16px;
	padding: 2.5rem 1.85rem;
	margin: 0;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.apex-features .featured-item:hover {
	transform: translateY(-6px);
	background: #ffffff;
	border-color: rgba(74, 178, 66, 0.45);
	box-shadow: 0 18px 42px -20px rgba(8, 22, 33, 0.30);
}

/* Icon in a soft accent circle. */
.apex-features .featured-icon {
	width: 78px;
	height: 78px;
	margin: 0 auto 1.4rem;
	padding: 0;          /* override vendor padding that knocks the glyph off-centre */
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(74, 178, 66, 0.12);
	transition: background 0.25s ease, color 0.25s ease;
}

/* Neutralise the vendor decorative cross-lines inside the badge. */
.apex-features .featured-icon::before,
.apex-features .featured-icon::after {
	display: none;
}

.apex-features .featured-item:hover .featured-icon {
	background: var(--apex-accent);
	border-color: transparent;
}

/* Let the glyph shrink-wrap so flexbox can centre it perfectly
   (vendor forces 70x70 + line-height:70 which pinned it to the top). */
.apex-features .featured-icon i {
	width: auto;
	height: auto;
	line-height: 1;
	font-size: 32px;
	color: var(--apex-accent);
	transition: color 0.25s ease;
}

.apex-features .featured-item:hover .featured-icon i {
	color: #ffffff;
	background: transparent;
	font-size: 32px;
}

/* Section heading: clean, truly centred (drop the left dash + padding that
   the theme adds to the eyebrow, which made the centred title look off). */
.apex-features .section-title {
	text-align: center;
}

.apex-features .section-title h6 {
	padding-left: 0;
}

.apex-features .section-title h6::before {
	display: none;
}

/* Title. */
.apex-features .featured-title h5 {
	font-weight: 700;
	margin-bottom: 0.65rem;
}

/* Description — comfortable measure, uniform height (max 3 lines). */
.apex-features .featured-desc p {
	margin-bottom: 0;
	color: #5b6b78;
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 34ch;
	margin-left: auto;
	margin-right: auto;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   6. Accreditations / "Internationally Accredited Partners"
   Logos keep their natural size (no forced box). We only "guide" the LABEL
   text: each logo + label is contained in a tidy, centered column with
   consistent spacing and a refined, muted label style.
   -------------------------------------------------------------------------- */
.apex-accred .featured-item {
	max-width: 220px;
	margin-left: auto;
	margin-right: auto;
}

.apex-accred .featured-item img {
	margin-bottom: 1rem;
}

.apex-accred .featured-item h5 {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.45;
	color: #41525e;
	margin-top: 0.25rem;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Coloured Title Band (former video section) — clean, centred, white.
   -------------------------------------------------------------------------- */
.apex-titleband .section-title {
	text-align: center;
}

.apex-titleband .section-title h6 {
	padding-left: 0;          /* drop the left dash + padding so it centres */
	color: #ffffff;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.apex-titleband .section-title h6::before {
	display: none;
}

.apex-titleband .section-title h2 {
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   8. Treatments carousel image band (home "dark-service" owl carousel)
   The imported treatment photos are wide-and-short thumbnails (286x132,
   ~2.17:1), while the theme was built around taller ~3:2 photos. With the
   vendor's height:auto the imported images render as a short band that reads
   as "small". Lock the image area to a fixed 16:9 box and cover-fit so every
   card matches regardless of the source image's aspect ratio.
   -------------------------------------------------------------------------- */
.dark-service .service-images {
	aspect-ratio: 16 / 9;
}

.dark-service .service-images img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
   9. Contact Form 7 parity for the quote form
   The quote form is rendered by CF7 (see inc/quote-cf7.php), wrapped in a
   .apex-quote-form div so the §3b form CSS applies. CF7 adds its own wrappers
   (span.wpcf7-form-control-wrap around each control, a response output, spinner
   and validation tips); these rules make those fill/behave like the native
   markup so the layout is unchanged.
   -------------------------------------------------------------------------- */
.apex-quote-form .wpcf7-form-control-wrap {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

/* CF7 reuses the form-tag name as the control id is absent; keep inputs full
   width (mirrors the global .apex-input input rule for the wrapped case). */
.apex-quote-form .apex-input .wpcf7-form-control {
	width: 100%;
}

/* Inline validation tip under a field. */
.apex-quote-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8rem;
	color: #b53b3b;
}

.apex-quote-form .apex-input .wpcf7-not-valid {
	border-color: #d64545;
}

/* CF7 status message, styled like the native .apex-quote-alert. */
.apex-quote-form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.1rem;
	border-radius: 12px;
	font-size: 0.92rem;
	line-height: 1.45;
}

.apex-quote-form .wpcf7-spinner {
	margin: 0.5rem 0 0 0.5rem;
}

/* --------------------------------------------------------------------------
   10. Contact page form (CF7) — parity with the static design
   The contact form is CF7 reproducing the Hectolab markup (.row / .form-group /
   .form-control). CF7 wraps each control in span.wpcf7-form-control-wrap, which
   must fill its column so the .form-control inputs span full width. Also give
   each field bottom spacing (Bootstrap 5 dropped .form-group margins) and a
   sensible map height.
   -------------------------------------------------------------------------- */
.contact-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.contact-form .form-group {
	margin-bottom: 1.5rem;
}

.contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8rem;
	color: #ffd5d5;
}

.contact-form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.9rem 1.1rem;
	border-radius: 12px;
	font-size: 0.92rem;
	color: #fff;
}

.contact-form .wpcf7-spinner {
	margin: 0.5rem 0 0 0.5rem;
}

/* Map: full-width, no border, consistent height even if the theme's
   .iframe-h utility isn't applied to the embed. */
.map.iframe-h iframe,
.map.iframe-h-2 iframe {
	display: block;
	width: 100%;
	min-height: 450px;
	border: 0;
}

/* --------------------------------------------------------------------------
   11. Header auth controls + centered nav
   Desktop: menu centered (mx-auto), .navbar-auth flush right. Two pills:
   Log In (outline) + Create Account (filled). Hidden on mobile.
   -------------------------------------------------------------------------- */
.navbar-auth {
	gap: 0.6rem;
	margin-left: 1.5rem;
	white-space: nowrap;
}

.navbar-auth .apex-nav-btn {
	padding: 0.55rem 1.25rem;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.2;
}

/* Outline "Log In" pill that fills with brand green on hover. */
.navbar-auth .apex-nav-btn--ghost {
	color: #202125;
	border-color: #d7dde2;
	background: transparent;
}

.navbar-auth .apex-nav-btn--ghost:hover {
	color: #ffffff;
	background: var(--apex-accent);
	border-color: var(--apex-accent);
}

/* Logged-in "Log Out" text link. */
.navbar-auth .apex-nav-ghost {
	color: #6b7884;
	font-weight: 600;
	font-size: 0.82rem;
	align-self: center;
}

.navbar-auth .apex-nav-ghost:hover {
	color: var(--apex-accent);
}

/* --------------------------------------------------------------------------
   12. Mobile auth buttons in hero / banners
   Hero CTA: the quote button + the auth button share one wrapping flex row so
   they sit inline and never overflow, with the same look + load animation.
   -------------------------------------------------------------------------- */
.apex-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.apex-hero-cta .btn {
	margin: 0;
}

.apex-banner-auth {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   13. Login / Register split layout
   Brand rail (photo + navy->green scrim) on the left, form panel on the right.
   Mirrors the .apex-quote-card language, elevated for the auth pages.
   -------------------------------------------------------------------------- */
.apex-auth-section {
	padding-top: 70px;
	padding-bottom: 70px;
}

.apex-auth-split {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	margin: 0 auto;
	border-radius: 22px;
	overflow: hidden;
	background: #ffffff;
	box-shadow:
		0 2px 10px rgba(8, 22, 33, 0.16),
		0 40px 90px -38px rgba(8, 22, 33, 0.55);
}

/* Left brand rail */
.apex-auth-aside {
	flex: 1 1 42%;
	min-width: 300px;
	position: relative;
	background-size: cover;
	background-position: center;
	color: #ffffff;
	display: flex;
}

.apex-auth-aside::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(74, 178, 66, 0.55) 0%, rgba(74, 178, 66, 0) 55%),
		linear-gradient(160deg, rgba(10, 27, 42, 0.92) 0%, rgba(9, 23, 37, 0.86) 100%);
}

.apex-auth-aside__inner {
	position: relative;
	z-index: 1;
	padding: 3.25rem 2.75rem;
	align-self: center;
}

.apex-auth-eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #cdeccb;
	padding: 0.4rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	margin-bottom: 1.25rem;
}

.apex-auth-headline {
	color: #ffffff;
	font-size: 1.9rem;
	line-height: 1.2;
	font-weight: 700;
	margin-bottom: 1.5rem;
}

.apex-auth-points {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.apex-auth-points li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	padding: 0.5rem 0;
}

.apex-auth-points li i {
	color: var(--apex-accent);
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

.apex-auth-secure {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.72);
}

.apex-auth-secure i {
	color: var(--apex-accent);
	margin-right: 0.35rem;
}

/* Right form panel */
.apex-auth-panel {
	flex: 1 1 58%;
	min-width: 320px;
	padding: 3.25rem 2.85rem;
	background: #ffffff;
}

.apex-auth-title {
	font-size: 1.9rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
	color: #1e2a35;
}

.apex-auth-sub {
	color: #6b7884;
	margin-bottom: 1.75rem;
}

/* Reuse the quote form field system on auth forms. */
.apex-auth-form .apex-field {
	margin-bottom: 1.1rem;
}

.apex-auth-form .apex-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
}

.apex-auth-form .apex-field-row .apex-field {
	flex: 1 1 calc(50% - 0.55rem);
	min-width: 160px;
}

.apex-auth-form label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: #1e2a35;
	margin-bottom: 0.4rem;
}

.apex-auth-form .apex-hint {
	font-weight: 400;
	color: #9aa7b1;
}

.apex-auth-form .apex-req {
	color: var(--apex-accent);
}

.apex-auth-form .apex-quote-submit {
	width: 100%;
}

/* Password show/hide toggle inside .apex-input */
.apex-input--pass input {
	padding-right: 3rem;
}

.apex-pass-toggle {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: #9aa7b1;
	cursor: pointer;
	padding: 0.4rem 0.6rem;
	line-height: 1;
}

.apex-pass-toggle:hover {
	color: var(--apex-accent);
}

/* Remember-me / forgot row */
.apex-auth-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.apex-check {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.9rem;
	color: #5b6b78;
	margin: 0;
}

.apex-auth-link,
.apex-auth-alt a {
	color: var(--apex-accent);
	font-weight: 600;
	font-size: 0.9rem;
}

.apex-auth-alt {
	font-size: 0.92rem;
	color: #5b6b78;
	text-align: center;
}

/* Tablet: tighten the split-card padding. */
@media ( max-width: 991px ) {
	.apex-auth-aside__inner,
	.apex-auth-panel {
		padding: 2.5rem 2rem;
	}
}

/* Mobile: drop the decorative image rail and the floating card entirely — a
   clean, grounded, full-width form reads far more professional than a small
   shadowed card with a cropped photo on top. Brand lives in the site header. */
@media ( max-width: 767px ) {
	.apex-auth-section {
		padding-top: 1.5rem;
		padding-bottom: 2.5rem;
	}
	.apex-auth-split {
		flex-direction: column;
		max-width: 460px;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}
	.apex-auth-aside {
		display: none;
	}
	.apex-auth-panel {
		padding: 0;
		min-width: 0;
	}
	.apex-auth-title {
		font-size: 1.6rem;
	}
}

/* --------------------------------------------------------------------------
   14. "Request a Free Quote" section polish
   Vertically centre the brand rail beside the form, even out the rhythm of the
   CF7 fields, and keep the submit prominent + full-width so the card reads
   balanced rather than top-heavy.
   -------------------------------------------------------------------------- */
.apex-quote-aside {
	justify-content: center;
}

.apex-quote-form .apex-field-row {
	margin-bottom: 0;
}

.apex-quote-form .apex-field {
	margin-bottom: 1.15rem;
}

.apex-quote-form .apex-quote-actions {
	margin-top: 0.5rem;
}

.apex-quote-form .apex-quote-submit {
	width: 100%;
}

.apex-quote-assure {
	justify-content: center;
	margin-top: 0.85rem;
}

/* CF7 response sits tight under the form, not floating in a big box. */
.apex-quote-form .wpcf7-response-output {
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   15. Partner hospital card excerpt — justified text
   -------------------------------------------------------------------------- */
.apex-hospital-excerpt {
	text-align: justify;
}