/**
 * Smartly Donations — formulaire public.
 *
 * Les couleurs et le rayon proviennent des réglages, injectés en variables CSS
 * sur `.sd-donation`. Toutes les valeurs dérivées (survols, ombres, teintes)
 * sont calculées à partir de ces variables : changer la couleur principale dans
 * l'administration suffit à recolorer l'ensemble du formulaire de façon
 * cohérente, sans retoucher la moindre règle.
 */

.sd-donation {
	/* Repli si l'injection dynamique est absente. */
	--sd-primary: #1a6b3a;
	--sd-accent: #f5a623;
	--sd-radius: 12px;

	--sd-text: #111827;
	--sd-text-muted: #6b7280;
	--sd-surface: #ffffff;
	--sd-surface-alt: #f9fafb;
	--sd-border: #e5e7eb;
	--sd-danger: #dc2626;

	--sd-ring: color-mix(in srgb, var(--sd-primary) 25%, transparent);
	--sd-tint: color-mix(in srgb, var(--sd-primary) 6%, #ffffff);
	--sd-primary-dark: color-mix(in srgb, var(--sd-primary) 85%, #000000);

	--sd-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
	--sd-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
	--sd-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

	--sd-ease: cubic-bezier(0.4, 0, 0.2, 1);

	box-sizing: border-box;
	max-width: 640px;
	margin-inline: auto;
	padding: clamp(20px, 4vw, 36px);
	background: var(--sd-surface);
	border: 1px solid var(--sd-border);
	border-radius: calc(var(--sd-radius) * 1.5);
	box-shadow: var(--sd-shadow-lg);
	color: var(--sd-text);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.sd-donation *,
.sd-donation *::before,
.sd-donation *::after {
	box-sizing: inherit;
}

.sd-icon {
	flex: none;
	vertical-align: middle;
}

/* ------------------------------------------------------------------ En-tête */

.sd-donation__header {
	text-align: center;
	margin-bottom: 28px;
}

.sd-donation__title {
	margin: 0 0 6px;
	font-size: clamp(1.5rem, 4vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--sd-text);
}

.sd-donation__subtitle {
	margin: 0;
	color: var(--sd-text-muted);
	font-size: 0.95rem;
}

/* -------------------------------------------------------------- Progression */

.sd-steps {
	display: flex;
	justify-content: center;
	gap: clamp(24px, 8vw, 56px);
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	position: relative;
}

/* Trait de liaison entre les deux jalons. */
.sd-steps::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 25%;
	right: 25%;
	height: 2px;
	background: var(--sd-border);
	z-index: 0;
}

.sd-steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: relative;
	z-index: 1;
}

.sd-steps__dot {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sd-surface);
	border: 2px solid var(--sd-border);
	color: var(--sd-text-muted);
	font-size: 0.875rem;
	font-weight: 600;
	transition: all 0.25s var(--sd-ease);
}

.sd-steps__item.is-active .sd-steps__dot,
.sd-steps__item.is-done .sd-steps__dot {
	background: var(--sd-primary);
	border-color: var(--sd-primary);
	color: #fff;
}

.sd-steps__item.is-active .sd-steps__dot {
	box-shadow: 0 0 0 4px var(--sd-ring);
}

.sd-steps__label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--sd-text-muted);
}

.sd-steps__item.is-active .sd-steps__label {
	color: var(--sd-primary);
	font-weight: 600;
}

/* ------------------------------------------------------------------- Étapes */

.sd-step {
	display: none;
}

.sd-step.is-active {
	display: block;
	animation: sd-fade-in 0.32s var(--sd-ease);
}

@keyframes sd-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------- Périodicité */

.sd-freq {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 24px;
	background: var(--sd-surface-alt);
	border-radius: var(--sd-radius);
}

.sd-freq__tab {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 12px;
	border: 0;
	border-radius: calc(var(--sd-radius) - 4px);
	background: transparent;
	color: var(--sd-text-muted);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s var(--sd-ease);
}

.sd-freq__tab:hover {
	color: var(--sd-text);
}

.sd-freq__tab.is-active {
	background: var(--sd-surface);
	color: var(--sd-primary);
	box-shadow: var(--sd-shadow-sm);
}

/* ------------------------------------------------------------------ Montants */

.sd-amounts {
	border: 0;
	margin: 0 0 24px;
	padding: 0;
}

.sd-amounts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}

.sd-amount {
	padding: 14px 8px;
	border: 2px solid var(--sd-border);
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
	color: var(--sd-text);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s var(--sd-ease);
}

.sd-amount:hover {
	border-color: var(--sd-primary);
	transform: translateY(-2px);
	box-shadow: var(--sd-shadow-md);
}

.sd-amount.is-active {
	background: var(--sd-primary);
	border-color: var(--sd-primary);
	color: #fff;
	box-shadow: var(--sd-shadow-md);
}

/* -------------------------------------------------------------------- Champs */

.sd-field {
	margin-bottom: 18px;
}

.sd-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 7px;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sd-text);
}

.sd-optional {
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--sd-text-muted);
}

.sd-input {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--sd-border);
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
	color: var(--sd-text);
	font: inherit;
	font-size: 1rem;
	transition: border-color 0.18s var(--sd-ease), box-shadow 0.18s var(--sd-ease);
}

.sd-input:focus {
	outline: none;
	border-color: var(--sd-primary);
	box-shadow: 0 0 0 4px var(--sd-ring);
}

.sd-input.has-error {
	border-color: var(--sd-danger);
}

.sd-textarea {
	resize: vertical;
	min-height: 88px;
}

/* Retire les flèches du champ numérique, qui invitent à un usage inadapté. */
.sd-input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.sd-input[type="number"]::-webkit-outer-spin-button,
.sd-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sd-input-group {
	display: flex;
	align-items: stretch;
}

.sd-input-group__prefix {
	display: grid;
	place-items: center;
	padding-inline: 16px;
	border: 1.5px solid var(--sd-border);
	border-right: 0;
	border-radius: var(--sd-radius) 0 0 var(--sd-radius);
	background: var(--sd-surface-alt);
	color: var(--sd-text-muted);
	font-weight: 600;
}

.sd-input-group .sd-input {
	border-radius: 0 var(--sd-radius) var(--sd-radius) 0;
	font-size: 1.125rem;
	font-weight: 600;
}

.sd-hint {
	margin: 6px 0 0;
	font-size: 0.8125rem;
	color: var(--sd-text-muted);
}

.sd-error {
	display: none;
	margin: 6px 0 0;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--sd-danger);
}

.sd-error.is-visible {
	display: block;
	animation: sd-fade-in 0.2s var(--sd-ease);
}

.sd-grid {
	display: grid;
	gap: 14px;
}

.sd-grid--2 {
	grid-template-columns: 1fr 1fr;
}

/* --------------------------------------------------------------- Récapitulatif */

.sd-summary {
	padding: 16px 18px;
	margin-bottom: 24px;
	background: var(--sd-tint);
	border: 1px solid color-mix(in srgb, var(--sd-primary) 20%, transparent);
	border-radius: var(--sd-radius);
}

.sd-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.sd-summary__row + .sd-summary__row {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed color-mix(in srgb, var(--sd-primary) 18%, transparent);
}

.sd-summary__key {
	font-size: 0.875rem;
	color: var(--sd-text-muted);
}

.sd-summary__value {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--sd-primary);
}

/* ------------------------------------------------------------ Moyens de paiement */

.sd-gateways {
	border: 0;
	margin: 0 0 20px;
	padding: 0;
}

.sd-gateways__list {
	display: grid;
	gap: 10px;
}

.sd-gateway {
	display: block;
	cursor: pointer;
}

.sd-gateway[hidden] {
	display: none;
}

/* L'input reste focalisable et lisible par les technologies d'assistance ;
   seule sa présentation visuelle est remplacée par la tuile. */
.sd-gateway input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.sd-gateway__body {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 2px solid var(--sd-border);
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
	transition: all 0.2s var(--sd-ease);
}

.sd-gateway:hover .sd-gateway__body {
	border-color: color-mix(in srgb, var(--sd-primary) 45%, var(--sd-border));
}

.sd-gateway input:checked + .sd-gateway__body {
	border-color: var(--sd-primary);
	background: var(--sd-tint);
}

.sd-gateway input:focus-visible + .sd-gateway__body {
	box-shadow: 0 0 0 4px var(--sd-ring);
}

.sd-gateway__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--sd-surface-alt);
	color: var(--sd-primary);
}

.sd-gateway input:checked + .sd-gateway__body .sd-gateway__icon {
	background: var(--sd-primary);
	color: #fff;
}

.sd-gateway__label {
	flex: 1;
	font-weight: 600;
	font-size: 0.9375rem;
}

.sd-gateway__check {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sd-primary);
	color: #fff;
	opacity: 0;
	transform: scale(0.6);
	transition: all 0.2s var(--sd-ease);
}

.sd-gateway input:checked + .sd-gateway__body .sd-gateway__check {
	opacity: 1;
	transform: scale(1);
}

/* ----------------------------------------------------------------- Cases à cocher */

.sd-checkboxes {
	margin-bottom: 20px;
}

.sd-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 0.875rem;
	color: var(--sd-text-muted);
	cursor: pointer;
}

.sd-checkbox input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--sd-primary);
	cursor: pointer;
}

/* --------------------------------------------------------------------- Boutons */

.sd-actions {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.sd-actions--split .sd-btn--primary {
	flex: 1;
}

.sd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	border: 0;
	border-radius: var(--sd-radius);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s var(--sd-ease);
}

.sd-btn--block {
	width: 100%;
}

.sd-btn--primary {
	background: linear-gradient(135deg, var(--sd-primary), var(--sd-primary-dark));
	color: #fff;
	box-shadow: var(--sd-shadow-md);
}

.sd-btn--primary:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: var(--sd-shadow-lg);
}

.sd-btn--primary:active:not(:disabled) {
	transform: translateY(0);
}

.sd-btn--ghost {
	background: transparent;
	border: 1.5px solid var(--sd-border);
	color: var(--sd-text-muted);
}

.sd-btn--ghost:hover {
	border-color: var(--sd-text-muted);
	color: var(--sd-text);
}

.sd-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.sd-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--sd-ring);
}

.sd-btn__spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sd-spin 0.7s linear infinite;
}

.sd-btn.is-loading .sd-btn__spinner {
	display: block;
}

.sd-btn.is-loading .sd-btn__text {
	display: none;
}

.sd-btn__text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

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

/* -------------------------------------------------------------------- Divers */

.sd-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 16px 0 0;
	font-size: 0.8125rem;
	color: var(--sd-text-muted);
}

.sd-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 640px;
	margin-inline: auto;
	padding: 16px 18px;
	border-radius: 12px;
	font-size: 0.9375rem;
}

.sd-notice p {
	margin: 0;
}

.sd-notice--warning {
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
}

.sd-done {
	text-align: center;
	padding: 20px 0;
}

.sd-done__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--sd-tint);
	color: var(--sd-primary);
}

.sd-done__title {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 700;
}

.sd-done__text {
	margin: 0;
	color: var(--sd-text-muted);
	line-height: 1.65;
}

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 480px) {
	.sd-grid--2 {
		grid-template-columns: 1fr;
	}

	.sd-freq {
		flex-wrap: wrap;
	}

	.sd-freq__tab {
		flex: 1 1 calc(50% - 4px);
	}

	.sd-actions--split {
		flex-direction: column-reverse;
	}

	.sd-steps__label {
		display: none;
	}
}

/* ------------------------------------------------------------- Accessibilité */

@media (prefers-reduced-motion: reduce) {
	.sd-donation *,
	.sd-donation *::before,
	.sd-donation *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.sd-amount:hover,
	.sd-btn--primary:hover:not(:disabled) {
		transform: none;
	}
}

@media (forced-colors: active) {
	.sd-amount.is-active,
	.sd-gateway input:checked + .sd-gateway__body {
		border-color: Highlight;
	}
}