border: 1px solid var(--os-border);
    border-radius: var(--os-radius);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}

.alert {
    border-radius: var(--os-radius-sm);
    overflow-wrap: anywhere;
}

/* ---------- Tablet ---------- */
@media (min-width: 576px) and (max-width: 991.98px) {
    .app-content-body {
        padding: 20px;
    }

    .card-body {
        padding: 18px;
    }

    .container,
    .container-fluid {
        max-width: 100%;
    }
}


/* OnlineSlip: correct mobile dashboard layout */
@media screen and (max-width: 767.98px) {

    /* Stack the Airtime and Purchases main boxes */
    .app-content-body .row:has(.table-responsive):has(.network-badge) {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 18px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Make both main columns full width */
    .app-content-body .row:has(.table-responsive):has(.network-badge)
    > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Keep the network cards in two columns */
    .app-content-body .row:has(> [class*="col-"] > .network-badge) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .app-content-body .row:has(> [class*="col-"] > .network-badge)
    > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Prevent either main box from overflowing */
    .app-content-body .card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* Keep transaction table contained inside its own box */
    .app-content-body .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* OnlineSlip: separate network cards into two rows on phones */
@media screen and (max-width: 575.98px) {

    .app-content-body .row:has(> [class*="col-"] > .network-badge),
    .app-content-body .row:has(.network-badge) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .app-content-body .row:has(.network-badge) > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: none !important;
    }

    .app-content-body .network-badge {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 130px !important;
        height: auto !important;
        padding: 14px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .app-content-body .network-badge .operator-name {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: center !important;
        font-size: 14px !important;
    }
}


/* OnlineSlip premium dashboard service grid */
@media screen and (max-width: 575.98px) {

    /* Two service cards per row on mobile */
    .app-content-body .row:has(.service-title) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Reset Bootstrap column sizing */
    .app-content-body .row:has(.service-title) > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: none !important;
    }

    /* Premium service card */
    .app-content-body .service-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 145px !important;
        padding: 14px 8px !important;
        border: 1px solid #dce7e4 !important;
        border-radius: 17px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.045);
        text-align: center !important;
    }

    /* Service icon bubbles */
    .app-content-body .service-title .service-bubble {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        margin: 0 auto 8px !important;
        flex-shrink: 0 !important;
    }

    .app-content-body .service-title .service-bubble img {
        max-width: 46px !important;
        max-height: 46px !important;
        object-fit: contain !important;
    }

    /* Readable service names */
    .app-content-body .service-title .service-name,
    .app-content-body .service-title .font-archivo {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-overflow: clip !important;
        text-align: center !important;
        line-height: 1.35 !important;
        font-size: 13px !important;
    }
}


/* =========================================
   OnlineSlip Premium Dashboard Cards
   Mobile: 2 cards per row
   ========================================= */

@media screen and (max-width: 575.98px) {

    /* Compact, professional service cards */
    .app-content-body .service-title {
        min-height: 0 !important;
        height: auto !important;
        padding: 14px 10px !important;
        gap: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: #ffffff !important;
        border: 1px solid #dce9e3 !important;
        border-radius: 16px !important;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.045) !important;
        text-decoration: none !important;
        overflow: hidden !important;
    }

    /* Make the logo area prominent */
    .app-content-body .service-title .service-bubble {
        width: 100% !important;
        height: 100px !important;
        min-width: 0 !important;
        min-height: 100px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    /* Larger service images */
    .app-content-body .service-title .service-bubble img {
        display: block !important;
        width: 76px !important;
        height: 76px !important;
        max-width: 90% !important;
        max-height: 90% !important;
        object-fit: contain !important;
        border-radius: 10px !important;
    }

    /* Keep icon-only services balanced */
    .app-content-body .service-title .service-bubble i {
        font-size: 36px !important;
    }

    /* Service name immediately below the logo */
    .app-content-body .service-title .service-name,
    .app-content-body .service-title .font-archivo {
        display: block !important;
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        color: #172b24 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-overflow: clip !important;
    }

    /* Refined hover and touch feedback */
    .app-content-body .service-title:active {
        border-color: #10b981 !important;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12) !important;
    }
}


/* OnlineSlip: readable dashboard service names in dark mode */
[data-bs-theme="dark"] .service-title .service-name,
[data-bs-theme="dark"] .service-title .font-archivo,
[data-theme="dark"] .service-title .service-name,
[data-theme="dark"] .service-title .font-archivo,
.dark-mode .service-title .service-name,
.dark-mode .service-title .font-archivo,
html.dark .service-title .service-name,
html.dark .service-title .font-archivo,
body.dark .service-title .service-name,
body.dark .service-title .font-archivo {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* Keep service cards consistent in dark mode */
[data-bs-theme="dark"] .service-title,
[data-theme="dark"] .service-title,
.dark-mode .service-title,
html.dark .service-title,
body.dark .service-title {
    background-color: #0f1b33 !important;
    border-color: #2c3d58 !important;
}

/* Make labels readable if they are rendered as links or spans */
[data-bs-theme="dark"] .service-title a,
[data-bs-theme="dark"] .service-title span,
[data-theme="dark"] .service-title a,
[data-theme="dark"] .service-title span,
.dark-mode .service-title a,
.dark-mode .service-title span {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

/* Preserve the green premium accent */
[data-bs-theme="dark"] .service-title:active,
.dark-mode .service-title:active {
    border-color: #10b981 !important;
}


/* OnlineSlip Data & Airtime: exact network card selectors */
@media screen and (max-width: 575.98px) {

    /* Force two network cards per row */
    .row:has(> .col-3 > .network-operator-card) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .row:has(> .col-3 > .network-operator-card) > .col-3 {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: initial !important;
    }

    /* Unselected network cards */
    .network-operator-card {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 120px !important;
        padding: 14px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: #080808 !important;
        color: #ffffff !important;
        border: 1px solid #303030 !important;
        border-radius: 14px !important;
        text-align: center !important;
        overflow: visible !important;
    }

    /* Selected network: HTML uses active-operator/data-active */
    .network-operator-card.active-operator,
    .network-operator-card[data-active="1"] {
        background: #eafbf3 !important;
        color: #111827 !important;
        border: 2px solid #10b981 !important;
        box-shadow: 0 3px 12px rgba(16, 185, 129, .12) !important;
    }

    /* Network logo */
    .network-operator-card .avatar-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .network-operator-card .avatar-wrap img {
        width: 48px !important;
        height: 48px !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* Show the complete network name */
    .network-operator-card .operator-name {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .network-operator-card.active-operator .operator-name,
    .network-operator-card[data-active="1"] .operator-name {
        color: #111827 !important;
    }

    /* Keep the selection indicator visible */
    .network-operator-card .selected-check {
        z-index: 2 !important;
    }
}

/* OnlineSlip Cable TV — Premium Mobile Operator Cards */
@media screen and (max-width: 575.98px) {

    /* Two operators per row */
    .row:has(.network-operator-card),
    .row:has(.cable-operator-card),
    .row:has([data-operator]) {
        /* Do not apply a grid to unrelated rows */
    }

    /* Cable TV operator selector */
    .cable-operator-card,
    .network-operator-card {
        box-sizing: border-box !important;
        min-width: 0 !important;
        border-radius: 14px !important;
        transition: background-color .2s ease, border-color .2s ease !important;
    }

    /* Prevent operator names from being cut off */
    .cable-operator-card .operator-name,
    .network-operator-card .operator-name {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        line-height: 1.35 !important;
        text-align: center !important;
        max-width: 100% !important;
    }

    /* Operator logos */
    .cable-operator-card img,
    .network-operator-card img {
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* Form fields and action buttons */
    .card input.form-control,
    .card select.form-select,
    .card .form-select,
    .card .input-group .form-control {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Keep form content inside the viewport */
    .card,
    .card-body,
    .card-header,
    .input-group {
        min-width: 0;
    }

    .card-body {
        overflow-wrap: break-word;
    }

    .card .btn {
        white-space: normal !important;
    }
}

/* OnlineSlip Cable TV — Premium Mobile Operator Selector */
@media screen and (max-width: 575.98px) {

    /* Two operator cards per row */
    .row:has(> .col-3 > .cable-operator-card) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Override Bootstrap col-3 width */
    .row:has(> .col-3 > .cable-operator-card) > .col-3 {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: initial !important;
    }

    /* Unselected operator cards */
    .cable-operator-card {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 120px !important;
        padding: 14px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: #080808 !important;
        color: #ffffff !important;
        border: 1px solid #303030 !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        text-align: center !important;
    }

    /* Selected operator — supports common existing states */
    .cable-operator-card.active-operator,
    .cable-operator-card.active,
    .cable-operator-card.selected {
        background: #eafbf3 !important;
        color: #111827 !important;
        border: 2px solid #10b981 !important;
        box-shadow: 0 3px 12px rgba(16, 185, 129, .12) !important;
    }

    /* Operator logos */
    .cable-operator-card img {
        width: 48px !important;
        height: 48px !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* Fully visible operator names */
    .cable-operator-card .operator-name {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
    }

    .cable-operator-card.active-operator .operator-name,
    .cable-operator-card.active .operator-name,
    .cable-operator-card.selected .operator-name {
        color: #111827 !important;
    }
}

/* OnlineSlip: Virtual Account readability fix for all user dashboards */

/* Virtual Account section */
body .border-top .d-flex.align-items-center.gap-2.flex-wrap {
    row-gap: 8px !important;
}

/* Virtual Account label */
body span.text-muted.d-inline-flex.align-items-center.gap-1 {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.7 !important;
}

/* PalmPay account provider */
body span.fw-bold.text-main {
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.7 !important;
    letter-spacing: .3px !important;
}

/* Account number badge */
body span.badge.font-monospace.fw-bold {
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .6px !important;
    line-height: 1.8 !important;
    padding: 5px 9px !important;
    overflow-wrap: anywhere !important;
}

/* Copy Account Number button */
body button[title="Copy Account Number"] {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 6px 9px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
}

/* Bank/provider description */
body span.text-muted.d-none.d-sm-inline {
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Account details spacing */
body .border-top .d-flex.flex-wrap {
    row-gap: 10px !important;
}

/* Mobile readability */
@media (max-width: 575.98px) {
    body span.fw-bold.text-main {
        font-size: 15px !important;
    }

    body span.badge.font-monospace.fw-bold {
        font-size: 14px !important;
        letter-spacing: .3px !important;
    }

    body span.text-muted.d-inline-flex.align-items-center.gap-1 {
        font-size: 13px !important;
    }

    body button[title="Copy Account Number"] {
        min-width: 38px !important;
        min-height: 38px !important;
    }
}