/* «خرید چکی»
 *
 * Indigo throughout: tokens.css already reserves --c-indigo for "cheque buy",
 * and the home page's BNPL panel uses the same family, so the checkout option
 * reads as the same product the customer saw on the landing page.
 *
 * Covers three surfaces — the checkout panel (.chq), the my-account cheque
 * list (.chqacc) and the single-product hint (.cheque-hint) — because they are
 * one visual system and splitting them across stylesheets meant loading two
 * files on the account page.
 *
 * Every custom property carries a literal fallback. The values come from the
 * Abzarct theme's tokens.css, but the plugin has to survive on a theme that
 * never defines them — without the fallbacks the panel renders with no colour
 * and no type scale at all.
 */

/* ---------------------------------------------------------------- checkout */

.chq {
	border: 1.5px solid var(--c-line, #D8DBDF);
	border-radius: var(--r, 6px);
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color .15s ease, background-color .15s ease;
}

.chq.is-on {
	border-color: var(--c-indigo, #6366F1);
	background: var(--c-indigo-50, #EEEEFF);
}

.chq__blocked {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: var(--r, 6px);
	background: #FFF6E5;
	color: #8A6100;
	font-size: var(--fs-11, 0.6875rem);
	line-height: 1.7;
}

.chq__switch {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px;
	cursor: pointer;
}

.chq__switch input {
	inline-size: 18px;
	block-size: 18px;
	margin: 2px 0 0;
	accent-color: var(--c-indigo, #6366F1);
	flex: 0 0 auto;
}

.chq__switchbody {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.chq__switchtitle {
	font-size: var(--fs-13, 0.8125rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-gray-700, #40444C);
}

.chq__switchsub {
	font-size: var(--fs-10, 0.625rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-text-muted, #757575);
}

.chq__body {
	padding: 0 12px 12px;
}

.chq__body[hidden] {
	display: none;
}

/* Cheque-count chooser — only rendered when a campaign allows more than one. */
.chq__counts {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.chq__count {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 36px;
	border: 1.5px solid #E2E6EE;
	border-radius: var(--r, 6px);
	background: var(--c-surface, #FFFFFF);
	font-size: var(--fs-11, 0.6875rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-gray-600, #5B616E);
	cursor: pointer;
}

.chq__count.is-picked {
	border-color: var(--c-indigo, #6366F1);
	color: var(--c-indigo-600, #4649E5);
}

/* The radio itself is redundant once the label is styled, but it stays in the
   DOM (not display:none) so keyboard focus and screen readers still reach it. */
.chq__count input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}

.chq__count:focus-within {
	outline: 2px solid var(--c-indigo, #6366F1);
	outline-offset: 2px;
}

/* ------------------------------------------------------- schedule preview */

.chq__schedule:empty {
	display: none;
}

.chq__deposit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border-radius: var(--r, 6px);
	background: var(--c-indigo, #6366F1);
	color: #fff;
	font-size: var(--fs-12, 0.75rem);
	font-weight: var(--fw-medium, 500);
}

.chq__deposit-v {
	font-weight: var(--fw-bold, 700);
	white-space: nowrap;
}

.chq__table {
	inline-size: 100%;
	margin: 8px 0 0;
	border-collapse: collapse;
	background: var(--c-surface, #FFFFFF);
	border-radius: var(--r, 6px);
	overflow: hidden;
}

.chq__table th,
.chq__table td {
	padding: 9px 12px;
	font-size: var(--fs-11, 0.6875rem);
	font-weight: var(--fw-medium, 500);
	text-align: start;
	border-bottom: 1px solid var(--c-line, #D8DBDF);
}

.chq__table tr:last-child th,
.chq__table tr:last-child td {
	border-bottom: 0;
}

.chq__table th {
	color: var(--c-gray-700, #40444C);
	inline-size: 25%;
}

.chq__due {
	color: var(--c-text-muted, #757575);
}

.chq__amount {
	text-align: end;
	color: var(--c-ink, #25272C);
	white-space: nowrap;
}

.chq__sum,
.chq__note {
	margin: 8px 0 0;
	font-size: var(--fs-10, 0.625rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-text-muted, #757575);
	line-height: 1.8;
}

/* ------------------------------------------------------------ chq fields */

.chq__fields {
	margin-top: 12px;
}

.chq__row {
	margin: 0 0 10px;
	padding: 0;
}

.chq__row label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--fs-11, 0.6875rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-gray-700, #40444C);
}

.chq__row .input-text {
	inline-size: 100%;
	min-block-size: 40px;
	padding: 0 12px;
	border: 1.5px solid #E2E6EE;
	border-radius: var(--r, 6px);
	background: var(--c-surface, #FFFFFF);
	font: inherit;
	font-size: var(--fs-12, 0.75rem);
	color: var(--c-ink, #25272C);
}

.chq__row .input-text:focus {
	border-color: var(--c-indigo, #6366F1);
	outline: none;
}

/* Latin-only fields (national ID) read wrong in an RTL box. */
#abzarct_cheque_national_id {
	direction: ltr;
	text-align: start;
	letter-spacing: .08em;
}

.chq__row--file input[type="file"] {
	inline-size: 100%;
	padding: 9px;
	border: 1.5px dashed #C3C8DA;
	border-radius: var(--r, 6px);
	background: var(--c-surface, #FFFFFF);
	font-size: var(--fs-11, 0.6875rem);
	color: var(--c-gray-600, #5B616E);
}

.chq__optional,
.chq__filehint {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-10, 0.625rem);
	font-weight: var(--fw-regular, 400);
	color: var(--c-text-dim, #8E95A2);
	line-height: 1.7;
}

.chq__optional {
	display: inline;
	margin: 0;
}

.chq__terms {
	margin: 12px 0 0;
	padding-inline-start: 18px;
	font-size: var(--fs-10, 0.625rem);
	line-height: 2;
	color: var(--c-text-muted, #757575);
}

/* --------------------------------------------------- my account: cheques */

.chqacc {
	margin-top: 20px;
}

.chqacc__title {
	margin: 0 0 8px;
	font-size: var(--fs-14, 0.875rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-gray-700, #40444C);
}

.chqacc__intro {
	margin: 0 0 12px;
	font-size: var(--fs-11, 0.6875rem);
	line-height: 1.9;
	color: var(--c-text-muted, #757575);
}

.chqacc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.chqacc__item {
	padding: 12px;
	border: 1.5px solid var(--c-line, #D8DBDF);
	border-radius: var(--r, 6px);
	background: var(--c-surface, #FFFFFF);
	/* The status colour is carried by an inline start border so the row reads
	   at a glance in a long list. */
	border-inline-start-width: 4px;
	border-inline-start-color: var(--c-gray-300, #B6BAC3);
}

.chqacc__item.is-submitted { border-inline-start-color: var(--c-indigo, #6366F1); }
.chqacc__item.is-approved,
.chqacc__item.is-cleared   { border-inline-start-color: var(--c-teal, #14B8A6); }
.chqacc__item.is-rejected,
.chqacc__item.is-bounced   { border-inline-start-color: var(--c-red, #EB3F3F); }

.chqacc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.chqacc__n {
	font-size: var(--fs-12, 0.75rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-gray-700, #40444C);
}

.chqacc__amount {
	font-size: var(--fs-13, 0.8125rem);
	font-weight: var(--fw-bold, 700);
	color: var(--c-ink, #25272C);
	white-space: nowrap;
}

.chqacc__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 6px;
	font-size: var(--fs-10, 0.625rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-text-muted, #757575);
}

.chqacc__view {
	display: inline-block;
	margin-top: 8px;
	font-size: var(--fs-10, 0.625rem);
	font-weight: var(--fw-medium, 500);
	color: #007AFF;
	text-decoration: none;
}

.chqacc__form {
	margin-top: 12px;
	padding: 12px;
	border: 1.5px dashed #C3C8DA;
	border-radius: var(--r, 6px);
	background: var(--c-surface, #FFFFFF);
}

.chqacc__label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--fs-11, 0.6875rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-gray-700, #40444C);
}

.chqacc__form input[type="file"] {
	inline-size: 100%;
	font-size: var(--fs-11, 0.6875rem);
	color: var(--c-gray-600, #5B616E);
}

.chqacc__hint {
	margin: 8px 0 12px;
	font-size: var(--fs-10, 0.625rem);
	color: var(--c-text-dim, #8E95A2);
	line-height: 1.8;
}

.chqacc__submit {
	min-block-size: 40px;
	padding: 0 20px;
	border: 0;
	border-radius: 8px;
	background: var(--c-indigo, #6366F1);
	color: #fff;
	font: inherit;
	font-size: var(--fs-12, 0.75rem);
	font-weight: var(--fw-medium, 500);
	cursor: pointer;
}

.chqacc__submit:hover {
	background: var(--c-indigo-600, #4649E5);
}

/* --------------------------------------------- order details / thank-you */

.chq-order__title {
	margin: 20px 0 8px;
	font-size: var(--fs-14, 0.875rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-gray-700, #40444C);
}

.chq-order__table {
	inline-size: 100%;
	border-collapse: collapse;
	background: var(--c-surface, #FFFFFF);
	border: 1px solid var(--c-line, #D8DBDF);
	border-radius: var(--r, 6px);
	overflow: hidden;
}

.chq-order__table th,
.chq-order__table td {
	padding: 9px 12px;
	font-size: var(--fs-11, 0.6875rem);
	font-weight: var(--fw-medium, 500);
	text-align: start;
	border-bottom: 1px solid var(--c-line, #D8DBDF);
}

.chq-order__table tr:last-child th,
.chq-order__table tr:last-child td {
	border-bottom: 0;
}

.chq-order__line {
	margin: 8px 0 0;
	font-size: var(--fs-11, 0.6875rem);
	color: var(--c-text-muted, #757575);
}

/* ------------------------------------------------- single product: hint */

.cheque-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0;
	padding: 8px 10px;
	border-radius: var(--r, 6px);
	background: var(--c-indigo-50, #EEEEFF);
}

.cheque-hint__badge {
	flex: 0 0 auto;
	padding: 3px 8px;
	border-radius: var(--r-pill, 100px);
	background: var(--c-indigo, #6366F1);
	color: #fff;
	font-size: var(--fs-10, 0.625rem);
	font-weight: var(--fw-medium, 500);
	white-space: nowrap;
}

.cheque-hint__text {
	font-size: var(--fs-11, 0.6875rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-indigo-600, #4649E5);
	line-height: 1.7;
}

/* --------------------------------------------------------------- desktop */

@media (min-width: 1024px) {
	.chq__switch { padding: 16px; }
	.chq__body { padding: 0 16px 16px; }
	.chq__switchtitle { font-size: var(--fs-14, 0.875rem); }
	.chq__switchsub { font-size: var(--fs-11, 0.6875rem); }
	.chq__table th,
	.chq__table td { font-size: var(--fs-12, 0.75rem); }

	/* Two cheque cards per row once there is space for them. */
	.chqacc__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------- per-cheque upload rows */

.chq__uploads {
	margin-top: 12px;
}

.chq__uploadshead {
	margin: 0 0 8px;
	font-size: var(--fs-11, 0.6875rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-gray-700, #40444C);
}

/* Rows for cheques beyond the selected count stay in the DOM (a file input
   cannot be re-created without losing its file) and are hidden instead. */
.chq__upload[hidden] {
	display: none;
}

.chq__upload label {
	font-size: var(--fs-10, 0.625rem);
	color: var(--c-text-muted, #757575);
}

.chq__upload input[type="file"] {
	inline-size: 100%;
	padding: 8px;
	border: 1.5px dashed #C3C8DA;
	border-radius: var(--r, 6px);
	background: var(--c-surface, #FFFFFF);
	font-size: var(--fs-10, 0.625rem);
	color: var(--c-gray-600, #5B616E);
}

/* --------------------------------- my account: per-cheque uploads */

.chqacc__upload {
	margin: 0 0 10px;
}

.chqacc__upload label {
	display: block;
	margin-bottom: 4px;
	font-size: var(--fs-10, 0.625rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-gray-700, #40444C);
}

.chqacc__redo {
	margin-inline-start: 6px;
	padding: 1px 6px;
	border-radius: var(--r-pill, 100px);
	background: var(--c-red, #EB3F3F);
	color: #fff;
	font-size: var(--fs-10, 0.625rem);
}

.chqacc__upload input[type="file"] {
	inline-size: 100%;
	font-size: var(--fs-10, 0.625rem);
	color: var(--c-gray-600, #5B616E);
}

/* ------------------------------------- messenger connect panel */

.chqmsg {
	margin-top: 20px;
	padding: 12px;
	border: 1.5px solid var(--c-line, #D8DBDF);
	border-radius: var(--r, 6px);
	background: var(--c-surface, #FFFFFF);
}

.chqmsg__title {
	margin: 0 0 6px;
	font-size: var(--fs-13, 0.8125rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-gray-700, #40444C);
}

.chqmsg__intro,
.chqmsg__note {
	margin: 0 0 10px;
	font-size: var(--fs-10, 0.625rem);
	line-height: 1.9;
	color: var(--c-text-muted, #757575);
}

.chqmsg__list {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.chqmsg__item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 10px;
	border: 1.5px solid #E2E6EE;
	border-radius: var(--r, 6px);
}

.chqmsg__item.is-linked {
	border-color: var(--c-teal, #14B8A6);
}

.chqmsg__pick {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-12, 0.75rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-ink, #25272C);
	cursor: pointer;
}

.chqmsg__pick input {
	accent-color: var(--c-indigo, #6366F1);
}

.chqmsg__state {
	font-size: var(--fs-10, 0.625rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-teal, #14B8A6);
}

.chqmsg__cut {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: auto;
	font-size: var(--fs-10, 0.625rem);
	color: var(--c-text-dim, #8E95A2);
	cursor: pointer;
}

.chqmsg__connect {
	margin-inline-start: auto;
	padding: 5px 12px;
	border-radius: var(--r, 6px);
	background: var(--c-indigo, #6366F1);
	color: #fff;
	font-size: var(--fs-10, 0.625rem);
	font-weight: var(--fw-medium, 500);
	text-decoration: none;
}

.chqmsg__save {
	min-block-size: 36px;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background: var(--c-gray-700, #40444C);
	color: #fff;
	font: inherit;
	font-size: var(--fs-11, 0.6875rem);
	cursor: pointer;
}

/* ------------------------------------------- recap: the three numbers
   that actually drive the decision
   ------------------------------------------------------------------ */

/* Deliberately louder than the schedule table above it. The table answers
   "which cheque, when, how much"; this answers "what leaves my account today,
   what do I still owe, when am I free of it" — and those were previously one
   grey 10px line that customers stopped reading before. */
.chq__recap {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	background: var(--c-surface, #FFFFFF);
	border: 1.5px solid var(--c-indigo, #6366F1);
	border-radius: var(--r, 6px);
	overflow: hidden;
}

.chq__recap-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--c-line, #D8DBDF);
}

.chq__recap-row:last-child {
	border-bottom: 0;
}

.chq__recap-k {
	font-size: var(--fs-12, 0.75rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-gray-700, #40444C);
}

.chq__recap-v {
	font-size: var(--fs-14, 0.875rem);
	font-weight: var(--fw-bold, 700);
	color: var(--c-ink, #25272C);
	white-space: nowrap;
}

/* The amount being charged right now is the single most important number on
   the panel, so it gets the filled row. */
.chq__recap-row--now {
	background: var(--c-indigo, #6366F1);
	border-bottom-color: var(--c-indigo-600, #4649E5);
}

.chq__recap-row--now .chq__recap-k,
.chq__recap-row--now .chq__recap-v {
	color: #fff;
}

.chq__recap-row--now .chq__recap-v {
	font-size: var(--fs-16, 1rem);
}

.chq__recap-row--total {
	background: #F6F7FB;
}

.chq__recap-row--total .chq__recap-k {
	font-size: var(--fs-11, 0.6875rem);
	color: var(--c-text-muted, #757575);
	font-weight: var(--fw-medium, 500);
}

/* The grand total is a reference line, not the decision — quieter than the
   deposit and the balance, but still readable. At fs-11/500 it disappeared
   next to them, which is the opposite of the point. */
.chq__recap-row--total .chq__recap-v {
	font-size: var(--fs-12, 0.75rem);
	color: var(--c-gray-700, #40444C);
	font-weight: var(--fw-semibold, 600);
}

/* The note and the terms were both 10px muted text — technically present,
   practically invisible. */
.chq__note {
	font-size: var(--fs-11, 0.6875rem);
	color: var(--c-gray-700, #40444C);
}

.chq__note strong {
	color: var(--c-red, #EB3F3F);
}

.chq__termsbox {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: var(--r, 6px);
	background: #FFF6E5;
	border: 1px solid #F0DDB0;
}

.chq__termshead {
	margin: 0 0 6px;
	font-size: var(--fs-12, 0.75rem);
	font-weight: var(--fw-bold, 700);
	color: #8A6100;
}

.chq__termsbox .chq__terms {
	margin: 0;
	font-size: var(--fs-11, 0.6875rem);
	line-height: 2;
	color: #6B4E00;
}

.chq__termsbox .chq__terms li {
	margin-bottom: 2px;
}

/* The «call us» message for an over-cap basket is an instruction, not a
   footnote — it has to survive a glance. */
.chq__blocked {
	font-size: var(--fs-12, 0.75rem);
	font-weight: var(--fw-medium, 500);
	border: 1px solid #F0DDB0;
}

/* Shown instead of the upload rows when «نمایش فیلدهای آپلود چک» is off. The
   obligation still exists, so it is styled like the note, not like a hint. */
.chq__uploadlater {
	margin: 8px 0 0;
	padding: 8px 10px;
	border-radius: var(--r, 6px);
	background: #F6F7FB;
	border: 1px dashed var(--c-line, #D8DBDF);
	font-size: var(--fs-11, 0.6875rem);
	line-height: 1.7;
	color: var(--c-gray-700, #40444C);
}

.chq__uploadlater strong {
	color: var(--c-ink, #25272C);
}

/* The amount spelled out, printed under each cheque row when
   «نمایش مبلغ به حروف» is on. It is reference text the customer copies by
   hand, so it gets its own full-width row and normal word wrapping — never
   the nowrap the figures use. */
.chq__wordsrow td {
	padding: 0 8px 7px;
	border-top: 0;
}

.chq__words {
	font-size: var(--fs-11, 0.6875rem);
	line-height: 1.8;
	color: var(--c-gray-700, #40444C);
	text-align: right;
	white-space: normal;
	word-spacing: 0.05em;
}

/* Without this the row the words belong to loses its separator, and the
   figures and the words of two different cheques run together. */
.chq__table.has-words tbody tr:not(.chq__wordsrow) > * {
	border-bottom: 0;
}

.chq__table.has-words .chq__wordsrow td {
	border-bottom: 1px solid var(--c-line, #D8DBDF);
}

.chq__table.has-words tbody tr.chq__wordsrow:last-child td {
	border-bottom: 0;
}

/* «چک‌های من» — the screen where the cheque is actually written out. */
.mychq__words {
	margin: 2px 0 0;
	font-size: var(--fs-11, 0.6875rem);
	line-height: 1.8;
	color: var(--c-gray-700, #40444C);
}

/* The «به ریال:» tag on the spelled-out line. The figures beside it are in
   tomans, so this unit marker has to read as a label, not as part of the
   amount. */
.chq__words-k,
.mychq__words-k {
	font-weight: var(--fw-bold, 700);
	color: var(--c-ink, #25272C);
}

/* ------------------------------------------- correcting a wrong upload
   ------------------------------------------------------------------ */

/* «مشاهده» and «حذف» sit on one line. The delete form is inline-block so it
   does not break the row, and carries no margin of its own. */
.chqacc__fileactions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.chqacc__fileactions .chqacc__view {
	margin-top: 0;
}

.chqacc__delform {
	margin: 0;
}

/* Styled as a quiet link, not a button: deleting your own mistake should not
   look more inviting than viewing the image you just sent. */
.chqacc__del {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--fs-10, 0.625rem);
	font-weight: var(--fw-medium, 500);
	color: var(--c-red, #EB3F3F);
	text-decoration: underline;
	cursor: pointer;
}

.chqacc__del:hover,
.chqacc__del:focus-visible {
	text-decoration: none;
}

/* The «replace» tag reuses .chqacc__redo's shape but must not read as the red
   «rejected» badge — this one is informational. */
.chqacc__redo--swap {
	background: var(--c-gray-700, #40444C);
	font-weight: var(--fw-medium, 500);
}