/*
 * Spark Rack ECP — mobile client readiness layer
 * Version 206.3.0
 *
 * This file deliberately affects the customer area in ordinary mobile browsers
 * as well as installed PWA mode. Desktop styling remains owned by the Spark Rack
 * ECP theme. The PWA-specific application chrome lives in pwa.css.
 */

@media (max-width: 900px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body:not(.sr-auth) {
        min-width: 0 !important;
    }

    body:not(.sr-auth) *,
    body:not(.sr-auth) *::before,
    body:not(.sr-auth) *::after {
        box-sizing: border-box;
    }

    body:not(.sr-auth) img,
    body:not(.sr-auth) svg,
    body:not(.sr-auth) video,
    body:not(.sr-auth) canvas,
    body:not(.sr-auth) iframe {
        max-width: 100%;
    }

    body:not(.sr-auth) pre,
    body:not(.sr-auth) code,
    body:not(.sr-auth) .sr-code,
    body:not(.sr-auth) .code,
    body:not(.sr-auth) .well pre {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    body:not(.sr-auth) a,
    body:not(.sr-auth) td,
    body:not(.sr-auth) th,
    body:not(.sr-auth) dd,
    body:not(.sr-auth) .sr-card,
    body:not(.sr-auth) .sr-panel,
    body:not(.sr-auth) .panel,
    body:not(.sr-auth) .card {
        overflow-wrap: anywhere;
    }

    /* Main customer shell. */
    body:not(.sr-auth) .sr-wrapper,
    body:not(.sr-auth) .sr-main,
    body:not(.sr-auth) .sr-content,
    body:not(.sr-auth) #main-body,
    body:not(.sr-auth) #main-body > .container,
    body:not(.sr-auth) .main-content,
    body:not(.sr-auth) .container,
    body:not(.sr-auth) .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body:not(.sr-auth) .sr-main,
    body:not(.sr-auth) .main-content {
        margin-left: 0;
    }

    body:not(.sr-auth) .sr-content,
    body:not(.sr-auth) #main-body,
    body:not(.sr-auth) .main-content {
        padding-left: clamp(12px, 3.5vw, 20px) !important;
        padding-right: clamp(12px, 3.5vw, 20px) !important;
    }

    body:not(.sr-auth) .row {
        margin-left: -6px;
        margin-right: -6px;
    }

    body:not(.sr-auth) [class*="col-xs-"],
    body:not(.sr-auth) [class*="col-sm-"],
    body:not(.sr-auth) [class*="col-md-"],
    body:not(.sr-auth) [class*="col-lg-"] {
        min-width: 0;
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Page headings and working bars. */
    body:not(.sr-auth) .sr-dashboard-head,
    body:not(.sr-auth) .sr-page-head,
    body:not(.sr-auth) .sr-page-header,
    body:not(.sr-auth) .sr-addon-header,
    body:not(.sr-auth) .sr-card-header,
    body:not(.sr-auth) .sr-panel-header,
    body:not(.sr-auth) .sr-thread-card > .sr-card-header,
    body:not(.sr-auth) .sr-actions,
    body:not(.sr-auth) .sr-form-actions,
    body:not(.sr-auth) .sr-v35-actions-between,
    body:not(.sr-auth) .sr-thread-header-actions,
    body:not(.sr-auth) .sr-toolbar,
    body:not(.sr-auth) .sr-v105-message-head-actions {
        min-width: 0;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    body:not(.sr-auth) .sr-page-title,
    body:not(.sr-auth) .sr-dashboard-head h1,
    body:not(.sr-auth) h1 {
        max-width: 100%;
        font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere;
    }

    body:not(.sr-auth) .sr-page-subtitle,
    body:not(.sr-auth) .sr-card-subtitle {
        max-width: 100%;
        line-height: 1.5;
    }

    /* Every major ECP grid gets a bounded tablet layout first. */
    body:not(.sr-auth) .sr-grid,
    body:not(.sr-auth) .sr-grid-2,
    body:not(.sr-auth) .sr-grid-3,
    body:not(.sr-auth) .sr-grid-4,
    body:not(.sr-auth) .sr-v35-grid-2,
    body:not(.sr-auth) .sr-v35-grid-3,
    body:not(.sr-auth) .sr-v35-grid-4,
    body:not(.sr-auth) .sr-v35-grid-aside,
    body:not(.sr-auth) .sr-v35-meta-grid,
    body:not(.sr-auth) .sr-card-grid,
    body:not(.sr-auth) .sr-dashboard-grid,
    body:not(.sr-auth) .sr-dashboard-panels,
    body:not(.sr-auth) .sr-service-grid,
    body:not(.sr-auth) .sr-domain-grid,
    body:not(.sr-auth) .sr-contact-grid,
    body:not(.sr-auth) .sr-account-grid,
    body:not(.sr-auth) .sr-resource-grid,
    body:not(.sr-auth) .sr-stat-grid,
    body:not(.sr-auth) .sr-summary-grid,
    body:not(.sr-auth) .sr-detail-grid,
    body:not(.sr-auth) .sr-bottom-grid,
    body:not(.sr-auth) .sr-totals-grid,
    body:not(.sr-auth) .sr-invoice-head,
    body:not(.sr-auth) .sr-message-layout,
    body:not(.sr-auth) .ecp-mc2-stats,
    body:not(.sr-auth) .sr-dpc-grid,
    body:not(.sr-auth) .sr-wsc-grid {
        min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body:not(.sr-auth) .sr-v35-panel,
    body:not(.sr-auth) .sr-card,
    body:not(.sr-auth) .sr-panel,
    body:not(.sr-auth) .panel,
    body:not(.sr-auth) .card,
    body:not(.sr-auth) .sr-v35-card-body,
    body:not(.sr-auth) .sr-card-pad,
    body:not(.sr-auth) .sr-v35-pad,
    body:not(.sr-auth) .sr-panel-body {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Forms: comfortable touch targets and no iOS focus zoom. */
    body:not(.sr-auth) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    body:not(.sr-auth) select,
    body:not(.sr-auth) textarea,
    body:not(.sr-auth) .form-control,
    body:not(.sr-auth) .selectize-input,
    body:not(.sr-auth) .select2-container,
    body:not(.sr-auth) .chosen-container,
    body:not(.sr-auth) .bootstrap-select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important;
    }

    body:not(.sr-auth) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    body:not(.sr-auth) select,
    body:not(.sr-auth) .form-control {
        min-height: 44px;
    }

    body:not(.sr-auth) textarea,
    body:not(.sr-auth) textarea.form-control {
        min-height: 112px;
        resize: vertical;
    }

    body:not(.sr-auth) .form-group,
    body:not(.sr-auth) .sr-field,
    body:not(.sr-auth) .sr-dpc-field,
    body:not(.sr-auth) .sr-wsc-field {
        min-width: 0;
        max-width: 100%;
    }

    body:not(.sr-auth) .form-inline,
    body:not(.sr-auth) .sr-inline-form {
        display: flex !important;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
    }

    body:not(.sr-auth) .form-inline .form-group,
    body:not(.sr-auth) .sr-inline-form .form-group {
        min-width: min(100%, 190px);
        flex: 1 1 190px;
    }

    body:not(.sr-auth) .btn,
    body:not(.sr-auth) .sr-btn,
    body:not(.sr-auth) .sr-dpc-btn,
    body:not(.sr-auth) .sr-wsc-btn,
    body:not(.sr-auth) button:not(.close):not(.sr-pwa-nav-item):not(.sr-pwa-icon-btn) {
        min-height: 42px;
        max-width: 100%;
        white-space: normal;
    }

    /* Tabs remain discoverable instead of wrapping into unreadable stacks. */
    body:not(.sr-auth) .nav-tabs,
    body:not(.sr-auth) .nav-pills,
    body:not(.sr-auth) .sr-tabs,
    body:not(.sr-auth) .sr-v35-tabs,
    body:not(.sr-auth) .sr-profile-tabs,
    body:not(.sr-auth) .sr-mobile-tabs,
    body:not(.sr-auth) .ecp-mc2-tabs {
        display: flex !important;
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }

    body:not(.sr-auth) .nav-tabs > li,
    body:not(.sr-auth) .nav-pills > li,
    body:not(.sr-auth) .sr-tabs > *,
    body:not(.sr-auth) .sr-v35-tabs > *,
    body:not(.sr-auth) .sr-profile-tabs > *,
    body:not(.sr-auth) .sr-mobile-tabs > *,
    body:not(.sr-auth) .ecp-mc2-tabs > * {
        float: none !important;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Tables: mobile JavaScript wraps these too; these rules cover native wrappers. */
    body:not(.sr-auth) .table-responsive,
    body:not(.sr-auth) .sr-table-wrap,
    body:not(.sr-auth) .sr-v35-table-wrap,
    body:not(.sr-auth) .dataTables_wrapper,
    body:not(.sr-auth) .sr-mobile-table-scroll {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body:not(.sr-auth) .table-responsive,
    body:not(.sr-auth) .sr-table-wrap,
    body:not(.sr-auth) .sr-v35-table-wrap,
    body:not(.sr-auth) .sr-mobile-table-scroll {
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    body:not(.sr-auth) .sr-mobile-table-scroll > table,
    body:not(.sr-auth) .table-responsive > table,
    body:not(.sr-auth) .sr-table-wrap > table,
    body:not(.sr-auth) .sr-v35-table-wrap > table {
        width: max-content;
        min-width: 100%;
        max-width: none;
    }

    body:not(.sr-auth) table th,
    body:not(.sr-auth) table td {
        vertical-align: top;
    }

    body:not(.sr-auth) table input,
    body:not(.sr-auth) table select,
    body:not(.sr-auth) table textarea {
        min-width: 150px;
    }

    /* DataTables controls should not squeeze each other. */
    body:not(.sr-auth) .dataTables_wrapper .row,
    body:not(.sr-auth) .dataTables_wrapper .dataTables_length,
    body:not(.sr-auth) .dataTables_wrapper .dataTables_filter,
    body:not(.sr-auth) .dataTables_wrapper .dataTables_info,
    body:not(.sr-auth) .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        min-width: 0;
        float: none !important;
        text-align: left !important;
    }

    body:not(.sr-auth) .dataTables_wrapper .dataTables_filter input {
        margin-left: 0 !important;
    }

    body:not(.sr-auth) .pagination {
        display: flex;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 3px;
    }

    /* Dialogs and module modals must fit the visible screen. */
    body:not(.sr-auth) .modal,
    body:not(.sr-auth) .sr-modal-backdrop,
    body:not(.sr-auth) [role="dialog"] {
        max-width: 100vw;
    }

    body:not(.sr-auth) .modal-dialog,
    body:not(.sr-auth) .sr-modal,
    body:not(.sr-auth) .sr-modal-dialog {
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        margin: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
    }

    body:not(.sr-auth) .modal-content,
    body:not(.sr-auth) .sr-modal-content {
        max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow: hidden;
    }

    body:not(.sr-auth) .modal-body,
    body:not(.sr-auth) .sr-modal-body {
        max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body:not(.sr-auth) .modal-footer,
    body:not(.sr-auth) .sr-modal-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Dashboard and service/domain cards. */
    body:not(.sr-auth) .sr-service-card,
    body:not(.sr-auth) .sr-domain-card,
    body:not(.sr-auth) .sr-check-card,
    body:not(.sr-auth) .sr-row-link,
    body:not(.sr-auth) .sr-v35-row,
    body:not(.sr-auth) .sr-list-stack > * {
        min-width: 0;
        max-width: 100%;
    }

    body:not(.sr-auth) .sr-row-link,
    body:not(.sr-auth) .sr-v35-row {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    body:not(.sr-auth) .sr-row-meta,
    body:not(.sr-auth) .sr-v35-row-meta,
    body:not(.sr-auth) .sr-v35-num {
        max-width: 100%;
    }

    /* Service detail and management module outputs. */
    body:not(.sr-auth) .sr-service-detail,
    body:not(.sr-auth) .sr-domain-detail,
    body:not(.sr-auth) .module-client-area,
    body:not(.sr-auth) .moduleoutput,
    body:not(.sr-auth) .module-output,
    body:not(.sr-auth) .sr-managed-output,
    body:not(.sr-auth) #tabOverview,
    body:not(.sr-auth) [id^="tab"] {
        min-width: 0;
        max-width: 100%;
    }

    /* Message Center: sidebar becomes a normal first block at mobile sizes. */
    body:not(.sr-auth) .sr-message-layout,
    body:not(.sr-auth) .sr-v105-message-center {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
    }

    body:not(.sr-auth) .sr-message-sidebar,
    body:not(.sr-auth) .sr-thread-card,
    body:not(.sr-auth) .sr-inbox-card,
    body:not(.sr-auth) .sr-rep-panel,
    body:not(.sr-auth) .sr-inbox-list,
    body:not(.sr-auth) .sr-thread-list {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body:not(.sr-auth) .sr-inbox-list {
        max-height: min(42dvh, 440px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.sr-auth) .sr-thread-message,
    body:not(.sr-auth) .sr-thread-reply,
    body:not(.sr-auth) .ticket-reply,
    body:not(.sr-auth) .ticket-reply.staff {
        min-width: 0;
        max-width: 100%;
    }

    body:not(.sr-auth) .sr-thread-message img,
    body:not(.sr-auth) .ticket-reply img {
        height: auto;
    }

    /* Invoice/document surfaces. */
    body:not(.sr-auth) .sr-invoice-wrap,
    body:not(.sr-auth) .sr-invoice-card,
    body:not(.sr-auth) .sr-invoice,
    body:not(.sr-auth) .invoice-container,
    body:not(.sr-auth) .invoice-container-fluid {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body:not(.sr-auth) .sr-invoice-head,
    body:not(.sr-auth) .sr-address-grid,
    body:not(.sr-auth) .sr-pay-panel,
    body:not(.sr-auth) .sr-totals-grid,
    body:not(.sr-auth) .sr-meta-grid,
    body:not(.sr-auth) .sr-bottom-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:not(.sr-auth) .sr-title,
    body:not(.sr-auth) .sr-meta,
    body:not(.sr-auth) .sr-balance-label,
    body:not(.sr-auth) .sr-balance-amount {
        text-align: left !important;
    }

    body:not(.sr-auth) .sr-pay-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Order/cart/checkout surfaces. */
    body:not(.sr-auth) .products,
    body:not(.sr-auth) .product,
    body:not(.sr-auth) .product-selector,
    body:not(.sr-auth) .product-configure,
    body:not(.sr-auth) .cart-body,
    body:not(.sr-auth) .cart-sidebar,
    body:not(.sr-auth) .order-summary,
    body:not(.sr-auth) .checkout,
    body:not(.sr-auth) .payment-form,
    body:not(.sr-auth) .gateway-output,
    body:not(.sr-auth) #order-standard_cart,
    body:not(.sr-auth) #order-standard_cart .products,
    body:not(.sr-auth) #order-standard_cart .product,
    body:not(.sr-auth) #order-standard_cart .cart-body,
    body:not(.sr-auth) #order-standard_cart .cart-sidebar {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body:not(.sr-auth) #order-standard_cart .row > [class*="col-"] {
        min-width: 0;
    }

    /* Public/support pages inside the client theme. */
    body:not(.sr-auth) .sr-public-clean-panel,
    body:not(.sr-auth) .sr-public-panel-head,
    body:not(.sr-auth) .kb-article-content,
    body:not(.sr-auth) .knowledgebase-content,
    body:not(.sr-auth) .announcement-content,
    body:not(.sr-auth) .download-content {
        min-width: 0;
        max-width: 100%;
    }

    /* Prevent fixed legacy widgets from competing with installed-app UI. */
    body.sr-pwa-standalone .back-to-top,
    body.sr-pwa-standalone #btnScrollToTop {
        bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 720px) {
    body:not(.sr-auth) .sr-grid,
    body:not(.sr-auth) .sr-grid-2,
    body:not(.sr-auth) .sr-grid-3,
    body:not(.sr-auth) .sr-grid-4,
    body:not(.sr-auth) .sr-v35-grid-2,
    body:not(.sr-auth) .sr-v35-grid-3,
    body:not(.sr-auth) .sr-v35-grid-4,
    body:not(.sr-auth) .sr-v35-grid-aside,
    body:not(.sr-auth) .sr-v35-meta-grid,
    body:not(.sr-auth) .sr-card-grid,
    body:not(.sr-auth) .sr-dashboard-grid,
    body:not(.sr-auth) .sr-dashboard-panels,
    body:not(.sr-auth) .sr-service-grid,
    body:not(.sr-auth) .sr-domain-grid,
    body:not(.sr-auth) .sr-contact-grid,
    body:not(.sr-auth) .sr-account-grid,
    body:not(.sr-auth) .sr-resource-grid,
    body:not(.sr-auth) .sr-stat-grid,
    body:not(.sr-auth) .sr-summary-grid,
    body:not(.sr-auth) .sr-detail-grid,
    body:not(.sr-auth) .sr-bottom-grid,
    body:not(.sr-auth) .sr-totals-grid,
    body:not(.sr-auth) .sr-invoice-head,
    body:not(.sr-auth) .ecp-mc2-stats,
    body:not(.sr-auth) .sr-dpc-grid,
    body:not(.sr-auth) .sr-wsc-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:not(.sr-auth) .sr-content,
    body:not(.sr-auth) #main-body,
    body:not(.sr-auth) .main-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body:not(.sr-auth) .sr-card,
    body:not(.sr-auth) .sr-panel,
    body:not(.sr-auth) .panel,
    body:not(.sr-auth) .sr-v35-panel {
        border-radius: 12px;
    }

    body:not(.sr-auth) .sr-card-header,
    body:not(.sr-auth) .sr-card-pad,
    body:not(.sr-auth) .sr-v35-card-body,
    body:not(.sr-auth) .sr-v35-pad,
    body:not(.sr-auth) .panel-heading,
    body:not(.sr-auth) .panel-body,
    body:not(.sr-auth) .panel-footer {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body:not(.sr-auth) .sr-actions,
    body:not(.sr-auth) .sr-form-actions,
    body:not(.sr-auth) .modal-footer,
    body:not(.sr-auth) .sr-modal-footer {
        align-items: stretch;
    }

    body:not(.sr-auth) .sr-actions > .btn,
    body:not(.sr-auth) .sr-actions > .sr-btn,
    body:not(.sr-auth) .sr-form-actions > .btn,
    body:not(.sr-auth) .sr-form-actions > .sr-btn,
    body:not(.sr-auth) .modal-footer > .btn,
    body:not(.sr-auth) .sr-modal-footer > .btn {
        flex: 1 1 150px;
    }

    body:not(.sr-auth) .dl-horizontal dt,
    body:not(.sr-auth) .dl-horizontal dd {
        float: none !important;
        width: auto !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    body:not(.sr-auth) .dl-horizontal dt {
        margin-top: 8px;
    }

    /* Authentication remains the ECP's branded auth shell in ordinary browsers. */
    body.sr-auth .sr-auth-login-form-panel {
        min-width: 0;
    }

    body.sr-auth input,
    body.sr-auth select,
    body.sr-auth textarea,
    body.sr-auth .form-control {
        font-size: 16px !important;
    }
}

@media (max-width: 520px) {
    body:not(.sr-auth) .btn,
    body:not(.sr-auth) .sr-btn,
    body:not(.sr-auth) .sr-dpc-btn,
    body:not(.sr-auth) .sr-wsc-btn {
        max-width: 100%;
    }

    body:not(.sr-auth) .sr-actions > *,
    body:not(.sr-auth) .sr-form-actions > * {
        min-width: 0;
    }

    body:not(.sr-auth) .sr-inline-form > .btn,
    body:not(.sr-auth) .form-inline > .btn,
    body:not(.sr-auth) .sr-inline-form > button,
    body:not(.sr-auth) .form-inline > button {
        flex: 1 1 100%;
    }

    body:not(.sr-auth) .sr-row-link,
    body:not(.sr-auth) .sr-v35-row {
        padding-left: 10px;
        padding-right: 10px;
    }

    body:not(.sr-auth) .modal-footer > .btn,
    body:not(.sr-auth) .sr-modal-footer > .btn {
        flex-basis: 100%;
    }
}


/* v206.1.0 — mobile document must remain the vertical scroll owner. */
@media (max-width: 900px) {
    body.sr-pwa-standalone.sr-pwa-mobile-device:not(.sr-pwa-blaze-open) .sr-wrapper,
    body.sr-pwa-standalone.sr-pwa-mobile-device:not(.sr-pwa-blaze-open) .sr-main,
    body.sr-pwa-standalone.sr-pwa-mobile-device:not(.sr-pwa-blaze-open) .sr-content,
    body.sr-pwa-standalone.sr-pwa-mobile-device:not(.sr-pwa-blaze-open) #main-body,
    body.sr-pwa-standalone.sr-pwa-mobile-device:not(.sr-pwa-blaze-open) .main-content {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
}


/* ============================================================
 * v206.3.0 — proactive mobile ECP containment
 *
 * Several late desktop rules use a 520px flex-basis and 12-column dashboard
 * grid. Once a hero becomes column-oriented on a phone, that desktop basis
 * becomes vertical height and the grid spans create implicit skinny columns.
 * Mobile explicitly owns those dimensions here.
 * ============================================================ */
@media (max-width: 900px) {
    body.sr-mobile-client .sr-pagehead,
    body.sr-mobile-client .sr-dashboard-head,
    body.sr-mobile-client .sr-v35-hero,
    body.sr-mobile-client .sr-v35-detail-hero,
    body.sr-mobile-client .sr-v36-detail-hero,
    body.sr-mobile-client .sr-v35-document-toolbar,
    body.sr-mobile-client .sr-v35-credit-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: max-content !important;
        align-items: start !important;
        align-content: start !important;
        justify-items: stretch !important;
        justify-content: start !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        gap: 12px !important;
        padding: 14px !important;
        margin-bottom: 12px !important;
    }

    body.sr-mobile-client .sr-pagehead > div:first-child,
    body.sr-mobile-client .sr-dashboard-head > div:first-child,
    body.sr-mobile-client .sr-v35-hero > div:first-child,
    body.sr-mobile-client .sr-v35-detail-hero > div:first-child,
    body.sr-mobile-client .sr-v36-detail-hero > div:first-child,
    body.sr-mobile-client .sr-v35-document-toolbar > div:first-child,
    body.sr-mobile-client .sr-v35-credit-hero > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: none !important;
    }

    body.sr-mobile-client .sr-page-actions,
    body.sr-mobile-client .sr-v35-hero-actions,
    body.sr-mobile-client .sr-v35-detail-actions,
    body.sr-mobile-client .sr-v35-document-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        gap: 8px !important;
        flex: none !important;
    }

    body.sr-mobile-client .sr-page-actions > *,
    body.sr-mobile-client .sr-v35-hero-actions > *,
    body.sr-mobile-client .sr-v35-detail-actions > *,
    body.sr-mobile-client .sr-v35-document-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Dashboard panels must be one real column. Never allow later desktop span
       rules to create implicit columns on a narrow viewport. */
    body.sr-mobile-client .sr-v35-board,
    body.sr-mobile-client .sr-v34-board,
    body.sr-mobile-client .sr-dashboard-panels {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 12px !important;
    }
    body.sr-mobile-client .sr-v35-span-4,
    body.sr-mobile-client .sr-v35-span-5,
    body.sr-mobile-client .sr-v35-span-6,
    body.sr-mobile-client .sr-v35-span-7,
    body.sr-mobile-client .sr-v35-span-8,
    body.sr-mobile-client .sr-v35-span-12,
    body.sr-mobile-client .sr-v34-span-4,
    body.sr-mobile-client .sr-v34-span-5,
    body.sr-mobile-client .sr-v34-span-6,
    body.sr-mobile-client .sr-v34-span-7,
    body.sr-mobile-client .sr-v34-span-8,
    body.sr-mobile-client .sr-v34-span-12 {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.sr-mobile-client .sr-v35-resource-grid,
    body.sr-mobile-client .sr-v40-services-grid,
    body.sr-mobile-client .sr-v40-domains-grid,
    body.sr-mobile-client .sr-v35-grid-aside,
    body.sr-mobile-client .sr-v36-grid-aside,
    body.sr-mobile-client .sr-v35-ticket-layout,
    body.sr-mobile-client .sr-message-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.sr-mobile-client .sr-v35-kpi-grid,
    body.sr-mobile-client .sr-v34-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* A late generic wrapping rule was turning invoice/date/currency values into
       one character per line. Keep data cells readable. */
    body.sr-mobile-client td,
    body.sr-mobile-client th {
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .sr-mobile-table-scroll {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-radius: 12px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .sr-mobile-table-scroll > table {
        min-width: 680px !important;
        width: max-content !important;
        max-width: none !important;
    }
}

/* Real mobile table presentation. JS adds data labels from each table's actual
   header, so invoice/history/module tables become readable cards instead of
   compressed desktop columns. */
@media (max-width: 720px) {
    body.sr-mobile-client table.sr-mobile-card-table,
    body.sr-mobile-client table.sr-mobile-card-table tbody,
    body.sr-mobile-client table.sr-mobile-card-table tr,
    body.sr-mobile-client table.sr-mobile-card-table td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body.sr-mobile-client table.sr-mobile-card-table thead {
        display: none !important;
    }
    body.sr-mobile-client table.sr-mobile-card-table {
        border: 0 !important;
        background: transparent !important;
    }
    body.sr-mobile-client table.sr-mobile-card-table tbody {
        display: grid !important;
        gap: 10px !important;
    }
    body.sr-mobile-client table.sr-mobile-card-table tr {
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid var(--sr134-border, #ddd6ce) !important;
        border-radius: 13px !important;
        background: var(--sr134-surface, #fff) !important;
        box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    }
    body.sr-mobile-client table.sr-mobile-card-table td {
        display: grid !important;
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 40px !important;
        padding: 7px 6px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(31,42,58,.08) !important;
        white-space: normal !important;
        text-align: left !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
    body.sr-mobile-client table.sr-mobile-card-table td:last-child {
        border-bottom: 0 !important;
    }
    body.sr-mobile-client table.sr-mobile-card-table td::before {
        content: attr(data-sr-label);
        color: var(--sr134-muted, #736b62);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .065em;
        text-transform: uppercase;
    }
    body.sr-mobile-client table.sr-mobile-card-table td:last-child .btn,
    body.sr-mobile-client table.sr-mobile-card-table td:last-child a.btn,
    body.sr-mobile-client table.sr-mobile-card-table td:last-child button {
        width: 100% !important;
    }

    body.sr-mobile-client .sr-page-actions,
    body.sr-mobile-client .sr-v35-hero-actions,
    body.sr-mobile-client .sr-v35-detail-actions,
    body.sr-mobile-client .sr-v35-document-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 380px) {
    body.sr-mobile-client .sr-v35-kpi-grid,
    body.sr-mobile-client .sr-v34-kpi-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ============================================================
 * v206.3.0 — exhaustive client-surface mobile adaptation
 *
 * This layer covers the secondary WHMCS/ECP surfaces that do not use the
 * common dashboard components: account/security, domain tools, support flow,
 * billing/payment documents, order/checkout, Spark Rack addons, ISPConfig3SR,
 * ProxmoxSR, website/security/portfolio tools, and dynamically rendered module
 * output. Runtime classes added by pwa.js provide a final containment safety
 * net for future pages without changing desktop presentation.
 * ============================================================ */
@media (max-width: 900px) {
    /* Universal runtime containment. */
    body.sr-mobile-client .sr-mobile-auto-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    body.sr-mobile-client .sr-mobile-auto-grid > * {
        grid-column: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    body.sr-mobile-client .sr-mobile-flex-wrap {
        flex-wrap: wrap !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    body.sr-mobile-client .sr-mobile-flex-wrap > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    body.sr-mobile-client .sr-mobile-height-reset {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: none !important;
        align-content: start !important;
    }
    body.sr-mobile-client .sr-mobile-overflow-safe {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    body.sr-mobile-client .sr-mobile-action-cluster {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    body.sr-mobile-client .sr-mobile-action-cluster > .btn,
    body.sr-mobile-client .sr-mobile-action-cluster > .sr-btn,
    body.sr-mobile-client .sr-mobile-action-cluster > button,
    body.sr-mobile-client .sr-mobile-action-cluster > a {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Bootstrap/legacy WHMCS columns: phone/tablet must never retain a forced
       desktop width merely because a page did not use a Spark Rack grid. */
    body.sr-mobile-client .row > [class*="col-md-"],
    body.sr-mobile-client .row > [class*="col-lg-"] {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    /* Generic definitions/details and old WHMCS responsive structures. */
    body.sr-mobile-client fieldset,
    body.sr-mobile-client .well,
    body.sr-mobile-client .list-group,
    body.sr-mobile-client .tab-content,
    body.sr-mobile-client .tab-pane,
    body.sr-mobile-client .panel-group,
    body.sr-mobile-client .client-home-panels,
    body.sr-mobile-client .client-home-cards,
    body.sr-mobile-client .tiles,
    body.sr-mobile-client .tile,
    body.sr-mobile-client .summary-container,
    body.sr-mobile-client .product-details,
    body.sr-mobile-client .domain-details {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.sr-mobile-client .input-group,
    body.sr-mobile-client .input-group-addon,
    body.sr-mobile-client .input-group-btn {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    body.sr-mobile-client .input-group {
        width: 100% !important;
    }

    body.sr-mobile-client .breadcrumb {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 7px !important;
        min-width: 0 !important;
    }

    /* Common secondary Spark Rack grids/forms that were not in the first PWA
       pass. */
    body.sr-mobile-client .sr-form-row,
    body.sr-mobile-client .sr-check-row,
    body.sr-mobile-client .sr-order-row,
    body.sr-mobile-client .sr-password-row,
    body.sr-mobile-client .sr-modal-field-grid,
    body.sr-mobile-client .sr-modal-field-grid-3,
    body.sr-mobile-client .sr-v110-editor-grid,
    body.sr-mobile-client .sr-v110-editor-grid-3,
    body.sr-mobile-client .sr-v110-resource-grid,
    body.sr-mobile-client .sr-v120-rule-grid,
    body.sr-mobile-client .sr-v39-usage-grid,
    body.sr-mobile-client .sr-v35-check-grid,
    body.sr-mobile-client .sr-auth-grid-2,
    body.sr-mobile-client .sr-info-grid,
    body.sr-mobile-client .sr-readonly-grid,
    body.sr-mobile-client .sr-timing-grid,
    body.sr-mobile-client .sr-dns-field-grid,
    body.sr-mobile-client .sr-overview-metric-grid,
    body.sr-mobile-client .sr-quick-grid,
    body.sr-mobile-client .sr-product-grid,
    body.sr-mobile-client .sr-product-grid-2,
    body.sr-mobile-client .sr-count-strip,
    body.sr-mobile-client .sr-count-strip-2 {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.sr-mobile-client .sr-card-head-inline,
    body.sr-mobile-client .sr-panel-head,
    body.sr-mobile-client .sr-section-heading,
    body.sr-mobile-client .sr-v110-action-row,
    body.sr-mobile-client .sr-v120-backup-actions,
    body.sr-mobile-client .sr-quick-actions-top,
    body.sr-mobile-client .sr-inline-row-form,
    body.sr-mobile-client .sr-inline-settings-form,
    body.sr-mobile-client .sr-card-actions-inline {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 8px !important;
    }

    /* Hosting Control / ISPConfig3SR exhaustive mobile ownership. */
    body.sr-mobile-client .sr-control-center-shell,
    body.sr-mobile-client .sr-control-center-workspace,
    body.sr-mobile-client .sr-overview-layout,
    body.sr-mobile-client .sr-dkim-layout,
    body.sr-mobile-client .sr-hosting-control-dashboard,
    body.sr-mobile-client .sr-control-center-hero,
    body.sr-mobile-client .sr-v39-form-card,
    body.sr-mobile-client .sr-v39-usage-card,
    body.sr-mobile-client .sr-v39-website-lead {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    body.sr-mobile-client .sr-control-center-sidebar,
    body.sr-mobile-client .sr-overview-main-card,
    body.sr-mobile-client .sr-quick-actions-card,
    body.sr-mobile-client .sr-settings-panel,
    body.sr-mobile-client .sr-inner-panel,
    body.sr-mobile-client .sr-product-panel,
    body.sr-mobile-client .sr-v110-resource,
    body.sr-mobile-client .sr-v110-subcard,
    body.sr-mobile-client .sr-usage-card,
    body.sr-mobile-client .sr-service-count-card,
    body.sr-mobile-client .sr-danger-zone {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        position: static !important;
    }
    body.sr-mobile-client .sr-hosting-product-tabs,
    body.sr-mobile-client .sr-inner-tabs,
    body.sr-mobile-client .sr-product-tabs,
    body.sr-mobile-client .sr-mailbox-tabs,
    body.sr-mobile-client .sr-v39-website-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    body.sr-mobile-client .sr-control-table,
    body.sr-mobile-client .sr-dns-table,
    body.sr-mobile-client .sr-php-config-table,
    body.sr-mobile-client .sr-service-target-table,
    body.sr-mobile-client .sr-v105-hostname-table {
        max-width: none !important;
    }
    body.sr-mobile-client .sr-dns-record-modal,
    body.sr-mobile-client .sr-mailbox-advanced-modal,
    body.sr-mobile-client .sr-v105-hostname-modal {
        max-width: calc(100vw - 20px) !important;
    }

    /* Domain Portfolio + Website Security addon dashboards. */
    body.sr-mobile-client .sr-dpc-grid,
    body.sr-mobile-client .sr-dpc-kpis,
    body.sr-mobile-client .sr-dpc-scope-grid,
    body.sr-mobile-client .sr-dpc-template-grid,
    body.sr-mobile-client .sr-wsc-grid,
    body.sr-mobile-client .sr-wsc-kpis,
    body.sr-mobile-client .sr-wsc-scope-grid,
    body.sr-mobile-client .sr-wsc-check-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    body.sr-mobile-client [class*="sr-dpc-span-"],
    body.sr-mobile-client [class*="sr-wsc-span-"] {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    body.sr-mobile-client .sr-dpc-hero,
    body.sr-mobile-client .sr-wsc-hero,
    body.sr-mobile-client .sr-dpc-toolbar,
    body.sr-mobile-client .sr-wsc-toolbar,
    body.sr-mobile-client .sr-dpc-actions,
    body.sr-mobile-client .sr-wsc-actions {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex-wrap: wrap !important;
    }
    body.sr-mobile-client .sr-dpc-table-wrap,
    body.sr-mobile-client .sr-wsc-table-wrap {
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Tax letters, users/permissions, account/security/payment-method pages. */
    body.sr-mobile-client .sr-tax-top-grid,
    body.sr-mobile-client .sr-tax-selectable-years,
    body.sr-mobile-client .sr-tax-selection-actions,
    body.sr-mobile-client .sr-v105-fieldset,
    body.sr-mobile-client .sr-v105-hostname-import-controls,
    body.sr-mobile-client .sr-v105-hostname-inventory,
    body.sr-mobile-client .sr-v105-hostname-tabs-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    body.sr-mobile-client .sr-tax-top-grid,
    body.sr-mobile-client .sr-v35-grid-aside {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body.sr-mobile-client .sr-tax-selection-actions,
    body.sr-mobile-client .sr-v105-row-actions,
    body.sr-mobile-client .sr-v105-hostname-row-actions,
    body.sr-mobile-client .sr-v105-danger-action {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Domain DNS/forwarding/private nameserver/bulk-management pages. */
    body.sr-mobile-client .sr-v105-hostname-import,
    body.sr-mobile-client .sr-v105-hostname-panel,
    body.sr-mobile-client .sr-v105-hostname-inventory-body,
    body.sr-mobile-client .sr-domain-tools,
    body.sr-mobile-client .domain-management,
    body.sr-mobile-client .bulk-domain-management {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Support flow / ticket details / feedback / KB / announcements. */
    body.sr-mobile-client .ticket-reply,
    body.sr-mobile-client .ticket-reply.staff,
    body.sr-mobile-client .ticket-reply.client,
    body.sr-mobile-client .ticket-details,
    body.sr-mobile-client .ticket-reply-submit,
    body.sr-mobile-client .kb-search,
    body.sr-mobile-client .kb-category,
    body.sr-mobile-client .kb-article,
    body.sr-mobile-client .announcement,
    body.sr-mobile-client .network-issue,
    body.sr-mobile-client .download-category {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Checkout/orderform: sidebar and configuration columns collapse into the
       normal document flow, regardless of which order sub-template is active. */
    body.sr-mobile-client #order-standard_cart .row > [class*="col-"],
    body.sr-mobile-client #order-sparkrack .row > [class*="col-"],
    body.sr-mobile-client .order-form .row > [class*="col-"],
    body.sr-mobile-client .cart-body,
    body.sr-mobile-client .cart-sidebar,
    body.sr-mobile-client .order-summary,
    body.sr-mobile-client .order-summary-container,
    body.sr-mobile-client .product-configure,
    body.sr-mobile-client .domain-selection-options,
    body.sr-mobile-client .domain-config-options,
    body.sr-mobile-client .checkout,
    body.sr-mobile-client .checkout-container,
    body.sr-mobile-client .payment-form,
    body.sr-mobile-client .gateway-output {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: static !important;
    }
    body.sr-mobile-client .cart-sidebar,
    body.sr-mobile-client .order-summary,
    body.sr-mobile-client .order-summary-container {
        top: auto !important;
    }

    /* Third-party/module output must be constrained even when it does not use
       Spark Rack class names. */
    body.sr-mobile-client .module-client-area > *,
    body.sr-mobile-client .moduleoutput > *,
    body.sr-mobile-client .module-output > *,
    body.sr-mobile-client [data-module-client-area] > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 720px) {
    body.sr-mobile-client .row > [class*="col-xs-"],
    body.sr-mobile-client .row > [class*="col-sm-"],
    body.sr-mobile-client .row > [class*="col-md-"],
    body.sr-mobile-client .row > [class*="col-lg-"] {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    body.sr-mobile-client .input-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    body.sr-mobile-client .input-group > .form-control,
    body.sr-mobile-client .input-group > input,
    body.sr-mobile-client .input-group > select,
    body.sr-mobile-client .input-group-btn,
    body.sr-mobile-client .input-group-addon {
        width: 100% !important;
        display: block !important;
        border-radius: 8px !important;
    }

    body.sr-mobile-client .btn-group:not(.sr-pwa-actions),
    body.sr-mobile-client .btn-group-vertical {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 6px !important;
    }
    body.sr-mobile-client .btn-group:not(.sr-pwa-actions) > .btn,
    body.sr-mobile-client .btn-group-vertical > .btn {
        flex: 1 1 140px !important;
        margin-left: 0 !important;
        border-radius: 8px !important;
    }

    body.sr-mobile-client .sr-control-center-sidebar {
        padding: 10px !important;
    }

    body.sr-mobile-client .sr-dpc-hide-mobile,
    body.sr-mobile-client .sr-wsc-hide-mobile {
        display: none !important;
    }
}

@media (max-width: 900px) {
    /* Customer Assistant full-page surface and Share Your Experience addon. */
    body.sr-mobile-client .sra-page,
    body.sr-mobile-client .sra-page-frame,
    body.sr-mobile-client .sra-page-card,
    body.sr-mobile-client .sra-page-head,
    body.sr-mobile-client .sr-testimonial-page,
    body.sr-mobile-client .sr-testimonial-card,
    body.sr-mobile-client .sr-testimonial-form,
    body.sr-mobile-client .sr-testimonial-actions,
    body.sr-mobile-client .sr-testimonial-meta {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    body.sr-mobile-client .sra-page-head,
    body.sr-mobile-client .sr-testimonial-actions,
    body.sr-mobile-client .sr-testimonial-meta {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}