/*
 * استایل بخش ترندها.
 *
 * توکن ها از خود تم می آیند (--bg، --surface، --border، --text، --green و ...)،
 * پس اگر پالت سایت عوض شود این بخش هم با آن عوض می شود و یک نسخه دوم از رنگ ها
 * اینجا نگه داشته نمی شود.
 *
 * هیچ transition و animation و backdrop-filter در این فایل نیست. از ۱۴۰۵/۰۵/۲۲
 * همه اینها از کل سایت برداشته شده اند و TBT از ۲۵۱ به تقریبا صفر رسیده.
 */

.rgbt-note {
	border-inline-start: 2px solid var(--blue);
	padding-inline-start: 16px;
	margin: 20px 0;
	color: var(--muted, #9aa4b8);
	font-size: 14px;
	line-height: 1.85;
	max-inline-size: 68ch;
}

.rgbt-note-warn { border-inline-start-color: var(--amber); }

/* ---------- جدول ---------- */

.rgbt-tablewrap { overflow-x: auto; }

.rgbt-table {
	inline-size: 100%;
	border-collapse: collapse;
	min-inline-size: 640px;
}

.rgbt-table th {
	font-size: 12px;
	font-weight: 500;
	color: var(--muted, #9aa4b8);
	text-align: start;
	padding: 0 0 10px 12px;
	border-block-end: 1px solid var(--border);
	white-space: nowrap;
}

.rgbt-table td {
	padding: 13px 0 13px 12px;
	border-block-end: 1px solid var(--border);
	vertical-align: middle;
}

.rgbt-table tr:last-child td { border-block-end: none; }

.rgbt-table th.rgbt-n,
.rgbt-table td.rgbt-n {
	text-align: end;
	padding-inline: 12px 0;
}

.rgbt-rank {
	inline-size: 30px;
	font-size: 13px;
	color: var(--muted, #9aa4b8);
	font-variant-numeric: tabular-nums;
}

.rgbt-kwcell { line-height: 1.5; }

.rgbt-kw {
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: var(--text);
}

.rgbt-biz {
	display: inline-block;
	font-size: 12px;
	color: var(--muted, #9aa4b8);
	margin-block-start: 2px;
	text-decoration: none;
}

.rgbt-biz:hover { color: var(--blue); }

.rgbt-variants {
	display: inline-block;
	font-size: 11px;
	color: var(--muted, #9aa4b8);
	margin-inline-start: 8px;
	padding: 2px 7px;
	border: 1px solid var(--border);
	border-radius: 999px;
	cursor: help;
}

.rgbt-num {
	font-size: 15px;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

/* ---------- چیپ رشد ---------- */

.rgbt-rise {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	padding: 4px 9px;
	border-radius: 7px;
	font-variant-numeric: tabular-nums;
}

.rgbt-rise-up   { color: #2ee6a8; background: rgba(46, 230, 168, .11); }
.rgbt-rise-down { color: #ff4d6a; background: rgba(255, 77, 106, .11); }
.rgbt-rise-flat { color: #8892a8; background: rgba(255, 255, 255, .05); }
.rgbt-rise-mute { color: #616a80; background: none; font-weight: 400; font-size: 12px; }

.rgbt-nochart { font-size: 12px; color: #616a80; }

/* ---------- نمودارها ---------- */

.rgbt-spark { display: block; margin-inline-start: auto; }
.rgbt-sparkcell { inline-size: 160px; }

.rgbt-chart {
	display: block;
	inline-size: 100%;
	block-size: 150px;
}

.rgbt-chartbox {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md, 18px);
	padding: 20px;
	margin: 20px 0;
}

/* میله های دوازده ماه */

.rgbt-bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	block-size: 132px;
}

.rgbt-bars li {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 5px;
	block-size: 100%;
	min-inline-size: 0;
}

.rgbt-bar {
	inline-size: 100%;
	border-radius: 4px 4px 0 0;
	opacity: .85;
}

.rgbt-bar-l,
.rgbt-bar-v {
	font-size: 10.5px;
	color: var(--muted, #9aa4b8);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.rgbt-bar-v { color: var(--text); }

/* ---------- کارت آمار ---------- */

.rgbt-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px;
	margin: 18px 0 0;
}

.rgbt-stat {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-sm, 12px);
	padding: 12px 14px;
}

.rgbt-stat .k {
	display: block;
	font-size: 11.5px;
	color: var(--muted, #9aa4b8);
	margin-block-end: 5px;
}

.rgbt-stat .v {
	display: block;
	font-size: 17px;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

/* ---------- شبکه کسب و کارها ---------- */

.rgbt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

.rgbt-card {
	display: block;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md, 18px);
	padding: 16px 18px;
	text-decoration: none;
	color: inherit;
}

.rgbt-card:hover { border-color: rgba(255, 255, 255, .2); }

.rgbt-card-t {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
	margin-block-end: 6px;
}

.rgbt-card-m {
	display: block;
	font-size: 12.5px;
	color: var(--muted, #9aa4b8);
	font-variant-numeric: tabular-nums;
}

.rgbt-card-empty { opacity: .55; }

/* ---------- دانلود ---------- */

.rgbt-dl {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
	list-style: none;
	padding: 0;
}

.rgbt-dl a {
	display: inline-block;
	font-size: 13px;
	padding: 7px 14px;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text);
	text-decoration: none;
}

.rgbt-dl a:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- ریز ---------- */

.rgbt-gap {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 12px;
	color: var(--amber);
	margin: 12px 0 0;
	line-height: 1.7;
}

.rgbt-empty {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md, 18px);
	padding: 28px 22px;
	text-align: center;
	color: var(--muted, #9aa4b8);
	font-size: 15px;
}

@media (max-width: 640px) {
	.rgbt-table { min-inline-size: 520px; }
	.rgbt-sparkcell { inline-size: 120px; }
	.rgbt-spark { inline-size: 110px; }
	.rgbt-bars { block-size: 110px; }
	.rgbt-bar-l { display: none; }
}

/* ---------- سختی رتبه (سمراش) ---------- */

/*
 * عدد و برچسب با هم. عدد تنها برای کسی که با مقیاس ۰ تا ۱۰۰ سمراش آشنا نیست
 * معنایی ندارد، و برچسب تنها دقتی را که هست دور می ریزد.
 */
.rgbt-kd {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.25;
}

.rgbt-kd-n {
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.rgbt-kd-l {
	font-size: 10.5px;
	color: var(--muted, #9aa4b8);
	white-space: nowrap;
}

.rgbt-kd-easy   .rgbt-kd-n { color: #2ee6a8; }
.rgbt-kd-fair   .rgbt-kd-n { color: #7fd4a8; }
.rgbt-kd-hard   .rgbt-kd-n { color: var(--amber, #ffc34d); }
.rgbt-kd-brutal .rgbt-kd-n { color: #ff4d6a; }

/* ---------- نیت جست وجو ---------- */

.rgbt-intentcell { max-inline-size: 150px; }

.rgbt-intent {
	display: inline-block;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid var(--border);
	white-space: nowrap;
	margin: 2px 0 2px 5px;
	color: var(--muted, #9aa4b8);
}

/*
 * رنگ اینجا هم معنا دارد و هم تزئین نیست: خرید و مقایسه پول نزدیک ترند و
 * پررنگ تر دیده می شوند، دانستن خنثی است و رفتن به سایت کم رنگ، چون کلمه
 * برندی معمولا کلمه ای نیست که بشود برایش جنگید.
 */
.rgbt-intent-tra { color: #2ee6a8; border-color: rgba(46, 230, 168, .35); }
.rgbt-intent-com { color: var(--amber, #ffc34d); border-color: rgba(255, 195, 77, .32); }
.rgbt-intent-inf { color: #8fa6d8; border-color: rgba(143, 166, 216, .3); }
.rgbt-intent-nav { color: #616a80; border-color: var(--border); }

/* ---------- جدول مقایسه کشوری ---------- */

.rgbt-geo { min-inline-size: 520px; }

.rgbt-geo-top {
	font-weight: 700;
	color: #2ee6a8;
}

.rgbt-geo-cpc {
	display: block;
	font-size: 10.5px;
	color: var(--muted, #9aa4b8);
	font-variant-numeric: tabular-nums;
	margin-block-start: 2px;
}

@media (max-width: 640px) {
	.rgbt-intentcell { max-inline-size: 110px; }
	.rgbt-kd-l { display: none; }
}