/**
 * COD Cambridge - Share a Prayer or Testimony page (/share-prayer/)
 *
 * Styles Fluent Form 7 (Share a Prayer or Testimony) and Fluent Form 8 (Private Prayer & Support) so they feel native to the COD site. Presentation only: no markup, logic,
 * fields or JavaScript are changed.
 *
 * COD design system only:
 *   green #154734 · lime #C7EA46 · off-white #E5E1DA · dark #101512 · page #F4F2ED
 *   radius 12 / 24 / pill · Gotham (gotham-black)
 * Everything is scoped to :is(.fluentform_wrapper_7, .fluentform_wrapper_8) and deliberately specific (form.frm-fluent-form.ffs_default ...)
 * so it beats the Fluent Forms default preset (blue accents) whatever order the stylesheets load in.
 */

/* ---------- Form wrapper ---------- */

:is(.fluentform_wrapper_7, .fluentform_wrapper_8).fluentform {
	--fluentform-primary: #154734;
	--fluentform-secondary: #154734;
	--ff-primary: #154734;
	font-family: gotham-black, sans-serif;
	color: #101512;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default {
	font-family: gotham-black, sans-serif;
}

/* ---------- Field spacing and labels ---------- */

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-group {
	margin-bottom: 30px;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-input--label {
	margin-bottom: 8px;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-input--label label {
	color: #101512;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--cod-green, #154734);
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-help-message {
	margin-top: 6px;
	color: rgba(16, 21, 18, 0.68);
	font-size: 13.5px;
	line-height: 1.5;
	letter-spacing: 0;
}

/* ---------- Text inputs, textarea, select ---------- */

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-control,
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default select.ff-el-form-control {
	width: 100%;
	padding-top: 14px;
	padding-bottom: 14px;
	border: 1px solid rgba(21, 71, 52, 0.25);
	border-radius: 12px;
	background-color: #fff;
	box-shadow: none;
	color: #101512;
	font-family: gotham-black, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-control:not(.iti__search-input) {
	padding-left: 16px;
	padding-right: 16px;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default textarea.ff-el-form-control {
	min-height: 200px;
	line-height: 1.55;
	resize: vertical;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-control::placeholder {
	color: rgba(16, 21, 18, 0.45);
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-control:hover {
	border-color: rgba(21, 71, 52, 0.5);
}

/* Focus: dark-green border with a soft lime ring. */
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-control:focus,
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-control:focus-visible {
	border-color: var(--cod-green, #154734);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(199, 234, 70, 0.6);
	color: #101512;
	outline: none;
}

/* Phone field (intl-tel-input): keep its own flag padding, full width. */
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) .iti {
	display: block;
	width: 100%;
}

/* ---------- Radio & checkbox options: quiet "choice" chips ---------- */

/* Prayer/Testimony, Display As and contact method: options sit in a wrapping row. */
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-input--content:has(.ff-el-form-check-radio),
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-input--content:has(.ff-el-form-check-checkbox) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check {
	display: block;
	margin: 0;
	padding: 0;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 18px;
	border: 1px solid rgba(21, 71, 52, 0.25);
	border-radius: 12px;
	background: #fff;
	color: #101512;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check-label:hover {
	border-color: rgba(21, 71, 52, 0.55);
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check-input {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--cod-green, #154734);
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	accent-color: var(--cod-green, #154734);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

/* Checkboxes: rounded square. */
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check-input.ff-el-form-check-checkbox,
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check-input.ff_gdpr_field {
	border-radius: 6px;
}

/* Checked: solid dark green. Radio shows an off-white dot, checkbox an off-white tick. */
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check-input:checked {
	border-color: var(--cod-green, #154734);
	background-color: var(--cod-green, #154734);
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check-input.ff-el-form-check-radio:checked {
	background-image: radial-gradient(circle, #E5E1DA 0 34%, transparent 38%);
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check-input.ff-el-form-check-checkbox:checked,
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check-input.ff_gdpr_field:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%23E5E1DA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* Selected option: green border and a light lime tint (the filled radio/tick keeps it non-colour-only). */
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check-label:has(input:checked) {
	border-color: var(--cod-green, #154734);
	background: #ECF0DA;
	font-weight: 700;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check-label:has(input:focus-visible) {
	outline: 2px solid var(--cod-green, #154734);
	outline-offset: 2px;
}

/* Consent: a full-width, softly tinted panel. */
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-tc {
	width: 100%;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-tc .ff-el-form-check-label {
	align-items: flex-start;
	width: 100%;
	padding: 16px 18px;
	background: rgba(199, 234, 70, 0.14);
	font-weight: 500;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-tc .ff-el-form-check-label:has(input:checked) {
	background: #ECF0DA;
	font-weight: 500;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-tc .ff_tc_checkbox {
	display: inline-flex;
	flex: 0 0 auto;
	padding: 2px 0 0;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff_t_c {
	color: #101512;
	font-size: 15.5px;
	line-height: 1.55;
}

/* The first-name explanation inside the consent line (span added in the field's text): secondary, on its own line. */
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) .cod-sp-consent-note {
	display: block;
	margin-top: 4px;
	color: rgba(16, 21, 18, 0.68);
	font-size: 13.5px;
	line-height: 1.5;
}

/* Help-text (i) icons: soft green instead of the Fluent Forms blue. */
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) .ff-el-tooltip,
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) .ff-el-tooltip svg,
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) .ff-el-tooltip svg path {
	color: rgba(21, 71, 52, 0.75);
	fill: rgba(21, 71, 52, 0.75);
}

/* ---------- Errors ---------- */

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-is-error .ff-el-form-control {
	border-color: #b3261e;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .error.text-danger,
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-is-error .text-danger {
	margin-top: 6px;
	color: #b3261e;
	font-size: 14px;
	line-height: 1.4;
}

/* ---------- Submit button: dark green pill ---------- */

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff_submit_btn_wrapper {
	margin-top: 8px;
	margin-bottom: 0;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff_submit_btn_wrapper .ff-btn-submit,
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff_submit_btn_wrapper .ff-btn-submit:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 36px;
	border: 1.5px solid var(--cod-green, #154734);
	border-radius: 999px;
	background: var(--cod-green, #154734);
	box-shadow: none;
	color: var(--cod-offwhite, #E5E1DA);
	font-family: gotham-black, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.2px;
	text-transform: none;
	cursor: pointer;
	opacity: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff_submit_btn_wrapper .ff-btn-submit:hover {
	border-color: var(--cod-green-dark, #0F3A2A);
	background: var(--cod-green-dark, #0F3A2A);
	color: var(--cod-offwhite, #E5E1DA);
	opacity: 1;
}

/* Keyboard focus: lime inner ring plus a dark-green outer ring (clear on the light page background). */
:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff_submit_btn_wrapper .ff-btn-submit:focus {
	outline: none;
	background: var(--cod-green, #154734);
	color: var(--cod-offwhite, #E5E1DA);
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff_submit_btn_wrapper .ff-btn-submit:focus-visible {
	outline: 2px solid var(--cod-green, #154734);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--cod-lime, #C7EA46);
}

/* ---------- Confirmation message ---------- */

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) .ff-message-success {
	margin: 0;
	padding: 28px 30px;
	border: 1px solid rgba(21, 71, 52, 0.25);
	border-radius: 24px;
	background: #ECF0DA;
	box-shadow: none;
	color: var(--cod-green, #154734);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.55;
}

:is(.fluentform_wrapper_7, .fluentform_wrapper_8) .ff-message-success p {
	margin: 0;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-group {
		margin-bottom: 24px;
	}

	/* Options fill the row so labels wrap cleanly and stay easy to tap. */
	:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check {
		flex: 1 1 100%;
	}

	:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff_submit_btn_wrapper .ff-btn-submit {
		width: 100%;
	}

	:is(.fluentform_wrapper_7, .fluentform_wrapper_8) .ff-message-success {
		padding: 22px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-control,
	:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff-el-form-check-label,
	:is(.fluentform_wrapper_7, .fluentform_wrapper_8) form.frm-fluent-form.ffs_default .ff_submit_btn_wrapper .ff-btn-submit {
		transition: none;
	}
}

/* ---------- Page brand motif (Share a Prayer page 19732) ----------
 * The City of David icon-only mark ("Logo-icon.svg" as a CSS mask in COD green, ~3.3% opacity) used as an
 * architectural background through the right side of the page: very large, cropped by the right edge, its
 * visual centre ~60% down the page body (around the middle of the form). Behind all
 * content (inputs have opaque white backgrounds), clipped at the page wrapper (never reaches header or
 * footer), decorative only. The selector uses the Elementor element id of the page wrapper (99b1141).
 */
.elementor-element-99b1141 {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.elementor-element-99b1141::after {
	--cod-sp-motif: min(80vw, 1150px);
	content: "";
	position: absolute;
	z-index: -1;
	top: 45%; /* visual centre ~60% down the page body, i.e. around the middle of the form */
	transform: translateY(-50%);
	right: calc(var(--cod-sp-motif) * -0.32);
	left: auto;
	width: var(--cod-sp-motif);
	height: var(--cod-sp-motif);
	background-color: var(--cod-green, #154734);
	opacity: 0.033;
	-webkit-mask: url("/wp-content/uploads/2026/05/Logo-icon.svg") no-repeat center / contain;
	mask: url("/wp-content/uploads/2026/05/Logo-icon.svg") no-repeat center / contain;
	pointer-events: none;
}

@media (max-width: 1024px) {
	.elementor-element-99b1141::after {
		--cod-sp-motif: 92vw;
		top: 45%;
		right: calc(var(--cod-sp-motif) * -0.36);
	}
}

@media (max-width: 767px) {
	.elementor-element-99b1141::after {
		--cod-sp-motif: 400px;
		top: 45%;
		right: -220px;
		opacity: 0.028;
	}
}

/* Link hover accents (support card link + "View the Prayer Wall"): the same behaviour as "Explore the Prayer Wall →"
 * on the Prayer page. Text stays dark green with a thin green underline in every state (the site kit's global link
 * hover colour is overridden on the <a> itself); on hover / keyboard focus a lime highlight bar appears behind the
 * underline. No movement. The links are Elementor V4 paragraphs, which have no element-id class, so they are matched
 * by data-id: 5938d720 = "Private Prayer & Support", 52ce3a5e = "View the Prayer Wall". */
.elementor [data-id="5938d720"] a,
.elementor [data-id="5938d720"] a:hover,
.elementor [data-id="5938d720"] a:focus,
.elementor [data-id="52ce3a5e"] a,
.elementor [data-id="52ce3a5e"] a:hover,
.elementor [data-id="52ce3a5e"] a:focus {
	color: var(--cod-green, #154734);
	text-decoration: underline;
	text-decoration-color: var(--cod-green, #154734);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	background-image: linear-gradient(var(--cod-lime, #C7EA46), var(--cod-lime, #C7EA46));
	background-repeat: no-repeat;
	background-position: 0 92%;
	background-size: 0 6px;
}

.elementor [data-id="5938d720"] a:hover,
.elementor [data-id="5938d720"] a:focus-visible,
.elementor [data-id="52ce3a5e"] a:hover,
.elementor [data-id="52ce3a5e"] a:focus-visible {
	background-size: 100% 6px;
}

.elementor [data-id="5938d720"] a:focus-visible,
.elementor [data-id="52ce3a5e"] a:focus-visible {
	outline: 2px solid var(--cod-green, #154734);
	outline-offset: 3px;
}