/* ==========================================================================
   BluVibe Account — استایل پنل کاربری (فرانت)
   پالت برند: #56c4ef — همان افزونه تحویل، تا دو پنل کنار هم غریبه نباشند

   همه‌چیز زیر .bva-wrap محدود است تا با استایل قالب سایت قاطی نشود.
   ========================================================================== */

.bva-wrap {
	--bva-brand: #56c4ef;
	--bva-brand-hover: #35b5e6;
	--bva-brand-ink: #0b6f95;
	--bva-brand-soft: #eaf7fd;
	--bva-brand-line: #bde5f7;
	--bva-btn-ink: #05374a;
	--bva-ink: #101828;
	--bva-muted: #667085;
	--bva-line: #e7ecf1;
	--bva-surface: #fff;
	--bva-surface-2: #f7f9fb;
	--bva-warn: #b54708;
	--bva-warn-soft: #fffaeb;
	--bva-warn-line: #fedf89;
	--bva-ok: #067647;
	--bva-ok-soft: #ecfdf3;
	--bva-err: #b42318;
	--bva-err-soft: #fef3f2;
	--bva-err-line: #fecdca;
	--bva-radius: 14px;

	margin: 0 0 24px;
	color: var(--bva-ink);
	font-family: inherit;
	line-height: 1.8;
}

/* --------------------------------------------------------------------------
   عددی که کاربر باید بخواند یا تایپ کند
   فونت فارسی قالب، رقم لاتین را با گلیف فارسی رندر می‌کند و کاربر همان
   چیزی که می‌بیند را تایپ می‌کند — که غلط است. اینجا فونت لاتین می‌گذاریم
   و جایگزینی رقم را خاموش می‌کنیم.
   -------------------------------------------------------------------------- */
.bva-wrap .bva-num {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0;
	unicode-bidi: isolate;
}

/* ---------------- سربرگ‌ها ---------------- */

.bva-wrap .bva-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--bva-ink);
}

.bva-wrap .bva-head::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 18px;
	border-radius: 99px;
	background: var(--bva-brand);
}

.bva-wrap .bva-head-past {
	margin-top: 28px;
}

.bva-wrap .bva-head-past::before {
	background: var(--bva-line);
}

.bva-wrap .bva-of {
	padding: 2px 9px;
	background: var(--bva-surface-2);
	border: 1px solid var(--bva-line);
	border-radius: 99px;
	font-size: 12px;
	font-weight: 600;
	color: var(--bva-muted);
}

/* ---------------- نوار بالای صفحه ---------------- */

.bva-wrap .bva-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 18px;
}

/* ---------------- کارت ---------------- */

.bva-wrap .bva-card {
	position: relative;
	overflow: hidden;
	display: block;
	margin: 0 0 12px;
	padding: 16px 18px;
	background: var(--bva-surface);
	border: 1px solid var(--bva-line);
	border-radius: var(--bva-radius);
	text-decoration: none;
	color: inherit;
}

.bva-wrap .bva-card.is-open {
	border-color: var(--bva-brand-line);
	background: linear-gradient(180deg, var(--bva-brand-soft) 0%, var(--bva-surface) 56px);
}

.bva-wrap a.bva-tcard:hover {
	border-color: var(--bva-brand);
}

.bva-wrap .bva-card-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 8px;
}

.bva-wrap .bva-onum {
	font-weight: 700;
	font-size: 15px;
	color: var(--bva-ink);
	text-decoration: none;
}

.bva-wrap a.bva-onum:hover {
	color: var(--bva-brand-ink);
}

/* ---------------- نشان وضعیت ---------------- */

.bva-wrap .bva-badge {
	flex: 0 0 auto;
	padding: 3px 11px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 700;
	background: var(--bva-surface-2);
	border: 1px solid var(--bva-line);
	color: var(--bva-muted);
	white-space: nowrap;
}

/* وضعیت‌هایی که کار مشتری مانده — چشم باید برود سراغشان */
.bva-wrap .bva-st-awaiting-info,
.bva-wrap .bva-st-pending,
.bva-wrap .bva-ts-answered {
	background: var(--bva-warn-soft);
	border-color: var(--bva-warn-line);
	color: var(--bva-warn);
}

/* وضعیت‌های در جریان */
.bva-wrap .bva-st-awaiting-stock,
.bva-wrap .bva-st-in-progress,
.bva-wrap .bva-st-processing,
.bva-wrap .bva-st-on-hold,
.bva-wrap .bva-ts-open {
	background: var(--bva-brand-soft);
	border-color: var(--bva-brand-line);
	color: var(--bva-brand-ink);
}

/* تمام‌شده */
.bva-wrap .bva-st-completed,
.bva-wrap .bva-ts-closed {
	background: var(--bva-ok-soft);
	border-color: #abefc6;
	color: var(--bva-ok);
}

.bva-wrap .bva-st-cancelled,
.bva-wrap .bva-st-failed,
.bva-wrap .bva-st-refunded {
	background: var(--bva-err-soft);
	border-color: var(--bva-err-line);
	color: var(--bva-err);
}

/* ---------------- متادیتا ---------------- */

.bva-wrap .bva-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--bva-muted);
}

.bva-wrap .bva-mi {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.bva-wrap a.bva-mi-link {
	color: var(--bva-brand-ink);
	text-decoration: none;
}

.bva-wrap a.bva-mi-link:hover {
	text-decoration: underline;
}

/* ---------------- اقلام ---------------- */

.bva-wrap .bva-items {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	border-top: 1px dashed var(--bva-line);
	padding-top: 10px;
}

.bva-wrap .bva-items li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 7px;
	padding: 0;
	font-size: 14px;
}

.bva-wrap .bva-items li:last-child {
	margin-bottom: 0;
}

.bva-wrap .bva-pname {
	font-weight: 600;
}

/* نام متغیر یک سطر تورفته‌تر — چون بخشی از همان قلم است، نه قلم جدا */
.bva-wrap .bva-vname {
	width: 100%;
	padding-right: 14px;
	font-size: 13px;
	color: var(--bva-muted);
}

.bva-wrap .bva-qty {
	padding: 1px 8px;
	background: var(--bva-surface-2);
	border-radius: 99px;
	font-size: 12px;
	color: var(--bva-muted);
}

/* ---------------- چه کاری مانده ---------------- */

.bva-wrap .bva-todo {
	margin: 0 0 12px;
	padding: 11px 14px;
	border-radius: 10px;
	font-size: 13.5px;
	background: var(--bva-surface-2);
	border: 1px solid var(--bva-line);
	color: var(--bva-muted);
}

/* کاری که با مشتری است — پررنگ‌تر از «منتظر بمان» */
.bva-wrap .bva-todo-act {
	background: var(--bva-warn-soft);
	border-color: var(--bva-warn-line);
	color: var(--bva-warn);
	font-weight: 600;
}

.bva-wrap .bva-todo a {
	color: inherit;
	font-weight: 700;
}

/* ---------------- دکمه‌ها ---------------- */

.bva-wrap .bva-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bva-wrap .bva-btn {
	display: inline-block;
	padding: 9px 18px;
	background: var(--bva-brand);
	color: var(--bva-btn-ink);
	border: 1px solid var(--bva-brand);
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.6;
}

.bva-wrap .bva-btn:hover {
	background: var(--bva-brand-hover);
	border-color: var(--bva-brand-hover);
	color: var(--bva-btn-ink);
}

.bva-wrap .bva-btn-soft {
	background: var(--bva-brand-soft);
	border-color: var(--bva-brand-line);
	color: var(--bva-brand-ink);
}

.bva-wrap .bva-btn-soft:hover {
	background: var(--bva-brand-line);
	border-color: var(--bva-brand-line);
	color: var(--bva-brand-ink);
}

.bva-wrap .bva-btn-ghost {
	background: transparent;
	border-color: var(--bva-line);
	color: var(--bva-muted);
}

.bva-wrap .bva-btn-ghost:hover {
	background: var(--bva-surface-2);
	border-color: var(--bva-muted);
	color: var(--bva-ink);
}

/* ---------------- پیام‌ها ---------------- */

.bva-wrap .bva-flash {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
}

.bva-wrap .bva-flash-ok {
	background: var(--bva-ok-soft);
	border: 1px solid #abefc6;
	color: var(--bva-ok);
}

.bva-wrap .bva-flash-error {
	background: var(--bva-err-soft);
	border: 1px solid var(--bva-err-line);
	color: var(--bva-err);
}

.bva-wrap .bva-note {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--bva-brand-soft);
	border: 1px solid var(--bva-brand-line);
	border-radius: 10px;
	font-size: 13.5px;
	color: var(--bva-brand-ink);
}

.bva-wrap .bva-empty,
.bva-wrap .bva-none {
	margin: 0;
	padding: 26px 20px;
	background: var(--bva-surface-2);
	border: 1px dashed var(--bva-line);
	border-radius: var(--bva-radius);
	text-align: center;
	color: var(--bva-muted);
}

.bva-wrap .bva-empty p {
	margin: 0 0 12px;
}

.bva-wrap .bva-empty p:last-child {
	margin: 0;
}

/* ---------------- صفحه‌بندی ---------------- */

.bva-wrap .bva-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 18px 0 0;
}

.bva-wrap .bva-pinfo {
	font-size: 13px;
	color: var(--bva-muted);
}

/* ---------------- کاشی‌های صفحه اصلی حساب ---------------- */

.bva-wrap.bva-dash {
	margin-bottom: 22px;
}

.bva-wrap .bva-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}

.bva-wrap .bva-tile {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px;
	background: var(--bva-surface-2);
	border: 1px solid var(--bva-line);
	border-radius: var(--bva-radius);
	text-decoration: none;
	color: var(--bva-muted);
}

.bva-wrap .bva-tile:hover {
	border-color: var(--bva-brand);
}

.bva-wrap .bva-tile.is-hot {
	background: var(--bva-brand-soft);
	border-color: var(--bva-brand-line);
	color: var(--bva-brand-ink);
}

.bva-wrap .bva-tile-n {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--bva-ink);
}

.bva-wrap .bva-tile.is-hot .bva-tile-n {
	color: var(--bva-brand-ink);
}

.bva-wrap .bva-tile-t {
	font-size: 13px;
	font-weight: 600;
}

/* ---------------- تیکت: سربرگ و گفت‌وگو ---------------- */

.bva-wrap .bva-thead {
	margin: 0 0 16px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--bva-line);
}

.bva-wrap .bva-thead .bva-head {
	margin-bottom: 8px;
}

.bva-wrap .bva-thread {
	margin: 0 0 22px;
}

.bva-wrap .bva-msg {
	margin: 0 0 12px;
	padding: 14px 16px;
	border-radius: var(--bva-radius);
	border: 1px solid var(--bva-line);
	background: var(--bva-surface);
}

/* پیام ما زمینه برند دارد تا از پیام مشتری جدا دیده شود */
.bva-wrap .bva-msg-them {
	background: var(--bva-brand-soft);
	border-color: var(--bva-brand-line);
}

.bva-wrap .bva-msg-me {
	background: var(--bva-surface-2);
}

.bva-wrap .bva-msg-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 13px;
}

.bva-wrap .bva-msg-time {
	color: var(--bva-muted);
	font-size: 12px;
}

.bva-wrap .bva-msg-body {
	font-size: 14px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.bva-wrap .bva-file {
	display: inline-block;
	margin: 10px 0 0;
	padding: 6px 12px;
	background: var(--bva-surface);
	border: 1px solid var(--bva-line);
	border-radius: 8px;
	font-size: 13px;
	color: var(--bva-brand-ink);
	text-decoration: none;
}

.bva-wrap .bva-file:hover {
	border-color: var(--bva-brand);
}

/* ---------------- فرم ---------------- */

.bva-wrap .bva-form {
	margin: 0;
	padding: 18px;
	background: var(--bva-surface-2);
	border: 1px solid var(--bva-line);
	border-radius: var(--bva-radius);
}

.bva-wrap .bva-field {
	margin: 0 0 16px;
}

.bva-wrap .bva-field label {
	display: block;
	margin: 0 0 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bva-ink);
}

.bva-wrap .bva-opt {
	font-weight: 400;
	color: var(--bva-muted);
}

.bva-wrap .bva-field input[type="text"],
.bva-wrap .bva-field select,
.bva-wrap .bva-field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	background: var(--bva-surface);
	border: 1px solid var(--bva-line);
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
	color: var(--bva-ink);
	line-height: 1.8;
}

.bva-wrap .bva-field input[type="text"]:focus,
.bva-wrap .bva-field select:focus,
.bva-wrap .bva-field textarea:focus {
	outline: 0;
	border-color: var(--bva-brand);
	box-shadow: 0 0 0 3px var(--bva-brand-soft);
}

/* کادرهایی که متن فارسی می‌گیرند */
.bva-wrap .bva-field .bva-rtl {
	direction: rtl;
	text-align: right;
}

.bva-wrap .bva-field input[type="file"] {
	display: block;
	width: 100%;
	font-size: 13px;
	color: var(--bva-muted);
}

.bva-wrap .bva-hint {
	display: block;
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--bva-muted);
	/* نمونه و عدد داخل راهنما باید لاتین دیده شود */
	font-variant-numeric: lining-nums;
	font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0;
}

.bva-wrap .bva-submit {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

/* ---------------- موبایل ---------------- */

@media (max-width: 600px) {

	.bva-wrap .bva-card {
		padding: 14px;
	}

	.bva-wrap .bva-card-top {
		align-items: flex-start;
	}

	.bva-wrap .bva-actions .bva-btn,
	.bva-wrap .bva-submit .bva-btn {
		flex: 1 1 auto;
		text-align: center;
	}

	.bva-wrap .bva-tile-n {
		font-size: 22px;
	}
}