/**
 * Donate Positive — Public Styles
 *
 * Design references:
 *   onpage.png      — on-page widget (toggle, amount grid, custom amount, designation, button)
 *   popup_01.png    — Step 1: donor details
 *   GiftAid.png     — Step 2: Gift Aid prompt
 *   GiftAidForm.png — Step 3: Gift Aid address
 *   Payment.png     — Step 4: payment (Stripe Elements, cover fees, total)
 *
 * Colors injected per campaign via CSS custom properties on .dp-form-wrap:
 *   --dp-btn-color      Button background (from campaign button_color)
 *   --dp-meter-color    Progress bar fill (from campaign meter_color)
 */

/* =========================================================================
   Foundations
   ========================================================================= */

.dp-form-wrap *,
.dp-form-wrap *::before,
.dp-form-wrap *::after {
	box-sizing: border-box;
}

.dp-form-wrap {
	--dp-btn-color:     #1a3353;
	--dp-btn-hover:     #2a4d7a;
	--dp-meter-color:   #22c55e;
	--dp-accent:        #22c55e;
	--dp-white:         #ffffff;
	--dp-gray-50:       #f8fafc;
	--dp-gray-100:      #f1f5f9;
	--dp-gray-200:      #e2e8f0;
	--dp-gray-400:      #94a3b8;
	--dp-gray-600:      #475569;
	--dp-gray-800:      #1e293b;
	--dp-red:           #ef4444;
	--dp-green:         #22c55e;
	--dp-green-dark:    #16a34a;
	--dp-radius:        10px;
	--dp-radius-sm:     6px;
	--dp-shadow:        0 4px 24px rgba(0, 0, 0, .12);
	--dp-shadow-lg:     0 20px 60px rgba(0, 0, 0, .25);
	--dp-transition:    .15s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	color: var(--dp-gray-800);
}

/* Screen-reader only */
.dp-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   Widget Card
   ========================================================================= */

.dp-widget {
	background: var(--dp-white);
	border: 1px solid var(--dp-gray-200);
	border-radius: var(--dp-radius);
	padding: 24px;
	box-shadow: var(--dp-shadow);
	max-width: 480px;
}

/* -------------------------------------------------------------------------
   Frequency toggle
   ------------------------------------------------------------------------- */

.dp-widget__toggle {
	display: inline-flex;
	background: var(--dp-gray-100);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 20px;
	gap: 2px;
}

.dp-toggle-btn {
	padding: 8px 20px;
	border: none;
	background: transparent;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: var(--dp-gray-600);
	cursor: pointer;
	transition: background var(--dp-transition), color var(--dp-transition);
	white-space: nowrap;
}

.dp-toggle-btn--active {
	background: var(--dp-btn-color);
	color: var(--dp-white);
	font-weight: 600;
}

.dp-toggle-btn:not(.dp-toggle-btn--active):hover {
	color: var(--dp-gray-800);
}

/* -------------------------------------------------------------------------
   Amount buttons grid
   ------------------------------------------------------------------------- */

.dp-widget__amounts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}

.dp-amount-btn {
	padding: 12px 8px;
	background: var(--dp-white);
	border: 2px solid var(--dp-gray-200);
	border-radius: var(--dp-radius-sm);
	font-size: 16px;
	font-weight: 600;
	color: var(--dp-gray-800);
	cursor: pointer;
	transition: border-color var(--dp-transition), background var(--dp-transition), color var(--dp-transition);
	text-align: center;
}

.dp-amount-btn:hover {
	border-color: var(--dp-btn-color);
	color: var(--dp-btn-color);
}

/* Prevent theme CSS (e.g. Divi) from flood-filling the background on hover.
   Keep white background; only the border and text take on the campaign colour. */
.dp-form-wrap .dp-amount-btn:hover:not(.dp-amount-btn--selected),
.dp-modal .dp-amount-btn:hover:not(.dp-amount-btn--selected) {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-color: var(--dp-btn-color) !important;
	color: var(--dp-btn-color) !important;
}

/* Selected button hovered: keep the filled style — white text on campaign colour background. */
.dp-form-wrap .dp-amount-btn--selected:hover,
.dp-modal .dp-amount-btn--selected:hover {
	background: var(--dp-btn-color) !important;
	background-color: var(--dp-btn-color) !important;
	border-color: var(--dp-btn-color) !important;
	color: #ffffff !important;
}

.dp-amount-btn--selected {
	background: var(--dp-btn-color);
	border-color: var(--dp-btn-color);
	color: var(--dp-white);
}

/* Amount button with a label line — only active when modifier class is present */
.dp-amount-btn--labelled {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 10px 6px;
}

.dp-amount-btn--labelled .dp-amount-btn__value {
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.dp-amount-btn--labelled .dp-amount-btn__label {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--dp-gray-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.dp-amount-btn--labelled.dp-amount-btn--selected .dp-amount-btn__label {
	color: rgba(255,255,255,0.8);
}

/* -------------------------------------------------------------------------
   Custom amount input
   ------------------------------------------------------------------------- */

.dp-widget__custom {
	margin-bottom: 16px;
}

.dp-custom-amount-wrap {
	display: flex;
	align-items: center;
	border: 2px solid var(--dp-gray-200);
	border-radius: var(--dp-radius-sm);
	overflow: hidden;
	background: var(--dp-white);
	transition: border-color var(--dp-transition);
}

.dp-custom-amount-wrap:focus-within {
	border-color: var(--dp-btn-color);
	box-shadow: 0 0 0 3px rgba(26, 51, 83, .1);
}

.dp-custom-amount__symbol {
	padding: 0 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--dp-gray-600);
	background: var(--dp-gray-50);
	border-right: 2px solid var(--dp-gray-200);
	line-height: 46px;
	user-select: none;
}

.dp-custom-amount {
	flex: 1;
	border: none;
	outline: none;
	padding: 12px;
	font-size: 16px;
	font-weight: 500;
	color: var(--dp-gray-800);
	background: transparent;
	-moz-appearance: textfield;
}

.dp-custom-amount::-webkit-outer-spin-button,
.dp-custom-amount::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* -------------------------------------------------------------------------
   Designation dropdown
   ------------------------------------------------------------------------- */

.dp-widget__designation {
	margin-bottom: 20px;
}

.dp-widget__designation-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--dp-gray-600);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.dp-org-name-wrap[hidden] {
	display: none;
}

.dp-designation-select {
	width: 100%;
	padding: 12px 36px 12px 14px;
	border: 2px solid var(--dp-gray-200);
	border-radius: var(--dp-radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--dp-gray-800);
	background: var(--dp-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") right 10px center / 20px no-repeat;
	appearance: none;
	cursor: pointer;
	transition: border-color var(--dp-transition);
}

.dp-designation-select:focus {
	outline: none;
	border-color: var(--dp-btn-color);
	box-shadow: 0 0 0 3px rgba(26, 51, 83, .1);
}

/* -------------------------------------------------------------------------
   DONATE NOW button
   ------------------------------------------------------------------------- */

.dp-donate-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 24px;
	background: var(--dp-btn-color);
	color: var(--dp-white);
	border: none;
	border-radius: var(--dp-radius-sm);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	overflow: hidden;
	transition: background var(--dp-transition), transform .1s ease;
	margin-bottom: 12px;
}

.dp-donate-btn:hover {
	background: var(--dp-btn-hover);
}

.dp-donate-btn:active {
	transform: scale(.98);
}

.dp-donate-btn__text {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
}

.dp-donate-btn__amount {
	opacity: .85;
	font-size: 15px;
	font-weight: 500;
}

/* Pulse ring animation */
.dp-donate-btn__pulse {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: transparent;
	border: 2px solid var(--dp-btn-color);
	opacity: 0;
	animation: dp-pulse 2.5s ease-out infinite;
}

@keyframes dp-pulse {
	0%   { transform: scale(1); opacity: .6; }
	70%  { transform: scale(1.06); opacity: 0; }
	100% { transform: scale(1.06); opacity: 0; }
}

/* -------------------------------------------------------------------------
   Widget secure notice
   ------------------------------------------------------------------------- */

.dp-widget__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 12px;
	color: var(--dp-gray-400);
	margin: 0;
}

.dp-icon-lock {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* =========================================================================
   Modal overlay
   ========================================================================= */

.dp-modal {
	/* Custom property defaults — duplicated here so they work after the modal
	   is teleported to <body> (outside .dp-form-wrap) to escape Divi / Elementor
	   stacking contexts caused by CSS transforms on page sections. */
	--dp-btn-color:   #1a3353;
	--dp-btn-hover:   #2a4d7a;
	--dp-meter-color: #22c55e;
	--dp-accent:      #22c55e;
	--dp-white:       #ffffff;
	--dp-gray-50:     #f8fafc;
	--dp-gray-100:    #f1f5f9;
	--dp-gray-200:    #e2e8f0;
	--dp-gray-400:    #94a3b8;
	--dp-gray-600:    #475569;
	--dp-gray-800:    #1e293b;
	--dp-red:         #ef4444;
	--dp-green:       #22c55e;
	--dp-green-dark:  #16a34a;
	--dp-radius:      10px;
	--dp-radius-sm:   6px;
	--dp-shadow:      0 4px 24px rgba(0, 0, 0, .12);
	--dp-shadow-lg:   0 20px 60px rgba(0, 0, 0, .25);
	--dp-transition:  .15s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	color: var(--dp-gray-800);
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dp-modal[hidden] {
	display: none;
}

.dp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: dp-fade-in .25s ease;
}

/* -------------------------------------------------------------------------
   Modal inner box (split layout)
   ------------------------------------------------------------------------- */

.dp-modal__inner {
	position: relative;
	z-index: 1;
	display: flex;
	width: min(900px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	background: var(--dp-white);
	border-radius: var(--dp-radius);
	overflow: hidden;
	box-shadow: var(--dp-shadow-lg);
	animation: dp-modal-in .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* -------------------------------------------------------------------------
   Left panel (campaign info + image)
   ------------------------------------------------------------------------- */

.dp-modal__left {
	position: relative;
	flex: 0 0 340px;
	min-height: 480px;
	background: #111827;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.dp-modal__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .55;
}

.dp-modal__image-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(145deg, #1a3353, #0f1f33);
}

.dp-modal__left-overlay {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: 28px;
	background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
}

.dp-modal__campaign-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: rgba(255,255,255,.6);
	margin: 0 0 6px;
}

.dp-modal__campaign-name {
	font-size: 20px;
	font-weight: 700;
	color: var(--dp-white);
	margin: 0 0 16px;
	line-height: 1.3;
}

.dp-modal__progress-wrap {
	margin-top: 8px;
}

.dp-modal__progress-bar {
	height: 6px;
	background: rgba(255,255,255,.2);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 8px;
}

.dp-modal__progress-fill {
	height: 100%;
	border-radius: 999px;
	transition: width .4s ease;
}

.dp-modal__raised {
	font-size: 13px;
	color: rgba(255,255,255,.8);
	margin: 0;
}

.dp-modal__raised strong {
	color: var(--dp-white);
	font-size: 15px;
}

/* -------------------------------------------------------------------------
   Right panel (form)
   ------------------------------------------------------------------------- */

.dp-modal__right {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Modal header */
.dp-modal__header {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid var(--dp-gray-100);
	min-height: 56px;
	flex-shrink: 0;
}

.dp-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	border-radius: var(--dp-radius-sm);
	cursor: pointer;
	color: var(--dp-gray-600);
	transition: background var(--dp-transition), color var(--dp-transition);
	flex-shrink: 0;
}

.dp-icon-btn:hover {
	background: var(--dp-gray-100);
	color: var(--dp-gray-800);
}

.dp-icon-btn svg {
	width: 18px;
	height: 18px;
}

.dp-modal__summary {
	flex: 1;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--dp-gray-600);
}

.dp-modal__summary-amount {
	color: var(--dp-gray-800);
}

.dp-modal__summary-freq {
	font-weight: 400;
}

/* Step dots */
.dp-step-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 12px 0 4px;
	flex-shrink: 0;
}

.dp-step-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dp-gray-200);
	transition: background var(--dp-transition), transform var(--dp-transition);
}

.dp-step-dot--active {
	background: var(--dp-btn-color);
	transform: scale(1.3);
}

/* =========================================================================
   Steps container
   ========================================================================= */

.dp-steps {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px 28px 28px;
	-webkit-overflow-scrolling: touch;
}

.dp-step {
	display: none;
}

.dp-step--active {
	display: block;
	animation: dp-step-in .25s ease;
}

.dp-step--back {
	animation: dp-step-back .25s ease;
}

@keyframes dp-step-in {
	from { opacity: 0; transform: translateX(16px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes dp-step-back {
	from { opacity: 0; transform: translateX(-16px); }
	to   { opacity: 1; transform: translateX(0); }
}

.dp-step__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--dp-gray-800);
	margin: 0 0 4px;
}

.dp-step__subtitle {
	font-size: 13px;
	color: var(--dp-gray-600);
	margin: 0 0 20px;
}

.dp-step__body {
	margin-top: 20px;
}

.dp-step__body--centered {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* =========================================================================
   Form fields
   ========================================================================= */

.dp-field-group {
	margin-bottom: 16px;
}

.dp-field-group label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dp-gray-800);
	margin-bottom: 6px;
}

.dp-required {
	color: var(--dp-red);
	font-weight: 700;
}

.dp-label-opt {
	font-size: 11px;
	font-weight: 400;
	color: var(--dp-gray-400);
}

.dp-field {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var(--dp-gray-200);
	border-radius: var(--dp-radius-sm);
	font-size: 14px;
	font-family: inherit;
	color: var(--dp-gray-800);
	background: var(--dp-white);
	transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
}

.dp-field:focus {
	outline: none;
	border-color: var(--dp-btn-color);
	box-shadow: 0 0 0 3px rgba(26, 51, 83, .1);
}

.dp-field--select {
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 20px;
	appearance: none;
	cursor: pointer;
}

.dp-field--textarea {
	resize: vertical;
	min-height: 72px;
	font-family: inherit;
}

/* Name row: Title | First name (row 1), Last name full-width (row 2) */
.dp-step__row--name {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 8px;
}

.dp-step__row--name .dp-field-group--last {
	grid-column: 1 / -1;
}

/* Half-width field (postcode) */
.dp-field-group--half {
	max-width: 180px;
}

/* =========================================================================
   Radio buttons (custom)
   ========================================================================= */

.dp-fieldset {
	border: none;
	padding: 0;
	margin: 0 0 16px;
}

.dp-fieldset__legend {
	font-size: 13px;
	font-weight: 600;
	color: var(--dp-gray-800);
	margin-bottom: 10px;
	display: block;
	float: left;
	width: 100%;
}

.dp-radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dp-radio-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--dp-gray-800);
	cursor: pointer;
}

.dp-radio-label input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0; height: 0;
}

.dp-radio-custom {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border: 2px solid var(--dp-gray-400);
	border-radius: 50%;
	background: var(--dp-white);
	transition: border-color var(--dp-transition);
	position: relative;
}

.dp-radio-custom::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--dp-btn-color);
	transition: transform var(--dp-transition);
}

.dp-radio-label input[type="radio"]:checked ~ .dp-radio-custom {
	border-color: var(--dp-btn-color);
}

.dp-radio-label input[type="radio"]:checked ~ .dp-radio-custom::after {
	transform: translate(-50%, -50%) scale(1);
}

.dp-radio-label input[type="radio"]:focus-visible ~ .dp-radio-custom {
	box-shadow: 0 0 0 3px rgba(26, 51, 83, .2);
}

/* =========================================================================
   Checkboxes (custom)
   ========================================================================= */

.dp-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.dp-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--dp-gray-600);
	cursor: pointer;
	line-height: 1.4;
}

.dp-checkbox-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0; height: 0;
}

.dp-checkbox-custom {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border: 2px solid var(--dp-gray-400);
	border-radius: 4px;
	background: var(--dp-white);
	transition: background var(--dp-transition), border-color var(--dp-transition);
	position: relative;
}

.dp-checkbox-custom::after {
	content: '';
	position: absolute;
	top: 2px; left: 5px;
	width: 5px; height: 9px;
	border: 2px solid var(--dp-white);
	border-top: none; border-left: none;
	transform: rotate(45deg) scale(0);
	transition: transform var(--dp-transition);
}

.dp-checkbox-label input[type="checkbox"]:checked ~ .dp-checkbox-custom {
	background: var(--dp-btn-color);
	border-color: var(--dp-btn-color);
}

.dp-checkbox-label input[type="checkbox"]:checked ~ .dp-checkbox-custom::after {
	transform: rotate(45deg) scale(1);
}

.dp-checkbox-label input[type="checkbox"]:focus-visible ~ .dp-checkbox-custom {
	box-shadow: 0 0 0 3px rgba(26, 51, 83, .2);
}

/* =========================================================================
   Step error
   ========================================================================= */

.dp-step__error {
	padding: 10px 14px;
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: var(--dp-radius-sm);
	font-size: 13px;
	color: #b91c1c;
	margin-bottom: 16px;
}

/* =========================================================================
   Step action button (Continue / Pay)
   ========================================================================= */

.dp-step-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 24px;
	background: var(--dp-btn-color);
	color: var(--dp-white);
	border: none;
	border-radius: var(--dp-radius-sm);
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background var(--dp-transition), opacity var(--dp-transition), transform .1s ease;
	text-align: center;
}

.dp-step-btn:hover:not(:disabled) {
	background: var(--dp-btn-hover);
}

.dp-step-btn:active:not(:disabled) {
	transform: scale(.99);
}

.dp-step-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.dp-btn-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.dp-link-btn {
	background: none;
	border: none;
	font-size: 13px;
	color: var(--dp-gray-600);
	cursor: pointer;
	padding: 8px;
	font-family: inherit;
	text-decoration: underline;
	transition: color var(--dp-transition);
}

.dp-link-btn:hover {
	color: var(--dp-gray-800);
}

/* =========================================================================
   Gift Aid step (step 2)
   ========================================================================= */

.dp-gift-aid-icon {
	font-size: 52px;
	margin-bottom: 16px;
}

.dp-gift-aid-lead {
	font-size: 15px;
	color: var(--dp-gray-600);
	line-height: 1.6;
	max-width: 340px;
	margin-bottom: 20px;
}

.dp-gift-aid-boost-amount {
	font-size: 17px;
	color: var(--dp-green-dark);
}

.dp-gift-aid-decl {
	background: var(--dp-gray-50);
	border: 1px solid var(--dp-gray-200);
	border-radius: var(--dp-radius-sm);
	padding: 14px 16px;
	margin-bottom: 24px;
	text-align: left;
	width: 100%;
}

.dp-gift-aid-decl__text {
	font-size: 12px;
	color: var(--dp-gray-600);
	line-height: 1.7;
	margin: 0;
}

.dp-gift-aid-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.dp-gift-aid-actions .dp-step-btn {
	background: var(--dp-green-dark);
}

.dp-gift-aid-actions .dp-step-btn:hover {
	background: #15803d;
}

/* =========================================================================
   Payment step (step 4)
   ========================================================================= */

/* Donation summary line */
.dp-payment-summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	background: var(--dp-gray-50);
	border-radius: var(--dp-radius-sm);
	font-size: 14px;
	color: var(--dp-gray-600);
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.dp-payment-summary__amount {
	font-size: 18px;
	font-weight: 700;
	color: var(--dp-gray-800);
}

.dp-payment-summary__desig::before {
	content: '·';
	margin-right: 6px;
}

/* Stripe Element container */
.dp-payment-element-wrap {
	position: relative;
	min-height: 180px;
	margin-bottom: 20px;
}

.dp-payment-element {
	/* Stripe mounts here — do not set height */
}

.dp-payment-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 160px;
	font-size: 14px;
	color: var(--dp-gray-400);
}

.dp-payment-loading--hidden {
	display: none;
}

/* Spinner ring */
.dp-spinner-ring {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--dp-gray-200);
	border-top-color: var(--dp-btn-color);
	border-radius: 50%;
	animation: dp-spin .65s linear infinite;
	flex-shrink: 0;
}

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

/* Cover fees */
.dp-cover-fees {
	margin-bottom: 16px;
}

.dp-cover-fees-amount {
	color: var(--dp-gray-600);
	font-weight: 600;
}

.dp-cover-fees-note {
	font-size: 12px;
	color: var(--dp-gray-400);
	margin: 4px 0 0 28px;
}

/* Dedication */
.dp-dedication {
	margin-bottom: 20px;
}

.dp-dedication__label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dp-gray-800);
	margin-bottom: 6px;
}

/* Payment total */
.dp-payment-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--dp-gray-50);
	border: 1px solid var(--dp-gray-200);
	border-radius: var(--dp-radius-sm);
	font-size: 14px;
	margin-bottom: 20px;
}

.dp-payment-total__label {
	color: var(--dp-gray-600);
	font-weight: 500;
}

.dp-payment-total__amount {
	font-size: 20px;
	font-weight: 700;
	color: var(--dp-gray-800);
}

/* Pay button */
.dp-pay-btn {
	font-size: 16px;
	gap: 10px;
	margin-bottom: 12px;
}

.dp-pay-btn__label {
	flex: 1;
}

.dp-pay-btn__amount {
	font-weight: 800;
	font-size: 17px;
}

.dp-btn-icon--lock {
	width: 16px;
	height: 16px;
}

.dp-secure-notice {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 12px;
	color: var(--dp-gray-400);
	margin: 0;
}

/* =========================================================================
   Success step (step 5)
   ========================================================================= */

.dp-success {
	padding: 12px 0 8px;
}

.dp-success__icon {
	width: 72px;
	height: 72px;
	margin-bottom: 24px;
	color: var(--dp-green-dark);
}

.dp-success__svg {
	width: 72px;
	height: 72px;
}

/* Circle draws in */
.dp-success__circle {
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-linecap: round;
	animation: dp-stroke .6s cubic-bezier(.65, 0, .45, 1) .1s forwards;
}

/* Checkmark draws in */
.dp-success__check {
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	stroke-linecap: round;
	animation: dp-stroke .35s cubic-bezier(.65, 0, .45, 1) .6s forwards;
}

@keyframes dp-stroke {
	to { stroke-dashoffset: 0; }
}

.dp-success__title {
	font-size: 26px;
	color: var(--dp-gray-800);
	margin-bottom: 16px;
}

.dp-success__name {
	color: var(--dp-btn-color);
}

.dp-success__message {
	font-size: 15px;
	color: var(--dp-gray-600);
	line-height: 1.7;
	max-width: 340px;
	margin-bottom: 16px;
}

.dp-success__receipt {
	font-size: 13px;
	color: var(--dp-gray-400);
	margin-bottom: 28px;
}

.dp-success__email {
	color: var(--dp-gray-600);
}

.dp-success-close {
	background: var(--dp-btn-color);
	color: var(--dp-white);
	max-width: 200px;
}

.dp-success-close:hover {
	background: var(--dp-btn-hover) !important;
}

/* =========================================================================
   Modal animations
   ========================================================================= */

@keyframes dp-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes dp-modal-in {
	from { opacity: 0; transform: scale(.95) translateY(10px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* =========================================================================
   Theme compatibility reset
   Divi, Elementor, Kadence, and most other builders override raw
   input/select/label/button elements with their own !important rules.
   These scoped overrides win the specificity war without polluting globals.
   ========================================================================= */

/* Box model */
.dp-modal *,
.dp-modal *::before,
.dp-modal *::after {
	box-sizing: border-box !important;
}

/* All text-like inputs, selects, textareas */
.dp-modal input[type="text"],
.dp-modal input[type="email"],
.dp-modal input[type="tel"],
.dp-modal input[type="number"],
.dp-modal input[type="password"],
.dp-modal textarea,
.dp-modal select {
	-webkit-appearance: none !important;
	   -moz-appearance: none !important;
	        appearance: none !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 10px 12px !important;
	margin: 0 0 0 0 !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: #1e293b !important;
	background-color: #ffffff !important;
	background-image: none !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	outline: none !important;
	vertical-align: middle !important;
	max-width: 100% !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
}

/* Focus */
.dp-modal input[type="text"]:focus,
.dp-modal input[type="email"]:focus,
.dp-modal input[type="tel"]:focus,
.dp-modal input[type="number"]:focus,
.dp-modal input[type="password"]:focus,
.dp-modal textarea:focus,
.dp-modal select:focus {
	border-color: var(--dp-btn-color) !important;
	box-shadow: 0 0 0 3px rgba(26, 51, 83, .1) !important;
	outline: none !important;
}

/* Select: restore chevron arrow killed by appearance:none */
.dp-modal select {
	padding-right: 36px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 20px !important;
	cursor: pointer !important;
}

/* Textarea */
.dp-modal textarea {
	resize: vertical !important;
	min-height: 72px !important;
}

/* Invalid field state */
.dp-modal input.dp-field--invalid,
.dp-modal select.dp-field--invalid,
.dp-modal textarea.dp-field--invalid {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}

/* Hide native checkbox/radio — builder resets break our opacity:0 trick */
.dp-modal input[type="checkbox"],
.dp-modal input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	   -moz-appearance: none !important;
	        appearance: none !important;
}

/* Labels — Divi/Elementor often add float:left, explicit widths, or caps */
.dp-modal .dp-field-group label,
.dp-modal .dp-dedication__label {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: #1e293b !important;
	background: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin-bottom: 6px !important;
	padding: 0 !important;
	cursor: default !important;
}

/* Checkbox/radio labels need different treatment */
.dp-modal .dp-checkbox-label,
.dp-modal .dp-radio-label {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: #475569 !important;
	background: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
}

/* Buttons — stop builders overriding font/line-height */
.dp-modal button {
	font-family: inherit !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* =========================================================================
   Builder colour override guard — widget (on-page, outside modal)
   Elementor / Divi / Kadence generate selectors like
   .elementor-element.elementor-element-XXX button  (0,2,1 specificity)
   which beat our single-class rules.  Using .dp-form-wrap as a prefix
   gives us (0,2,0) and the !important seals it.
   ========================================================================= */

/* Donate Now button */
.dp-form-wrap .dp-donate-btn {
	background:       var(--dp-btn-color) !important;
	background-color: var(--dp-btn-color) !important;
	color: #ffffff !important;
	border-color: var(--dp-btn-color) !important;
}
.dp-form-wrap .dp-donate-btn:hover {
	background:       var(--dp-btn-hover) !important;
	background-color: var(--dp-btn-hover) !important;
}

/* Frequency toggle active state (One-time / Monthly) */
.dp-form-wrap .dp-toggle-btn--active {
	background:       var(--dp-btn-color) !important;
	background-color: var(--dp-btn-color) !important;
	color: #ffffff !important;
}

/* Selected predefined amount button */
.dp-form-wrap .dp-amount-btn--selected {
	background:       var(--dp-btn-color) !important;
	background-color: var(--dp-btn-color) !important;
	border-color:     var(--dp-btn-color) !important;
	color: #ffffff !important;
}

/* =========================================================================
   Shortcode error message
   ========================================================================= */

.dp-shortcode-error {
	padding: 14px 18px;
	background: #fef3c7;
	border-left: 4px solid #f59e0b;
	border-radius: var(--dp-radius-sm, 6px);
	font-size: 14px;
	color: #92400e;
}

.dp-ended-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	max-width: 480px;
}

.dp-ended-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 22px;
	background: var(--dp-btn-color, #1a3353);
	color: #fff !important;
	font-size: .9375rem;
	font-weight: 700;
	border-radius: var(--dp-radius-sm, 6px);
	text-decoration: none;
	transition: opacity .18s ease;
}
.dp-ended-cta:hover { opacity: .88; }
.dp-ended-cta::after {
	content: '→';
	font-size: 1rem;
}

/* =========================================================================
   Mobile / responsive
   ========================================================================= */

/* On mobile: modal becomes full-page, no split layout */
@media (max-width: 767px) {

	.dp-modal__inner {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		flex-direction: column;
		animation: dp-mobile-in .3s ease;
	}

	.dp-modal__backdrop {
		display: none;
	}

	.dp-modal__left {
		display: none;
	}

	.dp-modal__right {
		flex: 1;
		overflow: hidden;
	}

	.dp-steps {
		padding: 16px 20px 20px;
	}

@keyframes dp-mobile-in {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}

}

@media (max-width: 480px) {

	.dp-widget {
		padding: 20px 16px;
	}

	.dp-widget__amounts {
		grid-template-columns: repeat(3, 1fr);
	}

	.dp-steps {
		padding: 14px 16px 20px;
	}

}

/* =========================================================================
   Sticky Donate Button
   ========================================================================= */

.dp-sticky-btn {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border: none;
	border-radius: 50px;
	background: #1a3353; /* overridden by inline style */
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(0,0,0,.22);
	transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
	opacity: 1;
}

.dp-sticky-btn::before {
	content: '💚';
	font-size: 16px;
}

.dp-sticky-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 32px rgba(0,0,0,.28);
}

.dp-sticky-btn:active {
	transform: translateY(0);
}

/* Hide when modal is open so they don't overlap */
.dp-modal-open .dp-sticky-btn {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 480px) {
	.dp-sticky-btn {
		bottom: 16px;
		right: 16px;
		padding: 12px 20px;
		font-size: 14px;
	}
}

/* =========================================================================
   Donation Meter  [dp_meter]
   ========================================================================= */

.dp-meter-wrap {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	padding: 28px 16px 20px;
	font-family: inherit;
}

/* Large raised amount */
.dp-meter__amount-row {
	margin-bottom: 8px;
}

.dp-meter__raised-amount {
	display: block;
	/* --dp-meter-font-size set per-campaign via inline style; falls back to 1.8rem */
	font-size: var(--dp-meter-font-size, 1.8rem);
	font-weight: 800;
	/* --dp-meter-text-color set per-campaign; falls back to --dp-meter-color (bar colour) */
	color: var(--dp-meter-text-color, var(--dp-meter-color, #22c55e));
	line-height: 1.1;
	letter-spacing: -.02em;
}

.dp-meter__goal-label {
	display: block;
	font-size: 15px;
	/* --dp-meter-subtitle-color set per-campaign; falls back to gray */
	color: var(--dp-meter-subtitle-color, var(--dp-gray-500, #94a3b8));
	margin-top: 4px;
}

/* Animated bar */
.dp-meter__bar-wrap {
	margin: 20px 0 12px;
}

.dp-meter__bar-track {
	height: 6px;
	background: var(--dp-gray-200, #e2e8f0);
	border-radius: 999px;
	overflow: hidden;
}

.dp-meter__bar-fill {
	height: 100%;
	background: var(--dp-meter-color, #22c55e);
	border-radius: 999px;
	transition: width 1.4s cubic-bezier(.22, 1, .36, 1);
}

/* Meta row: supporters · percentage · days left */
.dp-meter__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 14px;
	color: var(--dp-gray-600, #64748b);
	flex-wrap: wrap;
}

.dp-meter__meta strong {
	color: var(--dp-gray-800, #1e293b);
}

.dp-meter__supporters,
.dp-meter__days {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.dp-meter__pct-badge {
	background: var(--dp-meter-color, #22c55e);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
}

/* =========================================================================
   Donor Leaderboard  [dp_leaderboard]
   ========================================================================= */

.dp-leaderboard {
	max-width: 520px;
}

.dp-leaderboard__title,
.dp-comments__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--dp-gray-800);
	margin: 0 0 16px;
}

.dp-leaderboard__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dp-leaderboard__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--dp-gray-50);
	border: 1px solid var(--dp-gray-100);
	border-radius: var(--dp-radius-sm);
	transition: background var(--dp-transition);
}

.dp-leaderboard__item--top {
	background: #f0fdf4;
	border-color: #86efac;
}

.dp-leaderboard__rank {
	flex-shrink: 0;
	width: 32px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	color: var(--dp-gray-400);
}

.dp-leaderboard__item--top .dp-leaderboard__rank {
	color: var(--dp-green-dark);
}

.dp-leaderboard__name {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	color: var(--dp-gray-800);
}

.dp-leaderboard__amount {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--dp-green-dark);
}

/* =========================================================================
   Dedication Messages  [dp_comments]
   ========================================================================= */

.dp-comments {
	max-width: 680px;
}

.dp-comments__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dp-comment {
	padding: 16px 20px;
	background: var(--dp-gray-50);
	border-left: 3px solid var(--dp-green);
	border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
}

.dp-comment__message {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--dp-gray-800);
}

.dp-comment__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--dp-gray-400);
}

.dp-comment__author {
	font-weight: 600;
	color: var(--dp-gray-600);
}

.dp-comment__meta::before {
	content: '—';
	color: var(--dp-gray-200);
}

/* =========================================================================
   Phase 10 — UX Polish
   ========================================================================= */

/* -------------------------------------------------------------------------
   Field invalid state (validation shake)
   ------------------------------------------------------------------------- */

.dp-field--invalid {
	border-color: var(--dp-red) !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
	animation: dp-shake .35s ease;
}

.dp-field--invalid:focus {
	border-color: var(--dp-red) !important;
}

@keyframes dp-shake {
	0%, 100% { transform: translateX(0); }
	20%       { transform: translateX(-5px); }
	40%       { transform: translateX(5px); }
	60%       { transform: translateX(-4px); }
	80%       { transform: translateX(4px); }
}

/* Inline field-level error message */
.dp-field-error {
	display: block;
	font-size: 12px;
	color: var(--dp-red);
	margin-top: 4px;
}

/* -------------------------------------------------------------------------
   Step entry: stagger child fields so they cascade in
   ------------------------------------------------------------------------- */

.dp-step--active .dp-field-group:nth-child(1) { animation-delay:  0ms; }
.dp-step--active .dp-field-group:nth-child(2) { animation-delay: 30ms; }
.dp-step--active .dp-field-group:nth-child(3) { animation-delay: 60ms; }
.dp-step--active .dp-field-group:nth-child(4) { animation-delay: 90ms; }
.dp-step--active .dp-fieldset:nth-child(1)    { animation-delay:  0ms; }
.dp-step--active .dp-fieldset:nth-child(2)    { animation-delay: 40ms; }

/* -------------------------------------------------------------------------
   Modal close animation
   ------------------------------------------------------------------------- */

.dp-modal--closing .dp-modal__inner {
	animation: dp-modal-out .2s cubic-bezier(.4, 0, 1, 1) forwards;
}

.dp-modal--closing .dp-modal__backdrop {
	animation: dp-fade-out .2s ease forwards;
}

@keyframes dp-modal-out {
	from { opacity: 1; transform: scale(1) translateY(0); }
	to   { opacity: 0; transform: scale(.97) translateY(6px); }
}

@keyframes dp-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* Mobile modal close slides down */
@media (max-width: 767px) {
	.dp-modal--closing .dp-modal__inner {
		animation: dp-mobile-out .25s ease forwards;
	}
	@keyframes dp-mobile-out {
		from { transform: translateY(0); }
		to   { transform: translateY(100%); }
	}
}

/* -------------------------------------------------------------------------
   Pay button loading state
   ------------------------------------------------------------------------- */

.dp-step-btn--loading {
	pointer-events: none;
	opacity: .85;
}

.dp-step-btn--loading .dp-btn-icon {
	display: none;
}

/* -------------------------------------------------------------------------
   Amount button micro-bounce on selection
   ------------------------------------------------------------------------- */

.dp-amount-btn--selected {
	animation: dp-amount-pop .2s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes dp-amount-pop {
	from { transform: scale(.92); }
	to   { transform: scale(1); }
}

/* -------------------------------------------------------------------------
   Meter bar: animate from 0 to target width on first intersection
   ------------------------------------------------------------------------- */

.dp-meter__bar {
	transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
}

.dp-meter__bar--init {
	width: 0 !important;
	transition: none;
}

/* -------------------------------------------------------------------------
   iOS safe-area: extra bottom padding on mobile so CTA clears home indicator
   ------------------------------------------------------------------------- */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
	@media (max-width: 767px) {
		.dp-steps {
			padding-bottom: calc(20px + env(safe-area-inset-bottom));
		}
	}
}

/* -------------------------------------------------------------------------
   Scroll shadow in steps area (shows overflow cue at bottom)
   ------------------------------------------------------------------------- */

.dp-modal__right {
	position: relative;
}

.dp-modal__right::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 32px;
	background: linear-gradient(to top, rgba(255,255,255,.9) 0%, transparent 100%);
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity .2s ease;
}

.dp-modal__right.dp-scrollable::after {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   Reduced motion: disable all animations + transitions
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.dp-modal__inner,
	.dp-modal__backdrop,
	.dp-modal--closing .dp-modal__inner,
	.dp-modal--closing .dp-modal__backdrop,
	.dp-step--active,
	.dp-step--back,
	.dp-success__circle,
	.dp-success__check,
	.dp-donate-btn__pulse,
	.dp-meter__bar,
	.dp-amount-btn--selected,
	.dp-field--invalid {
		animation: none !important;
		transition: none !important;
	}
}