.apc-donation-slider {
	min-width: 100%;
	max-width: 100%;
}

.apc-ds-amounts {
	position: relative;
	display: grid;
	justify-items: center;
	align-items: center;
	text-align: center;
	min-height: 40px;
	margin-bottom: 16px;
}

.apc-ds-amount {
	grid-area: 1 / 1;
	font-size: 30px;
	line-height: 1;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.apc-ds-amount.opacity-0 {
	opacity: 0;
	transform: scale( 0.85 );
	pointer-events: none;
}

.apc-ds-amount.is-active {
	opacity: 1;
	font-weight: 700;
	transform: scale( 1 );
}

.apc-ds-slider-wrap {
	max-width: 480px;
	margin: 0 auto;
}

.range-slider {
	--percent: 0%;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient( to right, var( --apc-ds-fill-color, var( --wp--preset--color--custom-um-blue, #3754c0 ) ) var( --percent ), #e5e5e5 var( --percent ) );
	outline: none;
	cursor: pointer;
}

/* Thumb: 22px wide x 44px tall touch area. The visible dot is painted with
   a radial gradient so it looks the same as before (14px fill, 3px white
   ring, 1px outer ring). Width stays close to the old 20px so the dot's
   travel and the blue fill still line up at both ends. */
.range-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 22px;
	height: 44px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: radial-gradient( circle at center,
		var( --apc-ds-fill-color, var( --wp--preset--color--custom-um-blue, #3754c0 ) ) 0 7px,
		#fff 7px 10px,
		var( --apc-ds-fill-color, var( --wp--preset--color--custom-um-blue, #3754c0 ) ) 10px 11px,
		transparent 11px );
	cursor: pointer;
}

.range-slider::-moz-range-thumb {
	box-sizing: border-box;
	width: 22px;
	height: 44px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: radial-gradient( circle at center,
		var( --apc-ds-fill-color, var( --wp--preset--color--custom-um-blue, #3754c0 ) ) 0 7px,
		#fff 7px 10px,
		var( --apc-ds-fill-color, var( --wp--preset--color--custom-um-blue, #3754c0 ) ) 10px 11px,
		transparent 11px );
	cursor: pointer;
}

.range-slider::-moz-range-progress {
	background: var( --apc-ds-fill-color, var( --wp--preset--color--custom-um-blue, #3754c0 ) );
	height: 6px;
	border-radius: 999px;
}

.apc-ds-actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
}

/* Confirmation step modal */
.apc-ds-modal {
	width: min( 520px, calc( 100% - 32px ) );
	max-height: calc( 100% - 32px );
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #D8D4D0;
	color: inherit;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.25 );
}

.apc-ds-modal::backdrop {
	background: rgba( 0, 0, 0, 0.55 );
}

.apc-ds-modal[open] {
	animation: apc-ds-modal-in 0.25s ease-out;
}

@keyframes apc-ds-modal-in {
	from {
		opacity: 0;
		transform: translateY( 12px ) scale( 0.97 );
	}
	to {
		opacity: 1;
		transform: translateY( 0 ) scale( 1 );
	}
}

.apc-ds-modal-inner {
	position: relative;
	padding: 40px 32px 32px;
}

.apc-ds-modal-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.apc-ds-modal-close:hover,
.apc-ds-modal-close:focus-visible {
	opacity: 1;
}

.apc-ds-modal-title {
	margin: 0 0 12px;
	padding-right: 32px;
}

.apc-ds-modal-message p {
	margin: 0 0 12px;
}

.apc-ds-modal-message p:last-child {
	margin-bottom: 0;
}

.apc-ds-modal-actions {
	display: flex;
	flex-direction: column;
	margin-top: 24px;
}

/* Editor-only modal preview */
.apc-ds-modal-preview {
	margin-top: 24px;
	border: 1px dashed #c3c4c7;
	border-radius: 12px;
	background: #fff;
}

.apc-ds-modal-preview-label {
	display: block;
	padding: 8px 12px 0;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #757575;
}

.apc-ds-modal-preview .apc-ds-modal-inner {
	padding-top: 16px;
}

@media ( prefers-reduced-motion: reduce ) {
	.apc-ds-modal[open] {
		animation: none;
	}
}

/* Editor-only spacing for the step repeater in InspectorControls */
.apc-ds-step-control {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #ddd;
}