/* ==========================================================================
   The Hope Delivery Foundation — donation modal
   --------------------------------------------------------------------------
   Layout follows the dialog the client supplied screenshots of: name, email,
   an anonymous toggle, preset amounts or a custom one, then Stripe. Colour
   does not — her reference was another organisation's crimson. This is
   purple and gold.

   Deliberately not built on the theme's magnific-popup. That would couple the
   payment flow to jQuery and to a plugin whose focus handling we would have
   to fight; the dialog needs a real focus trap and a scroll-locked body.
   ========================================================================== */

.hdf-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: rgba(var(--cleenhearts-base-rgb, 54, 22, 80), 0.62);
	opacity: 0;
	visibility: hidden;
	transition: opacity 260ms ease, visibility 260ms ease;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.hdf-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.hdf-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 520px;
	/* The dialog scrolls inside itself rather than growing the page — the
	   client's own screenshot shows a scrollbar on the dialog. 100dvh, not
	   100vh: on mobile Safari the address bar makes vh taller than the
	   visible area, which would push the pay button off-screen. */
	max-height: min(92dvh, 860px);
	border-radius: 24px;
	background-color: var(--cleenhearts-white, #fff);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
	transform: translateY(18px) scale(0.98);
	transition: transform 260ms ease;
	overflow: hidden;
}

.hdf-modal.is-open .hdf-modal__dialog {
	transform: none;
}

.hdf-modal__head {
	flex: 0 0 auto;
	padding: 20px 34px 4px;
	text-align: center;
}

.hdf-modal__logo {
	display: block;
	width: auto;
	height: 64px;
	margin: 0 auto 6px;
}

.hdf-modal__org {
	margin: 0 0 4px;
	font-family: var(--cleenhearts-heading-font, "Quicksand", sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cleenhearts-purple, #783CAA);
}

.hdf-modal__title {
	margin: 0;
	font-family: var(--cleenhearts-heading-font2, "Castoro", serif);
	font-size: 26px;
	line-height: 1.25;
	color: var(--cleenhearts-base, #361650);
}

.hdf-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var(--cleenhearts-white2, #F5F1E9);
	color: var(--cleenhearts-base, #361650);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 250ms ease, color 250ms ease;
}

.hdf-modal__close:hover,
.hdf-modal__close:focus-visible {
	background-color: var(--cleenhearts-base, #361650);
	color: var(--cleenhearts-white, #fff);
}

.hdf-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 14px 34px 6px;
}

/* The action rail is pinned so the pay button never scrolls out of reach on
   a short screen. */
.hdf-modal__foot {
	flex: 0 0 auto;
	padding: 12px 34px 20px;
	background-color: var(--cleenhearts-white, #fff);
	box-shadow: 0 -12px 20px -14px rgba(var(--cleenhearts-base-rgb, 54, 22, 80), 0.35);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

/* Every measurement below is tuned so step one fits without scrolling on the
   screens people actually use — a 1280x720 laptop and a 375pt phone. It did
   not: the content ran 554px against a body of 302px on a small laptop, so
   the donor met a scrollbar before they met the amounts. */
.hdf-field {
	position: relative;
	margin-bottom: 14px;
}

/* Name and email share a row wherever there is width for it. This is the
   single biggest saving — a whole field's height. */
.hdf-names {
	display: grid;
	gap: 0 14px;
}

@media (min-width: 480px) {
	.hdf-names {
		grid-template-columns: 1fr 1fr;
	}
}

.hdf-field__label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 500;
	color: var(--cleenhearts-base, #361650);
}

.hdf-field__label .hdf-req {
	color: var(--cleenhearts-purple, #783CAA);
}

.hdf-input {
	display: block;
	width: 100%;
	height: 50px;
	padding: 0 18px;
	border: 1px solid var(--cleenhearts-border-color, #DCD5CA);
	border-radius: 14px;
	background-color: var(--cleenhearts-white, #fff);
	color: var(--cleenhearts-base, #361650);
	font-family: var(--cleenhearts-font, "DM Sans", sans-serif);
	font-size: 16px;
	outline: none;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* The theme capitalises every placeholder globally, which turned
   "Enter amount" into "Enter Amount" and fought the client's own wording. */
.hdf-input::placeholder {
	color: var(--cleenhearts-text-gray2, #888888);
	text-transform: none;
}

.hdf-input:focus {
	border-color: var(--cleenhearts-purple, #783CAA);
	box-shadow: 0 0 0 3px rgba(var(--cleenhearts-purple-rgb, 120, 60, 170), 0.16);
}

.hdf-field.has-error .hdf-input {
	border-color: #C0392B;
}

.hdf-error {
	display: none;
	margin: 7px 2px 0;
	font-size: 14px;
	line-height: 1.4;
	color: #C0392B;
}

.hdf-field.has-error .hdf-error {
	display: block;
}

/* The email error is revealed on blur — and blur is exactly what happens when
   someone clicks the preset amounts below it. Toggling display there shifted
   every control down mid-click, so the mouse-up landed on a different element
   and the click was silently swallowed: a donor who mistyped their address
   then tapped "$25" got nothing. Its space is reserved permanently instead,
   so revealing the message moves nothing.
   The amount error below is left toggling: it sits under the last field, with
   only the pinned footer beneath it, so nothing it moves can be clicked. */
/* Absolutely positioned rather than reserved in the flow: it still cannot
   shift the controls below it — which is what swallowed clicks on the preset
   amounts — but it no longer costs a permanent line of height either. It sits
   in the field's own bottom margin. */
#hdf-email-field .hdf-error {
	display: block;
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 2px;
	font-size: 12.5px;
}

#hdf-email-field.has-error .hdf-error {
	visibility: visible;
}

/* --------------------------------------------------------------------------
   Anonymous toggle
   -------------------------------------------------------------------------- */

.hdf-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding: 9px 18px 9px 13px;
	border-radius: 100px;
	background-color: var(--cleenhearts-white2, #F5F1E9);
	cursor: pointer;
	user-select: none;
	transition: background-color 220ms ease;
}

.hdf-toggle:hover {
	background-color: var(--cleenhearts-gray4, #F5F0E6);
}

.hdf-toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.hdf-toggle__dot {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 2px solid var(--cleenhearts-border-color, #DCD5CA);
	border-radius: 50%;
	background-color: var(--cleenhearts-white, #fff);
	transition: border-color 200ms ease;
}

.hdf-toggle__dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background-color: var(--cleenhearts-purple, #783CAA);
	transform: scale(0);
	transition: transform 200ms ease;
}

.hdf-toggle input:checked + .hdf-toggle__dot {
	border-color: var(--cleenhearts-purple, #783CAA);
}

.hdf-toggle input:checked + .hdf-toggle__dot::after {
	transform: scale(1);
}

.hdf-toggle input:focus-visible + .hdf-toggle__dot {
	box-shadow: 0 0 0 3px rgba(var(--cleenhearts-purple-rgb, 120, 60, 170), 0.25);
}

.hdf-toggle__text {
	font-size: 16px;
	font-weight: 600;
	color: var(--cleenhearts-base, #361650);
}

/* --------------------------------------------------------------------------
   Amounts
   -------------------------------------------------------------------------- */

.hdf-amounts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 12px;
	padding: 0;
	border: none;
}

/* A <legend> inside a grid container is a grid item, so the usual
   float/width trick for making it span the row does nothing — it just took a
   column and pushed the third preset onto its own row. */
.hdf-amounts legend {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin-bottom: 8px;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--cleenhearts-base, #361650);
}

.hdf-amount {
	position: relative;
}

.hdf-amount input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.hdf-amount__face {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	border: 1px solid var(--cleenhearts-border-color, #DCD5CA);
	border-radius: 14px;
	font-family: var(--cleenhearts-heading-font, "Quicksand", sans-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--cleenhearts-base, #361650);
	transition: all 220ms ease;
}

.hdf-amount input:hover + .hdf-amount__face {
	border-color: var(--cleenhearts-purple, #783CAA);
}

.hdf-amount input:checked + .hdf-amount__face {
	border-color: var(--cleenhearts-secondary, #D2A851);
	background-color: var(--cleenhearts-secondary, #D2A851);
}

.hdf-amount input:focus-visible + .hdf-amount__face {
	box-shadow: 0 0 0 3px rgba(var(--cleenhearts-purple-rgb, 120, 60, 170), 0.25);
}

.hdf-or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--cleenhearts-purple, #783CAA);
}

.hdf-or::before,
.hdf-or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background-color: var(--cleenhearts-border-color, #DCD5CA);
}

.hdf-custom {
	position: relative;
}

.hdf-custom__symbol {
	position: absolute;
	top: 50%;
	left: 18px;
	transform: translateY(-50%);
	font-size: 16px;
	font-weight: 600;
	color: var(--cleenhearts-text, #757277);
	pointer-events: none;
}

.hdf-custom .hdf-input {
	padding-left: 34px;
	background-color: var(--cleenhearts-gray2, #F3F3F3);
	border-color: transparent;
}

.hdf-custom .hdf-input:focus {
	background-color: var(--cleenhearts-white, #fff);
	border-color: var(--cleenhearts-purple, #783CAA);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.hdf-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 54px;
	padding: 0 24px;
	border: none;
	border-radius: 100px;
	background-color: var(--cleenhearts-secondary, #D2A851);
	color: var(--cleenhearts-base, #361650);
	font-family: var(--cleenhearts-heading-font, "Quicksand", sans-serif);
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 250ms ease, color 250ms ease, opacity 250ms ease;
}

.hdf-btn:hover:not(:disabled) {
	background-color: var(--cleenhearts-base, #361650);
	color: var(--cleenhearts-white, #fff);
}

.hdf-btn:disabled {
	background-color: var(--cleenhearts-gray3, #E0E0E0);
	color: var(--cleenhearts-text-gray2, #888888);
	cursor: not-allowed;
}

.hdf-btn--ghost {
	height: 44px;
	margin-top: 12px;
	background: none;
	color: var(--cleenhearts-purple, #783CAA);
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hdf-btn--ghost:hover:not(:disabled) {
	background: none;
	color: var(--cleenhearts-base, #361650);
}

/* Two small reassurances at the point where a donor is deciding whether to
   type a card number: who is being paid, and who is handling the card. */
.hdf-trust {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	text-align: center;
	color: var(--cleenhearts-text, #757277);
}

.hdf-trust__lock {
	font-size: 12px;
}

.hdf-org-details {
	margin: 4px 0 0;
	font-size: 11.5px;
	text-align: center;
	color: var(--cleenhearts-text-gray2, #888888);
}

.hdf-org-details a {
	color: inherit;
}

.hdf-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: hdf-spin 700ms linear infinite;
}

@keyframes hdf-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.hdf-modal,
	.hdf-modal__dialog,
	/* Two small reassurances at the point where a donor is deciding whether to
   type a card number: who is being paid, and who is handling the card. */
.hdf-trust {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	text-align: center;
	color: var(--cleenhearts-text, #757277);
}

.hdf-trust__lock {
	font-size: 12px;
}

.hdf-org-details {
	margin: 4px 0 0;
	font-size: 11.5px;
	text-align: center;
	color: var(--cleenhearts-text-gray2, #888888);
}

.hdf-org-details a {
	color: inherit;
}

.hdf-spinner {
		transition: none;
		animation-duration: 0.01ms;
	}
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.hdf-step[hidden] {
	display: none;
}

.hdf-summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	padding: 16px 20px;
	border-radius: 16px;
	background-color: var(--cleenhearts-white2, #F5F1E9);
}

.hdf-summary__label {
	font-size: 15px;
	color: var(--cleenhearts-text, #757277);
}

.hdf-summary__value {
	font-family: var(--cleenhearts-heading-font, "Quicksand", sans-serif);
	font-size: 24px;
	font-weight: 700;
	color: var(--cleenhearts-base, #361650);
}

.hdf-legend {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--cleenhearts-purple, #783CAA);
}

#hdf-payment-element {
	min-height: 180px;
}

.hdf-note {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cleenhearts-text-gray2, #888888);
	text-align: center;
}

.hdf-alert {
	margin-bottom: 18px;
	padding: 14px 18px;
	border-radius: 14px;
	background-color: #FBEAE7;
	color: #A5352A;
	font-size: 15px;
	line-height: 1.55;
}

.hdf-alert[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Success
   -------------------------------------------------------------------------- */

.hdf-done {
	padding: 10px 0 20px;
	text-align: center;
}

.hdf-done__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background-color: var(--cleenhearts-secondary, #D2A851);
	color: var(--cleenhearts-base, #361650);
	font-size: 38px;
}

.hdf-done__title {
	margin: 0 0 12px;
	font-size: 26px;
	color: var(--cleenhearts-base, #361650);
}

.hdf-done__text {
	margin: 0 auto;
	max-width: 380px;
	color: var(--cleenhearts-text, #757277);
}

.hdf-done__ref {
	display: inline-block;
	margin-top: 18px;
	padding: 8px 16px;
	border-radius: 100px;
	background-color: var(--cleenhearts-white2, #F5F1E9);
	font-family: monospace;
	font-size: 14px;
	color: var(--cleenhearts-base, #361650);
}

/* --------------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------------
   At 360px and below the dialog goes full-bleed. Preset amounts stay in three
   columns as long as "$1,000" fits; below that they stack, because a wrapped
   two-plus-one row reads as a mistake.
   -------------------------------------------------------------------------- */

@media (max-width: 575px) {
	.hdf-modal {
		padding: 0;
		align-items: flex-end;
	}

	.hdf-modal__dialog {
		max-width: none;
		max-height: 94dvh;
		border-radius: 24px 24px 0 0;
	}

	.hdf-modal__head {
		padding: 20px 22px 4px;
	}

	.hdf-modal__logo {
		height: 60px;
	}

	.hdf-modal__title {
		font-size: 25px;
	}

	.hdf-modal__body {
		padding: 16px 22px 8px;
	}

	.hdf-modal__foot {
		padding: 14px 22px 22px;
	}
}

@media (max-width: 299px) {
	.hdf-amounts {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Short viewports
   --------------------------------------------------------------------------
   The constraint on a phone or a 720p laptop is height, not width, so it is
   height these respond to. Without them the donor meets a scrollbar before
   they meet the amounts — on the one screen where hesitation costs a gift.

   The logo shrinks rather than disappearing: knowing whose form this is
   matters more, at the moment a card number is being typed, than any single
   row of whitespace.
   -------------------------------------------------------------------------- */

@media (max-height: 800px) {
	.hdf-modal__logo { height: 50px; margin-bottom: 4px; }
	.hdf-modal__title { font-size: 23px; }
	.hdf-modal__head { padding-top: 16px; }
	.hdf-modal__body { padding-top: 10px; }
	.hdf-modal__foot { padding-top: 10px; padding-bottom: 16px; }
	.hdf-btn { height: 50px; }
	.hdf-field { margin-bottom: 11px; }
	.hdf-toggle { margin-bottom: 12px; }
	.hdf-org-details { display: none; }
}

/* Narrow *and* short: the two identity fields share a row here too. It is the
   largest single saving available, and an email field at this width is snug
   but perfectly usable. */
@media (max-height: 800px) and (min-width: 320px) {
	.hdf-names { grid-template-columns: 1fr 1fr; }
}

/* At this size the labels are what wrap, adding back the height the shared
   row just saved, so they get shortened rather than the layout changed. */
@media (max-height: 620px) {
	.hdf-field__label { font-size: 13px; }
	.hdf-modal__logo { height: 36px; }
	.hdf-modal__org { display: none; }
	.hdf-trust { display: none; }
}

@media (max-height: 680px) {
	.hdf-modal__logo { height: 42px; }
	.hdf-modal__title { font-size: 21px; }
	.hdf-modal__org { font-size: 11px; letter-spacing: 0.1em; }
	.hdf-input, .hdf-amount__face { height: 46px; }
	.hdf-field__label { margin-bottom: 4px; font-size: 14px; }
	.hdf-amounts { margin-bottom: 10px; }
	.hdf-or { margin-bottom: 8px; }
	.hdf-trust { font-size: 12px; margin-top: 8px; }
}