/* [17 Okt 2026] Pemilih tampilan trading (layout/pilih-tampilan-trading): Legacy | Basic | Pro.
   Dipakai ketiga mode (basic-trading, pro-trading, advance-trading). Tampil >= 992px (lebar desktop "Spot rapi"
   trading-desktop.css; [17 Okt 2026, tablet] dulu 768px, tablet kini memakai tampilan HP); di bawahnya tidak tampil sehingga tampilan HP (layout.mobile-trade-*) tidak berubah.
   Token sendiri (--dt-*) dengan varian gelap #page-container.darkmode / body.darkmode-page -- tidak bergantung pada
   token pro (--pt-*) atau legacy (--dex-td-*), jadi tampil sama di ketiga mode dan saat dipindah ke bar Pro. */

.dex-tampilan { display: none; }

@media (min-width: 992px) {
	.dex-tampilan {
		--dt-latar: #F1F5F9;
		--dt-kartu: #FFFFFF;
		--dt-teks: #0F172A;
		--dt-teks-2: #64748B;
		--dt-aksen: #2563EB;
		--dt-bayang: 0 1px 2px rgba(15, 23, 42, .14);
		display: inline-flex;
		align-items: center;
		gap: 2px;
		margin: 0 8px 0 0;
		padding: 3px;
		border-radius: 9px;
		background: var(--dt-latar);
		vertical-align: middle;
		font-family: inherit;
		line-height: 1;
	}
	#page-container.darkmode .dex-tampilan,
	body.darkmode-page .dex-tampilan {
		--dt-latar: rgba(255, 255, 255, .06);
		--dt-kartu: #1E293B;
		--dt-teks: #F1F5F9;
		--dt-teks-2: #94A3B8;
		--dt-aksen: #60A5FA;
		--dt-bayang: 0 1px 2px rgba(0, 0, 0, .45);
	}
	.dex-tampilan .dex-tampilan-opsi {
		display: inline-flex;
		align-items: center;
		height: 24px;
		padding: 0 11px;
		border-radius: 7px;
		background: transparent;
		color: var(--dt-teks-2) !important;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .1px;
		text-decoration: none !important;
		white-space: nowrap;
		transition: background-color .12s ease, color .12s ease;
	}
	.dex-tampilan .dex-tampilan-opsi:hover { color: var(--dt-teks) !important; }
	.dex-tampilan .dex-tampilan-opsi[aria-current="page"] {
		background: var(--dt-kartu);
		color: var(--dt-aksen) !important;
		box-shadow: var(--dt-bayang);
		cursor: default;
	}
	.dex-tampilan .dex-tampilan-opsi:focus-visible { outline: 2px solid var(--dt-aksen); outline-offset: 1px; }

	/* tombol lama "Basic Mode"/"Pro Mode" di bilah grafik: disembunyikan selama pemilih ada.
	   Saudara "~" berlaku tanpa :has (pemilih disisip TEPAT SEBELUM blok tombol lama); kelas dari JS sebagai cadangan
	   bila pemilih dipindah (mode Pro). */
	#content .blok-grafik .dex-tampilan ~ .btn-tukar-tata { display: none !important; }
	#content.dex-tampilan-ada .blok-grafik .btn-tukar-tata { display: none !important; }

	/* tautan "Mode Basic" di bar ringkasan pro (layout.pro-trading-halaman, .dex-pt-tautan) */
	#content:has(#dex-tampilan) .dex-pt-tautan > a[href*="/basic-trading/"] { display: none !important; }
	#content.dex-tampilan-ada .dex-pt-tautan > a[href*="/basic-trading/"] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.dex-tampilan .dex-tampilan-opsi { transition: none !important; }
}