/**
 * Footer newsletter subscribe form layout.
 * The <form> element (e-form) itself isn't a stylable atomic container via
 * the builder, so its row/wrap layout is scoped here by data-id instead —
 * everything else (fields, checkbox, button) is styled natively in Elementor.
 */

[data-id="d59661e"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	width: 100%;
}

/* DOM order is: 3 inputs, checkbox row, submit button — but the checkbox
 * row needs to visually come LAST (its own full-width line below), so the
 * submit button is reordered to sit right after the inputs instead. */
[data-id="95dd144"] { order: 1 !important; }
[data-id="94c5b5c"] { order: 2 !important; }

/* Native <input> elements have a default white background-color that isn't
 * cleared by the atomic background-image overlay, so the intended frosted
 * glass tint was rendering as solid white. Covers both the desktop-only
 * copy of this form (6a7b646/1812881/e4f36fb) and the separate mobile-only
 * copy (249f765/cd94216/4719875) — the footer duplicates the whole form
 * per breakpoint rather than resizing one shared instance. */
[data-id="6a7b646"],
[data-id="1812881"],
[data-id="e4f36fb"],
[data-id="249f765"],
[data-id="cd94216"],
[data-id="4719875"] {
	background-color: transparent !important;
	-webkit-backdrop-filter: blur(8px);
	min-width: 0 !important;
}

/* Privacy Policy link inside the consent label — white + underlined to
 * match the surrounding text instead of the browser's default blue link.
 * Covers both the desktop-only (5468f09) and mobile-only (a5c7582) copies
 * of the consent label. */
[data-id="5468f09"] a,
[data-id="a5c7582"] a {
	color: #FFFFFF;
	text-decoration: underline;
}

/* Branded arrow icon on the Subscribe button (both the desktop-only
 * 95dd144 and mobile-only 4de5243 copies) — same SVG asset used site-wide
 * for every other CTA/submit button, added as a sized ::after background
 * image so no icon markup/control is needed on this atomic widget (it has
 * no icon control at all, only a plain text field). */
[data-id="95dd144"],
[data-id="4de5243"] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

[data-id="95dd144"]::after,
[data-id="4de5243"]::after {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 20px;
	height: 10px;
	background-image: url("https://sea-sky.digitalfolddevelopment.co.za/wp-content/uploads/2026/07/Arrow-SeaSky.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

@media (max-width: 767px) {
	[data-id="d59661e"] input {
		flex-basis: 100% !important;
	}
}

/* Checked-state visual feedback for every atomic form checkbox on the site
 * (Contact Us, Projects & Décor, this footer form). appearance:none strips
 * the native browser checkmark, so with no custom indicator the box gave no
 * sign it had been checked — clicking it looked broken even though the
 * underlying value was toggling correctly. */
.e-form-checkbox-base {
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.e-form-checkbox-base:checked {
	background-color: #F2705D !important;
	border-color: #F2705D !important;
}

/* Contact Us consent link — dark teal card background, white + underlined
 * to match the surrounding text (same treatment as the footer form). */
[data-id="cf-consent-text"] a {
	color: #FFFFFF;
	text-decoration: underline;
}

/* Projects & Décor consent link — white card background, uses the site's
 * aqua-turquoise link/accent color instead of the browser default blue. */
[data-id="fdb8f23"] a {
	color: #26A5B8;
	text-decoration: underline;
}

/* Placeholder text on every atomic form field site-wide (Property Owners
 * and Projects & Decor "Tell Us More" forms, plus any future ones sharing
 * these base classes) renders lighter than the field's own `color` because
 * Chrome/Firefox both dim ::placeholder opacity by default -- even though
 * the field color is already the brand navy (--blue-black, #021432). Force
 * full opacity so placeholders read as solid navy, matching the design. */
.e-form-input-base::placeholder,
.e-form-textarea-base::placeholder {
	color: #021432;
	opacity: 1;
}