.bms-mobile-page,
.bms-mobile-page * {
    box-sizing: border-box;
}

.bms-mobile-form {
    max-width: 100%;
}

/* Scoped to <img> only: applying height:auto to background-image preview
   divs (e.g. reseller shop logo/banner) collapses them to zero height. */
img.bms-media-preview {
    max-width: 100%;
    height: auto;
}

.bms-scroll-region {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .bms-mobile-page {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .bms-mobile-page .bms-mobile-gutter {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .bms-mobile-page .bms-mobile-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: .75rem;
    }

    .bms-mobile-page .bms-mobile-stack > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .bms-mobile-page :is(.form-control, .form-select, .btn) {
        min-height: 44px;
    }

    .bms-mobile-page .bms-mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .bms-mobile-page .bms-mobile-actions > *,
    .bms-mobile-page .bms-mobile-actions .btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    .bms-mobile-page .modal-dialog {
        max-width: calc(100vw - 2rem);
        margin-right: auto;
        margin-left: auto;
    }

    .bms-mobile-page .modal-body {
        max-height: calc(100dvh - 10rem);
        overflow-y: auto;
    }

    .auth-mobile-page {
        min-height: calc(100dvh - 4rem);
        padding: 1rem;
    }

    .auth-mobile-page .auth-mobile-row {
        margin: 0;
    }

    .auth-mobile-page .auth-form-panel {
        width: 100%;
        max-width: 34rem;
        padding: .75rem !important;
    }

    .auth-mobile-page .auth-branding img {
        max-width: min(15.625rem, 80vw);
        height: auto;
    }

    .auth-mobile-page .auth-registration-form {
        padding: .5rem 0 !important;
    }

    .auth-mobile-page .input-group,
    .auth-mobile-page .form-check,
    .auth-mobile-page .alert {
        width: 100%;
        text-align: left;
    }

    .auth-mobile-page .invalid-feedback {
        white-space: normal;
    }

    .registration-completion-page {
        padding: .75rem 0;
    }

    .registration-completion-page .card-body,
    .registration-completion-page .registration-step-body {
        padding: 1rem;
    }

    .registration-completion-page .merchant-grid {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    .registration-completion-page .merchant-actions form,
    .registration-completion-page .merchant-actions .btn {
        width: 100%;
    }

    .registration-completion-page .product-card,
    .registration-completion-page .variant-list {
        min-width: 0;
        max-width: 100%;
    }

    .registration-completion-page .variant-list .list-group-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .registration-completion-page .variant-price {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    :is(.reseller-business-page, .reseller-payment-page) .business-page-wrap,
    :is(.reseller-business-page, .reseller-payment-page) .payment-page-wrap {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .reseller-business-page .business-form-section,
    .reseller-business-page .co-owner-card,
    .reseller-payment-page .payment-form-section,
    .reseller-payment-page .bank-item {
        width: 100%;
        max-width: 100%;
        padding: .875rem;
        border: 1px solid #e5e7eb;
        border-radius: .5rem;
        background: #fff;
    }

    .reseller-business-page .co-owner-card + .co-owner-card,
    .reseller-payment-page .bank-item + .bank-item {
        margin-top: .75rem;
    }

    .reseller-business-page :is(.dropdown-menu, input, select, textarea),
    .reseller-payment-page :is(.dropdown-menu, input, select, textarea) {
        max-width: 100%;
        min-width: 0;
    }

    .reseller-payment-page .bank-header-row {
        display: none;
    }

    .reseller-payment-page .bank-item > [class*="col-"] {
        width: 100%;
        max-width: 100%;
    }

    .reseller-payment-page .bank-remove-button {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    :is(.reseller-profile-page, .reseller-team-profile, .reseller-store-profile-page) {
        padding-right: 0;
        padding-left: 0;
    }

    :is(.reseller-profile-page, .reseller-team-profile, .reseller-store-profile-page) .profile-page-wrap,
    :is(.reseller-profile-page, .reseller-team-profile, .reseller-store-profile-page) .profile-main-wrap,
    .reseller-store-profile-page .store-form-section {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    :is(.reseller-profile-page, .reseller-team-profile) #profileImage {
        width: 8.75rem !important;
        height: 8.75rem !important;
        object-fit: cover;
    }

    .reseller-store-profile-page .store-preview-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 1rem;
    }

    .reseller-store-profile-page :is(input[type="file"], .dropdown-menu) {
        width: 100% !important;
        max-width: 100% !important;
    }
}