/* MBG366 Withdraw Banner CSS - Easy Position Control */

/* SEMBUNYIKAN DI DESKTOP */
@media (min-width: 769px) {
  #withdrawBanner {
    display: none !important;
  }
}

/* TAMPIL DI MOBILE */
@media (max-width: 768px) {

  :root {
    /* ===============================
       ATUR POSISI DI SINI
       =============================== */

    /* Geser kiri/kanan */
    --withdraw-left: 50%;

    /* Jarak dari bawah layar */
    --withdraw-bottom: 68px;

    /* Ukuran banner */
    --withdraw-width: 360px;
    --withdraw-height: 58px;

    /* Kalau mau geser manual tambahan */
    --withdraw-x: -50%;
    --withdraw-y-hide: 18px;
    --withdraw-y-show: 0px;

    /* Besar kecil banner saat hide/show */
    --withdraw-scale-hide: 0.96;
    --withdraw-scale-show: 1;

    /* Z-index */
    --withdraw-zindex: 2147483500;
  }

  #withdrawBanner {
    position: fixed !important;

    left: var(--withdraw-left) !important;
    bottom: calc(var(--withdraw-bottom) + env(safe-area-inset-bottom, 0px)) !important;

    transform:
      translateX(var(--withdraw-x))
      translateY(var(--withdraw-y-hide))
      scale(var(--withdraw-scale-hide)) !important;

    width: min(var(--withdraw-width), calc(100vw - 34px)) !important;
    height: var(--withdraw-height) !important;

    z-index: var(--withdraw-zindex) !important;

    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;
    padding: 8px 12px !important;

    background: linear-gradient(100deg, #081c52 0%, #17105d 48%, #391094 100%) !important;
    border: 1px solid rgba(0, 216, 255, 0.95) !important;
    border-radius: 16px !important;

    box-shadow:
      0 0 10px rgba(0, 216, 255, 0.75),
      0 0 16px rgba(138, 43, 226, 0.65),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;

    font-family: Arial, Helvetica, sans-serif !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;

    transition:
      opacity 0.35s ease,
      visibility 0.35s ease,
      transform 0.35s ease !important;
  }

  #withdrawBanner.withdraw-banner-show {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
      translateX(var(--withdraw-x))
      translateY(var(--withdraw-y-show))
      scale(var(--withdraw-scale-show)) !important;
  }

  #withdrawBanner .withdraw-banner-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;

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

    border-radius: 12px !important;

    background: linear-gradient(180deg, #210073 0%, #080023 100%) !important;
    border: 1px solid #a84cff !important;

    box-shadow:
      0 0 8px rgba(168, 76, 255, 0.7),
      inset 0 0 8px rgba(0, 216, 255, 0.25) !important;
  }

  #withdrawBanner .withdraw-banner-icon span {
    width: 22px !important;
    height: 22px !important;

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

    border-radius: 50% !important;

    color: #00eaff !important;
    border: 2px solid #00eaff !important;

    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    text-shadow: 0 0 6px #00eaff !important;
    box-shadow: 0 0 8px rgba(0, 234, 255, 0.75) !important;
  }

  #withdrawBanner .withdraw-banner-content {
    margin-left: 10px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    overflow: hidden !important;
  }

  #withdrawBanner .withdraw-banner-line-one {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #withdrawBanner .withdraw-banner-check {
    color: #00f7ff !important;
    font-weight: 900 !important;
    text-shadow: 0 0 5px #00f7ff !important;
  }

  #withdrawBanner .withdraw-banner-user {
    color: #fff4a8 !important;
    font-weight: 900 !important;
  }

  #withdrawBanner .withdraw-banner-line-two {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #withdrawBanner .withdraw-banner-amount {
    color: #ff4dff !important;
    font-size: 16px !important;
    font-weight: 900 !important;

    text-shadow:
      0 0 4px #ff4dff,
      0 0 8px rgba(255, 77, 255, 0.85) !important;
  }
}