/**
 * Dedicated pages: one skeleton for KYC, custom-amount pay, short / easy buy
 * link, the wallet page, the affiliate page, the tools hub (/tools) and the
 * easy-buy popup (Hafez_Dedicated_Pages).
 *
 * Markup: .hafez-dp.hafez-dp-scope.hafez-dp--{tool} > .hafez-dp__logo + .hafez-dp__box
 * (.hafez-dp--canvas on the full-screen canvas, .hafez-dp--theme without the logo
 * inside the theme frame .hafez-dp-frame; body.hafez-dp-page--{tool}.hafez-dp-page--{canvas|theme})
 * (the popup: .hafez_buy.hafez-dp-scope.hafez-dp--easybuy > .hafez_buy__dialog.hafez-dp__box).
 * Variables (--hafez-dp-*) are printed per tool by Hafez_Dedicated_Pages::css_block();
 * the fallbacks below are the shipped defaults. Loaded after kyc.css,
 * quick-checkout.css, checkout-receipt.css, easy-buy.css and account.css.
 */

@font-face {
	font-family: "IRANSans";
	src: url("../fonts/iransans/iransans-fa.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IRANSans";
	src: url("../fonts/iransans/iransans.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
 * Scope: font and the variables other stylesheets read
 * ------------------------------------------------------------------------ */

.hafez-dp-scope {
	--hafez-dp-font: var(--hafez-font, "IRANSans", Tahoma, Arial, sans-serif);
	/* Field engine (user-fields.css) and easy-buy (--hb-*) follow the dedicated-page set. */
	--hafez-uf-label-color: var(--hafez-dp-label, #2c2624);
	--hafez-uf-input-text: var(--hafez-dp-field-text, #2c2624);
	--hafez-uf-input-radius: var(--hafez-dp-radius-field, 8px);
	--hafez-uf-input-border: var(--hafez-dp-box-border-color, #e6dfda);
	--hafez-uf-focus-border: var(--hafez-dp-primary-bg, #f15a24);
	--hafez-uf-radio-accent: var(--hafez-dp-primary-bg, #f15a24);
	--hafez-uf-placeholder: var(--hafez-dp-help, #6e6560);
	font-family: var(--hafez-dp-font);
	color: var(--hafez-dp-field-text, #2c2624);
}

.hafez-dp-scope button,
.hafez-dp-scope input,
.hafez-dp-scope select,
.hafez-dp-scope textarea,
.hafez-dp-scope h1,
.hafez-dp-scope h2,
.hafez-dp-scope h3,
.hafez-dp-scope .hafez-user-fields-form .hafez-user-fields__row > label {
	font-family: var(--hafez-dp-font) !important;
}

/* Blank canvases (KYC, pay, buy): the body takes the page color. */
body.hafez-kyc-canvas,
body.hafez-qc-canvas,
body.hafez-wallet-canvas,
body.hafez-dp-canvas {
	margin: 0;
	background: var(--hafez-dp-page-bg, #f7f4f2);
	font-family: var(--hafez-font, "IRANSans", Tahoma, Arial, sans-serif);
}

/* ---------------------------------------------------------------------------
 * Page, logo, form box
 * ------------------------------------------------------------------------ */

.hafez-dp {
	--hafez-dp-box-width: 640px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 24px 16px 40px;
	background: var(--hafez-dp-page-bg, #f7f4f2);
}

.hafez-dp--canvas {
	min-height: 100vh;
	min-height: 100dvh;
}

body.admin-bar .hafez-dp--canvas {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .hafez-dp--canvas {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}

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

/*
 * Theme frame («در چارچوب قالب فعلی», templates/dp-theme-frame.php): the
 * skeleton sits between the theme header and footer, without the logo. Only
 * the frame element and the scope are touched; the theme keeps its own body.
 */
.hafez-dp-frame,
body.hafez-dp-page.hafez-dp-page--theme .hafez-dp-frame {
	display: block;
	float: none;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.hafez-dp--theme {
	min-height: 0;
	padding: clamp(24px, 5vw, 56px) 16px clamp(32px, 6vw, 72px);
	line-height: 1.6;
	text-align: start;
}

/* Theme rules that would reshape the form (upper-case buttons, spaced headings). */
.hafez-dp--theme :is(h1, h2, h3, h4, button, input, select, textarea, label, legend) {
	letter-spacing: normal;
	text-transform: none;
}

.hafez-dp__logo {
	display: flex;
	justify-content: center;
	width: 100%;
	text-align: center;
}

.hafez-dp__logo-link {
	display: inline-flex;
	justify-content: center;
	max-width: 100%;
	line-height: 0;
}

.hafez-dp__logo img,
.hafez-dp__logo-img {
	display: block;
	width: var(--hafez-dp-logo-width, 168px);
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
}

.hafez-dp__box {
	position: relative;
	width: min(var(--hafez-dp-box-width, 640px), 100%);
	margin: 0;
	padding: 24px;
	background: var(--hafez-dp-box-bg, #ffffff);
	border: var(--hafez-dp-box-border-width, 1px) var(--hafez-dp-box-border-style, solid) var(--hafez-dp-box-border-color, #e6dfda);
	border-radius: var(--hafez-dp-radius-box, 24px);
	box-shadow: 0 16px 40px rgba(28, 25, 23, 0.06);
	color: var(--hafez-dp-field-text, #2c2624);
}

.hafez-dp--kyc {
	--hafez-dp-box-width: 760px;
}

.hafez-dp--pay,
.hafez-dp--buy {
	--hafez-dp-box-width: 560px;
}

body.hafez-qc--receipt .hafez-dp--pay {
	--hafez-dp-box-width: 520px;
}

.hafez-dp--wallet {
	--hafez-dp-box-width: 820px;
}

.hafez-dp--affiliate {
	--hafez-dp-box-width: 820px;
}

.hafez-dp--hub {
	--hafez-dp-box-width: 1120px;
}

@media (max-width: 600px) {
	.hafez-dp {
		padding: 16px 12px 32px;
	}

	.hafez-dp__box {
		padding: 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Buttons: one primary per step, the rest secondary
 * ------------------------------------------------------------------------ */

.hafez-dp-scope .hafez-dp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--hafez-dp-radius-button, 12px);
	font: inherit;
	font-family: var(--hafez-dp-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hafez-dp-scope .hafez-dp-btn[hidden] {
	display: none !important;
}

.hafez-dp-scope .hafez-dp-btn.hafez-dp-btn--primary,
.hafez-dp-scope .hafez-dp-btn.hafez-dp-btn--primary:visited {
	border-color: var(--hafez-dp-primary-bg, #f15a24);
	background: var(--hafez-dp-primary-bg, #f15a24);
	color: var(--hafez-dp-primary-text, #ffffff);
}

.hafez-dp-scope .hafez-dp-btn.hafez-dp-btn--primary:hover,
.hafez-dp-scope .hafez-dp-btn.hafez-dp-btn--primary:focus-visible {
	border-color: var(--hafez-dp-primary-hover-bg, #d4471a);
	background: var(--hafez-dp-primary-hover-bg, #d4471a);
	color: var(--hafez-dp-primary-hover-text, #ffffff);
}

.hafez-dp-scope .hafez-dp-btn.hafez-dp-btn--secondary,
.hafez-dp-scope .hafez-dp-btn.hafez-dp-btn--secondary:visited {
	border-color: var(--hafez-dp-box-border-color, #e6dfda);
	background: var(--hafez-dp-secondary-bg, #ffffff);
	color: var(--hafez-dp-secondary-text, #1c1917);
}

.hafez-dp-scope .hafez-dp-btn.hafez-dp-btn--secondary:hover,
.hafez-dp-scope .hafez-dp-btn.hafez-dp-btn--secondary:focus-visible {
	border-color: var(--hafez-dp-box-border-color, #e6dfda);
	background: var(--hafez-dp-secondary-hover-bg, #f7f4f2);
	color: var(--hafez-dp-secondary-hover-text, #1c1917);
}

.hafez-dp-scope .hafez-dp-btn:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--hafez-dp-primary-bg, #f15a24) 35%, transparent);
	outline-offset: 2px;
}

.hafez-dp-scope .hafez-dp-btn[disabled],
.hafez-dp-scope .hafez-dp-btn[aria-disabled="true"] {
	opacity: 0.7;
	cursor: not-allowed;
}

.hafez-dp-scope .hafez-dp-btn.is-busy {
	cursor: progress;
	opacity: 0.85;
}

/*
 * Small action buttons inside shared field markup (also used on the account
 * page, so their markup is not changed): secondary look.
 */
.hafez-dp-scope .hafez-user-fields__contracts-pick,
.hafez-dp-scope .hafez-user-fields__signature-btn,
.hafez-dp-scope .hafez-user-fields__btn,
.hafez-dp-scope .hafez-bank-card__add,
.hafez-dp-scope .hafez_buy__locate {
	border: 1px solid var(--hafez-dp-box-border-color, #e6dfda) !important;
	border-radius: var(--hafez-dp-radius-button, 12px) !important;
	background: var(--hafez-dp-secondary-bg, #ffffff) !important;
	color: var(--hafez-dp-secondary-text, #1c1917) !important;
	font-family: var(--hafez-dp-font) !important;
	box-shadow: none !important;
}

.hafez-dp-scope .hafez-user-fields__contracts-pick:hover,
.hafez-dp-scope .hafez-user-fields__contracts-pick:focus-visible,
.hafez-dp-scope .hafez-user-fields__signature-btn:hover,
.hafez-dp-scope .hafez-user-fields__signature-btn:focus-visible,
.hafez-dp-scope .hafez-user-fields__btn:hover,
.hafez-dp-scope .hafez-user-fields__btn:focus-visible,
.hafez-dp-scope .hafez-bank-card__add:hover,
.hafez-dp-scope .hafez-bank-card__add:focus-visible,
.hafez-dp-scope .hafez_buy__locate:hover,
.hafez-dp-scope .hafez_buy__locate:focus-visible {
	background: var(--hafez-dp-secondary-hover-bg, #f7f4f2) !important;
	color: var(--hafez-dp-secondary-hover-text, #1c1917) !important;
}

/* ---------------------------------------------------------------------------
 * Fields: labels, help text, typed text, corners
 * ------------------------------------------------------------------------ */

.hafez-dp-scope .hafez_kyc__field > span,
.hafez-dp-scope .hafez-qc__field > span,
.hafez-dp-scope .hafez-qc__attr-label,
.hafez-dp-scope .hafez-qc__gateways legend,
.hafez-dp-scope .hafez-c-receipt__field > span,
.hafez-dp-scope .hafez-c-receipt__amount > span:first-child,
.hafez-dp-scope .hafez-c-receipt__payment-label,
.hafez-dp-scope .hafez_buy__field > span,
.hafez-dp-scope .hafez_kyc__postal-item > span,
.hafez-dp-scope .hafez-wallet-account__label {
	color: var(--hafez-dp-label, #2c2624);
}

.hafez-dp-scope .hafez-user-fields__hint,
.hafez-dp-scope .hafez_kyc__lead,
.hafez-dp-scope .hafez_kyc__progress,
.hafez-dp-scope .hafez_kyc__resume,
.hafez-dp-scope .hafez_kyc__auto,
.hafez-dp-scope .hafez_kyc__known-title,
.hafez-dp-scope .hafez-qc__hint,
.hafez-dp-scope .hafez-qc__amount-words,
.hafez-dp-scope .hafez-c-receipt__hint,
.hafez-dp-scope .hafez-c-receipt__amount-words,
.hafez-dp-scope .hafez_buy__empty,
.hafez-dp-scope .hafez_buy__gateway small,
.hafez-dp-scope .hafez_buy__gateway em,
.hafez-dp-scope .hafez-wallet-account__empty {
	color: var(--hafez-dp-help, #6e6560);
}

.hafez-dp-scope .hafez-dp__box input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="file"]):not([type="range"]),
.hafez-dp-scope .hafez-dp__box select,
.hafez-dp-scope .hafez-dp__box textarea,
.hafez-dp-scope .hafez-dp__box .select2-selection {
	border-radius: var(--hafez-dp-radius-field, 8px);
	color: var(--hafez-dp-field-text, #2c2624);
}

.hafez-dp-scope .hafez-dp__box input[type="radio"],
.hafez-dp-scope .hafez-dp__box input[type="checkbox"] {
	accent-color: var(--hafez-dp-primary-bg, #f15a24);
}

.hafez-dp-scope .hafez-dp__box h1,
.hafez-dp-scope .hafez-dp__box h2,
.hafez-dp-scope .hafez-dp__box h3 {
	color: var(--hafez-dp-label, #2c2624);
}

/* Radio groups of the field engine (their own rules live in account.css,
 * which the dedicated pages do not load). */
.hafez-dp-scope .hafez-user-fields__row--radios {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	min-width: 0;
	margin: 0 0 var(--hafez-uf-row-gap, 14px);
	padding: 0;
	border: 0;
}

.hafez-dp-scope .hafez-user-fields__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}

.hafez-dp-scope .hafez-user-fields__radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--hafez-dp-box-border-color, #e6dfda);
	border-radius: var(--hafez-dp-radius-field, 8px);
	background: var(--hafez-uf-input-bg, #ffffff);
	color: var(--hafez-dp-field-text, #2c2624);
	font-size: 13px;
	cursor: pointer;
}

.hafez-dp-scope .hafez-user-fields__radio:has(input:checked) {
	border-color: var(--hafez-dp-primary-bg, #f15a24);
	background: color-mix(in srgb, var(--hafez-dp-primary-bg, #f15a24) 8%, #ffffff);
}

.hafez-dp-scope .hafez-user-fields__radio input[type="radio"] {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * KYC inside the box: the sheet, cards and steps are sections, not boxes
 * ------------------------------------------------------------------------ */

.hafez-dp--kyc .hafez-dp__box {
	/* ~10% under page type — avoid CSS zoom (breaks Select2 dropdown position). */
	font-size: 90%;
}

.hafez-dp--kyc .hafez_kyc__steps {
	padding: 4px 0 12px;
}

.hafez-dp--kyc .hafez_kyc__actions {
	padding-top: 16px;
	border-top: 1px solid var(--hafez-dp-box-border-color, #e6dfda);
}

.hafez-dp--kyc .hafez_kyc__inquire {
	border-top-color: var(--hafez-dp-box-border-color, #e6dfda);
}

/* ---------------------------------------------------------------------------
 * Pay / buy (quick checkout) inside the box
 * ------------------------------------------------------------------------ */

.hafez-dp--pay .hafez-qc__card,
.hafez-dp--buy .hafez-qc__card {
	margin: 0;
	padding: 16px 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--hafez-dp-box-border-color, #e6dfda);
	border-radius: 0;
	box-shadow: none;
}

.hafez-dp--pay .hafez-qc__field input,
.hafez-dp--pay .hafez-qc__field select,
.hafez-dp--pay .hafez-qc__field textarea,
.hafez-dp--buy .hafez-qc__field input,
.hafez-dp--buy .hafez-qc__field select,
.hafez-dp--buy .hafez-qc__field textarea,
.hafez-dp--pay .hafez-c-receipt__field input,
.hafez-dp--pay .hafez-c-receipt__field select,
.hafez-dp--pay .hafez-c-receipt__field textarea,
.hafez-dp--pay .hafez-c-receipt__amount-input {
	border-color: var(--hafez-dp-box-border-color, #e6dfda);
}

.hafez-dp--pay .hafez-qc__actions .hafez-dp-btn,
.hafez-dp--buy .hafez-qc__actions .hafez-dp-btn,
.hafez-dp--pay .hafez-c-receipt__pay.hafez-dp-btn {
	width: 100%;
	min-height: 48px;
	font-size: 1rem;
}

.hafez-dp--pay .hafez-c-receipt {
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Wallet page inside the box
 * ------------------------------------------------------------------------ */

.hafez-dp--wallet .hafez-wallet-account {
	margin: 0;
}

/* The balance is a section of the box, not a card inside it. */
.hafez-dp--wallet .hafez-wallet-account__summary {
	margin: 0 0 16px;
	padding: 0 0 16px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--hafez-dp-box-border-color, #e6dfda);
	border-radius: 0;
	box-shadow: none;
}

.hafez-wallet-canvas__main,
.hafez-dp-canvas__main {
	display: block;
	margin: 0;
	padding: 0;
}

.hafez-dp--wallet .hafez-wallet-account__actions .hafez-dp-btn {
	min-width: 160px;
}

/* ---------------------------------------------------------------------------
 * Easy-buy popup: the dialog is the form box (no logo, see Hafez_Easy_Buy)
 * ------------------------------------------------------------------------ */

.hafez_buy.hafez-dp-scope {
	--hb-font: var(--hafez-dp-font);
	--hb-accent: var(--hafez-dp-primary-bg, #f15a24);
	--hb-on-accent: var(--hafez-dp-primary-text, #ffffff);
	--hb-text: var(--hafez-dp-field-text, #1c1917);
	--hb-muted: var(--hafez-dp-help, #78716c);
	--hb-surface: var(--hafez-dp-box-bg, #ffffff);
	--hb-border: var(--hafez-dp-box-border-color, #e7e5e4);
	--hb-radius: var(--hafez-dp-radius-box, 22px);
	--hb-input-radius: var(--hafez-dp-radius-field, 12px);
}

.hafez_buy.hafez-dp-scope *,
.hafez_buy.hafez-dp-scope *::before,
.hafez_buy.hafez-dp-scope *::after {
	box-sizing: border-box;
}

.hafez_buy.hafez-dp-scope .hafez_buy__dialog.hafez-dp__box {
	width: min(var(--hb-width, 560px), 100%);
	padding: 22px 22px 18px;
	border-radius: var(--hafez-dp-radius-box, 22px);
	box-shadow: 0 24px 60px rgba(28, 25, 23, 0.22);
}

.hafez_buy.hafez-dp-scope .hafez_buy__title {
	color: var(--hafez-dp-label, #1c1917);
}

.hafez_buy.hafez-dp-scope .hafez_buy__actions .hafez-dp-btn {
	min-height: var(--hb-button, 48px);
	font-size: inherit;
}

.hafez_buy.hafez-dp-scope .hafez_buy__next,
.hafez_buy.hafez-dp-scope .hafez_buy__pay {
	flex: 1;
}

/* The close control keeps its round icon shape. */
.hafez_buy.hafez-dp-scope .hafez_buy__close.hafez-dp-btn {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 40px;
	min-height: 40px;
	height: 40px;
	padding: 0;
	border-radius: 999px;
	font-size: 22px;
	line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Page heading inside the box (affiliate page)
 * ------------------------------------------------------------------------ */

.hafez-dp-scope .hafez-dp-head {
	margin: 0 0 4px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--hafez-dp-box-border-color, #e6dfda);
	text-align: start;
}

.hafez-dp-scope .hafez-dp-head__title {
	margin: 0;
	color: var(--hafez-dp-label, #2c2624);
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	font-weight: 800;
	line-height: 1.4;
}

.hafez-dp-scope .hafez-dp-head__lead {
	margin: 6px 0 0;
	color: var(--hafez-dp-help, #6e6560);
	font-size: 0.92rem;
	line-height: 1.8;
}

/* ---------------------------------------------------------------------------
 * Affiliate page inside the box: the panel boxes are sections of the box
 * ------------------------------------------------------------------------ */

/* Theme type scales (block themes) must not enlarge the panel. */
.hafez-dp--affiliate .hafez-aff {
	gap: 0;
	font-size: 15px;
	line-height: 1.8;
}

.hafez-dp--affiliate .hafez-aff__builder summary {
	font-size: 14px;
}

.hafez-dp--affiliate .hafez-aff__stats {
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.hafez-dp--affiliate .hafez-aff__box {
	padding: 18px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--hafez-dp-box-border-color, #e6dfda);
	border-radius: 0;
}

.hafez-dp--affiliate .hafez-aff > :last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.hafez-dp--affiliate .hafez-aff__box--notice {
	margin: 16px 0 0;
	padding: 14px 16px;
	border: 0;
	border-inline-start: 4px solid var(--hafez-dp-primary-bg, #f15a24);
	border-radius: var(--hafez-dp-radius-field, 8px);
	background: color-mix(in srgb, var(--hafez-dp-primary-bg, #f15a24) 7%, var(--hafez-dp-box-bg, #ffffff));
}

.hafez-dp--affiliate .hafez-aff__flash {
	margin: 16px 0 0;
}

.hafez-dp--affiliate .hafez-aff__stats {
	margin: 18px 0 2px;
}

.hafez-dp--affiliate .hafez-aff__stat {
	background: color-mix(in srgb, var(--hafez-dp-label, #2c2624) 3%, var(--hafez-dp-box-bg, #ffffff));
	border-color: var(--hafez-dp-box-border-color, #e6dfda);
	border-radius: var(--hafez-dp-radius-field, 8px);
}

.hafez-dp--affiliate .hafez-aff__wallet-note {
	margin: 12px 0 0;
}

.hafez-dp--affiliate .hafez-aff__input,
.hafez-dp--affiliate .hafez-aff__field textarea {
	background: var(--hafez-uf-input-bg, #ffffff);
}

.hafez-dp--affiliate .hafez-aff__btn {
	min-height: 44px;
	font-family: var(--hafez-dp-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: normal;
}

/* ---------------------------------------------------------------------------
 * Tools hub (/tools, Hafez_Tools_Hub): a heading card and one card per tool.
 * The form box is only a frame here; every card takes the box colours.
 * ------------------------------------------------------------------------ */

.hafez-dp--hub .hafez-dp__box.hafez-dp__box--hub {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.hafez-hub {
	--hafez-hub-primary: var(--hafez-dp-primary-bg, #f15a24);
	--hafez-hub-primary-ink: var(--hafez-dp-primary-ink, var(--hafez-hub-primary));
	--hafez-hub-surface: var(--hafez-dp-box-bg, #ffffff);
	--hafez-hub-border: var(--hafez-dp-box-border-color, #e6dfda);
	--hafez-hub-label: var(--hafez-dp-label, #2c2624);
	--hafez-hub-help: var(--hafez-dp-help, #6e6560);
	display: grid;
	gap: 20px;
	min-width: 0;
	text-align: start;
}

.hafez-hub .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Heading card */
.hafez-hub__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	overflow: hidden;
	padding: clamp(20px, 4vw, 32px);
	background: linear-gradient(135deg, color-mix(in srgb, var(--hafez-hub-primary) 16%, var(--hafez-hub-surface)) 0%, var(--hafez-hub-surface) 72%);
	border: var(--hafez-dp-box-border-width, 1px) var(--hafez-dp-box-border-style, solid) var(--hafez-hub-border);
	border-radius: var(--hafez-dp-radius-box, 24px);
}

.hafez-hub__head::after {
	content: "";
	position: absolute;
	inset-block-start: -60px;
	inset-inline-end: -40px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--hafez-hub-primary) 10%, transparent);
	pointer-events: none;
}

.hafez-hub__head-text,
.hafez-hub__login {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.hafez-dp-scope .hafez-hub__hello {
	margin: 0 0 4px;
	color: var(--hafez-hub-primary-ink);
	font-size: 0.95rem;
	font-weight: 700;
}

.hafez-dp-scope .hafez-hub__title {
	display: block;
	margin: 0;
	color: var(--hafez-hub-label);
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	font-weight: 800;
	line-height: 1.4;
}

.hafez-dp-scope .hafez-hub__lead {
	margin: 6px 0 0;
	color: var(--hafez-hub-help);
	font-size: 0.95rem;
	line-height: 1.8;
}

.hafez-hub__login {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.hafez-dp-scope .hafez-hub__login-text {
	margin: 0;
	color: var(--hafez-hub-help);
	font-size: 0.9rem;
}

.hafez-hub__intro,
.hafez-hub__empty {
	margin: 0;
	padding: 18px 20px;
	background: var(--hafez-hub-surface);
	border: var(--hafez-dp-box-border-width, 1px) var(--hafez-dp-box-border-style, solid) var(--hafez-hub-border);
	border-radius: var(--hafez-dp-radius-box, 24px);
	color: var(--hafez-dp-field-text, #2c2624);
	line-height: 1.9;
}

.hafez-hub__intro > :first-child {
	margin-top: 0;
}

.hafez-hub__intro > :last-child {
	margin-bottom: 0;
}

.hafez-hub__empty {
	color: var(--hafez-hub-help);
	text-align: center;
}

/* Cards */
.hafez-dp-scope .hafez-hub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hafez-dp-scope .hafez-hub__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 20px;
	background: var(--hafez-hub-surface);
	border: var(--hafez-dp-box-border-width, 1px) var(--hafez-dp-box-border-style, solid) var(--hafez-hub-border);
	border-radius: var(--hafez-dp-radius-box, 24px);
	box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 8px 24px rgba(28, 25, 23, 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hafez-dp-scope .hafez-hub__card::before {
	content: none;
}

.hafez-dp-scope .hafez-hub__card:hover {
	border-color: color-mix(in srgb, var(--hafez-hub-primary) 45%, var(--hafez-hub-border));
	box-shadow: 0 2px 4px rgba(28, 25, 23, 0.04), 0 16px 36px rgba(28, 25, 23, 0.1);
	transform: translateY(-3px);
}

.hafez-dp-scope .hafez-hub__card:focus-within {
	outline: 2px solid color-mix(in srgb, var(--hafez-hub-primary) 60%, transparent);
	outline-offset: 3px;
}

.hafez-hub__card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.hafez-hub__icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: calc(var(--hafez-dp-radius-button, 12px) + 2px);
	background: color-mix(in srgb, var(--hafez-hub-primary) 13%, var(--hafez-hub-surface));
	color: var(--hafez-hub-primary-ink);
}

.hafez-hub__icon .hafez-hub__svg {
	display: block;
	width: 26px;
	height: 26px;
}

.hafez-hub__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 72%;
	padding: 4px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--hafez-hub-label) 6%, var(--hafez-hub-surface));
	color: var(--hafez-hub-label);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.6;
}

.hafez-hub__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hafez-hub-help);
}

.hafez-hub__status--ok .hafez-hub__dot {
	background: #16a34a;
}

.hafez-hub__status--warn .hafez-hub__dot {
	background: #f59e0b;
}

.hafez-dp-scope .hafez-hub__card-title {
	display: block;
	margin: 6px 0 0;
	color: var(--hafez-hub-label);
	font-size: 1.08rem;
	font-weight: 800;
	line-height: 1.5;
}

.hafez-dp-scope .hafez-hub__card-link,
.hafez-dp-scope .hafez-hub__card-link:visited,
.hafez-dp-scope .hafez-hub__card-link:hover {
	color: var(--hafez-hub-label);
	text-decoration: none;
	box-shadow: none;
}

/* The title link covers the whole card. */
.hafez-hub__card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.hafez-hub__card-link:focus,
.hafez-hub__card-link:focus-visible {
	outline: none;
}

.hafez-dp-scope .hafez-hub__card-text {
	flex: 1 1 auto;
	margin: 0;
	color: var(--hafez-hub-help);
	font-size: 0.9rem;
	line-height: 1.85;
}

.hafez-dp-scope .hafez-hub__code {
	margin: 0;
	padding: 10px 12px;
	border: 1.5px dashed color-mix(in srgb, var(--hafez-hub-primary) 55%, var(--hafez-hub-border));
	border-radius: var(--hafez-dp-radius-field, 8px);
	background: color-mix(in srgb, var(--hafez-hub-primary) 6%, var(--hafez-hub-surface));
	color: var(--hafez-hub-label);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
}

.hafez-hub__progress {
	display: block;
	overflow: hidden;
	height: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--hafez-hub-label) 9%, var(--hafez-hub-surface));
}

.hafez-hub__progress-bar {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--hafez-hub-primary);
}

.hafez-hub__card-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
}

.hafez-dp-scope .hafez-hub__cta.hafez-dp-btn {
	min-height: 40px;
	padding: 0 14px;
	pointer-events: none;
}

.hafez-dp-scope .hafez-hub__card:hover .hafez-hub__cta.hafez-dp-btn--primary {
	border-color: var(--hafez-dp-primary-hover-bg, #d4471a);
	background: var(--hafez-dp-primary-hover-bg, #d4471a);
	color: var(--hafez-dp-primary-hover-text, #ffffff);
}

.hafez-hub__arrow {
	display: inline-flex;
	transition: transform 0.18s ease;
}

.hafez-hub__arrow .hafez-hub__svg {
	width: 18px;
	height: 18px;
}

.hafez-hub__card:hover .hafez-hub__arrow {
	transform: translateX(-3px);
}

/* A second action sits above the card link. */
.hafez-dp-scope .hafez-hub__secondary.hafez-dp-btn {
	position: relative;
	z-index: 2;
	min-height: 40px;
	padding: 0 14px;
}

@media (max-width: 600px) {
	.hafez-hub {
		gap: 14px;
	}

	.hafez-hub__head {
		align-items: stretch;
		flex-direction: column;
	}

	.hafez-hub__login .hafez-dp-btn {
		width: 100%;
	}

	.hafez-dp-scope .hafez-hub__card {
		padding: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hafez-dp-scope .hafez-hub__card,
	.hafez-hub__arrow {
		transition: none;
	}

	.hafez-dp-scope .hafez-hub__card:hover,
	.hafez-hub__card:hover .hafez-hub__arrow {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * «باشگاه مشتریان» page (/tools/club/): the panel sections are parts of the box
 * ------------------------------------------------------------------------ */

.hafez-dp--club {
	--hafez-dp-box-width: 900px;
}

.hafez-dp--club .hafez-club {
	gap: 0;
	font-family: var(--hafez-dp-font);
}

.hafez-dp--club .hafez-club > * + * {
	margin-block-start: 18px;
}

.hafez-dp--club .hafez-club__section {
	padding: 18px 0 0;
	border: 0;
	border-block-start: 1px solid var(--hafez-dp-box-border-color, #e6dfda);
	border-radius: 0;
	background: transparent;
}

.hafez-dp--club .hafez-club-btn {
	min-height: 44px;
	font-family: var(--hafez-dp-font);
}

/* Preview sample: progress bar of the member card. */
.hafez-dp--club .hafez_vip__pg-club-card {
	color: #ffffff;
	background: linear-gradient(135deg, #a07612, #6b4e0c);
	border-radius: var(--hafez-dp-radius-box, 14px);
}

.hafez-dp--club .hafez_vip__pg-club-card .hafez_vip__pg-label,
.hafez-dp--club .hafez_vip__pg-club-card .hafez_vip__pg-help,
.hafez-dp--club .hafez_vip__pg-club-card .hafez_vip__pg-amount {
	color: #ffffff;
}

.hafez-dp--club .hafez_vip__pg-club-bar {
	display: block;
	block-size: 8px;
	margin-block-start: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.3);
	overflow: hidden;
}

.hafez-dp--club .hafez_vip__pg-club-bar > span {
	display: block;
	inline-size: 64%;
	block-size: 100%;
	background: #ffffff;
}