/* ============================================================
   Mobile Responsive — All user pages (320px – 767px)
   Full scroll, touch-friendly, no cut-off content
   ============================================================ */

@media screen and (max-width: 767px) {

  /* ---- Base: allow scroll on all inner pages ---- */
  html {
    height: auto !important;
    overflow-x: hidden;
  }

  body,
  body.login-page-body,
  body.signup-page,
  body.inner-page,
  body.wallet-page,
  body.win-history-page,
  body.add-bank-page,
  body.bid-history-page,
  body.support-page,
  body.withdraw-page,
  body.bid-page-body,
  body.chart-page {
    height: auto !important;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* iOS: fixed backgrounds cause jank / overflow bugs */
  body,
  body.login-page-body,
  body.signup-page,
  body.inner-page,
  body.wallet-page,
  body.win-history-page,
  body.add-bank-page,
  body.bid-history-page,
  body.support-page,
  body.withdraw-page,
  body.bid-page-body,
  body.chart-page {
    background-attachment: scroll !important;
  }

  /* ---- Page sections: never lock to viewport height ---- */
  .add-fund-page,
  .wallet-content.add-fund-page,
  .withdraw-content.add-fund-page,
  .win-history-content.add-fund-page {
    height: auto !important;
    min-height: auto !important;
    padding: 14px 10px calc(28px + env(safe-area-inset-bottom, 0)) !important;
  }

  section.profile,
  section.profile.mt-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
  }

  /* ---- Glass header bar ---- */
  .profile .top-header {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 12px 14px !important;
    min-height: 52px;
  }

  .profile .top-header > .d-flex {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .profile .top-header p,
  .profile .top-header .mb-0 {
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .profile .top-header a img,
  .profile .top-header .back-link img {
    width: 22px !important;
    flex-shrink: 0;
  }

  .profile .top-header img[src*="wallet"] {
    width: 20px !important;
  }

  /* Prevent 100vw header overflow scroll */
  .profile .container > .top-header:first-child {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ---- Containers ---- */
  .container,
  .container-fluid {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ---- Login / Signup ---- */
  .login.bl-login {
    padding: 16px 10px 28px !important;
  }

  .site-logo,
  .login-logo,
  .signup-logo {
    max-width: 150px !important;
  }

  .header-logo,
  .index-header-logo-img {
    max-width: 120px !important;
    max-height: 36px !important;
  }

  form#dataform {
    margin: 10px 6px !important;
    padding: 20px 14px !important;
    width: calc(100% - 12px);
    max-width: 100%;
    box-sizing: border-box;
  }

  .login__input,
  form#dataform .login__input,
  .login__input.form-control {
    font-size: 16px !important;
    padding: 14px 12px 14px 48px !important;
    margin-bottom: 12px !important;
    min-height: 48px;
    width: 100% !important;
    box-sizing: border-box;
  }

  form#dataform .form-group img.input-icon {
    height: 22px !important;
    width: 22px !important;
    left: 12px !important;
  }

  form#dataform .form-group img.hide-ch {
    right: 12px !important;
    left: auto !important;
    height: 22px !important;
  }

  .login__btn,
  .play-btn {
    min-height: 48px !important;
    font-size: 15px !important;
    width: 100% !important;
    padding: 12px 16px !important;
  }

  /* APK download buttons — stack full width */
  .login-apk-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 0 4px;
  }

  .login-apk-row .login-apk-item {
    width: 100%;
  }

  .login-apk-row .login-apk-item .login__btn {
    font-size: 13px !important;
    letter-spacing: 0.3px;
  }

  .form-bottom {
    padding: 0 12px 16px !important;
  }

  .form-bottom h4 {
    font-size: 14px !important;
  }

  .signup-page form#dataform .row > [class*="col-md-6"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* ---- Date filter rows: stack on narrow screens ---- */
  .add-fund-page .col-6.price,
  .bl-date .col-6.price,
  .wallet-content .col-6.price,
  .win-history-content .col-6.price {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px;
  }

  .add-fund-page div#nav-tabContent,
  .bl-date.tab-content {
    margin: 0 4px 12px !important;
    padding: 16px 12px !important;
    width: calc(100% - 8px);
    box-sizing: border-box;
  }

  .add-fund-page .price input,
  .add-fund-page .price input.date {
    font-size: 16px !important;
    padding: 12px 12px 12px 14px !important;
    min-height: 48px;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ---- Glass cards ---- */
  .bonus-box,
  .sub-box,
  .withdraw-box,
  .profile-container,
  .bh-card,
  .deposit-status-box,
  .support-page .support-card {
    margin-left: 6px !important;
    margin-right: 6px !important;
    width: calc(100% - 12px);
    max-width: 100%;
    box-sizing: border-box;
  }

  .bonus-box {
    flex-wrap: wrap;
    gap: 10px;
  }

  .bonus-box .right {
    width: 100%;
    text-align: right;
  }

  .sub-box,
  .sub-box.shadow-sm {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
  }

  .sub-box .bl-box {
    flex: 1;
    min-width: 0;
  }

  .sub-box p,
  .sub-box h5 {
    word-break: break-word;
    font-size: 13px !important;
  }

  /* ---- Bid history ---- */
  .bid-history-content {
    padding: 10px 10px 24px;
  }

  .bid-history-list-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .bh-summary {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }

  .bh-card-header {
    flex-wrap: wrap;
  }

  .bh-points-pill {
    font-size: 0.85rem;
  }

  .bh-number-chip {
    min-width: 56px;
    padding: 6px 10px;
  }

  .bh-number-value {
    font-size: 1rem;
  }

  /* ---- Win history ---- */
  .win-history-page .left-bx,
  .win-history-page .center-bx,
  .win-history-page .right-bx {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    margin-bottom: 4px;
  }

  .win-history-page .main-bx.bl {
    padding: 12px !important;
  }

  /* ---- Chart page ---- */
  .chart-page .page-heading h5 {
    font-size: 1rem !important;
    padding: 0 8px;
    word-break: break-word;
  }

  #listContainer {
    flex-direction: column !important;
    padding: 0 8px 24px !important;
    width: 100% !important;
  }

  #listContainer .group {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  .day-and-date {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }

  .item p {
    font-size: 13px !important;
    padding: 8px 2px !important;
  }

  /* ---- Bid page (see css/bid-page.css) ---- */
  .bid-page-body .bid-form-block select,
  .bid-page-body .bid-field .form-control {
    font-size: 16px !important;
  }

  /* ---- Add fund / payment ---- */
  #payment-by-barcode .container {
    max-width: 100% !important;
    padding: 0 8px !important;
  }

  #payment-by-barcode .fund-request-form {
    max-width: 100% !important;
    margin: 0 4px !important;
    padding: 18px 14px 28px !important;
  }

  #payment-by-barcode .fund-request-form .form-row-2 .form-group {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  #payment-by-barcode .fund-request-form .form-control {
    font-size: 16px !important;
    min-height: 48px;
  }

  .copy-text {
    max-width: 100% !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .copy-text .text {
    font-size: 14px !important;
    word-break: break-all;
    flex: 1;
    min-width: 0;
  }

  .barcode-img-wrapper img {
    width: 140px !important;
    height: 140px !important;
    max-width: 100%;
  }

  .price ul {
    flex-wrap: wrap;
    gap: 8px;
  }

  .price ul li {
    flex: 1 1 45%;
    min-width: 0;
  }

  .price ul li button {
    min-height: 44px;
    font-size: 14px !important;
  }

  .fill-amt input,
  .fill-amt input#amount-box,
  .fill-amt input#amount {
    font-size: 16px !important;
    min-height: 48px;
    padding-left: 44px !important;
  }

  /* ---- Withdraw ---- */
  .withdraw-methods ul {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 16px !important;
  }

  .withdraw-method-item {
    min-width: 56px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .withdraw-select,
  .price select {
    font-size: 16px !important;
    min-height: 48px;
  }

  .withdraw-note {
    margin: 12px 4px 0 !important;
  }

  /* ---- Add bank ---- */
  .add-bank-page .profile-container {
    margin: 12px 8px !important;
    padding: 18px 14px !important;
  }

  .add-bank-page .form-control {
    font-size: 16px !important;
    min-height: 48px;
  }

  /* ---- Support ---- */
  .support-content {
    padding: 12px 10px 24px;
  }

  .support-page .support-card {
    padding: 18px 14px 16px !important;
  }

  .support-page .support-btn {
    min-height: 54px;
    padding: 12px 14px !important;
  }

  .support-btn-value {
    font-size: 0.95rem;
  }

  /* ---- Deposit status ---- */
  .deposit-status-box .d-flex {
    flex-wrap: wrap;
    gap: 8px;
  }

  #depositListContainer .empty-msg {
    margin: 0 8px;
  }

  /* ---- Game rate ---- */
  .add-fund-page .container .bonus-box {
    margin-top: 10px !important;
  }

  /* ---- Wallet / withdraw history lists ---- */
  #listContainer:not(.bid-history-list-wrap) {
    padding: 0 8px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #listContainer:not(.bid-history-list-wrap) .sub-box {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #depositListContainer {
    padding: 0 8px 20px;
  }

  .text-white.text-center {
    padding: 0 12px;
    font-size: 14px;
  }

  /* ---- Modal ---- */
  .modal-dialog {
    margin: 12px auto !important;
    max-width: calc(100% - 24px) !important;
  }

  .modal-body .form-control {
    font-size: 16px !important;
    min-height: 48px;
  }

  .modal-footer .btn-success {
    min-height: 48px;
    width: 100%;
  }

  /* ---- Touch targets (links that are not full-width buttons) ---- */
  a.play-btn,
  a.login__btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* ---- Prevent zoom on iOS inputs ---- */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="date"],
  input[type="file"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ---- Images never overflow ---- */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ---- SweetAlert mobile ---- */
  .swal2-popup {
    width: 92% !important;
    max-width: 360px !important;
    padding: 16px !important;
  }

  .swal2-title {
    font-size: 1.1rem !important;
  }

  .swal2-html-container {
    font-size: 0.9rem !important;
  }
}

/* ---- Very small phones (≤ 380px) ---- */
@media screen and (max-width: 380px) {
  .profile .top-header p {
    font-size: 13px !important;
  }

  .login-logo,
  .signup-logo {
    max-width: 110px !important;
  }

  .login__btn {
    font-size: 13px !important;
    letter-spacing: 0.2px;
  }

  .bid-footer-stat strong {
    font-size: 0.95rem !important;
  }

  .bid-footer-stat span {
    font-size: 0.6rem !important;
  }

  .item p {
    font-size: 11px !important;
  }
}

/* ---- Landscape mobile ---- */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .login.bl-login {
    padding-top: 10px !important;
    padding-bottom: 16px !important;
  }

  .login-logo {
    max-width: 90px !important;
  }

  form#dataform {
    padding: 14px 12px !important;
  }

  .bid-page-body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0)) !important;
  }

  .bid-footer-bar {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0)) !important;
  }
}