/**
 * Shared donation panel component.
 *
 * Used by the hero section (assets/css/hero.css) and the truck-sponsor
 * section (assets/css/truck-sponsor.css) — both just set the panel's
 * width/flex placement for their own layout; everything about how the
 * panel itself looks lives here so the two stay visually consistent.
 *
 * JS behavior (amount selection, custom-input handling) is generic too:
 * see assets/js/donation-panel.js.
 */

.donation-panel {
	background-color: rgba(var(--color-primary-rgb), 0.92);
	border-radius: 8px;
	padding: 2rem;
}

.donation-panel__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: #000;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.donation-panel__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.donation-panel__title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--font-body);
	color: var(--color-white);
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

.donation-panel__amount-label {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-family: var(--font-body);
	color: var(--color-white);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

.donation-panel__selected-amount {
	font-weight: 700;
}

.donation-panel__selected-amount:empty {
	display: none;
}

.donation-panel__amounts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.donation-panel__amounts--two-col {
	grid-template-columns: repeat(2, 1fr);
}

.donation-panel__amount {
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-white);
	background-color: transparent;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--radius-base);
	padding: 0.9rem 0.5rem;
	cursor: pointer;
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.donation-panel__amount--full {
	grid-column: 1 / -1;
	margin-bottom: 0.75rem;
}

.donation-panel__amount:hover,
.donation-panel__amount:focus-visible {
	border-color: var(--color-white);
}

.donation-panel__amount.is-selected {
	color: var(--color-primary);
	background-color: var(--color-white);
	border-color: var(--color-white);
}

.donation-panel__custom-label {
	display: block;
	margin-bottom: 1.25rem;
}

.donation-panel__custom-input {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text);
	background-color: var(--color-white);
	border: 2px solid transparent;
	border-radius: var(--radius-base);
	padding: 0.9rem 1rem;
	text-align: center;
}

.donation-panel__custom-input::placeholder {
	color: #6b7680;
}

.donation-panel__custom-input:focus-visible {
	outline: none;
	border-color: var(--color-primary-hover);
}

.donation-panel__submit {
	display: block;
	width: 100%;
	font-family: var(--font-body);
	font-size: 1.125rem;
	font-weight: 700;
	color: #57626b;
	background-color: #c3cbd1;
	border: none;
	border-radius: var(--radius-base);
	padding: 1rem;
	margin-bottom: 1rem;
	cursor: pointer;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.donation-panel__submit:hover,
.donation-panel__submit:focus-visible {
	background-color: #aeb8bf;
	color: #3f474d;
}

.donation-panel__submit.is-active {
	background-color: var(--color-white);
	color: var(--color-primary);
}

.donation-panel__submit.is-active:hover,
.donation-panel__submit.is-active:focus-visible {
	background-color: var(--color-primary-tint);
	color: var(--color-primary);
}

.donation-panel__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: 0.9375rem;
}

.donation-panel__lock-icon {
	width: 14px;
	height: 14px;
}