/* ======================================================
   JAKSKY LIVE SUMMARY FIX V1
   Memisahkan card statistik dari background sekitar
   ====================================================== */

body.jakPageHome #jakLiveSummary{
  position:relative !important;
  display:block !important;

  width:calc(100% - 32px) !important;
  max-width:none !important;

  margin:18px auto 16px !important;
  padding:0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  isolation:isolate !important;
}

/* Hilangkan pseudo/background lama kalau ada */
body.jakPageHome #jakLiveSummary::before,
body.jakPageHome #jakLiveSummary::after{
  content:none !important;
  display:none !important;
}

/* Card putih utama */
body.jakPageHome #jakLiveSummaryButton{
  position:relative !important;

  width:100% !important;
  min-height:64px !important;

  display:grid !important;
  grid-template-columns:
    minmax(0,1fr)
    1px
    minmax(0,1.25fr)
    1px
    minmax(0,1fr)
    18px !important;

  align-items:center !important;
  column-gap:10px !important;

  margin:0 !important;
  padding:11px 14px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(255,250,253,.96)
    ) !important;

  border:1px solid rgba(226,120,176,.16) !important;
  border-radius:22px !important;

  box-shadow:
    0 10px 28px rgba(215,84,154,.09),
    inset 0 1px 0 rgba(255,255,255,.9) !important;

  overflow:hidden !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* Pastikan card tidak punya lapisan putih ekstra */
body.jakPageHome #jakLiveSummaryButton::before,
body.jakPageHome #jakLiveSummaryButton::after{
  content:none !important;
  display:none !important;
}

/* Tiap statistik */
body.jakPageHome #jakLiveSummary .jakLiveMetric{
  min-width:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;

  margin:0 !important;
  padding:0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  white-space:nowrap !important;
}

/* Angka */
body.jakPageHome #jakLiveSummary .jakLiveMetric strong{
  margin:0 !important;
  font-size:16px !important;
  font-weight:850 !important;
  line-height:1 !important;
  color:#2e2029 !important;
}

/* Label */
body.jakPageHome #jakLiveSummary .jakLiveMetric small{
  margin:0 !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  color:#92798a !important;
}

/* Titik online */
body.jakPageHome #jakLiveSummary .jakLiveDot{
  width:10px !important;
  height:10px !important;
  flex:0 0 10px !important;

  border-radius:50% !important;
  background:#20c878 !important;

  box-shadow:
    0 0 0 4px rgba(32,200,120,.09),
    0 0 10px rgba(32,200,120,.22) !important;
}

/* Separator */
body.jakPageHome #jakLiveSummary .jakLiveDivider{
  width:1px !important;
  height:27px !important;

  margin:0 !important;

  background:linear-gradient(
    transparent,
    rgba(180,125,156,.24),
    transparent
  ) !important;

  border:0 !important;
}

/* Panah kanan */
body.jakPageHome #jakLiveSummaryButton > :last-child{
  justify-self:end !important;
}

/* Tekan sedikit */
body.jakPageHome #jakLiveSummaryButton:active{
  transform:scale(.992) !important;

  box-shadow:
    0 6px 20px rgba(215,84,154,.08),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* MOBILE */
@media(max-width:430px){

  body.jakPageHome #jakLiveSummary{
    width:calc(100% - 28px) !important;
    margin-top:16px !important;
    margin-bottom:15px !important;
  }

  body.jakPageHome #jakLiveSummaryButton{
    min-height:61px !important;

    grid-template-columns:
      minmax(0,.95fr)
      1px
      minmax(0,1.25fr)
      1px
      minmax(0,.95fr)
      14px !important;

    column-gap:7px !important;

    padding:10px 10px !important;
    border-radius:20px !important;
  }

  body.jakPageHome #jakLiveSummary .jakLiveMetric{
    gap:4px !important;
  }

  body.jakPageHome #jakLiveSummary .jakLiveMetric strong{
    font-size:15px !important;
  }

  body.jakPageHome #jakLiveSummary .jakLiveMetric small{
    font-size:9.5px !important;
  }

  body.jakPageHome #jakLiveSummary .jakLiveDivider{
    height:24px !important;
  }
}

/* DARK MODE */
html[data-jak-theme="dark"]
body.jakPageHome #jakLiveSummaryButton{
  background:
    linear-gradient(
      180deg,
      rgba(43,29,39,.98),
      rgba(34,23,31,.98)
    ) !important;

  border-color:rgba(255,168,216,.10) !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-jak-theme="dark"]
body.jakPageHome #jakLiveSummary .jakLiveMetric strong{
  color:#fff5fa !important;
}

html[data-jak-theme="dark"]
body.jakPageHome #jakLiveSummary .jakLiveMetric small{
  color:#bba3b1 !important;
}

html[data-jak-theme="dark"]
body.jakPageHome #jakLiveSummary .jakLiveDivider{
  background:linear-gradient(
    transparent,
    rgba(255,190,225,.14),
    transparent
  ) !important;
}