/*
 * AFTAS Virement — front-end styles.
 *
 * RTL-first: written entirely in logical properties (margin-inline-*,
 * padding-inline-*, border-inline-*, text-align: start/end). No `left` or
 * `right` anywhere, so the Arabic page needs no override.
 *
 * Design tokens come from the child theme (astra-child-aftas). Each var() has
 * a fallback so the plugin still looks correct if the theme is swapped or on
 * the standalone portal page.
 */

.aftas-virement {
	--av-gap: var(--space-4, 1rem);
	--av-radius: var(--radius-card, 16px);
	--av-field-radius: var(--radius-field, 4px);
	--av-primary: var(--color-primary, #1b8354);
	--av-primary-hover: var(--color-primary-hover, #166a45);
	--av-surface: var(--color-surface, #ffffff);
	--av-surface-alt: var(--color-surface-alt, #f7f7f5);
	--av-border: var(--color-border, #e5e7eb);
	--av-text: var(--color-text, #0d121c);
	--av-muted: var(--color-text-muted, #5b6472);
	--av-success: var(--color-success, #1b8354);
	--av-warning: var(--color-warning, #b45309);
	--av-error: var(--color-danger, #b42318);

	display: flow-root;
	box-sizing: border-box;
	max-inline-size: 48rem;
	margin-block: var(--space-6, 1.5rem);
	margin-inline: auto;
	padding: clamp(1rem, 3vw, 2rem);
	background-color: var(--av-surface);
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius);
	color: var(--av-text);
	text-align: start;
}

.aftas-virement *,
.aftas-virement *::before,
.aftas-virement *::after {
	box-sizing: inherit;
}

.aftas-virement__header {
	margin-block-end: var(--av-gap);
}

.aftas-virement__title {
	margin-block: 0 var(--space-2, 0.5rem);
	font-size: var(--text-xl, 1.25rem);
	font-weight: var(--font-weight-bold, 700);
	line-height: var(--line-height-tight, 1.25);
	color: var(--aftas-green-700, #104631);
}

.aftas-virement__subtitle {
	margin-block: var(--space-5, 1.25rem) var(--space-2, 0.5rem);
	font-size: var(--text-lg, 1.125rem);
	font-weight: var(--font-weight-semibold, 600);
}

.aftas-virement__lead,
.aftas-virement__privacy {
	margin-block: 0;
	color: var(--av-muted);
	font-size: var(--text-sm, 0.9375rem);
}

.aftas-virement__privacy {
	margin-block-start: var(--space-5, 1.25rem);
	padding-block-start: var(--space-3, 0.75rem);
	border-block-start: 1px solid var(--av-border);
}

/* -- Notices --------------------------------------------------------------- */

.aftas-virement__notice {
	margin-block: var(--space-3, 0.75rem);
	padding-block: var(--space-3, 0.75rem);
	padding-inline: var(--space-4, 1rem);
	border-inline-start: 4px solid var(--av-muted);
	border-radius: var(--av-field-radius);
	background-color: var(--av-surface-alt);
	font-size: var(--text-sm, 0.9375rem);
}

.aftas-virement__notice--success {
	border-inline-start-color: var(--av-success);
	background-color: color-mix(in srgb, var(--av-success) 8%, white);
}

.aftas-virement__notice--info {
	border-inline-start-color: var(--av-primary);
	background-color: color-mix(in srgb, var(--av-primary) 8%, white);
}

.aftas-virement__notice--error {
	border-inline-start-color: var(--av-error);
	background-color: color-mix(in srgb, var(--av-error) 8%, white);
}

/* -- Reference ------------------------------------------------------------- */

.aftas-virement__reference {
	margin-block: var(--av-gap);
	padding: var(--space-4, 1rem);
	background-color: var(--av-surface-alt);
	border: 1px dashed var(--av-primary);
	border-radius: var(--av-radius);
}

.aftas-virement__reference-label {
	margin-block: 0 var(--space-2, 0.5rem);
	font-weight: var(--font-weight-semibold, 600);
}

.aftas-virement__reference-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3, 0.75rem);
	margin-block: 0;
}

.aftas-virement__reference-value {
	padding-block: var(--space-2, 0.5rem);
	padding-inline: var(--space-3, 0.75rem);
	background-color: var(--av-surface);
	border: 1px solid var(--av-border);
	border-radius: var(--av-field-radius);
	font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
	font-size: var(--text-lg, 1.125rem);
	font-weight: var(--font-weight-bold, 700);
	letter-spacing: 0.04em;
	/* Latin reference inside an Arabic page: isolate it from the bidi run. */
	unicode-bidi: isolate;
	white-space: nowrap;
	overflow-x: auto;
}

.aftas-virement__reference-help {
	margin-block: var(--space-2, 0.5rem) 0;
	font-size: var(--text-sm, 0.9375rem);
}

.aftas-virement__portal {
	padding-block: var(--space-2, 0.5rem);
	padding-inline: var(--space-3, 0.75rem);
	background-color: var(--av-surface-alt);
	border: 1px solid var(--av-border);
	border-radius: var(--av-field-radius);
	font-size: var(--text-xs, 0.8125rem);
	unicode-bidi: isolate;
	overflow-wrap: anywhere;
}

/* -- Summary --------------------------------------------------------------- */

.aftas-virement__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
	gap: var(--av-gap);
	margin-block: var(--av-gap);
	padding: 0;
}

.aftas-virement__summary-item dt {
	margin-block-end: var(--space-1, 0.25rem);
	color: var(--av-muted);
	font-size: var(--text-sm, 0.9375rem);
}

.aftas-virement__summary-item dd {
	margin: 0;
	font-weight: var(--font-weight-semibold, 600);
}

.aftas-amount,
.aftas-virement .aftas-amount {
	font-variant-numeric: tabular-nums lining-nums;
	unicode-bidi: isolate;
}

/* -- Bank details ---------------------------------------------------------- */

.aftas-virement__bank-list {
	margin-block: 0;
	padding: 0;
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius);
	overflow: hidden;
}

.aftas-virement__bank-row {
	display: grid;
	grid-template-columns: minmax(8rem, 14rem) 1fr;
	gap: var(--space-2, 0.5rem) var(--av-gap);
	padding-block: var(--space-3, 0.75rem);
	padding-inline: var(--space-4, 1rem);
	border-block-start: 1px solid var(--av-border);
}

.aftas-virement__bank-row:first-child {
	border-block-start: 0;
}

.aftas-virement__bank-row dt {
	margin: 0;
	color: var(--av-muted);
	font-size: var(--text-sm, 0.9375rem);
}

.aftas-virement__bank-row dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2, 0.5rem);
	margin: 0;
	font-weight: var(--font-weight-medium, 500);
	overflow-wrap: anywhere;
}

/* RIB / IBAN / SWIFT: forced LTR so the digit groups never get reordered by
   the bidi algorithm on the Arabic page. */
.aftas-virement__ltr {
	direction: ltr;
	text-align: start;
	font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: 0.03em;
	unicode-bidi: isolate;
}

@media (max-width: 30rem) {
	.aftas-virement__bank-row {
		grid-template-columns: 1fr;
	}
}

/* -- Upload form ----------------------------------------------------------- */

.aftas-virement__form {
	margin-block: var(--av-gap);
	padding: var(--space-4, 1rem);
	background-color: var(--av-surface-alt);
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius);
}

.aftas-virement__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 0.5rem);
	margin-block: 0 var(--av-gap);
}

.aftas-virement__label {
	font-weight: var(--font-weight-semibold, 600);
}

.aftas-virement__form input[type="file"] {
	padding: var(--space-3, 0.75rem);
	background-color: var(--av-surface);
	border: 1px solid var(--av-border);
	border-radius: var(--av-field-radius);
	font: inherit;
	inline-size: 100%;
	max-inline-size: 100%;
}

.aftas-virement__hint {
	font-size: var(--text-sm, 0.9375rem);
}

.aftas-virement__error {
	color: var(--av-error);
	font-size: var(--text-sm, 0.9375rem);
	font-weight: var(--font-weight-semibold, 600);
}

.aftas-virement__actions {
	margin-block: 0;
}

/* Minimal button rules so the plugin is usable even without the child theme;
   the theme's `.aftas-btn` rules win when it is active. */
.aftas-virement .aftas-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 0.5rem);
	min-block-size: 44px;
	padding-block: var(--space-3, 0.75rem);
	padding-inline: var(--space-5, 1.25rem);
	border: 1px solid transparent;
	border-radius: var(--av-field-radius);
	font: inherit;
	font-weight: var(--font-weight-semibold, 600);
	text-decoration: none;
	cursor: pointer;
}

.aftas-virement .aftas-btn--primary {
	background-color: var(--av-primary);
	border-color: var(--av-primary);
	color: var(--color-text-oncolor, #ffffff);
}

.aftas-virement .aftas-btn--primary:hover,
.aftas-virement .aftas-btn--primary:focus-visible {
	background-color: var(--av-primary-hover);
	border-color: var(--av-primary-hover);
}

.aftas-virement .aftas-btn--secondary {
	background-color: var(--av-surface);
	border-color: var(--av-primary);
	color: var(--av-primary-hover);
}

.aftas-virement .aftas-btn--ghost {
	min-block-size: 32px;
	padding-block: var(--space-1, 0.25rem);
	padding-inline: var(--space-2, 0.5rem);
	background-color: transparent;
	border-color: var(--av-border);
	color: var(--av-muted);
	font-size: var(--text-xs, 0.8125rem);
}

.aftas-virement__copy[data-aftas-copied="1"] {
	border-color: var(--av-success);
	color: var(--av-success);
}

/* -- Badges ---------------------------------------------------------------- */

.aftas-virement__badge {
	display: inline-block;
	padding-block: 0.15em;
	padding-inline: 0.6em;
	border-radius: 999px;
	font-size: var(--text-sm, 0.9375rem);
	font-weight: var(--font-weight-semibold, 600);
	background-color: var(--av-surface-alt);
	color: var(--av-text);
}

.aftas-virement__badge--awaiting_receipt {
	background-color: color-mix(in srgb, var(--av-warning) 14%, white);
	color: var(--av-warning);
}

.aftas-virement__badge--receipt_uploaded {
	background-color: color-mix(in srgb, var(--av-primary) 14%, white);
	color: var(--av-primary-hover);
}

.aftas-virement__badge--validated {
	background-color: color-mix(in srgb, var(--av-success) 14%, white);
	color: var(--av-success);
}

.aftas-virement__badge--refused {
	background-color: color-mix(in srgb, var(--av-error) 14%, white);
	color: var(--av-error);
}

/* -- "Later" box ----------------------------------------------------------- */

.aftas-virement__later {
	margin-block-start: var(--av-gap);
	padding: var(--space-4, 1rem);
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius);
	font-size: var(--text-sm, 0.9375rem);
}

.aftas-virement__later p:first-child {
	margin-block-start: 0;
}

/* -- Standalone portal page ------------------------------------------------ */

.aftas-virement-body {
	margin: 0;
	background-color: var(--color-surface-alt, #f7f7f5);
	color: var(--color-text, #0d121c);
	font-family: inherit;
}

.aftas-virement-page {
	max-inline-size: 52rem;
	margin-inline: auto;
	padding-block: clamp(1.5rem, 5vw, 3rem);
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.aftas-virement-page__org {
	margin-block: 0 var(--space-4, 1rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--aftas-green-700, #104631);
	text-align: start;
}

.aftas-virement-page__footer {
	margin-block-start: var(--space-6, 1.5rem);
	font-size: var(--text-sm, 0.9375rem);
	text-align: start;
}

/* Notice substituted for the bank details on the payment screen. */
.aftas-virement-pending-notice {
	margin-block: var(--space-2, 0.5rem);
	padding-block: var(--space-3, 0.75rem);
	padding-inline: var(--space-4, 1rem);
	border-inline-start: 4px solid var(--color-primary, #1b8354);
	border-radius: var(--radius-field, 4px);
	background-color: var(--color-surface-alt, #f7f7f5);
}

@media (prefers-reduced-motion: reduce) {
	.aftas-virement * {
		transition: none !important;
	}
}