/**
 * Donation Amounts — Row layout & images stylesheet.
 *
 * Enqueued only when the Donation Amounts visual-form field renders.
 *
 * @package Charitable Pro
 * @since   1.8.17
 */

/* ==========================================================================
   Row layout
   ========================================================================== */

/**
 * Make the suggested-amounts list a single horizontal row.
 * flex-wrap:nowrap keeps items on one line on desktop; the @media below allows
 * wrapping on narrow viewports.
 */
.charitable-amounts-layout-row ul.donation-amounts.has-suggested-amounts {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: stretch;
}

/**
 * Equal-height cells. The default (grid) layout gives each amount a fixed
 * height and bottom margin; in a flex row that breaks alignment and fights the
 * flex `gap`. Reset both so `align-items: stretch` equalizes every cell to the
 * tallest and only `gap` controls spacing. Selector is specific enough to win
 * over the theme's per-amount rules.
 */
.charitable-amounts-layout-row ul.donation-amounts.has-suggested-amounts .donation-amount {
	margin: 0;
	height: auto;
}

/**
 * Let the inner label / custom wrapper fill the stretched cell height so the
 * content (amount text, custom input) stays vertically centered and every cell
 * lines up.
 */
.charitable-amounts-layout-row ul.donation-amounts.has-suggested-amounts .suggested-donation-amount > label,
.charitable-amounts-layout-row ul.donation-amounts.has-suggested-amounts .custom-donation-amount > .custom-donation-amount-wrapper {
	height: 100%;
	box-sizing: border-box;
}

/** Each suggested-amount button shares equal space. */
.charitable-amounts-layout-row .suggested-donation-amount {
	flex: 1 1 0;
	position: relative;
}

/**
 * Visually hide descriptions in Row layout so the compact row shows only amounts.
 * Using the screen-reader-text technique keeps descriptions accessible to assistive
 * technology — NOT display:none (per Q5 decision).
 */
.charitable-amounts-layout-row .suggested-donation-amount .description {
	position: absolute !important; /* stylelint-disable-line declaration-no-important */
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/**
 * Custom-amount <li> is rendered inside the suggested <ul> in Row layout.
 * flex:2 1 auto lets it fill remaining space while still shrinking if needed.
 */
.charitable-amounts-layout-row .custom-donation-amount {
	flex: 2 1 auto;
	display: flex;
}

/** Inner wrapper grows to fill the full cell width and height. */
.charitable-amounts-layout-row .custom-donation-amount .custom-donation-amount-wrapper {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	width: 100%;
	gap: 8px;
}

/** Custom amount input fills the remaining cell width (no stranded empty space). */
.charitable-amounts-layout-row ul.donation-amounts.has-suggested-amounts .custom-donation-amount .custom-donation-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

/* ==========================================================================
   Mobile: allow wrapping on narrow screens
   ========================================================================== */

@media (max-width: 560px) {
	.charitable-amounts-layout-row ul.donation-amounts.has-suggested-amounts {
		flex-wrap: wrap;
	}

	.charitable-amounts-layout-row .suggested-donation-amount {
		flex: 1 1 calc(33% - 8px);
	}

	.charitable-amounts-layout-row .custom-donation-amount {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   Image area — stacked layers above the amounts
   ========================================================================== */

/**
 * Container: fixed-height box so layout does not jump when the image changes.
 * Width, height, transition, size and position are driven by CSS custom properties
 * that the renderer writes via inline style (charitable_donation_amounts_image_* filters).
 */
.charitable-amount-images {
	position: relative;
	width: var(--cha-img-w, 100%);
	height: var(--cha-img-h, 150px);
	margin: 10px 0 0 0;
	border-radius: 8px;
	overflow: hidden;
}

/** Each layer is absolutely stacked; only .is-active is visible. */
.charitable-amount-image {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--cha-img-transition, 0.25s ease);
	background-position: var(--cha-img-position, center);
	background-repeat: no-repeat;
	background-size: var(--cha-img-size, cover);
	pointer-events: none;
}

/* ==========================================================================
   Caption — the amount description overlaid on its image (Row layout only)

   In Row layout the inline descriptions are visually hidden, so the selected
   amount's description is shown over its image (bottom-left, padded). In Default
   layout the description shows beside the amount, so the caption stays hidden to
   avoid duplication. The caption lives inside each layer, so it fades with it.
   ========================================================================== */

.charitable-amount-image-caption {
	display: none;
}

.charitable-amounts-layout-row .charitable-amount-image-caption {
	display: block;
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 10px;
	z-index: 1;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
	pointer-events: none;
}

/* Subtle bottom scrim so the caption stays legible over any image. */
.charitable-amounts-layout-row .charitable-amount-image--has-caption::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 55%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
	pointer-events: none;
}

/** The currently-active layer (server-set initial state; JS updates on selection). */
.charitable-amount-image.is-active {
	opacity: 1;
}

/**
 * Placeholder panel for amounts with no image.
 * Soft gray with a subtle inset border and a faint image glyph (via ::after pseudo).
 * Better than stark white — clearly decorative without looking "broken".
 */
.charitable-amount-image--empty {
	background: #f3f4f6;
	box-shadow: inset 0 0 0 1px #e5e7eb;
	display: flex;
	align-items: center;
	justify-content: center;
}

.charitable-amount-image--empty::after {
	content: "";
	width: 48px;
	height: 42px;
	border: 2px solid #cfd3da;
	border-radius: 6px;
	background:
		radial-gradient(circle at 32% 38%, #cfd3da 0 5px, transparent 6px),
		linear-gradient(135deg, transparent 55%, #cfd3da 55% 70%, transparent 70%);
	background-repeat: no-repeat;
}

/* ==========================================================================
   Builder canvas override
   The campaign-builder field preview styles the suggested list as a per-count
   CSS grid (e.g. .donation-amounts-count-4) at a higher specificity than the
   front-end Row rules above, so the preview would stay a grid. Re-assert the
   Row layout under .charitable-form-builder so the canvas preview matches the
   front-end. Specificity (0,5,1) beats the builder grid rule (0,5,0) and this
   file is enqueued after the builder stylesheets.
   ========================================================================== */

.charitable-form-builder .charitable-amounts-layout-row .charitable-suggested-donation-amounts-container ul.donation-amounts.has-suggested-amounts {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: stretch;
}

/**
 * The builder styles all panel inputs with `min-width: 100%` at ID specificity
 * (#charitable-panel-form .charitable-field input). In the Row custom-amount cell
 * that forces the text input to the full wrapper width, squashing the "Custom
 * amount" label to ~0 (its text then wraps one letter per line, making the whole
 * row very tall). Let the input shrink so it shares the row with the label.
 * !important is required to beat the builder's ID-level rule; scoped to the
 * builder canvas so the front-end (which already works) is unaffected.
 */
.charitable-form-builder .charitable-amounts-layout-row .custom-donation-amount .custom-donation-input {
	min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
	width: auto !important; /* stylelint-disable-line declaration-no-important */
	flex: 1 1 auto;
}

@media (max-width: 560px) {
	.charitable-form-builder .charitable-amounts-layout-row .charitable-suggested-donation-amounts-container ul.donation-amounts.has-suggested-amounts {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Suggested-amounts table — Image column

   The generic cell rule in builder-basic.css applies `padding: 10px 20px` to
   every td in the suggested-donations table. Zero the Image column's padding
   so the thumbnail cell aligns tightly. Specificity (0,3,3) beats the generic
   `…tbody tr td` rule (0,2,3), and this file loads after the builder styles.
   ========================================================================== */

.widefat.charitable-campaign-suggested-donations tbody tr td.image-col,
.widefat.charitable-campaign-suggested-donations tfoot tr td.image-col {
	padding: 0;
}

/* ==========================================================================
   Builder settings — Custom Amount image picker

   The "Custom Amount Image" field lives in the Donation Options settings
   panel, OUTSIDE the suggested-amounts repeater table. The per-amount picker
   styles in builder-basic.css are scoped to `.charitable-campaign-suggested-donations`,
   so they never reach this field — its preview <span> would render with
   width/height:auto and collapse to zero, hiding the background image. Mirror
   the suggested-amount picker styles here (this file is enqueued in the
   builder) so the custom picker matches: a 40×40 thumbnail beside stacked
   Replace / Remove links.

   Layout: the field sits ~10px below the "Allow Custom Donations" toggle and
   is indented so its content's left edge aligns with the toggle's text label
   (the toggle slider is 32px wide + ~7px gap). The label and the image picker
   share one row — label on the left, picker (thumbnail + actions) on the right.
   ========================================================================== */

.charitable-custom-amount-image-field {
	margin-top: 10px;
	padding-left: 39px;
}

.charitable-custom-amount-image-field .charitable-panel-field-image-picker {
	display: flex;
	align-items: center;
	gap: 12px;
}

.charitable-custom-amount-image-field .charitable-panel-field-image-picker > label {
	margin: 0;
}

.charitable-custom-amount-image-field .charitable-amount-image-cell {
	display: flex;
	align-items: center;
	gap: 8px;
}

.charitable-custom-amount-image-field .charitable-amount-image-preview {
	display: block;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	border: 1px dashed #b3b7bd;
	background-color: #f3f4f6;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.charitable-custom-amount-image-field .charitable-amount-image-preview.has-image {
	border-style: solid;
	border-color: #c3c4c7;
}

.charitable-custom-amount-image-field .charitable-amount-image-actions {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.charitable-custom-amount-image-field .charitable-amount-image-actions a {
	font-size: 12px;
	text-decoration: none;
	line-height: 1.4;
}

.charitable-custom-amount-image-field .charitable-amount-image-actions a.charitable-amount-image-select {
	color: #2271b1;
}

.charitable-custom-amount-image-field .charitable-amount-image-actions a.charitable-amount-image-select:hover {
	color: #135e96;
	text-decoration: underline;
}

.charitable-custom-amount-image-field .charitable-amount-image-actions a.charitable-amount-image-clear {
	color: #b32d2e;
}

.charitable-custom-amount-image-field .charitable-amount-image-actions a.charitable-amount-image-clear:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Reduced motion: disable transitions for users who prefer it
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.charitable-amount-image {
		transition: none;
	}
}