@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(255, 0, 0, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

.live-badge {
  position: relative;
  background: #ff0000;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: pulse-red 2s infinite;
}

.live-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  display: inline-block;
}

.live-mini {
  transition: transform 0.2s;
}

.live-mini:active {
  transform: scale(0.95);
}

.bg-gold {
  background: linear-gradient(180deg, #ff4444 0%, #990000 100%);
}

.bottom-nav-item {
  opacity: 0.8;
  transition: all 0.3s ease;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
  opacity: 1;
  color: #ffd700 !important;
  transform: translateY(-2px);
}

.bottom-nav-item.active i {
  color: #ffd700 !important;
}

/* Pastikan konten tidak tertutup */
@media (max-width: 991px) {
  body {
    padding-bottom: 80px;
  }
}

.live-mini {
  height: 130px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.live-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

.live-mini-info {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  z-index: 2;
  font-size: 11px;
  color: #fff;
}

.live-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: red;
  color: #fff;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 2;
}

.winner-box {
  height: 120px;
  overflow: hidden;
  /* background: linear-gradient(
    90deg,
    rgb(0 0 0 / 21%) 0%,
    rgb(203 3 3) 50%,
    rgb(0 0 0 / 21%) 100%
  ); */
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image: linear-gradient(to right, transparent, #ff2222, transparent) 1;
  /* margin: 10px 0; */
  position: relative;
}

.winner-list {
  display: flex;
  flex-direction: column;
}

.scroll-anim {
  animation: tickerUp 200s linear infinite;
  /* Semakin besar detik, semakin lambat */
}

.winner-item {
  height: 25px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 11px;
  color: #fff;
  flex-shrink: 0;
}

.winner-item .user {
  color: #ff4444;
  font-weight: bold;
  width: 35%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.winner-item .status {
  color: #91ff00;
  font-style: italic;
  width: 35%;
  text-align: left;
}

.winner-item .amount {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  width: 30%;
  text-align: right;
}

@keyframes tickerUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

.marquee-container {
  width: 100%;
  overflow: hidden;
  background: #000;
  /* Warna background */
  /* border-top: 1px solid #ffe67c;
  border-bottom: 1px solid #ffe67c; */
  padding: 5px 0;
  white-space: nowrap;
  position: relative;
  display: flex;
}

.marquee-content {
  display: inline-flex;
  animation: scroll-left 20s linear infinite;
}

.marquee-content span {
  font-size: 10px;
  font-weight: bold;
  color: #ff4444;
  padding-right: 50px;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

.btn-container {
  display: flex;
  width: 100%;
  overflow: visible;
  background: transparent;
}

.text-jackpot {
  background: linear-gradient(
    135deg,
    #ffd700 0%,
    #ffa500 30%,
    #ffd700 50%,
    #ff8c00 70%,
    #ffd700 100%
  );
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.5),
    0 0 20px rgba(255, 215, 0, 0.3),
    2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: shine 3s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

.text-jackpot-amount {
  color: #ff0000;
  text-shadow:
    -1px -1px 0 gold,
    1px -1px 0 gold,
    -1px 1px 0 gold,
    1px 1px 0 gold;
  font-weight: bold;
  display: inline-block;
  will-change: transform;
  backface-visibility: hidden;
}

.link-alternatif {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}

.btn-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #292928 0%, #000 100%);
  border: 0.1px solid #ff4444;
  border-radius: 2px;
  padding: 8px 10px;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-apk {
  background: linear-gradient(90deg, #b20000 0%, #222 100%);
}

.social-wrapper {
  display: flex;
  gap: 6px;
}

.btn-social {
  flex: 1;
  justify-content: center;
}

.btn-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-social {
  width: 14px;
  height: 14px;
  color: #ff4444;
}

.btn-apk .icon-social {
  color: #fff;
}

.btn-label {
  font-size: 10px;
  color: #ff4444;
  font-weight: bold;
  text-transform: uppercase;
}

.btn-apk .btn-label {
  color: #fff;
}

.btn-url-box {
  font-size: 9px;
  font-weight: bold;
  color: #000;
  background: #ff2222;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  box-shadow: 0 0 5px rgba(255, 230, 124, 0.3);
}

.btn-alt:active {
  transform: scale(0.97);
}

.game-thumb {
  height: 70px !important;
}

.game-thumb img {
  height: 100% !important;
}

/* ── Mobile type bar (aw-prov-bar-wrap style) ── */
.main-menu-outer-container {}
.type-tab-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all .15s;
  margin: 0 4px;
}

.type-tab-arrow:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.type-item-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 10px 2px;
  min-width: 70px;
  max-width: 75px;
  flex: 0 0 auto;
  color: #fff;
  font-size: 10px;
  font-weight: 200;
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-bottom: 3px solid transparent;
  transition: all .15s;
  cursor: pointer;
}

.type-item-mobile:hover,
.type-item-mobile.type-active {
  background: rgba(204,0,0,.15);
  color: #ff4444;
  border-bottom-color: #cc0000;
}

.type-icon-mobile {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 3px;
}

.type-chevron-mobile {
  font-size: 8px;
  opacity: .4;
  transition: opacity .15s;
}

.type-item-mobile:hover .type-chevron-mobile,
.type-item-mobile.type-active .type-chevron-mobile {
  opacity: 1;
}

/* ── Mobile Jackpot ── */
.aw-jackpot-mobile { margin-top: 10px; }
.mjp-body {
  background: url(../assets/jackpot-mobile.webp) no-repeat;
  background-size: cover;
  border-radius: 8px;
  padding: 0px;
  margin-bottom: 5px;
}
.mjp-row {
  display: flex;
  flex-direction: column;
  color: #fff;
  gap: 6px;
}
.mjp-provider {
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  padding-left: 230px;
  margin-top: -10px !important;
}
.mjp-amount-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.mjp-currency {
  color: #fff;
  font-size: 22px;
  font-family: 'advanced_dot_digital7', monospace;
}
.mjp-amount {
  color: #fff !important;
  font-family: 'advanced_dot_digital7', monospace;
  font-size: 22px;
  margin-top: 30px;
}
@media (max-width: 320px) {
  .mjp-provider {
    font-size: 10px;
    padding-left: 145px;
    margin-top: 3px !important;
  }
  .mjp-currency { font-size: 20px; }
  .mjp-amount { font-size: 20px; margin-top: 0px; }
}
@media (min-width: 321px) and (max-width: 425px) {
  .mjp-provider {
    font-size: 15px;
    padding-left: 210px;
    margin-top: 2px !important;
  }
  .mjp-amount-wrap {
    margin-top: -13px;
  }
}
@media (min-width: 426px) and (max-width: 768px) {
  .mjp-provider {
    font-size: 15px;
    padding-left: 230px;
    margin-top: 6px !important;
  }
  .mjp-amount-wrap {
    margin-top: 0px;
  }
  .mjp-currency {
    font-size: 27px;
  }
  .mjp-amount {
    font-size: 27px;
    margin-top: 27px;
  }
}

/* ── Mobile Navbar ── */
.sidebar-toggle { padding: 4px; }
.sidebar-icon { width: 22px; display: flex; flex-direction: column; gap: 4px; }
.sidebar-icon .icon-bar { display: block; width: 100%; height: 2px; background: #fff; border-radius: 1px; }
.logoheader-mobile { height: 36px; display: block; object-fit: contain; }
.sidebar-menu-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: #fff; font-size: 13px; text-decoration: none; border-radius: 6px; margin-bottom: 2px; transition: background .15s; }
.sidebar-menu-item:hover { background: rgba(204,0,0,.15); color: #ff4444; }
.sidebar-menu-item.text-danger:hover { color: #ff4444 !important; }
.sidebar-type-icon { width: 20px; height: 20px; object-fit: contain; border-radius: 3px; }
.sidebar-type-item .fa-chevron-down { transition: transform .2s; }
.sidebar-type-item.sidebar-type-open .fa-chevron-down { transform: rotate(180deg); }
.sidebar-provider-list { padding-left: 40px; border-left: 1px solid rgba(255,34,34,.3); margin-left: 16px; }
.sidebar-provider-item { display: block; padding: 7px 10px; color: #ccc; font-size: 12px; text-decoration: none; border-radius: 4px; }
.sidebar-provider-item:hover { background: rgba(204,0,0,.12); color: #ff4444; }

/* Mobile Offcanvas Sidebar */
.offcanvas-start { width: 85vw; max-width: 360px; }
.offcanvas-body { overflow-y: auto; }

/* ── Mobile Live Section ── */
.aw-duo-mobile {
  margin: 0 0 10px;
}
.aw-duo-mobile .aw-duo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: linear-gradient(to bottom, #242424 0%, #515151 46%, #242424 100%);
  border-radius: 4px;
  margin-bottom: 8px;
}
.aw-duo-mobile .aw-duo-head .text-gold {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.aw-duo-mobile .aw-duo-head .btn-register-skew {
  padding: 2px 8px;
  font-size: 10px;
  background: linear-gradient(180deg,#333,#111) !important;
  border-radius: 3px !important;
  clip-path: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  width: 100px;
  text-align: center;
}
.aw-duo-grid-mobile {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.aw-duo-grid-mobile::-webkit-scrollbar {
  display: none;
}
.aw-duo-grid-mobile > a {
  flex: 0 0 auto;
  width: 110px;
}
.aw-duo-mobile-sport {
  margin-top: 8px;
}
.aw-duo-mobile-sport .sp-scroll-box {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
.live-mini-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 2/3;
  background: rgba(255,255,255,0.03);
}
.live-mini-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.live-mini-card .live-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #cc0000;
  color: #fff;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 2;
}
.live-mini-card .live-mini-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 6px;
  font-size: 10px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  z-index: 2;
}

/* ── Login Modal ── */
.login-modal-content {
  background: linear-gradient(180deg, #1a0a0a 0%, #0d0d0d 100%);
  color: #fff;
  border: 2px solid rgba(204,0,0,0.5);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(204,0,0,0.2);
}
.login-modal-header {
  border-bottom: 1px solid rgba(204,0,0,0.3);
  padding: 14px 16px;
  background: rgba(204,0,0,0.08);
  border-radius: 10px 10px 0 0;
}
.login-label {
  font-size: 10px;
  color: #ff4444;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 3px;
  display: block;
}
.login-input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-size: 13px !important;
  height: 38px !important;
  border-radius: 6px !important;
}
.login-input:focus {
  border-color: #cc0000 !important;
  box-shadow: 0 0 8px rgba(204,0,0,0.2) !important;
}
.login-input::placeholder {
  color: rgba(255,255,255,0.3) !important;
}
.login-submit-btn {
  background: linear-gradient(-180deg, #cc0000 0%, #8b0000 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .2s;
  text-transform: uppercase;
}
.login-submit-btn:hover {
  background: linear-gradient(-180deg, #e60000 0%, #a00000 100%);
  box-shadow: 0 4px 15px rgba(204,0,0,0.4);
}

/* ── SweetAlert2 compact ── */
.swal-compact { padding: 1.2rem !important; width: 300px !important; font-family: 'Chakra Petch', sans-serif !important; background: #1a1a1a !important; color: #fff !important; border: 2px solid #cc0000; border-radius: 10px !important; }
.swal-title-compact { font-size: 15px !important; padding: 0 !important; margin: 0 !important; color: #ff4444 !important; }
.swal-html-compact { font-size: 12px !important; margin: 6px 0 !important; padding: 0 !important; line-height: 1.3 !important; color: #ddd !important; }
.swal-compact .swal2-confirm { background: linear-gradient(-180deg,#cc0000,#990000) !important; border-radius: 6px !important; font-family: 'Chakra Petch', sans-serif !important; font-size: 12px !important; padding: 6px 24px !important; }
.swal-compact .swal2-icon { margin: 8px auto 6px !important; }

/* ── Type Provider Header Badge ── */
.type-provider-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(204,0,0,.15), rgba(0,0,0,.6));
  border: 1px solid rgba(204,0,0,.3);
  border-radius: 8px;
  margin-bottom: 6px;
}
@media (max-width: 991.98px) {
  .type-provider-header {
    margin-top: 4rem;
  }
}
.type-badge {
  background: linear-gradient(-180deg, #cc0000, #990000);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.type-provider-type-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 3px;
}
.type-provider-sep {
  color: rgba(255,255,255,.25);
  font-size: 16px;
}
.type-provider-header-logo {
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
}
.type-provider-header-name {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Hot game mobile grid */
@media (max-width: 991px) {
  .aw-game-grid-mobile .aw-game-card {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1/1;
    background: rgba(255,255,255,0.03);
  }
  .aw-game-grid-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    min-height: auto;
    background: transparent;
    border: none;
    padding: 8px;
  }
  .aw-game-grid-mobile .aw-game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .aw-game-grid-mobile .aw-game-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .aw-game-grid-mobile .aw-game-card:hover img {
    transform: scale(1.12);
  }
  .aw-game-grid-mobile .aw-game-card:hover {
    outline: 2px solid #cc0000;
  }
}
.dash-sport-card{display:flex;align-items:center;gap:10px;padding:8px;background:#141414;border-radius:10px;margin-bottom:6px;text-decoration:none;border:1px solid #1e1e1e}
.dash-sport-card.is-live{border-color:#e63946}
.dash-sport-logos{display:flex;align-items:center;gap:4px;flex-shrink:0}
.dash-sport-logos img{width:28px;height:28px;object-fit:contain}
.dash-sport-sep{color:#333;font-size:10px}
.dash-sport-info{flex:1;overflow:hidden}
.dash-sport-title{color:#ccc;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-sport-league{color:#444;font-size:10px}
.dash-sport-score{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0}
.dash-sport-score span:first-child{color:#fff;font-size:14px;font-weight:700}
.dash-sport-score .live-dot{background:#e63946;color:#fff;font-size:9px;padding:1px 6px;border-radius:8px;font-weight:700}
.dash-sport-soon{color:#444;font-size:10px;flex-shrink:0}

/* ── Sport Live Page ── */
.sp-wrap{padding:12px 12px 80px;margin-top:65px !important}
.sp-filter{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;scrollbar-width:none}
.sp-filter::-webkit-scrollbar{display:none}
.sp-fbtn{flex-shrink:0;background:#2a2a29;color:#aaa;padding:5px 14px;border-radius:20px;font-size:12px;cursor:pointer;white-space:nowrap;border:none}
.sp-fbtn.active{background:#c1121f;color:#fff}
.sp-grid{display:flex;flex-direction:column;gap:10px}
.sp-skel{background:linear-gradient(90deg,#1a1a1a 25%,#2a2a29 50%,#1a1a1a 75%);background-size:200% 100%;animation:spShim 1.3s infinite;border-radius:14px;height:90px}
@keyframes spShim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sp-empty{text-align:center;padding:60px 0;color:rgba(255,255,255,.3);font-size:14px}
.sp-card{position:relative;background:linear-gradient(180deg,#1a1a1a,#0d0d0d);border:1px solid rgba(204,0,0,0.1);border-radius:12px;overflow:hidden;text-decoration:none;display:block;margin-bottom:4px;transition:all .2s}
.sp-card:hover{border-color:rgba(204,0,0,0.4);box-shadow:0 4px 16px rgba(204,0,0,0.1)}
.sp-card::before{content:'';position:absolute;left:-15px;top:-15px;width:90px;height:90px;background:rgba(204,0,0,.03);border-radius:50%;pointer-events:none}
.sp-card::after{content:'';position:absolute;right:-10px;bottom:-20px;width:70px;height:70px;background:rgba(204,0,0,.03);border-radius:50%;pointer-events:none}
.sp-card.is-live{border-color:rgba(204,0,0,.5)}
.sp-card.is-live::before{background:rgba(204,0,0,.06)}
.sp-card-header{display:flex;align-items:center;gap:8px;padding:10px 12px 6px;justify-content:space-between}
.sp-header-left{display:flex;align-items:center;gap:8px}
.sp-card-compact{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;gap:10px}
.sp-compact-left{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.sp-compact-name{font-size:13px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.sp-compact-meta{font-size:11px;color:#777}
.sp-compact-score{font-size:18px;font-weight:700;color:#fff;letter-spacing:2px}
.sp-badge-live{background:#c1121f;color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;animation:spBlink 1.5s infinite}
.sp-badge-upcoming{background:transparent;border:1px solid rgba(255,255,255,0.2);color:#aaa;font-size:10px;font-weight:600;padding:3px 10px;border-radius:20px}
@keyframes spBlink{0%,100%{opacity:1}50%{opacity:.6}}
.sp-card-league{font-size:11px;color:#999;font-weight:500}
.sp-card-body{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 12px;gap:6px}
.sp-team{display:flex;align-items:center;gap:8px;flex:1}
.sp-team.away{flex-direction:row-reverse;text-align:right}
.sp-team img{width:34px;height:34px;object-fit:contain;border-radius:50%;background:#111;padding:2px;flex-shrink:0;border:1px solid rgba(255,255,255,0.06)}
.sp-team-name{font-size:12px;color:#ddd;font-weight:600;line-height:1.2}
.sp-mid{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;min-width:85px}
.sp-time-box{border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:3px 8px;font-size:11px;color:#999;white-space:nowrap}
.sp-score-live{font-size:20px;font-weight:800;color:#ff4444;letter-spacing:3px}
.sp-watch-btn{background:linear-gradient(180deg,#cc0000,#990000);color:#fff;border:none;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px;flex-shrink:0;cursor:pointer;transition:all .15s}
.sp-watch-btn:hover{background:linear-gradient(180deg,#e60000,#b30000)}
.sp-watch-btn svg{width:11px;height:11px}

/* ── Live List Page ── */
.live-wrap{padding:12px 12px 80px}
.live-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:60px}
@media(min-width:480px){.live-grid{grid-template-columns:repeat(3,1fr)}}
.live-card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:9/14;background:#1a1a1a;display:block;text-decoration:none}
.live-card img.thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.live-card:active img.thumb{transform:scale(1.03)}
.live-card .grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.25) 0%,transparent 35%,transparent 55%,rgba(0,0,0,.85) 100%)}
.badge-live{position:absolute;top:9px;left:9px;background:#e63946;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.5px;display:flex;align-items:center;gap:4px}
.badge-live::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;animation:liveBlink 1.2s ease-in-out infinite}
@keyframes liveBlink{0%,100%{opacity:1}50%{opacity:.3}}
.viewer-badge{position:absolute;top:9px;right:9px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#fff;font-size:10px;padding:2px 7px;border-radius:20px;display:flex;align-items:center;gap:3px}
.card-bottom{position:absolute;bottom:0;left:0;right:0;padding:10px 10px 12px}
.host-name{color:#fff;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.host-meta{display:flex;align-items:center;gap:5px;margin-top:3px;color:rgba(255,255,255,.7);font-size:10px}
.flag-icon{font-size:13px}
.skel{border-radius:14px;aspect-ratio:9/14;background:linear-gradient(90deg,#1e1e1e 25%,#2a2a2a 50%,#1e1e1e 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.live-empty{grid-column:1/-1;text-align:center;padding:60px 0;color:rgba(255,255,255,.4);font-size:14px}
.load-more-wrap{grid-column:1/-1;display:flex;justify-content:center;padding:10px 0}
.load-spinner{width:28px;height:28px;border:2px solid rgba(255,255,255,.15);border-top-color:#e63946;border-radius:50%;animation:spinLoad .7s linear infinite}
@keyframes spinLoad{to{transform:rotate(360deg)}}

/* ===== PROMO PAGE ===== */
.promo-page{padding:10px 12px 24px}
@media(min-width:992px){.promo-page{padding:20px 24px 40px}}
.promo-hero{display:flex;flex-direction:column;gap:2px;padding:16px 4px 18px;text-align:center}
.promo-hero-title{color:#fff;font-size:18px;font-weight:800;letter-spacing:.5px}
.promo-hero-sub{color:rgba(255,255,255,.55);font-size:12px}
.promo-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:992px){.promo-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
.promo-card{background:#52080b;border:1px solid rgba(242,204,147,.18);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .2s,border-color .2s;display:flex;flex-direction:column}
.promo-card:active{transform:scale(.98)}
@media(hover:hover){.promo-card:hover{border-color:#ccc;transform:translateY(-2px)}}
.promo-card-img{width:100%;background:#3b090969;overflow:hidden}
.promo-card-img img{width:100%;height:100%;object-fit:contain;display:block}
.promo-card-body{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px}
.promo-card-title{color:#fff;font-size:13px;font-weight:700;margin:0;line-height:1.35}
.promo-card-cta{color:rgba(255,255,255,.6);font-size:11px;white-space:nowrap;display:flex;align-items:center;gap:4px}
.promo-card-cta i{font-size:9px}
.promo-empty{grid-column:1/-1;text-align:center;padding:50px 0;color:rgba(255,255,255,.4);font-size:13px}
.promo-modal-content{background:#52080b;color:#fff;border:1px solid rgba(242,204,147,.2)}
.promo-modal-content .modal-header{border-bottom:1px solid rgba(242,204,147,.15)}
.promo-modal-content .modal-title{color:#fff;font-size:15px}

/* ===== SALDO BAR (useraction-design1 style) ===== */
.saldo-bar{background:#52080b;border-bottom:1px solid rgba(242,204,147,.15)}
.saldo-actionarea{display:flex;flex:0 0 58%;max-width:58%}
.saldo-actionbtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px;text-decoration:none;color:rgba(255,255,255,.85);font-size:10px;font-weight:600;text-align:center;border-right:1px solid rgba(242,204,147,.12)}
.saldo-actionbtn:last-child{border-right:none}
.saldo-actionbtn:hover{color:#fff}
.saldo-actionbtn img,.saldo-actionbtn i{width:25px;height:25px;object-fit:contain;display:flex;align-items:center;justify-content:center;font-size:22px}
.saldo-actionbtn.active{color:#fff;background:rgba(242,204,147,.08)}
.saldo-infoarea{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:8px 10px;min-width:0}
.saldo-info{min-width:0;text-align:right}
.saldo-username{display:block;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saldo-credit{display:block;color:#fff;font-size:13px;font-weight:800;white-space:nowrap}
.saldo-refresh{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(242,204,147,.1);border:1px solid rgba(242,204,147,.3);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;text-decoration:none;transition:transform .3s}
.saldo-refresh:hover{color:#fff}
.saldo-refresh.spinning i{animation:saldo-spin .6s linear infinite}
@keyframes saldo-spin{to{transform:rotate(360deg)}}

/* ===== SUB-NAV TABS (deposit/withdraw/bank, akun/sandi/keluar) ===== */
.saldo-navtabs{background:#52080b}
.saldo-navtabs .saldo-actionbtn{border-right:1px solid rgba(242,204,147,.12);font-size:11px}
.saldo-navtabs .saldo-actionbtn img{width:16px;height:16px}
.saldo-navtabs .saldo-actionbtn i{font-size:16px;width:16px;height:16px}
.saldo-navtabs .saldo-actionbtn.active{background:linear-gradient(135deg,#fff,#ccc);color:#4a0a0f}
.saldo-navtabs .saldo-actionbtn.active img{filter:brightness(0) saturate(100%) !important}

/* ===== HISTORY PERMAINAN — FILTER & TOTAL ===== */
.history-filter{border-bottom:none}
.history-filter-label{color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;margin-bottom:2px;display:block}
.history-filter-input{background:#3b0909;border:1px solid rgba(242,204,147,.25);color:#fff;font-size:11px}
.history-filter-input:focus{background:#3b0909;border-color:#ccc;color:#fff;box-shadow:none}
.history-filter-input option{background:#3b0909;color:#fff}
.history-total-bar{display:flex;gap:1px;background:rgba(242,204,147,.15);margin-bottom:2px}
.history-total-bar>div{flex:1;background:#3b0909;padding:8px;text-align:center}
.history-total-bar span{display:block;color:rgba(255,255,255,.6);font-size:10px;text-transform:uppercase}
.history-total-bar b{display:block;color:#fff;font-size:14px;margin-top:2px}


.summary-result{background:#3b0909;color:#fff;font-size:12px}
.summary-result thead th{background:#2a0a0a;color:#fff;font-weight:600;font-size:11px;text-transform:uppercase;border-bottom:2px solid rgba(255,255,255,.15);padding:10px 8px}
.history-tabs{display:flex;border-bottom:2px solid #be0000 !important}
.history-tabs .btn-tab{flex:1;padding:10px 0;background:transparent;border:none;color:white !important;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid transparent;transition:all .15s}
.history-tabs .btn-tab.active{color:#ffffff !important;background:#be0000 !important;border-radius:0px}
.summary-result tbody td{border-bottom:1px solid rgba(255,255,255,.07);padding:8px;font-size:11px;color:#ccc;vertical-align:middle;background:#313130 !important}
.summary-result tbody tr.data-row{cursor:pointer;transition:background .15s}
.summary-result tbody tr.data-row:hover{background:rgba(255,255,255,.04)}
.summary-result tbody td.date-cell{color:#fff}
.summary-result tbody td .arrow-hist{color:#fff;font-size:9px;margin-right:4px}
.summary-result tbody td.num-cell{text-align:right;white-space:nowrap}
.summary-result tbody td.num-cell.positive{color:#6cff94}
.summary-result tbody td.num-cell.negative{color:#ff6b6b}
.summary-result tr.detail-prov{background:#3b0909;color:#fff;font-size:11px;font-weight:600}
.summary-result tr.detail-prov td{border-bottom:1px solid rgba(255,255,255,.12);padding:6px 8px 6px 20px}
.summary-result tr.detail-row td{font-size:10px;color:#bbb;padding:5px 8px 5px 36px;border-bottom:1px solid rgba(255,255,255,.03)}
.summary-result tfoot tr.grand-total-row td{background:#2a1010;color:#fff;font-weight:bold;border-top:2px solid rgba(255,255,255,.15);padding:10px 8px;font-size:12px}
.summary-result .nav-page{background:#2a0f0f;padding:6px 12px;border-top:1px solid rgba(242,204,147,.15)}
.summary-result .nav-page .pages{display:flex;justify-content:center;align-items:center;gap:8px}
.summary-result .nav-page .btn-page-prev,
.summary-result .nav-page .btn-page-next{background:#3b0909;color:#ccc;border:1px solid rgba(242,204,147,.25);padding:2px 10px;border-radius:4px;font-size:12px;cursor:pointer}
.summary-result .nav-page .btn-page-prev:hover,
.summary-result .nav-page .btn-page-next:hover{border-color:#fff;color:#fff}
.summary-result .nav-page .number-container{display:flex;gap:4px}
.summary-result .nav-page .page-num{padding:2px 8px;border-radius:4px;font-size:12px;cursor:pointer;color:#ccc;background:#2a0f0f;border:1px solid transparent}
.summary-result .nav-page .page-num.active{color:#fff;border-color:#fff;background:#3b0909}
.summary-result .nav-page .page-num:hover{color:#fff;border-color:rgba(242,204,147,.35)}
#contentContainer{background:#2a1010;border:1px solid rgba(255,255,255,0.12)}
.summary-result .nav-page .row.nav-page-container{display:flex;align-items:center;justify-content:center;gap:6px}
.summary-result .nav-page .col-12.pages{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.summary-result .sts .col-12.summary-timestamp{font-size:10px;color:#fff;text-align:center}
.summary-result .sts{background:#2a1010;padding:6px 12px;font-size:10px;color:#999}
.summary-result .sts .sts-time{color:#fff}
.arrow-hist{color:#fff;font-size:9px}

/* ===== WITHDRAW INFO BOX ===== */
.withdraw-info-box{background:rgba(255,255,255,.06);border:1px solid rgba(242,204,147,.2);border-radius:6px;padding:10px 12px;margin-bottom:10px}
.withdraw-info-box p{margin:0 0 6px 0}
.withdraw-info-box ul{margin:0;padding-left:16px}
.withdraw-info-box li{margin-bottom:2px;line-height:1.4}

/* ===== SWALFIRE NOTIFICATION ===== */
.swalfire-popup {
    background: #1a1a1a !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    min-width: 280px !important;
    max-width: 360px !important;
    text-align: center !important;
}
.swalfire-msg {
    font-size: 13px !important;
    color: #fff !important;
    line-height: 1.5 !important;
    margin-top: 8px !important;
}
.swalfire-btn {
    background: #cc0000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 24px !important;
    min-width: 60px !important;
    cursor: pointer !important;
}
.swal2-timer-progress-bar {
    background: #f2cca4 !important;
}

/* ===== INVOICE MODAL — PG-STYLE ===== */
.invoice-modal .modal-content{border:none;border-radius:10px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.25);background:#fff}
.invoice-modal .modal-header{border-bottom:none;padding:0}
.invoice-modal .btn-close{filter:invert(0);opacity:.5;position:absolute;right:10px;top:10px;z-index:2}
.invoice-body{padding:0}
.inv-hd{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#700000;border-bottom:1px solid rgba(242,204,147,.2)}
.inv-hd-icon{width:36px;height:36px;flex-shrink:0}
.inv-hd-icon img{width:100%;height:100%;filter:brightness(0) saturate(100%) invert(1)}
.inv-hd-text{flex:1}
.inv-hd-title{display:block;color:#fff;font-size:13px;font-weight:700;line-height:1.2}
.inv-hd-sub{display:block;color:rgba(255,255,255,.55);font-size:10px;margin-top:1px}
.inv-card{background:#fafafa;border:1px solid #eee;border-radius:6px;padding:12px;margin:12px 16px}
.inv-bank-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.inv-bank-label{color:#999;font-size:10px}
.inv-bank-name{color:#222;font-size:12px;font-weight:700}
.inv-bank-icon{width:40px;height:24px;object-fit:contain}
.inv-qr-wrap{text-align:center}
.inv-qr-img{width:140px;height:140px;border-radius:4px}
.inv-qr-hint{color:#aaa;font-size:10px;margin:4px 0 0}
.inv-countdown{display:flex;align-items:center;justify-content:center;gap:4px;margin:6px 0;color:#e74c3c;font-size:10px;font-weight:600}
.inv-countdown span{background:#fff;border:1px solid #ddd;border-radius:3px;padding:1px 5px;font-size:11px;color:#222;min-width:22px;text-align:center}
.inv-btn-row{display:flex;gap:6px;margin-top:8px}
.inv-btn{flex:1;border:none;border-radius:4px;padding:8px;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;display:block}
.inv-btn-outline{background:#fff;border:1px solid #ddd;color:#888}
.inv-btn-solid{background:#f2cca4;color:#000}
.inv-detail{border-top:1px solid #eee;padding:12px 16px;margin-top:0}
.inv-detail-row{display:flex;justify-content:space-between;padding:5px 0;font-size:11px}
.inv-detail-row .lbl{color:#999}
.inv-detail-row .val{color:#333;font-weight:500;text-align:right;max-width:60%;word-break:break-all}
.inv-badge{font-size:9px;padding:2px 6px;border-radius:8px;font-weight:600;display:inline-flex;align-items:center;gap:3px}
.inv-badge-pending{background:#fff3cd;color:#856404}
.inv-badge-success{background:#d4edda;color:#155724}
.inv-badge-expired{background:#f8d7da;color:#721c24}
.inv-remarks{text-align:center;color:#aaa;font-size:10px;padding:8px 16px;border-top:1px solid #f0f0f0}
.inv-footer{background:#fafafa;border-top:1px solid #eee;padding:10px 16px;text-align:center;font-size:10px;color:#aaa}

/* Login modal logo (mobile) */
.login-modal-logo { height: 28px; max-width: 140px; object-fit: contain; }

/* Tawk.to mobile position - above footer */
@media (max-width: 768px) {
    iframe[title*="chat" i],
    iframe[src*="tawk.to"] {
        bottom: 70px !important;
    }
    #tawkchat-minified-wrapper,
    .tawk-min-container {
        bottom: 70px !important;
    }
}