:root {
	--modal-navy: var(--gbc-navy, #1d3557);
	--modal-navy-dark: var(--gbc-navy-dark, #10243c);
	--modal-red: var(--gbc-red, #c1121f);
	--modal-red-dark: var(--gbc-red-dark, #a0000a);
	--modal-heading: var(--gbc-navy-dark, #10243c);
	--modal-text: var(--gbc-text, #334155);
	--modal-muted: var(--gbc-muted, #64748b);
	--modal-border: var(--gbc-border, rgba(29, 53, 87, 0.12));
	--modal-surface: #ffffff;
	--modal-soft: var(--gbc-soft, #f8fafc);
	--modal-soft-blue: var(--gbc-soft-blue, #eef4fb);
	--modal-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
	--modal-radius: 24px;
}

@media (min-width: 768px) {
	html {
		scrollbar-gutter: stable;
	}
}

body.modal-open {
	overflow: hidden;
}


/* The legacy welcome prompt is embedded in an old Elementor HTML widget.
   Website Manager owns this feature now, so suppress the old copy even when
   the managed prompt is disabled. */
#gbcWelcomePopup,
#gbcWelcomePopup.active,
#gbcWelcomePopup[aria-hidden="true"],
#gbcWelcomePopup[aria-hidden="false"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.givetext {
	color: #ffffff !important;
	text-decoration: none !important;
}

.donatebtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 22px;
	border: 1px solid var(--modal-navy);
	border-radius: 999px;
	background: var(--modal-navy);
	color: #ffffff !important;
	font-weight: 800;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: 0 12px 24px rgba(29, 53, 87, 0.18);
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.donatebtn:hover,
.donatebtn:focus,
.donatebtn:focus-visible {
	background: var(--modal-navy-dark);
	border-color: var(--modal-navy-dark);
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 16px 30px rgba(29, 53, 87, 0.24);
	outline: 3px solid var(--gbc-brand-accent, #d8b45a);
	outline-offset: 3px;
}

.site-modal-overlay,
.site-modal-overlay *,
.site-modal-overlay *::before,
.site-modal-overlay *::after {
	box-sizing: border-box;
}

.site-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 90000;
	display: grid;
	place-items: center;
	padding: clamp(14px, 3vw, 32px);
	background:
		radial-gradient(circle at top, rgba(255, 255, 255, 0.14), transparent 34%),
		rgba(8, 15, 28, 0.70);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 220ms ease, visibility 220ms ease;
}

.site-modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.site-modal {
	position: relative;
	z-index: 90001;
	width: min(100%, 900px);
	max-width: min(92vw, 900px);
	max-height: min(86dvh, 820px);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: var(--modal-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94)), var(--modal-surface);
	box-shadow: var(--modal-shadow);
	color: var(--modal-text);
	transform: translateY(14px) scale(0.98);
	opacity: 0;
	transition: opacity 220ms ease, transform 220ms ease;
}

.site-modal::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--modal-red), rgba(193, 18, 31, 0.16));
}

.site-modal-overlay.is-open .site-modal {
	opacity: 1;
	transform: none;
}

.site-modal__header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 32px) 16px;
	border-bottom: 1px solid var(--modal-border);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92));
}

.site-modal__header h2 {
	margin: 0;
	color: var(--modal-heading);
	font-size: clamp(1.65rem, 3vw, 2.35rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.site-modal__body {
	max-height: calc(min(86dvh, 820px) - 90px);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: clamp(18px, 3vw, 30px) clamp(20px, 3vw, 32px) clamp(22px, 3vw, 34px);
}

.site-modal__body :where(p, li) {
	color: var(--modal-text);
}

.site-modal__close {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	margin: -6px -6px 0 0 !important;
	border: 1px solid rgba(29, 53, 87, 0.12) !important;
	border-radius: 999px !important;
	background: #ffffff !important;
	color: var(--modal-navy) !important;
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.site-modal__close svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	pointer-events: none;
}

.site-modal__close:hover,
.site-modal__close:focus,
.site-modal__close:focus-visible {
	background: var(--modal-soft-blue) !important;
	border-color: var(--modal-navy) !important;
	color: var(--modal-navy) !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 22px rgba(15, 23, 42, 0.12) !important;
	outline: 3px solid var(--gbc-brand-accent, #d8b45a);
	outline-offset: 3px;
}


/* When the secure giving form is launched from Tithe / Offering, visually
   suspend the outer site dialog. The payment modal remains visible because
   visibility is explicitly restored on the fixed child surface. */
#titheModal.has-payment-modal-open {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#titheModal.has-payment-modal-open > .site-modal {
  visibility: hidden;
  pointer-events: none;
  box-shadow: none;
}

#titheModal.has-payment-modal-open .usm-converge-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.prayer-modal {
	width: min(100%, 660px);
	max-width: min(92vw, 660px);
}

.prayer-intro {
	margin: 0 0 18px;
	font-size: 1rem;
	line-height: 1.65;
}

.prayer-highlight {
	margin: 0 0 18px;
	padding: 16px 18px;
	border: 1px solid rgba(193, 18, 31, 0.16);
	border-left: 5px solid var(--modal-red);
	border-radius: 16px;
	background: #fff7f8;
	color: var(--modal-heading);
	font-size: 0.94rem;
	line-height: 1.5;
}

.prayer-note {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--modal-border);
	border-radius: 14px;
	background: var(--modal-soft);
	color: var(--modal-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

.prayer-form-wrap {
	margin-top: 14px;
}

.prayer-form-wrap :where(input, textarea, select) {
	max-width: 100%;
}

#titheModal .site-modal {
	width: min(100%, 680px);
	max-width: min(92vw, 680px);
}

#titheModal .site-modal__body {
	padding-bottom: 0;
}

#titheModal .tithe-modal-content {
	display: grid;
	gap: 14px;
	color: var(--modal-text);
}

#titheModal .tithe-intro-card {
	display: grid;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--modal-border);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.96)), var(--modal-soft);
}

#titheModal .tithe-lead {
	margin: 0;
	color: var(--modal-heading);
	font-size: 1rem;
	line-height: 1.6;
}

#titheModal .tithe-primary-cta {
	justify-self: start;
}

#titheModal .tithe-accordion-list {
	display: grid;
	gap: 10px;
}

#titheModal .tithe-accordion {
	overflow: hidden;
	border: 1px solid var(--modal-border);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

#titheModal .tithe-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	cursor: pointer;
	list-style: none;
	color: var(--modal-heading);
	transition: background-color 160ms ease;
}

#titheModal .tithe-accordion summary::-webkit-details-marker {
	display: none;
}

#titheModal .tithe-accordion summary::after {
	content: "+";
	display: grid;
	place-items: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: rgba(29, 53, 87, 0.08);
	color: var(--modal-navy);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1;
	transition: background-color 160ms ease, transform 160ms ease;
}

#titheModal .tithe-accordion[open] summary {
	background: var(--modal-soft);
}

#titheModal .tithe-accordion[open] summary::after {
	content: "-";
	background: rgba(29, 53, 87, 0.14);
	transform: rotate(180deg);
}

#titheModal .tithe-accordion summary:hover,
#titheModal .tithe-accordion summary:focus-visible {
	background: var(--modal-soft);
	outline: none;
}

#titheModal .tithe-accordion summary span {
	display: grid;
	gap: 3px;
}

#titheModal .tithe-accordion summary strong {
	color: var(--modal-heading);
	font-size: 1rem;
	line-height: 1.25;
}

#titheModal .tithe-accordion summary small {
	color: var(--modal-muted);
	font-size: 0.82rem;
	line-height: 1.3;
}

#titheModal .tithe-panel {
	padding: 0 16px 16px;
}

#titheModal .tithe-panel p {
	margin: 0 0 10px;
	font-size: 0.95rem;
	line-height: 1.55;
}

#titheModal .tithe-panel p:last-child {
	margin-bottom: 0;
}

#titheModal .tithe-panel p strong {
	color: var(--modal-heading);
}

#titheModal .tithe-scripture,
#titheModal .tithe-support {
	padding: 12px;
	border: 1px solid var(--modal-border);
	border-radius: 12px;
	background: var(--modal-soft);
	font-size: 0.88rem;
}

#titheModal .tithe-support-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#titheModal .tithe-support-list li {
	position: relative;
	margin: 0;
	padding-left: 22px;
	font-size: 0.94rem;
	line-height: 1.45;
}

#titheModal .tithe-support-list li::before {
	content: "";
	position: absolute;
	top: 0.68em;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--modal-red);
	transform: translateY(-50%);
}

#titheModal .tithe-sticky-actions {
	position: sticky;
	bottom: 0;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	padding: 14px 0 clamp(18px, 3vw, 30px);
	background: linear-gradient(to top, rgba(255, 255, 255, 1) 76%, rgba(255, 255, 255, 0));
}

/* The sticky CTA is intentionally only a proxy button. The secure payment
   modal lives under .tithe-primary-cta so this sticky stacking context can
   never contain or constrain the fixed checkout surface. */
#titheModal .tithe-sticky-give {
	width: auto;
	max-width: 100%;
}

#ebulletinModal .site-modal {
	width: min(100%, 1040px);
	max-width: min(94vw, 1040px);
}

@media (max-width: 767px) {
	.site-modal-overlay {
		place-items: start center;
		padding: 10px;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(8, 15, 28, 0.74);
	}

	.site-modal-overlay,
	.site-modal {
		transition-duration: 140ms;
	}

	.site-modal {
		width: 100%;
		max-width: 100%;
		max-height: calc(100dvh - 20px);
		border-radius: 20px;
	}

	.site-modal__header {
		padding: 18px 18px 14px;
	}

	.site-modal__header h2 {
		font-size: 1.5rem;
	}

	.site-modal__body {
		max-height: calc(100dvh - 100px);
		padding: 18px;
	}

	.site-modal__close {
		width: 40px !important;
		height: 40px !important;
	}

	#titheModal .site-modal,
	#ebulletinModal .site-modal {
		width: 100%;
		max-width: 100%;
	}

	#titheModal .site-modal__body {
		padding: 18px 18px 0;
	}

	#titheModal .tithe-intro-card {
		padding: 16px;
	}

	#titheModal .tithe-primary-cta,
	#titheModal .tithe-sticky-actions .donatebtn {
		width: 100%;
		text-align: center;
	}

	#titheModal .tithe-support-list {
		grid-template-columns: 1fr;
	}

	#titheModal .tithe-sticky-actions {
		justify-content: stretch;
		padding-bottom: 18px;
	}

	#titheModal .tithe-sticky-give {
		display: flex;
		width: 100%;
		max-width: none;
		justify-content: center;
	}
}

@media (max-width: 600px) {
	#prayerRequestModal.site-modal-overlay {
		padding: 10px;
		overflow-y: auto;
	}

	#prayerRequestModal .site-modal.prayer-modal {
		width: 100%;
		max-width: 100%;
		max-height: calc(100dvh - 20px);
		border-radius: 16px;
		box-shadow: 0 14px 38px rgba(15, 23, 42, 0.22);
	}

	#prayerRequestModal .site-modal__header {
		padding: 14px 16px 10px;
		gap: 12px;
	}

	#prayerRequestModal .site-modal__header h2 {
		font-size: 1.38rem;
		line-height: 1.1;
		letter-spacing: -0.025em;
	}

	#prayerRequestModal .site-modal__close {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px;
		margin: -4px -4px 0 0 !important;
	}

	#prayerRequestModal .site-modal__close svg {
		width: 18px;
		height: 18px;
	}

	#prayerRequestModal .site-modal__body {
		max-height: calc(100dvh - 86px);
		padding: 0 16px 16px;
	}

	#prayerRequestModal .prayer-intro,
	#prayerRequestModal .prayer-note,
	#prayerRequestModal .prayer-highlight {
		font-size: 13px;
		line-height: 1.45;
		margin: 10px 0;
	}

	#prayerRequestModal .prayer-highlight,
	#prayerRequestModal .prayer-note {
		padding: 11px 12px;
		border-radius: 12px;
	}

	#prayerRequestModal .prayer-form-wrap {
		margin-top: 12px;
	}

	#prayerRequestModal .prayer-request-form {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	#prayerRequestModal .prayer-request-form .form-field,
	#prayerRequestModal .prayer-request-form .form-field p {
		margin: 0;
	}

	#prayerRequestModal .prayer-request-form label {
		display: block;
		margin-bottom: 5px;
		color: var(--modal-heading);
		font-size: 13px;
		font-weight: 800;
		line-height: 1.25;
	}

	#prayerRequestModal .prayer-request-form .optional {
		font-size: 11px;
		font-weight: 500;
	}

	#prayerRequestModal .prayer-request-form input[type="text"],
	#prayerRequestModal .prayer-request-form input[type="email"],
	#prayerRequestModal .prayer-request-form input[type="tel"],
	#prayerRequestModal .prayer-request-form select,
	#prayerRequestModal .prayer-request-form textarea {
		width: 100%;
		min-height: 42px;
		padding: 9px 11px;
		border: 1px solid var(--modal-border);
		border-radius: 10px;
		font-size: 14px;
		line-height: 1.35;
	}

	#prayerRequestModal .prayer-request-form textarea {
		min-height: 110px;
		max-height: 160px;
		resize: vertical;
	}

	#prayerRequestModal .prayer-request-form .wpcf7-radio {
		display: grid;
		gap: 7px;
	}

	#prayerRequestModal .prayer-request-form .wpcf7-list-item {
		display: block;
		margin: 0;
	}

	#prayerRequestModal .prayer-request-form .wpcf7-list-item label {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		margin: 0;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.35;
	}

	#prayerRequestModal .prayer-request-form input[type="radio"] {
		flex: 0 0 auto;
		margin-top: 2px;
	}

	#prayerRequestModal .prayer-request-form input[type="submit"] {
		width: 100%;
		min-height: 44px;
		margin-top: 4px;
		padding: 11px 16px;
		border: 1px solid var(--modal-red);
		border-radius: 999px;
		background: var(--modal-red);
		color: #ffffff;
		font-size: 14px;
	}

	#prayerRequestModal .prayer-request-form input[type="submit"]:hover,
	#prayerRequestModal .prayer-request-form input[type="submit"]:focus,
	#prayerRequestModal .prayer-request-form input[type="submit"]:focus-visible {
		border-color: var(--modal-red-dark);
		background: var(--modal-red-dark);
		color: #ffffff;
		outline: 3px solid var(--gbc-brand-accent, #d8b45a);
		outline-offset: 3px;
	}

	#prayerRequestModal .wpcf7-response-output {
		margin: 12px 0 0 !important;
		padding: 10px 12px !important;
		font-size: 13px;
		line-height: 1.4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-modal-overlay,
	.site-modal,
	.site-modal__close,
	.donatebtn,
	#titheModal .tithe-accordion summary,
	#titheModal .tithe-accordion summary::after {
		transition: none !important;
	}
}