/* ============================================================
   CreativeBaz Print Manager — dashboard.css
   Complete Professional Responsive Design System v3.0
   Author: Premium SaaS UI Architecture
   ============================================================

   BREAKPOINTS:
   --xs : < 480px   (small phones)
   --sm : 480–767px (phones)
   --md : 768–1023px (tablet)
   --lg : 1024px+   (desktop)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ============================================================
   0. GLOBAL RESET — Applied ONLY inside our dashboard wrapper
   ============================================================ */
.cbpm-udb-wrap,
.cbpm-udb-wrap * {
    box-sizing: border-box;
}
.cbpm-udb-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
}
.cbpm-udb-wrap a {
    text-decoration: none;
    color: inherit;
}

/* ── Complete button reset inside dashboard to neutralize ALL theme overrides ── */
/* Themes often apply orange/colored backgrounds to all buttons globally. */
/* This block restores a neutral base for every button inside our wrapper.  */
.cbpm-udb-wrap button,
.cbpm-udb-wrap button:not([class*="cbpm"]),
.cbpm-mobile-menu-toggle,
.cbpm-sidebar-close-btn button,
.cbpm-classic-act-btn {
    font-family: inherit;
    cursor: pointer;
    /* Reset any theme button color/background/border */
    background-color: initial;
    background-image: none;
    color: initial;
    border: initial;
    border-radius: initial;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    padding: initial;
    margin: initial;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Now apply the overlay/mobile toggle specific styles */
/* Mobile menu toggle: ONLY shown on mobile, theme must not make it orange on desktop */
.cbpm-mobile-menu-toggle {
    display: none !important; /* hidden by default on desktop */
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px !important;
    background: var(--c-primary) !important;
    background-color: var(--c-primary) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    z-index: 200;
    font-family: inherit !important;
    flex-shrink: 0;
    box-shadow: none !important;
}
.cbpm-mobile-menu-toggle:hover {
    background-color: var(--c-primary-dark) !important;
    transform: none !important;
    color: #ffffff !important;
}
.cbpm-mobile-menu-toggle span {
    color: #ffffff !important;
}
.cbpm-mobile-menu-toggle svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    stroke: #ffffff !important;
    fill: none !important;
    color: #ffffff !important;
}

/* Sidebar close button (only inside mobile off-canvas) */
.cbpm-sidebar-close-btn button {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.cbpm-sidebar-close-btn button:hover {
    background-color: #e2e8f0 !important;
    color: #ef4444 !important;
}
.cbpm-sidebar-close-btn button svg {
    stroke: currentColor !important;
    fill: none !important;
    width: 18px !important;
    height: 18px !important;
}

/* Classic action buttons (view eye icon, edit icon) */
.cbpm-classic-act-btns {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.cbpm-classic-act-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.cbpm-classic-act-btn:hover {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}
.cbpm-classic-act-btn svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    fill: none !important;
    display: block !important;
}

.cbpm-udb-wrap input,
.cbpm-udb-wrap select,
.cbpm-udb-wrap textarea {
    font-family: inherit;
}

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
.cbpm-udb-wrap {
    /* ─────────────────────────────────────────────────────────────
       CreativeBaz Dashboard Design Tokens — Sky Blue Brand
       Primary Sky Blue : #3AADE4   (logo-accurate)
       Hover / Deep     : #2B8CB8
       Sky Tint         : #E8F6FC
       ───────────────────────────────────────────────────────────── */
    --c-primary:       var(--cbpm-dash-btn-color, #3AADE4);
    --c-primary-dark:  var(--cbpm-button-color-hover, #2B8CB8);
    --c-primary-light: #E8F6FC;
    --c-text:          var(--cbpm-text-color, #1E2022);
    --c-text-2:        #374151;
    --c-muted:         #64748b;
    --c-muted-2:       #94a3b8;
    --c-border:        #e2e8f0;
    --c-border-2:      #f1f5f9;
    --c-bg:            #f0f2f8;
    --c-white:         #ffffff;
    --c-green:         #10b981;
    --c-amber:         #f59e0b;
    --c-red:           #ef4444;
    --c-purple:        #8b5cf6;

    --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:  0 1px 6px rgba(0,0,0,0.07);
    --shadow-md:  0 4px 20px rgba(58,173,228,0.10);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);

    --radius-sm:  6px;
    --radius:     10px;
    --radius-lg:  14px;
    --radius-xl:  18px;

    --transition: 0.18s ease;

    /* Typography Scale - Desktop */
    --fs-h1:    var(--cbpm-dash-h1-sz, 26px);
    --fs-h2:    var(--cbpm-dash-h2-sz, 20px);
    --fs-h3:    var(--cbpm-dash-h3-sz, 17px);
    --fs-body:  var(--cbpm-dash-font-sz, 15px);
    --fs-sm:    13px;
    --fs-xs:    11px;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi:   600;
    --fw-bold:   700;
    --fw-black:  var(--cbpm-dash-stat-wt, 800);

    /* Layout & Spacing */
    --sidebar-w: 260px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    
    /* Line Heights */
    --lh-tight:  1.2;
    --lh-normal: 1.5;
    --lh-loose:  1.8;
}

.cbpm-udb-wrap {
    font-family: var(--cbpm-dash-font, 'Inter', sans-serif);
    font-size: var(--fs-body);
    line-height: var(--cbpm-dash-p-lh, 1.5);
    color: var(--c-text);
    background: var(--c-bg);
    /* Dynamic Dashboard Layout Width using Breakout & Flex Center */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow-x: hidden;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cbpm-udb-wrap > * {
    width: 100%;
    max-width: var(--cbpm-dash-layout, 1200px);
}.cbpm-udb-wrap h1 {
    font-family: var(--cbpm-dash-h1-font, inherit) !important;
    font-size: var(--fs-h1) !important;
    font-weight: var(--cbpm-dash-h1-wt, 800) !important;
}

.cbpm-udb-wrap h2, .cbpm-udb-section-title {
    font-family: var(--cbpm-dash-h2-font, inherit) !important;
    font-size: var(--fs-h2) !important;
    font-weight: var(--cbpm-dash-h2-wt, 700) !important;
}

.cbpm-udb-wrap h3 {
    font-family: var(--cbpm-dash-h3-font, inherit) !important;
    font-size: var(--fs-h3) !important;
    font-weight: var(--cbpm-dash-h3-wt, 700) !important;
}

.cbpm-udb-wrap p {
    font-family: var(--cbpm-dash-p-font, inherit) !important;
    font-size: var(--cbpm-dash-p-sz, var(--fs-body)) !important;
    line-height: var(--cbpm-dash-p-lh, 1.6) !important;
}

.cbpm-udb-wrap input::placeholder,
.cbpm-udb-wrap textarea::placeholder {
    font-size: var(--cbpm-dash-ph-sz, 14px) !important;
}
/* Let the WP theme handle container width */

/* ============================================================
   2b. SIDEBAR PROFILE CARD
   ============================================================ */
.cbpm-sb-profile {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5) var(--sp-3);
    border-bottom: 1px solid var(--c-border-2);
    margin-bottom: var(--sp-3);
}
.cbpm-sb-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    border: 2px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.cbpm-sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cbpm-sb-avatar-initials {
    font-size: 18px;
    font-weight: 800;
    color: var(--c-primary);
    line-height: 1;
}
.cbpm-sb-profile-info { min-width: 0; }
.cbpm-sb-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cbpm-sb-id {
    font-size: 10px;
    color: var(--c-muted);
    font-weight: 500;
    margin-top: 2px;
}
.cbpm-sb-active-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 var(--sp-3) var(--sp-3);
    padding: 6px 12px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #a7f3d0;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
}
.cbpm-sb-active-badge svg { color: #10b981; flex-shrink: 0; }

/* ============================================================
   2c. DASHBOARD TOP ROW (Welcome + Right Column)
   ============================================================ */
.cbpm-dash-top-row {
    display: flex;
    gap: var(--sp-5);
    align-items: flex-start;
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}
.cbpm-dash-welcome-col {
    flex: 1;
    min-width: 220px;
}
.cbpm-dash-right-col {
    flex: 1.2;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* Order Stats Pills */
.cbpm-dash-order-stats {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.cbpm-dos-pill {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    flex: 1;
    min-width: 80px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.cbpm-dos-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cbpm-dos-blue  { background: #eff6ff; border: 1px solid #bfdbfe; }
.cbpm-dos-amber { background: #fffbeb; border: 1px solid #fde68a; }
.cbpm-dos-green { background: #ecfdf5; border: 1px solid #a7f3d0; }
.cbpm-dos-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cbpm-dos-blue .cbpm-dos-icon  { background: #dbeafe; color: #3b82f6; }
.cbpm-dos-amber .cbpm-dos-icon { background: #fef3c7; color: #f59e0b; }
.cbpm-dos-green .cbpm-dos-icon { background: #d1fae5; color: #10b981; }
.cbpm-dos-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-text);
    line-height: 1;
}
.cbpm-dos-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-muted);
    margin-top: 2px;
}

/* Billing Strip */
.cbpm-dash-billing-strip {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.cbpm-bill-card {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    flex: 1;
    min-width: 90px;
    transition: transform var(--transition);
}
.cbpm-bill-card:hover { transform: translateY(-1px); }
.cbpm-bill-green  { background: #f0fdf4; border: 1px solid #bbf7d0; }
.cbpm-bill-purple { background: #faf5ff; border: 1px solid #e9d5ff; }
.cbpm-bill-orange { background: #fff7ed; border: 1px solid #fed7aa; }
.cbpm-bill-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cbpm-bill-green .cbpm-bill-icon  { background: #dcfce7; color: #16a34a; }
.cbpm-bill-purple .cbpm-bill-icon { background: #ede9fe; color: #7c3aed; }
.cbpm-bill-orange .cbpm-bill-icon { background: #fee2e2; color: #ef4444; }
.cbpm-bill-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--c-muted);
    white-space: nowrap;
}
.cbpm-bill-amt {
    font-size: 15px;
    font-weight: 800;
    color: var(--c-text);
    line-height: 1.2;
}
.cbpm-bill-due { color: #ef4444; }

/* ============================================================
   2d. RECENT ORDERS ON DASHBOARD
   ============================================================ */
.cbpm-dash-recent-orders {
    background: var(--c-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border-2);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--sp-5);
    overflow: hidden;
}
.cbpm-dro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border-2);
    background: #f8fafc;
}
.cbpm-dro-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
}
.cbpm-dro-title svg { color: var(--c-primary); }
.cbpm-dro-view-all {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-primary);
    text-decoration: none;
    padding: 4px 12px;
    border: 1px solid var(--c-primary);
    border-radius: 20px;
    transition: all var(--transition);
}
.cbpm-dro-view-all:hover { background: var(--c-primary); color: #fff; }
.cbpm-dro-table-wrap { overflow-x: auto; }
.cbpm-dro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cbpm-dro-table thead th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8fafc;
    border-bottom: 1px solid var(--c-border-2);
    white-space: nowrap;
}
.cbpm-dro-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #f8fafc;
    vertical-align: middle;
    color: var(--c-text-2);
}
.cbpm-dro-table tbody tr:last-child td { border-bottom: none; }
.cbpm-dro-table tbody tr:hover { background: #fafbff; }
.cbpm-dro-orderid {
    font-weight: 700;
    color: var(--c-primary);
    font-size: 12px;
}
.cbpm-dro-product { font-weight: 600; color: var(--c-text); font-size: 13px; }
.cbpm-dro-qty    { color: var(--c-muted); font-size: 11px; }
.cbpm-dro-date   { color: var(--c-muted); font-size: 12px; white-space: nowrap; }
.cbpm-dro-amt    { font-weight: 700; color: var(--c-text); }
.cbpm-dro-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.cbpm-dro-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    white-space: nowrap;
}
.cbpm-dro-view-btn:hover { background: var(--c-primary-dark); transform: translateY(-1px); }

/* Mobile Cards for Recent Orders */
.cbpm-dro-mobile { display: none; padding: var(--sp-3); }
.cbpm-dro-mob-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.cbpm-dro-mob-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-2);
}
.cbpm-dro-mob-product { font-weight: 600; color: var(--c-text); font-size: 13px; margin-bottom: var(--sp-1); }
.cbpm-dro-mob-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--c-muted);
}


/* ============================================================
   3. HEADER BAR
   ============================================================ */
.cbpm-udb-header {
    background: var(--c-white);
    border-bottom: 1px solid var(--c-border);
    padding: var(--sp-5) var(--sp-7);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
    min-width: 0;
}

/* ── Profile side ── */
.cbpm-udb-profile-side {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
    min-width: 0;
}
.cbpm-udb-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #dbeafe;
    border: 2px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.cbpm-udb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cbpm-udb-avatar-initials {
    font-size: 22px;
    font-weight: var(--fw-black);
    color: var(--c-primary);
    line-height: 1;
}
.cbpm-udb-profile-info { min-width: 0; }
.cbpm-udb-profile-name {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    line-height: var(--lh-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cbpm-udb-profile-id {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin-top: 2px;
    font-weight: var(--fw-medium);
}

/* ── Header stats pill ── */
.cbpm-udb-header-stats {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-2) 0;
    flex-shrink: 0;
}
.cbpm-udb-hstat {
    padding: var(--sp-2) var(--sp-5);
    text-align: center;
}
.cbpm-udb-hstat-val {
    font-size: 22px;
    font-weight: var(--fw-black);
    color: var(--c-text);
    line-height: 1;
}
.cbpm-udb-hstat-label {
    font-size: 11px;
    color: var(--c-muted);
    font-weight: var(--fw-medium);
    margin-top: 2px;
    white-space: nowrap;
}
.cbpm-udb-hstat-divider {
    width: 1px;
    height: 32px;
    background: var(--c-border);
    flex-shrink: 0;
}

/* ── Header action area ── */
.cbpm-udb-header-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-2);
    min-width: 0;
}
.cbpm-udb-empty-cart {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}
.cbpm-udb-empty-cart-icon { flex-shrink: 0; color: var(--c-muted-2); }
.cbpm-udb-empty-cart-text strong {
    display: block;
    font-size: var(--fs-sm);
    color: var(--c-text);
    font-weight: var(--fw-semi);
}
.cbpm-udb-empty-cart-text p {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin: 2px 0 0;
    line-height: var(--lh-normal);
}
.cbpm-udb-header-action-note {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-green);
    font-weight: var(--fw-semi);
}

/* ============================================================
   4. PRIMARY BUTTON
   ============================================================ */
.cbpm-udb-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    background: var(--c-primary) !important;
    background-color: var(--c-primary) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius) !important;
    font-size: var(--fs-sm) !important;
    font-weight: var(--fw-bold) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    transition: background var(--transition), transform var(--transition) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.cbpm-udb-submit-btn:hover {
    background: var(--c-primary-dark) !important;
    background-color: var(--c-primary-dark) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}
.cbpm-udb-submit-btn:active {
    transform: translateY(0) !important;
}

/* ============================================================
   5. MAIN LAYOUT — Sidebar + Content (Desktop: side by side)
   ============================================================ */
.cbpm-udb-layout {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 120px);
    background: linear-gradient(to right, var(--c-white) var(--sidebar-w), var(--c-bg) var(--sidebar-w));
}

/* ============================================================
   6. SIDEBAR — Desktop vertical nav
   ============================================================ */
.cbpm-udb-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--c-white);
    border-right: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding: var(--sp-5) 0;
    z-index: 5;
}
.cbpm-udb-sidebar::-webkit-scrollbar { display: none; }
.cbpm-udb-sidebar-label {
    font-size: 10px;
    font-weight: var(--fw-bold);
    color: var(--c-muted-2);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    padding: 0 var(--sp-4) var(--sp-3);
}
.cbpm-udb-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cbpm-udb-nav-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-text-light);
    text-decoration: none;
    font-weight: var(--fw-bold);
    font-size: 14px;
    border-radius: var(--radius-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}
.cbpm-udb-nav-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--c-muted-2);
    transition: color var(--transition);
}
.cbpm-udb-nav-item:hover {
    background: #f8fafc;
    color: var(--c-primary);
    transform: translateX(4px);
}
.cbpm-udb-nav-item:hover svg { color: var(--c-primary); }
.cbpm-udb-nav-item.active {
    background: linear-gradient(135deg, var(--c-primary) 0%, #2B8CB8 100%);
    color: var(--c-white);
    box-shadow: 0 4px 15px -3px rgba(58, 173, 228, 0.40);
    border: 1px solid rgba(255,255,255,0.1);
}
.cbpm-udb-nav-item.active svg { color: var(--c-white); }
.cbpm-udb-logout { color: #ef4444 !important; border-left-color: transparent !important; margin-top: var(--sp-3); }
.cbpm-udb-logout svg { color: #fca5a5 !important; }
.cbpm-udb-logout:hover { background: #fff5f5 !important; border-left-color: var(--c-red) !important; }

/* ============================================================
   7. CONTENT AREA
   ============================================================ */
.cbpm-udb-content {
    flex: 1;
    min-width: 0;
    padding: var(--sp-7);
    background: var(--c-bg);
}
.cbpm-udb-section {
    background: var(--c-white);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}
.cbpm-udb-section-title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    color: var(--c-text);
    margin: 0 0 4px;
    line-height: var(--lh-tight);
}
.cbpm-udb-section-sub {
    font-size: var(--fs-sm);
    color: var(--c-muted);
    margin: 0 0 var(--sp-5);
    line-height: var(--lh-normal);
}

/* ============================================================
   8. DASHBOARD HOME — Welcome + Action Buttons
   ============================================================ */
.cbpm-dash-welcome { margin-bottom: var(--sp-4); }
.cbpm-dash-welcome h2 {
    font-size: var(--fs-h2) !important;
    font-weight: var(--fw-black) !important;
    color: var(--c-text) !important;
    margin: 0 0 4px !important;
    line-height: var(--lh-tight) !important;
}
.cbpm-dash-welcome p {
    font-size: var(--fs-sm) !important;
    color: var(--c-muted) !important;
    margin: 0 !important;
}

/* Action Buttons Row */
.cbpm-dash-actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
}
.cbpm-dash-actions .cbpm-udb-submit-btn,
.cbpm-dash-actions button.cbpm-udb-submit-btn {
    flex: 0 0 auto;
}

/* ============================================================
   9. STATS CARDS GRID
   ============================================================ */
.cbpm-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    margin: var(--sp-5) 0;
}
.cbpm-dash-stat-card {
    background: #f0f7ff;
    padding: var(--sp-4);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    transition: transform var(--transition), box-shadow var(--transition);
    border: 1px solid transparent;
}
.cbpm-dash-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.cbpm-dash-stat-icon {
    width: 42px;
    height: 42px;
    background: var(--c-white);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
}
.cbpm-dash-stat-info { min-width: 0; flex: 1; }
.cbpm-dash-stat-label {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    font-weight: var(--fw-semi);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cbpm-dash-stat-value {
    font-size: var(--cbpm-dash-stat-sz, 20px);
    font-weight: var(--cbpm-dash-stat-wt, 800);
    color: var(--cbpm-dash-stat-color, var(--c-text));
    line-height: 1.1;
}
.cbpm-dash-stat-link {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    display: inline-block;
    margin-top: 2px;
    text-decoration: none !important;
}

/* ============================================================
   10. BOTTOM GRID (Dashboard: Payment form + History)
   ============================================================ */
.cbpm-dash-bottom-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    margin-bottom: var(--sp-8);
}
.cbpm-dash-bottom-card {
    background: var(--c-white);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    border: 1px solid var(--c-border-2);
    box-shadow: var(--shadow-xs);
    min-width: 0;
}
.cbpm-dash-section-h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin: 0 0 var(--sp-4);
    line-height: var(--lh-tight);
}

/* ============================================================
   11. TABLES — Mobile-first approach
   ============================================================ */
.cbpm-udb-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
}
.cbpm-udb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    min-width: 540px;
}
.cbpm-udb-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: #334155;
    background: #f8fafc;
    border-bottom: 2px solid var(--c-border-2);
    white-space: nowrap;
}
.cbpm-udb-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--c-border-2);
    color: var(--c-text-2);
    vertical-align: middle;
    font-size: var(--fs-sm);
}
.cbpm-udb-table tbody tr:last-child td { border-bottom: none; }
.cbpm-udb-table tbody tr:hover { background: #f8fafc; }

/* Mobile card layout for tables */
.cbpm-mobile-cards { display: none; }
.cbpm-mobile-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
}
.cbpm-mc-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: 5px 0;
    font-size: var(--fs-sm);
}
.cbpm-mc-label {
    color: var(--c-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    flex-shrink: 0;
    min-width: 90px;
}
.cbpm-mc-value {
    color: var(--c-text);
    font-weight: var(--fw-medium);
    text-align: right;
    flex: 1;
}
.cbpm-overpay-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-white);
    margin-bottom: var(--sp-4);
    box-shadow: 0 4px 15px -3px rgba(16, 185, 129, 0.3);
    position: relative;
    overflow: hidden;
}
.cbpm-overpay-banner::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 50%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05));
    transform: skewX(-20deg) translateX(50%);
}
.cbpm-overpay-info {
    position: relative;
    z-index: 1;
}
.cbpm-overpay-title {
    font-size: 15px;
    font-weight: var(--fw-bold);
    margin-bottom: 1px;
}
.cbpm-overpay-sub {
    font-size: 12px;
    opacity: 0.9;
    max-width: 400px;
    line-height: 1.3;
}
.cbpm-overpay-pending {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: var(--fw-semi);
    margin-top: 4px;
}
.cbpm-overpay-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}
.cbpm-overpay-btn {
    background: var(--c-white);
    color: #059669;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: var(--fw-bold);
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s;
}
.cbpm-mc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-2);
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.cbpm-mc-id {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-primary);
}
.cbpm-mc-actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border-2);
}

/* Badges */
.cbpm-udb-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1.5;
}
.cbpm-udb-act-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--c-primary);
    font-weight: var(--fw-semi);
    font-size: var(--fs-sm);
    text-decoration: none !important;
}
.cbpm-udb-act-link:hover { text-decoration: underline !important; }
.cbpm-udb-view-all {
    color: var(--c-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
}

/* Empty state */
.cbpm-udb-empty { text-align: center; padding: 48px var(--sp-5); }
.cbpm-udb-empty-icon { font-size: 2.5em; margin-bottom: var(--sp-4); }
.cbpm-udb-empty h4 { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text); margin: 0 0 var(--sp-2); }
.cbpm-udb-empty p  { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }

/* ============================================================
   12. ORDER STATUS CARDS
   ============================================================ */
.cbpm-udb-status-card {
    background: #f8fafc;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    padding: var(--sp-4) var(--sp-4);
    margin-bottom: var(--sp-3);
}
.cbpm-udb-sc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.cbpm-udb-progress-bar-wrap { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cbpm-udb-progress-track {
    flex: 1;
    height: 7px;
    background: var(--c-border);
    border-radius: 50px;
    overflow: hidden;
    min-width: 80px;
}
.cbpm-udb-progress-fill {
    height: 100%;
    border-radius: 50px;
    transition: width 0.5s ease;
}
.cbpm-udb-pay-btn {
    padding: 8px 18px;
    background: var(--c-primary);
    color: var(--c-white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
}
.cbpm-udb-pay-btn:hover { background: var(--c-primary-dark); }

/* ============================================================
   13. CONTACT / CHAT SUPPORT
   ============================================================ */
.cbpm-udb-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.cbpm-udb-contact-card {
    background: #f8fafc;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    color: var(--c-text);
    transition: transform var(--transition), box-shadow var(--transition);
    display: block;
    text-decoration: none !important;
}
.cbpm-udb-contact-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.cbpm-udb-contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-3);
}
.cbpm-udb-contact-card strong {
    display: block;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    margin-bottom: 4px;
}
.cbpm-udb-contact-card p {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin: 0;
    word-break: break-word;
}
.cbpm-udb-contact-note {
    background: #f8fafc;
    border-radius: var(--radius);
    padding: var(--sp-4);
    border: 1px solid var(--c-border);
    color: #475569;
    line-height: var(--lh-loose);
    font-size: var(--fs-sm);
}
.cbpm-udb-contact-note p { margin: 4px 0; }

/* ============================================================
   14. ACCOUNT / PAYMENTS — Summary Cards
   ============================================================ */
.cbpm-pay-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.cbpm-pay-summary-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4) var(--sp-5);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
    min-width: 0;
}
.cbpm-pay-summary-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cbpm-pay-summary-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.cbpm-pay-card--billed::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.cbpm-pay-card--paid::before   { background: linear-gradient(90deg, #10b981, #34d399); }
.cbpm-pay-card--due::before    { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.cbpm-pay-card-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.cbpm-pay-card-amount {
    font-size: 22px;
    font-weight: var(--fw-black);
    color: var(--c-text);
    line-height: 1.1;
    margin-bottom: 4px;
    word-break: break-all;
}
.cbpm-pay-card-sub { font-size: var(--fs-xs); color: var(--c-muted-2); }

/* Pending Notice */
.cbpm-pay-pending-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    color: #b45309;
    font-weight: var(--fw-semi);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}
.cbpm-pay-pending-notice svg { flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   15. PAYMENT FORM WRAPPER
   ============================================================ */
.cbpm-pay-form-wrap {
    background: linear-gradient(135deg, #f8fafc 0%, #f0f4ff 100%);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-7);
}
.cbpm-pay-form-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin: 0 0 var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    flex-wrap: wrap;
}
.cbpm-pay-form-title svg { color: var(--c-primary); flex-shrink: 0; }

/* Steps */
.cbpm-pay-step { margin-bottom: var(--sp-5); }
.cbpm-pay-step-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-text-2);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}
.cbpm-pay-step-label small {
    font-weight: var(--fw-normal);
    color: var(--c-muted-2);
    font-size: var(--fs-xs);
}
.cbpm-pay-step-num {
    width: 22px;
    height: 22px;
    background: var(--c-primary);
    color: var(--c-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--fw-black);
    flex-shrink: 0;
}

/* Order list */
.cbpm-pay-orders-list {
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--c-white);
    max-height: 240px;
    overflow-y: auto;
}
.cbpm-pay-order-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 11px var(--sp-4);
    border-bottom: 1px solid var(--c-border-2);
    cursor: pointer;
    transition: background var(--transition);
}
.cbpm-pay-order-item:last-child { border-bottom: none; }
.cbpm-pay-order-item:hover { background: #f8faff; }
.cbpm-pay-order-item input[type="checkbox"] { display: none; }
.cbpm-pay-order-info { flex: 1; min-width: 0; }
.cbpm-pay-order-num {
    display: block;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    color: var(--c-primary);
}
.cbpm-pay-order-name {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.cbpm-pay-order-amt {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    white-space: nowrap;
    flex-shrink: 0;
}
.cbpm-pay-order-check {
    width: 20px;
    height: 20px;
    border: 2px solid var(--c-border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition);
}
.cbpm-pay-order-check svg { opacity: 0; transition: opacity var(--transition); stroke: var(--c-white); }
.cbpm-pay-order-item.is-checked { background: var(--c-primary-light); }
.cbpm-pay-order-item.is-checked .cbpm-pay-order-check {
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.cbpm-pay-order-item.is-checked .cbpm-pay-order-check svg { opacity: 1; }
.cbpm-pay-no-orders {
    padding: var(--sp-5);
    text-align: center;
    color: var(--c-muted-2);
    font-size: var(--fs-sm);
}

/* Payment fields row */
.cbpm-pay-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}
.cbpm-pay-field label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-text-2);
    margin-bottom: 6px;
}
.cbpm-pay-field small {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-muted-2);
    margin-top: 4px;
}
.cbpm-pay-field input[type="number"],
.cbpm-pay-field input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--c-text);
    background: var(--c-white);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.cbpm-pay-field input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,0.1);
}
.cbpm-pay-input-wrap { position: relative; }
.cbpm-pay-input-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: var(--fw-bold);
    color: var(--c-muted);
    font-size: var(--fs-sm);
    pointer-events: none;
}
.cbpm-pay-input-wrap input { padding-left: 28px !important; }

/* ── Payment Method Buttons ── */
.cbpm-pay-methods {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-2);
}
.cbpm-pay-method-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px var(--sp-2);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-white);
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
    min-height: 64px;
    justify-content: center;
}
.cbpm-pay-method-btn input[type="radio"] { display: none; }
.cbpm-pay-method-btn:hover { border-color: var(--c-primary); background: var(--c-primary-light); }
.cbpm-pay-method-btn.active {
    border-color: var(--c-primary);
    background: var(--c-primary-light);
    box-shadow: 0 0 0 3px rgba(26,86,219,0.08);
}
.cbpm-pm-icon { font-size: 1.4em; line-height: 1; }
.cbpm-pm-label {
    font-size: 11px;
    font-weight: var(--fw-bold);
    color: var(--c-text-2);
}
.cbpm-pay-method-btn.active .cbpm-pm-label { color: var(--c-primary); }

/* Submit Button */
.cbpm-pay-submit-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 13px var(--sp-6) !important;
    background: linear-gradient(135deg, var(--c-primary), #2B8CB8) !important;
    background-color: var(--c-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius) !important;
    font-size: var(--fs-body) !important;
    font-weight: var(--fw-bold) !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
    box-shadow: 0 4px 14px rgba(58,173,228,0.25) !important;
    margin-top: var(--sp-2) !important;
    text-decoration: none !important;
}
.cbpm-pay-submit-btn:hover {
    background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary)) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}
.cbpm-pay-submit-btn:disabled { opacity: 0.6 !important; cursor: not-allowed !important; transform: none !important; }

/* Form messages */
.cbpm-pay-form-msg {
    padding: 11px var(--sp-4);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    margin-bottom: var(--sp-2);
}
.cbpm-pay-form-msg.success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.cbpm-pay-form-msg.error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* Payment History */
.cbpm-pay-history-wrap { margin-top: var(--sp-2); }
.cbpm-pay-orders-cell { max-width: 140px; }
.cbpm-pay-trx-id { color: var(--c-muted); word-break: break-all; }
.cbpm-pay-reject-note { color: var(--c-red); font-size: var(--fs-xs); }

/* Payment Status Badges */
.cbpm-pay-status-badge { display: inline-block; padding: 4px 10px; border-radius: 50px; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cbpm-pay-status--pending  { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.cbpm-pay-status--verified { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.cbpm-pay-status--rejected { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* Payment form: 2-col layout on desktop only */
@media (min-width: 993px) {
    .cbpm-pay-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "step1 step2"
            "step1 step3"
            "step1 submit";
        gap: 0 var(--sp-8);
    }
    .cbpm-pay-form .cbpm-pay-step:nth-child(1) { grid-area: step1; }
    .cbpm-pay-form .cbpm-pay-step:nth-child(2) { grid-area: step2; }
    .cbpm-pay-form .cbpm-pay-step:nth-child(3) { grid-area: step3; }
    .cbpm-pay-form .cbpm-pay-form-msg  { grid-area: submit; }
    .cbpm-pay-form .cbpm-pay-submit-btn { grid-area: submit; }
}

/* ============================================================
   16. IMAGE FIT OPTIONS
   ============================================================ */
.cbpm-fit-options { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: 6px; }
.cbpm-fit-opt {
    flex: 1;
    min-width: 90px;
    max-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--sp-3) var(--sp-2);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    background: #f8fafc;
    text-align: center;
}
.cbpm-fit-opt input[type=radio] { display: none; }
.cbpm-fit-opt:hover,
.cbpm-fit-opt.active { border-color: var(--c-primary); background: var(--c-primary-light); }
.cbpm-fit-icon {
    font-size: 1.4rem;
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    display: flex; align-items: center; justify-content: center;
}
.cbpm-fit-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-text); }
.cbpm-fit-desc  { font-size: 10px; color: var(--c-muted-2); line-height: 1.3; }

/* ============================================================
   ██████  RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ============================================================
   TABLET — max-width: 1024px
   Sidebar collapses to horizontal tab bar
   ============================================================ */
@media (max-width: 1024px) {
    /* Layout: stacked */
    .cbpm-udb-layout { flex-direction: column; background: var(--c-bg); }

    /* Sidebar → Horizontal Tab Bar */
    .cbpm-udb-sidebar {
        width: 100%;
        height: auto;
        position: sticky;
        top: 0;
        z-index: 50;
        border-right: none;
        border-bottom: 2px solid var(--c-border);
        padding: 0;
        overflow: visible;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .cbpm-udb-sidebar-label { display: none; }
    .cbpm-udb-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
        padding: 0 var(--sp-3);
        border-bottom: none;
    }
    .cbpm-udb-nav::-webkit-scrollbar { display: none; }
    .cbpm-udb-nav-item {
        flex: 0 0 auto;
        flex-direction: row;
        border: 1px solid transparent;
        border-radius: 40px;
        padding: 10px 20px;
        margin-right: 12px;
        font-size: 14px;
        font-weight: var(--fw-bold);
        gap: 8px;
        white-space: nowrap;
        background: #f1f5f9;
        color: var(--c-text);
        transition: all 0.3s ease;
    }
    .cbpm-udb-nav-item svg { width: 16px; height: 16px; }
    .cbpm-udb-nav-item.active {
        background: linear-gradient(135deg, var(--c-primary) 0%, #2B8CB8 100%);
        border: 1px solid transparent;
        color: #fff;
        box-shadow: 0 6px 16px -4px rgba(58,173,228,0.40);
    }
    .cbpm-udb-nav-item:hover { background: #e2e8f0; transform: translateY(-2px); }
    .cbpm-udb-logout { margin-top: 0; border: none !important; }

    /* Content */
    .cbpm-udb-content { padding: var(--sp-5) var(--sp-5); }

    /* Stats */
    .cbpm-dash-stats { grid-template-columns: repeat(2, 1fr); }

    /* Contact */
    .cbpm-udb-contact-grid { grid-template-columns: 1fr 1fr; }

    /* Payment summary */
    .cbpm-pay-summary-grid { grid-template-columns: repeat(3, 1fr); }

    /* Header */
    .cbpm-udb-header { padding: var(--sp-4) var(--sp-5); gap: var(--sp-3); }
    .cbpm-udb-hstat { padding: var(--sp-2) var(--sp-4); }
    .cbpm-udb-hstat-val { font-size: 20px; }

    /* Typography */
    --fs-h1: calc(var(--cbpm-dash-h1-sz, 26px) * 0.9);
    --fs-h2: calc(var(--cbpm-dash-h2-sz, 20px) * 0.9);
    --fs-h3: calc(var(--cbpm-dash-h3-sz, 17px) * 0.9);
}

/* ============================================================
   MOBILE — max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

    /* === TYPOGRAPHY SCALE === */
    .cbpm-udb-wrap {
        --fs-h1:   calc(var(--cbpm-dash-h1-sz, 26px) * 0.85);
        --fs-h2:   calc(var(--cbpm-dash-h2-sz, 20px) * 0.85);
        --fs-h3:   calc(var(--cbpm-dash-h3-sz, 17px) * 0.85);
        --fs-body: calc(var(--cbpm-dash-font-sz, 15px) * 0.9);
        --fs-sm:   13px;
        --fs-xs:   11px;
    }

    /* === HEADER === */
    .cbpm-udb-header {
        flex-direction: column;
        align-items: stretch;
        padding: var(--sp-3) var(--sp-4);
        gap: var(--sp-3);
    }
    .cbpm-udb-profile-side { gap: var(--sp-3); }
    .cbpm-udb-avatar { width: 48px; height: 48px; }
    .cbpm-udb-avatar-initials { font-size: 18px; }
    .cbpm-udb-profile-name { font-size: 15px; }
    .cbpm-udb-profile-id   { font-size: 11px; }

    .cbpm-udb-header-stats {
        width: 100%;
        justify-content: space-around;
        padding: var(--sp-2) 0;
    }
    .cbpm-udb-hstat { padding: var(--sp-2) var(--sp-3); }
    .cbpm-udb-hstat-val   { font-size: 18px; }
    .cbpm-udb-hstat-label { font-size: 10px; }
    .cbpm-udb-hstat-divider { height: 28px; }

    .cbpm-udb-header-action { align-items: flex-start; }
    .cbpm-udb-empty-cart-icon svg { width: 32px; height: 32px; }

    /* === NAV TABS === */
    .cbpm-udb-nav-item { padding: 10px 20px; font-size: 14px; gap: 6px; border-radius: 30px; }
    .cbpm-udb-nav-item svg { width: 16px; height: 16px; }

    /* === CONTENT === */
    .cbpm-udb-content {
        padding: var(--sp-3) var(--sp-3);
    }
    .cbpm-udb-section {
        padding: var(--sp-4) var(--sp-4);
        border-radius: var(--radius);
    }
    .cbpm-udb-section-title { font-size: 17px; }
    .cbpm-udb-section-sub   { font-size: 12px; margin-bottom: var(--sp-4); }

    /* === WELCOME === */
    .cbpm-dash-welcome h2 { font-size: calc(var(--fs-h2) * 0.85) !important; }
    .cbpm-dash-welcome p  { font-size: calc(var(--cbpm-dash-p-sz, var(--fs-body)) * 0.85) !important; }

    /* === ACTION BUTTONS === */
    .cbpm-dash-actions {
        flex-direction: column;
        gap: var(--sp-2);
    }
    .cbpm-dash-actions .cbpm-udb-submit-btn,
    .cbpm-dash-actions button.cbpm-udb-submit-btn {
        width: 100%;
        justify-content: center;
        padding: 11px var(--sp-4);
    }

    /* === STATS CARDS: 2-column grid === */
    .cbpm-dash-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2);
        margin: var(--sp-4) 0;
    }
    .cbpm-dash-stat-card {
        padding: var(--sp-3);
        gap: var(--sp-2);
        border-radius: var(--radius-sm);
        flex-direction: column;
        align-items: flex-start;
    }
    .cbpm-dash-stat-icon {
        width: 36px; height: 36px;
        border-radius: var(--radius-sm);
    }
    .cbpm-dash-stat-label { font-size: 10px; }
    .cbpm-dash-stat-value { font-size: 18px; }
    .cbpm-dash-stat-link  { font-size: 11px; }

    /* === TABLES → Mobile cards === */
    .cbpm-udb-table-wrap .cbpm-udb-table { display: none; }
    .cbpm-mobile-cards { display: block; }

    /* === CONTACT === */
    .cbpm-udb-contact-grid { grid-template-columns: 1fr; gap: var(--sp-2); }

    /* === PAYMENT SUMMARY: 1 col === */
    .cbpm-pay-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2);
    }
    .cbpm-pay-hist-row { font-size: 11px; }

    /* Sidebar profile on mobile */
    .cbpm-sb-profile { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
    .cbpm-sb-avatar { width: 40px; height: 40px; }
    .cbpm-sb-avatar-initials { font-size: 15px; }
    .cbpm-sb-name { font-size: 12px; }

    /* Dashboard top row stacks */
    .cbpm-dash-top-row { flex-direction: column; gap: var(--sp-4); }
    .cbpm-dash-welcome-col, .cbpm-dash-right-col { min-width: 0; width: 100%; }
    
    /* Force stack order stats and billing to prevent overflow on small screens */
    .cbpm-dash-order-stats, .cbpm-dash-billing-strip {
        flex-direction: column;
    }
    .cbpm-dos-pill, .cbpm-bill-card {
        width: 100%;
        padding: var(--sp-3) var(--sp-4);
        min-width: 0;
    }
    .cbpm-dos-num { font-size: 18px; }
    .cbpm-bill-amt { font-size: 14px; }

    /* Recent orders: hide table, show mobile cards */
    .cbpm-dro-table-wrap { display: none; }
    .cbpm-dro-mobile { display: block; }
    .cbpm-dro-header { padding: var(--sp-3) var(--sp-4); }
}


/* ============================================================
   PROFILE PICTURE CSS
   ============================================================ */
.cbpm-udb-profile-pic-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.cbpm-udb-profile-pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.cbpm-udb-profile-avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3AADE4, #2B8CB8);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(58,173,228,0.18);
}
.cbpm-udb-upload-pic-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.cbpm-udb-upload-pic-btn:hover {
    background: #e2e8f0;
}

    /* === PAYMENT FORM === */
    .cbpm-pay-form-wrap { padding: var(--sp-4); }
    .cbpm-pay-fields-row { grid-template-columns: 1fr; gap: var(--sp-3); }

    /* === PAYMENT METHODS: 3 per row === */
    .cbpm-pay-methods {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-2);
    }
    .cbpm-pay-method-btn {
        padding: var(--sp-2);
        min-height: 56px;
    }
    .cbpm-pm-icon  { font-size: 1.2em; }
    .cbpm-pm-label { font-size: 10px; }

    .cbpm-pay-order-item { padding: 10px var(--sp-3); gap: var(--sp-2); }
    .cbpm-pay-step-label { font-size: 12px; }
    .cbpm-pay-submit-btn { font-size: var(--fs-sm); padding: 12px var(--sp-5); }

    /* Status cards */
    .cbpm-udb-status-card { padding: var(--sp-3); }
    .cbpm-udb-sc-top { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

    /* Bottom card */
    .cbpm-dash-bottom-card { padding: var(--sp-4); }
}

/* ============================================================
   SMALL MOBILE — max-width: 480px
   ============================================================ */
@media (max-width: 480px) {

    /* === TYPOGRAPHY === */
    .cbpm-udb-wrap {
        --fs-h1:   calc(var(--cbpm-dash-h1-sz, 26px) * 0.75);
        --fs-h2:   calc(var(--cbpm-dash-h2-sz, 20px) * 0.75);
        --fs-h3:   calc(var(--cbpm-dash-h3-sz, 17px) * 0.75);
        --fs-body: calc(var(--cbpm-dash-font-sz, 15px) * 0.85);
        --fs-sm:   12px;
        --fs-xs:   10px;
    }

    /* === HEADER === */
    .cbpm-udb-header { padding: var(--sp-3); }
    .cbpm-udb-avatar { width: 44px; height: 44px; }
    .cbpm-udb-avatar-initials { font-size: 16px; }
    .cbpm-udb-profile-name { font-size: 14px; }
    .cbpm-udb-hstat-val { font-size: 16px; }

    /* === NAV: nice pill tabs === */
    .cbpm-udb-nav-item svg { display: inline-block; width: 15px; height: 15px; }
    .cbpm-udb-nav-item { padding: 10px 18px; font-size: 13px; gap: 6px; border-radius: 25px; }

    /* === CONTENT === */
    .cbpm-udb-content { padding: var(--sp-2); }
    .cbpm-udb-section { padding: var(--sp-3); }
    .cbpm-udb-section-title { font-size: 15px; }

    /* === WELCOME === */
    .cbpm-dash-welcome h2 { font-size: calc(var(--fs-h2) * 0.75) !important; }

    /* === STATS: 2-col compact === */
    .cbpm-dash-stats { gap: var(--sp-2); margin: var(--sp-3) 0; }
    .cbpm-dash-stat-card { padding: var(--sp-3) var(--sp-2); }
    .cbpm-dash-stat-icon { width: 32px; height: 32px; }
    .cbpm-dash-stat-value { font-size: 16px; }

    /* === PAYMENT SUMMARY: single column === */
    .cbpm-pay-summary-grid { grid-template-columns: 1fr; }
    .cbpm-pay-card-amount  { font-size: 20px; }

    /* === PAYMENT METHODS: 2 per row === */
    .cbpm-pay-methods { grid-template-columns: repeat(2, 1fr); }
    .cbpm-pay-method-btn { min-height: 52px; }

    /* === FORM === */
    .cbpm-pay-form-wrap { padding: var(--sp-3); }

    /* === BOTTOM CARD === */
    .cbpm-dash-bottom-card { padding: var(--sp-3); }

    /* === CONTACT CARDS === */
    .cbpm-udb-contact-card { padding: var(--sp-4) var(--sp-3); }
}

/* ============================================================
   VERY SMALL — max-width: 360px
   ============================================================ */
@media (max-width: 360px) {
    .cbpm-udb-content { padding: var(--sp-1); }
    .cbpm-udb-section { padding: var(--sp-3) var(--sp-2); }
    .cbpm-udb-hstat { padding: var(--sp-1) var(--sp-2); }
    .cbpm-udb-hstat-val { font-size: 14px; }
    .cbpm-udb-hstat-label { font-size: 9px; }
    .cbpm-pay-methods { grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); }
    .cbpm-dash-stat-card { padding: var(--sp-2); gap: var(--sp-1); }
    .cbpm-dash-stat-value { font-size: 14px; }
    .cbpm-udb-nav-item { padding: 8px 16px; font-size: 13px; border-radius: 20px; }
}

/* ============================================================
   DESKTOP-ONLY / MOBILE-ONLY UTILITY CLASSES
   ============================================================ */
/* Desktop table: always visible on > 1024px */
.cbpm-desk-only { display: block; }
/* Mobile cards: hidden on desktop */
.cbpm-mobile-cards { display: none; }

/* On mobile/tablet (<=1024px): flip visibility */
@media (max-width: 1024px) {
    .cbpm-desk-only  { display: none !important; }
    .cbpm-mobile-cards { display: flex !important; flex-direction: column; }
}

/* ============================================================
   STATUS TRACKER — Fix right side overflow
   ============================================================ */
.cbpm-udb-section {
    overflow: hidden; /* prevent horizontal bleed completely */
    box-sizing: border-box;
    width: 100%;
}
.cbpm-udb-status-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.cbpm-udb-sc-top {
    min-width: 0;
}
.cbpm-udb-sc-top > div {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.cbpm-udb-sc-top strong {
    display: block;
    font-size: 15px;
    font-weight: var(--fw-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cbpm-udb-progress-bar-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.cbpm-udb-progress-track {
    flex: 1;
    min-width: 0;
}

/* ============================================================
   OVERPAYMENT BANNER — Premium redesign
   ============================================================ */
.cbpm-overpay-banner {
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #9333ea 100%);
    border-radius: 16px;
    padding: 20px 24px;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 8px 32px rgba(109, 40, 217, 0.35), 0 2px 8px rgba(0,0,0,0.12);
    position: relative;
    overflow: hidden;
}
.cbpm-overpay-banner::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    background: rgba(255,255,255,0.07);
    border-radius: 50%;
    pointer-events: none;
}
.cbpm-overpay-banner::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 30%;
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    pointer-events: none;
}
.cbpm-overpay-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.cbpm-overpay-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.3;
    word-break: break-word;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cbpm-overpay-sub {
    font-size: 12px;
    opacity: 0.88;
    line-height: 1.5;
    margin: 0;
}
.cbpm-overpay-pending {
    margin-top: 8px;
    font-size: 11px;
    background: rgba(255,255,255,0.18);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
}
.cbpm-overpay-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #fff;
    color: #6d28d9;
    border: none;
    padding: 11px 22px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.1);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    text-decoration: none;
}
.cbpm-overpay-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    background: #f3e8ff;
    color: #5b21b6;
}
.cbpm-overpay-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cbpm-overpay-done {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .cbpm-overpay-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 18px;
        gap: 14px;
    }
    .cbpm-overpay-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 22px;
    }
    .cbpm-overpay-title { font-size: 14px; }
}

/* ============================================================
   PAYMENT HISTORY — Mobile card view
   ============================================================ */
.cbpm-pay-history-wrap { margin-top: var(--sp-5); }
.cbpm-pay-history-mobile { display: none; }

.cbpm-pay-hist-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-2);
}
.cbpm-pay-hist-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-2);
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.cbpm-pay-hist-amount {
    font-size: 16px;
    font-weight: var(--fw-black);
    color: var(--c-text);
}
.cbpm-pay-hist-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: 4px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--c-border-2);
}
.cbpm-pay-hist-row:last-child { border-bottom: none; }
.cbpm-pay-hist-label {
    color: var(--c-muted);
    font-size: 11px;
    font-weight: var(--fw-semi);
    flex-shrink: 0;
    min-width: 70px;
}
.cbpm-pay-hist-val {
    color: var(--c-text);
    font-weight: var(--fw-medium);
    text-align: right;
    word-break: break-all;
}

@media (max-width: 1024px) {
    /* Show mobile cards, hide desktop table for payment history */
    .cbpm-pay-history-wrap .cbpm-udb-table-wrap { display: none !important; }
    .cbpm-pay-history-mobile { display: block !important; }
}

/* Note: .cbpm-classic-act-btn styles are defined in the Global Reset section at the top */