/*
 * cs-widget.css
 * Widget Customer Service mengambang (floating) untuk halaman publik.
 * Tombol launcher bulat di kanan-bawah; saat .is-open ditambahkan ke
 * .cs-widget, stack ikon kontak sosial muncul ke atas dengan animasi
 * staggered yang halus. Pure CSS, GPU-friendly, responsive, dan
 * menghormati prefers-reduced-motion. Bind ke kontrak class persis.
 */

:root {
  --cs-launcher-size: 58px;
  --cs-item-size: 48px;
  --cs-gap: 12px;
  --cs-orbit: 92px;
  --cs-radius: 50%;
  --cs-shadow: 0 6px 20px rgba(17, 24, 39, 0.18);
  --cs-shadow-hover: 0 10px 28px rgba(17, 24, 39, 0.26);
  --cs-surface: #ffffff;
  --cs-neutral: #475569;
  --cs-ring: rgba(70, 128, 255, 0.55);
  --cs-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Container ---------- */
.cs-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1060;
  --cs-primary: var(--bs-primary, #4680ff);
  --cs-primary-dark: color-mix(in srgb, var(--bs-primary, #4680ff) 80%, #000);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--cs-gap);
  isolation: isolate;
}

/* ---------- Backdrop (full-screen dim while open) ---------- */
.cs-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(15, 23, 42, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--cs-ease);
}

.cs-widget.is-open .cs-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Items wrapper (radial anchor, collapsed by default) ---------- */
.cs-items {
  position: absolute;
  right: calc(var(--cs-launcher-size) / 2);
  bottom: calc(var(--cs-launcher-size) / 2);
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

/* ---------- Individual item link (radial position) ---------- */
.cs-item {
  position: absolute;
  right: calc(var(--cs-item-size) / -2);
  bottom: calc(var(--cs-item-size) / -2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cs-item-size);
  height: var(--cs-item-size);
  border-radius: 50%;
  background: var(--cs-surface);
  color: var(--cs-neutral);
  text-decoration: none;
  box-shadow: var(--cs-shadow);
  opacity: 0;
  transform: translate(0, 0) scale(0.5);
  transition: transform 0.3s var(--cs-ease), box-shadow 0.22s var(--cs-ease),
    opacity 0.22s var(--cs-ease), color 0.2s ease;
}

.cs-item i {
  font-size: 26px;
  line-height: 1;
}

/* Fan out around the launcher when open (angle set inline per item) */
.cs-widget.is-open .cs-item {
  opacity: 1;
  pointer-events: auto;
  transform: rotate(calc(var(--cs-angle, 0deg) * -1)) translateY(calc(var(--cs-orbit) * -1)) rotate(var(--cs-angle, 0deg)) scale(1);
}

.cs-widget.is-open .cs-item:nth-child(1)  { transition-delay: 0.03s; }
.cs-widget.is-open .cs-item:nth-child(2)  { transition-delay: 0.06s; }
.cs-widget.is-open .cs-item:nth-child(3)  { transition-delay: 0.09s; }
.cs-widget.is-open .cs-item:nth-child(4)  { transition-delay: 0.12s; }
.cs-widget.is-open .cs-item:nth-child(5)  { transition-delay: 0.15s; }
.cs-widget.is-open .cs-item:nth-child(6)  { transition-delay: 0.18s; }
.cs-widget.is-open .cs-item:nth-child(7)  { transition-delay: 0.21s; }
.cs-widget.is-open .cs-item:nth-child(8)  { transition-delay: 0.24s; }
.cs-widget.is-open .cs-item:nth-child(9)  { transition-delay: 0.27s; }
.cs-widget.is-open .cs-item:nth-child(10) { transition-delay: 0.30s; }

.cs-item:hover,
.cs-item:focus-visible {
  transform: translateX(-3px) scale(1.12);
}

.cs-item:focus-visible {
  outline: none;
  filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.3)) brightness(1.1);
}

/* ---------- Optional tooltip label ---------- */
.cs-item__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s var(--cs-ease);
}

.cs-item__label::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: rgba(17, 24, 39, 0.92);
}

.cs-item:hover .cs-item__label,
.cs-item:focus-visible .cs-item__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ---------- Launcher button ---------- */
.cs-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cs-launcher-size);
  height: var(--cs-launcher-size);
  padding: 0;
  border: none;
  border-radius: var(--cs-radius);
  background: linear-gradient(135deg, var(--cs-primary), var(--cs-primary-dark));
  color: #fff;
  cursor: pointer;
  box-shadow: var(--cs-shadow);
  transition: transform 0.24s var(--cs-ease), box-shadow 0.24s var(--cs-ease);
}

.cs-launcher i {
  font-size: 28px;
  line-height: 1;
  transition: transform 0.3s var(--cs-ease);
}

.cs-launcher:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--cs-shadow-hover);
}

.cs-launcher:active {
  transform: translateY(-1px) scale(0.98);
}

.cs-launcher:focus-visible {
  outline: none;
  box-shadow: var(--cs-shadow-hover), 0 0 0 4px var(--cs-ring);
  border-radius: 50%;
}

.cs-widget.is-open .cs-launcher {
  transform: rotate(90deg);
}

.cs-widget.is-open .cs-launcher i {
  transform: rotate(-90deg) scale(1.05);
}

/* ---------- Brand-color modifiers (per platform) ---------- */
.cs-item--wa      { color: #25D366; border-color: rgba(37, 211, 102, 0.4); }
.cs-item--tg      { color: #229ED9; border-color: rgba(34, 158, 217, 0.4); }
.cs-item--fb      { color: #1877F2; border-color: rgba(24, 119, 242, 0.4); }
.cs-item--ig      { color: #E4405F; border-color: rgba(228, 64, 95, 0.4); }
.cs-item--yt      { color: #FF0000; border-color: rgba(255, 0, 0, 0.4); }
.cs-item--tiktok  { color: #000000; border-color: rgba(0, 0, 0, 0.45); }
.cs-item--twitter { color: #000000; border-color: rgba(0, 0, 0, 0.45); }
.cs-item--discord { color: #5865F2; border-color: rgba(88, 101, 242, 0.4); }
.cs-item--linkedin{ color: #0A66C2; border-color: rgba(10, 102, 194, 0.4); }
.cs-item--line    { color: #06C755; border-color: rgba(6, 199, 85, 0.4); }

/* Instagram gradient accent on hover (bare glyph) */
.cs-item--ig:hover,
.cs-item--ig:focus-visible {
  filter: drop-shadow(0 6px 12px rgba(214, 41, 118, 0.45)) brightness(1.05);
}

/* Brighten + lift on hover/focus for bare glyphs (no box fill) */
.cs-item--wa:hover,      .cs-item--wa:focus-visible,
.cs-item--tg:hover,      .cs-item--tg:focus-visible,
.cs-item--fb:hover,      .cs-item--fb:focus-visible,
.cs-item--yt:hover,      .cs-item--yt:focus-visible,
.cs-item--tiktok:hover,  .cs-item--tiktok:focus-visible,
.cs-item--twitter:hover, .cs-item--twitter:focus-visible,
.cs-item--discord:hover, .cs-item--discord:focus-visible,
.cs-item--linkedin:hover,.cs-item--linkedin:focus-visible,
.cs-item--line:hover,    .cs-item--line:focus-visible {
  filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.28)) brightness(1.08);
}

/* ---------- Mobile responsive ---------- */
@media (max-width: 480px) {
  .cs-widget {
    right: 14px;
    bottom: 14px;
    --cs-orbit: calc(var(--cs-orbit) * 0.85);
  }
  .cs-launcher {
    width: 50px;
    height: 50px;
  }
  .cs-launcher i { font-size: 24px; }
  .cs-item {
    width: 44px;
    height: 44px;
  }
  .cs-item i { font-size: 24px; }
  .cs-item__label { font-size: 12px; padding: 6px 10px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cs-items,
  .cs-item,
  .cs-launcher,
  .cs-launcher i,
  .cs-item__label {
    transition: none !important;
  }
  .cs-widget.is-open .cs-item { transition-delay: 0s !important; }
  .cs-launcher:hover,
  .cs-launcher:active,
  .cs-item:hover,
  .cs-item:focus-visible { transform: none; }
  .cs-widget.is-open .cs-launcher { transform: none; }
  .cs-widget.is-open .cs-launcher i { transform: none; }
}