/* Payment panel — PayPal background, bank link, PayPal hover heartbeat
   Loaded on donate/checkout/project-details (bundle may omit donate.css updates). */

@keyframes fue-paypal-heartbeat {
	0%,
	100% {
		transform: scale(1);
	}

	15% {
		transform: scale(1.06);
	}

	30% {
		transform: scale(1);
	}

	45% {
		transform: scale(1.06);
	}

	60% {
		transform: scale(1);
	}
}

/* Payment method — green box selector (replaces orange radio circles) */
.donation-details__quote-radio {
	gap: 12px;
	align-items: stretch;
}

.donation-details__quote-radio .custom-radio {
	justify-content: center;
	gap: 0;
	padding: 16px 24px;
	border: 4px solid rgba(52, 52, 52, 0.12);
	border-radius: var(--anity-bdr-radius);
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.donation-details__quote-radio .custom-radio .radio-dot {
	display: none !important;
}

.donation-details__quote-radio .custom-radio:hover,
.donation-details__quote-radio .custom-radio:has(input[type="radio"]:checked) {
	border-color: #32CD32 !important;
}

html.night-view .donation-details__quote-radio .custom-radio {
	border-color: rgba(255, 255, 255, 0.12);
}

html.night-view .donation-details__quote-radio .custom-radio:hover,
html.night-view .donation-details__quote-radio .custom-radio:has(input[type="radio"]:checked) {
	border-color: #32CD32 !important;
}

/* EveryPay bank rows — green border selector */
.everypay-bank-list {
	padding: 8px !important;
}

.everypay-bank-list__item {
	border-bottom: 0 !important;
	padding: 4px 0 !important;
}

.everypay-bank-row {
	border: 4px solid transparent !important;
	border-radius: 12px !important;
	transition: border-color 0.15s ease !important;
}

.everypay-bank-row:hover,
.everypay-bank-row--selected {
	border-color: #32CD32 !important;
}

/* Bank account number — green when hovered / active */
.donation-details__donate-amout a {
	font-size: 20px;
	font-weight: 400;
	color: var(--anity-base);
}

.donation-details__donate-amout a:hover,
.donation-details__donate-amout a:focus-visible,
.donation-details__donate-amout a:active {
	color: #006400 !important;
}

html.night-view .donation-details__donate-amout a {
	color: var(--anity-base);
}

html.night-view .donation-details__donate-amout a:hover,
html.night-view .donation-details__donate-amout a:focus-visible,
html.night-view .donation-details__donate-amout a:active {
	color: #006400 !important;
}

/* PayPal panel — match donation box background (day) */
html:not(.night-view) #paypal-gateway-div,
html:not(.night-view) #paypal-gateway-div .paypal-buttons-wrapper,
html:not(.night-view) #paypal-gateway-div #paypal-button-container,
html:not(.night-view) #paypal-gateway-div .paypal-buttons,
html:not(.night-view) #paypal-gateway-div .paypal-button,
html:not(.night-view) #paypal-gateway-div .paypal-button-tagline,
html:not(.night-view) #paypal-gateway-div .zoid-outlet,
html:not(.night-view) #paypal-gateway-div .component-frame {
	background-color: var(--anity-extra-two) !important;
}

/* PayPal panel — match donation box background (night) */
html.night-view #paypal-gateway-div,
html.night-view #paypal-gateway-div .paypal-buttons-wrapper,
html.night-view #paypal-gateway-div #paypal-button-container,
html.night-view #paypal-gateway-div .paypal-buttons,
html.night-view #paypal-gateway-div .paypal-button,
html.night-view #paypal-gateway-div .paypal-button-tagline,
html.night-view #paypal-gateway-div .zoid-outlet,
html.night-view #paypal-gateway-div .component-frame {
	background-color: #2e2e2e !important;
}

@keyframes fue-donation-amount-heartbeat {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.35);
	}

	15% {
		box-shadow: 0 0 0 4px rgba(204, 0, 0, 0.55);
	}

	30% {
		box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.35);
	}

	45% {
		box-shadow: 0 0 0 4px rgba(204, 0, 0, 0.55);
	}

	60% {
		box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.35);
	}
}

#donation_amount.donation-amount--invalid,
.donation-details__donate-box input.addAmount-value.donation-amount--invalid {
	border: 3px solid #cc0000 !important;
	animation: fue-donation-amount-heartbeat 1s ease-in-out infinite;
	outline: none;
	box-sizing: border-box;
}

#paypal-gateway-div,
#paypal-gateway-div .paypal-buttons-wrapper,
#paypal-gateway-div #paypal-button-container {
	color-scheme: light;
}

#paypal-gateway-div .paypal-buttons-wrapper {
	max-width: 100%;
	box-sizing: border-box;
}

/* Heartbeat on the gold PayPal button row while hovered */
#paypal-gateway-div .paypal-buttons-layout-vertical .paypal-button:first-child {
	transform-origin: center center;
}

#paypal-gateway-div .paypal-buttons-layout-vertical .paypal-button:first-child:hover {
	animation: fue-paypal-heartbeat 1s ease-in-out infinite;
}

/* Donation payment warning — same red in day and night */
.donation-details__payment-method-box .donation-payment-warning,
.donation-details__payment-method-box .text-danger,
.donation-details__payment-method-box .text-danger .ui-icon {
	color: #cc0000 !important;
	text-align: left;
	margin-left: 0;
	padding-left: 0;
}

html.night-view .donation-details__payment-method-box .donation-payment-warning,
html.night-view .donation-details__payment-method-box .text-danger,
html.night-view .donation-details__payment-method-box .text-danger .ui-icon {
	color: #cc0000 !important;
}

/* Montonio — keep non-active region banks hidden (SDK uses .montonio-bank-item--hidden) */
#montonio-checkout .montonio-bank.montonio-bank-item--hidden {
	display: none !important;
}

/* Montonio — match payment panel background (day) */
html:not(.night-view) #montonio-gateway-div,
html:not(.night-view) #montonio-gateway-div #montonio-checkout,
html:not(.night-view) #montonio-checkout .montonio-container,
html:not(.night-view) #montonio-checkout .montonio-bank {
	background-color: var(--anity-extra-two) !important;
}

html:not(.night-view) #montonio-checkout select,
html:not(.night-view) #montonio-checkout .montonio-bank-select-class,
html:not(.night-view) .donation-details #montonio-checkout select,
html:not(.night-view) .checkout-page #montonio-checkout select,
html:not(.night-view) #montonio-gateway-div #montonio-checkout select {
	background-color: var(--anity-extra-two) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23374151' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px 8px !important;
	border: 2px solid rgba(52, 52, 52, 0.12) !important;
	color: #374151 !important;
	padding-right: 40px !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color-scheme: light;
}

html:not(.night-view) #montonio-checkout select option {
	background-color: var(--anity-extra-two) !important;
	color: #374151 !important;
}

html:not(.night-view) #montonio-checkout > div,
html:not(.night-view) #montonio-checkout > label {
	background-color: var(--anity-extra-two) !important;
}

html:not(.night-view) #montonio-checkout .montonio-bank {
	background-color: var(--anity-extra-two) !important;
	transition: border-color 0.15s ease;
	cursor: pointer;
	border: 4px solid rgba(52, 52, 52, 0.12) !important;
	box-sizing: border-box;
}

/* SEB — dark logo only; boost when selected in night mode */
html.night-view #montonio-checkout .montonio-bank.montonio-bank-active[data-bank="SEB"] img,
html.night-view #montonio-checkout .montonio-bank.montonio-bank-active[data-bank="seb"] img,
html.night-view #montonio-checkout .montonio-bank.montonio-bank-active[id*="-SEB"] img,
html.night-view #montonio-checkout .montonio-bank.montonio-bank-active[id*="-seb"] img {
	filter: brightness(2.4) contrast(1.05) !important;
	opacity: 1 !important;
}

html:not(.night-view) #montonio-checkout .montonio-bank:hover,
html:not(.night-view) #montonio-checkout .montonio-bank.montonio-bank-active {
	border-color: #32CD32 !important;
}

/* Montonio — match payment panel background (night) */
html.night-view #montonio-gateway-div,
html.night-view #montonio-gateway-div #montonio-checkout,
html.night-view #montonio-checkout .montonio-container,
html.night-view #montonio-checkout .montonio-bank {
	background-color: #2e2e2e !important;
}

html.night-view #montonio-checkout select,
html.night-view #montonio-checkout .montonio-bank-select-class,
html.night-view #montonio-checkout input {
	background-color: #2e2e2e !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	color: var(--anity-night-text) !important;
}

html.night-view #montonio-checkout .montonio-bank {
	background-color: #2e2e2e !important;
	transition: border-color 0.15s ease;
	cursor: pointer;
	border: 4px solid rgba(255, 255, 255, 0.12) !important;
	box-sizing: border-box;
}

html.night-view #montonio-checkout .montonio-bank:hover,
html.night-view #montonio-checkout .montonio-bank.montonio-bank-active {
	border-color: #32CD32 !important;
}

/* Montonio country select — no browser focus ring */
#montonio-checkout select:focus,
#montonio-checkout select:focus-visible,
#montonio-checkout .montonio-bank-select-class:focus,
#montonio-checkout .montonio-bank-select-class:focus-visible,
.donation-details #montonio-checkout select:focus,
.donation-details #montonio-checkout select:focus-visible,
.checkout-page #montonio-checkout select:focus,
.checkout-page #montonio-checkout select:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

html:not(.night-view) #montonio-checkout select:focus,
html:not(.night-view) #montonio-checkout select:focus-visible,
html:not(.night-view) #montonio-checkout .montonio-bank-select-class:focus,
html:not(.night-view) #montonio-checkout .montonio-bank-select-class:focus-visible {
	border-color: rgba(52, 52, 52, 0.12) !important;
}

html.night-view #montonio-checkout select:focus,
html.night-view #montonio-checkout select:focus-visible,
html.night-view #montonio-checkout .montonio-bank-select-class:focus,
html.night-view #montonio-checkout .montonio-bank-select-class:focus-visible {
	border-color: rgba(255, 255, 255, 0.12) !important;
}

/* EveryPay — match payment panel background (day) */
html:not(.night-view) #everypay-gateway-div #everypay-checkout,
html:not(.night-view) .everypay-panel__card,
html:not(.night-view) .everypay-panel__head,
html:not(.night-view) .everypay-bank-row {
	background-color: var(--anity-extra-two) !important;
}

html:not(.night-view) .everypay-bank-row:hover,
html:not(.night-view) .everypay-bank-row--selected {
	border-color: #32CD32 !important;
}

/* EveryPay — match payment panel background (night) */
html.night-view #everypay-gateway-div #everypay-checkout,
html.night-view .everypay-panel__card,
html.night-view .everypay-panel__head,
html.night-view .everypay-bank-row {
	background-color: #2e2e2e !important;
}

html.night-view .everypay-panel__head-title,
html.night-view .everypay-bank-row__name,
html.night-view .everypay-panel__country-toggle {
	color: var(--anity-night-text);
}

html.night-view .everypay-panel__bank-icon {
	color: var(--anity-night-text);
}

html.night-view .everypay-panel__card {
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: none;
}

html.night-view .everypay-panel__head,
html.night-view .everypay-bank-list__item {
	border-color: rgba(255, 255, 255, 0.12);
}

html.night-view .everypay-bank-row:hover,
html.night-view .everypay-bank-row--selected {
	border-color: #32CD32 !important;
}

html.night-view .everypay-panel__country-menu {
	background-color: #2e2e2e !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html.night-view .everypay-panel__country-option:hover,
html.night-view .everypay-panel__country-option--active {
	background-color: #1a1a1a !important;
}

/* Stripe embedded checkout — match payment panel background (day) */
html:not(.night-view) #stripe-checkout-gateway-div,
html:not(.night-view) #stripe-checkout-gateway-div .stripe-embedded-wrap,
html:not(.night-view) #stripe-embedded-checkout,
html:not(.night-view) #stripe-contact-details,
html:not(.night-view) #stripe-payment-element {
	background-color: var(--anity-extra-two) !important;
}

/* Stripe embedded checkout — match payment panel background (night) */
html.night-view #stripe-checkout-gateway-div,
html.night-view #stripe-checkout-gateway-div .stripe-embedded-wrap,
html.night-view #stripe-embedded-checkout,
html.night-view #stripe-contact-details,
html.night-view #stripe-payment-element {
	background-color: #2e2e2e !important;
	color-scheme: dark;
}

html.night-view .stripe-embedded-hint {
	color: #ababab;
}

html.night-view #stripe-embedded-checkout.stripe-checkout--embedded_page,
html.night-view #stripe-embedded-checkout.stripe-checkout--embedded,
html.night-view #stripe-embedded-checkout.stripe-checkout--form,
html.night-view #stripe-embedded-checkout.stripe-checkout--night {
	background-color: #2e2e2e !important;
}

html.night-view #stripe-embedded-checkout.stripe-checkout--night:not(.stripe-checkout--form) iframe,
html.night-view #stripe-embedded-checkout.stripe-checkout--embedded iframe,
html.night-view #stripe-embedded-checkout.stripe-checkout--embedded_page iframe {
	filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.95);
	border-radius: 8px;
}
