/**
 * Nyumbani Donation — front-end form styles.
 *
 * Colors are never hardcoded. colors.js populates --nyd-accent / --nyd-ink /
 * --nyd-bg from the active theme; everything else (borders, surfaces, muted
 * text) is derived from those three with color-mix so the form always looks
 * native to the theme, light or dark.
 */

.nyd-donation {
	--_accent: var( --nyd-accent, #2563eb );
	--_ink: var( --nyd-ink, #1f2937 );
	--_bg: var( --nyd-bg, #ffffff );
	--_muted: color-mix( in srgb, var( --_ink ) 55%, var( --_bg ) );
	--_line: color-mix( in srgb, var( --_ink ) 16%, var( --_bg ) );
	--_surface: color-mix( in srgb, var( --_ink ) 4%, var( --_bg ) );
	--_accent-ink: color-mix( in srgb, var( --_accent ) 12%, var( --_bg ) );

	max-width: 520px;
	margin: 1.5em auto;
	color: var( --_ink );
	font-size: 16px;
	line-height: 1.5;
}

.nyd-form__title {
	margin: 0 0 .25em;
	font-size: 1.5em;
	line-height: 1.2;
}

.nyd-form__desc {
	margin: 0 0 1.25em;
	color: var( --_muted );
}

/* Frequency toggle -------------------------------------------------------- */
.nyd-freq {
	display: flex;
	gap: 6px;
	padding: 4px;
	margin-bottom: 1.1em;
	background: var( --_surface );
	border: 1px solid var( --_line );
	border-radius: 12px;
}

.nyd-freq__opt {
	flex: 1 1 auto;
	position: relative;
	text-align: center;
	cursor: pointer;
}

.nyd-freq__opt input {
	position: absolute;
	opacity: 0;
	inset: 0;
	cursor: pointer;
}

.nyd-freq__opt span {
	display: block;
	padding: 10px 8px;
	border-radius: 9px;
	font-weight: 600;
	color: var( --_muted );
	transition: background .15s ease, color .15s ease;
}

.nyd-freq__opt input:checked + span {
	background: var( --_accent );
	color: #fff;
}

.nyd-freq__opt input:focus-visible + span {
	outline: 2px solid var( --_accent );
	outline-offset: 2px;
}

/* Amount grid ------------------------------------------------------------- */
.nyd-amounts {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
	margin-bottom: 1em;
}

.nyd-amount {
	padding: 14px 8px;
	font-size: 1.05em;
	font-weight: 700;
	color: var( --_ink );
	background: var( --_bg );
	border: 2px solid var( --_line );
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .05s ease;
}

.nyd-amount:hover {
	border-color: var( --_accent );
}

.nyd-amount:active {
	transform: translateY( 1px );
}

.nyd-amount.is-selected {
	border-color: var( --_accent );
	background: var( --_accent-ink );
}

/* Fields ------------------------------------------------------------------ */
.nyd-field {
	margin-bottom: 1em;
}

.nyd-field-row {
	display: flex;
	gap: 12px;
}

.nyd-field-row .nyd-field {
	flex: 1 1 0;
}

.nyd-field label {
	display: block;
	margin-bottom: .35em;
	font-size: .9em;
	font-weight: 600;
	color: var( --_ink );
}

.nyd-req {
	color: var( --_accent );
}

.nyd-donation input[type="text"],
.nyd-donation input[type="email"],
.nyd-donation input[type="tel"],
.nyd-donation input[type="number"],
.nyd-donation textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 1em;
	color: var( --_ink );
	background: var( --_bg );
	border: 1px solid var( --_line );
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.nyd-donation input:focus,
.nyd-donation textarea:focus {
	outline: none;
	border-color: var( --_accent );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --_accent ) 25%, transparent );
}

.nyd-amount-input {
	position: relative;
	display: flex;
	align-items: center;
}

.nyd-currency {
	position: absolute;
	left: 14px;
	font-weight: 700;
	color: var( --_muted );
	pointer-events: none;
}

.nyd-amount-custom {
	padding-left: 38px !important;
	font-size: 1.15em !important;
	font-weight: 700;
}

/* Payment element --------------------------------------------------------- */
.nyd-payment-element {
	padding: 4px 0;
	min-height: 44px;
}

/* Message + success ------------------------------------------------------- */
.nyd-message {
	margin: 0 0 1em;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: .95em;
}

.nyd-message--error {
	color: #7f1d1d;
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.nyd-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 15px 20px;
	font-size: 1.1em;
	font-weight: 700;
	color: #fff;
	background: var( --_accent );
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: filter .15s ease, transform .05s ease;
}

.nyd-submit:hover {
	filter: brightness( 1.06 );
}

.nyd-submit:active {
	transform: translateY( 1px );
}

.nyd-submit:disabled,
.nyd-submit.is-loading {
	opacity: .7;
	cursor: progress;
}

.nyd-secure {
	margin: .9em 0 0;
	font-size: .82em;
	text-align: center;
	color: var( --_muted );
}

.nyd-success {
	text-align: center;
	padding: 2em 1em;
}

.nyd-success__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto .6em;
	display: grid;
	place-items: center;
	font-size: 2em;
	color: #fff;
	background: var( --_accent );
	border-radius: 50%;
}

.nyd-success__title {
	margin: 0 0 .3em;
}

.nyd-success__ref {
	color: var( --_muted );
	font-size: .95em;
}

.nyd-notice--admin {
	padding: 12px 14px;
	border: 1px dashed #f59e0b;
	background: #fffbeb;
	color: #92400e;
	border-radius: 8px;
	font-size: .9em;
}

@media ( max-width: 480px ) {
	.nyd-amounts {
		grid-template-columns: repeat( 2, 1fr );
	}
	.nyd-field-row {
		flex-direction: column;
		gap: 0;
	}
}