/* ======================================================
   LIVE CHAT — tampilan modern & minimalis
   Mencakup: tombol mengambang (.chat-sticky), modal pilih
   kontak (#modalpilihpesan), dan modal percakapan (#modalpesan)
   ====================================================== */

/* ---------- Tombol mengambang ---------- */
.chat-sticky{
	font-size:14px !important;
	background:#111 !important;
	color:#fff !important;
	border-radius:3px !important;
	padding:12px 20px !important;
	box-shadow:0 6px 20px rgba(0,0,0,.18) !important;
	font-weight:600;
	letter-spacing:.3px;
	gap:8px;
}
.chat-sticky:hover{ background:#000 !important; }
.chat-sticky .badge{
	background:#111 !important;
	border:2px solid #fff;
	border-radius:12px !important;
	font-weight:700;
}

/* ---------- Modal "Hubungi Admin" ---------- */
#modalpilihpesan .modal-content{
	border:none;
	border-radius:2px;
	box-shadow:0 10px 50px rgba(0,0,0,.18);
	padding:34px 30px 30px !important;
}
#modalpilihpesan h3{
	font-size:16px !important;
	text-transform:uppercase;
	letter-spacing:.6px;
	font-weight:700 !important;
	color:#111 !important;
	background:none !important;
	-webkit-text-fill-color:#111 !important;
	margin-bottom:22px !important;
}
#modalpilihpesan .btn-lg{
	border-radius:2px !important;
	font-size:12px !important;
	text-transform:uppercase;
	letter-spacing:.5px;
	font-weight:600 !important;
	padding:13px 20px !important;
	box-shadow:none !important;
	background-image:none !important;
	transition:opacity .2s ease, background .2s ease;
}
#modalpilihpesan .btn-success{
	background:#111 !important;
	border:1px solid #111 !important;
	color:#fff !important;
}
#modalpilihpesan .btn-success:hover{ opacity:.85; }
#modalpilihpesan .btn-primary{
	background:#fff !important;
	border:1px solid #ddd !important;
	color:#111 !important;
}
#modalpilihpesan .btn-primary:hover{ border-color:#111; background:#fafafa !important; }

/* ---------- Modal percakapan (Live Chat) ---------- */
#modalpesan .modal-content{
	border:none;
	border-radius:2px;
	box-shadow:0 10px 50px rgba(0,0,0,.18);
}
#modalpesan .modal-header{
	border-bottom:1px solid #f0f0f0;
	padding:18px 24px;
}
#modalpesan .modal-title{
	font-size:15px !important;
	font-weight:700 !important;
	color:#111 !important;
	background:none !important;
	-webkit-text-fill-color:#111 !important;
	text-transform:uppercase;
	letter-spacing:.5px;
}
#modalpesan .modal-title i{ color:#888; margin-right:2px; }
#modalpesan .close{ opacity:1; }
#modalpesan .close span{ color:#999; font-weight:400; font-size:22px; transition:color .2s ease; }
#modalpesan .close:hover span{ color:#111; }

#modalpesan .pesan{ background:#fff; padding:18px 20px 10px; }
#modalpesan .pesan .isipesan{
	box-shadow:none;
	border-radius:2px;
	padding:9px 14px;
	font-size:13px;
	max-width:78%;
}
#modalpesan .pesan .isipesan small{
	opacity:.6;
	font-size:65%;
}

/* Pesan keluar (dari saya) — gelap, rata kanan */
#modalpesan .pesan .right .isipesan{
	background:#111 !important;
	background-image:none !important;
	color:#fff !important;
}
#modalpesan .pesan .right .isipesan small{ color:#fff !important; }

/* Pesan masuk (dari admin) — abu terang, rata kiri */
#modalpesan .pesan .left .isipesan{
	background:#f5f5f5 !important;
	background-image:none !important;
	color:#111 !important;
	border:1px solid #eee;
}
#modalpesan .pesan .left .isipesan small{ color:#888 !important; }

/* Label tanggal di tengah */
#modalpesan .pesan .center .isipesan{
	background:#fafafa !important;
	box-shadow:none;
	border:1px solid #eee;
	color:#888;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:.4px;
	font-weight:600;
	border-radius:2px;
}

/* Kartu produk di dalam bubble pesan */
#modalpesan .pesan .isipesan.cursor-pointer{
	background:#fff !important;
	border:1px solid #eee;
	max-width:88%;
	padding:10px;
}
#modalpesan .pesan .right .isipesan.cursor-pointer,
#modalpesan .pesan .left .isipesan.cursor-pointer{
	color:#111 !important;
}

/* Form kirim pesan */
#modalpesan .modal-footer{
	border-top:1px solid #f0f0f0;
	padding:16px 20px;
}
#modalpesan .form-control{
	border:1px solid #ddd !important;
	border-radius:2px !important;
	box-shadow:none !important;
	font-size:14px;
	padding:11px 14px;
	height:auto;
	color:#111;
}
#modalpesan .form-control:focus{ border-color:#111 !important; }
#modalpesan #submit{
	background:#111 !important;
	border:1px solid #111 !important;
	color:#fff !important;
	border-radius:2px !important;
	font-size:12px !important;
	text-transform:uppercase;
	letter-spacing:.5px;
	font-weight:600 !important;
	box-shadow:none !important;
	background-image:none !important;
	padding:11px 18px !important;
	transition:opacity .2s ease;
}
#modalpesan #submit:hover{ opacity:.85; }