/* FashionHub ID - gaya tambahan (selain Tailwind) */
/* Custom scrollbar & smooth effects */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Gambar latar samar di banner utama (ganti hero-bg.svg dengan foto sendiri bila mau) */
.hero-art {
    background: url('hero-bg.svg') center / cover no-repeat;
    opacity: .5;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
            mask-image: linear-gradient(to right, transparent 0%, #000 55%);
}
@media (max-width: 639px) { .hero-art { opacity: .22; } }

/* ===== Chat Customer Service ===== */
#cs-root { position: fixed; right: 16px; bottom: 16px; z-index: 45; font-family: 'Plus Jakarta Sans', sans-serif; }
#cs-root .cs-hidden { display: none !important; }
#cs-fab { position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 18px; border: 0; border-radius: 999px; cursor: pointer;
  color: #fff; font-weight: 800; font-size: 14px; background: linear-gradient(135deg,#059669,#14b8a6); box-shadow: 0 10px 25px rgba(5,150,105,.4); transition: transform .2s; }
#cs-fab:hover { transform: translateY(-2px) scale(1.03); }
#cs-fab i.fa-headset { font-size: 18px; }
.cs-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; background: #ef4444; border: 2px solid #fff; border-radius: 50%; }
#cs-panel { width: min(370px, calc(100vw - 32px)); height: min(560px, calc(100vh - 100px)); display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 20px; box-shadow: 0 20px 50px rgba(15,23,42,.25); border: 1px solid #e2e8f0; }
#cs-panel header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg,#059669,#0f766e); }
#cs-panel header img { width: 38px; height: 38px; border-radius: 12px; }
#cs-panel header div { flex: 1; line-height: 1.25; } #cs-panel header b { display: block; font-size: 14px; }
#cs-panel header small { font-size: 11px; opacity: .9; } .cs-on { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #86efac; margin-right: 3px; }
#cs-close { background: rgba(255,255,255,.18); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 10px; cursor: pointer; }
#cs-body { flex: 1; overflow-y: auto; padding: 14px; background: #f8fafc; display: flex; flex-direction: column; gap: 8px; }
.cs-msg { max-width: 86%; padding: 9px 12px; font-size: 13px; line-height: 1.5; border-radius: 14px; word-wrap: break-word; }
.cs-msg.bot { background: #fff; color: #334155; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; align-self: flex-start; }
.cs-msg.me { background: #059669; color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.cs-msg small { color: #64748b; }
.cs-typing { display: flex; gap: 4px; padding: 12px 14px; }
.cs-typing i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: csb 1s infinite; }
.cs-typing i:nth-child(2) { animation-delay: .15s; } .cs-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes csb { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
#cs-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; background: #f8fafc; border-top: 1px solid #f1f5f9; scrollbar-width: none; }
#cs-chips::-webkit-scrollbar { display: none; }
#cs-chips button { flex: none; padding: 6px 12px; font-size: 12px; font-weight: 700; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; cursor: pointer; }
#cs-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e2e8f0; }
#cs-form input { flex: 1; min-width: 0; padding: 10px 14px; font-size: 13px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px; outline: none; }
#cs-form input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
#cs-form button { width: 42px; border: 0; border-radius: 12px; color: #fff; background: #059669; cursor: pointer; }
#cs-wa { margin: 0 12px 12px; padding: 10px; border: 0; border-radius: 12px; font-size: 12.5px; font-weight: 800; color: #fff; background: #22c55e; cursor: pointer; }
#cs-wa:hover { background: #16a34a; }

/* Gelembung pemberitahuan di atas tombol CS */
#cs-tip { position: absolute; right: 0; bottom: calc(100% + 12px); width: 235px; padding: 12px 30px 12px 14px; cursor: pointer;
  background: #fff; color: #334155; border: 1px solid #a7f3d0; border-radius: 16px; border-bottom-right-radius: 4px;
  box-shadow: 0 12px 30px rgba(15,23,42,.18); font-size: 12.5px; line-height: 1.45; animation: cs-pop .45s ease-out; }
#cs-tip b { display: block; color: #047857; font-size: 13px; margin-bottom: 2px; }
#cs-tip::after { content: ''; position: absolute; right: 26px; bottom: -7px; width: 12px; height: 12px; background: #fff;
  border-right: 1px solid #a7f3d0; border-bottom: 1px solid #a7f3d0; transform: rotate(45deg); }
#cs-tip-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 11px; cursor: pointer; }
@keyframes cs-pop { from { opacity: 0; transform: translateY(8px) scale(.95); } to { opacity: 1; transform: none; } }
#cs-fab:not(.cs-hidden)::before { content: ''; position: absolute; inset: 0; border-radius: 999px; border: 2px solid #10b981; animation: cs-ring 2.2s ease-out infinite; pointer-events: none; }
@keyframes cs-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }