/* Phase 2 additions only — new UI that has no equivalent in the original
   captured design (extra Services beyond the original four, homepage
   section buttons, footer social icons). Everything else in the theme's
   visible output is untouched original markup/CSS. Uses the brand CSS
   variables so it always matches whatever colours are set in the
   Customizer. */

/* Logo + tagline group. The base theme's .x-brand is float:left, and a
   plain block-level sibling doesn't stack under a float — it wraps
   around it instead, landing wherever text-flow happens to put it (which
   collided with the nav's active-page indicator bar). Floating this
   wrapper instead — and un-floating .x-brand inside it — reproduces the
   original single-floated-element layout while stacking the tagline
   directly under the logo, the way "text next to the logo" should look. */
.safebridge-brand-wrap {
	float: left;
	display: flex;
	flex-direction: column;
}

.safebridge-brand-wrap .x-brand {
	float: none;
}

/* Site tagline, shown under the logo. Edited at Settings > General >
   Tagline — WordPress's own standard place for this, so it's editable
   without hunting through theme-specific screens. */
.safebridge-tagline {
	display: block;
	font-family: var(--sb-font-body);
	font-size: 0.72rem;
	line-height: 1.3;
	color: var(--sb-header-text);
	opacity: 0.75;
	letter-spacing: 0.03em;
	margin-top: 0.15em;
	text-decoration: none;
}

/* Hidden below the theme's own "desktop nav" breakpoint (~1200px) — at
   narrower widths the tagline crowds the primary nav into wrapping onto a
   second line, which visually collides with the active-page indicator
   bar under it. */
@media (max-width: 1199px) {
	.safebridge-tagline {
		display: none;
	}
}

/* Menu polish: consistent, modern dropdown styling site-wide (the base
   framework only styles dropdown background/shadow via page-specific
   generated classes, which is inconsistent from page to page), plus a
   touch more breathing room and a cleaner hover state on the main nav. */
.x-navbar .desktop .x-nav > li > a {
	padding-left: 0.85em !important;
	padding-right: 0.85em !important;
	transition: color 0.15s ease;
}

.x-navbar-inner {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.x-dropdown {
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
	padding: 0.5em 0 !important;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.x-dropdown .x-anchor {
	padding: 0.65em 1.25em !important;
	font-size: 0.85em;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.x-dropdown .x-anchor:hover {
	background-color: rgba(var(--sb-accent-rgb), 0.08);
	color: var(--sb-accent) !important;
}

.x-dropdown .x-anchor-text-primary {
	color: inherit;
}

/* Mobile menu toggle: a touch more presence and a rounded, tappable feel. */
.x-btn-navbar {
	border-radius: 6px;
	transition: background-color 0.15s ease;
}

/* Modern button treatment, applied globally: subtle lift + shadow on
   hover so every button on the site (nav, forms, CTA pairs, "Get
   Started", footer) feels tactile instead of a flat rectangle. Colour,
   radius, and padding stay fully Customizer-driven — this only adds
   the motion/depth layer on top. */
.x-anchor.x-anchor-button,
.x-btn,
.forminator-button {
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.x-anchor.x-anchor-button:hover,
.x-btn:hover,
.forminator-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.x-anchor.x-anchor-button:active,
.x-btn:active,
.forminator-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Hero heading box: the SafeBridge headline is longer than the original
   captured design's, so it must actively shrink to fit — kept to a single
   line at every breakpoint via fluid, viewport-scaled font-size rather
   than wrapping or overflowing the box. */
.e14-e5.me-j,
.e14-e5.me-j .x-text-content,
.e14-e5.me-j .x-text-content-text {
	max-width: 100%;
	box-sizing: border-box;
}

.e14-e5.me-j .x-text-content-text-primary {
	white-space: nowrap;
	font-size: clamp(21px, 2.4vw, var(--sb-hero-heading-size, 43px)) !important;
}

/* Below tablet width there's no font size that both stays legible and
   keeps this headline on one line — let it wrap back to two lines rather
   than shrink past readability. */
@media (max-width: 575px) {
	.e14-e5.me-j .x-text-content-text-primary {
		white-space: normal;
		font-size: 1.5rem !important;
		line-height: 1.25;
	}
}

/* Hero editability: background colour, overlay colour/opacity, and text
   colour are all Customizer-driven (Homepage Sections > Hero Banner)
   rather than fixed in the captured markup. */
#cs-content > .x-section:first-child {
	background-color: var(--sb-hero-bg) !important;
}

.e14-e5.me-j {
	background-color: rgba(var(--sb-hero-overlay-rgb), var(--sb-hero-overlay-opacity)) !important;
}

.e14-e5.me-j .x-text-content-text-primary {
	color: var(--sb-hero-text) !important;
}

.safebridge-hero-content {
	color: var(--sb-hero-text);
	text-align: center;
	margin-top: 1em;
}

.safebridge-hero-content:empty {
	display: none;
}

/* Service Charge pricing block: plain body text on the page's white
   background (the class it would otherwise inherit is styled white-on-dark
   for the photo hero above it, which is invisible here). */
.safebridge-service-charge-text {
	color: var(--sb-text);
	font-family: var(--sb-font-body);
	line-height: 1.7;
}

.safebridge-service-charge-text ul {
	margin: 0.5em 0 1.25em;
	padding-left: 1.25em;
}

.safebridge-service-charge-text strong {
	color: var(--sb-heading);
}

.safebridge-resources-directory strong {
	display: block;
	color: var(--sb-heading);
	font-family: var(--sb-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
}

.safebridge-resources-directory p:first-child strong {
	margin-top: 0;
}

.safebridge-resources-directory a {
	color: var(--sb-accent);
}

/* Safe editing: long admin-entered text wraps instead of overflowing,
   images never exceed their container, and a missing/cleared background
   image falls back to a brand-coloured tint instead of empty white. */
.x-text-content-text-primary,
.x-text-content-text-subheadline,
.x-content,
.x-anchor-text-primary {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.entry-content img,
.safebridge-service-card-image img,
.wp-block-image img {
	max-width: 100%;
	height: auto;
}

.x-bg-layer-lower-image,
.x-bg-layer-upper-image {
	background-color: var(--sb-primary);
}

.safebridge-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}

.safebridge-service-card {
	background: var(--sb-background, #fff);
	border: 1px solid var(--sb-border, #e0e0e0);
	border-radius: 12px;
	padding: 1.75rem;
	text-align: center;
}

.safebridge-service-card-image {
	margin: -1.75rem -1.75rem 1rem;
	overflow: hidden;
	border-radius: 12px 12px 0 0;
}

.safebridge-service-card-image img {
	width: 100%;
	height: auto;
	display: block;
}

.safebridge-service-card-icon {
	display: inline-block;
	font-size: 2rem;
	width: 1em;
	height: 1em;
	color: var(--sb-accent);
	margin-bottom: 0.5rem;
}

.safebridge-service-card-title {
	font-family: var(--sb-font-heading);
	color: var(--sb-heading);
	margin-bottom: 0.5rem;
}

.safebridge-service-card-text {
	color: var(--sb-text);
	line-height: 1.6;
}

.safebridge-extra-services {
	padding: 4% 0;
}

.safebridge-section-btn {
	display: inline-block;
	margin-top: 1.5rem;
}

.safebridge-cta-container {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.safebridge-cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.safebridge-cta-btn.x-anchor.x-anchor-button {
	position: relative;
}

/* Services page: the generic builder section padding leaves large gaps
   between the hero image and "Our Process", and between "Our Process"
   and "Changeover Facilitation" — tighten both so content sits closer
   together, scoped to this page's own generated classes only. */
.e35-e5.mz-1.x-section {
	padding-bottom: 4% !important;
}

.e35-e11.mz-2.x-section {
	padding-top: 20px !important;
}

.e35-e11.mz-3.x-section {
	padding-bottom: 20px !important;
}

.e35-e22.mz-4.x-section {
	padding-top: 10px !important;
}

/* Resources page: same tightening as Services — less gap between the
   hero image and the FAQ block, and less gap between the CTA buttons
   and the footer. */
.e32-e5.mw-1.x-section {
	padding-bottom: 4% !important;
}

.e32-e11.mw-2.x-section {
	padding-top: 10px !important;
	padding-bottom: 20px !important;
}

/* Resources page: a little breathing room between the last FAQ accordion
   item and the "Resources & Support Directory" heading right below it —
   they were touching directly. */
#x-acc-e32-e15 {
	margin-bottom: 2rem !important;
}

/* Contact Us page: same tightening — less gap between the hero image and
   the office-hours/form block, and less gap between the CTA buttons
   (moved here from a bespoke two-column "Forms" block) and the footer. */
.e37-e5.m11-1.x-section {
	padding-bottom: 4% !important;
}

.e37-e11.m11-2.x-section {
	padding-top: 20px !important;
}

.e37-e11.m11-3.x-section {
	padding-bottom: 20px !important;
}

.e37-e17.m11-4.x-section {
	padding-top: 10px !important;
	padding-bottom: 20px !important;
}

/* Apply Now page: less gap between the hero image and the application
   form, and less gap between the Submit button and the footer (both
   controlled by the same section's top/bottom padding). */
.e78-e5.m26-1.x-section {
	padding-bottom: 4% !important;
}

.e78-e11.m26-2.x-section {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

/* Services Agreement page: less gap between the hero image and the
   agreement text, and less gap between the "I Consent" / submit area
   and the footer. */
.e87-e5.m2f-1.x-section {
	padding-bottom: 4% !important;
}

.e87-e11.m2f-2.x-section {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

/* Services Agreement page: the long legal/procedures text block renders
   each paragraph and list item with the base theme's generous default
   spacing (~21px between every line). Tighten it so the many short
   paragraphs and bullet points read as one dense reference doc instead
   of a long scroll of mostly whitespace. */
.e87-e14 p {
	margin-bottom: 0.5em !important;
}

.e87-e14 ul,
.e87-e14 ol {
	margin-top: 0;
	margin-bottom: 0.75em;
}

.e87-e14 li {
	margin-bottom: 0.25em;
}

.e87-e14 li p {
	margin-bottom: 0 !important;
}

/* For Parents page: same tightening as the other inner pages. */
.e28-e5.ms-1.x-section {
	padding-bottom: 4% !important;
}

.e28-e11.ms-2.x-section {
	padding-top: 20px !important;
}

.e28-e11.ms-3.x-section {
	padding-bottom: 20px !important;
}

.e28-e22.ms-4.x-section {
	padding-top: 10px !important;
}

/* Apply Now form: plain informational "examples may include" bullet
   lists (not actual fields) — a little tighter and dimmer than the
   surrounding field labels so they read as hints, not questions. */
.safebridge-an-examples {
	margin: 0.5em 0 1.25em;
	padding-left: 1.25em;
	color: var(--sb-text);
	font-size: 0.92em;
	opacity: 0.85;
	columns: 2;
	column-gap: 2em;
}

.safebridge-an-examples li {
	margin-bottom: 0.35em;
	break-inside: avoid;
}

@media (max-width: 600px) {
	.safebridge-an-examples {
		columns: 1;
	}
}

/* Conditional Yes/No-triggered blocks (medical details, allergy types,
   Parent A/B Solicitor sections) — toggled via the [hidden] attribute by
   apply-now-scripts.html. The theme's own .forminator-row{display:...}
   rule outranks the browser's built-in "[hidden]{display:none}" default
   (an author stylesheet always beats a user-agent one), so without this
   override every conditional block would show up already-expanded. */
[hidden] {
	display: none !important;
}

.safebridge-cta-btn .x-anchor-content {
	padding-left: 1.75em;
	padding-right: 1.75em;
}

.safebridge-social-links {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.safebridge-social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
}

.safebridge-social-links a i {
	font-family: "FontAwesomeBrands" !important;
	font-size: 1em;
}

.safebridge-contact-map {
	width: 100%;
	max-width: 480px;
	height: 300px;
	border: 0;
	display: block;
	margin-top: 1rem;
}

/* Team / Testimonials homepage sections — off by default, styled to
   match the rest of the brand-driven card system when an admin turns
   them on. */
.safebridge-cpt-section { padding: 4% 0; }

.safebridge-team-grid,
.safebridge-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}

.safebridge-team-card {
	background: var(--sb-background, #fff);
	border: 1px solid var(--sb-border, #e0e0e0);
	border-radius: 12px;
	padding: 1.75rem;
	text-align: center;
}

.safebridge-team-card-image {
	width: 140px;
	height: 140px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	overflow: hidden;
}

.safebridge-team-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.safebridge-team-card-name {
	font-family: var(--sb-font-heading);
	color: var(--sb-heading);
	margin-bottom: 0.25rem;
}

.safebridge-team-card-role {
	color: var(--sb-accent);
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.safebridge-team-card-bio {
	color: var(--sb-text);
	line-height: 1.6;
}

.safebridge-testimonial-card {
	background: var(--sb-background, #fff);
	border: 1px solid var(--sb-border, #e0e0e0);
	border-radius: 12px;
	padding: 1.75rem;
}

.safebridge-testimonial-card-rating {
	color: var(--sb-accent);
	font-size: 1.1rem;
	letter-spacing: 0.15em;
	margin-bottom: 0.75rem;
}

.safebridge-testimonial-card-quote {
	color: var(--sb-text);
	line-height: 1.6;
	font-style: italic;
	margin-bottom: 1rem;
}

.safebridge-testimonial-card-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.safebridge-testimonial-card-author img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.safebridge-testimonial-card-name {
	font-family: var(--sb-font-heading);
	color: var(--sb-heading);
	font-weight: 600;
	display: block;
}

.safebridge-testimonial-card-role {
	color: var(--sb-text);
	font-size: 0.9em;
	display: block;
}

/* ==========================================================================
   Apply Now form — the "Child Information & Care Requirements" form is 17
   sections long; the base Forminator styling renders its section headings
   at ~48px with 20px between every single row, which reads as oversized
   and sprawling at that length. Tightened and restyled to a clean,
   professional, brand-matched look, using the site's own colour/font
   variables so it stays consistent with everything else. Everything here
   is scoped to #forminator-module-safebridge-apply-now-form so no other page is affected.
   ========================================================================== */

/* Non-functional Forminator preview placeholder (empty div + <br/> that
   sits before the real <form>) — was adding an extra blank line of space
   between the "Application form" heading and the form itself. */
#safebridge-apply-now-form[data-forminator-render="0"] {
	display: none;
}

#forminator-module-safebridge-apply-now-form {
	max-width: 760px;
	margin-top: 8px !important;
}

/* Section headings — was inheriting the browser's plain ~48px h2 default;
   now a proper, smaller sub-heading, clearly separated from the section
   before it. No underline/border accent — headings are set apart by
   size, weight, and colour alone. */
#forminator-module-safebridge-apply-now-form .forminator-title {
	font-family: var(--sb-font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--sb-primary);
	letter-spacing: 0.01em;
	margin: 0;
}

#forminator-module-safebridge-apply-now-form .safebridge-an-section {
	margin-top: 2.25em;
	margin-bottom: 1em !important;
}

#forminator-module-safebridge-apply-now-form .safebridge-an-section:first-of-type {
	margin-top: 0;
}

/* Row rhythm — 20px between every row of a form this long adds up to a
   lot of scrolling; tightened to a still-comfortable but denser spacing. */
#forminator-module-safebridge-apply-now-form .forminator-row {
	margin-bottom: 12px !important;
}

#forminator-module-safebridge-apply-now-form .forminator-field {
	margin-bottom: 0;
}

#forminator-module-safebridge-apply-now-form .forminator-label {
	font-family: var(--sb-font-body);
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--sb-heading);
	margin-bottom: 0.4em;
}

/* Intro/example paragraphs under a section heading (not real fields) —
   a touch smaller and softer than field labels so the hierarchy reads
   correctly: heading, then hint text, then the actual question. */
#forminator-module-safebridge-apply-now-form .forminator-field > p {
	color: var(--sb-text);
	font-size: 0.95em;
	line-height: 1.6;
	margin: 0 0 0.5em;
}

/* Inputs and textareas — consistent rounded corners, brand border
   colour, and a visible accent-coloured focus state instead of the
   default flat blue browser outline. */
#forminator-module-safebridge-apply-now-form .forminator-input,
#forminator-module-safebridge-apply-now-form .forminator-textarea {
	border-color: var(--sb-border);
	border-radius: 6px;
	padding: 0.65em 0.8em;
	font-family: var(--sb-font-body);
	font-size: 0.95rem;
	color: var(--sb-text);
	background-color: #fff;
}

#forminator-module-safebridge-apply-now-form .forminator-input:focus,
#forminator-module-safebridge-apply-now-form .forminator-textarea:focus {
	border-color: var(--sb-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--sb-accent-rgb), 0.18);
}

#forminator-module-safebridge-apply-now-form .forminator-textarea {
	--forminator-textarea-min-height: 90px;
}

/* Radio/checkbox options — a little breathing room between stacked
   options, and the selected state uses the brand accent colour instead
   of Forminator's default blue. */
#forminator-module-safebridge-apply-now-form .forminator-radio,
#forminator-module-safebridge-apply-now-form .forminator-checkbox {
	margin-bottom: 0.5em;
	font-size: 0.95rem;
	color: var(--sb-text);
}

#forminator-module-safebridge-apply-now-form .forminator-radio-bullet,
#forminator-module-safebridge-apply-now-form .forminator-checkbox-box {
	border-color: var(--sb-border);
}

#forminator-module-safebridge-apply-now-form input:checked + .forminator-radio-bullet,
#forminator-module-safebridge-apply-now-form input:checked + .forminator-checkbox-box {
	border-color: var(--sb-accent);
}

#forminator-module-safebridge-apply-now-form .forminator-radio-bullet:before {
	background-color: var(--sb-accent);
}

#forminator-module-safebridge-apply-now-form .forminator-checkbox-box:before {
	color: var(--sb-accent);
}

/* Consent checkboxes (Declaration) — the long legal text reads better a
   touch smaller and tighter than a regular field label. */
#forminator-module-safebridge-apply-now-form .forminator-consent__label p {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--sb-text);
	margin: 0;
}

/* Submit button — was fully transparent (no background at all) under
   the base Forminator styles; now matches the site's real buttons. */
#forminator-module-safebridge-apply-now-form .forminator-button-submit {
	background-color: var(--sb-button-bg);
	color: var(--sb-button-text);
	font-family: var(--sb-font-button);
	font-size: 1rem;
	font-weight: 600;
	padding: 0.75em 2em;
	letter-spacing: 0.02em;
}

#forminator-module-safebridge-apply-now-form .forminator-row-last {
	margin-top: 1.5em;
}

/* No underlines anywhere on this form — including the Terms and
   Conditions / Privacy Policy links, which the site's base styles
   otherwise underline like any other link. */
#forminator-module-safebridge-apply-now-form a {
	text-decoration: none;
}

#forminator-module-safebridge-apply-now-form a:hover {
	text-decoration: none;
	color: var(--sb-accent-dark);
}

/* Terms and Conditions / Privacy Policy consent — smaller than the rest
   of the page's text since it's boilerplate legal wording, not a real
   question. */
#forminator-module-safebridge-apply-now-form .safebridge-an-legal-consent p {
	font-size: 0.8rem;
}

#forminator-module-safebridge-apply-now-form .safebridge-an-legal-consent a {
	color: var(--sb-accent);
	font-weight: 600;
}

/* File upload — a real, clickable file input styled to match the site's
   buttons, with the chosen file name(s) shown next to it (see the
   change-listener in apply-now-scripts.html). */
#forminator-module-safebridge-apply-now-form .forminator-upload {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75em;
}

#forminator-module-safebridge-apply-now-form .safebridge-an-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

#forminator-module-safebridge-apply-now-form .forminator-upload .forminator-button {
	cursor: pointer;
	display: inline-block;
	background-color: var(--sb-primary);
	color: #fff;
	border-radius: 6px;
	padding: 0.6em 1.4em;
	font-family: var(--sb-font-button);
	font-size: 0.9rem;
	font-weight: 600;
}

#forminator-module-safebridge-apply-now-form .forminator-upload .forminator-button:hover {
	background-color: var(--sb-primary-dark);
}

#forminator-module-safebridge-apply-now-form .safebridge-an-file-input:focus-visible + .forminator-button {
	outline: 2px solid var(--sb-accent);
	outline-offset: 2px;
}

#forminator-module-safebridge-apply-now-form .safebridge-an-file-list {
	font-size: 0.85rem;
	color: var(--sb-text);
}

/* ==========================================================================
   Legal pages (Terms and Conditions, Privacy Policy) — no captured hero
   image for these two (the original site had none either), just a clean
   heading + the approved legal text, tightly spaced like the Services
   Agreement legal copy.
   ========================================================================== */
.safebridge-legal-page {
	padding: 1.25em 0 2.5em;
}

.safebridge-legal-title {
	font-family: var(--sb-font-heading);
	color: var(--sb-heading);
	font-size: 2rem !important;
	margin: 0 0 0.5em !important;
}

.safebridge-legal-content {
	color: var(--sb-text);
	font-family: var(--sb-font-body);
	font-size: 16px;
	line-height: 1.55;
	max-width: 820px;
}

.safebridge-legal-content strong {
	color: var(--sb-heading);
	display: block;
	margin-top: 1em;
	margin-bottom: 0.2em;
	font-size: 1.05em;
}

.safebridge-legal-content p:first-child strong {
	margin-top: 0;
}

.safebridge-legal-content p {
	margin: 0 0 0.4em;
}

.safebridge-legal-content ul,
.safebridge-legal-content ol {
	margin: 0 0 0.5em;
	padding-left: 1.25em;
}

.safebridge-legal-content li {
	margin-bottom: 0.15em;
}

.safebridge-legal-content a {
	color: var(--sb-accent);
}

/* ==========================================================================
   jQuery UI datepicker — the theme ships the datepicker's JS and a set of
   Forminator-brand header/calendar decoration rules, but never the base
   positioning/box CSS jQuery UI itself normally provides. Without it, the
   popup calendar has no position:absolute and no display:none default, so
   it renders as a full-width static block wherever it lands in the page,
   overlapping whatever content follows the date field. This is that
   missing base layer, plus brand colours for the header/selected day.
   ========================================================================== */
.ui-datepicker {
	display: none;
	position: absolute;
	z-index: 9999;
	width: 17em;
	padding: 0.5em;
	background: #fff;
	border: 1px solid var(--sb-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	font-family: var(--sb-font-body);
	font-size: 0.85rem;
}

.ui-datepicker .ui-datepicker-header {
	background: var(--sb-primary);
	color: #fff;
	border-radius: 4px;
}

.ui-datepicker .ui-datepicker-title {
	color: #fff;
	font-weight: 600;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 8px;
	width: 1.6em;
	height: 1.6em;
	cursor: pointer;
	color: #fff;
	text-indent: -9999px;
}

.ui-datepicker .ui-datepicker-prev {
	left: 6px;
}

.ui-datepicker .ui-datepicker-next {
	right: 6px;
}

.ui-datepicker .ui-datepicker-prev:before {
	content: "\2039";
	text-indent: 0;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3em;
}

.ui-datepicker .ui-datepicker-next:before {
	content: "\203a";
	text-indent: 0;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3em;
}

.ui-datepicker table {
	width: 100%;
	font-size: 0.9em;
	border-collapse: collapse;
	margin: 0.5em 0 0;
}

.ui-datepicker th {
	padding: 0.5em 0.2em;
	text-align: center;
	font-weight: 600;
	color: var(--sb-heading);
}

.ui-datepicker td {
	padding: 1px;
	border: 0;
}

.ui-datepicker td a,
.ui-datepicker td span {
	display: block;
	padding: 0.4em;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
	color: var(--sb-text);
}

.ui-datepicker td a:hover {
	background: rgba(var(--sb-accent-rgb), 0.12);
}

.ui-datepicker td .ui-state-active {
	background: var(--sb-accent);
	color: #fff;
}

.ui-datepicker-calendar .ui-datepicker-today a {
	border: 1px solid var(--sb-accent);
}

/* The little calendar icon inside the Date of Birth field itself (not the
   popup) — was rendering oversized relative to the input text next to it. */
.forminator-input-with-icon .forminator-icon-calendar {
	font-size: 0.85em;
}