:root{
  --vro-share-size:34px;
  --vro-share-gap:8px;
  --vro-share-bg:#ffffff;
  --vro-share-border:rgba(0,0,0,.08);
  --vro-share-shadow:0 6px 20px rgba(0,0,0,.12);
  --vro-share-primary:#2563eb; /* indigo-600 */
  --vro-share-muted:#6b7280; /* gray-500 */
}

/* Sembunyikan di editor Elementor */
.elementor-editor-active .vro-share {
  display: none !important;
}

.vro-share{
  position:fixed;
  left:0;
  top:50%;
  transform:translateY(-50%);
  z-index:9999;
  font-family:inherit;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  opacity: 0; /* Sembunyikan di awal */
  transition: opacity 0.5s ease; /* Tambahkan transisi untuk efek fade */
}

.vro-share__panel{
  background:rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:0;
  border-radius:0 14px 14px 0 !important; /* flush left, rounded right */
  box-shadow:var(--vro-share-shadow);
  padding:5px 10px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transition:transform .25s ease;
  will-change: transform;
  transform:translateX(0);
}

.vro-share__label {
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  white-space: nowrap;
  text-align: center;
  width: 100%;
}

.vro-share__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vro-share-gap);
  width: 100%;
}

.vro-share__btn{
  width:var(--vro-share-size);
  height:var(--vro-share-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px; /* round buttons */
  border:1px solid var(--vro-share-border);
  background:#fff; /* white circular background */
  color:#111827; /* default icon color overrides per network below */
  text-decoration:none;
  outline:none;
  transition:transform .12s ease, box-shadow .2s ease, background .2s;
}
.vro-share__btn--copy{ color:#111827; }
.vro-share__btn i{ font-size:16px; line-height:1; }
.vro-share__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.vro-share__btn:active{
  transform:translateY(0);
}

/* Force copy button to match social buttons */
.vro-share__btn--copy{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:var(--vro-share-size) !important;
  height:var(--vro-share-size) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  border:1px solid var(--vro-share-border) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111827 !important;
  box-shadow:none !important;
}
.vro-share__btn--copy:focus{ outline:none !important; box-shadow:none !important; }

/* Brand accents */
.vro-share__btn--wa{ color:#25D366; }
.vro-share__btn--fb{ color:#1877F2; }
.vro-share__btn--x{ color:#111; }
.vro-share__btn--threads{ color:#000; }
.vro-share__btn--mail{ color:#ef4444; }
.vro-share__btn--copy{ color:var(--vro-share-primary); }

.vro-share__icon{ width:22px; height:22px; display:block; }

/* Toggle */
.vro-share__toggle{
  width:32px; height:32px;
  border-radius:0 16px 16px 0 !important; /* flush left to edge */
  border:1px solid var(--vro-share-border);
  background:rgba(17, 24, 39, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  cursor:pointer;
  margin-top:10px;
  color:#fff !important;
  padding:10px !important;
}
.vro-share__toggle i{ font-size:14px; }

/* Brand colors for icons */
.vro-share__btn--wa { color:#25D366 !important; }
.vro-share__btn--fb { color:#1877F2 !important; }
.vro-share__btn--x { color:#000000 !important; }
.vro-share__btn--threads { color:#000000 !important; }
.vro-share__btn--mail { color:#111827 !important; }

/* Collapsed */
.vro-share--collapsed .vro-share__panel{ transform:translateX(-110%); }

/* Small screens: move up a bit */
@media (max-width: 768px){
  :root{ --vro-share-size:32px; --vro-share-gap:10px; }
}