/* ============================================================
   MX RIDER — logged-in rider account area (mx2 system).
   Scope: section.mxr rendered by mxuber::front.account.master
   (dashboard, wallet, history, notifications, chat, locations).
   Light + dark via mx tokens only — no hardcoded hex here.
   Class language mirrors mx-redesign (mx2): Inter Tight display,
   hairline cards 16px, 48px/4px buttons, tabular numbers.

   A preserved legacy blog-index layer lives at the bottom of
   this file (out of redesign scope).
   ============================================================ */

.mxr {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mx-ink);
    background: var(--mx-bg);
    padding: 48px 0 96px;
    min-height: 60vh;
}

/* ------------------------------------------------------------
   App frame: slim sidebar + content column (max 1080px)
   ------------------------------------------------------------ */
.mxr__frame {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    max-width: 1368px;
    margin: 0 auto;
    padding: 0 32px;
}

.mxr__sidecol { min-width: 0; }

.mxr__main { min-width: 0; }
.mxr__main-inner { max-width: 1080px; }

/* mobile menu pill (JS toggles .show on .left-profile-box) */
.mxr .mxr__menubtn {
    display: none;
    position: static;
    width: auto;
    height: 42px;
    margin: 0 0 20px;
    padding: 0 16px;
    align-items: center;
    gap: 8px;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 8px;
    color: var(--mx-ink);
    font: 600 14px/1 "Inter", sans-serif;
    cursor: pointer;
}
.mxr .mxr__menubtn i { font-size: 18px; color: var(--mx-ink-2); }

/* ------------------------------------------------------------
   Sidebar — side nav card (JS hook class .left-profile-box kept)
   ------------------------------------------------------------ */
.mxr .mxr__side.left-profile-box {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 20px 14px 14px;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 16px;
    max-height: calc(100dvh - 128px);
    overflow-y: auto;
    transform: none;
}

.mxr .mxr__side-close { display: none; }

/* user chip */
.mxr-user { display: flex; align-items: center; gap: 12px; padding: 2px 8px 12px; border-bottom: 1px solid var(--mx-border); }
.mxr-user__avatar { position: relative; flex: none; }
.mxr-user__img {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--mx-border);
}
.mxr-user__initial {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--mx-accent); color: var(--mx-on-accent);
    font: 700 18px/1 "Inter Tight", "Inter", sans-serif;
}
.mxr-user__edit {
    position: absolute; right: -3px; bottom: -3px;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--mx-surface-2); border: 1px solid var(--mx-border);
    color: var(--mx-ink-2); cursor: pointer; margin: 0; padding: 0;
    transition: color .15s ease, border-color .15s ease;
}
.mxr-user__edit:hover { color: var(--mx-ink); border-color: var(--mx-ink-2); }
.mxr-user__edit i { font-size: 11px; }
.mxr-user__meta { min-width: 0; }
.mxr-user__meta h4 {
    margin: 0; font: 600 15px/1.3 "Inter", sans-serif;
    color: var(--mx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mxr-user__meta h5 {
    margin: 2px 0 0; font: 400 13px/1.3 "Inter", sans-serif;
    color: var(--mx-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* nav list — 8px radius items, active = surface-2 fill + ink */
.mxr-nav { display: flex; flex-direction: column; gap: 2px; }
.mxr-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mxr-nav__item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border-radius: 8px;
    color: var(--mx-ink-2);
    font: 500 15px/1.2 "Inter", sans-serif;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.mxr-nav__item i { font-size: 19px; color: var(--mx-ink-3); transition: color .15s ease; }
.mxr-nav__item:hover { background: var(--mx-surface-2); color: var(--mx-ink); }
.mxr-nav__item:hover i { color: var(--mx-ink); }
.mxr-nav__item.active { background: var(--mx-surface-2); color: var(--mx-ink); font-weight: 600; }
.mxr-nav__item.active i { color: var(--mx-ink); }

/* logout */
.mxr__side-foot { margin-top: auto; padding: 10px 8px 2px; border-top: 1px solid var(--mx-border); }
.mxr .mxr-logout {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 10px 12px;
    background: transparent; border: none; border-radius: 8px;
    color: var(--mx-ink-2); font: 500 15px/1.2 "Inter", sans-serif;
    text-align: left; box-shadow: none;
    transition: color .15s ease, background-color .15s ease;
}
.mxr .mxr-logout i { font-size: 19px; }
.mxr .mxr-logout:hover { color: var(--mx-red); background: var(--mx-surface-2); }

/* overlay (JS hook class .profile-bg-overlay kept) */
.mxr .mxr__overlay.profile-bg-overlay { display: none; }

/* ------------------------------------------------------------
   Page scaffold
   ------------------------------------------------------------ */
.mxr-page { display: flex; flex-direction: column; gap: 28px; }
.mxr-page__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.mxr-page__title {
    margin: 0;
    font: 800 32px/1.1 "Inter Tight", "Inter", sans-serif;
    letter-spacing: -0.02em;
    color: var(--mx-ink);
}
.mxr-page__sub { margin: 6px 0 0; font-size: 14px; color: var(--mx-ink-3); }

/* primary action (page-level) */
.mxr-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 48px; padding: 0 24px;
    background: var(--mx-accent); color: var(--mx-on-accent);
    border: none; border-radius: 9999px !important;
    font: 600 15px/1 "Inter", sans-serif;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .15s ease, transform .1s ease;
}
.mxr-btn i { font-size: 17px; }
.mxr-btn:hover { background: var(--mx-accent-hover); color: var(--mx-on-accent); }
.mxr-btn:active { transform: scale(.98); }

/* small underlined inline action */
.mxr .mxr-inline-action {
    margin-left: 10px; white-space: nowrap; cursor: pointer;
    color: var(--mx-ink); font: 600 13px/1 "Inter", sans-serif;
    text-decoration: underline; text-underline-offset: 3px;
}
.mxr .mxr-inline-action:hover { color: var(--mx-ink-3); }
.mxr .mxr-inline-action i { margin-right: 4px; }

/* ------------------------------------------------------------
   Cards + definition rows
   ------------------------------------------------------------ */
.mxr-card {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 16px;
    padding: 24px;
}
.mxr-card__title {
    margin: 0 0 6px;
    font: 700 18px/1.3 "Inter Tight", "Inter", sans-serif;
    letter-spacing: -0.01em;
    color: var(--mx-ink);
}

.mxr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.mxr-rows { list-style: none; margin: 0; padding: 0; }
.mxr-rows li {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 24px; padding: 13px 0;
    border-top: 1px solid var(--mx-border);
}
.mxr-rows li:first-child { border-top: none; padding-top: 6px; }
.mxr-rows li > span { flex: none; font-size: 14px; color: var(--mx-ink-3); }
.mxr-rows li > strong {
    font-weight: 600; font-size: 15px; color: var(--mx-ink);
    text-align: right; overflow-wrap: anywhere;
}

/* ------------------------------------------------------------
   Dashboard stats
   ------------------------------------------------------------ */
.mxr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mxr-stat {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 16px;
    padding: 22px 24px;
}
.mxr-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mxr-stat__label { font-size: 14px; font-weight: 500; color: var(--mx-ink-2); }
.mxr-stat__icon { font-size: 20px; color: var(--mx-ink-4); }
.mxr-stat__num {
    font: 800 36px/1.05 "Inter Tight", "Inter", sans-serif;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--mx-ink);
}
.mxr-stat__link {
    display: inline-flex; align-items: center; gap: 4px; width: fit-content;
    margin-top: 2px;
    font-size: 13px; font-weight: 600; color: var(--mx-ink-2);
    text-decoration: none;
}
.mxr-stat__link i { font-size: 14px; transition: transform .15s ease; }
.mxr-stat__link:hover { color: var(--mx-ink); }
.mxr-stat__link:hover i { transform: translateX(2px); }

/* ------------------------------------------------------------
   Wallet balance hero
   ------------------------------------------------------------ */
.mxr-balance {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    padding: 28px 32px;
    background: var(--mx-surface-2);
    border: 1px solid var(--mx-border);
    border-radius: 16px;
}
.mxr-balance__label {
    display: block;
    font: 600 12px/1 "Inter", sans-serif;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--mx-ink-3);
}
.mxr-balance__num {
    display: block; margin-top: 10px;
    font: 800 40px/1.05 "Inter Tight", "Inter", sans-serif;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--mx-ink);
}

/* ------------------------------------------------------------
   Tables (wallet + history)
   ------------------------------------------------------------ */
.mxr .table { --bs-table-bg: transparent; margin: 0; color: var(--mx-ink-2); }
.mxr .mxr-table > thead th {
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--mx-border);
    font: 600 11px/1.2 "Inter", sans-serif;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--mx-ink-4);
    white-space: nowrap;
}
.mxr .mxr-table > tbody td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--mx-border);
    color: var(--mx-ink-2);
    vertical-align: middle;
    background: transparent;
}
.mxr .mxr-table > tbody tr:last-child td { border-bottom: none; }
.mxr .mxr-table > tbody tr { transition: background-color .15s ease; }
.mxr .mxr-table > tbody tr:hover { background: var(--mx-surface-2); }

.mxr-table__ref { font-weight: 600; color: var(--mx-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mxr-table__date { font-size: 14px; color: var(--mx-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

.mxr-amt {
    text-align: right; white-space: nowrap;
    font-weight: 600; color: var(--mx-ink);
    font-variant-numeric: tabular-nums;
}
.mxr-amt.credit { color: var(--mx-green); }
.mxr-amt.credit::before { content: "+"; }

/* driver cell */
.mxr-driver { display: flex; align-items: center; gap: 12px; }
.mxr-driver__avatar {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: var(--mx-surface-2); border: 1px solid var(--mx-border);
}
.mxr-driver__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mxr-driver__avatar span {
    font: 700 15px/1 "Inter Tight", "Inter", sans-serif;
    color: var(--mx-ink);
}
.mxr-driver h5 { margin: 0; font: 600 14px/1.3 "Inter", sans-serif; color: var(--mx-ink); }
.mxr-driver span {
    display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; color: var(--mx-ink-4);
}

/* small square icon button */
.mxr .mxr-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px;
    background: transparent; border: 1px solid transparent;
    color: var(--mx-ink-3); font-size: 17px; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mxr .mxr-iconbtn:hover { background: var(--mx-surface-2); color: var(--mx-ink); }

/* ------------------------------------------------------------
   Status chips — hairline pills, never filled
   ------------------------------------------------------------ */
.mxr .mxr-chip {
    display: inline-flex; align-items: center;
    height: 26px; padding: 0 11px; border-radius: 999px;
    border: 1px solid var(--mx-border-2);
    font: 600 12px/1 "Inter", sans-serif;
    color: var(--mx-ink-2); white-space: nowrap;
}
.mxr .mxr-chip--completed,
.mxr .mxr-chip.credit { color: var(--mx-green); border-color: var(--mx-green); }
.mxr .mxr-chip--cancelled,
.mxr .mxr-chip--rejected,
.mxr .mxr-chip--failed { color: var(--mx-red); border-color: var(--mx-red); }

/* ------------------------------------------------------------
   Notifications
   ------------------------------------------------------------ */
.mxr .notification-list.mxr-notifs { list-style: none; margin: 0; padding: 0; }
.mxr .mxr-notif {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 2px; margin: 0;
    border-bottom: 1px solid var(--mx-border);
    background: none; box-shadow: none; border-radius: 0;
    position: relative;
}
.mxr .mxr-notif:last-child { border-bottom: none; }
.mxr .mxr-notif__icon {
    flex: none; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mx-surface-2); border: 1px solid var(--mx-border);
    color: var(--mx-ink-2); font-size: 18px;
}
.mxr .mxr-notif__body { flex: 1; min-width: 0; }
.mxr .mxr-notif__body p { margin: 0; font-size: 15px; color: var(--mx-ink-2); }
.mxr .mxr-notif__body time {
    display: block; margin-top: 4px;
    font-size: 12.5px; color: var(--mx-ink-4);
    font-variant-numeric: tabular-nums;
}
.mxr .mxr-notif.unread::after {
    content: ""; flex: none; align-self: center;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--mx-accent);
}
.mxr .mxr-notif.unread .mxr-notif__body p { color: var(--mx-ink); font-weight: 500; }

/* ------------------------------------------------------------
   Chat
   ------------------------------------------------------------ */
.mxr .mxr-chat {
    display: flex; flex-direction: column;
    padding: 0; overflow: hidden;
    height: min(680px, calc(100dvh - 300px));
    min-height: 460px;
}
.mxr .mxr-chat__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mx-border);
    background: var(--mx-surface);
}
.mxr .mxr-chat__who { display: flex; align-items: center; gap: 12px; }
.mxr .mxr-chat__who h5 { margin: 0; font: 600 15px/1.3 "Inter", sans-serif; color: var(--mx-ink); }
.mxr .chat-profile { position: relative; }
.mxr .mxr-chat__avatar img,
.mxr .mxr-chat__avatar #receiverAvatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--mx-border);
}
.mxr .mxr-chat__avatar .user-round {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--mx-accent); color: var(--mx-on-accent);
    font: 700 16px/1 "Inter Tight", "Inter", sans-serif;
}
.mxr #receiverStatusDot {
    position: absolute; right: 0; bottom: 0;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--mx-green);
    border: 2px solid var(--mx-surface);
}
.mxr .right-sidebar-Chats,
.mxr .right-sidebar-Chats .message {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
}

/* message stream */
.mxr .msger-chat.custom-scrollbar {
    flex: 1; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    background: var(--mx-surface-2);
}
.mxr .msger-chat #loading { padding: 4px; font-size: 13px; color: var(--mx-ink-3); }
.mxr .msger-chat .no-chat-message {
    margin: auto; padding: 40px 20px; text-align: center;
    font-size: 14px; color: var(--mx-ink-3);
}
.mxr .msger-chat .no-chat-message span { display: block; }

/* bubbles — rider right (accent), admin left (surface) */
.mxr .msger-chat .admin-reply,
.mxr .msger-chat .user-reply {
    display: flex; align-items: flex-end; gap: 10px;
    margin: 0; max-width: 78%;
}
.mxr .msger-chat .admin-reply { align-self: flex-end; flex-direction: row-reverse; }
.mxr .msger-chat .user-reply { align-self: flex-start; }
.mxr .msger-chat .chatting-box {
    max-width: 100%; padding: 10px 14px;
    font-size: 15px; line-height: 1.5;
}
.mxr .msger-chat .chatting-box p { margin: 0; }
.mxr .msger-chat .chatting-box .timing {
    margin: 4px 0 0;
    font: 400 11px/1 "Inter", sans-serif;
    font-variant-numeric: tabular-nums;
    opacity: .55; color: inherit;
}
.mxr .msger-chat .admin-reply .chatting-box {
    background: var(--mx-accent); color: var(--mx-on-accent);
    border-radius: 16px 16px 4px 16px;
}
.mxr .msger-chat .user-reply .chatting-box {
    background: var(--mx-surface); color: var(--mx-ink);
    border: 1px solid var(--mx-border);
    border-radius: 16px 16px 16px 4px;
}
.mxr .msger-chat .message-profile { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.mxr .msger-chat .user-round.message-profile {
    width: 30px; height: 30px; margin: 0;
    background: var(--mx-accent); color: var(--mx-on-accent);
    display: flex; align-items: center; justify-content: center;
    font: 700 12px/1 "Inter Tight", "Inter", sans-serif;
}
.mxr .msger-chat .user-round.message-profile h6 { margin: 0; font: inherit; }
.mxr .msger-chat .chat-image {
    display: block; max-width: 220px; border-radius: 12px; margin-top: 6px;
}

/* input bar */
.mxr .msger-inputarea {
    display: block; margin: 0; padding: 16px 20px;
    background: var(--mx-surface);
    border-top: 1px solid var(--mx-border);
}
.mxr .msger-inputarea .position-relative { display: block; }
.mxr .msger-input {
    width: 100%; height: 48px;
    padding: 0 112px 0 18px;
    background: var(--mx-surface-2);
    border: 1px solid var(--mx-border);
    border-radius: 24px;
    color: var(--mx-ink); font: 400 15px/1.4 "Inter", sans-serif;
    outline: none; box-shadow: none;
    transition: border-color .15s ease;
}
.mxr .msger-input::placeholder { color: var(--mx-ink-4); }
.mxr .msger-input:focus { border-color: var(--mx-ink); }
.mxr .msger-send-btn {
    position: absolute; right: 6px; top: 6px;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--mx-accent); color: var(--mx-on-accent);
    border: none; font-size: 16px; cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
}
.mxr .msger-send-btn:hover { background: var(--mx-accent-hover); }
.mxr .msger-send-btn:active { transform: scale(.94); }
.mxr .msger-inputarea .gallery {
    position: absolute; right: 50px; top: 6px;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--mx-ink-3); font-size: 18px; cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.mxr .msger-inputarea .gallery:hover { color: var(--mx-ink); background: var(--mx-surface-2); }
.mxr .msger-input-error-icon {
    position: absolute; right: 96px; top: 50%; transform: translateY(-50%);
    color: var(--mx-red); font-size: 16px; display: none;
}
.mxr #uploadProgress { margin: 12px 20px 0; }
.mxr #uploadProgress .progress-bar { background: var(--mx-accent); }

/* ------------------------------------------------------------
   Saved places
   ------------------------------------------------------------ */
.mxr-places {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.mxr-place {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 16px;
    padding: 18px 20px;
    transition: border-color .15s ease;
}
.mxr-place:hover { border-color: var(--mx-border-2); }
.mxr-place__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mxr-place__actions { display: flex; gap: 4px; }
.mxr-place__body { display: flex; align-items: flex-start; gap: 10px; }
.mxr-place__body i { flex: none; margin-top: 2px; font-size: 18px; color: var(--mx-ink-3); }
.mxr-place__body p { margin: 0; font-size: 15px; color: var(--mx-ink-2); overflow-wrap: anywhere; }

/* ------------------------------------------------------------
   Forms (add/edit location + modals)
   ------------------------------------------------------------ */
.mxr .mxr-form {
    display: flex; flex-direction: column; gap: 20px;
    max-width: 760px;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 16px;
    padding: 28px;
}
.mxr .form-box .form-label {
    margin-bottom: 8px;
    font: 600 13px/1.2 "Inter", sans-serif;
    color: var(--mx-ink-2);
}
.mxr .form-box .form-control,
.mxr .form-box .form-select {
    height: 48px; padding: 0 14px;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 8px;
    color: var(--mx-ink); font: 400 15px/1.4 "Inter", sans-serif;
    box-shadow: none;
    transition: border-color .15s ease;
}
.mxr .form-box .form-control:focus,
.mxr .form-box .form-select:focus {
    border-color: var(--mx-ink); box-shadow: none;
    background: var(--mx-surface); color: var(--mx-ink);
}
.mxr .form-box .form-control::placeholder { color: var(--mx-ink-4); }
.mxr .form-icon .position-relative > i:not(.right-icon):not(.msger-input-error-icon) {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--mx-ink-3); font-size: 17px; pointer-events: none; z-index: 1;
}
.mxr .form-icon .form-control { padding-left: 44px; }
.mxr .form-icon i.right-icon {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--mx-ink-3); cursor: pointer; z-index: 2;
}
.mxr .number-mail-box { display: flex; gap: 10px; }
.mxr .country-code-section { flex: 0 0 122px; }
.mxr .invalid-feedback { font-size: 13px; color: var(--mx-red); }

/* segmented type picker */
.mxr .radio-group-list.mxr-segment {
    display: flex; gap: 8px; flex-wrap: wrap;
    list-style: none; margin: 0; padding: 0;
}
.mxr .mxr-segment li { position: relative; }
.mxr .mxr-segment input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.mxr .mxr-segment .form-check-label {
    display: inline-flex; align-items: center;
    height: 44px; padding: 0 22px;
    border: 1px solid var(--mx-border-2); border-radius: 999px;
    font: 600 14px/1 "Inter", sans-serif;
    color: var(--mx-ink-2); cursor: pointer; user-select: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mxr .mxr-segment li:hover .form-check-label { border-color: var(--mx-ink-2); color: var(--mx-ink); }
.mxr .mxr-segment li:has(input:checked) .form-check-label {
    background: var(--mx-accent); color: var(--mx-on-accent);
    border-color: var(--mx-accent);
}
.mxr .mxr-segment input[type="radio"]:focus-visible ~ .form-check-label {
    outline: 2px solid var(--mx-ink); outline-offset: 3px;
}

/* map */
.mxr .map-warper.mxr-map {
    height: 400px;
    border: 1px solid var(--mx-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mx-surface-2);
}
html[data-theme="dark"] .mxr .mxr-map { filter: var(--mx-map-tile-filter); }
.mxr .map-location-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
    margin: 0; padding: 6px;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border); border-radius: 8px;
    list-style: none; box-shadow: var(--mx-shadow);
}
.mxr .map-location-list li { padding: 8px 10px; border-radius: 6px; font-size: 14px; color: var(--mx-ink-2); cursor: pointer; }
.mxr .map-location-list li:hover { background: var(--mx-surface-2); color: var(--mx-ink); }

.mxr .mxr-form__foot {
    display: flex; justify-content: flex-end; gap: 12px;
    padding-top: 20px; border-top: 1px solid var(--mx-border);
}

/* ------------------------------------------------------------
   Buttons (vendor class names kept in markup)
   ------------------------------------------------------------ */
.mxr .btn.gradient-bg-color,
.mxr .btn.gradient-bg-color.spinner-btn {
    height: 48px; padding: 0 22px;
    background: var(--mx-accent) !important;
    background-image: none !important;
    color: var(--mx-on-accent) !important;
    border: none; border-radius: 9999px !important;
    font: 600 15px/1.2 "Inter", sans-serif;
    box-shadow: none;
    transition: background-color .15s ease, transform .1s ease;
}
.mxr .btn.gradient-bg-color:hover { background: var(--mx-accent-hover) !important; color: var(--mx-on-accent) !important; }
.mxr .btn.gradient-bg-color:active { transform: scale(.98); }
.mxr .btn.cancel-btn {
    height: 48px; padding: 0 22px;
    background: transparent;
    color: var(--mx-ink);
    border: 1px solid var(--mx-border-2); border-radius: 9999px !important;
    font: 600 15px/1.2 "Inter", sans-serif;
    transition: background-color .15s ease, border-color .15s ease;
}
.mxr .btn.cancel-btn:hover { background: var(--mx-surface-2); color: var(--mx-ink); border-color: var(--mx-ink-2); }

/* ------------------------------------------------------------
   Modals
   ------------------------------------------------------------ */
.mxr .modal-content {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 16px;
    box-shadow: var(--mx-shadow-lg);
}
.mxr .modal-header {
    padding: 22px 24px 0;
    border-bottom: none;
}
.mxr .modal-header .modal-title {
    font: 700 20px/1.2 "Inter Tight", "Inter", sans-serif;
    letter-spacing: -0.01em; color: var(--mx-ink);
}
.mxr .modal-header .btn-close {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    background: transparent; border: none;
    color: var(--mx-ink-2); font-size: 20px; opacity: 1;
}
.mxr .modal-header .btn-close:hover { background: var(--mx-surface-2); color: var(--mx-ink); }
.mxr .modal-body { padding: 20px 24px; }
.mxr .modal-body .form-box { margin-bottom: 16px; }
.mxr .modal-body .form-box:last-child { margin-bottom: 0; }
.mxr .modal-footer {
    padding: 4px 24px 22px;
    border-top: none; justify-content: flex-end; gap: 10px;
}
.mxr .modal-footer form { display: flex; gap: 10px; justify-content: flex-end; }

/* confirmation modal */
.mxr .confirmation-modal .confirmation-data {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding-top: 28px; text-align: center;
}
.mxr .confirmation-modal .main-img { display: flex; justify-content: center; }
.mxr .confirmation-modal .delete-icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--mx-surface-2); border: 1px solid var(--mx-border);
    color: var(--mx-ink-2); font-size: 24px;
}
.mxr .confirmation-modal .modal-title { font: 700 18px/1.3 "Inter Tight", "Inter", sans-serif; color: var(--mx-ink); }
.mxr .confirmation-modal p { margin: 0; font-size: 14.5px; color: var(--mx-ink-3); }

/* ------------------------------------------------------------
   Select2 (country code, payment method)
   ------------------------------------------------------------ */
.mxr .select2-container .select2-selection--single {
    height: 48px; border: 1px solid var(--mx-border); border-radius: 8px;
    background: var(--mx-surface);
}
.mxr .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 12px; line-height: 46px;
    color: var(--mx-ink); font-size: 15px;
}
.mxr .select2-container .select2-selection--single .select2-selection__arrow { display: none; }
.mxr .select2-container--open .select2-dropdown {
    border: 1px solid var(--mx-border); border-radius: 8px;
    background: var(--mx-surface); box-shadow: var(--mx-shadow);
}
.mxr .select2-container--open .select2-results__option {
    padding: 10px 12px; font-size: 14.5px; color: var(--mx-ink-2);
}
.mxr .select2-container--open .select2-results__option--highlighted {
    background: var(--mx-surface-2); color: var(--mx-ink);
}
.mxr .flag-img { width: 22px; height: auto; margin-right: 6px; border-radius: 2px; }

/* ------------------------------------------------------------
   Pagination
   ------------------------------------------------------------ */
.mxr .pagination-main { margin-top: 18px; }
.mxr .pagination-box,
.mxr .pagination-box ul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mxr .pagination-box a,
.mxr .pagination-box span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 8px;
    border: none; border-radius: 8px;
    background: transparent; color: var(--mx-ink-2);
    font: 500 14px/1 "Inter", sans-serif;
    font-variant-numeric: tabular-nums;
    transition: background-color .15s ease, color .15s ease;
}
.mxr .pagination-box a:hover { background: var(--mx-surface-2); color: var(--mx-ink); }
.mxr .pagination-box .active a,
.mxr .pagination-box .active span,
.mxr .pagination-box span[aria-current="page"] {
    background: var(--mx-surface-2); color: var(--mx-ink); font-weight: 600;
}
.mxr .pagination-box .disabled a,
.mxr .pagination-box .disabled span { color: var(--mx-ink-4); }

/* ------------------------------------------------------------
   Empty states
   ------------------------------------------------------------ */
.mxr .mxr-empty,
.mxr .dashboard-no-data {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 56px 20px; margin: 0;
    text-align: center;
}
.mxr .mxr-empty i { font-size: 40px; color: var(--mx-ink-4); }
.mxr .mxr-empty h6 { margin: 0; font: 600 15px/1.4 "Inter", sans-serif; color: var(--mx-ink-2); }
.mxr .mxr-empty .mxr-empty__action {
    margin-top: 4px;
    font: 600 14px/1 "Inter", sans-serif;
    color: var(--mx-ink); text-decoration: underline; text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   Responsive — off-canvas drawer below 900px
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .mxr-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 899px) {
    .mxr { padding-top: 32px; }
    .mxr__frame {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 20px;
    }

    .mxr .mxr__menubtn { display: inline-flex; }

    /* drawer */
    .mxr__sidecol { display: contents; }
    .mxr .mxr__side.left-profile-box {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 296px; max-height: none;
        border-radius: 0 16px 16px 0;
        transform: translateX(-105%);
        transition: transform .24s cubic-bezier(.16, 1, .3, 1);
        z-index: 1045;
        box-shadow: var(--mx-shadow-lg);
        overflow-y: auto;
    }
    .mxr .mxr__side.left-profile-box.show { transform: translateX(0); }

    .mxr .mxr__overlay.profile-bg-overlay {
        display: block;
        position: fixed; inset: 0;
        background: var(--mx-scrim);
        opacity: 0; visibility: hidden;
        transition: opacity .24s ease, visibility .24s;
        z-index: 1040;
    }
    .mxr .mxr__overlay.profile-bg-overlay.show { opacity: 1; visibility: visible; }

    .mxr .mxr__side-close {
        display: flex; align-items: center; justify-content: space-between;
        padding: 2px 8px 14px;
        border-bottom: 1px solid var(--mx-border);
    }
    .mxr .mxr__side-close span { font: 600 14px/1 "Inter", sans-serif; color: var(--mx-ink-2); }
    .mxr .sidebar-close-btn {
        display: flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; border-radius: 8px;
        background: transparent; border: none;
        color: var(--mx-ink); font-size: 18px; cursor: pointer;
    }
    .mxr .sidebar-close-btn:hover { background: var(--mx-surface-2); }
}

@media (max-width: 640px) {
    .mxr { padding: 24px 0 72px; }
    .mxr__frame { padding: 0 16px; }
    .mxr-stats { grid-template-columns: 1fr; }
    .mxr-grid-2 { grid-template-columns: 1fr; }
    .mxr-places { grid-template-columns: 1fr; }
    .mxr-page__title { font-size: 27px; }
    .mxr-balance { padding: 22px 20px; }
    .mxr-balance__num { font-size: 34px; }
    .mxr .mxr-table > thead th,
    .mxr .mxr-table > tbody td { padding-left: 8px; padding-right: 8px; }
    .mxr-driver span { max-width: 130px; }
    .mxr .mxr-chat { height: min(560px, calc(100dvh - 220px)); }
    .mxr .mxr-form { padding: 20px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mxr * { transition: none !important; }
}

/* ============================================================
   LEGACY BLOG INDEX LAYER — .blog-list-section (/blogs)
   Preserved verbatim from the previous rider.css pass; out of
   scope for the rider-account redesign (kept so /blogs does
   not regress). Light-mode hex is intentional there for now.
   ============================================================ */

   11. BLOG INDEX — .blog-list-section (/blogs)
   ------------------------------------------------------------ */
.blog-list-section {
    padding-top: 40px;
}

/* sidebar card */
.blog-list-section .blog-sidebar-box {
    background: #ffffff;
    border: 1px solid #E9E9E9;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 24px;
}
.blog-list-section .blog-title,
.blog-list-section .category-list-box h3,
.blog-list-section .recent-post-box h3,
.blog-list-section .tags-list-box h3 {
    font-family: var(--mx-font-display, "Inter Tight", sans-serif);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.01em;
    color: var(--mx-ink, #111);
    margin-bottom: 12px;
}
/* category + recent lists: hairline rows */
.blog-list-section .category-list,
.blog-list-section .recent-blog-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.blog-list-section .category-list li a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 99px;
    color: var(--mx-muted, #545454);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.blog-list-section .category-list li a:hover,
.blog-list-section .category-list li a.active {
    background: #F6F6F6;
    color: var(--mx-ink, #111);
}
/* recent posts */
.blog-list-section .recent-box {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #E9E9E9;
}
.blog-list-section .recent-box:last-child {
    border-bottom: none;
}
.blog-list-section .recent-image {
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 64px;
}
.blog-list-section .recent-image img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
}
.blog-list-section .recent-box .post-content h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--mx-ink, #111);
    line-height: 1.35;
    margin-bottom: 4px;
}
.blog-list-section .recent-box .post-content h6 {
    font-size: 12px;
    font-weight: 500;
    color: var(--mx-muted, #545454);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* tags as gray chips */
.blog-list-section .tags-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
}
.blog-list-section .tags-list li a {
    display: inline-flex;
    align-items: center;
    background: #F6F6F6;
    border: 1px solid transparent;
    border-radius: 99px;
    padding: 6px 14px;
    color: var(--mx-muted, #545454);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.blog-list-section .tags-list li a:hover {
    background: #0A0A0A;
    border-color: #0A0A0A;
    color: #ffffff;
}

/* blog cards */
.blog-list-section .blog-box {
    background: #ffffff;
    border: 1px solid #E9E9E9;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    height: 100%;
    transition: transform .22s cubic-bezier(.16, 1, .3, 1),
                box-shadow .22s ease,
                border-color .22s ease;
}
.blog-list-section .blog-box:hover {
    transform: translateY(-4px);
    border-color: #E2E2E2;
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .22);
}
.blog-list-section .blog-img {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.blog-list-section .blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.blog-list-section .blog-box:hover .blog-img img {
    transform: scale(1.04);
}
.blog-list-section .blog-details {
    padding: 20px 22px 22px;
}
.blog-list-section .blog-details .post-content h4 {
    font-family: var(--mx-font-display, "Inter Tight", sans-serif);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--mx-ink, #111);
    margin-bottom: 8px;
}
.blog-list-section .blog-details .post-content h6 {
    font-size: 12px;
    font-weight: 500;
    color: var(--mx-muted, #545454);
    display: flex;
    align-items: center;
    gap: 5px;
}
.blog-list-section .blog-details .post-content p {
    color: var(--mx-muted, #545454);
    font-size: 14px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* "Know More" card CTA: black */
.blog-list-section .blog-details .link-btn,
.blog-list-section .blog-details button.link-btn.btn {
    background: #0A0A0A;
    background-image: none;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    box-shadow: none;
    margin-top: 6px;
    transition: background-color .18s ease, transform .18s ease;
}
.blog-list-section .blog-details .link-btn:hover {
    background: #23262e;
    color: #ffffff;
    transform: translateY(-1px);
}
.blog-list-section a:focus-visible,
.blog-list-section button:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}

/* ------------------------------------------------------------
   12. MOBILE — 560px single column
   ------------------------------------------------------------ */
@media (max-width: 560px) {
    .user-dashboard-section .dashboard-details-box {
        padding: 18px 16px 22px;
    }
    .user-dashboard-section .dashboard-title {
        flex-direction: column;
        align-items: stretch;
    }
    .user-dashboard-section .dashboard-title h3 {
        font-size: 22px;
    }
    .user-dashboard-section .dashboard-title > a {
        text-align: center;
    }
    .user-dashboard-section .table thead th {
        padding: 10px;
        font-size: 10px;
    }
    .user-dashboard-section .table tbody td {
        padding: 12px 10px;
        font-size: 13px;
    }
    .user-dashboard-section .msger-chat {
        min-height: 300px;
        max-height: 46vh;
    }
    .blog-list-section .blog-details {
        padding: 16px;
    }
    .blog-list-section .blog-details .post-content h4 {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------
   13. Dark theme: keep surfaces readable when the site
   chrome toggles dark mode (body.dark). Best-effort mirror.
   ------------------------------------------------------------ */
body.dark .user-dashboard-section .left-profile-box,
body.dark .user-dashboard-section .right-details-box,
body.dark .user-dashboard-section .dashboard-details-box,
body.dark .user-dashboard-section .chatting-main-box,
body.dark .blog-list-section .blog-sidebar-box,
body.dark .blog-list-section .blog-box {
    background: #1c1c1e;
    border-color: #2c2c2e;
}
body.dark .user-dashboard-section .profile-bg {
    background: #2c2c2e;
}

/* ============================================================
   V2 POLISH PASS — rider pages to full quality
   (dashboard / history / wallet / notifications / chat)
   Sections 14-25. Purely additive: appended after the v1 layer,
   so equal-specificity ties resolve to these rules.
   Vendor chains deeper than ours (chat bubbles, notification
   unread, wallet icon tiles) are beaten with !important —
   same policy as section 3 of the v1 layer.
   ============================================================ */

/* ------------------------------------------------------------
   14. DASHBOARD STAT CARDS — .wallet-box x3
   Neutralize the vendor's tinted circle decorations, set the
   number/label type scale, stagger the entrance, lift on hover.
   ------------------------------------------------------------ */
.user-dashboard-section .wallet-main-box .wallet-box {
    background: #ffffff;
    border: 1px solid #E9E9E9;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    animation: mx-fade-in .5s cubic-bezier(.16, 1, .3, 1) backwards;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* kill the vendor's primary/gold/orange side circles */
.user-dashboard-section .wallet-main-box .wallet-box:before,
.user-dashboard-section .wallet-main-box .wallet-box:after {
    display: none;
}
/* icon tile: black circle, white glyph (icons are drawn light) */
.user-dashboard-section .wallet-main-box .wallet-box .icon-box {
    background: #0A0A0A !important;
    border-radius: 99px;
    flex: 0 0 auto;
}
/* number: 32px bold; label: muted */
.user-dashboard-section .wallet-main-box .wallet-box h2 {
    font-family: var(--mx-font-display, "Inter Tight", sans-serif);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--mx-ink, #111);
    margin: 0;
}
.user-dashboard-section .wallet-main-box .wallet-box h5 {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mx-muted, #545454);
}
/* hover: lift + deepen */
.user-dashboard-section .wallet-main-box .wallet-box:hover {
    transform: translateY(-2px);
    border-color: #E2E2E2;
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .18);
}
/* entrance stagger: 0ms / 80ms / 160ms (works with or without
   an intermediate .row between .wallet-main-box and the cols) */
.user-dashboard-section .wallet-main-box > .row > :nth-child(1) .wallet-box,
.user-dashboard-section .wallet-main-box > :nth-child(1) > .wallet-box,
.user-dashboard-section .wallet-main-box > :nth-child(1).wallet-box {
    animation-delay: 0ms;
}
.user-dashboard-section .wallet-main-box > .row > :nth-child(2) .wallet-box,
.user-dashboard-section .wallet-main-box > :nth-child(2) > .wallet-box,
.user-dashboard-section .wallet-main-box > :nth-child(2).wallet-box {
    animation-delay: 80ms;
}
.user-dashboard-section .wallet-main-box > .row > :nth-child(3) .wallet-box,
.user-dashboard-section .wallet-main-box > :nth-child(3) > .wallet-box,
.user-dashboard-section .wallet-main-box > :nth-child(3).wallet-box {
    animation-delay: 160ms;
}
@keyframes mx-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   15. HISTORY TABLE — row hover, hairlines, semantic badges
   ------------------------------------------------------------ */
.user-dashboard-section .right-details-box .dashboard-details-box :is(table.history-table.display, table.wallet-table.table, .table) tbody td {
    border-bottom: 1px solid #ECECEC;
}
.user-dashboard-section .right-details-box .dashboard-details-box :is(table.history-table.display, table.wallet-table.table, .table) tbody tr:hover td {
    background: #F9F9F9;
}
/* status badges: 10%-tint fills, solid semantic text */
.user-dashboard-section .right-details-box .dashboard-details-box .badge-completed {
    background: rgba(6, 169, 92, .10) !important;
    color: #06A95C !important;
    border: 1px solid rgba(6, 169, 92, .22) !important;
}
.user-dashboard-section .right-details-box .dashboard-details-box .badge-cancelled {
    background: rgba(225, 25, 0, .10) !important;
    color: #E11900 !important;
    border: 1px solid rgba(225, 25, 0, .22) !important;
}

/* ------------------------------------------------------------
   16. WALLET PAGE — big balance number + press feedback
   "My Wallet:" reads as a muted label, "$700" as the figure.
   ------------------------------------------------------------ */
.user-dashboard-section .right-details-box .dashboard-details-box .dashboard-title h3:has(.text-primary-color) {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--mx-muted, #545454);
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.user-dashboard-section .right-details-box .dashboard-details-box .dashboard-title h3 .text-primary-color {
    font-family: var(--mx-font-display, "Inter Tight", sans-serif);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--mx-ink, #111);
}
/* top-up CTA press feedback (shared by every primary CTA in 19) */
.user-dashboard-section .right-details-box .dashboard-details-box .dashboard-title > a:active {
    transform: translateY(0) scale(.985);
    background: #0A0A0A;
}

/* ------------------------------------------------------------
   17. NOTIFICATIONS — unread tint, 36px icon tiles
   ------------------------------------------------------------ */
.user-dashboard-section .notification-list li {
    background: #ffffff !important;
    border: 1px solid #E9E9E9 !important;
    border-radius: 12px;
    margin-bottom: 10px;
}
.user-dashboard-section .notification-list li:last-child {
    margin-bottom: 0;
}
.user-dashboard-section .notification-list li.unread {
    background: #F0F4FF !important;
    border-color: #E2E2E2 !important;
}
.user-dashboard-section .notification-list li.unread .notification-content h4 {
    color: var(--mx-ink, #111) !important;
    font-weight: 600;
}
/* 36px gray icon tile */
.user-dashboard-section .notification-list li > i {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    font-size: 18px !important;
    background: #F6F6F6 !important;
    border: 1px solid #E9E9E9 !important;
    border-radius: 99px !important;
    color: var(--mx-muted, #545454) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.user-dashboard-section .notification-list .notification-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--mx-ink, #111);
}
.user-dashboard-section .notification-list .notification-content p {
    font-size: 14px;
    color: var(--mx-muted, #545454);
    margin-bottom: 0;
}
.user-dashboard-section .notification-list .notification-content span {
    font-size: 12px;
    color: var(--mx-muted, #545454);
}

/* ------------------------------------------------------------
   18. CHAT BUBBLES — sent black / received gray, 12px radius
   Vendor chain is ~10 levels deep under .right-sidebar-Chats —
   !important mirrors the v1 policy for unwinnable chains.
   ------------------------------------------------------------ */
.user-dashboard-section .msger-chat .chatting-box {
    border-radius: 12px !important;
    padding: 10px 14px !important;
}
/* received (other party): gray */
.user-dashboard-section .msger-chat .user-reply .chatting-box {
    background: #F6F6F6 !important;
    border: 1px solid transparent !important;
}
.user-dashboard-section .msger-chat .user-reply .chatting-box p {
    color: var(--mx-ink, #111) !important;
}
/* sent (own): black on white text */
.user-dashboard-section .msger-chat .admin-reply .chatting-box {
    background: #0A0A0A !important;
    border: 1px solid #0A0A0A !important;
}
.user-dashboard-section .msger-chat .admin-reply .chatting-box p {
    color: #ffffff !important;
}
/* timestamps: muted 11px */
.user-dashboard-section .msger-chat .chatting-box h6 {
    font-size: 11px !important;
    font-weight: 500;
    color: var(--mx-muted, #545454) !important;
    margin-top: 4px !important;
}
.user-dashboard-section .msger-chat .admin-reply .chatting-box h6 {
    color: rgba(255, 255, 255, .55) !important;
}
/* empty conversation note */
.user-dashboard-section .msger-chat .no-chat-message {
    color: var(--mx-muted, #545454);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 24px;
}

/* ------------------------------------------------------------
   19. PRIMARY CTAs — black, 4px radius, 48-52px, press feedback
   ------------------------------------------------------------ */
.user-dashboard-section .btn.gradient-bg-color,
.user-dashboard-section .btn.btn-solid,
.user-dashboard-section .btn-solid,
.user-dashboard-section .right-details-box .dashboard-details-box .dashboard-title > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 9999px !important;
    line-height: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.user-dashboard-section .btn.gradient-bg-color:active,
.user-dashboard-section .btn.btn-solid:active,
.user-dashboard-section .btn-solid:active {
    transform: translateY(0) scale(.985);
    background: #0A0A0A !important;
    background-image: none !important;
    color: #ffffff !important;
}
/* chat send: same 48px target, keep it circular */
.user-dashboard-section .msger-inputarea .msger-send-btn {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}
.user-dashboard-section .msger-inputarea .msger-send-btn:active {
    transform: translateY(0) scale(.94);
    background: #0A0A0A !important;
}
.user-dashboard-section .msger-inputarea button[gallery] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}
/* quiet buttons get the same press feedback, lighter */
.user-dashboard-section .btn.cancel-btn:active {
    transform: translateY(0) scale(.985);
    background: #ECECEC;
}

/* ------------------------------------------------------------
   20. EMPTY STATES — icon tile + heading + muted text
   ------------------------------------------------------------ */
.user-dashboard-section .dashboard-no-data {
    padding: 56px 24px;
}
.user-dashboard-section .dashboard-no-data::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 99px;
    background: #F6F6F6
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545454' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E")
        center / 28px no-repeat;
}
.user-dashboard-section .dashboard-no-data h6 {
    font-family: var(--mx-font-display, "Inter Tight", sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--mx-ink, #111);
    margin-bottom: 6px;
}
.user-dashboard-section .dashboard-no-data p {
    font-size: 14px;
    font-weight: 400;
    color: var(--mx-muted, #545454);
    margin: 0;
}

/* ------------------------------------------------------------
   21. BREADCRUMB / BACK LINKS
   ------------------------------------------------------------ */
.user-dashboard-section .breadcrumb-item a,
.user-dashboard-section a.back-btn,
.user-dashboard-section a.back-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--mx-muted, #545454);
    text-decoration: none;
    transition: color .15s ease;
}
.user-dashboard-section .breadcrumb-item a:hover,
.user-dashboard-section a.back-btn:hover,
.user-dashboard-section a.back-link:hover {
    color: #0A0A0A;
    text-decoration: underline;
}

/* ------------------------------------------------------------
   22. SIDEBAR NAV — active = black text + 2px left border
   Replaces the v1 inverted pill (later rules win the tie).
   ------------------------------------------------------------ */
.user-dashboard-section .left-profile-box .dashboard-option li > a.active {
    background: #ffffff;
    color: var(--mx-ink, #111) !important;
    border-radius: 10px;
    border-left: 2px solid #0A0A0A;
}
.user-dashboard-section .left-profile-box .dashboard-option li > a.active:hover {
    background: #F6F6F6;
}
.user-dashboard-section .left-profile-box .dashboard-option li > a.active i {
    background: transparent;
    border-color: transparent;
    color: #0A0A0A !important;
}

/* ------------------------------------------------------------
   23. SKELETON LOADING — stat cards shimmer
   Opt-in: add .mx-skeleton to a card, or .is-loading to a
   wrapper (.wallet-main-box). 1.2s loop, killed by
   prefers-reduced-motion (section 25).
   ------------------------------------------------------------ */
@keyframes mx-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.user-dashboard-section .mx-skeleton,
.user-dashboard-section .is-loading .wallet-box,
.user-dashboard-section .wallet-box.mx-skeleton {
    background-image: linear-gradient(100deg, #F6F6F6 40%, #ECECEC 50%, #F6F6F6 60%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: mx-shimmer 1.2s linear infinite;
    color: transparent !important;
    pointer-events: none;
}
.user-dashboard-section .mx-skeleton *,
.user-dashboard-section .is-loading .wallet-box * {
    visibility: hidden;
}

/* ------------------------------------------------------------
   24. RESPONSIVE 560px — stack, table card rows, full-width CTAs
   ------------------------------------------------------------ */
@media (max-width: 560px) {
    /* tables become card rows */
    .user-dashboard-section .table-responsive {
        overflow: visible;
    }
    .user-dashboard-section .right-details-box .dashboard-details-box :is(table.history-table.display, table.wallet-table.table, .table) {
        display: block;
        width: 100%;
    }
    .user-dashboard-section .right-details-box .dashboard-details-box :is(table.history-table.display, table.wallet-table.table, .table) thead {
        display: none;
    }
    .user-dashboard-section .right-details-box .dashboard-details-box :is(table.history-table.display, table.wallet-table.table, .table) tbody {
        display: block;
    }
    .user-dashboard-section .right-details-box .dashboard-details-box :is(table.history-table.display, table.wallet-table.table, .table) tbody tr {
        display: block;
        background: #ffffff;
        border: 1px solid #E2E2E2;
        border-radius: 14px;
        padding: 4px 0;
        margin-bottom: 12px;
    }
    .user-dashboard-section .right-details-box .dashboard-details-box :is(table.history-table.display, table.wallet-table.table, .table) tbody tr:last-child {
        margin-bottom: 0;
    }
    .user-dashboard-section .right-details-box .dashboard-details-box :is(table.history-table.display, table.wallet-table.table, .table) tbody tr:hover td {
        background: transparent;
    }
    .user-dashboard-section .right-details-box .dashboard-details-box :is(table.history-table.display, table.wallet-table.table, .table) tbody td {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        padding: 11px 16px;
        border-bottom: 1px solid #ECECEC;
    }
    .user-dashboard-section .right-details-box .dashboard-details-box :is(table.history-table.display, table.wallet-table.table, .table) tbody tr td:last-child {
        border-bottom: none;
    }
    /* CTAs full width */
    .user-dashboard-section .right-details-box .dashboard-details-box .dashboard-title > a,
    .user-dashboard-section .btn.gradient-bg-color,
    .user-dashboard-section .btn.btn-solid,
    .user-dashboard-section .btn-solid {
        width: 100%;
    }
    .user-dashboard-section .modal .modal-footer {
        flex-direction: column;
    }
    .user-dashboard-section .modal .modal-footer .btn {
        width: 100%;
    }
    /* stat cards: tighter number */
    .user-dashboard-section .wallet-main-box .wallet-box h2 {
        font-size: 28px;
    }
}

/* ------------------------------------------------------------
   25. PREFERS-REDUCED-MOTION — no entrance, no shimmer
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .user-dashboard-section .wallet-main-box .wallet-box {
        animation: none;
        transition: none;
    }
    .user-dashboard-section .wallet-main-box .wallet-box:hover {
        transform: none;
    }
    .user-dashboard-section .mx-skeleton,
    .user-dashboard-section .is-loading .wallet-box,
    .user-dashboard-section .wallet-box.mx-skeleton {
        animation: none;
        background-image: none;
        background: #F6F6F6;
    }
}