/* MBG366 Responsive Universal CSS */
/* Chrome, Safari, Android, iPhone, Tablet, Mobile Landscape */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
iframe {
  max-width: 100%;
}

:root {
  --mbg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mbg-safe-top: env(safe-area-inset-top, 0px);

  --mbg-mobile-padding: 12px;
  --mbg-popup-bottom-chrome: 80px;
  --mbg-popup-bottom-safari: 105px;
}

/* Desktop */
@media (min-width: 1025px) {
  .mbg-mobile-only,
  .mbg-apk-banner,
  #mbgWithdrawPopup {
    display: none !important;
  }

  .mbg-desktop-only {
    display: block !important;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .mbg-desktop-only {
    display: none !important;
  }

  .mbg-tablet-only {
    display: block !important;
  }

  .mbg-apk-banner,
  #mbgWithdrawPopup {
    display: none !important;
  }
}

/* Mobile Universal */
@media (max-width: 768px) {
  .mbg-desktop-only,
  .mbg-tablet-only {
    display: none !important;
  }

  .mbg-mobile-only {
    display: block !important;
  }

  body {
    width: 100%;
    min-width: 0;
  }

  .mbg-responsive-container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--mbg-mobile-padding);
    padding-right: var(--mbg-mobile-padding);
  }

  .mbg-full-mobile {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* APK Banner Responsive */
@media (max-width: 768px) {
  .mbg-apk-banner {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(56px, 14vw, 64px) !important;
    min-height: 56px !important;
  }

  .mbg-apk-logo {
    width: clamp(34px, 9vw, 40px) !important;
    height: clamp(34px, 9vw, 40px) !important;
    max-width: 40px !important;
    max-height: 40px !important;
    flex: 0 0 clamp(34px, 9vw, 40px) !important;
  }

  .mbg-apk-text {
    width: clamp(112px, 34vw, 138px) !important;
    flex: 0 0 clamp(112px, 34vw, 138px) !important;
  }

  .mbg-apk-title {
    font-size: clamp(10px, 3vw, 12px) !important;
  }

  .mbg-apk-subtitle {
    font-size: clamp(13px, 4vw, 16px) !important;
  }

  .mbg-apk-button {
    width: clamp(118px, 38vw, 150px) !important;
    height: clamp(34px, 9vw, 38px) !important;
    font-size: clamp(10px, 3vw, 12px) !important;
  }
}

/* Withdraw Popup Responsive */
@media (max-width: 768px) {
  #mbgWithdrawPopup {
    width: min(340px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    height: clamp(56px, 15vw, 60px) !important;
    left: 50% !important;
    bottom: calc(var(--mbg-popup-bottom-chrome) + var(--mbg-safe-bottom)) !important;
    transform: translateX(-50%) translateY(14px);
    pointer-events: none !important;
  }

  body.mbg-browser-safari #mbgWithdrawPopup {
    bottom: calc(var(--mbg-popup-bottom-safari) + var(--mbg-safe-bottom)) !important;
  }

  body.mbg-browser-chrome #mbgWithdrawPopup {
    bottom: calc(var(--mbg-popup-bottom-chrome) + var(--mbg-safe-bottom)) !important;
  }

  #mbgWithdrawPopup.mbg-wd-show {
    transform: translateX(-50%) translateY(0);
  }

  .mbg-wd-icon {
    width: clamp(38px, 10vw, 41px) !important;
    height: clamp(38px, 10vw, 41px) !important;
    flex: 0 0 clamp(38px, 10vw, 41px) !important;
  }

  .mbg-wd-coin {
    width: clamp(21px, 6vw, 23px) !important;
    height: clamp(21px, 6vw, 23px) !important;
    font-size: clamp(14px, 4vw, 16px) !important;
  }

  .mbg-wd-line1 {
    font-size: clamp(9.5px, 2.8vw, 10.5px) !important;
  }

  .mbg-wd-line2 {
    font-size: clamp(11px, 3.2vw, 12.5px) !important;
  }

  #mbgWdAmount {
    font-size: clamp(14px, 4.2vw, 16px) !important;
  }
}

/* HP kecil: 320px - 374px */
@media (max-width: 374px) {
  :root {
    --mbg-mobile-padding: 8px;
    --mbg-popup-bottom-chrome: 76px;
    --mbg-popup-bottom-safari: 98px;
  }

  .mbg-apk-logo {
    margin-left: 6px !important;
  }

  .mbg-apk-text {
    margin-left: 6px !important;
  }

  .mbg-apk-button {
    margin-right: 6px !important;
  }

  #mbgWithdrawPopup {
    padding: 6px 8px !important;
    gap: 7px !important;
  }
}

/* HP umum: 375px - 430px */
@media (min-width: 375px) and (max-width: 430px) {
  :root {
    --mbg-mobile-padding: 12px;
    --mbg-popup-bottom-chrome: 80px;
    --mbg-popup-bottom-safari: 105px;
  }
}

/* HP besar: 431px - 480px */
@media (min-width: 431px) and (max-width: 480px) {
  :root {
    --mbg-mobile-padding: 14px;
    --mbg-popup-bottom-chrome: 84px;
    --mbg-popup-bottom-safari: 110px;
  }

  #mbgWithdrawPopup {
    width: min(360px, calc(100vw - 28px)) !important;
  }
}

/* Tablet kecil: 481px - 768px */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --mbg-mobile-padding: 16px;
    --mbg-popup-bottom-chrome: 90px;
    --mbg-popup-bottom-safari: 112px;
  }

  #mbgWithdrawPopup {
    width: min(380px, calc(100vw - 32px)) !important;
  }
}

/* Mobile landscape */
@media (max-width: 768px) and (orientation: landscape) {
  .mbg-apk-banner {
    height: 52px !important;
  }

  #mbgWithdrawPopup {
    bottom: calc(64px + var(--mbg-safe-bottom)) !important;
    height: 54px !important;
  }

  body.mbg-browser-safari #mbgWithdrawPopup {
    bottom: calc(78px + var(--mbg-safe-bottom)) !important;
  }
}

/* Live chat open */
@media (max-width: 768px) {
  body.mbg-livechat-open #mbgWithdrawPopup {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}