/* KYC access points (Hafez_Kyc_Gates): the box shown instead of a place that needs a KYC
   profile the customer has not finished (account sections, account forms, checkout wallet
   box, affiliate panel). Loaded by the loader (handle hafez-kyc-gate) only while a profile
   requires something.
   Colours: skin tokens (--hafez-acc-*) → classic account tokens (--hafez-account-*) →
   visual identity (--hafez-dp-*) → site palette (--hafez-color-*) → fallback.
   Selectors double the class (the button adds :not(#…)) to outrank the account skin resets,
   WooCommerce and Elementor kit rules without !important. */

.hafez-kyc-gate.hafez-kyc-gate {
	--kg-text: var(--hafez-acc-text, var(--hafez-dp-field-text, var(--hafez-color-text, #1f2328)));
	--kg-muted: var(--hafez-acc-muted, var(--hafez-dp-help, var(--hafez-color-text-muted, #6b7280)));
	--kg-surface: var(--hafez-acc-surface, var(--hafez-dp-box-bg, var(--hafez-color-surface, #ffffff)));
	--kg-border: var(--hafez-acc-border, var(--hafez-dp-box-border-color, var(--hafez-color-border, #e5e7eb)));
	--kg-primary: var(--hafez-acc-primary, var(--hafez-account-button-bg, var(--hafez-dp-primary-bg, var(--hafez-color-primary, #f15a24))));
	--kg-primary-hover: var(--hafez-acc-primary-hover, var(--hafez-account-button-hover-bg, var(--hafez-dp-primary-hover-bg, color-mix(in srgb, var(--kg-primary) 86%, #000))));
	--kg-on-primary: var(--hafez-acc-on-primary, var(--hafez-account-button-text, var(--hafez-dp-primary-text, #ffffff)));
	--kg-warning: var(--hafez-acc-warning, var(--hafez-color-warning-text, #b45309));
	--kg-warning-soft: var(--hafez-acc-warning-soft, color-mix(in srgb, #f59e0b 13%, var(--kg-surface)));
	--kg-radius: var(--hafez-acc-radius, var(--hafez-account-card-radius, var(--hafez-dp-radius-box, 16px)));
	--kg-radius-btn: var(--hafez-acc-radius-btn, var(--hafez-dp-radius-button, 10px));
	--kg-font: var(--hafez-acc-font, var(--hafez-dp-font, var(--hafez-font-body, inherit)));

	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	margin: 0 0 16px;
	padding: 22px 22px 20px;
	color: var(--kg-text);
	font-family: var(--kg-font);
	font-size: 14px;
	line-height: 1.8;
	text-align: start;
	direction: rtl;
	background: var(--kg-surface);
	border: 1px solid var(--kg-border);
	border-radius: var(--kg-radius);
}

.hafez-kyc-gate.hafez-kyc-gate *,
.hafez-kyc-gate.hafez-kyc-gate *::before,
.hafez-kyc-gate.hafez-kyc-gate *::after {
	box-sizing: border-box;
}

.hafez-kyc-gate.hafez-kyc-gate .hafez-kyc-gate__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: var(--kg-warning);
	background: var(--kg-warning-soft);
	border-radius: 14px;
}

.hafez-kyc-gate.hafez-kyc-gate .hafez-kyc-gate__icon svg {
	width: 24px;
	height: 24px;
}

.hafez-kyc-gate.hafez-kyc-gate .hafez-kyc-gate__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.hafez-kyc-gate.hafez-kyc-gate .hafez-kyc-gate__title {
	margin: 0;
	padding: 0;
	color: var(--kg-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
}

.hafez-kyc-gate.hafez-kyc-gate .hafez-kyc-gate__text {
	margin: 0;
	padding: 0;
	color: var(--kg-muted);
	font-size: 14px;
}

.hafez-kyc-gate.hafez-kyc-gate .hafez-kyc-gate__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.hafez-kyc-gate.hafez-kyc-gate .hafez-kyc-gate__list li {
	margin: 0;
	padding: 2px 12px;
	color: var(--kg-warning);
	font-size: 12px;
	font-weight: 600;
	background: var(--kg-warning-soft);
	border-radius: 999px;
}

.hafez-kyc-gate.hafez-kyc-gate .hafez-kyc-gate__actions {
	margin: 10px 0 0;
	padding: 0;
}

.hafez-kyc-gate.hafez-kyc-gate a.hafez-kyc-gate__button:not(#hafez-kyc-gate-x),
.hafez-kyc-gate.hafez-kyc-gate a.hafez-kyc-gate__button:not(#hafez-kyc-gate-x):link,
.hafez-kyc-gate.hafez-kyc-gate a.hafez-kyc-gate__button:not(#hafez-kyc-gate-x):visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 8px 20px;
	color: var(--kg-on-primary);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	background: var(--kg-primary);
	border: 1px solid transparent;
	border-radius: var(--kg-radius-btn);
	box-shadow: none;
	transition: background-color 0.18s ease;
}

.hafez-kyc-gate.hafez-kyc-gate a.hafez-kyc-gate__button:not(#hafez-kyc-gate-x):hover,
.hafez-kyc-gate.hafez-kyc-gate a.hafez-kyc-gate__button:not(#hafez-kyc-gate-x):focus,
.hafez-kyc-gate.hafez-kyc-gate a.hafez-kyc-gate__button:not(#hafez-kyc-gate-x):active {
	color: var(--kg-on-primary);
	text-decoration: none;
	background: var(--kg-primary-hover);
}

.hafez-kyc-gate.hafez-kyc-gate a.hafez-kyc-gate__button:not(#hafez-kyc-gate-x):focus-visible {
	outline: 2px solid var(--kg-primary);
	outline-offset: 2px;
}

/* Compact: one line inside a card (checkout wallet box, skin order card). */
.hafez-kyc-gate.hafez-kyc-gate--compact {
	gap: 12px;
	margin: 0 0 12px;
	padding: 14px 16px;
}

.hafez-kyc-gate.hafez-kyc-gate--compact .hafez-kyc-gate__icon {
	width: 38px;
	height: 38px;
	border-radius: 12px;
}

.hafez-kyc-gate.hafez-kyc-gate--compact .hafez-kyc-gate__title {
	font-size: 14px;
}

.hafez-kyc-gate.hafez-kyc-gate--compact .hafez-kyc-gate__text {
	font-size: 13px;
}

.hafez-kyc-gate.hafez-kyc-gate--compact .hafez-kyc-gate__actions {
	margin-top: 6px;
}

.hafez-kyc-gate.hafez-kyc-gate--compact a.hafez-kyc-gate__button:not(#hafez-kyc-gate-x) {
	min-height: 36px;
	padding: 6px 16px;
	font-size: 13px;
}

/* Dashboard widget card (kit card): the icon takes the warning tone. */
.hafez-aw--kyc-gate .hafez-kyc-gate-aw .hafez-aw__empty-icon {
	color: var(--hafez-acc-warning, var(--hafez-color-warning-text, #b45309));
}

@media (max-width: 480px) {
	.hafez-kyc-gate.hafez-kyc-gate {
		flex-direction: column;
		gap: 12px;
		padding: 18px 16px;
	}

	.hafez-kyc-gate.hafez-kyc-gate a.hafez-kyc-gate__button:not(#hafez-kyc-gate-x) {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hafez-kyc-gate.hafez-kyc-gate a.hafez-kyc-gate__button:not(#hafez-kyc-gate-x) {
		transition: none;
	}
}

/* Dark mode: the fixed fallbacks only (skin and identity tokens switch on their own). */
:is(html[data-dark-mode="true"] body, body[data-dark-mode="true"], body.hafez-dark) .hafez-kyc-gate.hafez-kyc-gate {
	--kg-text: var(--hafez-acc-text, var(--hafez-dp-field-text, var(--hafez-color-text, #e7e5e4)));
	--kg-muted: var(--hafez-acc-muted, var(--hafez-dp-help, var(--hafez-color-text-muted, #a8a29e)));
	--kg-surface: var(--hafez-acc-surface, var(--hafez-dp-box-bg, var(--hafez-color-surface, #1f1d1c)));
	--kg-border: var(--hafez-acc-border, var(--hafez-dp-box-border-color, var(--hafez-color-border, #3a3532)));
	--kg-warning: var(--hafez-acc-warning, #fbbf24);
	--kg-warning-soft: var(--hafez-acc-warning-soft, color-mix(in srgb, #f59e0b 16%, var(--kg-surface)));
	color-scheme: dark;
}