/* Mobile UX fixes for babu88 user and ticket pages */

@media (max-width: 991px) {
  .is-user-route .babu88-user-page,
  .is-user-route .babu88-deposit,
  .is-user-route .babu88-page {
    padding-bottom: 74px;
  }

  .is-user-route .babu88-user-top-right .babu88-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    height: 40px;
    font-size: 14px;
  }

  .is-user-route .babu88-user-top-right .babu88-balance-pill {
    width: 100%;
    justify-content: center;
  }

  .is-user-route .babu88-user-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .is-user-route .babu88-user-nav::-webkit-scrollbar {
    display: none;
  }

  .is-user-route .babu88-user-nav a {
    flex: 0 0 auto;
  }

  .is-user-route .babu88-user-layout,
  .is-user-route .babu88-account-shell,
  .is-user-route .babu88-deposit-shell {
    grid-template-columns: 1fr !important;
  }

  .is-user-route .babu88-gateways {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .is-user-route .babu88-gateway {
    min-height: 64px;
    border-radius: 12px;
  }

  .is-user-route .babu88-gateway img {
    max-width: 62px;
    max-height: 34px;
  }

  .is-user-route .babu88-amount-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .is-user-route .babu88-amount-btn {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    font-size: 13px;
  }

  .is-user-route .babu88-channel-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .is-user-route .babu88-pill {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    font-size: 12px;
  }

  .is-user-route .babu88-input,
  .is-user-route .babu88-select-input {
    min-height: 44px;
    font-size: 16px;
  }

  .is-user-route .babu88-submit {
    min-height: 44px;
    font-size: 18px !important;
  }

  .is-user-route .babu88-deposit-shell [style*="font-size:48px"] {
    font-size: clamp(28px, 7vw, 34px) !important;
  }

  .is-user-route .babu88-deposit-shell [style*="font-size:36px"],
  .is-user-route .babu88-deposit-shell [style*="font-size:34px"],
  .is-user-route .babu88-deposit-shell [style*="font-size:32px"],
  .is-user-route .babu88-deposit-shell [style*="font-size:30px"] {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  .is-user-route .babu88-deposit-shell [style*="font-size:15px"],
  .is-user-route .babu88-deposit-shell [style*="font-size:16px"] {
    font-size: 13px !important;
  }

  .is-user-route .gateway-scroll {
    gap: 8px !important;
  }

  .is-user-route .gateway-box {
    min-width: 98px !important;
    height: 54px !important;
  }

  .is-user-route .credit-card {
    height: 172px !important;
  }

  .is-user-route .card-number-display {
    font-size: 20px !important;
    letter-spacing: 2px !important;
  }

  .is-user-route .pin-box {
    height: 46px !important;
    font-size: 18px !important;
  }

  .is-user-route .game--card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .is-user-route .game--card table {
    min-width: 640px;
  }
}

@media (max-width: 767px) {
  .is-user-route .container[style*="padding-top: 80px"] {
    padding-top: 70px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 20px !important;
  }

  .is-user-route .custom-tab-container,
  .is-ticket-route .custom-tab-container {
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: 12px !important;
    scrollbar-width: none;
  }

  .is-user-route .custom-tab-container::-webkit-scrollbar,
  .is-ticket-route .custom-tab-container::-webkit-scrollbar {
    display: none;
  }

  .is-user-route .custom-tab,
  .is-ticket-route .custom-tab {
    flex: 0 0 auto;
    min-width: 100px;
    font-size: 12px !important;
    padding: 8px 14px !important;
    white-space: nowrap;
  }

  .is-user-route .custom-transaction-card .p-3,
  .is-ticket-route .custom-transaction-card .p-3 {
    padding: 12px !important;
  }

  .is-user-route .icon-box,
  .is-ticket-route .icon-box {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }

  .is-user-route .gateway-title,
  .is-ticket-route .gateway-title {
    font-size: 13px !important;
  }

  .is-user-route .trx-id,
  .is-user-route .time-text,
  .is-ticket-route .trx-id,
  .is-ticket-route .time-text {
    font-size: 11px !important;
  }

  .is-user-route .amount-text,
  .is-ticket-route .amount-text {
    font-size: 14px !important;
  }

  .is-user-route .login-wrapper,
  .is-ticket-route .login-wrapper {
    max-width: 100% !important;
    padding-top: 8px !important;
  }

  .is-user-route .page-title,
  .is-ticket-route .page-title {
    font-size: 18px !important;
    margin-bottom: 16px !important;
  }

  .is-ticket-route .ticket-info {
    font-size: 12px !important;
    line-height: 1.4;
  }

  .is-ticket-route .reply-time {
    font-size: 11px !important;
  }
}

@media (max-width: 575px) {
  .is-user-route .babu88-auth-page {
    padding: 12px 10px;
  }

  .is-user-route .babu88-auth-card {
    padding: 14px;
    border-radius: 12px;
  }

  .is-user-route .babu88-auth-card h1 {
    font-size: 20px;
  }

  .is-user-route .babu88-auth-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .is-user-route .babu88-auth-submit {
    min-height: 42px;
  }

  .is-user-route .babu88-mobile-bottom-nav {
    min-height: 56px;
  }
}