.nazada-custom-donation-field[hidden] {
	display: none !important;
}

.nazada-custom-donation-field {
	box-sizing: border-box;
	width: 100%;
	margin: 14px 0 20px;
}

.nazada-custom-donation-field > label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
}

.nazada-custom-donation-field__control {
	display: flex;
	align-items: stretch;
	width: min(100%, 420px);
}

.nazada-custom-donation-field__currency {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	padding: 0 12px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-right: 0;
	background: rgba(0, 0, 0, 0.045);
	font-weight: 700;
}

.woocommerce .nazada-custom-donation-field__input.input-text {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0;
}

.nazada-custom-donation-field__description {
	margin: 6px 0 0;
	font-size: 0.9em;
}

/*
 * Donation variation select.
 *
 * Use one SVG arrow directly on the <select>. The browser arrow is disabled,
 * and legacy Divi/Theme Options pseudo-element arrows are neutralized by the
 * runtime reset in custom-donation.js. Keeping the arrow on the select itself
 * prevents it from inheriting the taller WooCommerce table-cell height.
 */
.nazada-custom-donation-form .variations td.value.nazada-donation-select-cell {
	position: relative !important;
	background: transparent !important;
}

.nazada-custom-donation-form .variations td.value.nazada-donation-select-cell > select,
.nazada-custom-donation-form .variations td.value.nazada-donation-select-cell select {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding-right: 46px !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 2l5 5 5-5' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 14px 9px !important;
	border-radius: 8px !important;
}

/* Base reset. JS adds a later, higher-specificity copy after theme CSS. */
.nazada-custom-donation-form .variations td.value.nazada-donation-select-cell::before,
.nazada-custom-donation-form .variations td.value.nazada-donation-select-cell::after {
	content: none !important;
	display: none !important;
	position: static !important;
	inset: auto !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	transform: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Stripe's product-page express buttons bypass arbitrary custom form fields. */
body.nazada-custom-donation-selected #wc-stripe-express-checkout-element,
body.nazada-custom-donation-selected #wc-stripe-payment-request-wrapper,
body.nazada-custom-donation-selected #wc-stripe-payment-request-button-separator,
body.nazada-custom-donation-selected #wc-stripe-express-checkout-button-separator {
	display: none !important;
}

/*
 * Divi 5 can dynamically wrap WooCommerce selects in a plain <span> and draw
 * its own caret with that wrapper's pseudo-elements. Our donation select uses
 * its own single SVG caret, so suppress Divi's wrapper caret as well as the
 * table-cell caret. This specifically handles markup such as:
 * <td class="value nazada-donation-select-cell"><span><select>...</select></span>...</td>
 */
.nazada-custom-donation-form .variations td.value.nazada-donation-select-cell > span,
.nazada-custom-donation-form .variations td.value.nazada-donation-select-cell > span.nazada-donation-select-wrap {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.nazada-custom-donation-form .variations td.value.nazada-donation-select-cell > span::before,
.nazada-custom-donation-form .variations td.value.nazada-donation-select-cell > span::after,
.nazada-custom-donation-form .variations td.value.nazada-donation-select-cell > span.nazada-donation-select-wrap::before,
.nazada-custom-donation-form .variations td.value.nazada-donation-select-cell > span.nazada-donation-select-wrap::after {
	content: none !important;
	display: none !important;
	position: static !important;
	inset: auto !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	transform: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}