/*
 * Additive responsive layer for the Hisense Razor Pages application.
 *
 * This file intentionally overrides existing theme and page styles without
 * removing them. The app currently reloads portions of the theme from some
 * Razor pages, so selectors here are deliberately scoped and specific.
 */

/* Shared resilience ------------------------------------------------------- */

html,
body {
    max-width: 100%;
}

html body img,
html body svg {
    max-width: 100%;
}

html body .row > [class*="col-"],
html body .d-flex > * {
    min-width: 0;
}

html body .table-responsive {
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

html body .table-responsive:focus-within {
    outline: 2px solid rgba(0, 170, 166, 0.35);
    outline-offset: 2px;
}

html body address,
html body .list-group-item,
html body .modal-body,
html body .warranty-row-details,
html body .company-info-text {
    overflow-wrap: anywhere;
}

/* Tablet and below -------------------------------------------------------- */

@media screen and (max-width: 991.98px) {
    html body .main-content.px-5 {
        padding-right: 2rem !important;
        padding-left: 2rem !important;
    }

    html body #registrationsTableWrapper > .d-flex,
    html body #distributorsPagination,
    html body .modal-footer.w-100 {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    html body #enrollmentsTable,
    html body #inner-invoice table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    html body #enrollmentsTable th,
    html body #enrollmentsTable td,
    html body #inner-invoice th,
    html body #inner-invoice td {
        min-width: max-content;
    }

    html body #mainContent .enrollments-card {
        max-width: 100%;
        overflow: hidden;
    }

    html body #mainContent #pagination,
    html body .pagination {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    html body .floating-panel {
        width: min(400px, calc(100vw - 2rem)) !important;
        max-width: calc(100vw - 2rem) !important;
    }
}

/* Phone foundation -------------------------------------------------------- */

@media screen and (max-width: 767.98px) {
    html body {
        display: flex;
        min-height: 100vh;
        min-height: 100dvh;
        margin-bottom: 0;
        flex-direction: column;
        font-size: 1rem !important;
    }

    html body > header + div {
        flex: 1 0 auto;
        min-width: 0;
    }

    html body > footer.footer {
        position: static;
        flex: 0 0 auto;
        width: 100%;
        min-height: 60px;
        margin-top: auto !important;
        padding-top: 1rem;
        padding-bottom: 1rem;
        white-space: normal;
        line-height: 1.5;
        text-align: center;
    }

    html body > footer.footer .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    /* Header */
    html body header.top-bar {
        min-height: 64px;
        padding: 0.5rem 0.75rem !important;
    }

    html body header.top-bar > .container {
        display: flex;
        width: 100%;
        max-width: none;
        padding: 0;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    html body header.top-bar > .container > .no-print {
        flex: 0 1 auto;
    }

    html body header.top-bar > .container > .no-print a {
        display: flex;
        min-height: 44px;
        align-items: center;
        line-height: 1 !important;
    }

    html body header.top-bar > .container > .no-print img {
        width: clamp(100px, 31vw, 120px);
        height: auto !important;
        margin-right: 0 !important;
    }

    html body header.top-bar .navbar-collapse {
        display: flex !important;
        min-width: 0;
        flex: 0 1 auto;
        justify-content: flex-end;
    }

    html body header.top-bar .navbar-nav {
        min-width: 0;
        flex-direction: row;
        align-items: center;
        gap: 0.15rem;
    }

    html body header.top-bar .nav-item {
        min-width: 0;
        margin-right: 0 !important;
    }

    html body header.top-bar .language-selector > a,
    html body header.top-bar .nav-item > a {
        display: inline-flex;
        min-height: 44px;
        padding: 0.25rem 0.35rem;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        line-height: 1.15;
        text-align: center;
    }

    html body header.top-bar .language-selector img {
        width: 22px !important;
        margin-right: 0.3rem !important;
        flex: 0 0 auto;
    }

    html body header.top-bar .language-selector span,
    html body header.top-bar .nav-item > a span {
        margin-right: 0 !important;
    }

    /* Hero and page shell */
    html body .hero-section-image .container,
    html body .confirmation-hero .container {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    html body .hero-section-image .display-5 {
        max-width: 100%;
        margin-bottom: 0.5rem;
        font-size: clamp(1.75rem, 7vw, 2.25rem);
        line-height: 1.12;
        overflow-wrap: break-word;
    }

    html body .hero-section-image p {
        margin-bottom: 0;
        font-size: 0.95rem;
        line-height: 1.45;
    }

    html body .main-content.px-5 {
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
    }

    html body .main-content > .container {
        max-width: none;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Cards and typography */
    html body .card {
        --ct-card-spacer-y: 1.25rem;
        --ct-card-spacer-x: 1.25rem;
        max-width: 100%;
    }

    html body .card-header,
    html body .card-footer {
        padding: 1rem 1.25rem;
    }

    html body .card-body {
        min-width: 0;
    }

    html body h1,
    html body h2,
    html body h3,
    html body h4,
    html body h5,
    html body h6 {
        overflow-wrap: break-word;
    }

    /* Touch and form sizing */
    html body .form-control:not(.form-control-sm),
    html body .form-select:not(.form-select-sm),
    html body .input-group > .btn:not(.btn-sm),
    html body button.btn:not(.btn-sm) {
        min-height: 44px;
    }

    html body .form-control,
    html body .form-select,
    html body .select2-container .select2-selection--single,
    html body .select2-container .select2-selection__rendered,
    html body input,
    html body textarea,
    html body select {
        max-width: 100%;
        font-size: 16px;
    }

    html body .form-check-input {
        min-width: 1.25rem;
        min-height: 1.25rem;
    }

    html body .form-check-label {
        margin-top: 0;
        line-height: 1.45;
    }

    html body .tab-pane .form-control,
    html body .tab-pane .form-select {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    html body .btn-hs,
    html body .btn-hs-primary,
    html body .btn-hs-secondary,
    html body .btn-hs-success,
    html body .btn-fancy {
        max-width: 100%;
        white-space: normal;
        line-height: 1.25;
    }

    /* Home announcement and account lookup */
    html body .announcement-band {
        display: grid !important;
        width: 100%;
        padding: 1rem !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start !important;
        gap: 0.75rem;
    }

    html body .announcement-band > i {
        margin-right: 0 !important;
    }

    html body .announcement-band > .me-3 {
        margin-right: 0 !important;
    }

    html body .announcement-band > .ms-auto {
        display: grid !important;
        width: 100%;
        margin-left: 0 !important;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem !important;
    }

    html body .announcement-band > .ms-auto > a {
        display: inline-flex;
        min-height: 44px;
        padding: 0.6rem 0.75rem;
        align-items: center;
        justify-content: center;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    html body #signInSection .home-sign-in-form,
    html body #signInSection .home-sign-in-form .form-control {
        width: 100%;
    }

    html body #signInSection #lookupButton {
        width: 100%;
    }

    html body #companyInfoCard .card-header,
    html body #registrationsTableWrapper > .d-flex,
    html body #registrationsTableWrapper .d-flex.align-items-center {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    html body #registrationsTableWrapper #startNewTopButton {
        min-height: 44px;
    }

    html body #registrationsTableWrapper #pageSizeSelect {
        min-width: 5rem;
    }

    /* Three-stage warranty registration */
    html body #registrationTabs {
        display: grid;
        width: 100%;
        margin: 0;
        padding: 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.25rem;
    }

    html body #registrationTabs .nav-item {
        width: auto !important;
        min-width: 0;
    }

    html body #registrationTabs .nav-link {
        display: flex;
        width: 100%;
        min-height: 76px;
        height: 100%;
        padding: 0.65rem 0.3rem;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
        font-size: 0.75rem;
        line-height: 1.2;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    html body #registrationTabs .nav-link .icon {
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
        object-fit: contain;
    }

    html body #contractorForm,
    html body #ownerForm,
    html body #equipmentForm,
    html body #contractorEnrollmentForm {
        width: 100%;
        max-width: 100%;
    }

    html body .owner-address-box {
        padding: 1rem;
    }

    /* Seven-stage contractor enrollment */
    html body #enrollStepper.stepper-container {
        display: flex;
        width: 100%;
        padding: 0.5rem 0;
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center !important;
        justify-content: space-between;
        gap: 0.2rem;
        overflow: visible;
    }

    html body #enrollStepper .stepper-item {
        width: auto !important;
        min-width: 0;
        flex: 0 0 auto;
    }

    html body #enrollStepper .stepper-content {
        display: none;
    }

    html body #enrollStepper .stepper-circle {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
    }

    html body #enrollStepper .stepper-line {
        display: block;
        width: auto;
        min-width: 4px;
        margin: 0;
        flex: 1 1 auto;
    }

    html body #contractorEnrollmentForm .step-pane > h3,
    html body #contractorEnrollmentForm .step-pane > .section-title {
        font-size: 1.25rem;
        line-height: 1.25;
    }

    html body #contractorEnrollmentForm > .d-flex.justify-content-between {
        gap: 0.75rem;
    }

    html body #stepPrevBtn,
    html body #stepNextBtn,
    html body #submitBtn {
        min-width: 5.5rem;
    }

    html body #distributorSelectionAlert {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    html body #distributorSelectionAlert > [class*="col-"] {
        width: 100%;
        max-width: none;
        text-align: left !important;
    }

    html body #distributorSelectionAlert .btn {
        width: 100%;
        min-height: 44px;
    }

    html body .search-controls-container {
        padding: 1rem;
    }

    html body .segmented-control {
        flex-direction: column;
    }

    html body .segmented-option {
        min-height: 44px;
        border-right: 0;
        border-bottom: 1px solid #dee2e6;
        text-align: center;
    }

    html body .segmented-option:last-child {
        border-bottom: 0;
    }

    html body #distributorsPagination {
        flex-direction: column;
        align-items: stretch !important;
    }

    html body #distributorsPagination > * {
        width: 100%;
        text-align: center;
    }

    html body #distributorsPagination .pagination {
        justify-content: center;
    }

    html body #distributorsPagination #pageSizeSelect {
        width: 100% !important;
    }

    /* Confirmation */
    html body .confirmation-details-card .text-end {
        text-align: left !important;
    }

    html body .confirmation-details-card .btn-hs-primary {
        width: 100%;
    }

    html body .accordion-button {
        min-height: 44px;
        line-height: 1.35;
    }

    /* Thank-you / invoice */
    html body #inner-invoice .card-body > .d-flex.justify-content-between,
    html body .main-content .card-body.d-flex.align-items-center {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    html body #inner-invoice .card-body > .d-flex.justify-content-between img,
    html body .main-content .card-body.d-flex.align-items-center img {
        width: auto;
        max-width: 120px !important;
        height: auto;
    }

    html body #inner-invoice h3 {
        font-size: 1.25rem;
        line-height: 1.35;
    }

    html body #inner-invoice table {
        border-collapse: separate;
        border-spacing: 0;
        white-space: nowrap;
    }

    html body #inner-invoice table th,
    html body #inner-invoice table td {
        min-width: 7rem;
    }

    html body #inner-invoice table th:first-child,
    html body #inner-invoice table td:first-child {
        min-width: 4rem;
    }

    /* Admin surfaces */
    html body #mainContent > .container {
        max-width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    html body #mainContent .enrollments-card {
        padding: 1rem;
        border-radius: 0.75rem;
    }

    html body #mainContent .enrollments-header {
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }

    html body .floating-panel {
        position: fixed !important;
        top: 1rem !important;
        right: 1rem !important;
        bottom: 1rem !important;
        left: 1rem !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 2rem) !important;
        max-height: calc(100dvh - 2rem) !important;
        overflow: auto !important;
        overscroll-behavior: contain;
    }

    html body .alert.position-fixed,
    html body .toast-container {
        right: 1rem !important;
        left: 1rem !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html body .table-responsive,
    html body #enrollmentsTable,
    html body #inner-invoice table {
        box-shadow: inset -14px 0 12px -16px rgba(16, 58, 66, 0.55);
    }

    /* Modals */
    html body .modal-dialog,
    html body .modal-lg .modal-dialog {
        width: auto;
        max-width: calc(100% - 1.5rem);
        margin: 0.75rem;
    }

    html body .modal-dialog-centered {
        min-height: calc(100% - 1.5rem);
    }

    html body .modal-content.container {
        width: 100%;
        max-width: 100%;
    }

    html body .modal-header,
    html body .modal-body,
    html body .modal-footer {
        padding: 1rem;
    }

    html body .modal-header .modal-title {
        max-width: calc(100% - 3rem);
        font-size: 1.15rem;
        line-height: 1.3;
    }

    html body .modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    html body .modal-footer > *,
    html body .modal-footer > .d-flex,
    html body .modal-footer .btn {
        width: 100%;
        margin: 0 !important;
    }

    html body .modal-footer > .d-flex {
        flex-direction: column;
        gap: 0.5rem !important;
    }

    html body #info-language-modal .modal-body .d-flex.justify-content-around {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: 0.25rem;
    }

    html body #info-language-modal .language-option {
        display: flex;
        min-width: 0;
        min-height: 96px;
        margin: 0;
        padding: 0.5rem 0.25rem;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        border-radius: 0.5rem;
    }

    html body #info-language-modal .language-option p {
        margin-bottom: 0;
        font-size: 0.875rem;
        line-height: 1.3;
        overflow-wrap: break-word;
    }
}

/* Small phones ------------------------------------------------------------ */

@media screen and (max-width: 575.98px) {
    html body .main-content.px-5 {
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
    }

    html body .main-content > .container {
        padding-right: 0;
        padding-left: 0;
    }

    html body .card {
        --ct-card-spacer-y: 1rem;
        --ct-card-spacer-x: 1rem;
    }

    html body .card-header,
    html body .card-footer {
        padding: 0.875rem 1rem;
    }

    html body .announcement-band > .ms-auto {
        grid-template-columns: 1fr;
    }

    html body #companyInfoCard .card-header > *,
    html body #companyInfoCard .card-header .btn,
    html body #registrationsTableWrapper > .d-flex > * {
        width: 100%;
    }

    html body #registrationsTableWrapper > .d-flex,
    html body #registrationsTableWrapper .d-flex.align-items-center {
        align-items: stretch !important;
    }

    html body #registrationsTableWrapper #pageSizeSelect {
        width: 100% !important;
    }

    html body #registrationTabs .nav-link {
        min-height: 82px;
        padding-right: 0.2rem;
        padding-left: 0.2rem;
        font-size: 0.7rem;
    }

    html body .owner-address-box {
        padding: 0.875rem;
    }

    html body #contractorEnrollmentForm > .d-flex.justify-content-between {
        align-items: stretch !important;
    }

    html body #contractorEnrollmentForm > .d-flex.justify-content-between > .d-flex {
        flex: 1 1 auto;
    }

    html body #stepPrevBtn,
    html body #stepNextBtn,
    html body #submitBtn {
        min-width: 0;
        flex: 1 1 auto;
    }

    html body #mainContent .cw-toolbar,
    html body #mainContent .cw-list-card,
    html body #mainContent .cw-workspace-card {
        padding: 1rem;
        border-radius: 1rem;
    }

    html body #mainContent .cw-title {
        font-size: clamp(1.75rem, 10vw, 2.25rem);
    }

    html body #mainContent .cw-filter-actions,
    html body #mainContent .cw-card-head {
        flex-direction: column;
    }

    html body #mainContent .cw-filter-actions > *,
    html body #mainContent .cw-card-head > .btn,
    html body #mainContent .cw-mini-select-wrap {
        width: 100%;
    }

    html body #mainContent .cw-mini-select {
        width: 100%;
    }

    html body #mainContent .cw-result-top {
        flex-direction: column;
    }

    html body .password-modal,
    html body #passwordOverlay > .bg-white {
        width: calc(100vw - 2rem);
        max-width: 420px;
        padding: 1.25rem !important;
    }

    html body #passwordOverlay .input-group {
        flex-direction: column;
        gap: 0.5rem;
    }

    html body #passwordOverlay .input-group > .form-control,
    html body #passwordOverlay .input-group > .btn {
        width: 100%;
        margin: 0;
        border-radius: 0.375rem !important;
    }
}

/* Reference-informed polish: make choices and repeated units scan as distinct cards. */
@media screen and (max-width: 767.98px) {
    html body #equipmentForm > .row:first-child > .col-md-3:first-child .form-check {
        display: flex;
        min-height: 44px;
        margin-bottom: 0.5rem;
        padding: 0.5rem 0.625rem;
        align-items: center;
        border: 1px solid #d7dee5;
        border-radius: 0.625rem;
        background: #f8fafc;
        transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }

    html body #equipmentForm > .row:first-child > .col-md-3:first-child .form-check:has(.form-check-input:checked) {
        border-color: #00aaa6;
        background: rgba(0, 170, 166, 0.08);
        box-shadow: inset 0 0 0 1px rgba(0, 170, 166, 0.22);
    }

    html body #equipmentForm > .row:first-child > .col-md-3:first-child .form-check-input {
        float: none;
        flex: 0 0 auto;
        margin: 0 0.5rem 0 0;
    }

    html body #equipmentForm > .row:first-child > .col-md-3:first-child .form-check-label {
        min-width: 0;
        margin: 0;
        line-height: 1.25;
    }

}

/* Flow-specific mobile hardening ---------------------------------------- */

html body #equipmentForm .equipment-mobile-label {
    display: none;
}

@media screen and (max-width: 991.98px) {
    html body {
        display: flex;
        min-height: 100vh;
        min-height: 100dvh;
        margin-bottom: 0;
        flex-direction: column;
    }

    html body > header + div {
        min-width: 0;
        flex: 1 0 auto;
    }

    html body > footer.footer {
        position: static;
        width: 100%;
        height: auto;
        min-height: 60px;
        margin-top: auto !important;
        padding-block: 1rem;
        white-space: normal;
        line-height: 1.5;
        text-align: center;
    }

    html body .main-content > .container {
        padding-right: 0;
        padding-left: 0;
    }
}

@media screen and (max-width: 767.98px) {
    html body .main-content.px-5 {
        padding-right: max(16px, env(safe-area-inset-right)) !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
    }

    html body .modal-content {
        max-height: calc(100vh - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
        overflow: hidden;
    }

    html body .modal-body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    html body .btn-close,
    html body #registrationSearchClear {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    html body #equipmentForm .select2-container {
        width: 100% !important;
        max-width: 100%;
    }

    html body #equipmentForm .select2-selection--single {
        min-height: 44px;
    }

    html body #equipmentForm .select2-selection--single .select2-selection__rendered {
        line-height: 42px;
    }

    html body #equipmentForm .select2-selection--single .select2-selection__arrow {
        height: 42px;
    }

    html body #equipmentForm .serial-help-link {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        font-size: 0.875rem;
        white-space: normal;
    }

    html body #contractorEnrollmentForm .location-input {
        min-height: 44px;
        font-size: 1rem !important;
    }

    html body #distributorsTable {
        min-width: 680px;
    }

    html body #registrationModal .list-group-item > .d-flex {
        flex-wrap: wrap;
        align-items: flex-start !important;
    }

    html body #registrationModal .warranty-link-stack.me-2 {
        min-width: 0;
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
        flex: 1 1 100%;
    }

    html body #registrationModal .warranty-link-stack .warranty-link {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    html body #purchaseButton,
    html body #paymentOptionsContainer .btn {
        display: inline-flex;
        width: 100%;
        margin: 0.625rem 0 0 !important;
        align-items: center;
        justify-content: center;
        white-space: normal;
    }

    html body .hs-modal-content .text-center {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }
}

@supports selector(:has(*)) {
    @media screen and (max-width: 575.98px) {
        html body #enrollStepper.stepper-container {
            display: block;
            padding: 0.25rem 0;
            overflow: visible;
        }

        html body #enrollStepper .stepper-item:not(.active) {
            display: none;
        }

        html body #enrollStepper:not(:has(.stepper-item.active))
            .stepper-item[data-step="1"],
        html body #enrollStepper .stepper-item.active {
            --enroll-step-progress: 14.285%;
            display: grid;
            width: 100% !important;
            grid-template-columns: 32px minmax(0, 1fr);
            align-items: center;
            gap: 0.5rem;
        }

        html body #enrollStepper .stepper-item[data-step="2"].active {
            --enroll-step-progress: 28.571%;
        }

        html body #enrollStepper .stepper-item[data-step="3"].active {
            --enroll-step-progress: 42.857%;
        }

        html body #enrollStepper .stepper-item[data-step="4"].active {
            --enroll-step-progress: 57.143%;
        }

        html body #enrollStepper .stepper-item[data-step="5"].active {
            --enroll-step-progress: 71.429%;
        }

        html body #enrollStepper .stepper-item[data-step="6"].active {
            --enroll-step-progress: 85.714%;
        }

        html body #enrollStepper .stepper-item[data-step="7"].active {
            --enroll-step-progress: 100%;
        }

        html body #enrollStepper:not(:has(.stepper-item.active))
            .stepper-item[data-step="1"]::after,
        html body #enrollStepper .stepper-item.active::after {
            content: "";
            width: 100%;
            height: 4px;
            grid-column: 1 / -1;
            border-radius: 999px;
            background: linear-gradient(
                to right,
                #00aaa6 var(--enroll-step-progress),
                #dee2e6 var(--enroll-step-progress)
            );
        }

        html body #enrollStepper .stepper-line {
            display: none;
        }

        html body #enrollStepper .stepper-circle {
            width: 32px;
            height: 32px;
            flex-basis: 32px;
        }

        html body #enrollStepper:not(:has(.stepper-item.active))
            .stepper-item[data-step="1"] .stepper-content,
        html body #enrollStepper .stepper-item.active .stepper-content {
            display: block;
            min-width: 0;
            margin-left: 0;
        }

        html body #enrollStepper .stepper-title {
            font-size: 1rem;
            line-height: 1.25;
            white-space: normal;
            overflow-wrap: anywhere;
        }
    }
}

/* Unified equipment-card geometry from phones through tablets. */
@media screen and (max-width: 991.98px) {
    html body #equipmentForm > .row:nth-child(2) {
        display: none;
    }

    html body #equipmentForm .equipment-mobile-label {
        display: block;
        margin-bottom: 0.35rem;
        color: #657078;
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.3;
        text-align: left;
        overflow-wrap: anywhere;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits),
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] {
        display: grid;
        margin-right: 0;
        margin-bottom: 1rem !important;
        margin-left: 0;
        padding: 1rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        border: 1px solid rgba(101, 112, 120, 0.22);
        border-radius: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 8px rgba(20, 58, 82, 0.05);
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits)[style*="display: flex"],
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"][style*="display: flex"] {
        display: grid !important;
    }

    html body #equipmentInfoIndoorUnits {
        margin: 1rem 0 0;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body #equipmentInfoIndoorUnits > [id^="equipmentInfoIndoorUnit"] {
        background: #eef2f4 !important;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > [class*="col-"],
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > [class*="col-"] {
        width: auto !important;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :first-child,
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :first-child {
        display: flex;
        min-height: 40px;
        padding: 0.5rem 0.625rem;
        grid-column: 1 / -1;
        grid-row: 1;
        align-items: center;
        gap: 0.25rem;
        border-radius: 0.5rem;
        background: rgba(20, 58, 82, 0.07);
        color: #143a52;
        font-weight: 700;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :first-child > .equipment-mobile-label,
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :first-child > .equipment-mobile-label {
        display: none;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :nth-child(2),
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :nth-child(4),
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :nth-child(3),
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :nth-child(3) {
        display: flex;
        width: auto !important;
        min-height: 44px;
        padding: 0 !important;
        grid-column: 1 / -1;
        grid-row: 3;
        align-items: center;
        justify-self: start;
        gap: 0.5rem;
        border: 0 !important;
        border-radius: 0;
        background: transparent;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :nth-child(3) .equipment-mobile-label,
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :nth-child(3) .equipment-mobile-label {
        margin-bottom: 0;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :nth-child(3) .form-check,
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :nth-child(3) .form-check {
        display: flex;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :nth-child(3) .form-check-input,
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :nth-child(3) .form-check-input {
        float: none;
        margin: 0;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :nth-child(5),
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :nth-child(5) {
        grid-column: 1 / -1;
        grid-row: 4;
    }
}

@media screen and (max-width: 575.98px) {
    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits),
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.625rem;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :nth-child(2),
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :nth-child(4),
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :nth-child(4) {
        grid-column: 1;
        grid-row: 3;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :nth-child(3),
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :nth-child(3) {
        grid-column: 1;
        grid-row: 4;
    }

    html body #equipmentForm > [id^="equipmentInfo"]:not(#equipmentInfoIndoorUnits) > :nth-child(5),
    html body #equipmentInfoIndoorUnits > [id^="equipmentInfo"] > :nth-child(5) {
        grid-column: 1;
        grid-row: 5;
    }
}

/* Reported mobile-state refinements ------------------------------------- */

@media screen and (max-width: 767.98px) {
    /* Keep all three registration-step icons visible on light tabs. */
    html body #registrationTabs .nav-link:not(.active) .icon {
        filter: brightness(0) saturate(100%);
        opacity: 0.58;
    }

    html body #registrationTabs .nav-link.active .icon {
        filter: none;
        opacity: 1;
    }

    /* Results become labeled cards instead of a visually clipped table. */
    html body #registrationsTableWrapper {
        overflow: visible;
    }

    html body #registrationsTableWrapper #registrationsTable {
        display: block;
        width: 100%;
        min-width: 0;
        margin-top: 0.75rem;
        overflow: visible;
    }

    html body #registrationsTable thead,
    html body #registrationsTable tbody {
        display: block;
        width: 100%;
    }

    html body #registrationsTable thead {
        margin-bottom: 0.875rem;
    }

    html body #registrationsTable thead tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    html body #registrationsTable thead th {
        display: block;
        min-width: 0;
        padding: 0 !important;
        border: 0;
        background: transparent;
    }

    html body #registrationsTable thead th:nth-child(7),
    html body #registrationsTable thead th:nth-child(8) {
        display: none;
    }

    html body #registrationsTable thead th > .d-flex {
        min-height: 44px;
        padding: 0.5rem 0.625rem;
        justify-content: center;
        border: 1px solid rgba(101, 112, 120, 0.25);
        border-radius: 0.5rem;
        background: #f4f7fa;
        text-align: center;
        line-height: 1.2;
        white-space: normal;
    }

    html body #registrationsTable thead th.sorted > .d-flex {
        border-color: #00aaa6;
        background: rgba(0, 170, 166, 0.1);
    }

    html body #registrationsTable tbody {
        display: grid;
        gap: 0.75rem;
    }

    html body #registrationsTable tbody tr {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid rgba(101, 112, 120, 0.24);
        border-radius: 0.75rem;
        background: #fff;
        box-shadow: 0 3px 10px rgba(20, 58, 82, 0.06);
    }

    html body #registrationsTable tbody td {
        display: flex;
        min-width: 0;
        min-height: 68px;
        padding: 0.625rem !important;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0.25rem;
        border: 0;
        background: transparent;
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    html body #registrationsTable tbody td::before {
        content: attr(data-mobile-label);
        color: #657078;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    html body #registrationsTable tbody td:nth-child(6) {
        word-break: break-all;
    }

    html body #registrationsTable tbody td:nth-child(8) .btn {
        width: 100%;
        margin-top: auto;
        white-space: normal;
    }

    html body #registrationsTable tbody tr.responsive-table-message {
        display: block;
    }

    html body #registrationsTable tbody tr.responsive-table-message td {
        display: block;
        min-height: 0;
        text-align: center;
    }

    html body #registrationsTable tbody tr.responsive-table-message td::before {
        content: none;
    }
}

@media screen and (min-width: 576px) and (max-width: 767.98px) {
    html body #registrationTabs .nav-link {
        min-height: 64px;
        padding: 0.625rem;
        flex-direction: row;
        justify-content: center;
        gap: 0.5rem;
    }

    html body #equipmentForm > .row:first-child {
        display: grid;
        margin-right: 0;
        margin-left: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    html body #equipmentForm > .row:first-child > [class*="col-"] {
        width: auto;
        min-width: 0;
        padding: 0;
    }

    html body #equipmentForm > .row:first-child > [class*="col-"]:first-child {
        grid-row: 1 / span 2;
    }
}

@media screen and (max-width: 575.98px) {
    html body #registrationsTable thead tr,
    html body #registrationsTable tbody tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body #registrationsTable tbody td {
        min-height: 64px;
    }
}

/* Narrow-phone guardrail -------------------------------------------------- */

@media screen and (max-width: 359.98px) {
    html body header.top-bar {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    html body header.top-bar > .container {
        gap: 0.25rem;
    }

    html body header.top-bar > .container > .no-print img {
        width: 100px;
    }

    html body header.top-bar .language-selector > a,
    html body header.top-bar .nav-item > a {
        padding-right: 0.2rem;
        padding-left: 0.2rem;
        font-size: 0.75rem;
    }

    html body header.top-bar .language-selector img {
        width: 20px !important;
        margin-right: 0.2rem !important;
    }

    html body #enrollStepper.stepper-container {
        gap: 0.1rem;
    }

    html body #enrollStepper .stepper-circle {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
    }

    html body #enrollStepper .stepper-number {
        font-size: 0.68rem;
    }

    html body #registrationTabs .nav-link {
        font-size: 0.66rem;
    }
}

/* Preserve print-specific invoice behavior. */
@media print {
    html body {
        display: block;
        margin-bottom: 0;
    }

    html body #inner-invoice table {
        display: table;
        overflow: visible;
        white-space: normal;
        box-shadow: none;
    }
}

/* Post-verification hardening -------------------------------------------- */

@media screen and (max-width: 991.98px) {
    html body .form-control:not(.form-control-sm),
    html body .form-select:not(.form-select-sm),
    html body button.btn:not(.btn-sm),
    html body a.btn:not(.btn-sm),
    html body input.btn:not(.btn-sm) {
        min-height: 44px;
    }

    html body .form-control:not(.form-control-sm),
    html body .form-select:not(.form-select-sm) {
        font-size: 1rem;
    }

    html body #mainContent .cw-label-spacer {
        display: none;
    }

    html body #mainContent .cw-list {
        max-height: 34rem !important;
        max-height: min(56dvh, 34rem) !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    html body:has(input[name="searchTerm"]):has(th a.sort-link)
        .table-responsive > table {
        min-width: 68rem;
    }
}

html body #passwordOverlay {
    box-sizing: border-box;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh;
    padding:
        max(1rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    align-items: flex-start !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}

html body #passwordOverlay > .bg-white {
    width: min(26.25rem, 100%);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin-block: auto;
    overflow-y: auto;
}

html body #passwordOverlay .form-control,
html body #passwordOverlay .btn {
    min-height: 44px;
}

html body #passwordOverlay .form-control {
    min-width: 0;
    font-size: 1rem;
}

html body #mainContent .cw-input,
html body #mainContent .cw-select,
html body #mainContent .cw-mini-select {
    font-size: 1rem;
}

@media screen and (max-width: 767.98px) {
    html body #mainContent .form-control-sm,
    html body #mainContent .form-select-sm,
    html body #mainContent .btn-sm,
    html body #pagination .page-link {
        min-height: 44px;
    }

    html body #pagination .page-link {
        display: inline-grid;
        min-width: 44px;
        place-items: center;
    }

    html body #enrollmentsTable .details-toggle {
        display: inline-grid;
        width: 44px;
        height: 44px;
        place-items: center;
    }

    html body #enrollmentsTable .approve-enrollment-btn,
    html body #enrollmentsTable .ofac-approve-btn,
    html body #enrollmentsTable .rich-tip-trigger {
        min-height: 44px;
    }
}

@media screen and (max-width: 575.98px) {
    html body #mainContent .cw-tab,
    html body #mainContent .cw-toggle,
    html body #mainContent .cw-mini-select-wrap,
    html body #mainContent .cw-mini-select {
        min-height: 44px;
    }

    html body #mainContent .cw-result-name,
    html body #mainContent .cw-value,
    html body #mainContent .cw-pill,
    html body #mainContent #workspaceStatus {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }
}

/* Homepage concept refinements: compact account details and intentional result cards. */
@media screen and (max-width: 767.98px) {
    html body #companyInfoCard {
        overflow: hidden;
        border-radius: 0.875rem;
    }

    html body #companyInfoCard #companyHeaderName {
        font-size: 1.15rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    html body #companyInfoCard #companyHeaderAccount {
        display: inline-flex;
        width: auto;
        max-width: 100%;
        margin-top: 0.375rem;
        padding: 0.2rem 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        overflow-wrap: anywhere;
    }

    html body #companyInfoContent > .row {
        margin-top: 0 !important;
        row-gap: 0.25rem;
    }

    html body #companyInfoContent > .row > [class*="col-"] {
        display: grid;
        gap: 0.25rem;
    }

    html body #companyInfoContent > .row > [class*="col-"] > .d-flex {
        display: grid !important;
        min-height: 40px;
        margin-bottom: 0 !important;
        padding: 0.45rem 0.5rem;
        grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr);
        align-items: start !important;
        gap: 0.5rem;
        border-bottom: 1px solid rgba(101, 112, 120, 0.14);
    }

    html body #companyInfoContent > .row > [class*="col-"] > .d-flex > [style*="min-width"] {
        min-width: 0 !important;
        margin-right: 0 !important;
    }

    html body #registrationsTableWrapper > .d-flex:first-child {
        padding: 0.75rem;
        border: 1px solid rgba(101, 112, 120, 0.18);
        border-radius: 0.75rem;
        background: #f8fafc;
    }

    html body #registrationsTableWrapper > .row.mb-2 {
        margin: 0.75rem 0 1rem !important;
    }

    html body #registrationsTableWrapper > .row.mb-2 > [class*="col-"] {
        padding: 0;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) {
        padding: 0.5rem;
        gap: 0.125rem;
        border-radius: 0.875rem;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(1),
    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(7) {
        min-height: 62px;
        background: #f4f7fa;
        border-bottom: 1px solid rgba(101, 112, 120, 0.14);
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(7) {
        align-items: flex-end;
        text-align: right;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(7) .badge {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(6) {
        min-height: 62px;
        margin: 0.25rem;
        padding: 0.75rem !important;
        border: 1px solid rgba(101, 112, 120, 0.13);
        border-radius: 0.625rem;
        background: #f8fafc;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(8) {
        min-height: 52px;
        padding: 0.375rem 0.625rem 0.625rem !important;
    }
}

@media screen and (min-width: 576px) and (max-width: 767.98px) {
    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(7) {
        grid-column: 4;
        grid-row: 1;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(4) {
        grid-column: 1;
        grid-row: 2;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(5) {
        grid-column: 2;
        grid-row: 2;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(6) {
        grid-column: 3 / 5;
        grid-row: 2;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(8) {
        grid-column: 1 / -1;
        grid-row: 3;
    }
}

@media screen and (max-width: 575.98px) {
    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(7) {
        grid-column: 2;
        grid-row: 1;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(5) {
        grid-column: 1;
        grid-row: 3;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(4) {
        grid-column: 2;
        grid-row: 3;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(6) {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(8) {
        grid-column: 1 / -1;
        grid-row: 5;
    }
}

/* Homepage surface rhythm borrowed from the concept without replacing Bootstrap. */
@media screen and (max-width: 767.98px) {
    html body .announcement-band,
    html body #signInSection .card,
    html body #resultsSection .card {
        overflow: hidden;
        border-radius: 0.875rem;
    }

    html body .main-content > .container > .row.justify-content-center.mb-4 {
        margin-bottom: 1rem !important;
    }

    html body #signInSection {
        margin-bottom: 1rem !important;
    }

    html body #signInSection .card-body {
        padding: 1.125rem;
    }

    html body #signInSection .home-sign-in-form .form-control {
        min-height: 44px;
        border-radius: 0.625rem;
    }
}

/* Thin-desktop bridge ----------------------------------------------------
 * The full eight-column registration table needs more room than Bootstrap's
 * 960px desktop container provides. Keep the wide table and phone cards as-is,
 * and give laptop-sized viewports an intentional two-band record layout.
 */
@media screen and (min-width: 768px) and (max-width: 1199.98px) {
    html body:has(#registrationsTableWrapper) .main-content.px-5,
    html body:has(#inner-invoice) .main-content.px-5 {
        padding-right: clamp(1rem, 2.5vw, 2rem) !important;
        padding-left: clamp(1rem, 2.5vw, 2rem) !important;
    }

    html body:has(#registrationsTableWrapper) .main-content > .container,
    html body:has(#inner-invoice) .main-content > .container {
        width: 100%;
        max-width: none;
    }

    html body #resultsSection > [class*="col-"] {
        width: 100%;
        max-width: none;
    }

    html body #resultsSection .card-body {
        padding: clamp(1rem, 2vw, 1.5rem);
    }

    html body #registrationsTableWrapper {
        overflow: visible;
    }

    html body #registrationsTableWrapper > .d-flex:first-child {
        display: grid !important;
        padding: 0.75rem;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center !important;
        gap: 1rem;
        border: 1px solid rgba(101, 112, 120, 0.18);
        border-radius: 0.75rem;
        background: #f8fafc;
    }

    html body #registrationsTableWrapper > .d-flex:first-child > .d-flex {
        min-width: max-content;
    }

    html body #registrationsTableWrapper > .row.mb-2 {
        margin: 0.75rem 0 1rem !important;
    }

    html body #registrationsTableWrapper > .row.mb-2 > [class*="col-"] {
        width: min(100%, 36rem);
        max-width: none;
        padding: 0;
    }

    html body #registrationsTableWrapper #registrationsTable {
        display: block;
        width: 100%;
        min-width: 0;
        margin-top: 0.75rem;
        overflow: visible;
    }

    html body #registrationsTable thead,
    html body #registrationsTable tbody {
        display: block;
        width: 100%;
    }

    html body #registrationsTable thead {
        margin-bottom: 0.75rem;
    }

    html body #registrationsTable thead tr {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.5rem;
        border: 0;
    }

    html body #registrationsTable thead th {
        display: block;
        min-width: 0;
        padding: 0 !important;
        border: 0;
        background: transparent;
    }

    html body #registrationsTable thead th:nth-child(7),
    html body #registrationsTable thead th:nth-child(8) {
        display: none;
    }

    html body #registrationsTable thead th > .d-flex {
        min-height: 44px;
        padding: 0.5rem;
        justify-content: center;
        border: 1px solid rgba(101, 112, 120, 0.24);
        border-radius: 0.5rem;
        background: #f4f7fa;
        text-align: center;
        line-height: 1.2;
        white-space: normal;
    }

    html body #registrationsTable thead th.sorted > .d-flex {
        border-color: #00aaa6;
        background: rgba(0, 170, 166, 0.1);
    }

    html body #registrationsTable tbody {
        display: grid;
        gap: 0.875rem;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) {
        display: grid;
        padding: 0.5rem;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 0.25rem;
        overflow: hidden;
        border: 1px solid rgba(101, 112, 120, 0.24);
        border-radius: 0.875rem;
        background: #fff;
        box-shadow: 0 3px 10px rgba(20, 58, 82, 0.06);
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td {
        display: flex;
        min-width: 0;
        min-height: 64px;
        padding: 0.625rem !important;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0.25rem;
        border: 0;
        background: transparent !important;
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td::before {
        content: attr(data-mobile-label);
        color: #657078;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(2) {
        grid-column: 3 / 5;
        grid-row: 1;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(3) {
        grid-column: 5 / 8;
        grid-row: 1;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(7) {
        grid-column: 8 / 11;
        grid-row: 1;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(8) {
        grid-column: 11 / 13;
        grid-row: 1;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(4) {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(5) {
        grid-column: 3 / 6;
        grid-row: 2;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(6) {
        margin: 0;
        grid-column: 6 / 13;
        grid-row: 2;
        word-break: break-word;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(-n+3),
    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(7),
    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(8) {
        background: #f4f7fa !important;
        border-bottom: 1px solid rgba(101, 112, 120, 0.14);
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(7) .badge {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }

    html body #registrationsTable tbody tr:not(.responsive-table-message) td:nth-child(8) .btn {
        width: 100%;
        min-height: 44px;
        margin-top: auto;
        white-space: normal;
    }

    html body #registrationsTable tbody tr.responsive-table-message {
        display: block;
        padding: 0;
        border: 0;
    }

    html body #registrationsTable tbody tr.responsive-table-message td {
        display: block;
        min-height: 0;
        text-align: center;
    }

    html body #registrationsTable tbody tr.responsive-table-message td::before {
        content: none;
    }

    html body #registrationsTableWrapper > .d-flex:last-child {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center !important;
        gap: 0.75rem;
    }

    /* Thank-you receipt: give the document the page width instead of squeezing
       it beside the summary card. The invalid col-md-14 classes remain intact. */
    html body:has(#inner-invoice) .main-content > .container > .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    html body:has(#inner-invoice) .main-content > .container > .row > .col-lg-4.col-md-14,
    html body:has(#inner-invoice) .main-content > .container > .row > .col-lg-8.col-md-14 {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    html body:has(#inner-invoice) .main-content > .container > .row > .col-lg-4.col-md-14 > .card,
    html body:has(#inner-invoice) .main-content > .container > .row > .col-lg-8.col-md-14 > .card,
    html body #inner-invoice {
        width: min(100%, 60rem);
        margin-right: auto;
        margin-left: auto;
    }

    html body #inner-invoice {
        border: 1px solid rgba(101, 112, 120, 0.18);
        background: #fff;
    }

    html body #inner-invoice > .card-body {
        padding: clamp(1rem, 2.4vw, 2rem);
    }

    html body #inner-invoice .card-body > .d-flex.justify-content-between {
        gap: 1rem;
    }

    html body #inner-invoice .card-body > .d-flex.justify-content-between > :first-child {
        min-width: 0;
    }

    html body #inner-invoice .card-body > .d-flex.justify-content-between img {
        width: auto;
        max-width: clamp(120px, 18vw, 180px) !important;
        height: auto;
    }

    html body #inner-invoice h3 {
        font-size: clamp(1.25rem, 2.5vw, 1.75rem);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    html body #inner-invoice h5,
    html body #inner-invoice p,
    html body #inner-invoice address {
        overflow-wrap: anywhere;
    }

    html body #inner-invoice table {
        display: table;
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        overflow: visible;
        border-collapse: collapse;
        white-space: normal;
        box-shadow: none;
    }

    html body #inner-invoice table th,
    html body #inner-invoice table td,
    html body #inner-invoice table th:first-child,
    html body #inner-invoice table td:first-child {
        min-width: 0;
        padding: clamp(0.3rem, 0.8vw, 0.5rem);
        font-size: clamp(0.72rem, 1.25vw, 0.875rem);
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* Thin-computer thank-you flow -------------------------------------------
 * Visually integrate Summary and administrator content into the selected
 * laptop treatment while the receipt retains the full content width below.
 */
@media screen and (min-width: 992px) and (max-width: 1399.98px) {
    html body:has(#inner-invoice) .main-content.px-5 {
        padding-right: clamp(1rem, 2.5vw, 2rem) !important;
        padding-left: clamp(1rem, 2.5vw, 2rem) !important;
    }

    html body:has(#inner-invoice) .main-content > .container {
        width: 100%;
        max-width: none;
    }

    html body:has(#inner-invoice) .main-content > .container > .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    html body:has(#inner-invoice) .main-content > .container > .row > .col-lg-4.col-md-14,
    html body:has(#inner-invoice) .main-content > .container > .row > .col-lg-8.col-md-14 {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    html body:has(#inner-invoice) .main-content > .container > .row > .col-lg-4.col-md-14 > .card,
    html body:has(#inner-invoice) .main-content > .container > .row > .col-lg-8.col-md-14 > .card,
    html body #inner-invoice {
        width: min(100%, 72rem);
        margin-right: auto;
        margin-left: auto;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body {
        display: grid;
        position: relative;
        padding: clamp(1rem, 2vw, 1.5rem);
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: repeat(5, auto);
        align-items: start;
        column-gap: clamp(0.625rem, 1.2vw, 1rem);
        row-gap: 0.375rem;
        isolation: isolate;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body::before,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body::after {
        content: "";
        grid-row: 2 / 5;
        z-index: 0;
        border: 1px solid rgba(101, 112, 120, 0.16);
        border-radius: 0.75rem;
        background: #f8fafc;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body::before {
        grid-column: 1 / 7;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body::after {
        grid-column: 7 / 13;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > * {
        position: relative;
        z-index: 1;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > address {
        min-width: 0;
        margin: 0;
        color: #657078;
        font-size: 0.875rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4 {
        font-size: clamp(1rem, 1.45vw, 1.25rem);
        line-height: 1.2;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5 {
        font-size: 0.875rem;
        line-height: 1.2;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4:first-of-type {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5:nth-of-type(1) {
        margin: 0 -0.375rem 0 0;
        grid-column: 3 / 5;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        white-space: nowrap;
        text-align: right;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4:nth-of-type(2) {
        margin: 0 0 0 -0.375rem;
        grid-column: 5 / 7;
        grid-row: 1;
        align-self: center;
        justify-self: start;
        white-space: nowrap;
        text-align: left;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5:nth-of-type(2) {
        margin: 0;
        padding: 0.875rem 1rem 0;
        grid-column: 1 / 7;
        grid-row: 2;
        color: #657078;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4:nth-of-type(3) {
        margin: 0;
        padding: 0 1rem;
        grid-column: 1 / 7;
        grid-row: 3;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > address:nth-of-type(1) {
        padding: 0 1rem 0.875rem;
        grid-column: 1 / 7;
        grid-row: 4;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5:nth-of-type(3) {
        margin: 0;
        padding: 0.875rem 1rem 0;
        grid-column: 7 / 13;
        grid-row: 2;
        color: #657078;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4:nth-of-type(4) {
        margin: 0;
        padding: 0 1rem;
        grid-column: 7 / 13;
        grid-row: 3;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > address:nth-of-type(2) {
        padding: 0 1rem 0.875rem;
        grid-column: 7 / 13;
        grid-row: 4;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices {
        min-width: 0;
        padding: 0.4rem 0.5rem;
        border-radius: 0.5rem;
        background: #f4f7fa;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices:nth-of-type(1) {
        grid-column: 7 / 9;
        grid-row: 1;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices:nth-of-type(2) {
        grid-column: 9 / 11;
        grid-row: 1;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices:nth-of-type(3) {
        grid-column: 11 / 13;
        grid-row: 1;
        border: 1px solid rgba(0, 170, 166, 0.28);
        background: rgba(0, 170, 166, 0.09);
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices h5 {
        display: grid;
        margin: 0;
        gap: 0.125rem;
        font-size: 0.875rem;
        line-height: 1.25;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices h5 > span {
        font-size: 1rem;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .d-grid {
        display: grid !important;
        margin-top: 0.5rem !important;
        padding-top: 0.75rem;
        grid-column: 1 / 13;
        grid-row: 5;
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        gap: 0.75rem;
        border-top: 1px solid rgba(101, 112, 120, 0.16);
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .d-grid > .btn {
        display: flex;
        min-height: 52px;
        margin-top: 0 !important;
        padding: 0.625rem 0.75rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.625rem;
        box-shadow: none;
        font-size: 0.875rem;
        text-align: center;
        white-space: normal;
        line-height: 1.2;
    }

    /* Use the proven phone reading order on laptops instead of compressing
       the summary into a horizontal dashboard ribbon. */
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body {
        display: block !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body::before,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body::after {
        content: none !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > address {
        display: block !important;
        position: static !important;
        float: none !important;
        width: auto !important;
        max-width: none;
        padding: 0 !important;
        grid-column: auto;
        grid-row: auto;
        justify-self: auto;
        white-space: normal !important;
        text-align: left !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        transform: none !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4 {
        margin: 0 0 0.5rem !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5 {
        margin: 0.875rem 0 0.25rem !important;
        font-size: 0.875rem !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4:first-of-type {
        margin-bottom: 0.625rem !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5:nth-of-type(1) {
        margin-top: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: auto !important;
        justify-self: auto !important;
        text-align: left !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > address {
        margin: 0 0 1rem !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices {
        width: auto;
        margin: 0;
        padding: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices h5 {
        display: block;
        margin: 0.25rem 0 !important;
        font-size: 0.875rem;
        line-height: 1.35;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices h5 > span {
        display: inline;
        font-size: inherit;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .d-grid {
        width: min(100%, 22rem);
        margin: 1.75rem 0 0 !important;
        padding-top: 1rem;
        grid-column: auto;
        grid-row: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
        border-top: 0;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .d-grid > .btn {
        width: 100% !important;
        min-height: 48px;
        margin-top: 0 !important;
    }

    /* Selected laptop treatment: visually integrate the existing Summary and
       administrator siblings without changing the Razor hierarchy. The two
       generated grid surfaces supply the outer card and the shared gray
       Installer/Owner panel; the detailed receipt keeps the full row below. */
    html body:has(#inner-invoice) .main-content > .container > .row {
        display: grid;
        position: relative;
        width: min(100%, 72rem);
        margin-right: auto;
        margin-left: auto;
        padding: 0;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-flow: row;
        gap: 0;
        align-items: stretch;
        isolation: isolate;
    }

    html body:has(#inner-invoice) .main-content > .container > .row::before,
    html body:has(#inner-invoice) .main-content > .container > .row::after {
        content: "";
        min-width: 0;
        pointer-events: none;
    }

    html body:has(#inner-invoice) .main-content > .container > .row::before {
        margin: 0;
        grid-column: 2 / 12;
        grid-row: 2 / 11;
        z-index: 0;
        border: 1px solid rgba(101, 112, 120, 0.22);
        border-radius: 0.35rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(43, 57, 66, 0.08);
    }

    html body:has(#inner-invoice) .main-content > .container > .row::after {
        margin: 1rem 1.25rem 0;
        grid-column: 2 / 12;
        grid-row: 4 / 7;
        z-index: 1;
        border: 1px solid rgba(101, 112, 120, 0.18);
        border-radius: 0.3rem;
        background: #f2f5f7;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-8.col-md-14 {
        display: contents !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > address,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .d-grid,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-8.col-md-14 > .card,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-8.col-md-14 > .alert,
    html body #inner-invoice {
        position: relative;
        min-width: 0;
        z-index: 2;
    }

    /* Summary title and order number share the integrated card header. */
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4:first-of-type {
        margin: 0 !important;
        padding: 1.25rem 0 0.85rem 1.25rem !important;
        grid-column: 2 / 7 !important;
        grid-row: 2 !important;
        align-self: center;
        color: #59666f;
        font-size: 1.2rem;
        line-height: 1.25;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5:nth-of-type(1) {
        margin: 0 !important;
        padding: 1.25rem 0.25rem 0.85rem 0 !important;
        grid-column: 8 / 10 !important;
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: end !important;
        color: #87929a;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4:nth-of-type(2) {
        margin: 0 !important;
        padding: 1.25rem 1.25rem 0.85rem 0 !important;
        grid-column: 10 / 12 !important;
        grid-row: 2 !important;
        align-self: center;
        justify-self: start;
        color: #00aaa6;
        font-size: 1rem;
        white-space: nowrap !important;
    }

    /* Prime administrator information becomes the first section inside the
       visual Summary surface, separated by one line rather than a second card. */
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-8.col-md-14 > .card.shadow-sm.mb-4 {
        width: auto;
        max-width: none;
        height: auto;
        margin: 0 !important;
        grid-column: 2 / 12;
        grid-row: 3;
        border: 0;
        border-top: 1px solid rgba(101, 112, 120, 0.22);
        border-bottom: 1px solid rgba(101, 112, 120, 0.18);
        border-radius: 0;
        background: transparent;
        box-shadow: none !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-8.col-md-14 > .card.shadow-sm.mb-4 > .card-body {
        display: flex !important;
        min-width: 0;
        height: auto;
        padding: 0.65rem 1.25rem 1.1rem;
        flex-direction: row;
        align-items: center !important;
        justify-content: space-between;
        gap: 1rem 2rem;
        text-align: left;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-8.col-md-14 > .card.shadow-sm.mb-4 > .card-body > .flex-grow-1 {
        width: auto;
        min-width: 0;
        flex: 1 1 18rem !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-8.col-md-14 > .card.shadow-sm.mb-4 > .card-body > :last-child {
        width: min(100%, 170px);
        min-width: 0;
        margin-left: auto;
        flex: 0 1 170px;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-8.col-md-14 > .card.shadow-sm.mb-4 p,
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-8.col-md-14 > .card.shadow-sm.mb-4 address {
        margin-right: 0;
        margin-left: 0;
        overflow-wrap: normal;
        word-break: normal;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-8.col-md-14 > .card.shadow-sm.mb-4 img {
        display: block;
        width: auto;
        max-width: min(100%, 150px) !important;
        height: auto;
    }

    /* Installer and Owner share the restrained gray information panel. */
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5:nth-of-type(2),
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5:nth-of-type(3) {
        margin: 0 !important;
        padding-top: 1.75rem !important;
        grid-row: 4 !important;
        align-self: end;
        color: #87929a;
        font-size: 0.78rem !important;
        font-weight: 700;
        text-transform: uppercase !important;
        letter-spacing: 0.035em !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5:nth-of-type(2),
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4:nth-of-type(3),
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > address:nth-of-type(1) {
        padding-right: 1rem !important;
        padding-left: 2.25rem !important;
        grid-column: 2 / 7 !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h5:nth-of-type(3),
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4:nth-of-type(4),
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > address:nth-of-type(2) {
        padding-right: 2.25rem !important;
        padding-left: 1rem !important;
        grid-column: 7 / 12 !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4:nth-of-type(3),
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > h4:nth-of-type(4) {
        margin: 0 !important;
        padding-top: 0.2rem !important;
        padding-bottom: 0 !important;
        grid-row: 5 !important;
        align-self: start;
        color: #00aaa6;
        font-size: 1rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > address:nth-of-type(1),
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > address:nth-of-type(2) {
        margin: 0 !important;
        padding-top: 0.35rem !important;
        padding-bottom: 1rem !important;
        grid-row: 6 !important;
        align-self: start;
        color: #657078;
        font-size: 0.875rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    /* Match the phone summary: plain vertical totals with no gray box. */
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices {
        width: auto;
        margin: 0;
        padding: 0 0 0 1.25rem;
        grid-column: 2 / 7 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices:nth-of-type(1) {
        padding-top: 1rem;
        grid-row: 7 !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices:nth-of-type(2) {
        grid-row: 8 !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices:nth-of-type(3) {
        grid-row: 9 !important;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices h5 {
        display: flex;
        margin: 0.2rem 0 !important;
        align-items: baseline;
        gap: 0.25rem;
        font-size: 0.875rem;
        line-height: 1.35;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .summary-prices h5 > span {
        display: inline;
        font-size: inherit;
    }

    /* Keep all available actions in one compact, left-aligned vertical stack. */
    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .d-grid {
        display: grid !important;
        width: min(100%, 22rem);
        margin: 1.25rem 0 1.5rem 1.25rem !important;
        padding: 0;
        grid-column: 2 / 7 !important;
        grid-row: 10 !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
        border: 0;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-4.col-md-14 > .card > .card-body > .d-grid > .btn {
        display: flex;
        width: 100% !important;
        min-height: 48px;
        margin: 0 !important;
        padding: 0.625rem 0.75rem;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font-size: 0.875rem;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }

    html body:has(#inner-invoice)
        .main-content > .container > .row > .col-lg-8.col-md-14 > .alert.alert-danger {
        margin: 0 0 1rem;
        grid-column: 1 / 13;
        grid-row: 1;
    }

    html body #inner-invoice {
        width: 100%;
        max-width: none;
        margin: 1.5rem 0 0 !important;
        grid-column: 1 / 13;
        grid-row: 11;
    }
}

/* Confirmation warranty-term containment -------------------------------
 * The selected ribbon narrows the header's first line at tablet widths.
 * Keep multi-digit terms atomic and let only the descriptive label wrap. */
html body #warranty-options .warranty-option
    .card-header > .d-flex.align-items-baseline > .fw-bold:first-child {
    min-width: max-content;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

/* Confirmation warranty-rating containment ------------------------------
 * Laptop cards are narrow enough that a fixed 35px five-star control and
 * the price cannot share one line. Preserve the price and fluidly size only
 * the decorative read-only rating within the remaining card width.
 */
@media screen and (min-width: 768px) and (max-width: 1199.98px) {
    html body #warranty-options:not(.state-fee-confirmation-flow)
        .warranty-option .state-fee-price-row {
        display: grid;
        width: 100%;
        max-width: 100%;
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: center;
        column-gap: 0.5rem;
    }

    html body #warranty-options:not(.state-fee-confirmation-flow)
        .warranty-option .state-fee-price-row > span {
        min-width: 0;
        margin-right: 0 !important;
        white-space: nowrap;
    }

    html body #warranty-options:not(.state-fee-confirmation-flow)
        .warranty-option .state-fee-price-row > .rateit {
        min-width: 0;
        max-width: 100%;
        justify-self: end;
        font-size: clamp(20px, 2vw, 24px) !important;
        line-height: 1;
    }

    html body #warranty-options:not(.state-fee-confirmation-flow)
        .warranty-option .state-fee-price-row > .rateit .rateit-range {
        max-width: 100%;
    }
}

/* Phone thank-you receipt records ---------------------------------------
 * Keep every agreement and equipment value visible without making users
 * pan across a clipped table. The existing localized headings become the
 * labels for a compact key-value grid; desktop and print remain tabular.
 */
@media screen and (max-width: 767.98px) {
    html body #inner-invoice .card-body > .mt-2,
    html body #inner-invoice .card-body > .mt-3 {
        margin-top: 1.25rem !important;
    }

    html body #inner-invoice .card-body > .mt-2 > h6,
    html body #inner-invoice .card-body > .mt-3 > h6 {
        margin-bottom: 0.5rem;
        color: #657078;
        font-size: 0.75rem;
        line-height: 1.25;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    html body #inner-invoice table,
    html body #inner-invoice table.agreements-table {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
        overflow: visible;
        border: 0;
        border-collapse: separate;
        white-space: normal;
        box-shadow: none;
    }

    html body #inner-invoice table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        border: 0;
        white-space: nowrap;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }

    html body #inner-invoice table > tbody {
        display: grid;
        width: 100%;
        gap: 0.75rem;
    }

    html body #inner-invoice table > tbody > tr {
        display: grid;
        width: 100%;
        min-width: 0;
        gap: 0;
        overflow: hidden;
        border: 1px solid rgba(101, 112, 120, 0.22);
        border-radius: 0.625rem;
        background: #f8fafc !important;
    }

    html body #inner-invoice table.agreements-table > tbody > tr:not(:has(td[colspan])) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "quantity agreement"
            "term code"
            "description description"
            "created price";
    }

    html body.no-prices #inner-invoice table.agreements-table > tbody > tr:not(:has(td[colspan])) {
        grid-template-areas:
            "quantity agreement"
            "term code"
            "description description"
            "created created";
    }

    html body #inner-invoice table:not(.agreements-table) > tbody > tr:not(:has(td[colspan])) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "serial serial"
            "model type"
            "line line";
    }

    html body #inner-invoice table > tbody > tr > td,
    html body #inner-invoice table > tbody > tr > td:first-child {
        display: grid;
        min-width: 0 !important;
        min-height: 0;
        padding: 0.625rem 0.75rem !important;
        align-content: start;
        gap: 0.2rem;
        border: 0 !important;
        border-bottom: 1px solid rgba(101, 112, 120, 0.12) !important;
        background: transparent !important;
        color: #657078;
        font-size: 0.875rem;
        line-height: 1.35;
        text-align: left !important;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    html body #inner-invoice table > tbody > tr > td::before {
        content: attr(data-label);
        color: #657078;
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    html body #inner-invoice table.agreements-table > tbody > tr > td:nth-child(1) {
        grid-area: quantity;
    }

    html body #inner-invoice table.agreements-table > tbody > tr > td:nth-child(2) {
        grid-area: agreement;
    }

    html body #inner-invoice table.agreements-table > tbody > tr > td:nth-child(3) {
        grid-area: term;
    }

    html body #inner-invoice table.agreements-table > tbody > tr > td:nth-child(4) {
        grid-area: description;
    }

    html body #inner-invoice table.agreements-table > tbody > tr > td:nth-child(5) {
        grid-area: code;
    }

    html body #inner-invoice table.agreements-table > tbody > tr > td:nth-child(6) {
        grid-area: created;
    }

    html body #inner-invoice table.agreements-table > tbody > tr > td:nth-child(7) {
        grid-area: price;
    }

    html body #inner-invoice table:not(.agreements-table) > tbody > tr > td:nth-child(1) {
        grid-area: serial;
    }

    html body #inner-invoice table:not(.agreements-table) > tbody > tr > td:nth-child(2) {
        grid-area: model;
    }

    html body #inner-invoice table:not(.agreements-table) > tbody > tr > td:nth-child(3) {
        grid-area: type;
    }

    html body #inner-invoice table:not(.agreements-table) > tbody > tr > td:nth-child(4) {
        grid-area: line;
    }

    html body #inner-invoice table > tbody > tr:has(td[colspan]) {
        grid-template-columns: minmax(0, 1fr);
    }

    html body #inner-invoice table > tbody > tr > td[colspan] {
        grid-area: auto;
        grid-column: 1 / -1;
        border-bottom: 0 !important;
        text-align: center !important;
    }

    html body #inner-invoice table > tbody > tr > td[colspan]::before {
        content: none;
    }
}

@media screen and (max-width: 479.98px) {
    html body #inner-invoice table.agreements-table > tbody > tr:not(:has(td[colspan])),
    html body.no-prices #inner-invoice table.agreements-table > tbody > tr:not(:has(td[colspan])) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "agreement"
            "description"
            "quantity"
            "term"
            "code"
            "created"
            "price";
    }

    html body.no-prices #inner-invoice table.agreements-table > tbody > tr:not(:has(td[colspan])) {
        grid-template-areas:
            "agreement"
            "description"
            "quantity"
            "term"
            "code"
            "created";
    }

    html body #inner-invoice table:not(.agreements-table) > tbody > tr:not(:has(td[colspan])) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "serial"
            "model"
            "type"
            "line";
    }
}

/* Narrow wide-screen registration table --------------------------------
 * Bootstrap returns to the desktop table at 1200px, but the surrounding
 * container and generous cell spacing can still hide the View column.
 * Reclaim the page width and let long identifiers wrap within fixed,
 * deliberate columns until the full desktop container has enough room.
 */
@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
    html body:has(#registrationsTableWrapper) .main-content.px-5 {
        padding-right: clamp(1rem, 2vw, 1.5rem) !important;
        padding-left: clamp(1rem, 2vw, 1.5rem) !important;
    }

    html body:has(#registrationsTableWrapper) .main-content > .container {
        width: 100%;
        max-width: none;
    }

    html body #resultsSection > [class*="col-"] {
        width: 100%;
        max-width: none;
    }

    html body #resultsSection .card-body {
        padding: clamp(0.875rem, 1.5vw, 1.25rem);
    }

    html body #registrationsTableWrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: visible;
    }

    html body #registrationsTableWrapper > .row.mb-2 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    html body #registrationsTableWrapper > .row.mb-2 > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }

    html body #registrationsTableWrapper #registrationsTable {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        font-size: clamp(0.78rem, 1.05vw, 0.875rem);
    }

    html body #registrationsTable th,
    html body #registrationsTable td {
        min-width: 0;
        padding: 0.75rem 0.5rem !important;
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: break-word;
    }

    html body #registrationsTable thead th > .d-flex {
        min-width: 0;
        flex-wrap: wrap;
        column-gap: 0.2rem !important;
        row-gap: 0.1rem !important;
    }

    html body #registrationsTable thead th > .d-flex > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    html body #registrationsTable .sort-icons {
        flex: 0 0 auto;
    }

    html body #registrationsTable thead th:nth-child(1) {
        width: 7%;
    }

    html body #registrationsTable thead th:nth-child(2) {
        width: 9%;
    }

    html body #registrationsTable thead th:nth-child(3) {
        width: 15%;
    }

    html body #registrationsTable thead th:nth-child(4) {
        width: 10%;
    }

    html body #registrationsTable thead th:nth-child(5) {
        width: 12%;
    }

    html body #registrationsTable thead th:nth-child(6) {
        width: 24%;
    }

    html body #registrationsTable thead th:nth-child(7) {
        width: 13%;
    }

    html body #registrationsTable thead th:nth-child(8) {
        width: 10%;
    }

    html body #registrationsTable tbody td:nth-child(6) {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    html body #registrationsTable tbody td:nth-child(7) .badge {
        max-width: 100%;
        font-size: 0.75rem;
        text-align: center;
        white-space: normal;
        line-height: 1.2;
    }

    html body #registrationsTable tbody td:nth-child(8) .btn {
        display: inline-flex;
        max-width: 100%;
        min-height: 36px;
        padding: 0.35rem 0.45rem;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        font-size: 0.78rem;
        white-space: nowrap;
    }
}