/* ==========================================================================
   EcoFamilies Merchant Portal — Design System
   merchant.css  |  v2.0
   DO NOT edit ws- or saas- scoped rules here. This file is merchant-only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  --mp-primary:      #D11F30;
  --mp-primary-h:    #B81A29;
  --mp-secondary:    #F9CD58;
  --mp-accent:       #F59E0B;
  --mp-success:      #10B981;
  --mp-error:        #EF4444;
  --mp-warning:      #F59E0B;
  --mp-info:         #3B82F6;

  --mp-bg:           #F8FAFC;
  --mp-surface:      #FFFFFF;
  --mp-text:         #0F172A;
  --mp-text-2:       #64748B;
  --mp-text-3:       #94A3B8;
  --mp-border:       #E2E8F0;

  --mp-sidebar-w:    264px;
  --mp-sidebar-w-sm: 72px;
  --mp-header-h:     64px;

  --mp-radius-sm:    8px;
  --mp-radius:       12px;
  --mp-radius-lg:    16px;
  --mp-radius-xl:    20px;

  --mp-shadow-sm:    0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --mp-shadow:       0 2px 8px rgba(15,23,42,.08);
  --mp-shadow-lg:    0 10px 24px rgba(15,23,42,.10);

  --mp-ease:         cubic-bezier(.4,0,.2,1);
  --mp-ease-out:     cubic-bezier(0,0,.2,1);
  --mp-trans:        .2s var(--mp-ease);
}

/* --------------------------------------------------------------------------
   2. Base Reset & Typography
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--mp-bg);
  color: var(--mp-text);
  font-size: .9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--mp-primary);
  text-decoration: none;
}

a:hover {
  color: var(--mp-primary-h);
}

img {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   3. App Shell — Sidebar
   -------------------------------------------------------------------------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--mp-sidebar-w);
  height: 100vh;
  background: var(--mp-surface);
  border-right: 1px solid var(--mp-border);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow: hidden;
  transition: width var(--mp-trans), transform var(--mp-trans);
  box-shadow: var(--mp-shadow-sm);
}

/* Logo area */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--mp-header-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--mp-border);
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-logo .light-logo {
  height: 30px;
  width: auto;
  flex-shrink: 0;
}

/* Monogram shown only in collapsed state */
.mp-logo-monogram {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--mp-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -.01em;
}

.sidebar-logo .mp-merchant-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(209,31,48,.10);
  color: var(--mp-primary);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Scroll area */
.sidebar-menu-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--mp-border) transparent;
}

.sidebar-menu-area::-webkit-scrollbar {
  width: 4px;
}

.sidebar-menu-area::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-menu-area::-webkit-scrollbar-thumb {
  background: var(--mp-border);
  border-radius: 4px;
}

/* Nav list */
.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0 10px;
}

.sidebar-menu-group-title {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mp-text-2);
  padding: 16px 10px 6px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--mp-trans), height var(--mp-trans), padding var(--mp-trans);
  list-style: none;
}

.sidebar-menu > li {
  margin-bottom: 2px;
}

.sidebar-menu > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--mp-radius-sm);
  color: var(--mp-text-2);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--mp-trans), color var(--mp-trans);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-menu > li > a .menu-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  color: var(--mp-text-2);
  transition: color var(--mp-trans);
}

.sidebar-menu > li > a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-menu > li > a:hover {
  background: rgba(209,31,48,.07);
  color: var(--mp-primary);
}

.sidebar-menu > li > a:hover .menu-icon {
  color: var(--mp-primary);
}

.sidebar-menu > li.active-page > a {
  background: rgba(209,31,48,.10);
  color: var(--mp-primary);
  font-weight: 600;
}

.sidebar-menu > li.active-page > a .menu-icon {
  color: var(--mp-primary);
}

/* Sidebar close button (mobile) */
.sidebar-close-btn {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--mp-text-2);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: background var(--mp-trans), color var(--mp-trans);
  z-index: 10;
}

.sidebar-close-btn:hover {
  background: var(--mp-bg);
  color: var(--mp-text);
}

/* Sidebar user block */
.mp-sidebar-user {
  border-top: 1px solid var(--mp-border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  overflow: hidden;
  min-height: 70px;
}

.mp-sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mp-primary);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.mp-sidebar-user-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mp-sidebar-user-name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--mp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.3;
}

.mp-sidebar-user-email {
  font-size: .72rem;
  color: var(--mp-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.mp-sidebar-logout-btn {
  background: none;
  border: none;
  color: var(--mp-text-2);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--mp-trans), background var(--mp-trans);
  flex-shrink: 0;
  font-size: 1rem;
}

.mp-sidebar-logout-btn:hover {
  color: var(--mp-error);
  background: rgba(239,68,68,.08);
}

/* --------------------------------------------------------------------------
   4. App Shell — Main Content
   -------------------------------------------------------------------------- */
.dashboard-main {
  margin-left: var(--mp-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--mp-trans);
}

/* --------------------------------------------------------------------------
   5. Header / Navbar
   -------------------------------------------------------------------------- */
.navbar-header {
  position: sticky;
  top: 0;
  height: var(--mp-header-h);
  background: var(--mp-surface);
  border-bottom: 1px solid var(--mp-border);
  z-index: 1030;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  box-shadow: var(--mp-shadow-sm);
}

.mp-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.mp-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.mp-header-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--mp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toggle buttons */
.sidebar-toggle,
.sidebar-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--mp-text-2);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: var(--mp-radius-sm);
  font-size: 1.2rem;
  transition: background var(--mp-trans), color var(--mp-trans);
  flex-shrink: 0;
}

.sidebar-toggle:hover,
.sidebar-mobile-toggle:hover {
  background: var(--mp-bg);
  color: var(--mp-text);
}

.sidebar-mobile-toggle {
  display: none;
}

/* Search */
.navbar-search {
  position: relative;
  display: flex;
  align-items: center;
}

.navbar-search input {
  background: var(--mp-bg);
  border: 1.5px solid var(--mp-border);
  border-radius: 20px;
  padding: 7px 14px 7px 36px;
  font-size: .85rem;
  color: var(--mp-text);
  width: 220px;
  transition: border-color var(--mp-trans), box-shadow var(--mp-trans), width var(--mp-trans);
  font-family: inherit;
}

.navbar-search input::placeholder {
  color: var(--mp-text-2);
}

.navbar-search input:focus {
  outline: none;
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(209,31,48,.12);
  width: 280px;
}

.navbar-search .icon {
  position: absolute;
  left: 12px;
  color: var(--mp-text-2);
  font-size: 1rem;
  pointer-events: none;
}

/* Header icon buttons */
.mp-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--mp-bg);
  color: var(--mp-text-2);
  cursor: pointer;
  font-size: 1.1rem;
  transition: background var(--mp-trans), color var(--mp-trans);
  position: relative;
  flex-shrink: 0;
}

.mp-header-btn:hover {
  background: rgba(209,31,48,.08);
  color: var(--mp-primary);
}

.mp-header-btn .mp-badge-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: var(--mp-error);
  border-radius: 50%;
  border: 2px solid var(--mp-surface);
}

/* Notification count badge on bell */
.mp-header-notif-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--mp-error);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--mp-surface);
  line-height: 1;
}

/* User avatar circle */
.mp-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mp-primary);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: box-shadow var(--mp-trans);
}

.mp-header-avatar:hover {
  box-shadow: 0 0 0 3px rgba(209,31,48,.20);
}

/* Header dropdowns */
.navbar-header .dropdown-menu {
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-lg);
  padding: 8px;
  min-width: 220px;
  margin-top: 8px !important;
}

.navbar-header .dropdown-menu.dropdown-menu-lg {
  min-width: 340px;
}

.navbar-header .dropdown-menu.dropdown-menu-sm {
  min-width: 200px;
}

.navbar-header .dropdown-item {
  border-radius: var(--mp-radius-sm);
  padding: 8px 12px;
  font-size: .875rem;
  color: var(--mp-text);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--mp-trans), color var(--mp-trans);
}

.navbar-header .dropdown-item:hover,
.navbar-header .dropdown-item:focus {
  background: rgba(209,31,48,.07);
  color: var(--mp-primary);
}

.navbar-header .dropdown-item.hover-text-danger:hover {
  color: var(--mp-error);
  background: rgba(239,68,68,.06);
}

/* Notification dropdown header */
.mp-notif-header {
  background: rgba(209,31,48,.06);
  border-radius: var(--mp-radius-sm);
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mp-notif-header h6 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--mp-text);
  margin: 0;
}

/* Profile card in dropdown */
.mp-profile-dropdown-card {
  background: rgba(209,31,48,.06);
  border-radius: var(--mp-radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mp-profile-dropdown-card h6 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--mp-text);
  margin-bottom: 2px;
}

.mp-profile-dropdown-card span {
  font-size: .75rem;
  color: var(--mp-text-2);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. Main Body
   -------------------------------------------------------------------------- */
.dashboard-main-body {
  flex: 1;
  padding: 24px;
  min-height: calc(100vh - var(--mp-header-h));
}

/* --------------------------------------------------------------------------
   7. Sidebar Collapsed State
   -------------------------------------------------------------------------- */
body.sidebar-collapsed .sidebar {
  width: var(--mp-sidebar-w-sm);
}

body.sidebar-collapsed .dashboard-main {
  margin-left: var(--mp-sidebar-w-sm);
}

body.sidebar-collapsed .sidebar-logo .light-logo {
  display: none;
}

body.sidebar-collapsed .sidebar-logo .mp-logo-monogram {
  display: flex;
}

body.sidebar-collapsed .sidebar-logo .mp-merchant-badge {
  display: none;
}

body.sidebar-collapsed .sidebar-logo {
  justify-content: center;
  padding: 0;
}

body.sidebar-collapsed .sidebar-menu > li > a span {
  display: none;
}

body.sidebar-collapsed .sidebar-menu > li > a {
  justify-content: center;
  padding: 9px;
}

body.sidebar-collapsed .sidebar-menu > li > a .menu-icon {
  font-size: 1.3rem;
  margin: 0;
}

body.sidebar-collapsed .sidebar-menu-group-title {
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding: 0;
  overflow: hidden;
}

body.sidebar-collapsed .mp-sidebar-user-info {
  display: none;
}

body.sidebar-collapsed .mp-sidebar-logout-btn {
  display: none;
}

body.sidebar-collapsed .mp-sidebar-user {
  justify-content: center;
  padding: 14px 0;
}

/* --------------------------------------------------------------------------
   8. Mobile Sidebar
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s var(--mp-ease), width var(--mp-trans);
    width: var(--mp-sidebar-w) !important;
    z-index: 1050;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-close-btn {
    display: flex;
  }

  .sidebar-toggle {
    display: none;
  }

  .sidebar-mobile-toggle {
    display: flex;
  }

  .dashboard-main {
    margin-left: 0 !important;
  }

  /* Overlay */
  body.sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 1045;
    animation: mp-fadeIn .2s var(--mp-ease);
  }
}

/* --------------------------------------------------------------------------
   9. Bootstrap Component Overrides — Buttons
   -------------------------------------------------------------------------- */
.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  border-radius: var(--mp-radius-sm);
  transition: all var(--mp-trans);
}

.btn-primary {
  background-color: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--mp-primary-h) !important;
  border-color: var(--mp-primary-h) !important;
  box-shadow: 0 4px 12px rgba(209,31,48,.30) !important;
}

.btn-primary:active {
  background-color: var(--mp-primary-h) !important;
  border-color: var(--mp-primary-h) !important;
}

.btn-outline-primary {
  color: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(209,31,48,.20) !important;
}

.btn-success {
  background-color: var(--mp-success) !important;
  border-color: var(--mp-success) !important;
  color: #fff !important;
}

.btn-success:hover {
  background-color: #059669 !important;
  border-color: #059669 !important;
}

.btn-danger {
  background-color: var(--mp-error) !important;
  border-color: var(--mp-error) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background-color: #DC2626 !important;
  border-color: #DC2626 !important;
}

.btn-warning {
  background-color: var(--mp-accent) !important;
  border-color: var(--mp-accent) !important;
  color: #fff !important;
}

.btn-warning:hover {
  background-color: #D97706 !important;
  border-color: #D97706 !important;
}

.btn-secondary {
  background-color: var(--mp-text-2) !important;
  border-color: var(--mp-text-2) !important;
  color: #fff !important;
}

.btn-light {
  background-color: var(--mp-bg) !important;
  border-color: var(--mp-border) !important;
  color: var(--mp-text) !important;
}

.btn-light:hover {
  background-color: #EEF2F7 !important;
}

/* --------------------------------------------------------------------------
   10. Bootstrap Component Overrides — Cards
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--mp-border) !important;
  border-radius: var(--mp-radius-lg) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.05) !important;
  background: var(--mp-surface) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--mp-border) !important;
  padding: 16px 20px !important;
  font-weight: 600;
  color: var(--mp-text);
}

.card-body {
  padding: 20px !important;
}

.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--mp-border) !important;
  padding: 14px 20px !important;
}

/* --------------------------------------------------------------------------
   11. Bootstrap Component Overrides — Tables
   -------------------------------------------------------------------------- */
.table {
  --bs-table-hover-bg: rgba(209,31,48,.03);
  border-color: var(--mp-border);
}

.table thead th {
  background: var(--mp-bg) !important;
  color: var(--mp-text-2) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--mp-border) !important;
  padding: 12px 16px !important;
  white-space: nowrap;
}

.table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-color: var(--mp-border);
  font-size: .875rem;
  color: var(--mp-text);
}

.table tbody tr:hover {
  background: rgba(209,31,48,.03) !important;
}

.table-responsive {
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
  border: 1px solid var(--mp-border);
}

/* --------------------------------------------------------------------------
   12. Bootstrap Component Overrides — Forms
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
  border: 1.5px solid var(--mp-border) !important;
  border-radius: var(--mp-radius-sm) !important;
  font-size: .9rem !important;
  padding: 10px 14px !important;
  color: var(--mp-text) !important;
  background-color: var(--mp-surface) !important;
  font-family: inherit !important;
  transition: border-color var(--mp-trans), box-shadow var(--mp-trans) !important;
}

.form-control::placeholder {
  color: var(--mp-text-2);
  opacity: .75;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--mp-primary) !important;
  box-shadow: 0 0 0 3px rgba(209,31,48,.12) !important;
  outline: none !important;
}

.form-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--mp-text);
  margin-bottom: 6px;
}

.form-text {
  font-size: .78rem;
  color: var(--mp-text-2);
}

.invalid-feedback {
  font-size: .78rem;
}

.form-check-input:checked {
  background-color: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(209,31,48,.15) !important;
  border-color: var(--mp-primary) !important;
}

.input-group-text {
  background: var(--mp-bg) !important;
  border: 1.5px solid var(--mp-border) !important;
  color: var(--mp-text-2) !important;
  border-radius: var(--mp-radius-sm) !important;
}

/* --------------------------------------------------------------------------
   13. Bootstrap Badges + Custom Status Badges
   -------------------------------------------------------------------------- */
.badge {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .02em;
}

.badge.bg-primary {
  background-color: var(--mp-primary) !important;
}

.badge.bg-success {
  background-color: var(--mp-success) !important;
}

.badge.bg-danger {
  background-color: var(--mp-error) !important;
}

.badge.bg-warning {
  background-color: var(--mp-accent) !important;
  color: #fff !important;
}

/* Merchant portal pill badges */
.mp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

.mp-badge-success {
  background: rgba(16,185,129,.12);
  color: #059669;
}

.mp-badge-error {
  background: rgba(239,68,68,.10);
  color: #DC2626;
}

.mp-badge-warning {
  background: rgba(245,158,11,.12);
  color: #B45309;
}

.mp-badge-info {
  background: rgba(59,130,246,.10);
  color: #2563EB;
}

.mp-badge-pending {
  background: rgba(100,116,139,.10);
  color: #475569;
}

.mp-badge-teal {
  background: rgba(209,31,48,.10);
  color: var(--mp-primary);
}

.mp-badge-draft {
  background: rgba(148,163,184,.12);
  color: #64748B;
}

/* Sidebar pending count badge */
.mp-pending-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: .68rem;
  font-weight: 700;
  background: var(--mp-error);
  color: #fff;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   14. Metric Cards
   -------------------------------------------------------------------------- */
.mp-metric {
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow var(--mp-trans), transform var(--mp-trans);
}

.mp-metric:hover {
  box-shadow: var(--mp-shadow-lg);
  transform: translateY(-2px);
}

.mp-metric-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mp-metric-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--mp-text);
  line-height: 1.1;
}

.mp-metric-label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--mp-text-2);
}

.mp-metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.mp-metric-icon.teal  { background: rgba(209,31,48,.10);  color: var(--mp-primary); }
.mp-metric-icon.green { background: rgba(16,185,129,.10);  color: var(--mp-success); }
.mp-metric-icon.amber { background: rgba(245,158,11,.10);  color: var(--mp-accent); }
.mp-metric-icon.blue  { background: rgba(59,130,246,.10);  color: var(--mp-info); }
.mp-metric-icon.red   { background: rgba(239,68,68,.10);   color: var(--mp-error); }

.mp-metric-change {
  font-size: .78rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.mp-metric-change.up   { color: var(--mp-success); }
.mp-metric-change.down { color: var(--mp-error); }

/* --------------------------------------------------------------------------
   15. Page Header — canonical definition (see also §21 override block)
   -------------------------------------------------------------------------- */
/* All authoritative rules are in §21 (PREMIUM OVERHAUL). This block is a
   no-op stub kept so line numbers stay stable for tooling. */

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.mp-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--mp-border);
  background: var(--mp-surface);
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   17. Auth Layout
   -------------------------------------------------------------------------- */
.mp-auth-shell {
  display: grid;
  grid-template-columns: 45fr 55fr;
  min-height: 100vh;
}

.mp-auth-left {
  background: linear-gradient(145deg, #D11F30, #B81A29);
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  flex-shrink: 0;
}

.mp-auth-left::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  top: -100px;
  right: -100px;
}

.mp-auth-left::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  bottom: -80px;
  left: -60px;
}

.mp-auth-left h1 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

.mp-auth-left p {
  font-size: .95rem;
  opacity: .85;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

.mp-auth-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 52px 60px 48px;
  background: #fff;
  min-height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mp-auth-right::-webkit-scrollbar { display: none; }

/* Push content to vertical center for short forms; body scrolls for long ones */
.mp-auth-right > :first-child { margin-top: auto; }
.mp-auth-right > :last-child  { margin-bottom: auto; }

.mp-auth-form {
  width: 100%;
  max-width: 520px;
}

.mp-auth-form h2 {
  font-size: 1.5rem !important;
  font-weight: 800;
  color: var(--mp-text);
  margin-bottom: 6px;
}

.mp-auth-form .mp-auth-subtitle {
  font-size: .875rem;
  color: var(--mp-text-2);
  margin-bottom: 28px;
}

@media (max-width: 1199px) {
  .mp-auth-right {
    padding: 36px 48px;
  }
}

@media (max-width: 991px) {
  .mp-auth-right {
    padding: 32px 36px;
  }
  .mp-auth-form,
  .mp-auth-form-wide {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .mp-auth-shell {
    grid-template-columns: 1fr;
  }

  .mp-auth-left {
    display: none;
  }

  .mp-auth-right {
    padding: 32px 24px;
    align-items: flex-start;
  }

  .mp-auth-form,
  .mp-auth-form-wide {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   18. Preloader (teal override)
   -------------------------------------------------------------------------- */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--mp-surface);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}

.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid transparent;
  border-radius: 50%;
  border-right-color: var(--mp-primary);
  animation: l15 1s infinite linear;
}

.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
  animation: l15 2s infinite;
}

.loader::after {
  margin: 8px;
  animation-duration: 3s;
}

body.loaded #preloader {
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   19. Animations
   -------------------------------------------------------------------------- */
@keyframes l15 {
  100% { transform: rotate(1turn); }
}

@keyframes mp-fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mp-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mp-slideInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mp-skeleton {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.mp-fade-up { animation: mp-fadeUp .3s var(--mp-ease) both; }
.mp-fade-in { animation: mp-fadeIn .3s var(--mp-ease) both; }

.mp-delay-1 { animation-delay: .05s; }
.mp-delay-2 { animation-delay: .10s; }
.mp-delay-3 { animation-delay: .15s; }
.mp-delay-4 { animation-delay: .20s; }
.mp-delay-5 { animation-delay: .25s; }
.mp-delay-6 { animation-delay: .30s; }

/* --------------------------------------------------------------------------
   20. Loading Skeletons
   -------------------------------------------------------------------------- */
.mp-skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: mp-skeleton 1.5s infinite;
  border-radius: var(--mp-radius-sm);
}

.mp-skeleton-text {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.mp-skeleton-title {
  height: 20px;
  border-radius: 6px;
  margin-bottom: 12px;
  width: 60%;
}

.mp-skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mp-skeleton-card {
  height: 120px;
  border-radius: var(--mp-radius-lg);
}

/* --------------------------------------------------------------------------
   21. Wallet Card
   -------------------------------------------------------------------------- */
.mp-wallet-card {
  background: linear-gradient(135deg, var(--mp-primary), var(--mp-primary-h));
  border-radius: var(--mp-radius-xl);
  padding: 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.mp-wallet-card::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  top: -60px;
  right: -40px;
}

.mp-wallet-card::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  bottom: -50px;
  left: 20px;
}

.mp-wallet-balance-label {
  font-size: .78rem;
  font-weight: 500;
  opacity: .85;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.mp-wallet-balance-value {
  font-size: 2rem;
  font-weight: 800;
  margin: 6px 0 16px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   22. Onboarding Wizard Steps
   -------------------------------------------------------------------------- */
.mp-wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
}

.mp-wizard-step {
  flex: 1;
  text-align: center;
  position: relative;
}

.mp-wizard-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--mp-border);
  z-index: 0;
}

.mp-wizard-step.completed:not(:last-child)::after {
  background: var(--mp-primary);
}

.mp-wizard-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--mp-border);
  background: var(--mp-surface);
  color: var(--mp-text-2);
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  position: relative;
  z-index: 1;
  transition: all var(--mp-trans);
}

.mp-wizard-step.active .mp-wizard-step-num {
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(209,31,48,.15);
}

.mp-wizard-step.completed .mp-wizard-step-num {
  background: var(--mp-success);
  border-color: var(--mp-success);
  color: #fff;
}

.mp-wizard-step-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--mp-text-2);
}

.mp-wizard-step.active .mp-wizard-step-label {
  color: var(--mp-primary);
  font-weight: 600;
}

.mp-wizard-step.completed .mp-wizard-step-label {
  color: var(--mp-success);
}

/* --------------------------------------------------------------------------
   23. Driver.js Popover Override (teal)
   -------------------------------------------------------------------------- */
.driver-popover-next-btn {
  background-color: #D11F30 !important;
  color: #fff !important;
}

.driver-popover-next-btn:hover {
  background-color: #B81A29 !important;
}

/* --------------------------------------------------------------------------
   24. Toastr Overrides
   -------------------------------------------------------------------------- */
#toast-container > .toast {
  background-color: rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(10px);
  color: var(--mp-text) !important;
  box-shadow: var(--mp-shadow-lg) !important;
  border-radius: 12px;
  opacity: 1 !important;
  padding: 16px 16px 16px 56px;
  width: 350px;
}

#toast-container > .toast-success { border-left: 6px solid var(--mp-success) !important; }
#toast-container > .toast-error   { border-left: 6px solid var(--mp-error) !important; }
#toast-container > .toast-warning { border-left: 6px solid var(--mp-accent) !important; }
#toast-container > .toast-info    { border-left: 6px solid var(--mp-info) !important; }

.toast-title   { font-weight: 700 !important; font-size: 1rem !important; margin-bottom: 4px; }
.toast-message { font-size: .875rem !important; opacity: .8; }

#toast-container > .toast:before {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "remixicon" !important;
  font-size: 24px;
}

#toast-container > .toast-success:before { content: "\eb80"; color: var(--mp-success); }
#toast-container > .toast-error:before   { content: "\ec4c"; color: var(--mp-error); }
#toast-container > .toast-warning:before { content: "\ea34"; color: var(--mp-accent); }
#toast-container > .toast-info:before    { content: "\ec3e"; color: var(--mp-info); }

.toast-close-button { color: #94a3b8 !important; top: 8px !important; right: 8px !important; }
.toast-progress     { background-color: rgba(0, 0, 0, .05) !important; height: 4px !important; }

/* --------------------------------------------------------------------------
   25. DataTables Overrides
   -------------------------------------------------------------------------- */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--mp-border);
  border-radius: var(--mp-radius-sm);
  padding: 6px 10px;
  font-size: .85rem;
  color: var(--mp-text);
  background: var(--mp-surface);
  font-family: inherit;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(209,31,48,.12);
  outline: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  color: #fff !important;
  border-radius: var(--mp-radius-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(209,31,48,.08) !important;
  border-color: transparent !important;
  color: var(--mp-primary) !important;
  border-radius: var(--mp-radius-sm);
}

/* --------------------------------------------------------------------------
   26. RTL Support
   -------------------------------------------------------------------------- */
[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--mp-border);
}

[dir="rtl"] .dashboard-main {
  margin-left: 0;
  margin-right: var(--mp-sidebar-w);
}

[dir="rtl"] body.sidebar-collapsed .dashboard-main {
  margin-right: var(--mp-sidebar-w-sm);
}

[dir="rtl"] .sidebar-menu > li > a {
  flex-direction: row-reverse;
}

[dir="rtl"] .mp-page-head {
  flex-direction: row-reverse;
}

[dir="rtl"] .navbar-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .navbar-search .icon {
  left: auto;
  right: 12px;
}

[dir="rtl"] .navbar-search input {
  padding: 7px 36px 7px 14px;
}

@media (max-width: 991px) {
  [dir="rtl"] .sidebar {
    transform: translateX(100%);
    left: auto;
    right: 0;
  }

  [dir="rtl"] body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  [dir="rtl"] .dashboard-main {
    margin-right: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   27. Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .navbar-search input {
    width: 160px;
  }
}

@media (max-width: 991px) {
  /* Make card headers with tabs wrap on tablet */
  .card-header .nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  .dashboard-main-body {
    padding: 16px;
  }

  .navbar-header {
    padding: 0 16px;
    gap: 10px;
  }

  /* page head handled by §21 responsive block below */
  .mp-page-head-responsive-placeholder {
  }

  .mp-footer {
    padding: 14px 16px;
  }

  .navbar-search {
    display: none;
  }

  .mp-metric-value {
    font-size: 1.4rem;
  }

  /* Tables always scrollable on mobile */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* Card body padding reduced on mobile */
  .card-body {
    padding: 16px !important;
  }

  .card-header {
    padding: 12px 16px !important;
  }

  /* Wizard steps hide labels on mobile */
  .mp-step-label,
  .mp-wizard-step-label {
    display: none;
  }

  /* Modal full-width on small screens */
  .modal-dialog {
    margin: 8px;
  }
}

@media (max-width: 576px) {
  .mp-wallet-card {
    padding: 20px;
  }

  .mp-auth-right {
    padding: 32px 20px;
  }

  /* OTP inputs smaller on very small screens */
  .mp-otp-group {
    gap: 6px;
  }

  .mp-otp-input {
    width: 42px;
    height: 52px;
    font-size: 1.25rem;
  }

  /* Metric grid single column */
  .mp-metric-value {
    font-size: 1.25rem;
  }

  .mp-page-title {
    font-size: 1.1rem;
  }

  /* Pagination wrap */
  .pagination {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Badge tabs — scroll horizontally */
  .d-flex.flex-wrap.align-items-center.gap-2 {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  /* Shrink step circles on small phones so 5 steps fit without overflow */
  .mp-step-circle {
    width: 28px;
    height: 28px;
    font-size: .75rem;
  }

  .mp-step-line {
    margin-top: 13px; /* (28/2 − 1) = 13px — re-align with smaller circle */
  }

  .mp-prog-dot {
    width: 28px;
    height: 28px;
    font-size: .75rem;
  }

  .mp-prog-line {
    margin-top: 13px;
  }
}

/* --------------------------------------------------------------------------
   28. Utility Classes (merchant-specific)
   -------------------------------------------------------------------------- */
.mp-divider {
  border: none;
  border-top: 1px solid var(--mp-border);
  margin: 16px 0;
}

.mp-text-primary  { color: var(--mp-primary) !important; }
.mp-text-muted    { color: var(--mp-text-2) !important; }
.mp-bg-teal-soft  { background: rgba(209,31,48,.06) !important; }

/* Admin template color utility overrides → teal */
.text-primary-600,
.hover-text-primary:hover { color: var(--mp-primary) !important; }
.bg-primary-50            { background: rgba(209,31,48,.07) !important; }
.btn-primary-600 {
  background: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.btn-primary-600:hover {
  background: var(--mp-primary-h) !important;
  border-color: var(--mp-primary-h) !important;
}
.btn-outline-primary-600 {
  border-color: var(--mp-primary) !important;
  color: var(--mp-primary) !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.btn-outline-primary-600:hover {
  background: var(--mp-primary) !important;
  color: #fff !important;
}
.mp-page-head__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mp-text);
  margin: 0 0 4px;
}
.mp-page-head__breadcrumb {
  font-size: .8rem;
  color: var(--mp-text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mp-page-head__breadcrumb a {
  color: var(--mp-text-2);
  text-decoration: none;
}
.mp-page-head__breadcrumb a:hover { color: var(--mp-primary); }

.mp-rounded    { border-radius: var(--mp-radius) !important; }
.mp-rounded-lg { border-radius: var(--mp-radius-lg) !important; }

.mp-shadow    { box-shadow: var(--mp-shadow) !important; }
.mp-shadow-lg { box-shadow: var(--mp-shadow-lg) !important; }

/* Image popup (keep) */
.image-popup {
  cursor: zoom-in;
  display: inline-block;
  transition: transform .2s;
}

.image-popup:hover {
  transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   29. Notification / Alert Banner
   -------------------------------------------------------------------------- */
.mp-alert {
  border-radius: var(--mp-radius);
  padding: 14px 16px;
  font-size: .875rem;
  border: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.mp-alert-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.mp-alert.success { background: rgba(16,185,129,.10); color: #065F46; }
.mp-alert.error   { background: rgba(239,68,68,.08);  color: #991B1B; }
.mp-alert.warning { background: rgba(245,158,11,.10); color: #92400E; }
.mp-alert.info    { background: rgba(59,130,246,.10); color: #1E40AF; }

/* --------------------------------------------------------------------------
   30. Empty State
   -------------------------------------------------------------------------- */
.mp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 12px;
}

.mp-empty-state-icon {
  width: 64px;
  height: 64px;
  background: rgba(209,31,48,.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--mp-primary);
  margin-bottom: 4px;
}

.mp-empty-state h5 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mp-text);
  margin: 0;
}

.mp-empty-state p {
  font-size: .875rem;
  color: var(--mp-text-2);
  margin: 0;
  max-width: 300px;
}

/* --------------------------------------------------------------------------
   31. Auth Form Custom Components
   -------------------------------------------------------------------------- */
.mp-field {
  margin-bottom: 20px;
}

.mp-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--mp-text);
  margin-bottom: 6px;
}

.mp-label .req {
  color: var(--mp-error);
  margin-left: 2px;
}

.mp-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--mp-border);
  border-radius: var(--mp-radius-sm);
  font-size: .9rem;
  color: var(--mp-text);
  background: var(--mp-surface);
  font-family: inherit;
  transition: border-color var(--mp-trans), box-shadow var(--mp-trans);
  outline: none;
}

.mp-input::placeholder { color: var(--mp-text-2); opacity: .7; }

.mp-input:focus {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(209,31,48,.12);
}

.mp-input.is-invalid {
  border-color: var(--mp-error);
}

.mp-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

.mp-input-wrap { position: relative; }

.mp-input-wrap .mp-input { padding-right: 44px; }

.mp-input-icon-btn {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--mp-text-2);
  cursor: pointer; padding: 2px;
  font-size: 1rem; line-height: 1;
  transition: color .15s;
}

.mp-input-icon-btn:hover { color: var(--mp-text); }

.mp-error {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  color: var(--mp-error);
  margin-top: 5px;
}

.mp-link {
  color: var(--mp-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}

.mp-link:hover { color: var(--mp-primary-h); }

.mp-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 20px;
}

/* style.css applies appearance:none to all inputs, making native checkboxes invisible.
   Fix: hide the native input entirely and render a custom box via label::before */
.mp-check-row {
  font-size: .82rem;
  color: var(--mp-text-2);
  line-height: 1.5;
  position: relative;
}

/* Take native input out of flow — it still handles checked state */
.mp-check-row input[type=checkbox] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Label is a block; padding-left reserves space for the absolutely-positioned box */
.mp-check-row label {
  display: block;
  position: relative;
  padding-left: 27px; /* 17px box + 10px gap */
  cursor: pointer;
  line-height: 1.6;
}

/* Custom checkbox box — absolute so it doesn't disrupt inline text flow */
.mp-check-row label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--mp-border);
  border-radius: 4px;
  background: var(--mp-surface);
  box-sizing: border-box;
  transition: border-color .15s, background .15s;
}

/* Checked: teal fill + white tick */
.mp-check-row input[type=checkbox]:checked + label::before {
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M2 8l4 4 8-8'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Focus ring */
.mp-check-row input[type=checkbox]:focus + label::before {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(209,31,48,.15);
}

/* Auth buttons */
.mp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 20px;
  border-radius: var(--mp-radius-sm);
  font-size: .9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all .2s var(--mp-ease);
  text-decoration: none;
  margin-bottom: 12px;
}

.mp-btn-primary {
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  color: #fff;
}

.mp-btn-primary:hover {
  background: var(--mp-primary-h);
  border-color: var(--mp-primary-h);
  box-shadow: 0 4px 14px rgba(209,31,48,.30);
}

.mp-btn-primary:disabled {
  opacity: .6; cursor: not-allowed;
}

.mp-btn-outline {
  background: transparent;
  border-color: var(--mp-border);
  color: var(--mp-text);
}

.mp-btn-outline:hover {
  border-color: var(--mp-primary);
  color: var(--mp-primary);
  background: rgba(209,31,48,.04);
}

/* Button loading spinner */
.mp-spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mp-spin .7s linear infinite;
}

.mp-spinner.active { display: inline-block; }

@keyframes mp-spin { to { transform: rotate(360deg); } }

/* Auth divider ("or") */
.mp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--mp-text-2);
}

.mp-divider::before,
.mp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mp-border);
}

.mp-center-text {
  text-align: center;
  font-size: .82rem;
  color: var(--mp-text-2);
  margin: 0;
}

/* Auth stats (left panel) */
.mp-auth-stat-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.mp-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px;
  padding: 7px 14px;
}

.mp-stat-num   { font-size: .9rem; font-weight: 800; color: #fff; }
.mp-stat-label { font-size: .72rem; opacity: .75; color: #fff; }

/* Password strength bar */
.mp-pw-strength {
  height: 4px;
  border-radius: 4px;
  background: var(--mp-border);
  margin-top: 8px;
  overflow: hidden;
}

.mp-pw-strength-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .3s, background .3s;
  width: 0;
}

/* OTP input boxes */
.mp-otp-group {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 24px 0;
}

.mp-otp-input {
  width: 52px; height: 60px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  border: 2px solid var(--mp-border);
  border-radius: var(--mp-radius);
  color: var(--mp-text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

.mp-otp-input:focus {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(209,31,48,.12);
}

.mp-otp-input.filled {
  border-color: var(--mp-primary);
  background: rgba(209,31,48,.05);
  color: var(--mp-primary);
}

/* Onboarding status steps */
.mp-onboard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 24px 0;
}

.mp-onboard-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.mp-onboard-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px; left: 50%; width: 100%; height: 2px;
  background: var(--mp-border);
  z-index: 0;
}

.mp-onboard-step .dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--mp-border);
  background: var(--mp-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; color: var(--mp-text-3);
  position: relative; z-index: 1;
}

.mp-onboard-step.current .dot {
  background: var(--mp-accent);
  border-color: var(--mp-accent);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(245,158,11,.2);
}

.mp-onboard-step .step-label {
  font-size: .7rem; color: var(--mp-text-3);
  text-align: center; white-space: nowrap;
}

.mp-onboard-step.current .step-label { color: var(--mp-accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   32. Auth Wizard — mp-steps progress bar
   -------------------------------------------------------------------------- */
.mp-auth-form-wide {
  width: 100%;
  max-width: 620px;
}

.mp-steps {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
}

.mp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  flex-shrink: 0;
}

.mp-step-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--mp-bg);
  border: 2px solid var(--mp-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700;
  color: var(--mp-text-3);
  transition: all .2s var(--mp-ease);
  position: relative; z-index: 1;
}

.mp-step.active .mp-step-circle {
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(209,31,48,.15);
}

.mp-step.completed .mp-step-circle {
  background: var(--mp-success);
  border-color: var(--mp-success);
  color: #fff;
}

.mp-step-label {
  font-size: .75rem; font-weight: 600;
  color: var(--mp-text-3);
  white-space: nowrap;
  text-align: center;
}

.mp-step.active .mp-step-label { color: var(--mp-primary); }
.mp-step.completed .mp-step-label { color: var(--mp-success); }

.mp-step-line {
  flex: 1; height: 2px;
  background: var(--mp-border);
  transition: background .2s;
  margin-top: 17px; /* align line center with 36px circle center (18px − 1px) */
}

.mp-step-line.done { background: var(--mp-primary); }

/* Step panels */
.mp-step-panel { display: none; }
.mp-step-panel.active { display: block; }

/* Step nav buttons */
.mp-step-nav {
  display: flex; align-items: center; gap: 12px;
  margin-top: 24px;
}

.mp-step-nav .mp-btn { width: auto; flex: 1; }

/* mp-select — same as mp-input but select */
.mp-select {
  display: block; width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--mp-border);
  border-radius: var(--mp-radius-sm);
  font-size: .9rem; color: var(--mp-text);
  background: var(--mp-surface);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  cursor: pointer;
}

.mp-select:focus {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(209,31,48,.12);
}

.mp-select.is-invalid { border-color: var(--mp-error); }

/* Day pill selector (in offers/create) */
.day-pill-checkbox:checked + .day-pill-label {
  background-color: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(209,31,48,.3) !important;
}

/* Auth-step review table */
.mp-review-table td { padding: 10px 0; border-bottom: 1px solid var(--mp-border); font-size: .875rem; }
.mp-review-table td:first-child { color: var(--mp-text-2); width: 40%; font-weight: 600; }

/* --------------------------------------------------------------------------
   33. Admin-template colour utility overrides → teal
   -------------------------------------------------------------------------- */
.bg-primary-600 { background-color: var(--mp-primary) !important; }
.bg-primary-50  { background-color: rgba(209,31,48,.06) !important; }
.bg-primary-100 { background-color: rgba(209,31,48,.12) !important; }
.border-primary-100 { border-color: rgba(209,31,48,.2) !important; }
.border-primary-200 { border-color: rgba(209,31,48,.3) !important; }
.btn-success-600 { background-color: var(--mp-success) !important; border-color: var(--mp-success) !important; color:#fff !important; }
.btn-danger-600  { background-color: var(--mp-error) !important; border-color: var(--mp-error) !important; color:#fff !important; }
.btn-warning-600 { background-color: var(--mp-accent) !important; border-color: var(--mp-accent) !important; color:#fff !important; }
.text-success-main { color: var(--mp-success) !important; }
.text-danger-main  { color: var(--mp-error) !important; }
.text-warning-main { color: var(--mp-accent) !important; }
.text-info-main    { color: var(--mp-info) !important; }
.bg-success-main   { background-color: var(--mp-success) !important; }
.bg-warning-main   { background-color: var(--mp-accent) !important; }
.hover-shadow-lg:hover { box-shadow: 0 12px 32px rgba(209,31,48,.15) !important; }
.transition-all { transition: all .2s ease !important; }

/* --------------------------------------------------------------------------
   34. Guest Auth Layout — Left Panel & Decorative Elements
   -------------------------------------------------------------------------- */
.mp-auth-body {
  background: #fff;
  margin: 0;
  padding: 0;
}

/* Logo pinned to top of left panel — also acts as homepage link */
.mp-auth-left-logo {
  position: absolute;
  top: 32px;
  left: 48px;
  z-index: 2;
  text-decoration: none;
  display: inline-block;
  opacity: 1;
  transition: opacity .15s;
}

.mp-auth-left-logo:hover { opacity: .75; }

/* Back-to-website link at the bottom of the right panel */
.mp-auth-back-link {
  width: 100%;
  max-width: 560px;
  margin: 32px auto 0;
  text-align: center;
}

.mp-auth-back-link a {
  font-size: .8rem;
  color: var(--mp-text-3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s;
}

.mp-auth-back-link a:hover { color: var(--mp-primary); }

/* Left panel brand block — fills remaining space, centers content */
.mp-auth-brand {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Stats row (stat pills) */
.mp-auth-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Decorative floating revenue card */
.mp-auth-deco-card {
  position: absolute;
  bottom: 48px;
  right: 20px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  padding: 14px 20px;
  text-align: center;
  z-index: 2;
  min-width: 130px;
}

.mp-deco-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.7);
  margin-bottom: 4px;
}

.mp-deco-value {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 2px;
}

.mp-deco-sub {
  font-size: .7rem;
  color: rgba(255,255,255,.6);
}

/* Decorative blobs */
.mp-blob {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}

.mp-blob-1 {
  width: 340px;
  height: 340px;
  top: -100px;
  right: -100px;
}

.mp-blob-2 {
  width: 220px;
  height: 220px;
  bottom: 50px;
  left: -70px;
}

/* Auth form head (title + subtitle above the form) */
.mp-auth-form-head {
  margin-bottom: 28px;
}

.mp-auth-form-head h2 {
  font-size: 1.5rem !important;
  font-weight: 800;
  color: var(--mp-text);
  margin: 0 0 8px;
  line-height: 1.25;
}

.mp-auth-form-head p {
  font-size: .875rem;
  color: var(--mp-text-2);
  margin: 0;
  line-height: 1.5;
}

/* Override theme's clamp() h2 on ALL auth containers */
.mp-auth-form-wide h2,
.mp-pending-center h2 {
  font-size: 1.5rem !important;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   35. Auth Form Extra Components — Strength Bar
   -------------------------------------------------------------------------- */
.mp-strength-bar {
  height: 4px;
  background: var(--mp-border);
  border-radius: 4px;
  margin: 8px 0 4px;
  overflow: hidden;
}

.mp-strength-fill {
  height: 100%;
  border-radius: 4px;
  width: 0;
  transition: width .3s ease, background .3s ease;
}

.mp-strength-text {
  font-size: .75rem;
  font-weight: 600;
  display: block;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   36. Business Details Wizard — Textarea, Upload Box, Review, Ghost Btn
   -------------------------------------------------------------------------- */

/* Textarea */
.mp-textarea {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--mp-border);
  border-radius: var(--mp-radius-sm);
  font-size: .9rem;
  color: var(--mp-text);
  background: var(--mp-surface);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  resize: vertical;
  min-height: 88px;
  line-height: 1.5;
}

.mp-textarea::placeholder { color: var(--mp-text-2); opacity: .7; }

.mp-textarea:focus {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(209,31,48,.12);
}

.mp-textarea.is-invalid { border-color: var(--mp-error); }

/* Upload drop-zone */
.mp-upload-box {
  border: 2px dashed var(--mp-border);
  border-radius: var(--mp-radius);
  padding: 32px 20px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
}

.mp-upload-box:hover {
  border-color: var(--mp-primary);
  background: rgba(209,31,48,.03);
}

.mp-upload-box.has-file {
  border-color: var(--mp-primary);
  background: rgba(209,31,48,.04);
}

.mp-upload-icon {
  display: block;
  font-size: 2rem;
  color: var(--mp-text-2);
  margin-bottom: 8px;
  line-height: 1;
  transition: color .2s;
}

.mp-upload-box:hover .mp-upload-icon,
.mp-upload-box.has-file .mp-upload-icon {
  color: var(--mp-primary);
}

.mp-upload-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--mp-text);
  margin-bottom: 4px;
}

.mp-upload-hint {
  font-size: .75rem;
  color: var(--mp-text-2);
}

.mp-upload-preview {
  margin-top: 14px;
}

.mp-upload-preview img {
  max-height: 80px;
  border-radius: var(--mp-radius-sm);
  border: 1px solid var(--mp-border);
  margin-bottom: 6px;
}

.mp-upload-filename {
  font-size: .78rem;
  color: var(--mp-primary);
  font-weight: 600;
  word-break: break-all;
}

/* Ghost / secondary button (wizard "Back") */
.mp-btn-ghost {
  background: transparent;
  border-color: var(--mp-border);
  color: var(--mp-text-2);
}

.mp-btn-ghost:hover {
  border-color: var(--mp-text-2);
  color: var(--mp-text);
  background: var(--mp-bg);
}

/* Review summary (Step 5) */
.mp-review-section {
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  overflow: hidden;
  margin-bottom: 16px;
}

.mp-review-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(209,31,48,.05);
  font-size: .82rem;
  font-weight: 700;
  color: var(--mp-text);
  border-bottom: 1px solid var(--mp-border);
}

.mp-review-row {
  display: flex;
  align-items: flex-start;
  padding: 9px 14px;
  border-bottom: 1px solid var(--mp-border);
}

.mp-review-row:last-child { border-bottom: none; }

.mp-review-key {
  width: 42%;
  flex-shrink: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--mp-text-2);
  padding-right: 8px;
}

.mp-review-val {
  font-size: .8rem;
  color: var(--mp-text);
  word-break: break-word;
  flex: 1;
}

/* --------------------------------------------------------------------------
   37. Verification Pending Page
   -------------------------------------------------------------------------- */
.mp-pending-center {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0;
}

.mp-pending-icon-wrap {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(245,158,11,.1);
  color: var(--mp-accent);
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: mp-pending-float 3s ease-in-out infinite;
}

@keyframes mp-pending-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Progress steps row */
.mp-progress-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto 28px;
  max-width: 340px;
}

.mp-prog-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mp-prog-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--mp-border);
  background: var(--mp-surface);
  color: var(--mp-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  transition: all .2s;
  flex-shrink: 0;
}

.mp-prog-dot.done {
  background: var(--mp-success);
  border-color: var(--mp-success);
  color: #fff;
}

.mp-prog-dot.current {
  background: var(--mp-accent);
  border-color: var(--mp-accent);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(245,158,11,.4);
  animation: mp-prog-pulse 1.8s infinite;
}

@keyframes mp-prog-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.4); }
  60%  { box-shadow: 0 0 0 10px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

.mp-prog-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--mp-text-2);
  white-space: nowrap;
}

.mp-prog-line {
  flex: 1;
  height: 2px;
  background: var(--mp-border);
  min-width: 36px;
  margin-top: 17px; /* align line center with 36px dot center (18px − 1px) */
  transition: background .3s;
}

.mp-prog-line.done { background: var(--mp-success); }

/* --------------------------------------------------------------------------
   38. intl-tel-input — teal theme integration
   -------------------------------------------------------------------------- */

/* Wrapper fills field width */
.mp-iti-field .iti {
  display: block;
  width: 100%;
}

/* Style the actual <input> inside iti to match mp-input */
.mp-iti-field .iti input[type="tel"] {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--mp-border);
  border-radius: var(--mp-radius-sm);
  font-size: .9rem;
  color: var(--mp-text);
  background: var(--mp-surface);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  box-sizing: border-box;
}

.mp-iti-field .iti input[type="tel"]:focus {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(209,31,48,.12);
}

.mp-iti-field .iti input[type="tel"].is-invalid {
  border-color: var(--mp-error);
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}

/* Flag / dial-code button */
.mp-iti-field .iti__flag-container,
.mp-iti-field .iti__country-container {
  border-right: 1.5px solid var(--mp-border);
}

.mp-iti-field .iti__selected-flag,
.mp-iti-field .iti__selected-country {
  border-radius: var(--mp-radius-sm) 0 0 var(--mp-radius-sm);
  padding: 0 8px 0 10px;
  background: rgba(209,31,48,.04);
}

.mp-iti-field .iti__selected-flag:hover,
.mp-iti-field .iti__selected-country:hover,
.mp-iti-field .iti__selected-flag[aria-expanded="true"],
.mp-iti-field .iti__selected-country[aria-expanded="true"] {
  background: rgba(209,31,48,.1);
}

/* Dial code shown next to flag */
.mp-iti-field .iti__selected-dial-code {
  font-size: .82rem;
  font-weight: 600;
  color: var(--mp-text);
  margin-left: 4px;
}

/* Dropdown panel */
.iti__dropdown-content {
  font-family: inherit !important;
  border: 1.5px solid var(--mp-border) !important;
  border-radius: var(--mp-radius-sm) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.12) !important;
  overflow: hidden !important;
}

/* Search input inside dropdown */
.iti__search-input {
  font-family: inherit !important;
  font-size: .85rem !important;
  color: var(--mp-text) !important;
  border: none !important;
  border-bottom: 1.5px solid var(--mp-border) !important;
  padding: 9px 12px !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--mp-surface) !important;
}

.iti__search-input:focus { border-bottom-color: var(--mp-primary) !important; }

/* Country rows */
.iti__country.iti__highlight { background: rgba(209,31,48,.08) !important; }
.iti__country:hover           { background: rgba(209,31,48,.05) !important; }
.iti__country-name { font-size: .83rem !important; }
.iti__dial-code    { font-size: .78rem !important; color: var(--mp-text-2) !important; }

/* ==========================================================================
   PREMIUM OVERHAUL — Phase 1
   Enhanced Design System + Dark Sidebar + Component Upgrades
   ========================================================================== */

/* ─── 1. Extended Design Tokens ──────────────────────────────────────────── */
:root {
  /* Sidebar dark surface */
  --mp-sidebar-bg:        #110508;
  --mp-sidebar-border:    rgba(255,255,255,.07);
  --mp-sidebar-text:      rgba(255,255,255,.58);
  --mp-sidebar-text-dim:  rgba(255,255,255,.30);
  --mp-sidebar-text-on:   #ffffff;
  --mp-sidebar-hover-bg:  rgba(255,255,255,.07);
  --mp-sidebar-active-bg: rgba(209,31,48,.18);
  --mp-sidebar-group:     rgba(255,255,255,.26);
  --mp-sidebar-shadow:    4px 0 28px rgba(0,0,0,.40);

  /* Richer shadow scale */
  --mp-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --mp-shadow-sm: 0 1px 4px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --mp-shadow:    0 4px 14px rgba(15,23,42,.09), 0 2px 4px rgba(15,23,42,.05);
  --mp-shadow-lg: 0 12px 36px rgba(15,23,42,.11), 0 4px 10px rgba(15,23,42,.06);
  --mp-shadow-xl: 0 20px 52px rgba(15,23,42,.15), 0 8px 16px rgba(15,23,42,.08);

  /* Larger corner radius scale */
  --mp-radius-xs: 4px;
  --mp-radius-sm: 8px;
  --mp-radius:    12px;
  --mp-radius-lg: 16px;
  --mp-radius-xl: 20px;
  --mp-radius-2xl:24px;

  /* Content background tint */
  --mp-bg: #F7F8FC;
}

/* ─── 2. Dark Sidebar Shell ──────────────────────────────────────────────── */
.sidebar {
  background: var(--mp-sidebar-bg) !important;
  border-right: none !important;
  box-shadow: var(--mp-sidebar-shadow) !important;
}

/* ─── 3. Sidebar Logo Area ───────────────────────────────────────────────── */
.sidebar-logo {
  border-bottom-color: var(--mp-sidebar-border) !important;
  padding: 0 16px !important;
}

/* Invert horizontal logo to white for dark sidebar */
.sidebar-logo .light-logo {
  filter: brightness(0) invert(1) !important;
  opacity: .86;
  height: 26px !important;
}

/* Brand monogram (collapsed state) */
.mp-logo-monogram {
  background: var(--mp-primary);
  color: #fff;
  font-weight: 900;
  font-size: .9rem;
  letter-spacing: -.01em;
}

/* Merchant badge on dark sidebar */
.sidebar-logo .mp-merchant-badge {
  background: rgba(209,31,48,.22) !important;
  color: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(209,31,48,.35) !important;
  font-size: .58rem !important;
  padding: 2px 6px !important;
  letter-spacing: .09em !important;
}

/* ─── 4. Sidebar Close Button (mobile) ──────────────────────────────────── */
.sidebar-close-btn {
  color: rgba(255,255,255,.48) !important;
}

.sidebar-close-btn:hover {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.90) !important;
}

/* ─── 5. Sidebar Scroll Area ─────────────────────────────────────────────── */
.sidebar-menu-area {
  scrollbar-color: rgba(255,255,255,.32) transparent !important;
}

.sidebar-menu-area::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.32) !important;
  border-radius: 4px;
}

.sidebar-menu-area::-webkit-scrollbar-thumb:hover {
  background: rgba(209,31,48,.75) !important;
}

/* ─── 6. Group Titles ────────────────────────────────────────────────────── */
.sidebar-menu-group-title {
  color: var(--mp-sidebar-group) !important;
  font-size: .58rem !important;
  letter-spacing: .12em !important;
  padding-top: 22px !important;
  padding-bottom: 5px !important;
}

/* ─── 7. Nav Items ───────────────────────────────────────────────────────── */
.sidebar-menu > li > a {
  color: var(--mp-sidebar-text) !important;
  border-radius: 7px !important;
  padding: 8px 11px !important;
}

.sidebar-menu > li > a .menu-icon {
  color: rgba(255,255,255,.34) !important;
  font-size: 1.15rem !important;
}

.sidebar-menu > li > a:hover {
  background: var(--mp-sidebar-hover-bg) !important;
  color: var(--mp-sidebar-text-on) !important;
}

.sidebar-menu > li > a:hover .menu-icon {
  color: rgba(255,255,255,.78) !important;
}

/* ─── 8. Active State (inset left accent) ────────────────────────────────── */
.sidebar-menu > li.active-page > a {
  background: var(--mp-sidebar-active-bg) !important;
  color: var(--mp-sidebar-text-on) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--mp-primary) !important;
}

.sidebar-menu > li.active-page > a .menu-icon {
  color: #D11F30 !important;
}

/* ─── 9. Sidebar User Footer ─────────────────────────────────────────────── */
.mp-sidebar-user {
  border-top-color: var(--mp-sidebar-border) !important;
  background: rgba(0,0,0,.22) !important;
  padding: 12px 14px !important;
}

.mp-sidebar-user-avatar {
  background: var(--mp-primary) !important;
  width: 34px !important;
  height: 34px !important;
  font-size: .82rem !important;
}

.mp-sidebar-user-name {
  color: rgba(255,255,255,.88) !important;
  font-size: .82rem !important;
}

.mp-sidebar-user-email {
  color: rgba(255,255,255,.38) !important;
  font-size: .70rem !important;
}

.mp-sidebar-logout-btn {
  color: rgba(255,255,255,.30) !important;
}

.mp-sidebar-logout-btn:hover {
  color: #EF4444 !important;
  background: rgba(239,68,68,.18) !important;
}

/* ─── 10. Collapsed State ────────────────────────────────────────────────── */
body.sidebar-collapsed .sidebar-logo {
  padding: 0 !important;
  justify-content: center !important;
}

body.sidebar-collapsed .sidebar-menu > li.active-page > a {
  box-shadow: inset 3px 0 0 var(--mp-primary) !important;
}

/* ─── 11. Main Body Background ───────────────────────────────────────────── */
body {
  background: var(--mp-bg) !important;
}

.dashboard-main-body {
  background: var(--mp-bg);
}

/* ─── 12. Header Overrides ───────────────────────────────────────────────── */
.navbar-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--mp-border) !important;
  box-shadow: 0 1px 0 var(--mp-border), 0 2px 8px rgba(15,23,42,.04) !important;
}

/* Ensure header flex children are correctly spaced */
.navbar-header > .flex-grow-1 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.navbar-header > .d-flex:last-child {
  gap: 8px;
}

/* ─── 13. Enhanced Card System ───────────────────────────────────────────── */
.card {
  border-radius: var(--mp-radius-lg) !important;
  box-shadow: var(--mp-shadow-sm) !important;
  border: 1px solid var(--mp-border) !important;
}

.card-header {
  font-size: .9rem !important;
  font-weight: 700 !important;
  padding: 18px 22px !important;
  color: var(--mp-text) !important;
}

.card-body {
  padding: 22px !important;
}

/* ─── 14. Premium KPI Card System ────────────────────────────────────────── */
.mp-kpi {
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow var(--mp-trans), transform var(--mp-trans);
  position: relative;
  overflow: hidden;
}

.mp-kpi::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background var(--mp-trans);
}

.mp-kpi:hover {
  box-shadow: var(--mp-shadow-lg);
  transform: translateY(-2px);
}

.mp-kpi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.mp-kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.mp-kpi-value {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--mp-text);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}

.mp-kpi-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--mp-text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
}

.mp-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
}

.mp-kpi-trend.up   { background: rgba(16,185,129,.10); color: #059669; }
.mp-kpi-trend.down { background: rgba(239,68,68,.10);  color: #DC2626; }
.mp-kpi-trend.flat { background: rgba(100,116,139,.10); color: #475569; }

.mp-kpi-sub {
  font-size: .75rem;
  color: var(--mp-text-3);
  margin-top: 2px;
}

/* KPI icon color variants */
.mp-kpi-icon.brand  { background: rgba(209,31,48,.10); color: var(--mp-primary); }
.mp-kpi-icon.blue   { background: rgba(59,130,246,.10); color: #3B82F6; }
.mp-kpi-icon.green  { background: rgba(16,185,129,.10); color: var(--mp-success); }
.mp-kpi-icon.amber  { background: rgba(245,158,11,.10); color: var(--mp-accent); }
.mp-kpi-icon.violet { background: rgba(139,92,246,.10); color: #7C3AED; }
.mp-kpi-icon.red    { background: rgba(239,68,68,.10);  color: var(--mp-error); }

/* Bottom accent color variants */
.mp-kpi.brand-accent::after  { background: var(--mp-primary); }
.mp-kpi.blue-accent::after   { background: #3B82F6; }
.mp-kpi.green-accent::after  { background: var(--mp-success); }
.mp-kpi.amber-accent::after  { background: var(--mp-accent); }
.mp-kpi.violet-accent::after { background: #7C3AED; }

/* ─── 15. Section / Widget Card ──────────────────────────────────────────── */
.mp-widget {
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-sm);
  overflow: hidden;
}

.mp-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--mp-border);
  flex-wrap: wrap;
  gap: 10px;
}

.mp-widget-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--mp-text);
  margin: 0;
}

.mp-widget-body {
  padding: 22px;
}

.mp-widget-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--mp-border);
  background: var(--mp-bg);
}

/* ─── 16. Table Overhaul ─────────────────────────────────────────────────── */
.mp-table-wrap {
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
  background: var(--mp-surface);
  box-shadow: var(--mp-shadow-sm);
}

.mp-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mp-border);
  gap: 12px;
  flex-wrap: wrap;
}

.mp-table-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.mp-table-search input {
  background: var(--mp-bg);
  border: 1.5px solid var(--mp-border);
  border-radius: 20px;
  padding: 7px 14px 7px 34px;
  font-size: .84rem;
  color: var(--mp-text);
  font-family: inherit;
  outline: none;
  transition: border-color var(--mp-trans), box-shadow var(--mp-trans);
  width: 220px;
}

.mp-table-search input:focus {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(209,31,48,.10);
  width: 260px;
}

.mp-table-search .mp-search-icon {
  position: absolute;
  left: 11px;
  color: var(--mp-text-3);
  font-size: .9rem;
  pointer-events: none;
}

/* Table rows */
.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody td {
  font-size: .875rem !important;
  vertical-align: middle !important;
}

/* Row action button */
.mp-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: none;
  background: var(--mp-bg);
  color: var(--mp-text-2);
  cursor: pointer;
  font-size: .95rem;
  transition: background var(--mp-trans), color var(--mp-trans);
  text-decoration: none;
}

.mp-row-action:hover {
  background: rgba(209,31,48,.08);
  color: var(--mp-primary);
}

.mp-row-action.danger:hover {
  background: rgba(239,68,68,.09);
  color: var(--mp-error);
}

/* ─── 17. Form Section System ────────────────────────────────────────────── */
.mp-form-section {
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--mp-shadow-sm);
}

.mp-form-section-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mp-text-2);
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mp-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-form-section-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(209,31,48,.08);
  color: var(--mp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
}

/* ─── 18. Upload Component Full States ───────────────────────────────────── */
.mp-drop-zone {
  position: relative;
  border: 2px dashed var(--mp-border);
  border-radius: var(--mp-radius);
  background: var(--mp-bg);
  transition: border-color .2s, background .2s;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
}

.mp-drop-zone:hover,
.mp-drop-zone.dragover {
  border-color: var(--mp-primary);
  background: rgba(209,31,48,.03);
}

/* Empty state */
.mp-drop-zone__empty {
  padding: 36px 20px;
}

.mp-drop-zone__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(209,31,48,.08);
  color: var(--mp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin: 0 auto 14px;
}

.mp-drop-zone__title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--mp-text);
  margin-bottom: 4px;
}

.mp-drop-zone__sub {
  font-size: .78rem;
  color: var(--mp-text-2);
}

.mp-drop-zone__sub span {
  color: var(--mp-primary);
  font-weight: 600;
}

/* Uploading state */
.mp-drop-zone--uploading {
  border-color: var(--mp-info);
  background: rgba(59,130,246,.04);
  cursor: default;
}

.mp-drop-zone__uploading {
  padding: 36px 20px;
  display: none;
}

.mp-drop-zone--uploading .mp-drop-zone__empty   { display: none; }
.mp-drop-zone--uploading .mp-drop-zone__uploading { display: block; }

.mp-upload-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(59,130,246,.2);
  border-top-color: var(--mp-info);
  border-radius: 50%;
  animation: mp-spin .8s linear infinite;
  margin: 0 auto 12px;
}

.mp-upload-progress-bar {
  height: 4px;
  background: var(--mp-border);
  border-radius: 4px;
  overflow: hidden;
  margin: 10px auto;
  max-width: 200px;
}

.mp-upload-progress-fill {
  height: 100%;
  background: var(--mp-info);
  border-radius: 4px;
  transition: width .3s ease;
}

/* Uploaded / Success state */
.mp-drop-zone--uploaded {
  border-color: var(--mp-success);
  border-style: solid;
  background: rgba(16,185,129,.04);
  cursor: default;
}

.mp-drop-zone__uploaded {
  padding: 20px;
  display: none;
}

.mp-drop-zone--uploaded .mp-drop-zone__empty    { display: none; }
.mp-drop-zone--uploaded .mp-drop-zone__uploaded { display: flex; align-items: center; gap: 14px; text-align: left; }

.mp-uploaded-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--mp-border);
  flex-shrink: 0;
}

.mp-uploaded-thumb-icon {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: rgba(16,185,129,.10);
  color: var(--mp-success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.mp-uploaded-info { flex: 1; min-width: 0; }

.mp-uploaded-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--mp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.mp-uploaded-size {
  font-size: .72rem;
  color: var(--mp-text-2);
}

.mp-uploaded-check {
  color: var(--mp-success);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-right: 4px;
}

.mp-uploaded-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.mp-uploaded-btn {
  font-size: .72rem;
  font-weight: 600;
  border: none;
  background: var(--mp-bg);
  color: var(--mp-text-2);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--mp-trans), color var(--mp-trans);
  white-space: nowrap;
}

.mp-uploaded-btn:hover { background: rgba(209,31,48,.07); color: var(--mp-primary); }

.mp-uploaded-btn.remove:hover { background: rgba(239,68,68,.08); color: var(--mp-error); }

/* Error state */
.mp-drop-zone--error {
  border-color: var(--mp-error);
  border-style: solid;
  background: rgba(239,68,68,.04);
}

.mp-drop-zone__error {
  padding: 28px 20px;
  display: none;
}

.mp-drop-zone--error .mp-drop-zone__empty { display: none; }
.mp-drop-zone--error .mp-drop-zone__error { display: block; }

.mp-drop-zone__error-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(239,68,68,.12);
  color: var(--mp-error);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin: 0 auto 10px;
}

/* ─── 19. Premium Modal System ───────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: var(--mp-radius-xl) !important;
  box-shadow: var(--mp-shadow-xl) !important;
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--mp-border) !important;
  padding: 22px 28px !important;
  background: var(--mp-surface) !important;
}

.modal-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--mp-text) !important;
}

.modal-body {
  padding: 24px 28px !important;
}

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

/* Premium confirmation modal */
.mp-modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0 auto 20px;
}

.mp-modal-icon.danger   { background: rgba(239,68,68,.10);  color: var(--mp-error); }
.mp-modal-icon.warning  { background: rgba(245,158,11,.10); color: var(--mp-accent); }
.mp-modal-icon.success  { background: rgba(16,185,129,.10); color: var(--mp-success); }
.mp-modal-icon.info     { background: rgba(59,130,246,.10); color: var(--mp-info); }
.mp-modal-icon.brand    { background: rgba(209,31,48,.10);  color: var(--mp-primary); }

.mp-modal-heading {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--mp-text);
  margin-bottom: 8px;
  text-align: center;
}

.mp-modal-body-text {
  font-size: .875rem;
  color: var(--mp-text-2);
  line-height: 1.7;
  text-align: center;
  max-width: 340px;
  margin: 0 auto;
}

/* ─── 20. Premium Empty State ────────────────────────────────────────────── */
.mp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  gap: 0;
}

.mp-empty-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(209,31,48,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
}

.mp-empty-ring::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px dashed rgba(209,31,48,.18);
}

.mp-empty-ring iconify-icon,
.mp-empty-ring i {
  font-size: 1.85rem;
  color: var(--mp-primary);
  opacity: .7;
}

.mp-empty-title {
  font-size: .975rem;
  font-weight: 700;
  color: var(--mp-text);
  margin-bottom: 8px;
}

.mp-empty-sub {
  font-size: .84rem;
  color: var(--mp-text-2);
  max-width: 300px;
  line-height: 1.65;
  margin-bottom: 24px;
}

/* ─── 21. Page Header — SINGLE AUTHORITATIVE DEFINITION ──────────────────── */
/*
 * All merchant pages use .mp-page-head / .mp-page-title / .mp-breadcrumb.
 * §15 stubs above are inert. Only change spacing here.
 */
.mp-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.mp-page-head-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Primary action buttons inside the page head */
.mp-page-head > a,
.mp-page-head > button,
.mp-page-head > .d-flex,
.mp-page-head > .mp-page-head-actions {
  align-self: flex-start;
  margin-top: 4px; /* vertically align with title baseline */
}

.mp-page-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--mp-text);
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.2;
}

/* Neutralise any tag-level heading defaults (h1–h6 in .mp-page-title) */
h1.mp-page-title,
h2.mp-page-title,
h3.mp-page-title,
h4.mp-page-title,
h5.mp-page-title,
h6.mp-page-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--mp-text);
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.2;
}

.mp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .775rem;
  color: var(--mp-text-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-breadcrumb a {
  color: var(--mp-text-2);
  text-decoration: none;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mp-breadcrumb a:hover { color: var(--mp-primary); }
.mp-breadcrumb-sep {
  color: var(--mp-border);
  font-size: .8rem;
  user-select: none;
}

/* Standard primary action button for page headers */
.mp-head-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: .8125rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background .15s, box-shadow .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.mp-head-btn.primary {
  background: var(--mp-primary);
  color: #fff;
}
.mp-head-btn.primary:hover {
  background: var(--mp-primary-h, #B81A29);
  color: #fff;
  box-shadow: 0 4px 14px rgba(209,31,48,.28);
  text-decoration: none;
}
.mp-head-btn.secondary {
  background: var(--mp-surface);
  color: var(--mp-text);
  border: 1.5px solid var(--mp-border);
}
.mp-head-btn.secondary:hover {
  border-color: var(--mp-primary);
  color: var(--mp-primary);
  background: rgba(209,31,48,.04);
  text-decoration: none;
}

/* ─── 22. Status Pill Badges (enterprise table) ──────────────────────────── */
.mp-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.mp-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mp-status-active   { background: rgba(16,185,129,.10);  color: #059669; }
.mp-status-active::before   { background: #10B981; }

.mp-status-draft    { background: rgba(100,116,139,.10); color: #475569; }
.mp-status-draft::before    { background: #94A3B8; }

.mp-status-pending  { background: rgba(245,158,11,.10);  color: #B45309; }
.mp-status-pending::before  { background: #F59E0B; }

.mp-status-expired  { background: rgba(239,68,68,.10);   color: #DC2626; }
.mp-status-expired::before  { background: #EF4444; }

.mp-status-upcoming { background: rgba(59,130,246,.10);  color: #2563EB; }
.mp-status-upcoming::before { background: #3B82F6; }

.mp-status-approved { background: rgba(16,185,129,.10);  color: #059669; }
.mp-status-approved::before { background: #10B981; }

.mp-status-rejected { background: rgba(239,68,68,.10);   color: #DC2626; }
.mp-status-rejected::before { background: #EF4444; }

.mp-status-paid     { background: rgba(99,102,241,.10);  color: #4F46E5; }
.mp-status-paid::before     { background: #6366F1; }

/* ─── 23. Quick Action Buttons ───────────────────────────────────────────── */
.mp-quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mp-quick-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--mp-radius);
  border: 1.5px solid var(--mp-border);
  background: var(--mp-surface);
  color: var(--mp-text);
  font-size: .84rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--mp-trans), background var(--mp-trans), color var(--mp-trans), box-shadow var(--mp-trans);
}

.mp-quick-action:hover {
  border-color: var(--mp-primary);
  color: var(--mp-primary);
  background: rgba(209,31,48,.04);
  box-shadow: var(--mp-shadow-sm);
}

.mp-quick-action.primary {
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(209,31,48,.25);
}

.mp-quick-action.primary:hover {
  background: var(--mp-primary-h);
  border-color: var(--mp-primary-h);
  color: #fff;
  box-shadow: 0 4px 14px rgba(209,31,48,.32);
}

/* ─── 24. Enhanced Button States ─────────────────────────────────────────── */
.btn-primary {
  box-shadow: 0 2px 8px rgba(209,31,48,.22) !important;
}

.btn-primary:hover {
  box-shadow: 0 4px 14px rgba(209,31,48,.30) !important;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0) !important;
}

/* ─── 25. Info Detail Row (profile / show pages) ─────────────────────────── */
.mp-detail-row {
  display: flex;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--mp-border);
  gap: 16px;
}

.mp-detail-row:last-child { border-bottom: none; }

.mp-detail-key {
  width: 180px;
  flex-shrink: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--mp-text-2);
  padding-top: 1px;
}

.mp-detail-val {
  flex: 1;
  font-size: .875rem;
  color: var(--mp-text);
  word-break: break-word;
}

/* ─── 26. Responsive Adjustments ─────────────────────────────────────────── */
@media (max-width: 991px) {
  /* On mobile, sidebar is off-canvas — dark overlay */
  body.sidebar-open::before {
    background: rgba(0,0,0,.55);
  }
}

@media (max-width: 768px) {
  .mp-kpi-value { font-size: 1.4rem; }
  .mp-widget-body { padding: 16px !important; }
  .mp-widget-head { padding: 14px 16px; }
  .mp-form-section { padding: 20px; }
  .mp-detail-key { width: 130px; }
}

@media (max-width: 576px) {
  .mp-kpi-value { font-size: 1.25rem; }
  .mp-table-toolbar { flex-direction: column; align-items: stretch; }
  .mp-table-search input { width: 100% !important; }
}

/* ==========================================================================
   PREMIUM OVERHAUL — Phase 3
   Dashboard Components
   ========================================================================== */

/* ─── Dashboard Hero ──────────────────────────────────────────────────────── */
.mp-dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.mp-dash-hero-greeting {
  font-size: .78rem;
  font-weight: 600;
  color: var(--mp-text-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}

.mp-dash-hero-name {
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--mp-text);
  letter-spacing: -.025em;
  margin: 0 0 5px;
  line-height: 1.1;
}

.mp-dash-hero-sub {
  font-size: .84rem;
  color: var(--mp-text-2);
}

.mp-dash-hero-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ─── Ghost Buttons (page header secondary actions) ───────────────────────── */
.mp-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--mp-border);
  background: var(--mp-surface);
  color: var(--mp-text-2);
  font-size: .82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--mp-trans), color var(--mp-trans);
}

.mp-ghost-btn:hover { border-color: var(--mp-primary); color: var(--mp-primary); }

.mp-ghost-btn-danger { color: var(--mp-error); border-color: rgba(239,68,68,.3); }
.mp-ghost-btn-danger:hover { border-color: var(--mp-error); background: rgba(239,68,68,.04); color: var(--mp-error); }

/* ─── Filter Select ───────────────────────────────────────────────────────── */
.mp-filter-select {
  font-size: .82rem;
  border: 1.5px solid var(--mp-border);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--mp-text);
  background: var(--mp-surface);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color var(--mp-trans);
}

.mp-filter-select:focus { border-color: var(--mp-primary); }

/* ─── Onboarding Banner ───────────────────────────────────────────────────── */
.mp-onboarding {
  background: linear-gradient(130deg, #1C0A08 0%, #D11F30 100%);
  border-radius: var(--mp-radius-lg);
  margin-bottom: 28px;
  overflow: hidden;
  position: relative;
}

.mp-onboarding::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: rgba(249,205,88,.07);
  border-radius: 50%;
  pointer-events: none;
}

.mp-onboarding-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  flex-wrap: wrap;
  position: relative;
}

.mp-onboarding-text { flex: 1; min-width: 0; }

.mp-onboarding-title {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.mp-onboarding-sub {
  font-size: .84rem;
  color: rgba(255,255,255,.72);
  margin-bottom: 20px;
  line-height: 1.6;
}

.mp-onboarding .mp-steps { display: flex; flex-direction: column; gap: 14px; }

.mp-onboarding .mp-step {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mp-onboarding .mp-step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
}

.mp-onboarding .mp-step-circle-done   { background: var(--mp-success); color: #fff; }
.mp-onboarding .mp-step-circle-active { background: #fff; color: var(--mp-primary); }
.mp-onboarding .mp-step-circle-locked { background: rgba(255,255,255,.14); color: rgba(255,255,255,.5); }

.mp-onboarding .mp-step-label {
  font-size: .84rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}

.mp-onboarding .mp-step-label.done   { color: rgba(255,255,255,.55); text-decoration: line-through; }
.mp-onboarding .mp-step-label.locked { color: rgba(255,255,255,.45); }

.mp-onboarding .mp-step-label-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.mp-step-tag {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(249,205,88,.22);
  color: #F9CD58;
  letter-spacing: .04em;
}

.mp-onboarding-action { flex-shrink: 0; }

.mp-onboarding-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  border: 1.5px solid rgba(255,255,255,.25);
  text-decoration: none;
  transition: background .2s, border-color .2s;
  cursor: pointer;
  font-family: inherit;
}

.mp-onboarding-btn:hover {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}

/* ─── Alert System ────────────────────────────────────────────────────────── */
.mp-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--mp-radius);
  padding: 14px 18px;
  flex-wrap: wrap;
}

.mp-alert-error {
  background: rgba(239,68,68,.06);
  border: 1px solid rgba(239,68,68,.2);
}

.mp-alert-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(239,68,68,.12);
  color: var(--mp-error);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.mp-alert-body { flex: 1; min-width: 0; }

.mp-alert-title {
  font-size: .875rem;
  font-weight: 700;
  color: #991B1B;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.mp-alert-sub { font-size: .8rem; color: #7F1D1D; }

.mp-alert-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--mp-error);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s;
}

.mp-alert-action:hover { background: #DC2626; color: #fff; }

/* ─── Shared Button Sizes ─────────────────────────────────────────────────── */
.mp-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--mp-border);
  background: var(--mp-bg);
  color: var(--mp-text);
  font-size: .82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--mp-trans), background var(--mp-trans), color var(--mp-trans);
  white-space: nowrap;
}

.mp-btn-sm:hover { border-color: var(--mp-primary); color: var(--mp-primary); }

.mp-btn-primary {
  background: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(209,31,48,.22);
}

.mp-btn-primary:hover {
  background: var(--mp-primary-h) !important;
  border-color: var(--mp-primary-h) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(209,31,48,.30) !important;
}

/* ─── Chart Tabs ──────────────────────────────────────────────────────────── */
.mp-chart-tabs {
  display: flex;
  border: 1.5px solid var(--mp-border);
  border-radius: 8px;
  overflow: hidden;
}

.mp-chart-tabs button {
  padding: 5px 13px;
  font-size: .75rem;
  font-weight: 600;
  border: none;
  background: var(--mp-bg);
  color: var(--mp-text-2);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
  border-right: 1px solid var(--mp-border);
}

.mp-chart-tabs button:last-child { border-right: none; }

.mp-chart-tabs button.active {
  background: var(--mp-primary);
  color: #fff;
}

/* ─── Offer Status Row ────────────────────────────────────────────────────── */
.mp-offer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--mp-border);
}

.mp-offer-row:last-of-type { border-bottom: none; }

.mp-offer-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mp-offer-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--mp-text);
}

.mp-offer-count {
  font-size: .95rem;
  font-weight: 800;
}

/* ─── Table Shared Helpers ────────────────────────────────────────────────── */
.mp-table-head th {
  font-size: .72rem;
  font-weight: 700;
  color: var(--mp-text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--mp-bg);
  padding: 11px 18px;
  border-bottom: 1px solid var(--mp-border);
}

.table tbody td { padding: 13px 18px; }

.mp-cell-primary {
  font-size: .875rem;
  font-weight: 600;
  color: var(--mp-text);
}

.mp-cell-sub {
  font-size: .75rem;
  color: var(--mp-text-2);
  margin-top: 2px;
}

.mp-row-thumb {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--mp-border);
}

.mp-row-thumb-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(209,31,48,.08);
  color: var(--mp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.mp-order-link {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(209,31,48,.07);
  color: var(--mp-primary);
  border: 1px solid rgba(209,31,48,.14);
  text-decoration: none;
  margin-top: 4px;
}

.mp-order-link:hover { background: rgba(209,31,48,.12); color: var(--mp-primary); }

.mp-comment-bubble {
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: .82rem;
  color: var(--mp-text-2);
  line-height: 1.55;
}

/* ─── Branch Performance Row ──────────────────────────────────────────────── */
.mp-branch-row {
  padding: 14px;
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: 11px;
}

.mp-branch-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(209,31,48,.08);
  color: var(--mp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ─── Wallet Card ─────────────────────────────────────────────────────────── */
.mp-wallet-card {
  background: linear-gradient(140deg, #1C0A08 0%, #D11F30 100%);
  border-radius: var(--mp-radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mp-wallet-card::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  background: rgba(249,205,88,.07);
  border-radius: 50%;
  pointer-events: none;
}

.mp-wallet-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 6px;
}

.mp-wallet-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 1.9rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -.02em;
}

.mp-wallet-currency {
  font-size: 1rem;
  font-weight: 700;
  opacity: .8;
}

.mp-wallet-sep {
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 16px 0 14px;
}

.mp-wallet-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.mp-wallet-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  font-size: .8rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.18);
  text-decoration: none;
  transition: background .15s;
  flex: 1;
  justify-content: center;
}

.mp-wallet-btn:hover {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* ─── Info Chip ───────────────────────────────────────────────────────────── */
.mp-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--mp-border);
  background: var(--mp-bg);
  font-size: .75rem;
  color: var(--mp-text-2);
  font-weight: 500;
}

/* ─── Mini Stat Cell ──────────────────────────────────────────────────────── */
.mp-stat-mini {
  padding: 12px;
  background: var(--mp-bg);
  border: 1px solid var(--mp-border);
  border-radius: 10px;
}

.mp-stat-mini-label {
  font-size: .7rem;
  color: var(--mp-text-2);
  font-weight: 600;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-stat-mini-val {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

/* ─── Star Ratings ────────────────────────────────────────────────────────── */
.mp-stars { display: flex; gap: 1px; }
.mp-star-on  { color: var(--mp-accent);  font-size: .75rem; }
.mp-star-off { color: var(--mp-border);  font-size: .75rem; }

/* ─── Avatar (reviews) ────────────────────────────────────────────────────── */
.mp-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(209,31,48,.10);
  color: var(--mp-primary);
  font-weight: 800;
  font-size: .82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Days Badges ─────────────────────────────────────────────────────────── */
.mp-days-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.mp-days-badge-red   { background: rgba(239,68,68,.12);  color: #B91C1C; }
.mp-days-badge-amber { background: rgba(245,158,11,.12); color: #92400E; }
.mp-days-badge-green { background: rgba(16,185,129,.12); color: #065F46; }

/* ─── Dashboard responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mp-dash-hero { flex-direction: column; align-items: flex-start; }
  .mp-dash-hero-name { font-size: 1.25rem; }
  .mp-onboarding-body { flex-direction: column; }
  .mp-wallet-amount { font-size: 1.5rem; }
}

@media (max-width: 576px) {
  .mp-dash-hero-right { width: 100%; }
  .mp-filter-select { flex: 1; }
  .mp-wallet-card { padding: 20px; }
}

/* ==========================================================================
   PREMIUM OVERHAUL — Phase 4
   Branch Pages Components
   ========================================================================== */

/* ─── Tab Navigation ──────────────────────────────────────────────────────── */
.mp-tab-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  border-bottom: none;
}

.mp-tab-item { list-style: none; }

.mp-tab-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 16px;
  border: none;
  background: transparent;
  color: var(--mp-text-2);
  font-size: .84rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}

.mp-tab-btn:hover {
  color: var(--mp-text);
  border-bottom-color: var(--mp-border);
}

.mp-tab-btn.active {
  color: var(--mp-primary);
  border-bottom-color: var(--mp-primary);
}

.mp-tab-btn iconify-icon {
  font-size: 1rem;
}

/* Tab nav inside a widget gets a separator line */
.mp-widget > .mp-tab-nav {
  border-bottom: 1px solid var(--mp-border);
  padding: 0 4px;
}

/* ==========================================================================
   PREMIUM OVERHAUL — Phase 5
   Offer Management Components
   ========================================================================== */

/* ─── Filter Chips (offer status tabs) ───────────────────────────────────── */
.mp-filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mp-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1.5px solid var(--mp-border);
  background: var(--mp-surface);
  color: var(--mp-text-2);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}

.mp-filter-chip:hover {
  border-color: var(--mp-primary);
  color: var(--mp-primary);
  background: rgba(209,31,48,.03);
}

.mp-filter-chip.active {
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  color: #fff;
}

.mp-filter-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: .65rem;
  font-weight: 800;
  background: rgba(0,0,0,.08);
  color: inherit;
}

.mp-filter-chip.active .mp-filter-chip-count {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* ─── Filter label ────────────────────────────────────────────────────────── */
.mp-filter-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--mp-text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px;
}

/* ─── Branch card inline stats ────────────────────────────────────────────── */
.mp-branch-stat-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  color: var(--mp-text-2);
}

/* ─── Show page profile header stats ─────────────────────────────────────── */
.mp-profile-stat {
  text-align: center;
  padding: 10px 20px;
  border-radius: var(--mp-radius);
  border: 1px solid var(--mp-border);
  background: var(--mp-bg);
  min-width: 90px;
}

.mp-profile-stat-val {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 3px;
}

.mp-profile-stat-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--mp-text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ==========================================================================
   PREMIUM OVERHAUL — Phase 7
   Global Bootstrap Element Overrides + Supporting Page Components
   ========================================================================== */

/* ─── Bootstrap Table Global Uplift ──────────────────────────────────────── */
.table thead th,
.table thead td {
  font-size: .72rem !important;
  font-weight: 700 !important;
  color: var(--mp-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  background: var(--mp-bg) !important;
  border-bottom: 1px solid var(--mp-border) !important;
  padding: 11px 18px !important;
  white-space: nowrap;
}

.table-hover tbody tr:hover {
  background: rgba(209,31,48,.03) !important;
}

.table tbody tr {
  border-bottom-color: var(--mp-border) !important;
}

/* ─── Bootstrap Badge Uplift ──────────────────────────────────────────────── */
/* Keep Bootstrap badge classes working but use our radius + font */
.badge {
  border-radius: 20px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  padding: 4px 9px !important;
}

/* ─── Bootstrap Form Controls Uplift ─────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--mp-border) !important;
  border-radius: 8px !important;
  font-size: .875rem !important;
  font-family: inherit !important;
  color: var(--mp-text) !important;
  transition: border-color .15s, box-shadow .15s !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--mp-primary) !important;
  box-shadow: 0 0 0 3px rgba(209,31,48,.10) !important;
  outline: none !important;
}

.form-label {
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--mp-text) !important;
  margin-bottom: 6px !important;
}

/* ─── Bootstrap btn-primary alignment ────────────────────────────────────── */
.btn-primary {
  background-color: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: background .15s, box-shadow .15s, transform .1s !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--mp-primary-h) !important;
  border-color: var(--mp-primary-h) !important;
  color: #fff !important;
}

.btn-light {
  background: var(--mp-bg) !important;
  border-color: var(--mp-border) !important;
  color: var(--mp-text) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.btn-light:hover {
  border-color: var(--mp-primary) !important;
  color: var(--mp-primary) !important;
  background: rgba(209,31,48,.04) !important;
}

/* ─── btn-outline-primary alignment ──────────────────────────────────────── */
.btn-outline-primary {
  border-color: rgba(209,31,48,.35) !important;
  color: var(--mp-primary) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.btn-outline-primary:hover {
  background: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  color: #fff !important;
}

/* ─── Pagination alignment ────────────────────────────────────────────────── */
.pagination .page-link {
  color: var(--mp-text-2) !important;
  border-color: var(--mp-border) !important;
  border-radius: 7px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  margin: 0 2px !important;
  transition: all .15s !important;
}

.pagination .page-link:hover {
  background: rgba(209,31,48,.06) !important;
  border-color: var(--mp-primary) !important;
  color: var(--mp-primary) !important;
}

.pagination .page-item.active .page-link {
  background: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(209,31,48,.22) !important;
}

/* ─── Card header / body tidy-up ──────────────────────────────────────────── */
.card-header {
  background: var(--mp-bg) !important;
  border-bottom-color: var(--mp-border) !important;
}

/* ─── Input group ─────────────────────────────────────────────────────────── */
.input-group-text {
  border-color: var(--mp-border) !important;
  background: var(--mp-bg) !important;
  font-size: .875rem !important;
}

/* ─── Notification page ───────────────────────────────────────────────────── */
.mp-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mp-border);
  transition: background .15s;
  text-decoration: none;
  color: inherit;
}

.mp-notif-item:hover { background: rgba(209,31,48,.03); }

.mp-notif-item.unread { background: rgba(59,130,246,.03); }

.mp-notif-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: rgba(209,31,48,.08);
  color: var(--mp-primary);
}

.mp-notif-title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--mp-text);
  margin-bottom: 3px;
  line-height: 1.4;
}

.mp-notif-body {
  font-size: .82rem;
  color: var(--mp-text-2);
  line-height: 1.55;
}

.mp-notif-time {
  font-size: .72rem;
  color: var(--mp-text-3);
  margin-top: 5px;
}

/* ─── Transactions list items ─────────────────────────────────────────────── */
.mp-txn-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.mp-txn-icon.credit { background: rgba(16,185,129,.10); color: var(--mp-success); }
.mp-txn-icon.debit  { background: rgba(239,68,68,.10);  color: var(--mp-error); }

.mp-txn-amount.credit { color: var(--mp-success); font-weight: 800; }
.mp-txn-amount.debit  { color: var(--mp-error);   font-weight: 800; }

/* ─── Ticket card system ──────────────────────────────────────────────────── */
.mp-ticket-card {
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: box-shadow var(--mp-trans), border-color var(--mp-trans);
  text-decoration: none;
  color: inherit;
  margin-bottom: 12px;
}

.mp-ticket-card:hover {
  box-shadow: var(--mp-shadow);
  border-color: rgba(209,31,48,.18);
}

.mp-ticket-subject {
  font-size: .9rem;
  font-weight: 700;
  color: var(--mp-text);
  margin-bottom: 4px;
}

.mp-ticket-meta {
  font-size: .78rem;
  color: var(--mp-text-2);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ==========================================================================
   PREMIUM OVERHAUL — Phase 8
   Responsive QA + Mobile Adjustments
   ========================================================================== */

/* ─── Detail row responsive (profile, order show) ────────────────────────── */
.mp-detail-row {
  flex-direction: row;
  gap: 0;
}

@media (max-width: 639px) {
  .mp-detail-row {
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
  }

  .mp-detail-key {
    min-width: unset;
    width: 100%;
  }

  .mp-detail-val {
    padding-left: 0;
  }
}

/* ─── KPI cards stack nicely on mobile ───────────────────────────────────── */
@media (max-width: 575px) {
  .mp-kpi {
    padding: 16px;
  }

  .mp-kpi-value {
    font-size: 1.4rem;
  }

  .mp-wallet-card {
    padding: 24px 20px;
  }

  .mp-wallet-amount {
    font-size: 1.75rem;
  }
}

/* ─── Sidebar collapsed on mobile ────────────────────────────────────────── */
@media (max-width: 991px) {
  .mp-sidebar-user {
    display: none;
  }

  body:not(.sidebar-collapsed) .sidebar .mp-sidebar-user {
    display: flex;
  }
}

/* ─── Page head responsive ───────────────────────────────────────────────── */
@media (max-width: 639px) {
  .mp-page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
  }

  /* Action buttons stay left-aligned, same width as content */
  .mp-page-head > a,
  .mp-page-head > button,
  .mp-page-head > .mp-page-head-actions {
    align-self: stretch;
    margin-top: 0;
  }

  .mp-head-btn {
    width: 100%;
    justify-content: center;
  }

  .mp-page-title,
  h1.mp-page-title,
  h2.mp-page-title,
  h3.mp-page-title,
  h4.mp-page-title,
  h5.mp-page-title,
  h6.mp-page-title {
    font-size: 1.1rem;
  }
}

/* ─── Widget head wraps on narrow ────────────────────────────────────────── */
@media (max-width: 575px) {
  .mp-widget-head {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ─── Filter chips scroll on mobile ──────────────────────────────────────── */
@media (max-width: 767px) {
  .mp-filter-chips {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .mp-filter-chips::-webkit-scrollbar { display: none; }
}

/* ─── Tab nav scrollable on narrow ───────────────────────────────────────── */
@media (max-width: 767px) {
  .mp-tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .mp-tab-nav::-webkit-scrollbar { display: none; }

  .mp-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ─── Table horizontal scroll ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── Drop zone mobile ───────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .mp-drop-zone {
    max-width: 100% !important;
  }
}

/* ─── Header search hidden on very small ─────────────────────────────────── */
@media (max-width: 479px) {
  .navbar-search {
    display: none !important;
  }
}

/* ─── Notifications dropdown full-width on mobile ────────────────────────── */
@media (max-width: 479px) {
  .mp-notif-dropdown {
    width: calc(100vw - 32px) !important;
    left: auto !important;
    right: 0 !important;
  }

  .mp-profile-dropdown {
    width: calc(100vw - 32px) !important;
    right: 0 !important;
  }
}

/* ─── Dashboard hero responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .mp-dash-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .mp-dash-hero-right {
    width: 100%;
    display: flex;
    gap: 8px;
  }
}

/* ─── Ticket card mobile ─────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .mp-ticket-card {
    padding: 14px 16px;
  }
}

/* ─── Modal responsive ───────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .modal-dialog {
    margin: 12px !important;
  }

  .modal-content {
    border-radius: 16px !important;
  }
}

/* ─── Ads page — kpi responsive ─────────────────────────────────────────── */
@media (max-width: 575px) {
  .mp-kpi .mp-kpi-value {
    font-size: 1rem;
  }
}

/* ─── Ratings card body responsive ──────────────────────────────────────── */
@media (max-width: 767px) {
  #tour-ratings-table .card-body .row > div[class*="col-md-3"],
  #tour-ratings-table .card-body .row > div[class*="col-md-5"],
  #tour-ratings-table .card-body .row > div[class*="col-md-4"] {
    text-align: left !important;
  }
}

/* ─── Print QA — suppress decorative elements ───────────────────────────── */
@media print {
  .sidebar,
  .navbar-header,
  .mp-dash-hero-right,
  .mp-wallet-actions {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   PAGE HEADER BUTTON NORMALISATION
   ─────────────────────────────────────────────────────────────────────────
   Ensures all action buttons placed directly inside .mp-page-head render
   identically regardless of whether they use .mp-head-btn (new) or the
   legacy Bootstrap .btn.btn-primary / .btn.btn-light classes (existing pages).
   This avoids mass file edits while preserving visual consistency.
   ========================================================================== */

/* Any direct-child button/link in the page head */
.mp-page-head > a,
.mp-page-head > button,
.mp-page-head > .mp-page-head-actions > a,
.mp-page-head > .mp-page-head-actions > button {
  align-self: flex-start;
  margin-top: 2px;
}

/* Legacy Bootstrap primary button → mp-head-btn primary appearance */
.mp-page-head > a.btn.btn-primary,
.mp-page-head > button.btn.btn-primary,
.mp-page-head > .d-flex > a.btn.btn-primary,
.mp-page-head > .d-flex > button.btn.btn-primary {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  font-size: .8125rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  background-color: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  transition: background .15s, box-shadow .15s !important;
}

.mp-page-head > a.btn.btn-primary:hover,
.mp-page-head > button.btn.btn-primary:hover,
.mp-page-head > .d-flex > a.btn.btn-primary:hover,
.mp-page-head > .d-flex > button.btn.btn-primary:hover {
  background-color: var(--mp-primary-h, #B81A29) !important;
  border-color: var(--mp-primary-h, #B81A29) !important;
  box-shadow: 0 4px 14px rgba(209,31,48,.28) !important;
}

/* Legacy Bootstrap light/secondary/warning button → mp-head-btn secondary appearance */
.mp-page-head > a.btn.btn-light,
.mp-page-head > button.btn.btn-light,
.mp-page-head > a.btn.btn-secondary,
.mp-page-head > button.btn.btn-secondary,
.mp-page-head > a.btn.btn-warning,
.mp-page-head > button.btn.btn-warning,
.mp-page-head > .d-flex > a.btn.btn-light,
.mp-page-head > .d-flex > button.btn.btn-light,
.mp-page-head > .d-flex > a.btn.btn-warning,
.mp-page-head > .d-flex > button.btn.btn-warning {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  font-size: .8125rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  background-color: var(--mp-surface) !important;
  border: 1.5px solid var(--mp-border) !important;
  color: var(--mp-text) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  transition: border-color .15s, color .15s !important;
}

.mp-page-head > a.btn.btn-light:hover,
.mp-page-head > button.btn.btn-light:hover,
.mp-page-head > .d-flex > a.btn.btn-light:hover,
.mp-page-head > .d-flex > button.btn.btn-light:hover {
  border-color: var(--mp-primary) !important;
  color: var(--mp-primary) !important;
  background-color: rgba(209,31,48,.04) !important;
}

/* Handles wrapped .d-flex action groups in the page head */
.mp-page-head > .d-flex {
  gap: 8px !important;
  align-items: center !important;
  align-self: flex-start !important;
  margin-top: 2px !important;
}

/* Mobile: action buttons full-width in stacked layout */
@media (max-width: 639px) {
  .mp-page-head > a.btn,
  .mp-page-head > button.btn,
  .mp-page-head > .d-flex {
    width: 100% !important;
    justify-content: center !important;
  }
}