/* DIG Floating Cart Modal
   - z-index tinggi biar ga ketutup WA
   - tombol posisinya "di atas" WA
*/

:root{
  --dig-fc-accent: #2dff6f;
  --dig-fc-bg: rgba(8,12,10,0.92);
  --dig-fc-line: rgba(45,255,111,0.22);
  --dig-fc-text: rgba(245,250,246,0.92);
  --dig-fc-muted: rgba(245,250,246,0.65);

  /* sesuaikan kalau WA kamu lebih tinggi/rendah */
  --dig-fc-fab-right: 22px;
  --dig-fc-fab-bottom: 110px; /* di atas tombol WA */
}

/* floating button */
.dig-fc-fab{
  position: fixed !important;
  right: var(--dig-fc-fab-right)!important;
  bottom: var(--dig-fc-fab-bottom)!important;
  width: 64px!important;
  height: 64px!important;
  border-radius: 999px!important;
  border: 1px solid rgba(45,255,111,0.35)!important;
  background: rgba(45,255,111,0.18)!important;
  color: var(--dig-fc-accent)!important;
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  cursor: pointer!important;
  z-index: 100000!important; /* > WA */
  box-shadow: 0 10px 30px rgba(0,0,0,0.35)!important;
}

.dig-fc-fab__icon{ display:flex!important; }
.dig-fc-fab:hover{ background: rgba(45,255,111,0.24)!important; }

.dig-fc-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--dig-fc-accent);
  color: #062012;
  font-weight: 900;
  font-size: 14px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(0,0,0,0.35);
}

/* modal */
.dig-fc-modal{
  position: fixed;
  inset: 0;
  z-index: 100001; /* above button */
  display: none;
}
.dig-fc-modal.is-open{ display: block; }

.dig-fc-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}

.dig-fc-modal__dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100vw - 28px));
  max-height: min(82vh, 820px);
  background: var(--dig-fc-bg);
  border: 1px solid var(--dig-fc-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0,0,0,0.55);
  color: var(--dig-fc-text);
}

/* header */
.dig-fc-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dig-fc-modal__title{
  font-size: 22px;
  font-weight: 900;
}
.dig-fc-modal__x{
  border-radius: 12px!important;
  border: 1px solid rgba(255,255,255,0.10)!important;
  background: rgba(255,255,255,0.03)!important;
  color: var(--dig-fc-text)!important;
  font-size: 22px!important;
  cursor:pointer!important;
}
.dig-fc-modal__x:hover{ border-color: rgba(45,255,111,0.35)!important; }

/* body scroll */
.dig-fc__body{
  padding: 14px 16px 16px;
  max-height: calc(min(82vh, 820px) - 74px);
  overflow: auto;
}

/* empty */
.dig-fc__empty{
  padding: 28px 10px;
  text-align: center;
}
.dig-fc__empty-title{
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 6px;
}
.dig-fc__empty-sub{
  color: var(--dig-fc-muted);
}

/* list */
.dig-fc__list{
  display: grid;
  gap: 12px;
}
.dig-fc__item{
  display: grid;
  grid-template-columns: 86px 1fr 40px;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.dig-fc__thumb{
  width: 86px;
  height: 86px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}
.dig-fc__thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.dig-fc__name a{
  color: var(--dig-fc-text);
  text-decoration: none;
  font-weight: 900;
  line-height: 1.25;
}
.dig-fc__name a:hover{ color: var(--dig-fc-accent); }

.dig-fc__row{
  margin-top: 8px;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.dig-fc__unit{ color: var(--dig-fc-muted); font-weight: 800; }

.dig-fc__line{
  margin-top: 8px;
  font-weight: 900;
  color: var(--dig-fc-accent);
}

/* qty */
.dig-fc__qty{
  height: 46px;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.dig-fc__qbtn{
  width: 46px !important;
  border: 0!important;
  background: transparent!important;
  color: var(--dig-fc-text)!important;
  font-size: 20px!important;
  cursor: pointer!important;
}
.dig-fc__qbtn:hover{ background: rgba(45,255,111,0.10)!important; }
.dig-fc__qinput{
  width: 60px !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: var(--dig-fc-text) !important;
  text-align: center !important;
}

/* remove */
.dig-fc__remove{
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.10)!important;
  background: rgba(255,255,255,0.03)!important;
  color: var(--dig-fc-text)!important;
  cursor:pointer!important;
  margin-top: 2px!important;
  display: flex !important;
  width: 44px!important;
  padding: 12px !important;
}
.dig-fc__remove:hover{ border-color: rgba(255,80,120,0.35)!important; }

/* footer */
.dig-fc__foot{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.dig-fc__totalrow{
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-weight: 900;
  font-size: 18px;
}
.dig-fc__totalrow span:first-child{ color: var(--dig-fc-muted); }
.dig-fc__total{ color: var(--dig-fc-text); }

.dig-fc__actions{
  margin-top: 12px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.dig-fc__btn2{
  height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 900;
}
.dig-fc__btn2-ghost{
  border: 1px solid rgba(45,255,111,0.35);
  background: rgba(255,255,255,0.03);
  color: var(--dig-fc-accent);
}
.dig-fc__btn2-solid{
  border: 1px solid rgba(45,255,111,0.70);
  background: var(--dig-fc-accent);
  color: #062012;
}

html.dig-fc-lock, html.dig-fc-lock body{
  overflow: hidden !important;
}

/* =========================
   LOADING OVERLAY (AJAX)
========================= */

/* pastikan pseudo element overlay bisa nempel */
.dig-fc-modal__dialog{
  position: absolute; /* already */
  isolation: isolate; /* biar z-index pseudo rapi */
}

/* saat loading: overlay gelap + spinner */
.dig-fc-modal__dialog.is-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.40);
  backdrop-filter: blur(2px);
  z-index: 5;
}

/* spinner */
.dig-fc-modal__dialog.is-loading::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3px solid rgba(245,250,246,0.25);
  border-top-color: var(--dig-fc-accent);
  transform: translate(-50%, -50%);
  animation: dig-fc-spin 0.75s linear infinite;
  z-index: 6;
}

@keyframes dig-fc-spin{
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* biar user ga spam klik saat loading */
.dig-fc-modal__dialog.is-loading .dig-fc__qty,
.dig-fc-modal__dialog.is-loading .dig-fc__remove{
  pointer-events: none !important;
  opacity: 0.65 !important;
}

/* tombol action (link) juga ikut nonaktif */
.dig-fc-modal__dialog.is-loading .dig-fc__btn2{
  pointer-events: none !important;
  opacity: 0.65 !important;
}


/* =========================
   REMOVE BUTTON (RED + OVERRIDE)
========================= */
.dig-fc__remove{
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  text-decoration: none !important;

  width: 44px !important;
  height: 44px !important;
  padding: 10px !important;
  margin-top: 2px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;
  border: 1px solid rgba(255, 77, 77, 0.65) !important;
  background: rgba(255, 77, 77, 0.12) !important;

  color: #ff4d4d !important;
  cursor: pointer !important;
  line-height: 0 !important;
}

.dig-fc__remove:hover{
  background: rgba(255, 77, 77, 0.18) !important;
  border-color: rgba(255, 77, 77, 0.85) !important;
}

.dig-fc__remove svg{
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  color: currentColor !important; /* pastikan svg ikut merah */
}