/*
 * Claim a Patch — donation flow, mobile-first.
 *
 * Breakpoints (kept in sync with quilt-landing.css):
 *   Mobile (base):  up to 767px
 *   Desktop:        min-width: 768px
 *
 * 15px font floor on this page (0.9375rem).
 */

/* ---------------------------------------------------------------
 * Fonts
 * --------------------------------------------------------------- */

@font-face {
	font-family: 'Butler';
	src: url('../fonts/Butler-Bold.woff2') format('woff2'),
	     url('../fonts/Butler-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------
 * Test-mode banner — visible only when mohq_test_mode is on
 * --------------------------------------------------------------- */

.claim__test-banner {
	background: #9C3D20;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9375rem;
	line-height: 1.4;
	padding: 0.75rem 1rem;
	text-align: center;
	border-bottom: 2px solid #6c2a16;
}
.claim__test-banner strong {
	letter-spacing: 0.05em;
	margin-right: 0.5em;
}

/* ---------------------------------------------------------------
 * Shared step shell
 * --------------------------------------------------------------- */

.claim {
	font-family: 'Montserrat', sans-serif;
	color: #3D414F;
}

/*
 * Step visibility is driven by the `hidden` attribute (toggled in JS).
 * `[hidden] { display: none }` is the UA default — we make our display
 * rules `:not([hidden])`-qualified so they don't override it.
 */
.claim__step[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------
 * Step 1: Landing
 * --------------------------------------------------------------- */

.claim__step--landing:not([hidden]) {
	display: flex;
	flex-direction: column;
}

.claim__landing-top {
	background: #F89C4E;
	color: #3D414F;
	padding: 3rem 1.5rem 2.5rem;
	text-align: center;
	flex: 1 1 auto;
}

.claim__landing-shape {
	max-width: 14rem;
	margin: 0 auto 2rem;
}

.claim__landing-shape svg {
	display: block;
	width: 100%;
	height: auto;
}

.claim__landing-headline {
	font-family: 'Butler', serif;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.1;
	margin: 0 0 1.25rem;
}

.claim__landing-body {
	font-size: 1rem;
	line-height: 1.55;
	margin: 0 auto;
	max-width: 32rem;
}

.claim__landing-bottom {
	background: #3D414F;
	background-image: linear-gradient(
		115deg,
		#3D414F 0%,
		#3D414F 60%,
		#313542 60%,
		#313542 100%
	);
	padding: 3.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	flex: 0 0 auto;
}

.claim__cta,
.claim__cta:link,
.claim__cta:visited {
	display: inline-block;
	width: 100%;
	max-width: 22rem;
	padding: 0.85rem 1.5rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border: 3px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.claim__cta--primary,
.claim__cta--primary:link,
.claim__cta--primary:visited {
	background: #F89C4E;
	color: #3D414F;
	border-color: #F89C4E;
}

.claim__cta--primary:hover,
.claim__cta--primary:focus {
	background: #FFAE6A;
	border-color: #FFAE6A;
}

.claim__cta--secondary,
.claim__cta--secondary:link,
.claim__cta--secondary:visited {
	background: transparent;
	color: #fff;
	border-color: #F89C4E;
}

.claim__cta--secondary:hover,
.claim__cta--secondary:focus {
	background: rgba(248, 156, 78, 0.15);
}

/* ---------------------------------------------------------------
 * Shared step chrome (back button, heading, action footer, placeholder)
 * --------------------------------------------------------------- */

.claim__step--level,
.claim__step--design,
.claim__step--payment {
	padding: 1.5rem 1.25rem 2.5rem;
	max-width: 32rem;
	margin: 0 auto;
}

.claim__back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border: 0;
	padding: 0.5rem 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #3D414F;
	cursor: pointer;
}

.claim__back svg {
	width: 0.75rem;
	height: 1rem;
}

.claim__heading {
	font-family: 'Butler', serif;
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 1.15;
	text-align: center;
	color: #3D414F;
	margin: 1.5rem 0 2rem;
}

.claim__placeholder {
	text-align: center;
	color: #6B6E7A;
	font-size: 1rem;
	font-style: italic;
}

.claim__actions {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.claim__actions .claim__cta {
	width: 100%;
	max-width: 22rem;
}

.claim__cta[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Processing state: hide the label and spin a ring while the charge runs.
   Stays fully opaque (overriding the disabled dim) so the spinner reads clearly. */
.claim__cta.is-processing {
	position: relative;
	color: transparent;
	opacity: 1;
}

.claim__cta.is-processing::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.25rem;
	height: 1.25rem;
	margin: -0.625rem 0 0 -0.625rem;
	border: 3px solid rgba(61, 65, 79, 0.3);
	border-top-color: #3D414F;
	border-radius: 50%;
	animation: claim-spin 0.6s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.claim__cta.is-processing::after {
		animation-duration: 1.5s;
	}
}

/* ---------------------------------------------------------------
 * Step 2: Level
 * --------------------------------------------------------------- */

.claim__tier-list {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.claim__tier-card {
	display: block;
	width: 100%;
	border: 0;
	padding: 1.25rem 1.25rem 1.5rem;
	font-family: 'Montserrat', sans-serif;
	color: #3D414F;
	text-align: left;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.claim__tier-card:hover {
	transform: translateY(-2px);
}

.claim__tier-card.is-selected {
	box-shadow: 0 0 0 3px #3D414F;
}

.claim__tier-card:focus-visible {
	outline: 3px solid #3D414F;
	outline-offset: 2px;
}

.claim__tier-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.claim__tier-price {
	font-size: 1.125rem;
}

.claim__tier-shapes {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-height: 3.5rem;
	color: #3D414F;
}

.claim__tier-shape {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.claim__tier-shape svg {
	display: block;
	height: 3rem;
	width: auto;
}

/* Larger thumbnail variants per tier to match the visual weight in the mock. */
.claim__tier-card[data-tier="honor"] .claim__tier-shape svg,
.claim__tier-card[data-tier="legacy"] .claim__tier-shape svg {
	height: 5rem;
}

.claim__tier-card[data-tier="legacy"] .claim__tier-shape svg {
	height: 7rem;
}

/* Slot fills in tier-card context — slot 0 picks up text color, slot 1 darker. */
.claim__tier-shape svg .is-slot-0 {
	fill: currentColor;
}

.claim__tier-shape svg .is-slot-1 {
	fill: rgba( 0, 0, 0, 0.35 );
}

/* ---------------------------------------------------------------
 * Step 3: Design
 * --------------------------------------------------------------- */

.claim__preview {
	min-height: 12rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 1.5rem;
	padding: 1rem;
	color: #6B6E7A;
}

.claim__preview svg {
	max-width: 100%;
	max-height: 11rem;
	height: auto;
	width: auto;
}

.claim__preview svg .is-slot-0 {
	fill: var( --c1, #3D414F );
}

.claim__preview svg .is-slot-1 {
	fill: var( --c2, #FFFFFF );
}

.claim__preview-empty {
	margin: 0;
	font-size: 0.9375rem;
	font-style: italic;
}

.claim__field {
	margin: 0 0 1.25rem;
	padding: 1rem 1rem 1.25rem;
	border: 2px solid #3D414F;
	background: #fff;
}

.claim__field-label {
	padding: 0 0.4rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #3D414F;
}

.claim__field-hint {
	margin: 0.5rem 0 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8125rem;
	font-style: italic;
	color: #6B6E7A;
}

.claim__shape-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 0.75rem;
	min-height: 3rem;
}

/*
 * Defensive against the Hello Elementor / Elementor button reset,
 * which paints native <button> a pink-ish accent and sets its own
 * display rule. !important on `display: none` is the only reliable
 * way to win against a theme rule that also uses !important.
 */
.claim__shape-option[hidden] {
	display: none !important;
}

.claim__shape-option:not([hidden]) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	padding: 0.5rem;
	cursor: pointer;
	color: #3D414F !important;
	transition: transform 0.12s ease;
}

.claim__shape-option:hover {
	transform: translateY(-2px);
}

.claim__shape-option.is-selected {
	box-shadow: 0 0 0 3px #3D414F;
}

.claim__shape-option:focus-visible {
	outline: 3px solid #3D414F;
	outline-offset: 2px;
}

.claim__shape-option svg {
	display: block;
	height: 3rem;
	width: auto;
}

/* Hardcoded fills (not currentColor) so a theme-injected button color can't leak in. */
.claim__shape-option svg .is-slot-0 {
	fill: #3D414F;
}

.claim__shape-option svg .is-slot-1 {
	fill: rgba( 0, 0, 0, 0.35 );
}

.claim__color-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 0.625rem;
	margin-top: 0.75rem;
}

.claim__color-swatch {
	aspect-ratio: 3 / 2;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: transform 0.12s ease;
}

.claim__color-swatch:hover {
	transform: scale( 1.02 );
}

.claim__color-swatch.is-selected {
	box-shadow: 0 0 0 3px #3D414F;
}

.claim__color-swatch:focus-visible {
	outline: 3px solid #3D414F;
	outline-offset: 2px;
}

.claim__message {
	display: block;
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.625rem 0.75rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	line-height: 1.4;
	color: #3D414F;
	border: 2px solid #3D414F;
	background: #fff;
	box-sizing: border-box;
	resize: vertical;
	min-height: 4.5rem;
}

.claim__message:focus {
	outline: 3px solid #F89C4E;
	outline-offset: 0;
}

/* ---------------------------------------------------------------
 * Step 4: Payment
 * --------------------------------------------------------------- */

.claim__field--summary {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.claim__line-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #3D414F;
	padding: 0.25rem 0;
}

.claim__line-item--total {
	font-size: 1.125rem;
}

.claim__line-divider {
	border: 0;
	border-top: 2px solid #3D414F;
	margin: 0.75rem 0;
}

.claim__input-group {
	margin-bottom: 0.875rem;
}

.claim__input-label {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #3D414F;
	margin-bottom: 0.375rem;
}

/*
 * Hello Elementor / Elementor Pro paints native input borders at 1px with a
 * ~3px radius (sometimes with !important). To match the design mock's heavy
 * square treatment we have to !important the border + radius so our rule
 * outranks the theme. Same family of override pattern as the button reset.
 */
.claim__input {
	display: block;
	width: 100%;
	padding: 0.625rem 0.75rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	color: #3D414F;
	border: 2px solid #3D414F !important;
	border-radius: 0 !important;
	background: #fff;
	box-sizing: border-box;
}

.claim__input:focus {
	outline: 3px solid #F89C4E;
	outline-offset: 0;
}

.claim__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-top: 0.5rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9375rem;
	color: #3D414F;
	cursor: pointer;
}

.claim__checkbox input[type="checkbox"] {
	margin: 0.15rem 0 0;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: #3D414F;
	cursor: pointer;
}

.claim__card-fields {
	margin-top: 0.75rem;
}

.claim__cc-field {
	height: 3rem;
	border: 2px solid #3D414F;
	background: #fff;
	box-sizing: border-box;
}

/*
 * CollectJS injects iframes while step 4 is still `hidden`, so a `height: 100%`
 * resolves against a zero-height parent and the iframe lays out at 0 — clicks
 * fall through to nothing. Fixed height + !important wins over whatever CollectJS
 * sets inline on the iframe. The calc() subtracts the wrapper's 2px borders so
 * the iframe sits inside the border instead of overflowing the content area.
 */
.claim__cc-field iframe {
	display: block !important;
	width: 100% !important;
	height: calc(3rem - 4px) !important;
	border: 0 !important;
	pointer-events: auto !important;
}

.claim__cc-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.875rem;
}

.claim__placeholder-msg {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.875rem;
	font-style: italic;
	color: #6B6E7A;
	text-align: center;
}

.claim__donate-more {
	display: flex;
	align-items: stretch;
	margin-top: 0.75rem;
}

.claim__donate-more-prefix {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.875rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: #fff;
	background: #3D414F;
	border: 2px solid #3D414F;
	border-right: 0;
}

.claim__input--donate-more {
	margin: 0;
	border-left: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
}

.claim__secure-note {
	margin: 0;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6B6E7A;
}

/* ---------------------------------------------------------------
 * Step 5: Thanks
 * --------------------------------------------------------------- */

.claim__thanks-top {
	background: #F89C4E;
	color: #3D414F;
	padding: 3rem 1.5rem 2.5rem;
	text-align: center;
}

.claim__thanks-check {
	width: 5rem;
	height: 5rem;
	margin: 0 auto 1.5rem;
}

.claim__thanks-check svg {
	display: block;
	width: 100%;
	height: 100%;
}

.claim__thanks-headline {
	font-family: 'Butler', serif;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.1;
	margin: 0 0 1.25rem;
}

.claim__thanks-body {
	margin: 0 auto;
	max-width: 32rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	line-height: 1.55;
}

.claim__thanks-bottom {
	background: #3D414F;
	padding: 2.5rem 1.25rem 3rem;
}

.claim__thanks-card {
	background: #fff;
	padding: 1.5rem 1.25rem 1.75rem;
	margin: 0 auto;
	max-width: 26rem;
}

.claim__thanks-card-heading {
	margin: 0 0 1.25rem;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #3D414F;
}

.claim__thanks-patch-frame {
	position: relative;
	background: #F6F6F8;
	padding: 2rem;
	margin: 0 0 1.5rem;
	min-height: 10rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.claim__thanks-patch {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.claim__thanks-patch svg {
	display: block;
	max-width: 100%;
	max-height: 14rem;
	width: auto;
	height: auto;
}

.claim__thanks-patch svg .is-slot-0 {
	fill: var( --c1, #3D414F );
}

.claim__thanks-patch svg .is-slot-1 {
	fill: var( --c2, #FFFFFF );
}

.claim__thanks-view-quilt,
.claim__thanks-view-quilt:link,
.claim__thanks-view-quilt:visited {
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.claim__thanks-share {
	margin: 1.5rem auto 0;
	max-width: 26rem;
	background: #000;
	padding: 1rem 1.25rem 1.125rem;
	text-align: center;
	color: #fff;
}

.claim__thanks-share-label {
	margin: 0 0 0.625rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.claim__thanks-share-icons {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	gap: 1.75rem;
}

.claim__thanks-share-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	width: 1.875rem;
	height: 1.875rem;
}

.claim__thanks-share-icons a:hover,
.claim__thanks-share-icons a:focus-visible {
	color: #F89C4E;
}

.claim__thanks-share-icons svg {
	width: 100%;
	height: 100%;
	display: block;
}

.claim__thanks-bottom .claim__actions {
	margin-top: 1.5rem;
	max-width: 26rem;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {

	.claim__thanks-top {
		padding: 5rem 2rem 4rem;
	}

	.claim__thanks-headline {
		font-size: 3rem;
	}

	.claim__thanks-body {
		font-size: 1.125rem;
		max-width: 40rem;
	}

	.claim__thanks-bottom {
		padding: 4rem 2rem 5rem;
	}

	.claim__thanks-card,
	.claim__thanks-share,
	.claim__thanks-bottom .claim__actions {
		max-width: 32rem;
	}
}

/* ---------------------------------------------------------------
 * Desktop
 * --------------------------------------------------------------- */

@media (min-width: 768px) {

	.claim__landing-top {
		padding: 5rem 2rem 4rem;
	}

	.claim__landing-shape {
		max-width: 18rem;
		margin-bottom: 2.5rem;
	}

	.claim__landing-headline {
		font-size: 3rem;
	}

	.claim__landing-body {
		font-size: 1.125rem;
		max-width: 40rem;
	}

	.claim__landing-bottom {
		padding: 4rem 2rem;
		flex-direction: row;
		justify-content: center;
		gap: 1.5rem;
	}

	.claim__cta {
		width: auto;
		min-width: 16rem;
	}

	.claim__step--level,
	.claim__step--design,
	.claim__step--payment {
		padding: 2.5rem 2rem 4rem;
		max-width: 40rem;
	}

	.claim__heading {
		font-size: 2.5rem;
		margin-top: 2rem;
	}

	.claim__tier-card {
		padding: 1.5rem 1.75rem 1.75rem;
	}

	.claim__tier-head {
		font-size: 1.125rem;
	}

	.claim__tier-price {
		font-size: 1.25rem;
	}
}

/* --------------------------------------------------------------
 * Payment error (step 4)
 * -------------------------------------------------------------- */
.claim__payment-error {
	margin: 1rem 0;
	padding: 0.875rem 1rem;
	background: #FDECEC;
	border: 1px solid #9C3D20;
	border-radius: 0.375rem;
	color: #9C3D20;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.claim__payment-error[hidden] {
	display: none;
}

/* ---------------------------------------------------------------
 * Step 4 — Accept Terms checkbox (required before Complete Payment)
 * --------------------------------------------------------------- */

.claim__accept-terms {
	margin: 1rem 0 0.75rem;
}

.claim__accept-terms-label {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.9375rem;
	color: #3D414F;
	cursor: pointer;
	line-height: 1.4;
}

.claim__accept-terms-label input[type='checkbox'] {
	margin-top: 0.2rem;
	width: 1.125rem;
	height: 1.125rem;
	accent-color: #9C3D20;
	cursor: pointer;
}

.claim__accept-terms-label a {
	color: #9C3D20;
	text-decoration: underline;
}

.claim__accept-terms-label a:hover,
.claim__accept-terms-label a:focus {
	color: #F89C4E;
}