/**
 * Donation Selector Widget – Structural / Base Styles
 *
 * Contains only:
 *  - Browser-default resets so buttons start from zero
 *  - Layout rules (display, flex)
 *  - UX rules (cursor, pointer-events)
 *  - Checkbox normalisation
 *
 * All visual values (colours, font sizes, spacing, radius, shadows, etc.)
 * are generated by Elementor via the `selectors` defined on each control.
 */

/* ----- Box-sizing --------------------------------------------------------- */
.donation-selector-widget,
.donation-selector-widget *,
.donation-selector-widget *::before,
.donation-selector-widget *::after {
	box-sizing: border-box;
}

/* ----- Button reset (removes browser chrome) ------------------------------ */
/* Scoped under the widget wrapper to avoid bleeding into theme styles. */
.donation-selector-widget .donation-btn,
.donation-selector-widget .proceed-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	-webkit-user-select: none;
	/* Transition base — Elementor overrides duration via selectors */
	transition-property: color, background-color, border-color, box-shadow;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

/* ----- Donation button inner spans --------------------------------------- */
.donation-selector-widget .donation-btn__label {
	display: block;
}

.donation-selector-widget .donation-btn__sublabel {
	display: block;
	/* margin-top, color, typography → Elementor selectors */
}

.donation-selector-widget .donation-btn:focus-visible,
.donation-selector-widget .proceed-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ----- Buttons container ------------------------------------------------- */
.donation-buttons-wrapper {
	display: flex;
	flex-wrap: wrap;
	/* gap, justify-content, flex-direction → Elementor selectors */
}

/* ----- Privacy row ------------------------------------------------------- */
.privacy-row {
	display: flex;
	align-items: center;
	/* gap, margin-top, justify-content → Elementor selectors */
}

/* ----- Checkbox normalisation -------------------------------------------- */
.privacy-checkbox {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	flex-shrink: 0;
	cursor: pointer;
	position: relative;
	border: 2px solid currentColor;
	border-radius: 3px;
	background-color: transparent;
	/* width / height → Elementor selectors */
}

.privacy-checkbox:checked::after {
	content: '';
	display: block;
	position: absolute;
	top: 10%;
	left: 28%;
	width: 32%;
	height: 58%;
	border: 2px solid currentColor;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
}

.privacy-checkbox:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ----- Privacy label ----------------------------------------------------- */
.privacy-label {
	cursor: pointer;
	line-height: 1.4;
	/* color → Elementor selectors */
}

.privacy-label a {
	text-decoration: underline;
	/* color → Elementor selectors */
}

/* ----- Proceed wrapper --------------------------------------------------- */
.proceed-wrapper {
	display: flex;
	/* justify-content, margin-top → Elementor selectors */
}

/* ----- Proceed button – disabled UX -------------------------------------- */
.donation-selector-widget .proceed-btn:disabled,
.donation-selector-widget .proceed-btn.disabled {
	cursor: not-allowed;
	/* color, background, opacity → Elementor selectors */
}