/* Tombol chat di halaman produk -- lihat includes/chat-pelanggan.php buat konteks
   lengkap. Sekarang ada 2 varian warna tergantung channel mana yang lagi aktif
   (lihat zsd_channel_chat_produk() di PHP-nya, Tawk.to menang kalau dua-duanya
   nyala, WA cuma fallback):

   - .zsd-chat-tombol-wa: hijau resmi WhatsApp (#25D366), SENGAJA dipertahankan
     (beda kasus sama cek-pesanan.css yang kemarin dibetulin ke biru brand) --
     ini warna resmi WhatsApp, dipertahankan supaya pembeli langsung kenal "oh
     ini WA" dari warnanya, sama kayak logo Visa/Mastercard yang nggak diganti
     warna brand toko.
   - .zsd-chat-tombol-tawkto: biru brand Zenos (#1c78c9, sama kayak
     .zsd-btn-primary di dashboard.css & tombol di cek-pesanan.css) -- BEDA
     alasannya dari yang di atas: tombol ini BUKAN elemen ber-merek pihak
     ketiga yang perlu dikenali pembeli (nggak ada logo Tawk.to di sini, cuma
     ikon chat generik + teks "Chat dengan Kami"), jadi ikut "warna buatan
     kita" seperti elemen UI Zenos lainnya, bukan warna Tawk.to.

   Widget Tawk.to sendiri (bubble di pojok layar) gayanya diatur dari akun
   Tawk.to masing-masing seller (Administration > Widget Appearance), bukan
   dari sini. */

.zsd-chat-wrap {
	margin: 14px 0;
}

.zsd-chat-tombol {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.zsd-chat-tombol:hover {
	color: #fff;
	transform: translateY(-1px);
}

.zsd-chat-tombol svg {
	flex-shrink: 0;
}

.zsd-chat-tombol-wa {
	background: #25D366;
}

.zsd-chat-tombol-wa:hover {
	background: #1ebc59;
}

.zsd-chat-tombol-tawkto {
	background: #1c78c9;
}

.zsd-chat-tombol-tawkto:hover {
	background: #15609f;
}

@media (max-width: 480px) {
	.zsd-chat-tombol {
		width: 100%;
		justify-content: center;
	}
}