/* ============================================================
   ZENAGROUPE PREMIUM — Red · White · Black Design System
   ============================================================ */

:root {
    --mp-red:       #1538FF;
    --mp-red-dark:  #0A22CC;
    --mp-red-soft:  rgba(21,56,255,0.08);
    --mp-black:     #0D0D0D;
    --mp-dark:      #1A1A1A;
    --mp-dark2:     #282828;
    --mp-white:     #FFFFFF;
    --mp-bg:        #F2F3F7;
    --mp-card-bg:   #FFFFFF;
    --mp-border:    #E4E6EC;
    --mp-text:      #0F0F0F;
    --mp-muted:     #7A7F9A;
    --mp-success:   #16A34A;
    --mp-warning:   #D97706;
    --mp-sidebar-w: 250px;
    --mp-radius:    14px;
    --mp-shadow:    0 4px 24px rgba(0,0,0,0.08);
    --mp-shadow-lg: 0 12px 48px rgba(0,0,0,0.16);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
* { box-sizing: border-box; }

body#page-top {
    background: var(--mp-bg) !important;
    font-family: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--mp-text) !important;
    overflow-x: hidden;
}

/* ============================================================
   SIDEBAR — Full Black Redesign
   ============================================================ */
#accordionSidebar {
    background: var(--mp-black) !important;
    background-image: none !important;
    width: var(--mp-sidebar-w) !important;
    min-height: 100vh;
    position: fixed;
    top: 0; left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 0 0 20px;
    border-right: 1px solid #1F1F1F;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
#accordionSidebar::-webkit-scrollbar { display: none; }

/* Brand */
#accordionSidebar .sidebar-brand {
    background: var(--mp-black) !important;
    padding: 22px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    margin-bottom: 8px;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
}
#accordionSidebar .sidebar-brand-icon img {
    max-height: 28px !important;
    filter: brightness(1);
}
#accordionSidebar .sidebar-brand-text {
    color: var(--mp-white) !important;
    font-size: 13px !important;
    letter-spacing: 6px !important;
    font-weight: 800 !important;
    margin-left: 10px !important;
}

/* Dividers */
#accordionSidebar hr.sidebar-divider {
    border-color: rgba(255,255,255,0.07) !important;
    margin: 6px 16px !important;
}

/* Headings */
#accordionSidebar .sidebar-heading {
    color: rgba(255,255,255,0.28) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    padding: 10px 20px 4px !important;
    text-transform: uppercase !important;
}

/* Nav Items */
#accordionSidebar .nav-item {
    width: 100%;
    margin: 1px 0;
}
#accordionSidebar .nav-link {
    color: rgba(255,255,255,0.58) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 11px 20px !important;
    border-radius: 10px !important;
    margin: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.2px;
}
#accordionSidebar .nav-link:hover {
    color: var(--mp-white) !important;
    background: rgba(255,255,255,0.06) !important;
}
#accordionSidebar .nav-item.active .nav-link,
#accordionSidebar .nav-link[data-toggle='collapse']:not(.collapsed) {
    color: var(--mp-white) !important;
    background: rgba(21,56,255,0.18) !important;
    border-left: 3px solid var(--mp-red) !important;
    padding-left: 17px !important;
}
#accordionSidebar .nav-link i {
    font-size: 14px !important;
    width: 18px !important;
    text-align: center;
}

/* Collapse sub-items */
#accordionSidebar .collapse-inner {
    background: rgba(255,255,255,0.03) !important;
    border-radius: 10px !important;
    margin: 0 10px 4px !important;
    padding: 8px 4px !important;
    border: none !important;
}
#accordionSidebar .collapse-header {
    color: rgba(255,255,255,0.25) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 6px 12px !important;
}
#accordionSidebar .collapse-item {
    color: rgba(255,255,255,0.5) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
    display: block !important;
}
#accordionSidebar .collapse-item:hover {
    color: var(--mp-white) !important;
    background: rgba(21,56,255,0.15) !important;
    text-decoration: none !important;
}

/* Sidebar card (inactive account notice) */
#accordionSidebar .sidebar-card {
    background: rgba(21,56,255,0.12) !important;
    border: 1px solid rgba(21,56,255,0.25) !important;
    border-radius: 12px !important;
    margin: 10px 12px !important;
    padding: 16px !important;
    color: rgba(255,255,255,0.8) !important;
}
#accordionSidebar .sidebar-card .btn-danger {
    background: var(--mp-red) !important;
    border-color: var(--mp-red) !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}

/* Sidebar toggle button */
#sidebarToggle {
    background: rgba(255,255,255,0.08) !important;
    border: none !important;
    width: 34px; height: 34px;
    border-radius: 50% !important;
    color: rgba(255,255,255,0.5) !important;
}
#sidebarToggle:hover { background: rgba(255,255,255,0.14) !important; }

/* ============================================================
   LAYOUT — Wrapper + Content
   ============================================================ */
#wrapper {
    display: flex !important;
    width: 100%;
    /* overflow:hidden removed — it broke position:sticky on the topbar */
}

#content-wrapper {
    margin-left: var(--mp-sidebar-w);
    width: calc(100% - var(--mp-sidebar-w));
    min-height: 100vh;
    background: var(--mp-bg) !important;
    display: flex;
    flex-direction: column;
}

#content {
    flex: 1;
    padding: 0;
}

/* ============================================================
   TOPBAR — Desktop (top) + Mobile (bottom fixed nav)
   ============================================================ */

/* ── Base: shared between desktop & mobile ──────────────────── */
#accordionTopbar {
    background: linear-gradient(135deg, #1538FF 0%, #0A22CC 100%) !important;
    border-bottom: 1px solid rgba(0,0,0,0.18) !important;
    padding: 0 20px !important;
    height: 62px !important;
    box-shadow: 0 2px 24px rgba(21,56,255,0.28) !important;
    /* Desktop: sticky at top — no JS needed, respects parent width automatically */
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* ── Desktop hamburger button ───────────────────────────────── */
.mp-topbar-hamburger {
    background: rgba(255,255,255,0.14) !important;
    border: none !important;
    border-radius: 10px !important;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: #fff !important;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    margin-right: 10px;
    flex-shrink: 0;
}
.mp-topbar-hamburger:hover {
    background: rgba(255,255,255,0.24) !important;
    transform: scale(1.05);
}

/* ── Search bar ─────────────────────────────────────────────── */
.mp-topbar-search .form-control {
    background: rgba(255,255,255,0.14) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 8px 0 0 8px !important;
}
.mp-topbar-search .form-control::placeholder { color: rgba(255,255,255,0.5) !important; }
.mp-topbar-search .form-control:focus { box-shadow: none !important; background: rgba(255,255,255,0.22) !important; }
.mp-search-btn {
    background: rgba(255,255,255,0.14) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0 8px 8px 0 !important;
    transition: background 0.2s;
}
.mp-search-btn:hover { background: rgba(255,255,255,0.24) !important; }

/* ── Nav links (desktop) ────────────────────────────────────── */
#accordionTopbar .nav-link {
    color: #fff !important;
    border-radius: 8px;
    transition: background 0.18s, color 0.18s;
}
#accordionTopbar .nav-link:hover {
    background: rgba(255,255,255,0.14) !important;
    color: #fff !important;
}

/* ── Badges ─────────────────────────────────────────────────── */
#accordionTopbar .badge-counter,
#accordionTopbar .badge-primary {
    background: #fff !important;
    color: var(--mp-red) !important;
    border: none !important;
    font-weight: 800 !important;
}

/* ── Divider ────────────────────────────────────────────────── */
#accordionTopbar .topbar-divider {
    border-color: rgba(255,255,255,0.25) !important;
}

/* ── Avatar ─────────────────────────────────────────────────── */
#accordionTopbar .img-profile {
    width: 32px; height: 32px;
    border: 2px solid rgba(255,255,255,0.35);
    object-fit: cover;
}

/* ── Dropdowns (desktop — open downward) ────────────────────── */
#accordionTopbar .dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid var(--mp-border) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.13) !important;
    margin-top: 6px !important;
    animation: mp-dd-in 0.18s ease;
}
@keyframes mp-dd-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* .mp-topbar-sticky kept as a no-op class — sidebar.js may still add/remove it
   but position is now handled by CSS sticky above, not JS fixed positioning. */

/* ── Tab icon/label wrappers (shared structure, styled per breakpoint) */
.mp-tab-icon {
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.mp-tab-icon i { font-size: 15px; }
/* desktop: hide tab label (only shows on mobile bottom nav) */
.mp-tab-label { display: none; }
/* Badge float (used inside .mp-tab-icon) */
.mp-badge-float {
    position: absolute !important;
    top: -5px !important; right: -8px !important;
    font-size: 9px !important;
    padding: 2px 4px !important;
    min-width: 14px !important; height: 14px !important;
    line-height: 10px !important;
    border-radius: 8px !important;
}

/* ============================================================
   CONTENT AREA PADDING
   ============================================================ */
.mp-content-area {
    padding: 28px 28px 40px !important;
    max-width: 100%;
}

/* ============================================================
   ACCOUNT INACTIVE ALERT
   ============================================================ */
.mp-inactive-alert {
    background: linear-gradient(90deg, rgba(21,56,255,0.06), rgba(21,56,255,0.02)) !important;
    border: 1px solid rgba(21,56,255,0.2) !important;
    border-left: 4px solid var(--mp-red) !important;
    border-radius: var(--mp-radius) !important;
    padding: 14px 20px !important;
    margin-bottom: 24px !important;
    color: var(--mp-text) !important;
    display: flex;
    align-items: center;
    gap: 14px;
}
.mp-inactive-alert i { color: var(--mp-red) !important; font-size: 20px; }

/* ============================================================
   HERO ROW — Balance + CSS Card
   ============================================================ */
.mp-hero-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

/* Balance Card (dark) */
.mp-balance-card {
    background: var(--mp-black) !important;
    border-radius: 20px !important;
    padding: 30px 32px !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.28) !important;
}
.mp-balance-card::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(21,56,255,0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.mp-balance-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mp-red), #4D6BFF, var(--mp-red));
}

.mp-balance-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}
.mp-balance-label {
    display: block;
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.mp-balance-account {
    display: block;
    color: rgba(255,255,255,0.6);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.mp-btc-badge {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 5px 12px;
    color: rgba(255,255,255,0.55);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.mp-btc-badge span { color: rgba(255,255,255,0.8); }

.mp-balance-amount {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.mp-eye-toggle {
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    font-size: 16px;
    transition: color 0.2s;
}
.mp-eye-toggle:hover { color: rgba(255,255,255,0.7); }
.mp-amount-text {
    color: var(--mp-white);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
}

.mp-balance-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.mp-balance-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(21,56,255,0.18);
    border: 1px solid rgba(21,56,255,0.3);
    color: #FF6B6B;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.mp-balance-badge:hover {
    background: rgba(21,56,255,0.28);
    color: var(--mp-white) !important;
}

/* ============================================================
   CSS BANK CARD
   ============================================================ */
.mp-card-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

.mp-bank-card {
    width: 350px;
    height: 190px;
    background: linear-gradient(145deg, #1C1C1C 0%, #252525 45%, #191919 100%);
    border-radius: 18px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.07);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: default;
    flex-shrink: 0;
}
.mp-bank-card:hover {
    transform: rotateY(-5deg) rotateX(3deg) translateY(-6px);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.09);
}
/* Decorative circles */
.mp-bank-card::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21,56,255,0.14) 0%, transparent 70%);
}
/* Red bottom strip */
.mp-bank-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0A22CC, var(--mp-red), #4D6BFF, var(--mp-red), #0A22CC);
    border-radius: 0 0 18px 18px;
}

/* Card top row */
.mp-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}
.mp-card-brand {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.85);
}
.mp-card-brand span { color: var(--mp-red); }

/* Contactless icon */
.mp-contactless {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
    padding-top: 2px;
}
.mp-contactless span {
    display: block;
    height: 2px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    transform-origin: right center;
}
.mp-contactless span:nth-child(1) { width: 8px; }
.mp-contactless span:nth-child(2) { width: 14px; }
.mp-contactless span:nth-child(3) { width: 20px; }

/* EMV Chip */
.mp-card-chip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.mp-chip {
    width: 36px;
    height: 28px;
    background: linear-gradient(135deg, #D4AF37 0%, #B8932A 30%, #E8C84C 50%, #B8932A 70%, #D4AF37 100%);
    border-radius: 5px;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.mp-chip::before {
    content: '';
    position: absolute;
    inset: 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2px;
}
.mp-chip::after {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: rgba(0,0,0,0.15);
    transform: translateY(-50%);
}

/* Card Number */
.mp-card-number-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.mp-card-number {
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 14.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    letter-spacing: 3px;
    transition: opacity 0.25s;
}
/* Show/hide toggle button on the card */
.mp-card-reveal-btn {
    background: rgba(255,255,255,0.13);
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,0.65);
    padding: 3px 7px;
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    line-height: 1.4;
}
.mp-card-reveal-btn:hover {
    background: rgba(255,255,255,0.24);
    color: #fff;
    transform: scale(1.08);
}
/* CVV inline reveal button */
.mp-card-cvv {
    display: flex;
    align-items: center;
    gap: 3px;
}
.mp-cvv-reveal-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    padding: 0 2px;
    font-size: 9px;
    line-height: 1;
    transition: color 0.2s, transform 0.15s;
}
.mp-cvv-reveal-btn:hover {
    color: rgba(255,255,255,0.9);
    transform: scale(1.15);
}

/* Card bottom row */
.mp-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.mp-card-name {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1;
}
.mp-card-meta {
    text-align: right;
}
.mp-card-expiry-label {
    font-size: 8px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1px;
}
.mp-card-expiry {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    letter-spacing: 1px;
}

/* Card type badge */
.mp-card-type-pill {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    margin-top: 4px;
}
.mp-card-type-premium {
    background: linear-gradient(90deg, #D4AF37, #F5D975, #D4AF37);
    color: #5A3E00;
}
.mp-card-type-standard {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.2);
}
.mp-card-type-basic {
    background: rgba(21,56,255,0.2);
    color: #FF6B6B;
    border: 1px solid rgba(21,56,255,0.3);
}

/* ============================================================
   ACTION PILLS ROW
   ============================================================ */
.mp-actions-row {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.mp-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--mp-white);
    border: 1.5px solid var(--mp-border);
    border-radius: 50px;
    padding: 11px 22px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mp-text);
    cursor: pointer;
    transition: all 0.22s ease;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.mp-action-pill:hover {
    background: var(--mp-red);
    border-color: var(--mp-red);
    color: var(--mp-white);
    box-shadow: 0 6px 20px rgba(21,56,255,0.3);
    transform: translateY(-2px);
}
.mp-action-pill .mp-pill-icon {
    width: 30px; height: 30px;
    background: var(--mp-red-soft);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    color: var(--mp-red);
    transition: all 0.22s;
}
.mp-action-pill:hover .mp-pill-icon {
    background: rgba(255,255,255,0.2);
    color: var(--mp-white);
}

/* BTC action pills */
.mp-action-pill.mp-btc-pill {
    border-color: rgba(247,147,26,0.3);
    background: rgba(247,147,26,0.04);
}
.mp-action-pill.mp-btc-pill .mp-pill-icon {
    background: rgba(247,147,26,0.1);
    color: #F7931A;
}
.mp-action-pill.mp-btc-pill:hover {
    background: #F7931A;
    border-color: #F7931A;
    color: var(--mp-white);
    box-shadow: 0 6px 20px rgba(247,147,26,0.3);
}
.mp-action-pill.mp-btc-pill:hover .mp-pill-icon {
    background: rgba(255,255,255,0.2);
    color: var(--mp-white);
}

/* ============================================================
   CONTENT GRID
   ============================================================ */
.mp-content-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    grid-template-rows: auto auto;
    gap: 24px;
    align-items: start;
}
.mp-col-left            { grid-column: 1; grid-row: 1 / 3; }
.mp-col-right-secondary { grid-column: 2; grid-row: 1; }
.mp-col-right-priority  { grid-column: 2; grid-row: 2; }

/* ============================================================
   WIDGETS / CARDS
   ============================================================ */
.mp-widget {
    background: var(--mp-white);
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border);
    box-shadow: var(--mp-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}
.mp-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 16px;
    border-bottom: 1px solid var(--mp-border);
}
.mp-widget-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--mp-text);
    margin: 0;
    letter-spacing: 0.2px;
}
.mp-widget-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--mp-red);
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: opacity 0.2s;
}
.mp-widget-link:hover { opacity: 0.7; color: var(--mp-red); text-decoration: none; }
.mp-widget-body { padding: 20px 22px; }

/* ============================================================
   TRANSACTION TABLE (desktop)
   ============================================================ */
.mp-tx-table {
    width: 100%;
    border-collapse: collapse;
}
.mp-tx-table th {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--mp-muted);
    padding: 0 14px 12px;
    border-bottom: 1px solid var(--mp-border);
    text-align: left;
}
.mp-tx-table td {
    padding: 14px;
    border-bottom: 1px solid #F5F5F8;
    font-size: 13px;
    color: var(--mp-text);
    vertical-align: middle;
}
.mp-tx-table tr:last-child td { border-bottom: none; }
.mp-tx-table tr:hover td { background: #FAFAFA; }

.mp-tx-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.mp-tx-icon.deposit { background: rgba(22,163,74,0.1); color: var(--mp-success); }
.mp-tx-icon.withdrawal { background: rgba(21,56,255,0.08); color: var(--mp-red); }

.mp-tx-name { font-weight: 700; font-size: 13.5px; }
.mp-tx-iban { color: var(--mp-muted); font-size: 11.5px; font-family: monospace; }

.mp-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.mp-status-badge.approved {
    background: rgba(22,163,74,0.1);
    color: var(--mp-success);
}
.mp-status-badge.pending {
    background: rgba(217,119,6,0.1);
    color: var(--mp-warning);
}

/* Transaction items (mobile / right panel) */
.mp-tx-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid #F5F5F8;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 8px;
    padding-left: 8px; padding-right: 8px;
    margin: 0 -8px;
}
.mp-tx-item:last-child { border-bottom: none; }
.mp-tx-item:hover { background: var(--mp-bg); }

.mp-tx-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mp-tx-item-info .mp-tx-item-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--mp-text);
    display: block;
}
.mp-tx-item-info .mp-tx-item-date {
    font-size: 11px;
    color: var(--mp-muted);
    display: block;
    margin-top: 1px;
}
.mp-tx-item-amount {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.mp-tx-item-amount.deposit { color: var(--mp-success); }
.mp-tx-item-amount.withdrawal { color: var(--mp-red); }

/* ============================================================
   CONVERSION WIDGET
   ============================================================ */
.mp-conversion-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mp-bg);
    border-radius: 12px;
    padding: 12px;
    margin: 16px 0;
}
.mp-conversion-box .form-select,
.mp-conversion-box .form-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 700;
    color: var(--mp-text);
    font-size: 14px;
    padding: 4px 8px;
}
.mp-swap-btn {
    width: 36px; height: 36px;
    background: var(--mp-white);
    border: 1.5px solid var(--mp-border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--mp-red);
    flex-shrink: 0;
    transition: all 0.2s;
}
.mp-swap-btn:hover {
    background: var(--mp-red);
    border-color: var(--mp-red);
    color: var(--mp-white);
}

/* ============================================================
   TRANSFER WIDGET
   ============================================================ */
.mp-transfer-input {
    display: flex;
    align-items: center;
    background: var(--mp-bg);
    border-radius: 12px;
    padding: 10px 16px;
    gap: 10px;
    margin: 12px 0;
}
.mp-transfer-input input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 600;
    font-size: 13.5px;
    flex: 1;
}
.mp-transfer-input button {
    background: var(--mp-red) !important;
    border: none;
    border-radius: 8px;
    color: white;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   QUICK TRANSFER (beneficiaries)
   ============================================================ */
.mp-beneficiaries {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.mp-beneficiary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.mp-beneficiary img,
.mp-beneficiary .destinataire {
    width: 46px; height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--mp-border);
    transition: border-color 0.2s;
}
.mp-beneficiary:hover img,
.mp-beneficiary:hover .destinataire { border-color: var(--mp-red); }
.mp-beneficiary-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--mp-muted);
    max-width: 50px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-add-person {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--mp-bg);
    border: 2px dashed var(--mp-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    color: var(--mp-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.mp-add-person:hover {
    border-color: var(--mp-red);
    color: var(--mp-red);
    background: var(--mp-red-soft);
}

/* ============================================================
   CARD ALERT (no card / inactive)
   ============================================================ */
.mp-card-alert {
    background: var(--mp-white);
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border);
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
}
.mp-card-alert img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 10px;
}
.mp-card-alert-body h6 {
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 4px;
}
.mp-card-alert-body p {
    font-size: 12.5px;
    color: var(--mp-muted);
    margin-bottom: 10px;
    line-height: 1.5;
}
.mp-btn-red {
    background: var(--mp-red) !important;
    border: none !important;
    color: var(--mp-white) !important;
    border-radius: 10px !important;
    padding: 8px 18px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    transition: all 0.2s !important;
}
.mp-btn-red:hover {
    background: var(--mp-red-dark) !important;
    box-shadow: 0 4px 16px rgba(21,56,255,0.3) !important;
}

/* ============================================================
   MODALS — Premium Style
   ============================================================ */

/* All modals */
.modal-content {
    border-radius: 18px !important;
    border: none !important;
    overflow: hidden !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25) !important;
}
.modal-header {
    background: var(--mp-black) !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
}
.modal-header .modal-title {
    color: var(--mp-white) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
}
.modal-header .btn-close,
.modal-header .close {
    filter: invert(1) !important;
    opacity: 0.6 !important;
}
.modal-header .btn-close:hover,
.modal-header .close:hover { opacity: 1 !important; }

.modal-body {
    background: var(--mp-white) !important;
    padding: 24px !important;
}
/* Detail rows */
.modal-body p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #F4F4F6;
    margin: 0;
    font-size: 13.5px;
}
.modal-body p:last-child { border-bottom: none; }
.modal-body p strong {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--mp-muted) !important;
    flex-shrink: 0;
    margin-right: 12px;
}

.modal-footer {
    background: #FAFAFA !important;
    border-top: 1px solid var(--mp-border) !important;
    padding: 16px 24px !important;
    gap: 10px !important;
}

/* Special modal headers */
#progressModal .modal-header { background: var(--mp-red) !important; }
#successBox .modal-header,
#successModal .modal-header,
#receiveBtcModal .modal-header { background: #16A34A !important; }
#errorModal .modal-header { background: #0A22CC !important; }
#autoplayModal .modal-header { background: var(--mp-black) !important; }
#modalEnTraitement .modal-header { background: var(--mp-black) !important; }

/* Center modals (icon-based) */
#successBox .modal-body,
#successModal .modal-body,
#errorModal .modal-body { text-align: center !important; }
#successBox .modal-body p,
#successModal .modal-body p,
#errorModal .modal-body p {
    display: block !important;
    border-bottom: none !important;
    font-size: 14px !important;
    color: var(--mp-text) !important;
}
#successBox .modal-body i { color: var(--mp-success) !important; font-size: 48px !important; margin-bottom: 14px; display: block; }
#errorModal .modal-body i { color: var(--mp-red) !important; font-size: 48px !important; margin-bottom: 14px; display: block; }

/* Progress bar */
#progressBar {
    background: var(--mp-red) !important;
    border-radius: 4px;
}
.progress {
    height: 8px !important;
    border-radius: 4px !important;
    background: var(--mp-bg) !important;
}

/* Btn styles in modals */
.modal .btn-primary {
    background: var(--mp-red) !important;
    border-color: var(--mp-red) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
}
.modal .btn-primary:hover {
    background: var(--mp-red-dark) !important;
    border-color: var(--mp-red-dark) !important;
}
.modal .btn-secondary {
    background: var(--mp-bg) !important;
    border-color: var(--mp-border) !important;
    color: var(--mp-text) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
}

/* ============================================================
   BOTTOM MODAL (Send Money / Transfer)
   ============================================================ */
.bottom-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}
.bottom-modal-content {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    background: var(--mp-white);
    border-radius: 24px 24px 0 0;
    padding: 28px 28px 32px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUpModal 0.35s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 -20px 60px rgba(0,0,0,0.2);
}
@keyframes slideUpModal {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
.bottom-modal-content h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 4px;
}
.bottom-modal-content .close-btn {
    position: absolute;
    top: 18px; right: 22px;
    font-size: 26px;
    cursor: pointer;
    color: var(--mp-muted);
    font-weight: 300;
    line-height: 1;
    transition: color 0.2s;
}
.bottom-modal-content .close-btn:hover { color: var(--mp-text); }
.bottom-modal-content .form-control {
    border-radius: 10px !important;
    border-color: var(--mp-border) !important;
    font-size: 13.5px !important;
    padding: 10px 14px !important;
}
.bottom-modal-content .form-control:focus {
    border-color: var(--mp-red) !important;
    box-shadow: 0 0 0 3px rgba(21,56,255,0.1) !important;
}
.bottom-modal-content .form-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: var(--mp-muted) !important;
    text-transform: uppercase !important;
}
.bottom-modal-content .btn-primary {
    background: var(--mp-red) !important;
    border-color: var(--mp-red) !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    padding: 12px !important;
    font-size: 14px !important;
}
.bottom-modal-content .btn-secondary {
    background: var(--mp-bg) !important;
    border-color: var(--mp-border) !important;
    color: var(--mp-text) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 12px !important;
}

/* BTC Modal */
.btc-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
}
.btc-modal-content {
    background: var(--mp-white);
    border-radius: 20px;
    padding: 28px;
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--mp-shadow-lg);
    position: relative;
    animation: fadeInScale 0.3s ease;
}
@keyframes fadeInScale {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.btc-modal-content h3 { font-size: 18px; font-weight: 800; margin-bottom: 20px; }
.btc-modal-content .form-control {
    border-radius: 10px !important;
    border-color: var(--mp-border) !important;
}
.btc-modal-content .form-control:focus {
    border-color: var(--mp-red) !important;
    box-shadow: 0 0 0 3px rgba(21,56,255,0.1) !important;
}
.btc-modal-content .close-btn {
    position: absolute;
    top: 16px; right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: var(--mp-muted);
}
.btc-modal .btn-withdraw,
.btc-modal-content .btn-withdraw {
    background: var(--mp-red) !important;
    border: none !important;
    border-radius: 12px !important;
    color: white !important;
    padding: 12px 28px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    cursor: pointer;
    width: 100%;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.input-wrapper .form-control { padding-right: 50px !important; }
.icon-btn {
    position: absolute;
    right: 10px;
    background: none !important;
    border: none !important;
    color: var(--mp-red) !important;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
}

.btc-summary {
    background: var(--mp-bg);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 12px;
}
.btc-info p {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--mp-text);
}
.btc-info p:last-child { margin-bottom: 0; }

/* ============================================================
   LOADER
   ============================================================ */
#mp-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}
.mp-loader-container { text-align: center; }
.mp-loader-gif { width: 72px; }
.mp-loader-text {
    margin-top: 12px;
    font-weight: 700;
    color: var(--mp-text);
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* ============================================================
   NOTIFICATION TOAST
   ============================================================ */
.mp-toast {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 100000;
    background: var(--mp-white);
    padding: 14px 20px;
    border-radius: 12px;
    border-bottom: 4px solid var(--mp-success);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    font-weight: 700;
    font-size: 13.5px;
    opacity: 0;
    transform: translateY(-10px);
    transition: 0.3s;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer.sticky-footer {
    background: var(--mp-white) !important;
    border-top: 1px solid var(--mp-border) !important;
    padding: 16px 28px !important;
}
footer.sticky-footer span {
    font-size: 12px !important;
    color: var(--mp-muted) !important;
    font-weight: 600 !important;
}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
.scroll-to-top {
    background: var(--mp-red) !important;
    border-radius: 50% !important;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
}
.scroll-to-top i { color: white !important; }

/* ============================================================
   ALERT GENERAL
   ============================================================ */
.alert-result {
    display: none;
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    width: 400px;
    z-index: 1050;
    padding: 0;
}
.alert-result .alert {
    background: var(--mp-red);
    color: white;
    border-radius: 12px;
    padding: 14px 20px;
    border: none;
    font-weight: 600;
    font-size: 13.5px;
    box-shadow: 0 6px 24px rgba(21,56,255,0.3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .mp-content-grid {
        grid-template-columns: 1fr;
        grid-template-rows: unset;
    }
    .mp-col-right-priority  { grid-column: auto; grid-row: auto; order: 1; }
    .mp-col-left            { grid-column: auto; grid-row: auto; order: 2; }
    .mp-col-right-secondary { grid-column: auto; grid-row: auto; order: 3; }
}
@media (max-width: 900px) {
    .mp-bank-card { width: 100%; max-width: 320px; margin: 0 auto; }
}
@media (max-width: 768px) {
    #content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    /* SB Admin 2's resize handler auto-adds body.sidebar-toggled on < 480px,
       which triggers a 6.5rem margin-left via a higher-specificity rule.
       Override it here so mobile layout stays full-width regardless. */
    body.sidebar-toggled #content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    body.sidebar-toggled #accordionSidebar {
        display: none !important;
    }
    /* When sidebar is explicitly opened via overlay, always show it —
       higher specificity (1,2,1) beats body.sidebar-toggled rule (1,1,1). */
    body.sidebar-toggled #accordionSidebar.mp-sidebar-open {
        display: flex !important;
    }
    #accordionSidebar {
        display: none !important;
        position: fixed !important;
        top: 0; left: 0;
        height: 100vh !important;
        z-index: 1001 !important;
        width: var(--mp-sidebar-w) !important;
        overflow-y: auto !important;
        flex-direction: column;
    }
    #accordionSidebar.mp-sidebar-open {
        display: flex !important;
        width: var(--mp-sidebar-w) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        animation: mp-sidebar-slide-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* Submenus: keep inline (not absolute-floating) inside mobile overlay */
    #accordionSidebar.mp-sidebar-open .nav-item .collapse,
    #accordionSidebar.mp-sidebar-open .nav-item .collapsing {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
    }
    #accordionSidebar.mp-sidebar-open .nav-item .collapsing {
        display: block !important;
        transition: height 0.22s ease !important;
    }
    #accordionSidebar.mp-sidebar-open .collapse-inner {
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 0 0 1rem;
    }
    /* Show full brand (logo + text) when overlay is open */
    #accordionSidebar.mp-sidebar-open .sidebar-brand {
        width: 100%;
        justify-content: flex-start !important;
        padding: 0 1.25rem !important;
        gap: 10px;
    }
    #accordionSidebar.mp-sidebar-open .sidebar-brand-text {
        display: block !important;
    }
    /* Hide section headings — cleaner on small overlay */
    #accordionSidebar.mp-sidebar-open .sidebar-heading {
        display: none !important;
    }
    /* Nav links: full width, left-aligned, single line */
    #accordionSidebar.mp-sidebar-open .nav-item .nav-link {
        width: 100% !important;
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px;
        white-space: nowrap;
    }
    #accordionSidebar.mp-sidebar-open .nav-item .nav-link span {
        display: inline !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
    }
    #accordionSidebar.mp-sidebar-open .nav-item .nav-link i {
        min-width: 1.25rem;
        margin-right: 0 !important;
    }
    /* Collapse items (sub-links) also full width */
    #accordionSidebar.mp-sidebar-open .collapse-item {
        white-space: nowrap;
        padding: 0.5rem 1rem !important;
    }
    .mp-content-area { padding: 16px !important; }
    .mp-actions-row { gap: 8px; }
    .mp-action-pill { padding: 9px 16px; font-size: 12px; }
    .mp-amount-text { font-size: 28px; }

    /* ── TOPBAR → BOTTOM NAV on mobile ─────────────────────────── */
    #accordionTopbar {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 62px !important;
        border-bottom: none !important;
        border-top: 1px solid rgba(0,0,0,0.14) !important;
        box-shadow: 0 -2px 16px rgba(21,56,255,0.22) !important;
        padding: 0 !important;
        z-index: 1050 !important;
        display: flex !important;
        align-items: stretch !important;
    }
    /* Prevent scroll-sticky logic from fighting the fixed-bottom position */
    #accordionTopbar.mp-topbar-sticky {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }
    /* Desktop hamburger hidden on mobile (replaced by Menu tab) */
    #accordionTopbar .mp-topbar-hamburger { display: none !important; }
    /* Search hidden on mobile */
    #accordionTopbar .mp-topbar-search { display: none !important; }

    /* Nav list: full-width horizontal row */
    .mp-topbar-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }
    /* Each tab item: equal flex, centered — margin:0 neutralises Bootstrap mx-1 */
    .mp-topbar-nav .mp-mobile-tab {
        display: flex !important;
        flex: 1 !important;
        align-items: stretch !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    /* Desktop-only items hidden */
    .mp-topbar-nav .topbar-divider { display: none !important; }
    .mp-topbar-nav .d-none.d-md-flex { display: none !important; }

    /* Tab link: column layout, vertically centered */
    .mp-tab-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        height: 62px !important;
        padding: 6px 2px !important;
        color: rgba(255,255,255,0.65) !important;
        text-decoration: none !important;
        transition: color 0.18s, background 0.18s !important;
        border-radius: 0 !important;
    }
    .mp-tab-link:hover,
    .mp-tab-link:focus {
        color: #fff !important;
        background: rgba(255,255,255,0.12) !important;
        text-decoration: none !important;
    }
    /* Active tab */
    .mp-tab-link.mp-tab-active {
        color: #fff !important;
        background: rgba(255,255,255,0.16) !important;
    }

    /* Show label text below icon */
    .mp-tab-label {
        display: block !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0px !important;
    }
    /* Icon size */
    .mp-tab-icon i { font-size: 17px !important; }
    /* Avatar in profile tab */
    .mp-tab-icon .img-profile {
        width: 24px !important;
        height: 24px !important;
        border-width: 1px !important;
    }
    /* Dropdown → open upward */
    .mp-topbar-nav .dropdown-menu {
        bottom: calc(100% + 6px) !important;
        top: auto !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }
    /* Ensure right-aligned dropdowns don't overflow viewport left edge */
    .mp-topbar-nav .dropdown-menu-right {
        right: 0 !important;
        left: auto !important;
    }
    /* Prevent content from being hidden behind bottom nav */
    #content { padding-bottom: 70px !important; }

    /* Language tab dropdown — élimine la boîte blanche + animation GTranslate */
    #mp-lang-dropdown {
        --bs-dropdown-bg: transparent;
        --bs-dropdown-border-color: transparent;
        background-color: transparent !important;
        background:       transparent !important;
        border:           none !important;
        box-shadow:       none !important;
        padding:          4px !important;
        min-width:        0 !important;
        overflow:         visible !important;
    }
    /* Neutralise l'animation haut→bas du widget GTranslate à l'intérieur du dropdown */
    #mp-lang-dropdown,
    #mp-lang-dropdown * {
        animation-duration:   0.001ms !important;
        animation-delay:      0s     !important;
        transition-duration:  0.001ms !important;
        transition-delay:     0s     !important;
    }
    /* Empêche le widget de s'échapper en position fixed vers le haut de l'écran */
    #mp-lang-dropdown .gtranslate-wrapper {
        display: flex;
        justify-content: flex-end;
        contain: layout;
    }

}



/* Mobile sidebar backdrop */
#mp-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    z-index: 1000;
    transition: opacity 0.3s;
}
#mp-sidebar-overlay.active { display: block; }
@keyframes mp-sidebar-slide-in {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@media (max-width: 576px) {
    .mp-actions-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .mp-bank-card { width: 290px; height: 178px; }
}

/* ============================================================
   SIDEBAR — SCROLL FIX
   ============================================================ */
#accordionSidebar {
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.12) transparent !important;
}
#accordionSidebar::-webkit-scrollbar {
    display: block !important;
    width: 4px !important;
}
#accordionSidebar::-webkit-scrollbar-track {
    background: transparent !important;
}
#accordionSidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12) !important;
    border-radius: 4px !important;
}
#accordionSidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.22) !important;
}

/* ============================================================
   CARD TAB SWITCHER
   ============================================================ */
.mp-card-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 4px;
    width: 310px;
}
.mp-card-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: rgba(255,255,255,0.45);
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.mp-card-tab-btn.active {
    background: var(--mp-white);
    color: var(--mp-black);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.mp-card-tab-btn i { font-size: 12px; }

/* ============================================================
   CVV ON CARD
   ============================================================ */
.mp-card-cvv {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    letter-spacing: 1px;
    margin-top: 2px;
}

/* ============================================================
   BTC CARD THEME
   ============================================================ */
.mp-btc-card {
    background: linear-gradient(145deg, #1C1200 0%, #2E1E00 45%, #1A1100 100%) !important;
    box-shadow:
        0 20px 60px rgba(247,147,26,0.25),
        inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
.mp-btc-card::before {
    background: radial-gradient(circle, rgba(247,147,26,0.22) 0%, transparent 70%) !important;
}
.mp-btc-card::after {
    background: linear-gradient(90deg, #C27000, #F7931A, #FFB347, #F7931A, #C27000) !important;
}
.mp-btc-card:hover {
    box-shadow:
        0 30px 80px rgba(247,147,26,0.35),
        inset 0 1px 0 rgba(255,255,255,0.09) !important;
}
.mp-btc-brand {
    color: #F7931A !important;
    font-size: 12px !important;
}
.mp-btc-contactless span {
    background: rgba(247,147,26,0.4) !important;
}
.mp-btc-chip {
    background: linear-gradient(135deg, #C27000 0%, #F7931A 40%, #FFD080 55%, #F7931A 70%, #C27000 100%) !important;
}
.mp-btc-network-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(247,147,26,0.7);
    align-self: center;
}
.mp-btc-address {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    color: rgba(255,255,255,0.7) !important;
}
.mp-card-type-btc {
    background: rgba(247,147,26,0.18);
    color: #F7931A;
    border: 1px solid rgba(247,147,26,0.3);
}

/* ============================================================
   UNIFIED CARDS SLIDER (desktop + mobile)
   ============================================================ */
.mp-cards-slider {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    padding: 4px 0 20px;
    margin-bottom: 20px;
}
.mp-cards-slider::-webkit-scrollbar { display: none; }

.mp-card-slide {
    flex-shrink: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}
.mp-slide-balance {
    width: 470px;
}
.mp-slide-card {
    width: 350px;
}

/* Balance card fills full slide height */
.mp-slide-balance .mp-balance-card {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Bank / BTC card fills full slide height */
.mp-slide-card .mp-bank-card {
    flex: 1;
    width: 100% !important;
    height: auto !important;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .mp-cards-slider {
        gap: 0;
        padding: 4px 0 16px;
    }
    .mp-card-slide,
    .mp-slide-balance,
    .mp-slide-card {
        width: 100%;
        scroll-snap-align: center;
    }
    .mp-slide-card .mp-bank-card {
        max-width: 100% !important;
        transform: none !important;
    }
    .mp-slide-card .mp-bank-card:hover {
        transform: none !important;
    }
}

/* ============================================================
   OVERRIDE SB-ADMIN-2 CONFLICTS
   ============================================================ */
/* Remove gradient from sidebar (SB Admin uses bg-gradient-primary) */
.bg-gradient-primary {
    background: var(--mp-black) !important;
    background-image: none !important;
}
/* Fix content wrapper margin for sb-admin structure */
body.sidebar-toggled #content-wrapper {
    margin-left: 6.5rem !important;
}
body.sidebar-toggled #accordionSidebar {
    width: 6.5rem !important;
    overflow: visible !important;
}
body.sidebar-toggled #accordionSidebar .sidebar-heading,
body.sidebar-toggled #accordionSidebar .sidebar-brand-text,
body.sidebar-toggled #accordionSidebar .nav-link span,
body.sidebar-toggled #accordionSidebar .collapse-inner {
    display: none !important;
}
body.sidebar-toggled #accordionSidebar .nav-link {
    justify-content: center !important;
    padding: 12px !important;
    margin: 0 6px !important;
}
body.sidebar-toggled #accordionSidebar .sidebar-brand {
    justify-content: center !important;
    padding: 18px 10px !important;
}
body.sidebar-toggled #accordionSidebar .sidebar-card { display: none !important; }

/* Remove blue text-primary from SB Admin */
.text-primary { color: var(--mp-red) !important; }
.btn-primary:not(.modal .btn-primary) {
    background: var(--mp-red) !important;
    border-color: var(--mp-red) !important;
}
a { color: var(--mp-red); }
a:hover { color: var(--mp-red-dark); }

/* Transaction table from dashboard.css override */
.transaction-table { width: 100% !important; }
.transaction-row td { padding: 12px 8px !important; }
.status-completed {
    background: rgba(22,163,74,0.1) !important;
    color: var(--mp-success) !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
.status-reviewed {
    background: rgba(217,119,6,0.1) !important;
    color: var(--mp-warning) !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* Transaction items from dashboard */
.transaction-item {
    border-radius: 10px !important;
    transition: background 0.15s !important;
    padding: 12px 10px !important;
    margin: 0 -10px !important;
    cursor: pointer !important;
}
.transaction-item:hover { background: var(--mp-bg) !important; }
.transaction-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.icon-container {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--mp-bg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.icon-container .icon {
    width: 20px; height: 20px;
    object-fit: contain;
}

/* Card area (existing .card-item) */
.card-item, .card-custom {
    border-radius: var(--mp-radius) !important;
    border: 1px solid var(--mp-border) !important;
    box-shadow: var(--mp-shadow) !important;
}

/* Quick transfer card */
.card.mb-3, .card.mb-4 {
    border-radius: var(--mp-radius) !important;
    border: 1px solid var(--mp-border) !important;
    box-shadow: var(--mp-shadow) !important;
    padding: 20px !important;
}
.card.mb-3 h5, .card.mb-4 h5 {
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
}

/* Destinataire avatars */
img.destinataire {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2.5px solid var(--mp-border) !important;
    cursor: pointer !important;
    transition: border-color 0.2s !important;
}
img.destinataire:hover { border-color: var(--mp-red) !important; }

.add-person {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    border: 2px dashed var(--mp-border) !important;
    background: var(--mp-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: var(--mp-muted) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.add-person:hover {
    border-color: var(--mp-red) !important;
    color: var(--mp-red) !important;
}

.btn-purple {
    background: var(--mp-red) !important;
    border-color: var(--mp-red) !important;
    color: white !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
.btn-purple:hover { background: var(--mp-red-dark) !important; }

/* Quick transfer card input */
.quick-transfer { gap: 10px; }

/* Dropdown menus */
.dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid var(--mp-border) !important;
    box-shadow: var(--mp-shadow-lg) !important;
}
.dropdown-item:hover {
    background: var(--mp-red-soft) !important;
    color: var(--mp-red) !important;
}

/* Topbar user area */
#userDropdown img,
#uploadedAvatar {
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--mp-border) !important;
}

/* Form controls global */
.form-control:focus,
.form-select:focus {
    border-color: var(--mp-red) !important;
    box-shadow: 0 0 0 3px rgba(21,56,255,0.1) !important;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.mp-page-header {
    margin-bottom: 24px;
}
.mp-page-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--mp-text);
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}
.mp-page-subtitle {
    font-size: 13.5px;
    color: var(--mp-muted);
    margin: 0;
    line-height: 1.55;
}

/* ============================================================
   SPLIT CARD (left info panel + right form)
   ============================================================ */
.mp-split-card {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--mp-shadow-lg);
    margin-bottom: 28px;
}
.mp-split-left {
    background: linear-gradient(145deg, var(--mp-black) 0%, #050D2E 55%, #0A1850 100%);
    color: var(--mp-white);
    padding: 48px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.mp-split-left::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(21,56,255,0.22) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.mp-split-left::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mp-red), #4D6BFF, var(--mp-red));
}
.mp-split-left h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--mp-white);
    line-height: 1.2;
}
.mp-split-left p {
    opacity: 0.85;
    line-height: 1.65;
    font-size: 0.98rem;
    margin-bottom: 18px;
    color: rgba(255,255,255,0.85);
}
.mp-split-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--mp-white);
    margin-bottom: 8px;
    width: fit-content;
}
.mp-split-note {
    margin-top: 22px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    padding: 16px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.82);
}
.mp-split-note strong {
    display: block;
    margin-bottom: 6px;
    color: var(--mp-white);
    font-size: 0.9rem;
}
.mp-split-right {
    background: var(--mp-white);
    padding: 48px 40px;
}
.mp-split-right h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mp-text);
    margin-bottom: 6px;
}
.mp-split-right .mp-split-subtitle {
    color: var(--mp-muted);
    font-size: 13.5px;
    margin-bottom: 28px;
}
@media (max-width: 991px) {
    .mp-split-card { grid-template-columns: 1fr; }
    .mp-split-left { padding: 36px 24px; }
    .mp-split-right { padding: 36px 24px; }
}

/* ============================================================
   CARD SELECTION PAGE (cards.php)
   ============================================================ */
.mp-card-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}
@media (max-width: 991px) { .mp-card-plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .mp-card-plans { grid-template-columns: 1fr; } }

.mp-plan-card {
    background: var(--mp-white);
    border: 1.5px solid var(--mp-border);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
    display: flex;
    flex-direction: column;
}
.mp-plan-card:hover {
    border-color: var(--mp-red);
    box-shadow: 0 8px 32px rgba(21,56,255,0.12);
}
.mp-plan-card.mp-plan-selected {
    border-color: var(--mp-red);
    box-shadow: 0 0 0 3px rgba(21,56,255,0.15);
}
.mp-plan-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.mp-plan-body {
    padding: 20px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mp-plan-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--mp-text);
    margin-bottom: 2px;
}
.mp-plan-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--mp-red);
    margin-bottom: 12px;
}
.mp-plan-badge-offer {
    background: rgba(21,56,255,0.08);
    border: 1px solid rgba(21,56,255,0.2);
    color: var(--mp-red);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 14px;
    text-align: center;
}
.mp-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    flex: 1;
}
.mp-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #F5F5F8;
    font-size: 13px;
    color: var(--mp-text);
}
.mp-plan-features li:last-child { border-bottom: none; }
.mp-plan-features li .mp-feat-icon {
    color: var(--mp-red);
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}
.mp-plan-features li .mp-feat-label { font-weight: 700; font-size: 12.5px; }
.mp-plan-features li .mp-feat-desc  { font-size: 12px; color: var(--mp-muted); margin-top: 1px; }
.mp-plan-btn {
    background: var(--mp-red) !important;
    border: none !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 11px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s !important;
}
.mp-plan-btn:hover:not(:disabled) {
    background: var(--mp-red-dark) !important;
    box-shadow: 0 4px 16px rgba(21,56,255,0.28) !important;
}
.mp-plan-btn:disabled {
    background: #E0E0E8 !important;
    color: var(--mp-muted) !important;
    cursor: not-allowed;
}
.mp-plan-selected-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(22,163,74,0.1);
    border: 1px solid rgba(22,163,74,0.25);
    color: var(--mp-success);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 700;
    margin-top: 8px;
}

/* ============================================================
   TRACKING PAGE
   ============================================================ */
.mp-search-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 20px;
}
.mp-search-row input {
    flex: 1;
    border-radius: 12px !important;
    border: 1.5px solid var(--mp-border) !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    transition: all 0.2s;
}
.mp-search-row input:focus {
    border-color: var(--mp-red) !important;
    box-shadow: 0 0 0 3px rgba(21,56,255,0.1) !important;
    outline: none !important;
}
.mp-search-row button {
    background: var(--mp-red);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.mp-search-row button:hover {
    background: var(--mp-red-dark);
    box-shadow: 0 4px 16px rgba(21,56,255,0.3);
}

/* ============================================================
   FILTER ROW (balance_details filter form)
   ============================================================ */
.mp-filter-form {
    background: var(--mp-bg);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}
.mp-filter-form .mp-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 160px;
}
.mp-filter-form label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mp-muted);
}
.mp-filter-form .form-control,
.mp-filter-form .form-select {
    border-radius: 10px !important;
    border: 1.5px solid var(--mp-border) !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
}
.mp-filter-form button[type="submit"] {
    background: var(--mp-red);
    border: none;
    color: white;
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    align-self: flex-end;
    white-space: nowrap;
}
.mp-filter-form button[type="submit"]:hover {
    background: var(--mp-red-dark);
    box-shadow: 0 4px 14px rgba(21,56,255,0.25);
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.mp-profile-header {
    display: flex;
    align-items: center;
    gap: 22px;
    background: var(--mp-white);
    border-radius: 18px;
    padding: 28px 32px;
    border: 1px solid var(--mp-border);
    box-shadow: var(--mp-shadow);
    margin-bottom: 24px;
}
.mp-profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 3px solid var(--mp-red);
    flex-shrink: 0;
    overflow: hidden;
}
.mp-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mp-profile-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--mp-text);
    margin-bottom: 4px;
}
.mp-profile-email { font-size: 13px; color: var(--mp-muted); margin-bottom: 8px; }
.mp-statut-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
}
.mp-statut-badge.active {
    background: rgba(22,163,74,0.1);
    border: 1px solid rgba(22,163,74,0.25);
    color: var(--mp-success);
}
.mp-statut-badge.inactive {
    background: rgba(21,56,255,0.08);
    border: 1px solid rgba(21,56,255,0.2);
    color: var(--mp-red);
}
.mp-statut-badge.pending {
    background: rgba(217,119,6,0.08);
    border: 1px solid rgba(217,119,6,0.2);
    color: var(--mp-warning);
}

/* Upload box */
.mp-upload-box {
    border: 2px dashed var(--mp-red);
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
.mp-upload-box:hover {
    background: rgba(21,56,255,0.04);
    box-shadow: 0 4px 16px rgba(21,56,255,0.08);
}
.mp-upload-box i { color: var(--mp-red); font-size: 28px; margin-bottom: 10px; display: block; }
.mp-upload-box p { font-size: 13px; color: var(--mp-muted); margin: 0; }

/* ============================================================
   PERSONAL INFORMATION WIDGET
   ============================================================ */
.mp-info-badge {
    background: var(--mp-red);
    color: var(--mp-white);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 1px;
    margin-left: auto;
}

/* ── Intro ── */
.mp-info-form-wrap { padding: 22px; }
.mp-info-intro {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--mp-muted);
    background: rgba(21,56,255,0.04);
    border: 1px solid rgba(21,56,255,0.1);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}
.mp-info-intro i { color: var(--mp-red); flex-shrink: 0; margin-top: 1px; }

/* ── 2-col grid ── */
.mp-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 576px) { .mp-info-grid { grid-template-columns: 1fr; } }

/* ── Field ── */
.mp-info-field { display: flex; flex-direction: column; gap: 5px; }
.mp-info-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--mp-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Input with icon ── */
.mp-info-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.mp-info-input-icon {
    position: absolute;
    left: 12px;
    color: var(--mp-muted);
    font-size: 13px;
    pointer-events: none;
    transition: color 0.2s;
}
.mp-info-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1.5px solid var(--mp-border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mp-text);
    background: var(--mp-white);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
}
.mp-info-input:focus {
    border-color: var(--mp-red);
    box-shadow: 0 0 0 3px rgba(21,56,255,0.08);
}
.mp-info-input:focus + .mp-info-input-icon,
.mp-info-input-wrap:focus-within .mp-info-input-icon { color: var(--mp-red); }
.mp-info-input.is-invalid { border-color: var(--mp-red) !important; box-shadow: none !important; }
.mp-info-disabled { opacity: 0.65; }
.mp-info-disabled .mp-info-input { background: var(--mp-bg); cursor: not-allowed; }

.mp-info-error {
    font-size: 11px;
    color: var(--mp-red);
    margin: 0;
    display: none;
    padding-left: 2px;
}
.mp-info-error.visible { display: block; }

/* ── Submit ── */
.mp-info-submit {
    padding-top: 20px;
    margin-top: 6px;
    border-top: 1px solid var(--mp-border);
}

/* ── Read-only view ── */
.mp-info-readonly { padding: 0; }
.mp-info-verified-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--mp-border);
}
.mp-info-lock-note {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: var(--mp-muted);
    font-weight: 600;
}
.mp-info-rows { padding: 0 22px 4px; }
.mp-info-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--mp-border);
}
.mp-info-row:last-child { border-bottom: none; }
.mp-info-row-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(21,56,255,0.07);
    color: var(--mp-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.mp-info-row-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.mp-info-row-label {
    font-size: 10.5px;
    color: var(--mp-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mp-info-row-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--mp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   KYC — IDENTITY VERIFICATION WIDGET
   ============================================================ */

/* Document type card selector */
.mp-doc-type-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.mp-doc-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 12px;
    border: 2px solid var(--mp-border);
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    background: var(--mp-white);
    transition: all 0.22s;
    user-select: none;
}
.mp-doc-type-card:hover {
    border-color: var(--mp-red);
    background: rgba(21,56,255,0.03);
}
.mp-doc-type-card.active {
    border-color: var(--mp-red);
    background: rgba(21,56,255,0.06);
    box-shadow: 0 0 0 3px rgba(21,56,255,0.1);
}
.mp-doc-type-card i { font-size: 26px; color: var(--mp-muted); transition: color 0.2s; }
.mp-doc-type-card:hover i,
.mp-doc-type-card.active i  { color: var(--mp-red); }
.mp-doc-type-card strong { font-size: 13px; font-weight: 800; color: var(--mp-text); }
.mp-doc-type-card span   { font-size: 11px; color: var(--mp-muted); }

/* Form wrapper */
.mp-kyc-docs-form { padding: 22px; }
.mp-kyc-docs-intro {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--mp-muted);
    background: rgba(21,56,255,0.04);
    border: 1px solid rgba(21,56,255,0.1);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}
.mp-kyc-docs-intro i { color: var(--mp-red); flex-shrink: 0; margin-top: 1px; }
.mp-kyc-doc-type-section { margin-bottom: 20px; }
.mp-kyc-docs-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--mp-text);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
}

/* Upload slot */
.mp-upload-slot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border: 2px dashed var(--mp-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--mp-bg);
}
.mp-upload-slot:hover {
    border-color: var(--mp-red);
    background: rgba(21,56,255,0.03);
}
.mp-upload-slot-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: rgba(21,56,255,0.08);
    color: var(--mp-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.2s;
}
.mp-upload-slot-info { flex: 1; min-width: 0; }
.mp-upload-slot-info strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--mp-text);
}
.mp-upload-slot-info span {
    font-size: 11px;
    color: var(--mp-muted);
}
.mp-upload-slot-action {
    color: var(--mp-muted);
    font-size: 17px;
    flex-shrink: 0;
    transition: color 0.2s;
}
.mp-upload-slot.mp-upload-box--ok {
    border-style: solid;
    border-color: #16A34A;
    background: rgba(22,163,74,0.03);
}
.mp-upload-slot.mp-upload-box--ok .mp-upload-slot-icon {
    background: rgba(22,163,74,0.1);
    color: #16A34A;
}
.mp-upload-slot.mp-upload-box--ok .mp-upload-slot-action { color: #16A34A; }
.mp-upload-slot.mp-upload-box--error {
    border-style: solid;
    border-color: var(--mp-red);
    background: rgba(21,56,255,0.03);
}
.mp-upload-slot.mp-upload-box--error .mp-upload-slot-action { color: var(--mp-red); }

/* File preview */
.preview { margin-bottom: 14px; }
.preview img {
    max-height: 96px;
    width: auto;
    max-width: 100%;
    border-radius: 8px;
    margin-top: 8px;
    border: 1px solid var(--mp-border);
    display: block;
}
.preview p {
    font-size: 12px;
    color: var(--mp-muted);
    margin: 6px 0 0;
    padding: 6px 10px;
    background: var(--mp-bg);
    border-radius: 6px;
    border: 1px solid var(--mp-border);
}

/* Rejected doc banner */
.mp-kyc-doc-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(21,56,255,0.05);
    border-left: 3px solid var(--mp-red);
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 0 8px 8px 0;
    font-size: 12px;
    color: var(--mp-red);
}
.mp-kyc-doc-error > i { font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.mp-kyc-doc-error strong { display: block; font-weight: 800; margin-bottom: 1px; }
.mp-kyc-doc-error p { margin: 0; opacity: 0.8; }

/* Submit area */
.mp-kyc-docs-submit {
    padding-top: 18px;
    margin-top: 6px;
    border-top: 1px solid var(--mp-border);
}

/* Mobile */
@media (max-width: 480px) {
    .mp-doc-type-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .mp-doc-type-card { padding: 14px 8px; }
    .mp-doc-type-card i { font-size: 22px; }
    .mp-kyc-docs-form { padding: 14px; }
    .mp-kyc-btn-primary { width: 100%; justify-content: center; }
}

/* ============================================================
   KYC — FACIAL VERIFICATION WIDGET
   ============================================================ */
.mp-kyc-widget .mp-widget-header {
    background: linear-gradient(135deg, #0D0D0D 0%, #1a1a2e 100%);
    border-radius: var(--mp-radius) var(--mp-radius) 0 0;
    padding: 16px 22px;
}
.mp-kyc-widget .mp-widget-title { color: var(--mp-white); }
.mp-kyc-badge {
    background: var(--mp-red);
    color: var(--mp-white);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 1px;
    margin-left: auto;
}

/* ── State screens ── */
.mp-kyc-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 44px 28px;
}
.mp-kyc-state h5 {
    font-size: 16px;
    font-weight: 800;
    color: var(--mp-text);
    margin: 18px 0 6px;
}
.mp-kyc-state p {
    font-size: 13px;
    color: var(--mp-muted);
    line-height: 1.65;
    margin-bottom: 20px;
}

/* Pending: pulsing ring */
.mp-kyc-pulse-ring {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(21,56,255,0.07);
    border: 2px solid rgba(21,56,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: mp-kyc-pulse 2.2s ease-in-out infinite;
}
.mp-kyc-pulse-ring::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(21,56,255,0.1);
    animation: mp-kyc-pulse-outer 2.2s ease-in-out infinite 0.35s;
}
.mp-kyc-pulse-icon { color: var(--mp-red); font-size: 26px; }
@keyframes mp-kyc-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(21,56,255,0.18); }
    50%       { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(21,56,255,0); }
}
@keyframes mp-kyc-pulse-outer {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0; transform: scale(1.18); }
}
.mp-kyc-dots { display: flex; gap: 6px; }
.mp-kyc-dots span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--mp-red);
    opacity: 0.25;
    animation: mp-kyc-dot-blink 1.5s ease-in-out infinite;
}
.mp-kyc-dots span:nth-child(2) { animation-delay: 0.22s; }
.mp-kyc-dots span:nth-child(3) { animation-delay: 0.44s; }
@keyframes mp-kyc-dot-blink {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40%            { opacity: 1;   transform: scale(1.15); }
}

/* Approved: success icon */
.mp-kyc-success-icon {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16A34A, #22c55e);
    color: white;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(22,163,74,0.28);
    animation: mp-kyc-pop 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes mp-kyc-pop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.mp-kyc-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(22,163,74,0.08);
    color: #16A34A;
    border: 1px solid rgba(22,163,74,0.22);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
}

/* ── Rejected banner ── */
.mp-kyc-rejected-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(21,56,255,0.05);
    border-left: 3px solid var(--mp-red);
    padding: 14px 20px;
    margin: 20px 22px 0;
    border-radius: 0 10px 10px 0;
    color: var(--mp-red);
    font-size: 13px;
}
.mp-kyc-rejected-banner > i { font-size: 17px; margin-top: 2px; flex-shrink: 0; }
.mp-kyc-rejected-banner strong { display: block; font-weight: 800; margin-bottom: 2px; }
.mp-kyc-rejected-banner p { margin: 0; opacity: 0.82; }

/* ── Step indicator ── */
.mp-kyc-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 22px 0;
}
.mp-kyc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 48px;
}
.mp-kyc-step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--mp-border);
    background: var(--mp-white);
    color: var(--mp-muted);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.mp-kyc-step.active .mp-kyc-step-num {
    background: var(--mp-red);
    border-color: var(--mp-red);
    color: white;
    box-shadow: 0 2px 10px rgba(21,56,255,0.3);
}
.mp-kyc-step.done .mp-kyc-step-num {
    background: #16A34A;
    border-color: #16A34A;
    color: white;
}
.mp-kyc-step-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--mp-muted);
    white-space: nowrap;
}
.mp-kyc-step.active .mp-kyc-step-label { color: var(--mp-red); }
.mp-kyc-step.done  .mp-kyc-step-label  { color: #16A34A; }
.mp-kyc-step-line {
    flex: 1;
    height: 2px;
    background: var(--mp-border);
    min-width: 36px;
    max-width: 80px;
    margin-bottom: 16px;
    transition: background 0.3s;
}
.mp-kyc-step-line.done { background: #16A34A; }

/* ── Camera frame ── */
.mp-kyc-cam-wrapper {
    padding: 18px 22px 0;
    display: flex;
    justify-content: center;
}
.mp-kyc-frame {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 3/4;
    border-radius: 18px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 10px 36px rgba(0,0,0,0.22);
}
#videoElement {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    display: block;
}
.mp-kyc-oval-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.mp-kyc-rec-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(21,56,255,0.88);
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 1px;
    backdrop-filter: blur(4px);
}
.mp-kyc-rec-dot {
    width: 6px; height: 6px;
    background: white;
    border-radius: 50%;
    animation: mp-kyc-rec-blink 1s ease-in-out infinite;
}
@keyframes mp-kyc-rec-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.15; }
}

/* ── Progress ring (overlay inside camera frame) ── */
.mp-kyc-progress-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 16px 12px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
}
.mp-kyc-progress-wrap {
    display: inline-flex;
    position: relative;
    width: 80px;
    height: 80px;
}
.mp-kyc-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.mp-kyc-ring-bg  { fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 8; }
.mp-kyc-ring-arc {
    fill: none;
    stroke: var(--mp-red);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 327;
    stroke-dashoffset: 327;
}
@keyframes fillProgress {
    from { stroke-dashoffset: 327; }
    to   { stroke-dashoffset: 0; }
}
.mp-kyc-ring-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}
.mp-kyc-ring-inner span { font-size: 20px; font-weight: 900; color: white; }
.mp-kyc-ring-inner small { font-size: 9px; color: rgba(255,255,255,0.7); font-weight: 600; }
.mp-kyc-recording-label {
    font-size: 11px;
    color: rgba(255,255,255,0.8);
    margin: 6px 0 0;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ── Hint text ── */
.mp-kyc-hint-text {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--mp-muted);
    text-align: center;
    padding: 14px 22px 0;
    margin: 0;
    line-height: 1.5;
}
.mp-kyc-hint-text i { color: var(--mp-red); flex-shrink: 0; margin-top: 1px; }

/* ── Action buttons ── */
.mp-kyc-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 16px 22px;
    flex-wrap: wrap;
}
.mp-kyc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mp-red);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 26px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(21,56,255,0.22);
}
.mp-kyc-btn-primary:hover:not(:disabled) {
    background: #a80202;
    box-shadow: 0 6px 18px rgba(21,56,255,0.35);
    transform: translateY(-1px);
}
.mp-kyc-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.mp-kyc-btn-photo { background: #d97706; box-shadow: 0 4px 14px rgba(217,119,6,0.22); }
.mp-kyc-btn-photo:hover:not(:disabled) {
    background: #b45309;
    box-shadow: 0 6px 18px rgba(217,119,6,0.35);
}

/* ── Preview section ── */
.mp-kyc-preview {
    padding: 0 22px 22px;
    animation: mp-kyc-fade-in 0.35s ease;
}
@keyframes mp-kyc-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mp-kyc-preview-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--mp-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
#recordedVideo {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto 12px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: scaleX(-1);
}
.mp-kyc-img-preview {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto 12px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.mp-kyc-preview-hint {
    font-size: 12px;
    color: var(--mp-muted);
    margin-bottom: 14px;
}
#recordedVideoSection .btn-primary {
    background: var(--mp-red) !important;
    border-color: var(--mp-red) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    box-shadow: 0 4px 12px rgba(21,56,255,0.22) !important;
}
#recordedVideoSection .btn-danger {
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
}

/* ── Responsive ── */
@media (max-width: 576px) {
    .mp-kyc-steps    { padding: 16px 14px 0; }
    .mp-kyc-step-line { min-width: 22px; }
    .mp-kyc-cam-wrapper { padding: 14px 12px 0; }
    .mp-kyc-actions  { padding: 14px 12px; }
    .mp-kyc-preview  { padding: 0 12px 16px; }
    .mp-kyc-hint-text { padding: 12px 12px 0; }
    .mp-kyc-btn-primary { width: 100%; justify-content: center; }
    .mp-kyc-rejected-banner { margin: 14px 12px 0; }
}

/* ============================================================
   MESSAGES PAGE
   ============================================================ */
.mp-message-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mp-message-item {
    background: var(--mp-bg);
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid var(--mp-border);
    transition: border-color 0.2s;
}
.mp-message-item.unread { border-left-color: var(--mp-red); background: rgba(21,56,255,0.03); }
.mp-message-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 6px;
}
.mp-message-subject { font-weight: 700; font-size: 13.5px; color: var(--mp-text); }
.mp-message-date { font-size: 11.5px; color: var(--mp-muted); }
.mp-message-body { font-size: 13px; color: var(--mp-muted); line-height: 1.5; }

/* Compose form */
.mp-compose-form .form-control {
    border-radius: 12px !important;
    border: 1.5px solid var(--mp-border) !important;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    margin-bottom: 14px !important;
}
.mp-compose-form .form-control:focus {
    border-color: var(--mp-red) !important;
    box-shadow: 0 0 0 3px rgba(21,56,255,0.1) !important;
}

/* ============================================================
   LOAN / CREDIT PAGES
   ============================================================ */
.mp-loan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}
.mp-loan-card {
    background: var(--mp-white);
    border: 1.5px solid var(--mp-border);
    border-radius: 16px;
    padding: 22px;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mp-loan-card:hover {
    border-color: rgba(21,56,255,0.3);
    box-shadow: 0 6px 24px rgba(21,56,255,0.08);
}
.mp-loan-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(21,56,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: var(--mp-red);
}
.mp-loan-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--mp-muted);
}
.mp-loan-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--mp-text);
    margin-top: 2px;
}
.mp-loan-sub { font-size: 12px; color: var(--mp-muted); }

/* Repayment table */
.mp-repay-table th { background: var(--mp-bg) !important; }
.mp-repay-table tr.overdue td { background: rgba(21,56,255,0.04); }
.mp-repay-table tr.paid td { background: rgba(22,163,74,0.04); }

/* ============================================================
   UTILITY
   ============================================================ */
.hidden { display: none !important; }

/* ============================================================
   MULTI-STEP FORM
   ============================================================ */

/* Step panels — hidden by default, shown when .active */
.step { display: none; }
.step.active {
    display: block;
    animation: mp-step-slide-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mp-step-slide-in {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Step wizard progress indicator */
.mp-step-wizard {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 8px 36px;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mp-step-wizard::-webkit-scrollbar { display: none; }

.mp-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 80px;
    flex-shrink: 0;
    cursor: default;
}

.mp-step-circle {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 2.5px solid var(--mp-border);
    background: var(--mp-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--mp-muted);
    transition: all 0.35s ease;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.mp-step-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--mp-muted);
    text-align: center;
    line-height: 1.45;
    transition: color 0.35s;
    white-space: nowrap;
}

.mp-step-connector {
    flex: 1;
    height: 2px;
    background: var(--mp-border);
    min-width: 28px;
    max-width: 90px;
    align-self: flex-start;
    margin-top: 23px;
    transition: background 0.35s;
    flex-shrink: 1;
}

/* Active step */
.mp-step-item.active .mp-step-circle {
    background: var(--mp-red);
    border-color: var(--mp-red);
    color: var(--mp-white);
    box-shadow: 0 4px 18px rgba(21,56,255,0.38);
    transform: scale(1.1);
}
.mp-step-item.active .mp-step-label {
    color: var(--mp-red);
    font-weight: 800;
}

/* Completed step */
.mp-step-item.done .mp-step-circle {
    background: var(--mp-success);
    border-color: var(--mp-success);
    color: var(--mp-white);
    transform: scale(1.0);
    box-shadow: 0 3px 12px rgba(22,163,74,0.28);
}
.mp-step-item.done .mp-step-label { color: var(--mp-success); font-weight: 700; }
.mp-step-connector.done { background: var(--mp-success); }

/* Step content header */
.step h4 {
    font-size: 19px;
    font-weight: 800;
    color: var(--mp-text);
    margin-bottom: 6px;
}
.step > p:first-of-type {
    font-size: 13.5px;
    color: var(--mp-muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

/* Step action buttons row */
.mp-step-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--mp-border);
    flex-wrap: wrap;
}

.btn.next-step {
    background: var(--mp-red) !important;
    border: none !important;
    color: var(--mp-white) !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    padding: 12px 30px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.btn.next-step:hover {
    background: var(--mp-red-dark) !important;
    box-shadow: 0 4px 18px rgba(21,56,255,0.32) !important;
    transform: translateY(-1px) !important;
}

.btn.prev-step {
    background: var(--mp-bg) !important;
    border: 1.5px solid var(--mp-border) !important;
    color: var(--mp-text) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 11px 24px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.btn.prev-step:hover {
    background: var(--mp-border) !important;
}

.btn.btn-submit-loan {
    background: var(--mp-success) !important;
    border: none !important;
    color: var(--mp-white) !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    padding: 12px 30px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.btn.btn-submit-loan:hover {
    background: #138B3C !important;
    box-shadow: 0 4px 18px rgba(22,163,74,0.32) !important;
    transform: translateY(-1px) !important;
}

/* Section sub-heading within a step */
.mp-step-section {
    font-size: 13px;
    font-weight: 800;
    color: var(--mp-red);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 24px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mp-border);
}

/* Insurance cards in real estate form */
.assurance-card {
    background: var(--mp-bg);
    border: 1.5px solid var(--mp-border);
    border-radius: 14px;
    transition: border-color 0.2s;
}
.assurance-card:hover { border-color: rgba(21,56,255,0.3); }
.assurance-card .box label { font-weight: 700; color: var(--mp-text); font-size: 13.5px; }
.assurance-card ul { list-style: disc; padding-left: 18px; }
.assurance-card ul li { font-size: 12.5px; color: var(--mp-muted); padding: 3px 0; }

/* Radio buttons */
.radio-container {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.label_check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1.5px solid var(--mp-border);
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--mp-text);
}
input[type="radio"]:checked + .label_check {
    border-color: var(--mp-red);
    background: rgba(21,56,255,0.06);
    color: var(--mp-red);
}

@media (max-width: 576px) {
    .mp-step-wizard { justify-content: flex-start; padding: 16px 4px 28px; }
    .mp-step-connector { min-width: 16px; }
    .mp-step-item { min-width: 60px; }
    .mp-step-circle { width: 38px; height: 38px; font-size: 13px; }
    .mp-step-label { font-size: 9.5px; white-space: normal; }
    .mp-step-connector { margin-top: 18px; }
    .mp-step-actions { gap: 10px; }
    .btn.next-step, .btn.prev-step, .btn.btn-submit-loan {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   CHAT / SECURE MESSAGE INTERFACE — WhatsApp Style
   ============================================================ */
.mp-chat-page {
    padding: 0 !important;
    height: calc(100vh - 64px - 52px);
    min-height: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header — ZENAGROUPE red bar ───────────────────────────── */
.mp-chat-header {
    background: var(--mp-red);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    z-index: 2;
}
.mp-chat-header-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 2px solid rgba(255,255,255,0.38);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    color: white;
    flex-shrink: 0;
}
.mp-chat-header-info h5 {
    font-size: 15px;
    font-weight: 700;
    color: white;
    margin: 0 0 1px;
}
.mp-chat-header-info span {
    font-size: 11.5px;
    color: rgba(255,255,255,0.82);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}
.mp-chat-header-info span::before {
    content: '';
    width: 6px; height: 6px;
    background: #4ADE80;
    border-radius: 50%;
    display: inline-block;
}

/* ── Messages scrollable area ────────────────────────────── */
.mp-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 14px 14px 6px;
    /* WhatsApp-style warm grey wallpaper */
    background: #ECE5DD;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scroll-behavior: smooth;
}
.mp-chat-messages::-webkit-scrollbar { width: 4px; }
.mp-chat-messages::-webkit-scrollbar-track { background: transparent; }
.mp-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.16);
    border-radius: 4px;
}

/* ── Bubble rows ─────────────────────────────────────────── */
.mp-msg-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    max-width: 74%;
    animation: mp-bubble-in 0.18s ease;
}
@keyframes mp-bubble-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* User message — RIGHT, no avatar */
.mp-msg-row.from-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
/* Admin message — LEFT, with avatar */
.mp-msg-row.from-admin { align-self: flex-start; }

/* Admin avatar circle */
.mp-msg-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.mp-msg-avatar.admin-av {
    background: linear-gradient(135deg, #1538FF, #900);
    color: white;
    box-shadow: 0 1px 4px rgba(21,56,255,0.3);
}

/* Bubble base */
.mp-bubble {
    padding: 7px 12px 5px;
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 100%;
    word-break: break-word;
    position: relative;
}

/* User bubble — ZENAGROUPE red, tail bottom-right */
.mp-msg-row.from-user .mp-bubble {
    background: #1538FF;
    color: white;
    border-radius: 8px 8px 0 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.mp-msg-row.from-user .mp-bubble::after {
    content: '';
    position: absolute;
    bottom: 0; right: -7px;
    border-left: 8px solid #1538FF;
    border-bottom: 8px solid transparent;
}

/* Admin bubble — white, tail bottom-left */
.mp-msg-row.from-admin .mp-bubble {
    background: #FFFFFF;
    color: #111;
    border-radius: 8px 8px 8px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.mp-msg-row.from-admin .mp-bubble::after {
    content: '';
    position: absolute;
    bottom: 0; left: -7px;
    border-right: 8px solid #FFFFFF;
    border-bottom: 8px solid transparent;
}

/* Images in bubbles */
.mp-bubble-img {
    max-width: 230px;
    border-radius: 6px;
    margin-top: 4px;
    display: block;
    cursor: pointer;
}

/* Timestamp */
.mp-bubble-meta {
    font-size: 10px;
    margin-top: 3px;
    display: block;
    text-align: right;
}
.mp-msg-row.from-user .mp-bubble-meta { color: rgba(255,255,255,0.7); }
.mp-msg-row.from-admin .mp-bubble-meta { color: #999; }

/* ── Date separator — WhatsApp pill ──────────────────────── */
.mp-chat-date-sep {
    align-self: center;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(4px);
    color: #555;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 10px;
    margin: 8px 0 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

/* ── Image preview bar ───────────────────────────────────── */
.mp-chat-image-preview {
    background: #F0F2F5;
    border-top: 1px solid #DDD;
    padding: 7px 14px;
    display: none;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.mp-chat-image-preview img {
    height: 48px;
    border-radius: 6px;
    border: 1px solid var(--mp-border);
}
.mp-chat-image-preview button {
    background: none;
    border: none;
    color: var(--mp-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
}
.mp-chat-image-preview button:hover { color: var(--mp-red); }

/* ── Compose bar ─────────────────────────────────────────── */
#chatForm { flex-shrink: 0; }
.mp-chat-compose {
    background: #F0F2F5;
    border-top: 1px solid #DDD;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mp-chat-compose-attach {
    background: transparent;
    border: none;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    color: #666;
    font-size: 19px;
}
.mp-chat-compose-attach:hover {
    color: var(--mp-red);
    background: rgba(21,56,255,0.07);
}
.mp-chat-compose input[type="text"] {
    flex: 1;
    border: none !important;
    border-radius: 22px !important;
    padding: 9px 16px !important;
    font-size: 13.5px !important;
    background: white !important;
    outline: none;
    box-shadow: none !important;
}
.mp-chat-compose input[type="text"]:focus {
    box-shadow: none !important;
    border: none !important;
}
.mp-chat-send-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--mp-red);
    border: none;
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(21,56,255,0.35);
}
.mp-chat-send-btn:hover {
    background: #0A22CC;
    transform: scale(1.06);
}

/* ── Empty state ─────────────────────────────────────────── */
.mp-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    gap: 12px;
    padding: 40px;
    background: #ECE5DD;
}
.mp-chat-empty i { font-size: 52px; opacity: 0.2; }
.mp-chat-empty p { font-size: 14px; font-weight: 600; margin: 0; }

/* ── Widget container — edge-to-edge, no card ────────────── */
.mp-chat-widget {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--mp-white);
}

@media (max-width: 768px) {
    .mp-chat-page { height: calc(100vh - 56px - 48px); }
    .mp-chat-messages { padding: 10px 8px; }
    .mp-msg-row { max-width: 90%; }
    .mp-chat-compose { padding: 7px 8px; }
}