:root {
	--hzpay-white: #ffffff;
	--hzpay-ivory: #fbf8f1;
	--hzpay-cream: #f7f2e8;
	--hzpay-black: #12100d;
	--hzpay-ink: #1a1712;
	--hzpay-gold: #c89d3d;
	--hzpay-gold-light: #d5ad52;
	--hzpay-muted: #6e665b;
	--hzpay-border: #e8deca;
	--hzpay-success: #287a4b;
	--hzpay-error: #a83232;
	--hzpay-shadow: 0 20px 55px rgba(18, 16, 13, 0.09);
}

/* v1.2.1 payment method/account logos and two-receipt review. */
.hzac-payment-method-logo,
.hzac-payment-account-logo-image,
.hzac-admin-method-logo img,
.hzac-admin-logo-preview img,
.hzac-admin-table-logos img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
	border: 1px solid #e8deca;
}

.hzac-payment-method-logo + .hzac-payment-logo-fallback {
	display: none;
}

.hzac-checkout-method-grid {
	margin-top: 14px;
}

.hzac-checkout-free-delivery {
	color: #287a4b;
}

.hzac-payment-identity,
.hzac-payment-review-title,
.hzac-admin-table-logos,
.hzac-payment-account-logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hzac-payment-account-logo > span,
.hzac-admin-method-logo > span,
.hzac-admin-table-logos > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 5px;
	border: 1px solid #e8deca;
	border-radius: 10px;
	background: #fbf8f1;
	color: #12100d;
	font-size: 10px;
	text-align: center;
}

.hzac-payment-confirm {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	padding: 14px;
	border: 1px solid #e8deca;
	border-radius: 10px;
	background: #fbf8f1;
}

.hzac-payment-confirm input {
	width: auto !important;
	margin-top: 3px;
}

.hzac-admin-logo-field {
	display: grid;
	gap: 8px;
	padding: 14px;
	border: 1px solid #e8deca;
	border-radius: 10px;
	background: #fbf8f1;
}

.hzac-admin-logo-preview {
	min-height: 52px;
}

.hzac-payment-receipt-comparison {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 18px 0;
}

.hzac-payment-receipt-comparison > div,
.hzac-payment-match-result,
.hzac-payment-approval-form,
.hzac-payment-secondary-actions {
	padding: 16px;
	border: 1px solid #e8deca;
	border-radius: 12px;
	background: #fbf8f1;
}

.hzac-payment-match-result.is-exact_match {
	border-color: #287a4b;
	color: #287a4b;
}

.hzac-payment-match-result.is-no_match,
.hzac-payment-match-result.is-duplicate_transaction {
	border-color: #a83232;
	color: #a83232;
}

.hzac-payment-approval-form,
.hzac-payment-secondary-actions {
	margin-top: 16px;
}

@media (max-width: 782px) {
	.hzac-payment-receipt-comparison {
		grid-template-columns: 1fr;
	}
}

.hzac-payment-shell,
.hzac-payment-shell *,
.hzac-payment-admin,
.hzac-payment-admin *,
.hzac-add-cash-page,
.hzac-add-cash-page * {
	box-sizing: border-box;
}

.hzac-payment-shell {
	width: min(100% - 24px, 980px);
	margin: 0 auto;
	padding: 28px 0 72px;
	color: var(--hzpay-ink);
}

.hzac-payment-card {
	min-width: 0;
	margin: 0 0 16px;
	padding: 20px;
	border: 1px solid var(--hzpay-border);
	border-radius: 18px;
	background: var(--hzpay-white);
	box-shadow: var(--hzpay-shadow);
}

.hzac-payment-card h1,
.hzac-payment-card h2,
.hzac-payment-admin h2,
.hzac-add-cash-page h2 {
	margin: 0;
	color: var(--hzpay-black);
	font-weight: 850;
	line-height: 1.15;
}

.hzac-payment-card h1 {
	font-size: clamp(28px, 8vw, 46px);
	letter-spacing: -0.035em;
}

.hzac-payment-card h2,
.hzac-add-cash-page h2 {
	font-size: clamp(21px, 5vw, 28px);
}

.hzac-payment-eyebrow {
	margin: 0 0 8px;
	color: #8e681d;
	font-size: 11px;
	font-weight: 850;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.hzac-payment-hero {
	display: grid;
	gap: 18px;
	background: linear-gradient(145deg, var(--hzpay-ivory), var(--hzpay-white) 65%);
}

.hzac-payment-status {
	display: grid;
	width: fit-content;
	min-width: 180px;
	gap: 3px;
	padding: 12px 15px;
	border: 1px solid var(--hzpay-border);
	border-radius: 14px;
	background: var(--hzpay-white);
}

.hzac-payment-status span,
.hzac-payment-facts span,
.hzac-payment-review-facts span,
.hzac-payment-admin-form label > span {
	color: var(--hzpay-muted);
	font-size: 11px;
	font-weight: 720;
	letter-spacing: 0.03em;
}

.hzac-payment-status strong {
	font-size: 14px;
}

.hzac-payment-status.is-approved strong {
	color: var(--hzpay-success);
}

.hzac-payment-status.is-rejected strong,
.hzac-payment-status.is-expired strong,
.hzac-payment-status.is-revoked strong,
[data-hzac-expiry].is-expired {
	color: var(--hzpay-error);
}

.hzac-payment-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.hzac-payment-facts > div,
.hzac-payment-review-facts > div {
	display: grid;
	min-width: 0;
	gap: 5px;
	padding: 13px;
	border: 1px solid var(--hzpay-border);
	border-radius: 13px;
	background: var(--hzpay-white);
}

.hzac-payment-facts strong,
.hzac-payment-review-facts strong,
.hzac-payment-account-card dd,
.hzac-payment-result dd,
.hzac-recharge-detail dd,
.hzac-order-payment-details dd {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

[data-hzac-expiry] {
	color: #805d18;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0.02em;
}

.hzac-payment-alert {
	margin: 0 0 16px;
	padding: 15px 17px;
	border-left: 4px solid var(--hzpay-gold);
	border-radius: 12px;
	background: var(--hzpay-ivory);
	color: var(--hzpay-ink);
	font-size: 14px;
	line-height: 1.6;
}

.hzac-payment-alert.is-error {
	border-left-color: var(--hzpay-error);
	background: #fff5f4;
	color: #7f2929;
}

.hzac-payment-alert.is-warning {
	background: #fff9ec;
}

.hzac-payment-section-copy {
	max-width: 680px;
	margin: 10px 0 0;
	color: var(--hzpay-muted);
	font-size: 14px;
	line-height: 1.6;
}

.hzac-payment-journey {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 7px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.hzac-payment-journey li {
	display: grid;
	min-width: 0;
	justify-items: center;
	gap: 7px;
	padding: 11px 4px;
	border: 1px solid var(--hzpay-border);
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.78);
	color: var(--hzpay-muted);
	text-align: center;
}

.hzac-payment-journey li > span {
	display: inline-grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border: 1px solid var(--hzpay-border);
	border-radius: 50%;
	background: var(--hzpay-ivory);
	font-size: 12px;
	font-weight: 850;
}

.hzac-payment-journey strong {
	min-width: 0;
	font-size: 10px;
	line-height: 1.25;
}

.hzac-payment-journey li.is-complete,
.hzac-payment-journey li.is-current {
	border-color: rgba(200, 157, 61, 0.55);
	color: var(--hzpay-black);
}

.hzac-payment-journey li.is-complete > span {
	border-color: var(--hzpay-black);
	background: var(--hzpay-black);
	color: var(--hzpay-white);
}

.hzac-payment-journey li.is-current {
	background: #fffaf0;
	box-shadow: inset 0 -3px 0 var(--hzpay-gold);
}

.hzac-payment-journey li.is-current > span {
	border-color: var(--hzpay-gold);
	background: var(--hzpay-gold);
	color: var(--hzpay-black);
}

.hzac-payment-method-form,
.hzac-payment-proof-form,
.hzac-recharge-form-card form {
	display: grid;
	gap: 18px;
	margin-top: 18px;
}

.hzac-payment-method-grid {
	display: grid;
	/* Auto-fit so cards widen when there are few of them and wrap when there are
	   many. A fixed column count squeezed longer names like "NayaPay". */
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
}

.hzac-payment-method-card {
	position: relative;
	display: grid;
	min-width: 0;
	min-height: 92px;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--hzpay-border);
	border-radius: 15px;
	background: var(--hzpay-white);
	color: var(--hzpay-ink);
	font-size: 14px;
	font-weight: 800;
	text-align: left;
	cursor: pointer;
	transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.hzac-payment-method-card input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.hzac-payment-method-mark {
	display: inline-grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 12px;
	background: var(--hzpay-black);
	color: var(--hzpay-gold-light);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.04em;
}

.hzac-payment-method-copy {
	display: grid;
	min-width: 0;
	gap: 3px;
}

.hzac-payment-method-copy strong {
	min-width: 0;
	/* Break between words, not inside them: "NayaPay" must never render as
	   "Nayap ay". Only genuinely unbreakable strings fall back to breaking. */
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
	font-size: 13px;
	line-height: 1.2;
}

.hzac-payment-method-copy small {
	color: var(--hzpay-muted);
	font-size: 10px;
	font-weight: 650;
}

.hzac-payment-method-check {
	display: inline-grid;
	width: 24px;
	height: 24px;
	place-items: center;
	border: 1px solid var(--hzpay-border);
	border-radius: 50%;
	color: transparent;
	font-size: 12px;
}

.hzac-payment-method-card:hover,
.hzac-payment-method-card:focus-within,
.hzac-payment-method-card.is-selected,
.hzac-payment-method-card:has(input:checked) {
	border-color: var(--hzpay-gold);
	background: #fffaf0;
	box-shadow: 0 0 0 3px rgba(200, 157, 61, 0.16);
	transform: translateY(-1px);
}

.hzac-payment-method-card.is-selected .hzac-payment-method-check,
.hzac-payment-method-card input:checked ~ .hzac-payment-method-check {
	border-color: var(--hzpay-gold);
	background: var(--hzpay-gold);
	color: var(--hzpay-black);
}

.hzac-payment-button {
	display: inline-flex;
	min-height: 46px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 19px;
	border: 1px solid var(--hzpay-black) !important;
	border-radius: 12px !important;
	background: var(--hzpay-black) !important;
	color: var(--hzpay-white) !important;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none !important;
	cursor: pointer;
	transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.hzac-payment-button:hover,
.hzac-payment-button:focus-visible {
	border-color: var(--hzpay-gold) !important;
	background: var(--hzpay-gold) !important;
	color: var(--hzpay-black) !important;
	outline: 0;
	transform: translateY(-1px);
}

.hzac-payment-button.is-secondary {
	border-color: var(--hzpay-border) !important;
	background: var(--hzpay-ivory) !important;
	color: var(--hzpay-ink) !important;
}

.hzac-payment-button:disabled,
.hzac-payment-button[aria-busy="true"] {
	opacity: 0.58;
	cursor: wait;
	transform: none;
}

.hzac-payment-section-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}

.hzac-payment-secure-badge {
	display: inline-flex;
	min-height: 30px;
	align-items: center;
	padding: 0 11px;
	border-radius: 99px;
	background: var(--hzpay-cream);
	color: #805d18;
	font-size: 11px;
	font-weight: 780;
}

.hzac-payment-important {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 11px;
	margin: 0 0 18px;
	padding: 14px;
	border: 1px solid #ead59f;
	border-radius: 14px;
	background: #fff6da;
	color: #654b12;
}

.hzac-payment-important > span {
	display: inline-grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 9px;
	background: var(--hzpay-gold);
	color: var(--hzpay-black);
	font-weight: 900;
}

.hzac-payment-important p {
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 680;
	line-height: 1.55;
}

.hzac-payment-account-card dl,
.hzac-payment-result dl,
.hzac-recharge-detail dl,
.hzac-order-payment-details dl {
	display: grid;
	grid-template-columns: 1fr;
	gap: 9px;
	margin: 0;
}

.hzac-payment-account-card dl > div,
.hzac-payment-result dl > div,
.hzac-recharge-detail dl > div,
.hzac-order-payment-details dl > div {
	display: grid;
	min-width: 0;
	grid-template-columns: minmax(95px, 0.7fr) minmax(0, 1.3fr);
	align-items: center;
	gap: 8px 12px;
	padding: 12px 0;
	border-bottom: 1px solid #f0e9dc;
}

.hzac-payment-account-card dl > .hzac-payment-account-emphasis {
	margin: 3px 0;
	padding: 14px;
	border: 1px solid #e3c77f;
	border-radius: 13px;
	background: #fffaf0;
}

.hzac-payment-account-emphasis dd {
	color: var(--hzpay-black);
	font-size: clamp(20px, 6vw, 28px);
	font-weight: 900;
}

.hzac-payment-account-card dt,
.hzac-payment-result dt,
.hzac-recharge-detail dt,
.hzac-order-payment-details dt {
	color: var(--hzpay-muted);
	font-size: 12px;
	font-weight: 720;
}

.hzac-payment-account-card dl button {
	grid-column: 1 / -1;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--hzpay-border);
	border-radius: 11px;
	background: var(--hzpay-ivory);
	color: var(--hzpay-ink);
	font: inherit;
	font-size: 12px;
	font-weight: 780;
	cursor: pointer;
}

.hzac-payment-account-card dl button:hover,
.hzac-payment-account-card dl button:focus-visible {
	border-color: var(--hzpay-gold);
	background: var(--hzpay-gold);
	outline: 0;
}

.hzac-payment-instructions {
	margin: 18px 0;
	padding: 16px;
	border-radius: 14px;
	background: var(--hzpay-ivory);
	color: var(--hzpay-muted);
	font-size: 14px;
	line-height: 1.65;
}

.hzac-payment-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.hzac-payment-form-grid label,
.hzac-recharge-custom,
.hzac-payment-admin-form label:not(.hzac-admin-check) {
	display: grid;
	min-width: 0;
	gap: 7px;
	color: var(--hzpay-ink);
	font-size: 13px;
	font-weight: 760;
}

.hzac-payment-form-grid input,
.hzac-payment-form-grid textarea,
.hzac-recharge-custom input,
.hzac-payment-admin-form input[type="text"],
.hzac-payment-admin-form input[type="email"],
.hzac-payment-admin-form input[type="number"],
.hzac-payment-admin-form select,
.hzac-payment-admin-form textarea,
.hzac-payment-review-actions textarea,
.hzac-payment-reopen-form input {
	width: 100%;
	min-width: 0;
	min-height: 46px;
	padding: 10px 13px;
	border: 1px solid #d9cfbd;
	border-radius: 11px;
	background: var(--hzpay-white);
	color: var(--hzpay-ink);
	font: inherit;
	box-shadow: none;
}

.hzac-payment-form-grid textarea,
.hzac-payment-admin-form textarea,
.hzac-payment-review-actions textarea {
	min-height: 92px;
	resize: vertical;
}

.hzac-payment-form-grid input:focus,
.hzac-payment-form-grid textarea:focus,
.hzac-recharge-custom input:focus,
.hzac-payment-admin-form input:focus,
.hzac-payment-admin-form select:focus,
.hzac-payment-admin-form textarea:focus {
	border-color: var(--hzpay-gold);
	box-shadow: 0 0 0 3px rgba(200, 157, 61, 0.17);
	outline: 0;
}

/* Keep numeric identifiers readable inside the Urdu/RTL customer page. */
.hzac-payment-shell[data-hzac-payment-page] .hzac-payment-ltr,
.hzac-payment-shell[data-hzac-payment-page] [data-hzac-ltr],
.hzac-recharge-form input[type="number"],
.hzac-payment-proof-form input[inputmode="numeric"] {
	direction: ltr;
	text-align: left;
	unicode-bidi: plaintext;
}

.hzac-payment-upload {
	padding: 16px;
	border: 1px dashed var(--hzpay-gold);
	border-radius: 15px;
	background: var(--hzpay-ivory);
}

.hzac-payment-upload input[type="file"] {
	padding: 9px;
	background: var(--hzpay-white);
}

.hzac-payment-upload small {
	color: var(--hzpay-muted);
	font-size: 11px;
}

[data-hzac-proof-preview] img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 340px;
	margin-top: 10px;
	border: 1px solid var(--hzpay-border);
	border-radius: 12px;
	object-fit: contain;
}

.hzac-payment-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 20px;
}

.hzac-payment-text-link {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	margin-top: 12px;
	color: #8a641b !important;
	font-size: 13px;
	font-weight: 780;
}

.hzac-payment-error {
	max-width: 680px;
	margin: 44px auto;
	text-align: center;
}

.hzac-payment-error p:not(.hzac-payment-eyebrow) {
	margin: 14px auto 22px;
	color: var(--hzpay-muted);
	line-height: 1.65;
}

.hzac-recharge-form-card {
	max-width: 760px;
}

.hzac-recharge-step {
	display: grid;
	gap: 16px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--hzpay-border);
}

.hzac-recharge-step + .hzac-recharge-step {
	padding-top: 2px;
}

.hzac-recharge-step > header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 12px;
}

.hzac-recharge-step > header > span {
	display: inline-grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 11px;
	background: var(--hzpay-black);
	color: var(--hzpay-gold-light);
	font-size: 13px;
	font-weight: 900;
}

.hzac-recharge-step header p {
	margin: 6px 0 0;
	color: var(--hzpay-muted);
	font-size: 13px;
	line-height: 1.5;
}

.hzac-recharge-presets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.hzac-recharge-presets button {
	min-height: 46px;
	padding: 0 10px;
	border: 1px solid var(--hzpay-border);
	border-radius: 12px;
	background: var(--hzpay-white);
	color: var(--hzpay-ink);
	font: inherit;
	font-weight: 780;
	cursor: pointer;
}

.hzac-recharge-presets button:hover,
.hzac-recharge-presets button:focus-visible,
.hzac-recharge-presets button.is-selected {
	border-color: var(--hzpay-gold);
	background: #fffaf0;
	box-shadow: 0 0 0 3px rgba(200, 157, 61, 0.16);
	outline: 0;
}

.hzac-recharge-amount-summary {
	display: flex;
	min-height: 76px;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border-radius: 15px;
	background: var(--hzpay-black);
	color: var(--hzpay-white);
}

.hzac-recharge-amount-summary > span {
	color: #d8cfc0;
	font-size: 11px;
	font-weight: 720;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hzac-recharge-amount-summary strong {
	color: var(--hzpay-gold-light);
	font-size: clamp(20px, 7vw, 30px);
	font-variant-numeric: tabular-nums;
}

.hzac-recharge-amount-summary b {
	font: inherit;
}

.hzac-payment-form-note {
	margin: -4px 0 0;
	color: var(--hzpay-muted);
	font-size: 11px;
	line-height: 1.55;
	text-align: center;
}

.hzac-recharge-requests,
.hzac-pending-recharges {
	margin-top: 28px;
}

.hzac-recharge-request-list {
	display: grid;
	gap: 10px;
	margin-top: 14px;
}

.hzac-recharge-request-list article {
	display: grid;
	min-width: 0;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--hzpay-border);
	border-radius: 14px;
	background: var(--hzpay-white);
}

.hzac-recharge-request-list article > div {
	display: grid;
	gap: 3px;
}

.hzac-recharge-request-list small {
	color: var(--hzpay-muted);
}

.hzac-order-payment-details {
	margin-top: 24px;
	padding: 20px;
	border: 1px solid var(--hzpay-border);
	border-radius: 16px;
	background: var(--hzpay-ivory);
}

.hzac-payment-admin {
	--hzpay-shadow: 0 14px 38px rgba(18, 16, 13, 0.07);
	max-width: 1500px;
}

.hzac-payment-admin .nav-tab-wrapper {
	display: flex;
	overflow-x: auto;
	padding-top: 12px;
	white-space: nowrap;
}

.hzac-payment-admin-content {
	padding-top: 20px;
}

.hzac-payment-admin-panel,
.hzac-payment-review-card {
	min-width: 0;
	margin: 0 0 18px;
	padding: 20px;
	border: 1px solid var(--hzpay-border);
	border-radius: 16px;
	background: var(--hzpay-white);
	box-shadow: var(--hzpay-shadow);
}

.hzac-payment-admin-panel > p {
	color: var(--hzpay-muted);
	line-height: 1.6;
}

.hzac-payment-admin-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.hzac-payment-admin-form {
	display: grid;
	gap: 15px;
	margin-top: 16px;
}

.hzac-payment-admin-form fieldset {
	display: grid;
	gap: 7px;
	padding: 14px;
	border: 1px solid var(--hzpay-border);
	border-radius: 13px;
}

.hzac-payment-admin-form legend {
	padding: 0 7px;
	font-weight: 800;
}

.hzac-admin-check {
	display: flex !important;
	min-height: 38px;
	align-items: center;
	gap: 8px;
	font-weight: 650;
}

.hzac-admin-check input {
	margin: 0;
}

.hzac-payment-admin-table-wrap {
	max-width: 100%;
	overflow-x: auto;
	margin-top: 14px;
}

.hzac-payment-admin-table-wrap table,
.hzac-payment-admin-panel table {
	min-width: 760px;
}

.hzac-payment-admin-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 14px;
}

.hzac-payment-admin-toolbar form {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hzac-payment-review-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.hzac-payment-review-card header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--hzpay-border);
}

.hzac-payment-review-card header span {
	color: var(--hzpay-muted);
	font-size: 11px;
	font-weight: 760;
	text-transform: uppercase;
}

.hzac-payment-review-card header h2 {
	margin-top: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 19px;
}

.hzac-payment-admin-status {
	display: inline-flex;
	min-height: 30px;
	align-items: center;
	padding: 0 10px;
	border-radius: 99px;
	background: var(--hzpay-cream);
	color: #805d18;
	font-size: 11px;
}

.hzac-payment-review-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 15px;
}

.hzac-payment-review-links,
.hzac-payment-review-actions,
.hzac-payment-reopen-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 9px;
	margin-top: 15px;
}

.hzac-payment-review-actions > form,
.hzac-payment-review-actions details {
	min-width: min(100%, 280px);
	flex: 1 1 280px;
}

.hzac-payment-review-actions details {
	padding: 10px;
	border: 1px solid var(--hzpay-border);
	border-radius: 12px;
	background: var(--hzpay-ivory);
}

.hzac-payment-review-actions summary {
	font-weight: 780;
	cursor: pointer;
}

.hzac-payment-review-actions details form {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}

.hzac-payment-audit-timeline {
	display: grid;
	gap: 11px;
	margin: 15px 0 0;
	padding: 0;
	list-style: none;
}

.hzac-payment-audit-timeline li {
	display: grid;
	gap: 4px;
	padding: 14px;
	border-left: 4px solid var(--hzpay-gold);
	border-radius: 10px;
	background: var(--hzpay-ivory);
}

.hzac-payment-audit-timeline span,
.hzac-payment-audit-timeline small {
	color: var(--hzpay-muted);
}

.hzac-payment-audit-timeline p {
	margin: 4px 0 0;
}

@media (min-width: 600px) {
	.hzac-payment-facts,
	.hzac-payment-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hzac-payment-field-wide {
		grid-column: 1 / -1;
	}

	.hzac-payment-section-heading {
		align-items: center;
		flex-direction: row;
	}

	.hzac-payment-account-card dl > div,
	.hzac-payment-result dl > div,
	.hzac-recharge-detail dl > div,
	.hzac-order-payment-details dl > div {
		grid-template-columns: 150px minmax(0, 1fr) auto;
	}

	.hzac-payment-account-card dl button {
		grid-column: auto;
	}

	.hzac-recharge-presets {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hzac-recharge-request-list article {
		grid-template-columns: minmax(130px, 1.2fr) minmax(100px, 1fr) auto auto auto;
		align-items: center;
	}
}

@media (min-width: 900px) {
	.hzac-payment-shell {
		padding-top: 48px;
	}

	.hzac-payment-card,
	.hzac-payment-admin-panel,
	.hzac-payment-review-card {
		padding: 28px;
	}

	.hzac-payment-hero {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}

	.hzac-payment-facts {
		grid-column: 1 / -1;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.hzac-payment-method-grid {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}

	.hzac-payment-admin-grid {
		grid-template-columns: minmax(360px, 0.75fr) minmax(0, 1.25fr);
		align-items: start;
	}

	.hzac-payment-review-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 374px) {
	.hzac-payment-shell {
		width: calc(100% - 16px);
	}

	.hzac-payment-card {
		padding: 16px;
		border-radius: 15px;
	}

	.hzac-payment-method-grid,
	.hzac-payment-review-facts {
		grid-template-columns: 1fr;
	}

	.hzac-payment-journey {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.hzac-payment-shell *,
	.hzac-add-cash-page *,
	.hzac-payment-admin * {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

.hzac-payment-shell {
	--hz-accent: var(--hzpay-black);
	--hz-accent-text: var(--hzpay-white);
}

.hzac-payment-brand-logo {
	display: inline-flex;
	max-width: 220px;
	align-items: center;
	justify-content: center;
	padding: 8px 0;
	color: var(--hzpay-black);
	font-size: 20px;
	font-weight: 900;
}

.hzac-payment-hassanza-logo-image {
	display: block;
	width: auto;
	max-width: 220px;
	max-height: 72px;
	object-fit: contain;
}

.hzac-payment-timer-fact {
	border-color: color-mix(in srgb, var(--hz-accent) 38%, var(--hzpay-border)) !important;
	background: color-mix(in srgb, var(--hz-accent) 12%, var(--hzpay-white)) !important;
}

.hzac-payment-timer-fact [data-hzac-expiry],
.hzac-payment-eyebrow,
.hzac-payment-account-emphasis dd {
	color: var(--hz-accent);
}

.hzac-payment-button,
.hzac-payment-account-card dl button:hover,
.hzac-payment-account-card dl button:focus-visible {
	border-color: var(--hz-accent) !important;
	background: var(--hz-accent) !important;
	color: var(--hz-accent-text) !important;
}

.hzac-payment-button:hover,
.hzac-payment-button:focus-visible {
	border-color: var(--hz-accent) !important;
	background: color-mix(in srgb, var(--hz-accent) 88%, var(--hzpay-white)) !important;
	color: var(--hz-accent-text) !important;
}

.hzac-payment-button.is-secondary {
	border-color: color-mix(in srgb, var(--hz-accent) 32%, var(--hzpay-border)) !important;
	background: var(--hzpay-ivory) !important;
	color: var(--hzpay-ink) !important;
}

.hzac-payment-result {
	text-align: center;
}

.hzac-payment-result-icon {
	display: inline-grid;
	width: 82px;
	height: 82px;
	place-items: center;
	margin: 0 auto 14px;
	border-radius: 999px;
	background: var(--hz-accent);
	color: var(--hz-accent-text);
	font-size: 38px;
	font-weight: 900;
	line-height: 1;
}

.hzac-payment-result.is-approved .hzac-payment-result-icon {
	background: var(--hzpay-success);
	color: var(--hzpay-white);
}

.hzac-payment-result.is-rejected .hzac-payment-result-icon,
.hzac-payment-result.is-expired .hzac-payment-result-icon,
.hzac-payment-result.is-unavailable .hzac-payment-result-icon {
	background: var(--hzpay-error);
	color: var(--hzpay-white);
}

.hzac-payment-urdu {
	margin: 10px 0;
	color: var(--hz-accent);
	font-size: 18px;
	font-weight: 800;
}

.hzac-payment-result-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
}

/* =====================================================================
   v1.3.28 — Slim, professional single-card payment page (hzac-pay-*)
   One symmetric card: brand + method logo, order + expiry, amount,
   account number, upload receipt, sender account, transaction id, submit.
   Then an animated success/processing result with a Close button.
   ===================================================================== */
.hzac-payment-shell.hzac-pay-slim {
	max-width: 460px;
	margin: 0 auto;
	padding: 20px 14px 60px;
}
.hzac-pay-card {
	background: var(--hzpay-white);
	border: 1px solid var(--hzpay-border);
	border-radius: 20px;
	box-shadow: var(--hzpay-shadow);
	padding: 22px 20px;
	margin: 0 0 16px;
}

/* Row helper */
.hzac-pay-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* Row 1 — brands */
.hzac-pay-brands { margin-bottom: 16px; }
.hzac-pay-brand img,
.hzac-pay-brand svg { max-height: 34px; width: auto; display: block; }
.hzac-pay-brand .hzac-payment-hassanza-logo-image { max-height: 34px; width: auto; height: auto; }
.hzac-pay-result-brands .hzac-pay-brand .hzac-payment-hassanza-logo-image { max-height: 30px; }
.hzac-pay-brand > span { font-weight: 900; font-size: 18px; color: var(--hzpay-black); letter-spacing: 0.02em; }
.hzac-pay-brand .hzac-payment-logo,
.hzac-pay-brand .hzac-payment-brand-logo img { max-height: 34px; width: auto; }
.hzac-pay-method-logo { display: flex; align-items: center; justify-content: flex-end; }
.hzac-pay-method-logo-img {
	max-height: 30px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
	border: 0;
	background: transparent;
	border-radius: 6px;
}
.hzac-pay-method-name { font-weight: 800; color: var(--hzpay-ink); font-size: 15px; }

/* Row 2 — order + expiry */
.hzac-pay-meta {
	padding: 12px 0;
	border-top: 1px solid var(--hzpay-border);
	border-bottom: 1px solid var(--hzpay-border);
	margin-bottom: 16px;
}
.hzac-pay-order, .hzac-pay-expiry { display: flex; flex-direction: column; gap: 2px; }
.hzac-pay-expiry { text-align: right; }
.hzac-pay-meta-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hzpay-muted);
	font-weight: 700;
}
.hzac-pay-order-no { font-size: 14px; font-weight: 800; color: var(--hzpay-ink); }
.hzac-pay-expiry-value { font-size: 15px; font-weight: 800; color: var(--hzpay-error); }
.hzac-pay-expiry-value.is-expired { color: var(--hzpay-error); }

/* Amount */
.hzac-pay-amount-block { margin-bottom: 16px; }
.hzac-pay-amount-label {
	display: block;
	font-size: 12px;
	color: var(--hzpay-muted);
	font-weight: 700;
	margin-bottom: 2px;
}
.hzac-pay-amount-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hzac-pay-amount { font-size: 30px; font-weight: 900; color: var(--hzpay-black); line-height: 1.1; }

/* Field lines (account number, iban) */
.hzac-pay-field-line {
	padding: 12px 0;
	border-top: 1px solid var(--hzpay-border);
}
.hzac-pay-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.hzac-pay-field-label { font-size: 13px; font-weight: 800; color: var(--hzpay-ink); }
.hzac-pay-field-sub { font-size: 12px; color: var(--hzpay-muted); }
.hzac-pay-field-value-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hzac-pay-field-value { font-size: 18px; font-weight: 800; color: var(--hzpay-black); letter-spacing: 0.02em; }

/* Copy button */
.hzac-pay-copy {
	flex: 0 0 auto;
	border: 1px solid var(--hzpay-gold);
	background: transparent;
	color: var(--hzpay-gold);
	font-size: 12px;
	font-weight: 800;
	padding: 5px 12px;
	border-radius: 9px;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
}
.hzac-pay-copy:hover { background: var(--hzpay-gold); color: #fff; }

/* Important instruction */
.hzac-pay-important {
	margin: 14px 0 18px;
	padding: 12px 14px;
	background: #fff8e6;
	border: 1px solid #f0dfa8;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #7a5c17;
}
.hzac-pay-important strong { font-weight: 700; }

/* Form */
.hzac-pay-form { display: flex; flex-direction: column; gap: 14px; }

/* Upload — big friendly icon button */
.hzac-pay-upload {
	display: block;
	cursor: pointer;
	border: 2px dashed var(--hzpay-border);
	border-radius: 14px;
	background: var(--hzpay-ivory);
	transition: border-color 140ms ease, background 140ms ease;
}
.hzac-pay-upload:hover { border-color: var(--hzpay-gold); background: #fff; }
.hzac-pay-upload.has-file { border-style: solid; border-color: var(--hzpay-success); background: #f1f9f4; }
.hzac-pay-upload-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 22px 16px;
	text-align: center;
}
.hzac-pay-upload-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--hzpay-white);
	border: 1px solid var(--hzpay-border);
	color: var(--hzpay-gold);
}
.hzac-pay-upload-icon svg { width: 22px; height: 22px; }
.hzac-pay-upload.has-file .hzac-pay-upload-icon { color: var(--hzpay-success); border-color: #bfe6cd; }
.hzac-pay-upload-text { font-size: 14px; font-weight: 800; color: var(--hzpay-ink); word-break: break-word; }
.hzac-pay-upload-hint { font-size: 11.5px; color: var(--hzpay-muted); }
.hzac-pay-upload-preview { padding: 0 14px 14px; }
.hzac-pay-upload-preview img { display: block; max-width: 100%; border-radius: 10px; }

/* Text inputs */
.hzac-pay-input { display: flex; flex-direction: column; gap: 5px; }
.hzac-pay-input-label { font-size: 13px; font-weight: 800; color: var(--hzpay-ink); }
.hzac-pay-input input,
.hzac-pay-input textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--hzpay-border);
	border-radius: 11px;
	padding: 12px 14px;
	font-size: 15px;
	background: var(--hzpay-white);
	color: var(--hzpay-ink);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.hzac-pay-input input:focus,
.hzac-pay-input textarea:focus {
	outline: none;
	border-color: var(--hzpay-gold);
	box-shadow: 0 0 0 3px rgba(200, 157, 61, 0.16);
}
.hzac-pay-input-hint { font-size: 11.5px; color: var(--hzpay-muted); }
.hzac-pay-note textarea { resize: vertical; min-height: 44px; }

/* Submit */
.hzac-pay-submit {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 12px;
	padding: 15px 18px;
	background: var(--hzpay-success);
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 140ms ease, transform 80ms ease;
}
.hzac-pay-submit:hover { background: #216b41; }
.hzac-pay-submit:active { transform: translateY(1px); }
.hzac-pay-submit.is-block { margin-bottom: 10px; }

/* ---- Result / success card ---- */
.hzac-pay-result { text-align: center; }
.hzac-pay-result-brands { display: flex; justify-content: center; margin-bottom: 10px; }
.hzac-pay-result-brands .hzac-pay-brand img,
.hzac-pay-result-brands .hzac-pay-brand svg { max-height: 30px; margin: 0 auto; }

.hzac-pay-result-badge { display: flex; justify-content: center; margin: 6px 0 14px; }
.hzac-pay-tick, .hzac-pay-cross { width: 96px; height: 96px; }
.hzac-pay-tick circle { fill: var(--hzpay-success); }
.hzac-pay-tick path {
	fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 90; stroke-dashoffset: 90;
	animation: hzacTick 520ms ease forwards 120ms;
}
.hzac-pay-result .hzac-pay-tick circle {
	transform-origin: 60px 60px;
	animation: hzacPop 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hzac-pay-cross circle { fill: var(--hzpay-error); }
.hzac-pay-cross path { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; }
@keyframes hzacTick { to { stroke-dashoffset: 0; } }
@keyframes hzacPop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.hzac-pay-spinner {
	width: 64px; height: 64px; border-radius: 50%;
	border: 6px solid var(--hzpay-border);
	border-top-color: var(--hzpay-gold);
	display: inline-block;
	animation: hzacSpin 900ms linear infinite;
}
@keyframes hzacSpin { to { transform: rotate(360deg); } }

.hzac-pay-result-title { font-size: 24px; font-weight: 900; margin: 4px 0 6px; color: var(--hzpay-black); }
.hzac-pay-result.is-approved .hzac-pay-result-title,
.hzac-pay-result.is-processing .hzac-pay-result-title { color: var(--hzpay-success); }
.hzac-pay-result.is-rejected .hzac-pay-result-title,
.hzac-pay-result.is-expired .hzac-pay-result-title,
.hzac-pay-result.is-unavailable .hzac-pay-result-title { color: var(--hzpay-error); }
.hzac-pay-result-copy { font-size: 14px; color: var(--hzpay-muted); line-height: 1.55; margin: 0 0 16px; }

.hzac-pay-result-info {
	text-align: left;
	border: 1px solid var(--hzpay-border);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16px;
}
.hzac-pay-result-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; padding: 11px 14px;
}
.hzac-pay-result-row + .hzac-pay-result-row { border-top: 1px solid var(--hzpay-border); }
.hzac-pay-result-row span { font-size: 12px; color: var(--hzpay-muted); font-weight: 700; }
.hzac-pay-result-row strong { font-size: 14px; color: var(--hzpay-ink); font-weight: 800; }

.hzac-pay-live-status { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.hzac-pay-live-status .status-item {
	flex: 1 1 0;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 10px 6px;
	border: 1px solid var(--hzpay-border);
	border-radius: 10px;
	opacity: 0.45;
	transition: opacity 160ms ease, border-color 160ms ease;
}
.hzac-pay-live-status .status-item.active { opacity: 1; border-color: var(--hzpay-gold); }
.hzac-pay-live-status .status-icon { font-size: 18px; }
.hzac-pay-live-status small { font-size: 11px; color: var(--hzpay-muted); font-weight: 700; }

.hzac-pay-result-actions { display: flex; flex-direction: column; gap: 8px; }
.hzac-pay-close {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--hzpay-border);
	border-radius: 12px;
	padding: 14px 18px;
	background: var(--hzpay-cream);
	color: var(--hzpay-ink);
	font-size: 15px;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 140ms ease;
}
.hzac-pay-close:hover { background: #efe7d6; }

/* Small screens: keep the single column tidy */
@media (max-width: 380px) {
	.hzac-pay-amount { font-size: 26px; }
	.hzac-pay-card { padding: 18px 16px; }
}

/* ============================================================
   Order status banner (view-order / thank-you page) — v1.3.30
   ============================================================ */
.hzac-order-status-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: 14px;
	margin: 0 0 22px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: #f6f7f9;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.hzac-order-status-banner .hzac-osb-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 900;
	color: #fff;
	background: #9aa0a6;
	line-height: 1;
}
.hzac-order-status-banner .hzac-osb-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}
.hzac-order-status-banner .hzac-osb-en {
	font-size: 15px;
	font-weight: 800;
	color: #1a1712;
	line-height: 1.3;
}
.hzac-order-status-banner .hzac-osb-ur {
	font-size: 13.5px;
	color: #5b6067;
	line-height: 1.5;
}
.hzac-order-status-banner .hzac-osb-order {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 700;
	color: #6b7178;
	background: rgba(0, 0, 0, 0.05);
	padding: 4px 10px;
	border-radius: 999px;
}
/* Tones */
.hzac-order-status-banner.is-success {
	background: #ecfdf3;
	border-color: #abefc6;
}
.hzac-order-status-banner.is-success .hzac-osb-icon { background: #12b76a; }
.hzac-order-status-banner.is-success .hzac-osb-en { color: #067647; }

.hzac-order-status-banner.is-pending {
	background: #fffaeb;
	border-color: #fedf89;
}
.hzac-order-status-banner.is-pending .hzac-osb-icon { background: #f79009; font-size: 17px; }
.hzac-order-status-banner.is-pending .hzac-osb-en { color: #b54708; }

.hzac-order-status-banner.is-danger {
	background: #fef3f2;
	border-color: #fecdca;
}
.hzac-order-status-banner.is-danger .hzac-osb-icon { background: #f04438; }
.hzac-order-status-banner.is-danger .hzac-osb-en { color: #b42318; }

@media (max-width: 480px) {
	.hzac-order-status-banner { flex-wrap: wrap; gap: 10px 12px; padding: 14px; }
	.hzac-order-status-banner .hzac-osb-order { order: 3; }
}