/* ==========================================================================
   BluVibe Account — ظاهر صفحه‌های حساب کاربری

   این فایل تنها جایی است که افزونه روی **قلمروی قالب سایت** دست می‌گذارد.
   پس دو قانون سخت‌گیرانه دارد:

   ۱. هر قاعده زیر `body.bva-skin` است. آن کلاس فقط روی صفحه‌های حساب
      کاربری و فقط وقتی «ظاهر تازه» روشن باشد چاپ می‌شود — یعنی با یک
      کلید، کل این فایل بی‌اثر می‌شود و سایت به ظاهر قالب برمی‌گردد.

   ۲. `!important` فقط جایی که قالب قطعاً می‌جنگد (چیدمان و زمینه).
      هرجای دیگر با specificity معمولی، تا قالب بتواند جزئیاتش را نگه دارد.
   ========================================================================== */

body.bva-skin {
	--bvk-brand: #56c4ef;
	--bvk-brand-ink: #0b6f95;
	--bvk-brand-soft: #eaf7fd;
	--bvk-brand-line: #bde5f7;
	--bvk-btn-ink: #05374a;
	--bvk-ink: #101828;
	--bvk-muted: #667085;
	--bvk-line: #e7ecf1;
	--bvk-field: #fcfdfe;
	--bvk-radius: 16px;
}

/* --------------------------------------------------------------------------
   ۱. زمینه — سفید با هاله‌های آبی
   -------------------------------------------------------------------------- */

body.bva-skin {
	background-color: #fff;
	background-image:
		radial-gradient(58rem 34rem at 88% -6%, rgba(86, 196, 239, .20), rgba(86, 196, 239, 0) 62%),
		radial-gradient(44rem 30rem at 6% 14%, rgba(86, 196, 239, .13), rgba(86, 196, 239, 0) 58%),
		radial-gradient(36rem 26rem at 50% 106%, rgba(86, 196, 239, .10), rgba(86, 196, 239, 0) 60%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* قالب معمولاً زمینه خاکستری را روی یک بسته‌بندی داخلی می‌گذارد، نه روی
   body. این‌ها را شفاف می‌کنیم تا هاله‌ها دیده شوند. فقط در صفحه‌های
   حساب کاربری، پس جای دیگری از سایت اثر ندارد. */
body.bva-skin #content,
body.bva-skin #main,
body.bva-skin #primary,
body.bva-skin .site,
body.bva-skin .site-content,
body.bva-skin .site-main,
body.bva-skin .content-area,
body.bva-skin .page-content,
body.bva-skin .entry-content,
body.bva-skin .woocommerce-account,
body.bva-skin .woocommerce-account .woocommerce {
	background-color: transparent !important;
	background-image: none !important;
}

/* --------------------------------------------------------------------------
   ۲. منوی کناری قالب می‌رود، نوار تب خودمان جایش می‌نشیند
   -------------------------------------------------------------------------- */

body.bva-skin .woocommerce-MyAccount-navigation {
	display: none !important;
}

/* محتوا تمام‌عرض می‌شود — قالب معمولاً با float یا width آن را باریک
   کرده تا کنار منو جا شود */
body.bva-skin .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
	max-width: 920px;
	margin: 0 auto !important;
	padding: 0 !important;

	background: #fff;
	border: 1px solid rgba(86, 196, 239, .26);
	border-radius: var(--bvk-radius);
	box-shadow:
		0 1px 2px rgba(16, 24, 40, .04),
		0 18px 40px -24px rgba(11, 111, 149, .30);
	overflow: hidden;
	color: var(--bvk-ink);
}

/* فاصله داخلی روی بچه‌ها می‌نشیند نه روی خود کارت، تا نوار تب بتواند
   تا لبه بکشد */
body.bva-skin .woocommerce-MyAccount-content > *:not(.bva-tabs) {
	margin-inline: clamp(16px, 4vw, 30px);
}

body.bva-skin .woocommerce-MyAccount-content > *:not(.bva-tabs):last-child {
	margin-bottom: clamp(20px, 4vw, 30px);
}

/* ---------------- نوار تب ---------------- */

/**
 * نوار تب **می‌شکند، اسکرول نمی‌شود.**
 *
 * اول با `overflow-x: auto` نوشته شد و روی موبایل تب فعال بیرون از
 * کادر می‌افتاد و اصلاً دیده نمی‌شد — بدون جاوااسکریپت هم راهی برای
 * کشاندنش به دید نیست. با شکستن، هر تب همیشه دیده می‌شود؛ روی
 * دسکتاپ هم که همه در یک سطر جا می‌شوند و فرقی نمی‌کند.
 */
body.bva-skin .bva-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 clamp(18px, 3vw, 26px);
	padding: 10px clamp(10px, 2.5vw, 16px);

	background: linear-gradient(180deg, rgba(234, 247, 253, .9), rgba(255, 255, 255, 0));
	border-bottom: 1px solid var(--bvk-line);
}

body.bva-skin .bva-tabs .bva-tab {
	flex: 0 0 auto;
	padding: 9px 16px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--bvk-muted);
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

body.bva-skin .bva-tabs .bva-tab:hover {
	background: var(--bvk-brand-soft);
	color: var(--bvk-brand-ink);
}

body.bva-skin .bva-tabs .bva-tab:focus-visible {
	outline: 0;
	border-color: var(--bvk-brand);
	box-shadow: 0 0 0 3px var(--bvk-brand-soft);
}

body.bva-skin .bva-tabs .bva-tab.is-on {
	background: var(--bvk-brand);
	border-color: var(--bvk-brand);
	color: var(--bvk-btn-ink);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   ۳. تیتر و متن داخل محتوا
   -------------------------------------------------------------------------- */

body.bva-skin .woocommerce-MyAccount-content h2,
body.bva-skin .woocommerce-MyAccount-content h3,
body.bva-skin .woocommerce-MyAccount-content legend {
	font-size: 16px;
	font-weight: 700;
	color: var(--bvk-ink);
}

body.bva-skin .woocommerce-MyAccount-content p {
	font-size: 14px;
	line-height: 1.95;
	color: var(--bvk-muted);
}

body.bva-skin .woocommerce-MyAccount-content p strong {
	color: var(--bvk-ink);
}

body.bva-skin .woocommerce-MyAccount-content a:not(.bva-tab):not(.bva-btn):not(.button) {
	color: var(--bvk-brand-ink);
}

/* --------------------------------------------------------------------------
   ۴. فرم‌ها — اطلاعات حساب، آدرس، و هر فرم دیگر ووکامرس
   -------------------------------------------------------------------------- */

body.bva-skin .woocommerce-MyAccount-content form {
	margin: 0;
}

body.bva-skin .woocommerce-MyAccount-content fieldset {
	margin: 26px 0 0;
	padding: 18px 20px 4px;
	background: #fbfdfe;
	border: 1px solid var(--bvk-line);
	border-radius: 12px;
}

body.bva-skin .woocommerce-MyAccount-content legend {
	padding: 0 8px;
	font-size: 14px;
}

/* ردیف‌ها با grid، نه float — قالب معمولاً float می‌گذارد و روی موبایل
   به هم می‌ریزد */
body.bva-skin .woocommerce-MyAccount-content .form-row,
body.bva-skin .woocommerce-MyAccount-content .woocommerce-form-row {
	float: none !important;
	width: auto !important;
	margin: 0 0 16px;
	padding: 0;
	display: block;
}

body.bva-skin .woocommerce-MyAccount-content .form-row label,
body.bva-skin .woocommerce-MyAccount-content .woocommerce-form-row label {
	display: block;
	margin: 0 0 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bvk-ink);
}

body.bva-skin .woocommerce-MyAccount-content .required {
	color: #d92d20;
	text-decoration: none;
	border: 0;
}

body.bva-skin .woocommerce-MyAccount-content input[type="text"],
body.bva-skin .woocommerce-MyAccount-content input[type="email"],
body.bva-skin .woocommerce-MyAccount-content input[type="tel"],
body.bva-skin .woocommerce-MyAccount-content input[type="url"],
body.bva-skin .woocommerce-MyAccount-content input[type="number"],
body.bva-skin .woocommerce-MyAccount-content input[type="password"],
body.bva-skin .woocommerce-MyAccount-content select,
body.bva-skin .woocommerce-MyAccount-content textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	padding: 11px 14px;
	background: var(--bvk-field);
	border: 1px solid var(--bvk-line);
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.8;
	color: var(--bvk-ink);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

body.bva-skin .woocommerce-MyAccount-content input:focus,
body.bva-skin .woocommerce-MyAccount-content select:focus,
body.bva-skin .woocommerce-MyAccount-content textarea:focus {
	outline: 0;
	background: #fff;
	border-color: var(--bvk-brand);
	box-shadow: 0 0 0 3px var(--bvk-brand-soft);
}

/* --------------------------------------------------------------------------
   دو ستون روی دسکتاپ برای «نام» و «نام خانوادگی»

   با `inline-block` و `width: 50%` کار نمی‌کند: فاصله‌ی متنیِ بین دو تگ
   در HTML خودش چند پیکسل عرض می‌گیرد و ردیف دوم می‌افتد پایین.

   گرید این مشکل را ندارد و در RTL هم درست می‌چیند — ستون اول همان
   سمت راست است، پس «نام» جای خودش می‌نشیند.
   -------------------------------------------------------------------------- */

@media (min-width: 720px) {

	body.bva-skin .woocommerce-MyAccount-content .woocommerce-EditAccountForm,
	body.bva-skin .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 16px;
		align-items: start;
	}

	/* پیش‌فرض: هر چیزی تمام‌عرض */
	body.bva-skin .woocommerce-MyAccount-content .woocommerce-EditAccountForm > *,
	body.bva-skin .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	body.bva-skin .woocommerce-MyAccount-content .form-row-first {
		grid-column: 1 / 2;
	}

	body.bva-skin .woocommerce-MyAccount-content .form-row-last {
		grid-column: 2 / 3;
	}

	/* `<div class="clear">` ووکامرس برای چیدمان float بود؛ در گرید فقط
	   یک ردیف خالی می‌سازد */
	body.bva-skin .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .clear,
	body.bva-skin .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .clear {
		display: none;
	}
}

body.bva-skin .woocommerce-MyAccount-content .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}

body.bva-skin .woocommerce-MyAccount-content span.description,
body.bva-skin .woocommerce-MyAccount-content em {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-style: normal;
	color: var(--bvk-muted);
}

/* ---------------- دکمه نمایش رمز ---------------- */

/* قالب این را شکسته بود و به شکل یک مستطیل آبی توپر زیر هر کادر رمز
   می‌آمد. به جای پنهان‌کردن، سر جای درستش برمی‌گردد — با آیکن چشم به
   شکل data URI، تا هیچ درخواست بیرونی لازم نباشد. */
body.bva-skin .woocommerce-password-input,
body.bva-skin .woocommerce-MyAccount-content .password-input {
	position: relative;
	display: block;
}

body.bva-skin .woocommerce-MyAccount-content .show-password-input {
	position: absolute;
	inset-inline-start: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent no-repeat center / 18px 18px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	opacity: .75;
}

body.bva-skin .woocommerce-MyAccount-content .show-password-input:hover {
	opacity: 1;
	background-color: var(--bvk-brand-soft);
}

body.bva-skin .woocommerce-MyAccount-content .show-password-input.display-password {
	opacity: 1;
	background-color: var(--bvk-brand-soft);
}

/* جا برای دکمه، تا روی متن رمز ننشیند */
body.bva-skin .woocommerce-password-input input[type="password"],
body.bva-skin .woocommerce-password-input input[type="text"] {
	padding-inline-start: 46px;
}

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

body.bva-skin .woocommerce-MyAccount-content .button,
body.bva-skin .woocommerce-MyAccount-content button[type="submit"],
body.bva-skin .woocommerce-MyAccount-content input[type="submit"] {
	display: inline-block;
	width: auto;
	height: auto;
	padding: 11px 24px;
	background: var(--bvk-brand);
	border: 1px solid var(--bvk-brand);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--bvk-btn-ink);
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
}

body.bva-skin .woocommerce-MyAccount-content .button:hover,
body.bva-skin .woocommerce-MyAccount-content button[type="submit"]:hover,
body.bva-skin .woocommerce-MyAccount-content input[type="submit"]:hover {
	background: #35b5e6;
	border-color: #35b5e6;
	color: var(--bvk-btn-ink);
}

body.bva-skin .woocommerce-MyAccount-content .button:focus-visible,
body.bva-skin .woocommerce-MyAccount-content button:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--bvk-brand-soft);
}

/* --------------------------------------------------------------------------
   ۶. نوتیس‌های ووکامرس
   -------------------------------------------------------------------------- */

body.bva-skin .woocommerce-MyAccount-content .woocommerce-message,
body.bva-skin .woocommerce-MyAccount-content .woocommerce-error,
body.bva-skin .woocommerce-MyAccount-content .woocommerce-info {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 10px;
	border: 1px solid;
	font-size: 13.5px;
	font-weight: 600;
	list-style: none;
	background-image: none;
}

body.bva-skin .woocommerce-MyAccount-content .woocommerce-message::before,
body.bva-skin .woocommerce-MyAccount-content .woocommerce-error::before,
body.bva-skin .woocommerce-MyAccount-content .woocommerce-info::before {
	display: none;
}

body.bva-skin .woocommerce-MyAccount-content .woocommerce-message {
	background: #ecfdf3;
	border-color: #abefc6;
	color: #067647;
}

body.bva-skin .woocommerce-MyAccount-content .woocommerce-error {
	background: #fef3f2;
	border-color: #fecdca;
	color: #b42318;
}

body.bva-skin .woocommerce-MyAccount-content .woocommerce-info {
	background: var(--bvk-brand-soft);
	border-color: var(--bvk-brand-line);
	color: var(--bvk-brand-ink);
}

/* --------------------------------------------------------------------------
   ۷. جدول‌ها و آدرس‌ها — برای وقتی تب سفارش‌ها روی حالت ووکامرس است
   -------------------------------------------------------------------------- */

body.bva-skin .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	margin: 0 0 18px;
	border: 1px solid var(--bvk-line);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 13.5px;
}

body.bva-skin .woocommerce-MyAccount-content table.shop_table th,
body.bva-skin .woocommerce-MyAccount-content table.shop_table td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--bvk-line);
	text-align: start;
}

body.bva-skin .woocommerce-MyAccount-content table.shop_table thead th {
	background: #f7fbfd;
	font-weight: 700;
	color: var(--bvk-ink);
}

body.bva-skin .woocommerce-MyAccount-content table.shop_table tr:last-child td {
	border-bottom: 0;
}

/* جدول پهن روی موبایل، داخل خودش اسکرول شود نه کل صفحه */
body.bva-skin .woocommerce-MyAccount-content .woocommerce-orders-table__wrapper,
body.bva-skin .woocommerce-MyAccount-content .woocommerce-table--order-details {
	overflow-x: auto;
}

body.bva-skin .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

body.bva-skin .woocommerce-Address {
	width: auto !important;
	float: none !important;
	padding: 16px 18px;
	background: #fbfdfe;
	border: 1px solid var(--bvk-line);
	border-radius: 12px;
}

/* --------------------------------------------------------------------------
   ۸. پنل‌های خودمان داخل این کارت
   -------------------------------------------------------------------------- */

/* کارت بیرونی خودش قاب دارد، پس فاصله بالای پنل ما اضافه است */
body.bva-skin .woocommerce-MyAccount-content .bva-wrap {
	margin-top: 0;
}

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

/* --------------------------------------------------------------------------
   تب‌ها روی صفحه باریک — گرید، نه فلکس

   با فلکس هر تب عرض طبیعی خودش را می‌گیرد، پس ردیف دوم ناقص و
   دندانه‌دار می‌افتد («سه تا بالا، دو تا پایین»). گرید با ستون‌های
   هم‌عرض این را حل می‌کند: همه تب‌ها یک اندازه‌اند، ستون‌ها زیر هم
   تراز می‌شوند، و ارتفاع ردیف با بلندترین برچسب یکسان می‌شود.

   `auto-fit` یعنی تعداد ستون از عرض صفحه می‌آید — روی گوشی دو ستون،
   روی تبلت سه یا چهار — پس با هر تعداد تبی که مالک روشن بگذارد
   مرتب می‌ماند.
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {

	body.bva-skin .bva-tabs {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
		gap: 6px;
		padding: 10px;
	}

	body.bva-skin .bva-tabs .bva-tab {
		padding: 10px 8px;
		font-size: 13px;
		line-height: 1.6;
		text-align: center;

		/* برچسب بلند بشکند، نه اینکه از خانه‌اش بزند بیرون */
		white-space: normal;
		min-width: 0;

		display: flex;
		align-items: center;
		justify-content: center;
	}
}

@media (max-width: 600px) {

	body.bva-skin .woocommerce-MyAccount-content {
		border-radius: 14px;
	}

	body.bva-skin .woocommerce-MyAccount-content .button,
	body.bva-skin .woocommerce-MyAccount-content button[type="submit"] {
		width: 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	body.bva-skin .bva-tabs .bva-tab {
		transition: none;
	}
}