.payment-mobile-modal {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  
  &.pisell-lowcode-drawer-content-wrapper,
  .pisell-lowcode-drawer-content-wrapper,
  .ant-drawer-content-wrapper {
    max-width: none !important;
  }

  .pisell-lowcode-drawer-body,
  .ant-drawer-body {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .payment-mobile-modal-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
  }

  .payment-mobile-modal-header {
    padding: 8px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid #f2f4f7;
  }

  .payment-mobile-modal-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  .checkout-search-client-module {
    flex-direction: column;
    gap: 12px !important;

    > * {
      width: 100%;
    }

    .comprehensive-search__search-input-wrapper {
      height: 44px;
      padding: 4px 6px;
    }

    .comprehensive-search__camera-activator {
      gap: 4px;
      min-width: 70px;
    }

    .pisell-client-card {
      width: 100% !important;
      min-height: 52px !important;
      height: auto !important;
    }

    .pisell-client-card__content {
      width: 100%;
    }
  }

  .wallet-pass-module-container {
    margin-top: 8px;
  }

  .wallet-pass-module {
    margin-top: 0;
    gap: 12px;
  }

  .wallet-pass-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .wallet-pass-header-left,
  .wallet-pass-header-right {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .wallet-pass-header-right {
    justify-content: space-between;
  }

  .wallet-pass-module-customer-container {
    max-width: 100% !important;
  }

  .wallet-pass-card-display-container,
  .discount-wallet-list-container {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .amount-summary-container {
    min-height: 250px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
  }

  .amount-summary-module {
    .left-section {
      width: 100%;
      justify-content: space-between;
      gap: 8px;
    }

    .payment-button,
    .payment-button-with-dropdown,
    .payment-button-without-dropdown {
      min-width: 0;
      flex: 1;
      height: 56px;
      border-radius: 12px;
      padding: 8px 12px;
      font-size: 14px;
    }

    .button-text {
      font-size: 14px;
    }

    .arrow-icon {
      width: 20px;
      height: 20px;
    }

    .middle-section {
      width: 100%;
      gap: 6px;
    }

    .partial-paid-card {
      padding: 6px 10px;
    }

    .payment-detail-label,
    .payment-detail-amount,
    .partial-paid-label,
    .partial-paid-amount {
      font-size: 12px;
      line-height: 18px;
    }

    .balance-due-card {
      width: 100% !important;
      min-width: 0 !important;
      height: auto;
      min-height: 72px;
      padding: 12px 14px;
      border-radius: 12px;
    }

    .balance-due-info {
      min-width: 0;
      flex: 1;
    }

    .balance-due-label {
      font-size: 14px;
      line-height: 20px;
    }

    .balance-due-amount {
      font-size: 14px;
      line-height: 20px;
      word-break: break-all;
    }

    .pay-section {
      flex-shrink: 0;
      gap: 6px;
      min-width: 0;
    }

    .pay-text {
      margin-top: 0;
      font-size: 14px;
      line-height: 20px;
    }

    .pay-amount {
      max-width: 140px;
      font-size: 24px;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .edit-icon {
      margin-left: 4px;
    }
  }

  .confirm-payment-text,
  .confirm-button {
    width: 100%;
    flex: initial;
  }

  .split-payment-button,
  .cancel-split-payment-button {
    width: 68px;
    min-width: 68px;
    height: 72px;
    font-size: 12px;
  }

  .additional-module {
    .additional-module-button-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .additional-module-button-base {
      min-width: 0;
      width: 100%;
      padding-left: 10px;
      padding-right: 10px;
    }

    .additional-module-button-base.more-button {
      width: 100%;
      min-width: 0;
    }
  }
}