/* Gift Membership landing + redemption pages. Only enqueued on those two pages
   (see ds_enqueue_child_assets() in inc/blocksy-hooks.php) -- reuses .ds-premium-button
   and .ds-premium-button--outline from components.css rather than inventing new button
   styles, and only design tokens already defined in style.css. */

/* .ds-landing (components.css) adds 30px top padding to <main>, which shows as a light
   band between the header and this black hero -- the hero should sit flush. */
.ds-landing--gift {
	padding-top: 0;
}

.ds-gift-hero {
	background: var( --ds-black );
	color: var( --ds-white );
	padding: clamp( 48px, 8vw, 96px ) 24px;
	text-align: center;
}

.ds-gift-card {
	display: block;
	height: auto;
	margin: 0 auto 40px;
	max-width: 420px;
	width: 100%;
}

.ds-gift-hero .ds-gift-hero__heading {
	font-family: var( --ds-font-headings );
	color: var( --ds-white );
	font-size: clamp( 1.8rem, 4vw, 2.6rem );
	margin: 0 0 32px;
}

.ds-gift-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --ds-gap );
	justify-content: center;
}

.ds-gift-hero__actions .ds-premium-button,
.ds-gift-hero__actions .ds-premium-button--outline {
	min-width: 260px;
}

/* --ds-premium-border is only defined inside .ds-premium-landing, so set the outline
   button's colours explicitly here. */
.ds-gift-hero__actions .ds-premium-button--outline {
	background: transparent;
	border-color: rgba( 255, 255, 255, 0.5 );
	color: var( --ds-white );
}

.ds-gift-hero__actions .ds-premium-button--outline:hover {
	background: var( --ds-red );
	border-color: var( --ds-red );
	color: var( --ds-white );
}

.ds-gift-tiers {
	background: var( --ds-white );
	color: var( --ds-black );
	max-width: var( --ds-max-width );
	margin: 0 auto;
	padding: clamp( 48px, 6vw, 80px ) 24px;
}

.ds-gift-tiers .ds-gift-tiers__heading {
	color: var( --ds-black );
	font-family: var( --ds-font-headings );
	font-size: clamp( 1.5rem, 3vw, 2rem );
	margin: 0 0 8px;
	text-align: center;
}

.ds-gift-tiers .ds-gift-tiers__subheading {
	color: var( --ds-black );
	margin: 0 0 32px;
	text-align: center;
}

.ds-gift-tiers__form {
	margin: 0 auto;
	max-width: 640px;
}

.ds-gift-tiers .ds-gift-tiers__refund {
	color: #6b7280;
	font-size: var( --ds-font-size-sm );
	line-height: 1.5;
	margin: 20px 0 0;
	text-align: center;
}

/* Redemption page -- the card itself is the Donate widget's (.ds-donation-widget, components.css);
   these rules only style the plain HTML inputs/labels/buttons inside it to match. */
.ds-gift-redeem {
	margin: 0 auto;
	max-width: 560px;
	padding: clamp( 48px, 6vw, 80px ) 24px;
}

/* .ds-claim (donate.css) paints a white panel + shadow behind this section; the widget card inside
   is the only panel wanted here, so the outer area takes the page background. Padding is kept. */
.ds-claim.ds-gift-redeem {
	background: transparent;
	box-shadow: none;
}

.ds-gift-redeem form label {
	display: block;
	font-weight: 600;
	margin-bottom: 16px;
}

.ds-gift-redeem form input[type='email'],
.ds-gift-redeem form input[type='text'],
.ds-gift-redeem form input[type='password'] {
	background: var( --ds-white );
	border: 1px solid #d8ddea;
	border-radius: 12px;
	box-shadow: none;
	color: var( --ds-black );
	display: block;
	font-size: 1rem;
	font-weight: 400;
	margin-top: 8px;
	padding: 14px 16px;
	width: 100%;
}

.ds-gift-redeem form input:focus {
	border-color: var( --ds-red );
	outline: 0;
}

.ds-gift-redeem .ds-donation-widget__next {
	display: block;
	margin-top: 4px;
}

.ds-gift-redeem a.ds-donation-widget__next {
	color: var( --ds-white );
	padding: 20px 0;
	text-align: center;
	text-decoration: none;
}

.ds-gift-redeem__help {
	color: #6b7280;
	margin: 32px 0 16px;
}

.ds-gift-redeem__notice {
	background: #fdecee;
	border-radius: 12px;
	color: var( --ds-red-dark );
	font-weight: 600;
	margin: 0 0 20px;
	padding: 12px 16px;
}

.ds-gift-redeem .ds-donation-widget__form > p:first-child {
	margin-top: 0;
}

.ds-gift-redeem button[type='submit']:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* ── Dark mode (runtime toggle: html[data-theme="dark"]; dark is the first-visit default) ──
   Page: the purchase section stops being a white band and sits on the dark page, text white.
   Card: NO overrides for the purchase form -- the Donate widget's own dark rules (components.css:
   dark shell/surface/border, and the global dark .fluentform input/label rules) already apply to it,
   so it looks exactly like the Donate widget. Only the Redeem Gift card, which uses plain HTML inputs
   rather than Fluent, needs matching dark rules below. */
html[data-ds-theme-mode="runtime"][data-theme="dark"] .ds-gift-tiers {
	background: transparent;
	color: var( --ds-white );
}

html[data-ds-theme-mode="runtime"][data-theme="dark"] .ds-gift-tiers .ds-gift-tiers__heading,
html[data-ds-theme-mode="runtime"][data-theme="dark"] .ds-gift-tiers .ds-gift-tiers__subheading,
html[data-ds-theme-mode="runtime"][data-theme="dark"] .ds-gift-tiers .ds-gift-tiers__refund,
html[data-ds-theme-mode="runtime"][data-theme="dark"] .ds-gift-tiers .ds-gift-tiers__refund strong {
	color: var( --ds-white );
}

/* Redeem Gift card: same dark inputs as the Fluent forms get (#111 fill, themed border, light text). */
html[data-ds-theme-mode="runtime"][data-theme="dark"] .ds-gift-redeem form input[type='email'],
html[data-ds-theme-mode="runtime"][data-theme="dark"] .ds-gift-redeem form input[type='text'],
html[data-ds-theme-mode="runtime"][data-theme="dark"] .ds-gift-redeem form input[type='password'] {
	background: #111111;
	border-color: var( --ds-theme-border );
	color: var( --ds-theme-text );
}

html[data-ds-theme-mode="runtime"][data-theme="dark"] .ds-gift-redeem form input::placeholder {
	color: rgba( 255, 255, 255, 0.5 );
}

html[data-ds-theme-mode="runtime"][data-theme="dark"] .ds-gift-redeem__help {
	color: var( --ds-theme-muted );
}

html[data-ds-theme-mode="runtime"][data-theme="dark"] .ds-gift-redeem__notice {
	background: rgba( 208, 2, 27, 0.18 );
	color: #ffb2bc;
}