/* =============================================================
   وکیلم شو — استایل پایه‌ی سراسری
   RTL، متغیرهای رنگی، تایپوگرافی، کامپوننت‌های مشترک
   ============================================================= */

/* ── فونت IRANSans FaNum (ارقام فارسی داخلی) ── */

/* UltraLight — 200 */
@font-face {
	font-family: 'IRANSans';
	src: url('../fonts/IRANSansWeb_UltraLight.woff2') format('woff2'),
	     url('../fonts/IRANSansWeb_UltraLight.woff')  format('woff'),
	     url('../fonts/IRANSansWeb_UltraLight.ttf')    format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

/* Light — 300 */
@font-face {
	font-family: 'IRANSans';
	src: url('../fonts/IRANSansWebFaNum_Light.woff2') format('woff2'),
	     url('../fonts/IRANSansWebFaNum_Light.woff')  format('woff'),
	     url('../fonts/IRANSansFaNum_Light.ttf')       format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* Regular — 400 */
@font-face {
	font-family: 'IRANSans';
	src: url('../fonts/IRANSansWebFaNum.woff2') format('woff2'),
	     url('../fonts/IRANSansWebFaNum.woff')  format('woff'),
	     url('../fonts/IRANSansFaNum.ttf')       format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Medium — 500 */
@font-face {
	font-family: 'IRANSans';
	src: url('../fonts/IRANSansWebFaNum_Medium.woff2') format('woff2'),
	     url('../fonts/IRANSansWebFaNum_Medium.woff')  format('woff'),
	     url('../fonts/IRANSansFaNum_Medium.ttf')       format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Bold — 700 */
@font-face {
	font-family: 'IRANSans';
	src: url('../fonts/IRANSansWebFaNum_Bold.woff2') format('woff2'),
	     url('../fonts/IRANSansWebFaNum_Bold.woff')  format('woff'),
	     url('../fonts/IRANSansFaNum_Bold.ttf')       format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Black — 900 */
@font-face {
	font-family: 'IRANSans';
	src: url('../fonts/IRANSansWebFaNum_Black.woff2') format('woff2'),
	     url('../fonts/IRANSansWebFaNum_Black.woff')  format('woff'),
	     url('../fonts/IRANSansFaNum_Black.ttf')       format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------
   ۱. متغیرهای CSS (توکن‌های طراحی)
------------------------------------------------------- */
:root {
	/* برند */
	--va-navy:        #0F1E3C;
	--va-gold:        #C8912E;
	/* کنش */
	--va-blue:        #1F5FE0;
	--va-green:       #22C55E;
	--va-red:         #EF4444;
	/* پس‌زمینه و سطح */
	--va-bg:          #F5F7FB;
	--va-card:        #FFFFFF;
	--va-amber-soft:  #FBF4E0;
	/* متن */
	--va-text:        #1F2937;
	--va-muted:       #6B7280;
	/* سایه */
	--va-shadow-sm:   0 1px 3px rgba(15,30,60,.08);
	--va-shadow-md:   0 4px 12px rgba(15,30,60,.12);
	/* گرد‌شدگی */
	--va-radius-sm:   6px;
	--va-radius-md:   10px;
	--va-radius-lg:   16px;
	/* تبدیل */
	--va-transition:  .2s ease;
}

/* -------------------------------------------------------
   ۲. ریست پایه و RTL
------------------------------------------------------- */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	direction: rtl;
	font-size: 16px;
}

body.va-page,
body.va-panel-page {
	direction:       rtl;
	text-align:      right;
	font-family:     'IRANSans', Tahoma, Arial, sans-serif;
	background:      var(--va-bg);
	color:           var(--va-text);
	line-height:     1.7;
	margin:          0;
	padding:         0;
}

/* اگر قالب body_class را قبل از filter ما اجرا کرد، با این selector فونت را اعمال می‌کنیم */
.va-header,
.va-panel,
.va-page-wrap,
.va-calc-page,
.va-auth-page,
.va-chatroom-wrap {
	font-family: 'IRANSans', Tahoma, Arial, sans-serif;
}

/* اعداد فارسی — IRANSans(FaNum) به‌صورت built-in ارقام فارسی دارد */
body.va-page,
body.va-page input,
body.va-page select,
body.va-page textarea {
	font-feature-settings: normal;
}

/* -------------------------------------------------------
   ۴. هدر سراسری
------------------------------------------------------- */
.va-header {
	background:  var(--va-navy);
	color:       #fff;
	padding:     0 24px;
	position:    sticky;
	top:         0;
	z-index:     1000;
	box-shadow:  var(--va-shadow-md);
}

.va-header__inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	max-width:       1200px;
	margin:          0 auto;
	height:          64px;
}

.va-header__logo {
	display:     flex;
	align-items: center;
	gap:         8px;
	text-decoration: none;
	font-size:   1.25rem;
	font-weight: 700;
	color:       #fff;
}

.va-header__logo-mark {
	color: var(--va-gold);
}

.va-header__nav {
	display:    flex;
	align-items: center;
	gap:         8px;
	list-style:  none;
	margin:      0;
	padding:     0;
}

.va-header__nav a {
	color:           rgba(255,255,255,.85);
	text-decoration: none;
	padding:         6px 12px;
	border-radius:   var(--va-radius-sm);
	transition:      background var(--va-transition), color var(--va-transition);
	font-size:       .9rem;
}

.va-header__nav a:hover {
	background: rgba(255,255,255,.1);
	color:      #fff;
}

.va-header__actions {
	display:    flex;
	align-items: center;
	gap:         12px;
}

/* همبرگر موبایل */
.va-header__hamburger {
	display:    none;
	background: none;
	border:     none;
	cursor:     pointer;
	padding:    8px;
	color:      #fff;
}

@media (max-width: 768px) {
	.va-header__nav { display: none; }
	.va-header__hamburger { display: flex; }

	.va-header__nav.is-open {
		display:    flex;
		flex-direction: column;
		position:   absolute;
		top:        64px;
		right:      0;
		left:       0;
		background: var(--va-navy);
		padding:    12px 16px 16px;
		gap:        4px;
	}
}

/* -------------------------------------------------------
   ۵. فوتر سراسری
------------------------------------------------------- */
.va-footer {
	background: var(--va-navy);
	color:      rgba(255,255,255,.8);
	padding:    48px 24px 24px;
	margin-top: 64px;
}

.va-footer__inner {
	max-width: 1200px;
	margin:    0 auto;
}

.va-footer__grid {
	display:               grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap:                   40px;
	padding-bottom:        40px;
	border-bottom:         1px solid rgba(255,255,255,.1);
}

@media (max-width: 900px) {
	.va-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.va-footer__grid { grid-template-columns: 1fr; }
}

.va-footer__logo {
	font-size:   1.3rem;
	font-weight: 700;
	color:       #fff;
	margin-bottom: 12px;
}

.va-footer__logo span { color: var(--va-gold); }

.va-footer__desc {
	font-size:   .875rem;
	line-height: 1.8;
}

.va-footer__col-title {
	font-size:   1rem;
	font-weight: 700;
	color:       #fff;
	margin-bottom: 16px;
}

.va-footer__links {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        8px;
}

.va-footer__links a {
	color:           rgba(255,255,255,.75);
	text-decoration: none;
	font-size:       .875rem;
	transition:      color var(--va-transition);
}

.va-footer__links a:hover { color: var(--va-gold); }

.va-footer__bottom {
	padding-top: 24px;
	text-align:  center;
	font-size:   .8rem;
	color:       rgba(255,255,255,.5);
}

/* -------------------------------------------------------
   ۶. ظرف اصلی صفحه
------------------------------------------------------- */
.va-page-wrap {
	max-width: 1200px;
	margin:    0 auto;
	padding:   32px 24px;
}

.va-page-wrap--narrow {
	max-width: 800px;
}

/* -------------------------------------------------------
   ۷. دکمه‌ها
------------------------------------------------------- */
.va-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	padding:         10px 22px;
	border-radius:   var(--va-radius-sm);
	font-family:     inherit;
	font-size:       .9rem;
	font-weight:     600;
	cursor:          pointer;
	border:          2px solid transparent;
	text-decoration: none;
	transition:      background var(--va-transition), color var(--va-transition),
	                 border-color var(--va-transition), box-shadow var(--va-transition);
	white-space:     nowrap;
}

/* اصلی (کنش داخلی) */
.va-btn--primary {
	background: var(--va-blue);
	color:      #fff;
	border-color: var(--va-blue);
}
.va-btn--primary:hover {
	background:   #1750c0;
	border-color: #1750c0;
	box-shadow:   0 2px 8px rgba(31,95,224,.35);
}

/* موفقیت / رزرو / پرداخت */
.va-btn--success {
	background: var(--va-green);
	color:      #fff;
	border-color: var(--va-green);
}
.va-btn--success:hover {
	background:   #1aad50;
	border-color: #1aad50;
	box-shadow:   0 2px 8px rgba(34,197,94,.35);
}

/* ثانویه (outline) */
.va-btn--secondary {
	background:   #fff;
	color:        var(--va-blue);
	border-color: var(--va-blue);
}
.va-btn--secondary:hover {
	background: #f0f4ff;
}

/* برند (هیرو/هدر) — طلایی */
.va-btn--brand {
	background:   var(--va-gold);
	color:        #fff;
	border-color: var(--va-gold);
}
.va-btn--brand:hover {
	background:   #b07a22;
	border-color: #b07a22;
	box-shadow:   0 2px 8px rgba(200,145,46,.4);
}

/* خطر */
.va-btn--danger {
	background:   var(--va-red);
	color:        #fff;
	border-color: var(--va-red);
}
.va-btn--danger:hover { background: #d03030; }

/* سایزها */
.va-btn--sm { padding: 6px 14px; font-size: .8rem; }
.va-btn--lg { padding: 14px 32px; font-size: 1rem; }
.va-btn--full { width: 100%; }

.va-btn:disabled,
.va-btn[disabled] {
	opacity: .55;
	cursor:  not-allowed;
}

/* -------------------------------------------------------
   ۸. کارت پایه
------------------------------------------------------- */
.va-card {
	background:    var(--va-card);
	border-radius: var(--va-radius-md);
	box-shadow:    var(--va-shadow-sm);
	overflow:      hidden;
}

.va-card__body {
	padding: 20px;
}

.va-card__header {
	padding:         16px 20px;
	border-bottom:   1px solid #f0f0f0;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.va-card__title {
	font-size:   1rem;
	font-weight: 700;
	color:       var(--va-text);
	margin:      0;
}

/* -------------------------------------------------------
   ۹. کارت وکیل
------------------------------------------------------- */
.va-lawyer-card {
	position:       relative;
	background:     var(--va-card);
	border-radius:  var(--va-radius-lg);
	box-shadow:     var(--va-shadow-sm);
	padding:        20px;
	transition:     box-shadow var(--va-transition), transform var(--va-transition);
	display:        flex;
	flex-direction: column;
	gap:            12px;
	border:         1px solid rgba(0,0,0,.05);
}

.va-lawyer-card:hover {
	box-shadow: var(--va-shadow-md);
	transform:  translateY(-3px);
}

/* بدج بالای کارت */
.va-lawyer-card__badge {
	position: absolute;
	top:      12px;
	right:    12px;
}

.va-badge--green {
	background: #dcfce7;
	color:      #15803d;
	font-size:  .75rem;
}

/* بخش آواتار + اطلاعات اصلی */
.va-lawyer-card__head {
	display:     flex;
	align-items: flex-start;
	gap:         14px;
}

/* آواتار */
.va-avatar {
	position:    relative;
	flex-shrink: 0;
}

.va-avatar__img {
	width:         72px;
	height:        72px;
	border-radius: 50%;
	object-fit:    cover;
	border:        3px solid var(--va-gold);
	display:       block;
}

/* نقطه‌ی وضعیت آنلاین */
.va-avatar__status {
	position:      absolute;
	bottom:        3px;
	left:          3px;
	width:         13px;
	height:        13px;
	border-radius: 50%;
	border:        2px solid #fff;
	background:    #9ca3af;
}

.va-avatar__status--online  { background: var(--va-green); }
.va-avatar__status--offline { background: #9ca3af; }
.va-avatar__status--away    { background: var(--va-gold); }

/* placeholder حرف اول نام — نمایش وقتی تصویر ندارد */
.va-avatar__fallback {
	width:           72px;
	height:          72px;
	border-radius:   50%;
	background:      linear-gradient(135deg, var(--va-blue) 0%, var(--va-navy) 100%);
	color:           #fff;
	font-weight:     700;
	font-size:       1.5rem;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border:          3px solid var(--va-gold);
	flex-shrink:     0;
	user-select:     none;
}
.va-avatar--sm .va-avatar__fallback {
	width:     36px;
	height:    36px;
	font-size: .85rem;
	border-width: 2px;
}
.va-avatar--mock {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border-radius:   50%;
	background:      rgba(255, 255, 255, .2);
	border:          2px solid rgba(255, 255, 255, .4);
	flex-shrink:     0;
}

/* اطلاعات کنار آواتار */
.va-lawyer-card__info {
	flex:      1;
	min-width: 0;
}

.va-lawyer-card__name {
	font-size:     1rem;
	font-weight:   700;
	color:         var(--va-navy);
	margin:        0 0 2px;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.va-lawyer-card__title {
	font-size: .82rem;
	color:     var(--va-muted);
	margin:    0 0 8px;
}

.va-lawyer-card__specialties {
	display:   flex;
	flex-wrap: wrap;
	gap:       4px;
}

/* ردیف امتیاز */
.va-lawyer-card__meta {
	display:     flex;
	align-items: center;
	gap:         12px;
	font-size:   .82rem;
	color:       var(--va-muted);
}

.va-rating {
	display:     flex;
	align-items: center;
	gap:         4px;
}

.va-rating__stars {
	color:          var(--va-gold);
	letter-spacing: 1px;
}

.va-rating__score {
	font-weight: 700;
	color:       var(--va-text);
}

/* شهر */
.va-lawyer-card__city {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	font-size:       .8rem;
	color:           var(--va-blue);
	text-decoration: none;
	padding:         3px 10px;
	background:      #edf2ff;
	border-radius:   20px;
	transition:      background var(--va-transition);
}
.va-lawyer-card__city:hover { background: #dbe4ff; }

/* قیمت */
.va-lawyer-card__price {
	font-size: .85rem;
	color:     var(--va-muted);
}
.va-lawyer-card__price strong {
	color:       var(--va-navy);
	font-weight: 700;
}

/* دکمه‌های کنش کارت — در RTL flex-end = سمت چپ */
.va-lawyer-card__actions {
	display:         flex;
	gap:             8px;
	margin-top:      auto;
	padding-top:     8px;
	justify-content: flex-start;
	flex-wrap:       wrap;
}

.va-lawyer-card__actions .va-btn {
	padding:      9px 16px;
	font-size:    .83rem;
	border-radius: 10px;
}

/* -------------------------------------------------------
   ۱۰. بدج‌ها (Badges)
------------------------------------------------------- */
.va-badge {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	padding:         3px 10px;
	border-radius:   20px;
	font-size:       .75rem;
	font-weight:     600;
	white-space:     nowrap;
}

.va-badge--green {
	background: #dcfce7;
	color:      #15803d;
}

.va-badge--blue {
	background: #dbeafe;
	color:      #1d4ed8;
}

.va-badge--red {
	background: #fee2e2;
	color:      #b91c1c;
}

.va-badge--gold {
	background: var(--va-amber-soft);
	color:      #92400e;
}

.va-badge--gray {
	background: #f3f4f6;
	color:      var(--va-muted);
}

/* چیپ تخصص */
.va-chip {
	display:       inline-flex;
	align-items:   center;
	padding:       2px 10px;
	border-radius: 20px;
	font-size:     .75rem;
	background:    var(--va-bg);
	color:         var(--va-text);
	border:        1px solid #e5e7eb;
}

/* -------------------------------------------------------
   ۱۱. نوار هشدار
------------------------------------------------------- */
.va-alert {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
	padding:       12px 16px;
	border-radius: var(--va-radius-sm);
	font-size:     .875rem;
	margin-bottom: 16px;
}

.va-alert--red {
	background:   #fee2e2;
	color:        #991b1b;
	border-right: 4px solid var(--va-red);
}

.va-alert--blue {
	background:   #dbeafe;
	color:        #1e40af;
	border-right: 4px solid var(--va-blue);
}

.va-alert--green {
	background:   #dcfce7;
	color:        #166534;
	border-right: 4px solid var(--va-green);
}

.va-alert--gold {
	background:   var(--va-amber-soft);
	color:        #92400e;
	border-right: 4px solid var(--va-gold);
}

.va-alert__icon {
	flex-shrink: 0;
	margin-top:  1px;
}

/* -------------------------------------------------------
   ۱۲. مودال
------------------------------------------------------- */
.va-modal-backdrop {
	position:   fixed;
	inset:      0;
	background: rgba(0,0,0,.45);
	z-index:    2000;
	display:    flex;
	align-items: center;
	justify-content: center;
	padding:    16px;
}

.va-modal-backdrop.is-hidden { display: none; }

.va-modal {
	background:    var(--va-card);
	border-radius: var(--va-radius-lg);
	box-shadow:    0 20px 60px rgba(0,0,0,.25);
	width:         100%;
	max-width:     520px;
	max-height:    90vh;
	overflow-y:    auto;
}

.va-modal__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         20px 20px 16px;
	border-bottom:   1px solid #f0f0f0;
}

.va-modal__title {
	font-size:   1.05rem;
	font-weight: 700;
	margin:      0;
}

.va-modal__close {
	background:  none;
	border:      none;
	cursor:      pointer;
	padding:     4px;
	color:       var(--va-muted);
	transition:  color var(--va-transition);
}
.va-modal__close:hover { color: var(--va-red); }

.va-modal__body {
	padding: 20px;
}

.va-modal__footer {
	display:         flex;
	justify-content: flex-end;
	gap:             10px;
	padding:         16px 20px;
	border-top:      1px solid #f0f0f0;
}

/* -------------------------------------------------------
   ۱۳. آکاردئون
------------------------------------------------------- */
.va-accordion {
	border:        1px solid #e5e7eb;
	border-radius: var(--va-radius-md);
	overflow:      hidden;
}

.va-accordion__item + .va-accordion__item {
	border-top: 1px solid #e5e7eb;
}

.va-accordion__trigger {
	width:           100%;
	background:      none;
	border:          none;
	padding:         16px 20px;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	cursor:          pointer;
	font-family:     inherit;
	font-size:       .9rem;
	font-weight:     600;
	color:           var(--va-text);
	text-align:      right;
	transition:      background var(--va-transition);
}

.va-accordion__trigger:hover { background: var(--va-bg); }

.va-accordion__icon {
	transition: transform var(--va-transition);
	flex-shrink: 0;
	margin-right: 8px; /* RTL: آیکن سمت چپ است */
}

.va-accordion__item.is-open .va-accordion__icon {
	transform: rotate(180deg);
}

.va-accordion__content {
	display:  none;
	padding:  0 20px 16px;
	font-size: .875rem;
	color:     var(--va-muted);
	line-height: 1.8;
}

.va-accordion__item.is-open .va-accordion__content { display: block; }

/* -------------------------------------------------------
   ۱۴. صفحه‌بندی (Pagination)
------------------------------------------------------- */
.va-pagination {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	padding:         24px 0;
	flex-wrap:       wrap;
}

.va-pagination__item {
	min-width:       36px;
	height:          36px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border-radius:   var(--va-radius-sm);
	font-size:       .875rem;
	font-weight:     600;
	border:          1px solid #e5e7eb;
	background:      #fff;
	color:           var(--va-text);
	cursor:          pointer;
	text-decoration: none;
	transition:      background var(--va-transition), border-color var(--va-transition),
	                 color var(--va-transition);
}

.va-pagination__item:hover,
.va-pagination__item.is-active {
	background:   var(--va-blue);
	color:        #fff;
	border-color: var(--va-blue);
}

.va-pagination__item.is-disabled {
	opacity: .45;
	cursor:  not-allowed;
}

/* -------------------------------------------------------
   ۱۵. نوار آماری سرمه‌ای
------------------------------------------------------- */
.va-stats-bar {
	background:    var(--va-navy);
	color:         #fff;
	padding:       32px 24px;
}

.va-stats-bar__inner {
	max-width: 1200px;
	margin:    0 auto;
	display:   grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap:       24px;
	text-align: center;
}

.va-stats-bar__item {}

.va-stats-bar__value {
	font-size:   2rem;
	font-weight: 700;
	color:       var(--va-gold);
	display:     block;
	line-height: 1.2;
}

.va-stats-bar__label {
	font-size: .85rem;
	color:     rgba(255,255,255,.75);
	margin-top: 4px;
}

/* -------------------------------------------------------
   ۱۶. Breadcrumb
------------------------------------------------------- */
.va-breadcrumb {
	display:    flex;
	align-items: center;
	gap:         6px;
	font-size:   .8rem;
	color:       var(--va-muted);
	margin-bottom: 20px;
	flex-wrap:   wrap;
}

.va-breadcrumb a {
	color:           var(--va-muted);
	text-decoration: none;
	transition:      color var(--va-transition);
}

.va-breadcrumb a:hover { color: var(--va-blue); }

.va-breadcrumb__sep {
	/* جهت RTL: جدا‌کننده‌ی چپ */
	font-size: .7rem;
	opacity:   .5;
}

.va-breadcrumb__current {
	color: var(--va-text);
}

/* -------------------------------------------------------
   ۱۷. باکس قوانین
------------------------------------------------------- */
.va-rules-box {
	background:    var(--va-amber-soft);
	border-radius: var(--va-radius-md);
	padding:       20px 24px;
	border-right:  4px solid var(--va-gold);
}

.va-rules-box__title {
	font-size:   .95rem;
	font-weight: 700;
	color:       #92400e;
	margin:      0 0 12px;
}

.va-rules-box__list {
	list-style:  none;
	margin:      0;
	padding:     0;
	display:     flex;
	flex-direction: column;
	gap:         8px;
}

.va-rules-box__list li {
	font-size:  .875rem;
	color:      #78350f;
	padding-right: 18px;
	position:   relative;
}

.va-rules-box__list li::before {
	content:  '✓';
	position: absolute;
	right:    0;
	color:    var(--va-gold);
	font-weight: 700;
}

/* -------------------------------------------------------
   ۱۸. فرم‌های پایه
------------------------------------------------------- */
.va-form-group {
	margin-bottom: 18px;
}

.va-label {
	display:     block;
	font-size:   .875rem;
	font-weight: 600;
	color:       var(--va-text);
	margin-bottom: 6px;
}

.va-input,
.va-select,
.va-textarea {
	width:         100%;
	padding:       10px 14px;
	border:        1px solid #d1d5db;
	border-radius: var(--va-radius-sm);
	font-family:   inherit;
	font-size:     .9rem;
	color:         var(--va-text);
	background:    #fff;
	transition:    border-color var(--va-transition), box-shadow var(--va-transition);
	direction:     rtl;
}

.va-input:focus,
.va-select:focus,
.va-textarea:focus {
	outline:      none;
	border-color: var(--va-blue);
	box-shadow:   0 0 0 3px rgba(31,95,224,.15);
}

.va-textarea { resize: vertical; min-height: 100px; }

/* -------------------------------------------------------
   ۱۹. صفحه‌ی خالی / بدون نتیجه
------------------------------------------------------- */
.va-empty-state {
	text-align: center;
	padding:    60px 20px;
	color:      var(--va-muted);
}

.va-empty-state__icon {
	font-size:     3rem;
	margin-bottom: 16px;
	opacity:       .4;
}

.va-empty-state__title {
	font-size:   1.1rem;
	font-weight: 700;
	color:       var(--va-text);
	margin-bottom: 8px;
}

.va-empty-state__desc { font-size: .875rem; }

/* -------------------------------------------------------
   ۲۰. اسپینر بارگذاری
------------------------------------------------------- */
.va-spinner {
	display:       inline-block;
	width:         20px;
	height:        20px;
	border:        2px solid rgba(255,255,255,.3);
	border-top:    2px solid #fff;
	border-radius: 50%;
	animation:     va-spin .7s linear infinite;
}

.va-spinner--dark {
	border:     2px solid rgba(31,95,224,.2);
	border-top: 2px solid var(--va-blue);
}

@keyframes va-spin {
	to { transform: rotate(360deg); }
}

/* -------------------------------------------------------
   ۲۱. ابزارک (Tooltip)
------------------------------------------------------- */
[data-va-tooltip] {
	position: relative;
	cursor:   pointer;
}

[data-va-tooltip]::after {
	content:       attr(data-va-tooltip);
	position:      absolute;
	bottom:        calc(100% + 6px);
	right:         50%;
	transform:     translateX(50%);
	background:    rgba(15,30,60,.9);
	color:         #fff;
	font-size:     .75rem;
	padding:       4px 10px;
	border-radius: var(--va-radius-sm);
	white-space:   nowrap;
	pointer-events: none;
	opacity:       0;
	transition:    opacity var(--va-transition);
	z-index:       100;
}

[data-va-tooltip]:hover::after { opacity: 1; }

/* -------------------------------------------------------
   ۲۲. کمکی‌های عمومی
------------------------------------------------------- */
.va-text-muted   { color: var(--va-muted) !important; }
.va-text-gold    { color: var(--va-gold)  !important; }
.va-text-success { color: var(--va-green) !important; }
.va-text-danger  { color: var(--va-red)   !important; }
.va-text-primary { color: var(--va-blue)  !important; }

.va-fw-bold { font-weight: 700 !important; }

.va-mb-0 { margin-bottom: 0  !important; }
.va-mb-1 { margin-bottom: 8px !important; }
.va-mb-2 { margin-bottom: 16px !important; }
.va-mb-3 { margin-bottom: 24px !important; }

.va-mt-auto { margin-top: auto !important; }
.va-me-auto { margin-left: auto !important; } /* RTL: me = margin-inline-end → چپ */

.va-d-flex   { display: flex !important; }
.va-gap-1    { gap: 8px  !important; }
.va-gap-2    { gap: 16px !important; }
.va-align-center { align-items: center !important; }

/* تصویر دایره‌ای */
.va-img-circle {
	border-radius: 50%;
	object-fit:    cover;
}

/* جداکننده */
.va-divider {
	border:     none;
	border-top: 1px solid #e5e7eb;
	margin:     20px 0;
}

/* اسکلتون برای بارگذاری */
.va-skeleton {
	background:             linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size:        200% 100%;
	animation:              va-skeleton 1.5s infinite;
	border-radius:          var(--va-radius-sm);
	display:                inline-block;
}

@keyframes va-skeleton {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* -------------------------------------------------------
   ۲۳. رسپانسیو عمومی
------------------------------------------------------- */
@media (max-width: 768px) {
	.va-page-wrap { padding: 20px 16px; }

	.va-stats-bar__value { font-size: 1.5rem; }
}

@media (max-width: 480px) {
	.va-lawyer-card__actions {
		flex-direction: column;
	}
}