/* assets/css/homepage.css */

/* Consistent vertical rhythm between homepage sections, set here so
   it doesn't depend on every Elementor Section having its own
   padding configured correctly — user feedback ("bố cục không tốt
   khi xét tổng thể") pointed at inconsistent gaps between sections
   (some cramped, some with large accidental gaps). This is a
   reasonable default, not a hard requirement — Behzad can still
   override via Elementor's own Section spacing if a specific page
   needs different rhythm; this just stops every section from
   defaulting to zero extra spacing beyond its own internal padding.
   Featured Event isn't included — it's a full-bleed hero meant to
   sit flush against the header above it. Join the Mission / Support
   the Mission aren't included either — both use height: 100% to
   stretch and match their sibling column's height (see the note near
   .farhang-newsletter below); adding margin to an element doing that
   would push its box taller than the column it's meant to exactly
   fill, breaking that alignment. */
.farhang-upcoming-events,
.farhang-recent-highlights,
.farhang-mission-wheel {
	margin: 40px 0;
}

/* Newsletter signup card, used both next to the rotating-image
   carousel ("Experience Iranian Culture") and as the standalone band
   near the footer ("Farhang Events Sell Out") — per the mockup crop
   this is its own solid navy card, NOT text overlaid on Behzad's
   image carousel, so colors are safe to hardcode here (unlike the
   featured-event hero, this card's background is fixed, not a
   variable photo). Email input + submit button are joined into one
   pill control, gold button matching the mockup's "JOIN" button. */
/* height: 100% / align-self: stretch here only take effect if the
   parent Elementor column is actually taller than this card's own
   content — i.e. the column's "Vertical Align" is set to "Stretch"
   (Column > Layout tab). If that's set to "Top" (Elementor's
   default), the column shrinks to its own content and there's
   nothing for this card to stretch INTO, no matter what CSS is set
   here — that column setting is what actually ties this card's
   height to the carousel column next to it. */
.farhang-newsletter {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #14213d;
	color: #fff;
	padding: 32px;
}

.farhang-newsletter__heading {
	margin: 0 0 8px;
	color: #fff;
}

.farhang-newsletter__subtext {
	margin: 0 0 20px;
	color: #fff;
	opacity: 0.85;
}

/* Visually hidden but still reachable by screen readers/keyboard —
   the visible "Email" text now lives in the input's placeholder
   instead, but the placeholder alone isn't a real accessible label
   (WCAG), so this label stays in the DOM. */
.farhang-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Input + button always share one row, regardless of card width —
   nowrap here, not just relying on the outer form's flex-wrap, since
   letting them wrap independently was pushing the button onto its
   own line when the card was wide. */
.farhang-newsletter__form-row {
	display: flex;
	flex-wrap: nowrap;
}

.farhang-newsletter__form input[type="email"] {
	flex: 1 1 auto;
	width: 0; /* with flex: 1 1 auto, forces the input to size from
	             available space instead of its intrinsic content
	             width, so it can't push the button onto a new line */
	min-width: 0;
	padding: 12px 16px;
	border: none;
	border-radius: 0;
	font-size: 1em;
	color: #14213d;
	background: #fff;
}

/* Gold "JOIN" button, distinct from the dark navy CTA button used
   elsewhere on the homepage — matches the mockup's gold accent.
   Placeholder hex pending the site's actual brand gold value; swap
   --farhang-gold below if it doesn't match. */
.farhang-newsletter__form button {
	--farhang-gold: #a9852b;
	flex: 0 0 auto;
	padding: 12px 24px;
	background: var(--farhang-gold);
	color: #fff;
	border: none;
	border-radius: 0;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.farhang-newsletter__form button:hover {
	background: #8a6c22;
}

.farhang-newsletter__form input:focus-visible,
.farhang-newsletter__form button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.farhang-newsletter__success {
	margin: 0;
	color: #fff;
}

/* Fallback layout when there's no featured image at all (rare — most
   events have a featured image). Media/content stack normally. */
.farhang-featured-event {
	padding: 24px;
}

/* Hero-banner layout: image fills the section as a full-bleed
   background, text sits directly on it (gradient + text-shadow for
   legibility, no solid box) with a dark-button CTA, per the MEC
   "Cover" skin reference the user compared this shortcode against —
   this shortcode exists specifically because it adds a countdown,
   which Cover doesn't have. Hover zooms the image slightly and
   darkens the overlay to draw focus, matching the reference. */
.farhang-featured-event--has-media {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 50vh;
	padding: 0;
	overflow: hidden;
}

.farhang-featured-event--has-media .farhang-featured-event__media {
	position: absolute;
	inset: 0;
}

.farhang-featured-event--has-media .farhang-featured-event__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s ease;
}

.farhang-featured-event--has-media .farhang-featured-event__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%);
	transition: background-color 1.4s ease;
}

.farhang-featured-event--has-media:hover .farhang-featured-event__media img {
	transform: scale(1.04);
}

.farhang-featured-event--has-media:hover .farhang-featured-event__media::after {
	background-color: rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	.farhang-featured-event--has-media .farhang-featured-event__media img {
		transition: none;
	}
}

.farhang-featured-event--has-media .farhang-featured-event__content {
	position: relative;
	z-index: 1;
	max-width: 640px;
	padding: 24px 32px 32px;
	color: #fff;
}

.farhang-featured-event--has-media .farhang-featured-event__date {
	display: inline-block;
	background: #1c2b52;
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 6px 12px;
	margin-bottom: 12px;
}

.farhang-featured-event--has-media .farhang-featured-event__title {
	margin: 0 0 6px;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.farhang-featured-event--has-media .farhang-featured-event__venue {
	opacity: 0.9;
	margin-bottom: 12px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Countdown reads as its own distinct block — 4 fixed-width boxes
   (days/hours/minutes/seconds) rather than one line of running text,
   so the ticking seconds don't reflow the digit before it or any
   content around the countdown ("giật/rung" — jittery/shaky feeling
   flagged in review). Each box has a fixed min-width sized for 2
   digits so the box itself never resizes either. */
.farhang-featured-event--has-media .farhang-featured-event__countdown {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

/* Solid navy, not a light translucent overlay — with only 12% white
   opacity, busy/bright background photos (e.g. one with large white
   text baked into the image) bled straight through and made the
   numbers collide visually with the photo's own content, reported as
   illegible by the user. A solid box guarantees contrast regardless
   of what's behind it. */
.farhang-featured-event--has-media .farhang-featured-event__countdown-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 56px;
	padding: 8px 4px;
	background: #14213d;
}

.farhang-featured-event--has-media .farhang-featured-event__countdown-value {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.farhang-featured-event--has-media .farhang-featured-event__countdown-label {
	font-size: 0.7em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.8;
}

.farhang-featured-event--has-media .farhang-featured-event__cta {
	display: inline-block;
	background: #14213d;
	text-decoration: none;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 12px 20px;
}

/* Same :link/:visited specificity fix as .farhang-join-mission__cta
   above — a visited state was overriding color: #fff via the theme's
   own `a { color }` rule. */
.farhang-featured-event--has-media a.farhang-featured-event__cta:link,
.farhang-featured-event--has-media a.farhang-featured-event__cta:visited {
	color: #fff;
}

.farhang-featured-event--has-media .farhang-featured-event__cta:hover {
	background: #0a1226;
}

.farhang-featured-event--has-media .farhang-featured-event__cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

@media (max-width: 600px) {
	.farhang-featured-event--has-media .farhang-featured-event__content {
		max-width: none;
	}
}

.farhang-upcoming-events__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.farhang-upcoming-events__title {
	margin: 0;
}

.farhang-upcoming-events__view-all {
	white-space: nowrap;
}

/* Recent Event Highlights — pure photo grid gallery per the mockup:
   image only per tile, no title/date/button. Reuses the same header
   pattern as Upcoming Events (title left, "View Past Events" right). */
.farhang-recent-highlights__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.farhang-recent-highlights__title {
	margin: 0;
}

.farhang-recent-highlights__view-all {
	white-space: nowrap;
}

/* Mosaic grid, tuned for exactly 5 tiles (the shortcode's default —
   and confirmed — limit): one large feature tile (2x2) on the left,
   4 regular same-size tiles filling a clean 2x2 area to its right.
   grid-template-rows is an EXPLICIT 2 rows (not grid-auto-rows) —
   an earlier version made one of the 4 right-side tiles span 2 rows
   ("tall"), but with 4 columns and only the first 2 cells of row 1
   already free, auto-placement couldn't fit that tall tile inside
   the same 2 rows as the feature tile, so it got pushed onto a 3rd
   row instead — the right side grew taller than the left and the
   two sides no longer lined up at the bottom, per user's screenshot.
   A uniform 2x2 (all four cells the same 1x1 size) is the layout
   that's actually guaranteed to fit inside exactly 2 rows. */
.farhang-recent-highlights__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	grid-template-rows: repeat( 2, 175px );
	gap: 8px;
}

.farhang-recent-highlights__tile {
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
	transition: transform 1.2s ease;
}

/* Feature tile — large, top-left. */
.farhang-recent-highlights__tile:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

@media (max-width: 700px) {
	/* Fewer columns on narrow screens — keep the feature tile large,
	   the remaining tiles wrap into a plain 2-column flow below it. */
	.farhang-recent-highlights__grid {
		grid-template-columns: repeat( 2, 1fr );
		grid-template-rows: repeat( 4, 190px );
	}

	.farhang-recent-highlights__tile:nth-child(1) {
		grid-column: span 2;
		grid-row: span 2;
	}
}

.farhang-recent-highlights__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.farhang-recent-highlights__tile:hover,
.farhang-recent-highlights__tile:focus-visible {
	transform: scale(1.03);
}

.farhang-recent-highlights__tile:focus-visible {
	outline: 3px solid #14213d;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.farhang-recent-highlights__tile {
		transition: none;
	}
}

/* Card carousel: shows exactly `--farhang-uev-visible` cards per
   "page" (set inline from the shortcode's `visible` attribute). The
   track itself is the scrollable element — auto-scroll is handled by
   assets/js/homepage.js (advances by one page, loops at the end),
   but overflow-x: auto here means a visitor can still manually
   scroll/swipe/arrow-key through it too, not just watch it advance. */
.farhang-upcoming-events__carousel {
	overflow: hidden;
}

.farhang-upcoming-events__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px; /* room for the scrollbar so it doesn't clip card shadows/borders */
}

/* Default: fewer events than `visible` exist (no carousel needed —
   farhang_upcoming_events_shortcode() only sets data-autoscroll when
   there ARE more events than fit in one view). Cards grow evenly to
   fill the row instead of reserving `visible` fixed-width slots
   regardless of how many cards actually exist — that fixed-width
   version was leaving a large blank gap next to 1-2 real cards. */
.farhang-upcoming-events__card {
	flex: 1 1 0;
	min-width: 220px;
	scroll-snap-align: start;
	border: 1px solid #e2e2e2;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.farhang-upcoming-events__card:hover,
.farhang-upcoming-events__card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.farhang-upcoming-events__card {
		transition: none;
	}

	.farhang-upcoming-events__card:hover,
	.farhang-upcoming-events__card:focus-within {
		transform: none;
	}
}

/* Once there ARE more events than `visible` (real carousel, extra
   cards are off-screen "pages" to scroll to), cards need a fixed
   width matching exactly 1/`visible` of the row instead of growing,
   otherwise the "extra" cards would just keep shrinking every card
   to fit them all in one view instead of paging. */
.farhang-upcoming-events__carousel[data-autoscroll="true"] .farhang-upcoming-events__card {
	flex: 0 0 calc((100% - (var(--farhang-uev-visible) - 1) * 16px) / var(--farhang-uev-visible));
}

.farhang-upcoming-events__card-media img {
	display: block;
	width: 100%;
	height: auto;
}

.farhang-upcoming-events__card-content {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.farhang-upcoming-events__card-date {
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #a9852b;
}

.farhang-upcoming-events__card-title {
	margin: 0;
	font-size: 1.1em;
}

.farhang-upcoming-events__card-link {
	margin-top: auto;
	align-self: flex-start;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.farhang-upcoming-events__carousel[data-autoscroll="true"] .farhang-upcoming-events__card {
		flex: 0 0 calc((100% - 16px) / 2);
	}
}

@media (max-width: 560px) {
	.farhang-upcoming-events__carousel[data-autoscroll="true"] .farhang-upcoming-events__card {
		flex: 0 0 100%;
	}
}

/* Mission Wheel diagram — the ONE full reference graphic (already
   pixel-perfect, real artwork — see includes/homepage.php doc block
   for why this replaced an earlier from-scratch reconstruction),
   shown as-is with 10 invisible hotspot links layered on top at each
   leaf topic's position. Positions are percentages of the graphic's
   1500x810 canvas measured directly off it (farhang_mission_wheel_leaves()),
   and the container keeps that exact aspect ratio so the hotspots
   never drift out of alignment with the artwork at any width. */
.farhang-mission-wheel__diagram {
	position: relative;
	width: 100%;
	max-width: 1000px;
	aspect-ratio: 1500 / 810;
	margin: 0 auto;
}

.farhang-mission-wheel__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Shown instead of the diagram image when no image has been
   configured yet on this environment (Local/staging/production each
   have their own separate Media Library — see
   farhang_mission_wheel_get_image_id() in includes/homepage.php) via
   the "Mission Wheel" admin settings page. Hotspots still render on
   top of this so the page doesn't look broken, just unfinished. */
.farhang-mission-wheel__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #f2f2f2;
	color: #777;
	text-align: center;
	padding: 16px;
	box-sizing: border-box;
}

/* Same idea for a leaf's mobile-list thumbnail when no image has been
   configured for that topic yet. */
.farhang-mission-wheel__list-item-placeholder {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #f2f2f2;
	flex-shrink: 0;
}

.farhang-mission-wheel__hotspot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 13%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

.farhang-mission-wheel__hotspot:focus-visible {
	outline: 3px solid #14213d;
	outline-offset: 2px;
}

/* Mobile fallback: circles are hard to tap precisely and the diagram
   itself doesn't reflow well below a certain width — swap to a plain
   stacked list of the 10 leaf topics (small thumbnail + label),
   dropping the hub/emblem/lines visual entirely, per design spec. */
.farhang-mission-wheel__list {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-direction: column;
	gap: 8px;
}

.farhang-mission-wheel__list-item a {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.farhang-mission-wheel__list-item img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #a9852b;
}

.farhang-mission-wheel__list-item a:focus-visible {
	outline: 2px solid #14213d;
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.farhang-mission-wheel__diagram {
		display: none;
	}

	.farhang-mission-wheel__list {
		display: flex;
	}
}

/* Join the Mission — solid navy card, same visual language as
   .farhang-newsletter (this shortcode owns its whole background, so
   colors are safe to hardcode). Sits next to Support the Mission
   ([farhang_donation_form], Block G) in a 2-column Elementor section
   per the mockup. */
.farhang-join-mission {
	background: #14213d;
	color: #fff;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	box-sizing: border-box;
}

.farhang-join-mission__title {
	margin: 0;
	color: #fff;
}

.farhang-join-mission__subtitle {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85em;
	opacity: 0.85;
}

.farhang-join-mission__benefits {
	list-style: none;
	margin: 8px 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Reset the theme's own default <li> margin/line-height, which was
   otherwise adding large gaps between benefit lines despite the 6px
   gap set above. */
.farhang-join-mission__benefits li {
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

.farhang-join-mission__cta {
	align-self: flex-end;
	margin-top: auto;
	background: #a9852b;
	padding: 12px 24px;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* :link/:visited spelled out explicitly wins on specificity over a
   plain theme `a { color: ... }` rule — without this, a visited link
   (e.g. after clicking through once while testing) picked up the
   theme's own link color instead of staying white, making the button
   text nearly unreadable against the gold background. */
a.farhang-join-mission__cta:link,
a.farhang-join-mission__cta:visited {
	color: #fff;
}

.farhang-join-mission__cta:hover {
	background: #8a6c22;
}

.farhang-join-mission__cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Support the Mission — styles Block G's existing [farhang_donation_form]
   (includes/donations.php), which otherwise has zero CSS anywhere on
   the site. Deliberately scoped to only load here: this CSS is part
   of assets/css/homepage.css, which is only enqueued when a page also
   uses one of THIS file's own shortcodes (see
   farhang_homepage_enqueue_assets() — donations.php never calls it
   itself). If the donation form is placed on a page without any
   homepage shortcode (e.g. a standalone /donate/ page), it falls back
   to unstyled, not broken — this styling is intentionally homepage-
   specific, not a global Block G redesign. */
.farhang-donation-form {
	background: #14213d;
	color: #fff;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	box-sizing: border-box;
}

.farhang-donation-form__heading {
	margin: 0;
	color: #fff;
}

.farhang-donation-form__subtext {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85em;
	opacity: 0.85;
}

.farhang-donation-form fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

/* Visually hidden, not removed — the fieldset still needs an
   accessible name for screen readers, but visually it's redundant
   once `subtext` is set (e.g. "Select an amount below" already says
   this). Reuses the same technique as .farhang-sr-only. */
.farhang-donation-form legend {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.farhang-donation-form .farhang-donation-preset {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.12);
	padding: 10px 16px;
	cursor: pointer;
	margin: 0 8px 8px 0;
}

/* Re-skin the native radio dot (appearance: none) into a small custom
   circle instead of the raw browser bullet, which read as an
   unstyled leftover artifact next to the pill background. Still a
   real, focusable, keyboard-operable radio input — only its visual
   appearance changes. */
.farhang-donation-form .farhang-donation-preset input[type="radio"] {
	appearance: none;
	width: 14px;
	height: 14px;
	margin: 0;
	flex-shrink: 0;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	cursor: pointer;
}

.farhang-donation-form .farhang-donation-preset input[type="radio"]:checked {
	border-color: #fff;
	background: #fff;
}

.farhang-donation-form .farhang-donation-preset input[type="radio"]:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.farhang-donation-form .farhang-donation-preset:has(input:checked) {
	background: #a9852b;
}

.farhang-donation-form label[for="farhang_donation_custom_amount"] {
	display: block;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.75;
	margin: 12px 0 4px;
}

.farhang-donation-form input[type="number"] {
	padding: 10px 14px;
	border: none;
	color: #14213d;
	background: #fff;
	width: 140px;
}

/* Impact text (left) + submit button (right) share one row at the
   bottom of the card, matching the mockup's layout. margin-top: auto
   on the row itself (not just the button) pins the whole row to the
   card's bottom edge regardless of how much space the fieldset above
   takes up. */
.farhang-donation-form__footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.farhang-donation-form__impact {
	margin: 0;
	font-size: 0.85em;
	opacity: 0.85;
}

.farhang-donation-form button[type="submit"] {
	flex-shrink: 0;
	background: #a9852b;
	color: #fff;
	border: none;
	padding: 12px 24px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.farhang-donation-form button[type="submit"]:hover {
	background: #8a6c22;
}

.farhang-donation-form .farhang-donation-error {
	background: rgba(255, 255, 255, 0.15);
	padding: 10px 14px;
	margin: 0;
}

.farhang-donation-form *:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}