@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

:root {
  --primary: #ff438f;
  --primary-dark: #d92e78;
  --primary-light: #fff0f6;
  --sidebar-bg: #0f172a;
  --sidebar-border: #1e293b;
  --sidebar-hover: #1e293b;
  --ink: #0f172a;
  --muted: #64748b;
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --border: #cbd5e1;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 14px rgba(15,23,42,0.06);
  --shadow-lg: 0 12px 28px rgba(15,23,42,0.1);
  font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 14.5px; line-height: 1.5; font-family: 'Tajawal', sans-serif; }
a { color: inherit; text-decoration: none; }

/* Layout Shell */
.app-layout { display: flex; min-height: 100vh; }
.app-sidebar {
  width: 260px;
  background: var(--sidebar-bg);
  color: #9ca3af;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  border-right: 1px solid var(--sidebar-border);
  transition: transform 0.25s ease, width 0.22s ease;
}

html[dir="rtl"] .app-sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--sidebar-border);
}

.sidebar-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-header img { height: 36px; object-fit: contain; }
.sidebar-logo-icon { display: none; width: 34px; }
.sidebar-brand-name { font-weight: 800; font-size: 16px; color: #fff; letter-spacing: -0.02em; }

.sidebar-nav { padding: 16px 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.nav-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; padding: 12px 12px 6px; }
.sidebar-nav > .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s ease;
}
.sidebar-nav > .nav-item i { font-size: 18px; color: #ffffff !important; }
.sidebar-nav > .nav-item:hover { background: var(--sidebar-hover); color: #ffffff !important; }
.sidebar-nav > .nav-item:hover i { color: var(--primary) !important; }
.sidebar-nav > .nav-item.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #ffffff !important; box-shadow: 0 4px 12px rgba(255, 67, 143, 0.3); }
.sidebar-nav > .nav-item.active i { color: #ffffff !important; }

/* Collapsible Sidebar Styles */
.app-sidebar.collapsed { width: 75px !important; }
.app-sidebar.collapsed .sidebar-header { justify-content: center !important; padding-inline: 10px; gap: 4px; flex-direction: column; }
.app-sidebar.collapsed .sidebar-logo-full { display: none; }
.app-sidebar.collapsed .sidebar-logo-icon { display: block; height: 32px; }
.app-sidebar.collapsed #desktopSidebarToggle { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 32px; }
.app-sidebar.collapsed .nav-section-title, 
.app-sidebar.collapsed .sidebar-nav > .nav-item span, 
.app-sidebar.collapsed .user-info { display: none !important; }
.app-sidebar.collapsed .sidebar-nav > .nav-item { justify-content: center; padding: 12px; }
.app-sidebar.collapsed + .app-wrapper { margin-left: 75px !important; }
html[dir="rtl"] .app-sidebar.collapsed + .app-wrapper { margin-left: 0 !important; margin-right: 75px !important; }

/* Shared sortable/searchable table controls */
.smart-table-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 14px; }
.smart-table-search { width:min(360px, 100%); position:relative; }
.smart-table-search i { position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%); color:var(--muted); }
.smart-table-search input { padding-inline-start:38px; }
.smart-table-count { color:var(--muted); font-size:12px; white-space:nowrap; }
.custom-table th[data-sortable="true"] { cursor:pointer; user-select:none; white-space:nowrap; }
.custom-table th[data-sortable="true"]::after { content:'\F229'; font-family:'bootstrap-icons'; margin-inline-start:7px; opacity:.35; font-size:10px; }
.custom-table th.sort-asc::after { content:'\F235'; opacity:1; color:var(--primary-dark); }
.custom-table th.sort-desc::after { content:'\F229'; opacity:1; color:var(--primary-dark); }

.smart-country-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sticky-save-bar { position:sticky; bottom:1.25rem; z-index:10; background:#ffffff; padding:1rem 1.25rem; border-radius:12px; border:1px solid var(--border); box-shadow:0 4px 20px rgba(15,23,42,0.12); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.country-selection-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; width:100%; padding:2px; }
.country-selection-card { display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--border); border-radius:12px; background:#fff; cursor:pointer; transition:.15s ease; }
.country-selection-card:hover { border-color:var(--primary); transform:translateY(-1px); }
.country-selection-card:has(input:checked) { border-color:var(--primary); background:var(--primary-light); box-shadow:0 0 0 2px rgba(255,67,143,.08); }
.country-selection-card input { position:absolute; opacity:0; pointer-events:none; }
.country-selection-card img { width:28px; height:20px; object-fit:cover; border-radius:3px; box-shadow:0 0 0 1px rgba(15,23,42,.1); }
.country-selection-card small { display:block; color:var(--muted); font-size:11px; }
.country-selection-card > i { color:var(--primary-dark); opacity:0; }
.country-selection-card:has(input:checked) > i { opacity:1; }

/* Official wallet artwork used consistently across customer and merchant flows. */
.wallet-provider-icon { width:22px; height:22px; object-fit:contain; flex:0 0 22px; }
.wallet-provider-icon.lg { width:30px; height:30px; flex-basis:30px; }
.wallet-provider-pair { display:inline-flex; align-items:center; gap:5px; vertical-align:middle; }
.wallet-provider-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.wallet-qr-card { background:linear-gradient(180deg,#fff,#f8fafc); border:1px solid var(--border); border-radius:16px; padding:18px; height:100%; }
.wallet-qr-card > img:not(.wallet-provider-icon) { width:150px; height:150px; object-fit:contain; }

.sidebar-footer { padding: 16px 12px; border-top: 1px solid var(--sidebar-border); }
.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
}
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}
.user-info { flex: 1; min-width: 0; }
.user-info .name { font-weight: 700; color: #f3f4f6; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-info .role { font-size: 11.5px; color: #9ca3af; }
.logout-btn { color: #ef4444; padding: 6px; border-radius: 6px; transition: background 0.15s; }
.logout-btn:hover { background: rgba(239, 68, 68, 0.1); }

/* Main Wrapper */
.app-wrapper { flex: 1; margin-left: 260px; display: flex; flex-direction: column; min-width: 0; }
html[dir="rtl"] .app-wrapper { margin-left: 0; margin-right: 260px; }

.app-topbar {
  height: 68px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 90;
}
.topbar-left { display: flex; align-items: center; gap: 16px; }
.mobile-toggle { display: none; background: none; border: none; font-size: 24px; color: var(--ink); cursor: pointer; padding: 4px; }

.topbar-right { display: flex; align-items: center; gap: 12px; }
.qr-scan-topbar-btn {
  background: #0f172a;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.qr-scan-topbar-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }

.quick-stamp-btn {
  background: var(--primary-dark);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 10px rgba(217, 46, 120, 0.25);
  transition: transform 0.15s, background 0.15s;
}
.quick-stamp-btn:hover { background: var(--primary); transform: translateY(-1px); }

.lang-switch-btn {
  background: #f1f5f9;
  border: 1px solid var(--border);
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lang-switch-btn:hover { background: #e2e8f0; }

.app-main { padding: 28px; flex: 1; }
.support-access-banner { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; margin-bottom:18px; padding:12px 14px; border:1px solid #f5c2d7; border-radius:14px; background:linear-gradient(135deg,#fff1f6,#fff); box-shadow:0 8px 22px rgba(190,24,93,.07); }.support-access-banner>span { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; background:#be185d; color:#fff; font-size:17px; }.support-access-banner strong,.support-access-banner small { display:block; }.support-access-banner strong { color:#831843; font-size:13px; }.support-access-banner small { margin-top:2px; color:#7c2d52; font-size:11px; }.support-access-banner>a { display:inline-flex; align-items:center; gap:6px; padding:8px 11px; border:1px solid #f9a8d4; border-radius:10px; background:#fff; color:#9d174d; font-size:11px; font-weight:800; white-space:nowrap; }
@media (max-width:767.98px) { .support-access-banner { grid-template-columns:38px 1fr; }.support-access-banner>a { grid-column:1 / -1; justify-content:center; } }

/* Cards & Grid */
.hero-card {
  padding: 30px 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  color: #ffffff;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero-card::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 67, 143, 0.25) 0%, rgba(255, 67, 143, 0) 70%);
  pointer-events: none;
}
.hero-card h1 { margin: 4px 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.hero-card p { margin: 0; color: #94a3b8; max-width: 600px; font-size: 15px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.stat-icon.pink { background: #fdf2f8; color: var(--primary); }
.stat-icon.purple { background: #f3e8ff; color: #9333ea; }
.stat-icon.blue { background: #eff6ff; color: #2563eb; }
.stat-icon.green { background: #f0fdf4; color: #16a34a; }
.stat-icon.orange { background: #fff7ed; color: #ea580c; }
.stat-details span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-details strong { display: block; font-size: 24px; font-weight: 800; color: var(--ink); margin-top: 2px; }

.card-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

/* Team management */
.team-page {
  width: 100%;
  min-width: 0;
}

.team-page-header {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 20px;
  padding: 26px 28px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(128deg, #0f172a 0%, #24203b 62%, #8f1f58 140%);
  color: #fff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .13);
}

.team-page-header::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  inset-inline-end: -95px;
  top: -145px;
  border: 34px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
  pointer-events: none;
}

.team-page-heading {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
}

.team-page-heading > div {
  min-width: 0;
}

.team-page-heading-icon {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  color: #f9a8d4;
  font-size: 23px;
  backdrop-filter: blur(8px);
}

.team-page-eyebrow,
.team-empty-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #f9a8d4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.team-page-header h1 {
  margin: 0 0 4px;
  color: #fff;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.team-page-header p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  line-height: 1.65;
}

.team-page-action {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  border-color: #fff;
  background: #fff;
  color: #8f1f58;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
  white-space: nowrap;
}

.team-page-action:hover {
  border-color: #fce7f3;
  background: #fce7f3;
  color: #701a45;
  transform: translateY(-1px);
}

.team-card {
  min-width: 0;
  border-color: #dbe3ed;
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .055);
}

.team-empty-state {
  display: flex;
  min-height: 370px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 56px 24px;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 67, 143, .075), transparent 32%),
    linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  text-align: center;
}

.team-empty-icon {
  display: grid;
  width: 78px;
  height: 78px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid #fbcfe8;
  border-radius: 24px;
  background: #fff0f6;
  color: var(--primary-dark);
  box-shadow: 0 12px 28px rgba(217, 46, 120, .12);
  font-size: 32px;
}

.team-empty-eyebrow {
  color: var(--primary-dark);
}

.team-empty-state h2 {
  max-width: 620px;
  margin: 3px 0 8px;
  color: var(--ink);
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 900;
  line-height: 1.3;
}

.team-empty-state p {
  max-width: 610px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.75;
}

.team-empty-action {
  min-height: 44px;
  box-shadow: 0 9px 20px rgba(217, 46, 120, .2);
}

.team-modal .modal-dialog {
  width: calc(100% - 32px);
  max-width: 820px;
}

.team-modal .modal-content {
  overflow: hidden;
}

.team-modal .modal-header,
.team-modal .modal-footer {
  padding-inline: 24px;
}

.team-modal .modal-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Support tickets */
.tickets-page {
  width: 100%;
  min-width: 0;
}

.tickets-page-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .5fr);
  gap: 24px;
  margin-bottom: 20px;
  padding: 28px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% -10%, rgba(14, 165, 233, .32), transparent 34%),
    linear-gradient(128deg, #0f172a 0%, #17243a 62%, #363059 130%);
  color: #fff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .13);
}

.tickets-page-header::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  inset-inline-start: 40%;
  bottom: -155px;
  border-radius: 50%;
  background: rgba(255, 67, 143, .2);
  filter: blur(4px);
  pointer-events: none;
}

.tickets-hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.tickets-page-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 16px;
}

.tickets-page-heading > div {
  min-width: 0;
}

.tickets-page-heading-icon {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  color: #7dd3fc;
  font-size: 23px;
  backdrop-filter: blur(8px);
}

.tickets-page-eyebrow,
.tickets-empty-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tickets-page-header h1 {
  margin: 0 0 5px;
  color: #fff;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.tickets-page-header p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  line-height: 1.65;
}

.tickets-page-action {
  border-color: #fff;
  background: #fff;
  color: #075985;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
  white-space: nowrap;
}

.tickets-page-action:hover {
  border-color: #e0f2fe;
  background: #e0f2fe;
  color: #0c4a6e;
  transform: translateY(-1px);
}

.tickets-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 9px;
}

.tickets-stat {
  display: flex;
  min-width: 0;
  min-height: 66px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 15px;
  background: rgba(255, 255, 255, .085);
  backdrop-filter: blur(10px);
}

.tickets-stat-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .11);
  font-size: 16px;
}

.tickets-stat-open .tickets-stat-icon { color: #7dd3fc; }
.tickets-stat-progress .tickets-stat-icon { color: #fde68a; }
.tickets-stat-resolved .tickets-stat-icon { color: #86efac; }

.tickets-stat small {
  display: block;
  color: rgba(255, 255, 255, .62);
  font-size: 10.5px;
  font-weight: 700;
}

.tickets-stat strong {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: 1.05;
}

.tickets-filters {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.tickets-filters .btn {
  min-height: 34px;
  white-space: nowrap;
}

.tickets-card {
  min-width: 0;
  border-color: #dbe3ed;
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .055);
}

.tickets-empty-state {
  display: flex;
  min-height: 370px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 56px 24px;
  background:
    radial-gradient(circle at 50% 15%, rgba(14, 165, 233, .075), transparent 32%),
    linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  text-align: center;
}

.tickets-empty-icon {
  display: grid;
  width: 78px;
  height: 78px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid #bae6fd;
  border-radius: 24px;
  background: #f0f9ff;
  color: #0369a1;
  box-shadow: 0 12px 28px rgba(3, 105, 161, .12);
  font-size: 30px;
}

.tickets-empty-eyebrow {
  color: #0369a1;
}

.tickets-empty-state h2 {
  max-width: 620px;
  margin: 3px 0 8px;
  color: var(--ink);
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 900;
  line-height: 1.3;
}

.tickets-empty-state p {
  max-width: 610px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.75;
}

.tickets-empty-action {
  min-height: 44px;
  box-shadow: 0 9px 20px rgba(217, 46, 120, .2);
}

.ticket-row {
  transition: background .15s ease;
}

.ticket-row:hover td {
  background: #fdf7fa;
}

.tickets-modal .modal-dialog {
  width: calc(100% - 32px);
  max-width: 820px;
}

.tickets-modal .modal-content {
  overflow: hidden;
}

.tickets-modal .modal-header,
.tickets-modal .modal-footer {
  padding-inline: 24px;
}

.tickets-modal .modal-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Analytics workspace */
.analytics-page {
  width: 100%;
  min-width: 0;
}

.analytics-page-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .58fr);
  gap: 28px;
  margin-bottom: 20px;
  padding: 30px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% -5%, rgba(139, 92, 246, .34), transparent 33%),
    linear-gradient(128deg, #0f172a 0%, #211c38 60%, #5b2146 135%);
  color: #fff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .14);
}

.analytics-page-header::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  inset-inline-start: 38%;
  bottom: -180px;
  border-radius: 50%;
  background: rgba(255, 67, 143, .22);
  filter: blur(6px);
  pointer-events: none;
}

.analytics-hero-main,
.analytics-hero-summary {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.analytics-hero-main {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

.analytics-page-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 16px;
}

.analytics-page-heading > div {
  min-width: 0;
}

.analytics-page-heading-icon {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 17px;
  background: rgba(255, 255, 255, .1);
  color: #c4b5fd;
  font-size: 24px;
  backdrop-filter: blur(8px);
}

.analytics-page-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.analytics-page-header h1 {
  max-width: 760px;
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(25px, 2.5vw, 36px);
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.analytics-page-header p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  line-height: 1.7;
}

.analytics-page-actions {
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.analytics-card-filter {
  position: relative;
  min-width: min(290px, 100%);
}

.analytics-card-filter > i {
  position: absolute;
  z-index: 2;
  inset-inline-start: 13px;
  top: 50%;
  color: #7c3aed;
  transform: translateY(-50%);
  pointer-events: none;
}

.analytics-card-filter .form-select {
  min-height: 43px;
  padding-inline-start: 38px;
  border-color: rgba(255, 255, 255, .5);
  background-color: rgba(255, 255, 255, .97);
  font-weight: 700;
}

.analytics-reports-action {
  min-height: 43px;
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.analytics-reports-action:hover {
  border-color: #fff;
  background: #fff;
  color: #581c47;
}

.analytics-hero-summary {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.analytics-retention-spotlight {
  display: grid;
  width: 142px;
  height: 142px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#f472b6 calc(var(--retention) * 1%), rgba(255, 255, 255, .12) 0);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.analytics-retention-spotlight > div {
  display: grid;
  width: 116px;
  height: 116px;
  place-content: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  background: #1b1b31;
  text-align: center;
}

.analytics-retention-spotlight strong {
  display: block;
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

.analytics-retention-spotlight span {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
  font-weight: 700;
}

.analytics-hero-metrics {
  display: grid;
  gap: 9px;
}

.analytics-hero-metrics > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 15px;
  background: rgba(255, 255, 255, .085);
  backdrop-filter: blur(10px);
}

.analytics-hero-metrics span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .64);
  font-size: 10.5px;
  font-weight: 700;
}

.analytics-hero-metrics span i {
  color: #f9a8d4;
}

.analytics-hero-metrics strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 20px;
}

.analytics-hero-metrics strong small {
  color: rgba(255, 255, 255, .58);
  font-size: 10px;
}

.analytics-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid #ddd6fe;
  border-radius: 14px;
  background: #faf5ff;
  color: #4c1d95;
}

.analytics-filter-banner span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.analytics-filter-banner span i {
  margin-inline-end: 8px;
  color: #7c3aed;
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 13px;
  margin-bottom: 22px;
}

.analytics-kpi {
  display: flex;
  min-width: 0;
  min-height: 116px;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 9px 25px rgba(15, 23, 42, .05);
}

.analytics-kpi-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 14px;
  font-size: 19px;
}

.analytics-kpi-pink .analytics-kpi-icon { background: #fdf2f8; color: #db2777; }
.analytics-kpi-violet .analytics-kpi-icon { background: #f5f3ff; color: #7c3aed; }
.analytics-kpi-blue .analytics-kpi-icon { background: #eff6ff; color: #2563eb; }
.analytics-kpi-green .analytics-kpi-icon { background: #ecfdf5; color: #059669; }
.analytics-kpi-orange .analytics-kpi-icon { background: #fff7ed; color: #ea580c; }

.analytics-kpi > div {
  min-width: 0;
}

.analytics-kpi small {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.analytics-kpi strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.05;
}

.analytics-kpi strong em {
  color: #94a3b8;
  font-size: 14px;
  font-style: normal;
}

.analytics-kpi p {
  margin: 0;
  color: #94a3b8;
  font-size: 10.5px;
}

.analytics-content-grid {
  display: grid;
  grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr);
  gap: 18px;
}

.analytics-panel {
  min-width: 0;
  margin: 0;
  border-color: #dbe3ed;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.analytics-panel .panel-header {
  align-items: flex-start;
}

.analytics-cards-panel {
  grid-column: 1 / -1;
}

.analytics-trend-panel .progress {
  overflow: hidden;
  border-radius: 20px;
  background: #eef2f7;
}

.analytics-trend-panel .progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #ec4899);
}

.analytics-table-empty {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 28px 18px;
  text-align: center;
}

.analytics-table-empty i {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 11px;
  place-items: center;
  border-radius: 16px;
  background: #f5f3ff;
  color: #7c3aed;
  font-size: 21px;
}

.analytics-table-empty strong {
  color: var(--ink);
  font-size: 14px;
}

.analytics-table-empty span {
  max-width: 390px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel-title { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0; }
.panel-subtitle { font-size: 13.5px; color: var(--muted); margin: 2px 0 0; }

/* Tables Header & Contrast Fix */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.custom-table { width: 100%; border-collapse: collapse; text-align: left; }
html[dir="rtl"] .custom-table { text-align: right; }

.custom-table th {
  padding: 14px 16px;
  background: #f1f5f9;
  border-bottom: 2px solid #cbd5e1;
  color: #334155;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.custom-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.custom-table tr:last-child td { border-bottom: none; }
.custom-table tr:hover td { background: #f8fafc; }

/* Badges & Pills */
.badge-tier { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.badge-tier.vip { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.badge-tier.gold { background: #fffbeb; color: #d97706; border: 1px solid #fef3c7; }
.badge-tier.silver { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.badge-tier.bronze { background: #fff7ed; color: #c2410c; border: 1px solid #ffedd5; }

.badge-status { display: inline-flex; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.badge-status.active { background: #dcfce7; color: #15803d; }
.badge-status.inactive { background: #f1f5f9; color: #64748b; }
.badge-status.blocked { background: #fee2e2; color: #b91c1c; }

/* Form Controls & Dropdown Fix */
.form-label { font-weight: 700; font-size: 13.5px; color: #334155; margin-bottom: 6px; display: block; }
.form-control, .form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: 'Tajawal', sans-serif;
  font-size: 14px;
  background: #ffffff;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 67, 143, 0.15);
}

/* Modal Z-Index and Select Overflow Fix */
.modal { z-index: 1055; }
.modal-dialog { max-width: 560px; margin: 1.75rem auto; }
.modal-content { border-radius: 18px; border: 1px solid var(--border); overflow: visible; box-shadow: 0 20px 40px rgba(15,23,42,0.18); }

/* QR Code Scanner Video View */
#qr-reader-viewport {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--primary);
}

/* Floating QR Floating Action Button on Mobile */
.mobile-qr-fab {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-dark);
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(217, 46, 120, 0.4);
  z-index: 1040;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
html[dir="rtl"] .mobile-qr-fab { right: auto; left: 24px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 13.5px;
  font-family: 'Tajawal', sans-serif;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.btn-primary { background: var(--primary-dark); color: #ffffff; }
.btn-primary:hover { background: var(--primary); }
.btn-outline { background: #ffffff; border-color: var(--border); color: var(--ink); }
.btn-outline:hover { background: #f8fafc; border-color: #cbd5e1; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 7px; }

/* Card management workspace */
.card-share-panel { max-width: 760px; text-align: center; }
.card-share-qr { padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg,#fff,#f8fafc); }
.card-share-qr > img { width: min(230px,70vw); aspect-ratio: 1; object-fit: contain; }
.card-share-link { max-width: 680px; margin-inline: auto; }
.brand-colour-control { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px; border:1px solid var(--border); border-radius:14px; background:#fff; }
.brand-colour-control code { min-width:82px; color:var(--ink); font-weight:800; }
.subscription-status-card { padding:22px; border:1px solid var(--border); border-inline-start-width:5px; border-radius:16px; background:#f8fafc; }
.subscription-status-card.is-active { border-inline-start-color:#16a34a; background:#f0fdf4; }
.subscription-status-card.is-trial { border-inline-start-color:#2563eb; background:#eff6ff; }
.subscription-status-card.is-inactive { border-inline-start-color:#dc2626; background:#fef2f2; }
.subscription-ledger td { white-space:nowrap; }
.form-customizer-preview { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(280px,1.2fr); overflow:hidden; border:1px solid var(--border); border-radius:20px; box-shadow:0 14px 32px rgba(15,23,42,.08); }
.form-customizer-preview-head { display:flex; min-height:190px; flex-direction:column; align-items:center; justify-content:center; padding:25px; background:linear-gradient(145deg,var(--preview-brand),color-mix(in srgb,var(--preview-brand) 55%,#15162e)); color:#fff; text-align:center; }
.form-customizer-preview-head > strong { margin:9px 0; font-size:22px; }
.form-customizer-preview-head > p { max-width:360px; margin:0; white-space:pre-line; opacity:.9; }
.form-customizer-preview-body { display:flex; min-height:190px; flex-direction:column; justify-content:center; padding:26px; background:#fff; }
.form-customizer-preview-body h3 { margin:0 0 7px; font-size:22px; }
.form-customizer-preview-body p { margin:0 0 20px; color:var(--muted); }

/* Wallet card designer */
.wallet-preview-column { position:sticky; top:132px; }
.wallet-designer-preview-panel { overflow:hidden; }
.wallet-design-device-frame { max-width:430px; margin:0 auto; padding:13px; border:1px solid #d8dce5; border-radius:31px; background:linear-gradient(145deg,#f8fafc,#e5e7eb); box-shadow:inset 0 1px 0 #fff,0 18px 42px rgba(15,23,42,.12); }
.wallet-design-card { position:relative; min-height:565px; overflow:hidden; padding:23px; border-radius:22px; background:linear-gradient(155deg,var(--wallet-bg),color-mix(in srgb,var(--wallet-bg) 68%,var(--wallet-accent))); color:var(--wallet-fg); box-shadow:0 20px 44px rgba(15,23,42,.2); isolation:isolate; }
.wallet-design-card.preview-google { min-height:545px; border-radius:17px; box-shadow:0 15px 34px rgba(15,23,42,.18); }
.wallet-design-pattern { position:absolute; z-index:-1; inset:0; opacity:.54; pointer-events:none; }
.wallet-design-card.pattern-soft .wallet-design-pattern { background:radial-gradient(circle at 95% 5%,color-mix(in srgb,var(--wallet-accent) 75%,transparent) 0 16%,transparent 42%),radial-gradient(circle at 0 100%,rgba(255,255,255,.16),transparent 37%); }
.wallet-design-card.pattern-waves .wallet-design-pattern { background:repeating-radial-gradient(ellipse at 5% 58%,transparent 0 28px,rgba(255,255,255,.11) 29px 31px,transparent 32px 56px); transform:scale(1.35); }
.wallet-design-card.pattern-geometric .wallet-design-pattern { background:repeating-linear-gradient(132deg,transparent 0 27px,rgba(255,255,255,.09) 28px 30px,transparent 31px 56px); }
.wallet-design-card.pattern-confetti .wallet-design-pattern { background:radial-gradient(circle at 15% 20%,var(--wallet-accent) 0 4px,transparent 5px),radial-gradient(circle at 78% 14%,rgba(255,255,255,.7) 0 3px,transparent 4px),radial-gradient(circle at 62% 66%,var(--wallet-accent) 0 5px,transparent 6px),radial-gradient(circle at 25% 78%,rgba(255,255,255,.48) 0 4px,transparent 5px); background-size:91px 79px,117px 103px,139px 123px,83px 97px; }
.wallet-design-head { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:11px; }.wallet-design-head > strong { overflow:hidden; color:var(--wallet-fg); font-size:16px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }.wallet-design-head > i { color:var(--wallet-accent); font-size:20px; }
.wallet-design-logo { display:grid; width:44px; height:44px; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.24); border-radius:13px; background:rgba(255,255,255,.14); font-weight:900; }.wallet-design-logo img { width:100%; height:100%; padding:5px; object-fit:contain; }.wallet-design-logo span { color:var(--wallet-fg); }
.wallet-design-art { display:grid; min-height:185px; margin:22px -23px 18px; padding:20px 23px; place-items:center; border-block:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.1); backdrop-filter:blur(5px); }
.wallet-stamp-preview-grid { display:grid; width:100%; grid-template-columns:repeat(var(--stamp-columns,5),minmax(0,1fr)); gap:10px; place-items:center; }.wallet-stamp-preview-grid > span { display:grid; width:43px; max-width:100%; aspect-ratio:1; place-items:center; overflow:hidden; border:1.5px solid color-mix(in srgb,var(--wallet-fg) 48%,transparent); border-radius:50%; background:color-mix(in srgb,var(--wallet-fg) 10%,transparent); color:color-mix(in srgb,var(--wallet-fg) 70%,transparent); font-size:18px; }.wallet-stamp-preview-grid > span.filled { border-color:var(--wallet-accent); background:var(--wallet-accent); color:var(--wallet-bg); box-shadow:0 7px 15px color-mix(in srgb,var(--wallet-accent) 34%,transparent); }.wallet-stamp-preview-grid img { width:72%; height:72%; object-fit:contain; }
.wallet-points-orbit { position:relative; display:grid; width:155px; aspect-ratio:1; place-items:center; border:1px solid rgba(255,255,255,.24); border-radius:50%; background:color-mix(in srgb,var(--wallet-accent) 28%,transparent); box-shadow:0 0 0 23px color-mix(in srgb,var(--wallet-accent) 10%,transparent); }.wallet-points-orbit > i { color:var(--wallet-fg); font-size:50px; }.wallet-points-orbit span { position:absolute; width:13px; aspect-ratio:1; border-radius:50%; background:var(--wallet-accent); }.wallet-points-orbit span:nth-child(1){inset:6% auto auto 17%}.wallet-points-orbit span:nth-child(2){inset:auto 5% 22% auto;width:19px}.wallet-points-orbit span:nth-child(3){inset:44% auto auto -28%;width:9px}
.wallet-design-details { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(90px,.6fr); gap:12px; }.wallet-design-details > div,.wallet-design-reward { min-width:0; padding:12px; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:rgba(0,0,0,.1); }.wallet-design-details small,.wallet-design-reward span { display:block; margin-bottom:3px; color:var(--wallet-label); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.wallet-design-details strong,.wallet-design-reward strong { display:block; overflow:hidden; color:var(--wallet-fg); font-size:15px; text-overflow:ellipsis; white-space:nowrap; }.wallet-design-details > div:last-child strong { color:var(--wallet-accent); font-size:23px; }
.wallet-design-reward { margin-top:11px; }.wallet-design-reward span i { margin-inline-end:5px; color:var(--wallet-accent); }
.wallet-design-barcode { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding:11px 13px; border-radius:13px; background:#fff; color:#111827; }.wallet-design-barcode i { font-size:29px; }.wallet-design-barcode span { color:#64748b; font:700 11px/1 monospace; letter-spacing:.18em; }
.wallet-preview-platform-switch { display:flex; width:max-content; max-width:100%; margin-inline:auto; padding:3px; border:1px solid var(--border); border-radius:999px; background:#f8fafc; }
.wallet-platform-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:0; border-radius:999px; background:transparent; color:#667085; font-size:11px; font-weight:800; transition:.18s ease; }.wallet-platform-pill.active { background:#fff; color:#101828; box-shadow:0 2px 8px rgba(15,23,42,.1); }
.wallet-theme-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }.wallet-theme-option { position:relative; display:flex; min-width:0; flex-direction:column; padding:10px; border:1px solid var(--border); border-radius:15px; background:#fff; cursor:pointer; transition:.18s ease; }.wallet-theme-option:hover { transform:translateY(-2px); border-color:#aeb5c3; }.wallet-theme-option:has(input:checked) { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }.wallet-theme-option input { position:absolute; opacity:0; pointer-events:none; }.wallet-theme-swatch { position:relative; display:block; overflow:hidden; height:65px; margin-bottom:9px; border-radius:10px; background:linear-gradient(145deg,var(--theme-bg),color-mix(in srgb,var(--theme-bg) 56%,var(--theme-accent))); }.wallet-theme-swatch::after { content:""; position:absolute; width:55px; height:55px; inset-inline-end:-11px; top:-12px; border:10px solid color-mix(in srgb,var(--theme-accent) 65%,transparent); border-radius:50%; }.wallet-theme-swatch i,.wallet-theme-swatch b { position:absolute; bottom:12px; width:21px; aspect-ratio:1; border-radius:50%; background:var(--theme-accent); }.wallet-theme-swatch i { inset-inline-start:12px; }.wallet-theme-swatch b { inset-inline-start:39px; opacity:.42; }.wallet-theme-option > strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.wallet-theme-option > small { color:var(--muted); font-size:10px; }
.wallet-colour-field { display:flex; height:100%; min-height:122px; flex-direction:column; gap:7px; padding:12px; border:1px solid var(--border); border-radius:14px; background:#fff; }.wallet-colour-field > span { font-size:11px; font-weight:800; }.wallet-colour-field input { width:100%; height:47px; padding:3px; border:0; background:none; cursor:pointer; }.wallet-colour-field code { color:#667085; font-size:10px; text-align:center; }
.wallet-contrast-status { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:#f8fafc; color:#475467; font-size:11px; }.wallet-contrast-status.good { background:#ecfdf3; color:#027a48; }.wallet-contrast-status.bad { background:#fef3f2; color:#b42318; }
.wallet-icon-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(76px,1fr)); gap:7px; }.wallet-icon-option { position:relative; cursor:pointer; }.wallet-icon-option input { position:absolute; opacity:0; }.wallet-icon-option span { display:flex; min-height:77px; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px; border:1px solid var(--border); border-radius:13px; background:#fff; color:#475467; text-align:center; }.wallet-icon-option i { font-size:23px; }.wallet-icon-option img { width:26px;height:26px;object-fit:contain; }.wallet-icon-option small { font-size:9px; font-weight:800; }.wallet-icon-option:has(input:checked) span { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 7%,#fff); color:var(--primary-dark); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 10%,transparent); }
@media (max-width:1199.98px) { .wallet-preview-column { position:static; }.wallet-design-device-frame { max-width:470px; }.wallet-theme-grid { grid-template-columns:repeat(4,minmax(130px,1fr)); overflow-x:auto; }.wallet-theme-option { min-width:130px; } }
@media (max-width:767.98px) { .wallet-design-card { min-height:530px; padding:18px; }.wallet-design-art { margin-inline:-18px; padding-inline:18px; }.wallet-theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }.wallet-theme-option { min-width:0; }.wallet-icon-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.wallet-stamp-preview-grid > span { width:36px; }.wallet-design-details { grid-template-columns:1fr 100px; } }
.preview-field-line { display:block; width:100%; height:38px; margin-top:8px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; }
.preview-field-line.short { width:72%; }
.location-picker-panel { padding:18px; border:1px solid var(--border); border-radius:16px; background:#f8fafc; }
.store-location-map { width:100%; height:390px; border:1px solid var(--border); border-radius:14px; background:#e2e8f0; z-index:1; }
.coordinate-readout { display:flex; gap:10px; flex-wrap:wrap; }
.coordinate-readout span { padding:7px 10px; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--muted); font-size:12px; }
.coordinate-readout strong { color:var(--ink); }
.direct-notify-modal { overflow:hidden; text-align:start; }
.notification-modal-icon { display:grid; width:46px; height:46px; place-items:center; border-radius:14px; background:var(--primary-light); color:var(--primary-dark); font-size:20px; }
.notify-recipient-card { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--border); border-radius:13px; background:#f8fafc; text-align:start; }
.notify-recipient-avatar { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border-radius:50%; background:#fff; color:var(--primary-dark); box-shadow:0 0 0 1px var(--border); }
.notify-recipient-card small { display:block; margin-top:2px; color:var(--muted); }
.profile-logo-preview { width:190px; min-height:92px; place-items:center; }
.profile-logo-preview img { max-width:170px; max-height:72px; object-fit:contain; }
.account-security-card { text-align:start; }
.password-control .form-control { text-align: start; }
.password-control .password-toggle { min-width: 46px; border-color: var(--border); background: #fff; color: var(--muted); }
.password-control .password-toggle:hover { background: #f8fafc; color: var(--ink); }

/* Business profile workspace */
.profile-page {
  width: 100%;
  min-width: 0;
}

.profile-page-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px 30px;
  margin-bottom: 20px;
  padding: 28px 30px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% -10%, rgba(236, 72, 153, .36), transparent 35%),
    linear-gradient(128deg, #0f172a 0%, #272038 64%, #67254d 140%);
  color: #fff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .14);
}

.profile-page-header::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  inset-inline-end: -105px;
  bottom: -150px;
  border: 34px solid rgba(255, 255, 255, .055);
  border-radius: 50%;
  pointer-events: none;
}

.profile-brand-identity,
.profile-status-card,
.profile-hero-description {
  position: relative;
  z-index: 1;
}

.profile-brand-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 17px;
}

.profile-brand-identity > div:last-child {
  min-width: 0;
}

.profile-brand-logo,
.profile-brand-fallback {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  border-radius: 23px;
}

.profile-brand-logo {
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: #fff;
  object-fit: contain;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .15);
}

.profile-brand-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  font-size: 31px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .15);
}

.profile-page-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #f9a8d4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-page-header h1 {
  margin: 0 0 7px;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: clamp(25px, 2.5vw, 36px);
  font-weight: 900;
  line-height: 1.15;
}

.profile-brand-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 15px;
}

.profile-brand-meta span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, .66);
  font-size: 12px;
  unicode-bidi: isolate;
}

.profile-brand-meta i {
  color: #f9a8d4;
}

.profile-status-card {
  display: flex;
  min-width: 205px;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid rgba(134, 239, 172, .2);
  border-radius: 16px;
  background: rgba(22, 163, 74, .12);
  backdrop-filter: blur(9px);
}

.profile-status-card > span {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  place-items: center;
  border-radius: 12px;
  background: rgba(134, 239, 172, .14);
  color: #86efac;
  font-size: 18px;
}

.profile-status-card strong,
.profile-status-card small {
  display: block;
}

.profile-status-card strong {
  color: #fff;
  font-size: 12.5px;
}

.profile-status-card small {
  margin-top: 2px;
  color: rgba(255, 255, 255, .58);
  font-size: 10px;
}

.profile-hero-description {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .67);
  font-size: 13px;
  line-height: 1.65;
}

.profile-settings-form {
  width: 100%;
  min-width: 0;
}

.profile-settings-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding: 17px 19px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.profile-settings-intro > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.profile-settings-intro-icon {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  place-items: center;
  border-radius: 13px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 18px;
}

.profile-settings-intro h2,
.profile-settings-intro p,
.profile-settings-section-title h3,
.profile-settings-section-title p {
  margin: 0;
}

.profile-settings-intro h2 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.profile-settings-intro p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.profile-required-note {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.profile-required-note i {
  color: #dc2626;
  font-size: 8px;
}

.profile-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .46fr);
  align-items: start;
  gap: 18px;
}

.profile-settings-main,
.profile-settings-aside {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.profile-settings-aside {
  position: sticky;
  top: 88px;
}

.profile-settings-section {
  min-width: 0;
  padding: 22px;
  border: 1px solid #dbe3ed;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.profile-settings-section-title {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #edf0f4;
}

.profile-settings-section-title > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  background: #fdf2f8;
  color: #db2777;
  font-size: 17px;
}

.profile-settings-section-title > div {
  min-width: 0;
}

.profile-settings-section-title h3 {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.profile-settings-section-title p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.profile-logo-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: stretch;
  gap: 18px;
}

.profile-logo-upload {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.profile-upload-help,
.profile-security-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 11px;
  font-size: 11px;
  line-height: 1.55;
}

.profile-upload-help {
  background: #f8fafc;
  color: var(--muted);
}

.profile-upload-help i {
  color: #2563eb;
}

.profile-logo-preview {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 150px;
  place-items: center;
  padding: 28px 15px 15px;
  overflow: hidden;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  background:
    linear-gradient(45deg, #f8fafc 25%, transparent 25%),
    linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f8fafc 75%),
    linear-gradient(-45deg, transparent 75%, #f8fafc 75%), #fff;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.profile-preview-label {
  position: absolute;
  top: 9px;
  inset-inline-start: 10px;
  padding: 3px 7px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  box-shadow: 0 0 0 1px #e2e8f0;
}

.profile-logo-preview img {
  display: block;
  max-width: 175px;
  max-height: 88px;
  object-fit: contain;
}

.profile-logo-preview img[hidden] {
  display: none;
}

.profile-preview-fallback {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

.profile-preview-fallback i {
  font-size: 24px;
}

.profile-preview-fallback[hidden] {
  display: none;
}

.profile-security-note {
  margin: 0 0 17px;
  background: #f5f3ff;
  color: #5b21b6;
}

.profile-security-note i {
  margin-top: 2px;
  color: #7c3aed;
}

.profile-security-section .password-control {
  flex-wrap: nowrap;
}

.profile-save-card {
  padding: 17px;
  border-radius: 18px;
  background: linear-gradient(135deg, #111827, #33223b);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .13);
}

.profile-save-card > span {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 13px;
  color: rgba(255, 255, 255, .67);
  font-size: 11px;
  line-height: 1.5;
}

.profile-save-card > span i {
  margin-top: 2px;
  color: #86efac;
}

.profile-save-card .btn {
  width: 100%;
  min-height: 44px;
}
.receipt-modal { text-align:start; }
.receipt-modal .modal-header,.receipt-modal .modal-footer { text-align:start; }
.receipt-field { text-align:start; }
.receipt-modal .bidi-ltr { direction:ltr; text-align:inherit !important; unicode-bidi:isolate; }
html[dir="rtl"] .receipt-modal { direction:rtl; text-align:right; }
html[dir="rtl"] .receipt-modal .receipt-field { text-align:right; }
html[dir="ltr"] .receipt-modal { direction:ltr; text-align:left; }
html[dir="ltr"] .receipt-modal .receipt-field { text-align:left; }

/* Keep international phone numbers as one LTR unit inside both LTR and RTL forms. */
.phone-number-group {
  direction: ltr;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  unicode-bidi: isolate;
}

.phone-number-group > .form-select,
.phone-number-group > .form-control {
  direction: ltr;
  text-align: left;
}

.phone-number-group > .form-select {
  flex: 0 0 min(150px, 38%);
  width: min(150px, 38%) !important;
  min-width: 0;
  margin: 0 !important;
  border-radius: 9px 0 0 9px !important;
}

.phone-number-group > .form-control {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0 0 -1px !important;
  border-radius: 0 9px 9px 0 !important;
}

.phone-number-group > .form-select:focus,
.phone-number-group > .form-control:focus {
  position: relative;
  z-index: 2;
}

/* Bootstrap RTL rounds by document direction; explicit LTR groups need physical corners. */
html[dir="rtl"] .input-group[dir="ltr"] > :first-child:not(.dropdown-menu) {
  border-top-left-radius: 9px !important;
  border-bottom-left-radius: 9px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

html[dir="rtl"] .input-group[dir="ltr"] > :last-child:not(.dropdown-menu) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 9px !important;
  border-bottom-right-radius: 9px !important;
}

/* Mobile Responsiveness Improvements */
@media (max-width: 992px) {
  .app-sidebar { transform: translateX(-100%); }
  html[dir="rtl"] .app-sidebar { transform: translateX(100%); }
  .app-sidebar.open { transform: translateX(0); }
  .app-wrapper { margin-left: 0; }
  html[dir="rtl"] .app-wrapper { margin-right: 0; }
  .mobile-toggle { display: block; }
  .mobile-qr-fab { display: flex; }
  .team-page-header { align-items: stretch; flex-direction: column; gap: 20px; }
  .team-page-action { align-self: flex-start; }
  .tickets-page-header { grid-template-columns: 1fr; }
  .tickets-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .analytics-page-header { grid-template-columns: 1fr; }
  .analytics-content-grid { grid-template-columns: 1fr; }
  .analytics-cards-panel { grid-column: auto; }
  .profile-settings-grid { grid-template-columns: 1fr; }
  .profile-settings-aside { position: static; grid-template-columns: minmax(0,1fr) minmax(260px,.65fr); }
}

@media (max-width: 768px) {
  .app-topbar { padding: 0 16px; height: 60px; }
  .app-main { padding: 16px; }
  .hero-card { padding: 20px; }
  .hero-card h1 { font-size: 22px; }
  .quick-stamp-btn span { display: none; }
  .qr-scan-topbar-btn span { display: none; }
  .smart-table-tools,.smart-country-toolbar,.sticky-save-bar { align-items:stretch; flex-direction:column; }
  .smart-table-search { width:100%; }
  .country-selection-grid { grid-template-columns:1fr; max-height:none; }
  .brand-colour-control { align-items:flex-start; flex-direction:column; }
  .form-customizer-preview { grid-template-columns:1fr; }
  .store-location-map { height:310px; }
  .card-share-link { flex-direction:column; }
  .card-share-link > * { width:100% !important; border-radius:9px !important; }
  .team-page-header { padding: 22px; border-radius: 19px; }
  .team-page-heading { align-items: flex-start; gap: 13px; }
  .team-page-heading-icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; font-size: 20px; }
  .team-page-header h1 { font-size: 25px; }
  .team-page-header p { font-size: 13.5px; }
  .team-page-action { width: 100%; }
  .team-card { border-radius: 19px; }
  .team-empty-state { min-height: 340px; padding: 44px 20px; }
  .team-empty-icon { width: 68px; height: 68px; border-radius: 21px; font-size: 28px; }
  .team-empty-state h2 { font-size: 22px; }
  .team-empty-state p { font-size: 13.5px; }
  .team-empty-action { width: 100%; max-width: 320px; }
  .team-modal .modal-dialog { width: calc(100% - 20px); margin: 10px auto; }
  .team-modal .modal-body { padding: 20px !important; }
  .team-modal .modal-footer { flex-wrap: wrap; }
  .team-modal .modal-footer .btn { flex: 1 1 150px; }
  .tickets-page-header { gap: 20px; padding: 22px; border-radius: 19px; }
  .tickets-page-heading { gap: 13px; }
  .tickets-page-heading-icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; font-size: 20px; }
  .tickets-page-header h1 { font-size: 25px; }
  .tickets-page-header p { font-size: 13.5px; }
  .tickets-page-action { width: 100%; }
  .tickets-stat { min-height: 62px; padding: 9px 10px; gap: 8px; }
  .tickets-stat-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .tickets-stat strong { font-size: 20px; }
  .tickets-card { border-radius: 19px; }
  .tickets-empty-state { min-height: 340px; padding: 44px 20px; }
  .tickets-empty-icon { width: 68px; height: 68px; border-radius: 21px; font-size: 27px; }
  .tickets-empty-state h2 { font-size: 22px; }
  .tickets-empty-state p { font-size: 13.5px; }
  .tickets-empty-action { width: 100%; max-width: 320px; }
  .tickets-filters { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tickets-filters::-webkit-scrollbar { display: none; }
  .tickets-modal .modal-dialog { width: calc(100% - 20px); margin: 10px auto; }
  .tickets-modal .modal-body { padding: 20px !important; }
  .tickets-modal .modal-footer { flex-wrap: wrap; }
  .tickets-modal .modal-footer .btn { flex: 1 1 150px; }
  .analytics-page-header { gap: 22px; padding: 22px; border-radius: 19px; }
  .analytics-page-heading { gap: 13px; }
  .analytics-page-heading-icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; font-size: 20px; }
  .analytics-page-header h1 { font-size: 25px; }
  .analytics-page-header p { font-size: 13.5px; }
  .analytics-page-actions { align-items: stretch; flex-direction: column; }
  .analytics-card-filter,.analytics-reports-action { width: 100%; }
  .analytics-hero-summary { grid-template-columns: 116px minmax(0,1fr); }
  .analytics-retention-spotlight { width: 108px; height: 108px; }
  .analytics-retention-spotlight > div { width: 88px; height: 88px; }
  .analytics-retention-spotlight strong { font-size: 22px; }
  .analytics-retention-spotlight span { margin-top: 4px; font-size: 9px; }
  .analytics-hero-metrics > div { padding: 10px 11px; }
  .analytics-hero-metrics strong { font-size: 17px; }
  .analytics-filter-banner { align-items: stretch; flex-direction: column; }
  .analytics-filter-banner .btn { width: 100%; }
  .analytics-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .analytics-kpi { min-height: 104px; padding: 13px; gap: 10px; }
  .analytics-kpi-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; font-size: 17px; }
  .analytics-kpi strong { font-size: 21px; }
  .analytics-panel { padding: 19px; border-radius: 18px; }
  .analytics-panel .panel-header { align-items: stretch; flex-direction: column; }
  .profile-page-header { grid-template-columns: 1fr; gap: 18px; padding: 22px; border-radius: 19px; }
  .profile-status-card { min-width: 0; width: 100%; }
  .profile-brand-logo,.profile-brand-fallback { width: 68px; height: 68px; flex-basis: 68px; border-radius: 19px; }
  .profile-brand-fallback { font-size: 26px; }
  .profile-page-header h1 { font-size: 25px; }
  .profile-hero-description { padding-top: 14px; }
  .profile-settings-intro { align-items: flex-start; flex-direction: column; }
  .profile-settings-grid { grid-template-columns: 1fr; }
  .profile-settings-aside { position: static; grid-template-columns: 1fr; }
  .profile-settings-section { padding: 19px; border-radius: 18px; }
  .profile-logo-workspace { grid-template-columns: 1fr; }
  .profile-logo-preview { min-height: 145px; }
}

@media (max-width: 480px) {
  .analytics-page-heading-icon { display: none; }
  .analytics-hero-summary { grid-template-columns: 1fr; }
  .analytics-retention-spotlight { margin-inline: auto; }
  .analytics-hero-metrics { grid-template-columns: 1fr 1fr; }
  .analytics-kpi-grid { grid-template-columns: 1fr; }
  .profile-brand-identity { align-items: flex-start; }
  .profile-brand-meta { align-items: flex-start; flex-direction: column; }
  .profile-settings-intro-icon { display: none; }
  .profile-settings-section-title > span { width: 38px; height: 38px; flex-basis: 38px; }
}

/* Form Input Text Alignment Rules (LTR for English/codes, RTL for Arabic) */
input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[name*="email"], input[name*="phone"], input[name*="slug"], input[name*="pin"], input[name*="en"], textarea[name*="en"], .dir-ltr {
  direction: ltr !important;
  text-align: left !important;
}

input[name*="ar"], textarea[name*="ar"], .dir-rtl {
  direction: rtl !important;
  text-align: right !important;
}

/* Loyalty program portfolio */
.programs-hero { position:relative; display:flex; align-items:center; justify-content:space-between; gap:28px; overflow:hidden; padding:clamp(24px,4vw,44px); border-radius:28px; background:linear-gradient(128deg,#111827 0%,#25213d 54%,#b62567 130%); color:#fff; box-shadow:0 22px 54px rgba(15,23,42,.16); }
.programs-hero::before,.programs-hero::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.programs-hero::before { width:280px; height:280px; inset-inline-end:-80px; top:-170px; background:rgba(255,255,255,.08); }
.programs-hero::after { width:190px; height:190px; inset-inline-start:36%; bottom:-145px; background:rgba(236,72,153,.22); filter:blur(2px); }
.programs-hero-copy { z-index:1; width:100%; max-width:760px; min-width:0; }
.programs-hero-copy h1,.programs-hero-copy p { overflow-wrap:anywhere; }
.programs-hero .btn { z-index:1; flex:0 0 auto; border:0; color:#7f164a; box-shadow:0 12px 28px rgba(0,0,0,.18); }
.program-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.program-kpi { display:flex; align-items:center; gap:13px; min-height:92px; padding:18px; border:1px solid var(--border); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.045); }
.program-kpi-icon { display:grid; width:48px; height:48px; flex:0 0 48px; place-items:center; border-radius:15px; font-size:20px; }
.program-kpi-icon.rose { background:#fdf2f8; color:#db2777; }.program-kpi-icon.green { background:#ecfdf5; color:#059669; }.program-kpi-icon.blue { background:#eff6ff; color:#2563eb; }.program-kpi-icon.violet { background:#f5f3ff; color:#7c3aed; }
.program-kpi small { display:block; margin-bottom:2px; color:var(--muted); font-weight:700; }.program-kpi strong { display:block; color:var(--ink); font-size:25px; line-height:1; }
.program-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.program-toolbar .smart-table-search { max-width:420px; flex:1 1 320px; }
.program-filter-group { display:flex; align-items:center; gap:6px; overflow:auto; padding:4px; border:1px solid var(--border); border-radius:14px; background:#fff; }
.program-filter { display:flex; align-items:center; gap:7px; white-space:nowrap; padding:8px 13px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-weight:700; }
.program-filter span { display:grid; min-width:21px; height:21px; place-items:center; border-radius:20px; background:#f1f5f9; font-size:11px; }.program-filter.active { background:#111827; color:#fff; }.program-filter.active span { background:rgba(255,255,255,.16); }
.loyalty-program-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:23px; background:#fff; box-shadow:0 12px 34px rgba(15,23,42,.065); transition:transform .18s ease,box-shadow .18s ease; }
.loyalty-program-card:hover { transform:translateY(-2px); box-shadow:0 18px 42px rgba(15,23,42,.1); }
.program-card-head { position:relative; overflow:hidden; min-height:158px; padding:24px; background:linear-gradient(135deg,var(--program-colour),color-mix(in srgb,var(--program-colour) 26%,#111827)); color:#fff; }
.program-card-head::after { content:""; position:absolute; width:150px; height:150px; inset-inline-end:-48px; bottom:-80px; border:24px solid rgba(255,255,255,.09); border-radius:50%; }
.program-card-head h2 { position:relative; z-index:1; margin:0 0 7px; color:#fff; font-size:23px; font-weight:800; }
.program-type-badge,.program-status { position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:100px; font-size:11px; font-weight:800; }
.program-type-badge { background:rgba(255,255,255,.94); color:#111827; }.program-status { background:rgba(15,23,42,.32); color:#fff; backdrop-filter:blur(8px); }.program-status i { font-size:7px; }.program-status.active i { color:#86efac; }.program-status.inactive i { color:#fca5a5; }
.program-public-path { position:relative; z-index:1; display:flex; align-items:center; gap:5px; overflow:hidden; max-width:100%; color:rgba(255,255,255,.8); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.program-card-body { display:flex; flex:1; flex-direction:column; gap:18px; padding:22px; }
.program-rule-summary { display:flex; align-items:flex-start; gap:12px; min-height:82px; }.program-rule-icon { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border-radius:13px; background:color-mix(in srgb,var(--program-colour) 11%,#fff); color:var(--program-colour); font-size:18px; }.program-rule-summary small { display:block; margin-bottom:2px; color:var(--muted); font-weight:700; }.program-rule-summary strong { display:block; color:var(--ink); }.program-rule-summary p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.program-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }.program-metric-grid > div { min-width:0; padding:10px; border:1px solid #eef2f7; border-radius:12px; background:#f8fafc; }.program-metric-grid span { display:block; overflow:hidden; margin-bottom:3px; color:var(--muted); font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.program-metric-grid span i { margin-inline-end:4px; }.program-metric-grid strong { color:var(--ink); font-size:17px; }
.program-readiness { margin-top:auto; }.program-readiness > div:first-child { display:flex; justify-content:space-between; margin-bottom:7px; color:var(--muted); font-size:12px; font-weight:700; }.program-readiness strong { color:var(--ink); }.program-readiness .progress { height:6px; background:#eef2f7; }.program-readiness .progress-bar { border-radius:10px; background:var(--program-colour); }
.program-card-actions { display:flex; gap:8px; padding:15px 18px; border-top:1px solid var(--border); background:#fbfcfe; }.program-card-actions > .btn:not(.flex-grow-1),.program-card-actions .dropdown > .btn { width:42px; padding-inline:0; }
.program-empty-state { display:flex; min-height:360px; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.program-empty-state > span { display:grid; width:72px; height:72px; margin-bottom:16px; place-items:center; border-radius:22px; background:var(--primary-light); color:var(--primary-dark); font-size:30px; }.program-empty-state h2 { font-size:22px; }.program-empty-state p { max-width:560px; color:var(--muted); }
.qr-program-modal { overflow:hidden; border:0; border-radius:23px; }.qr-program-code { display:inline-grid; margin:20px auto; padding:12px; place-items:center; border:1px solid var(--border); border-radius:20px; background:#fff; box-shadow:0 13px 30px rgba(15,23,42,.08); }.qr-program-code img { max-width:100%; height:auto; }
.create-program-modal { overflow:hidden; border:0; border-radius:25px; }.create-program-step { color:var(--primary-dark); font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.create-program-section { padding:22px; border:1px solid var(--border); border-radius:19px; background:#fff; }.create-program-section-title { display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }.create-program-section-title > span { display:grid; width:33px; height:33px; flex:0 0 33px; place-items:center; border-radius:10px; background:#111827; color:#fff; font-weight:800; }.create-program-section-title h3 { margin:0; color:var(--ink); font-size:17px; }.create-program-section-title p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.program-type-choice { display:flex; min-height:122px; flex-direction:column; align-items:flex-start; gap:5px; padding:17px; border:1.5px solid var(--border); border-radius:15px; cursor:pointer; transition:.15s ease; }.program-type-choice > span { display:grid; width:38px; height:38px; margin-bottom:3px; place-items:center; border-radius:11px; background:#f8fafc; color:var(--primary-dark); font-size:18px; }.program-type-choice small { color:var(--muted); }.btn-check:checked + .program-type-choice { border-color:var(--primary); background:var(--primary-light); box-shadow:0 0 0 3px rgba(236,72,153,.1); }.program-rules-editor { padding:18px; border-radius:15px; background:#f8fafc; }.brand-colour-control.compact { padding:7px 10px; border-radius:11px; }

@media (max-width: 991.98px) { .program-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.program-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.programs-hero { align-items:flex-start; flex-direction:column; }.program-toolbar { align-items:stretch; flex-direction:column; }.program-toolbar .smart-table-search { width:100%; max-width:none; flex-basis:auto; }.program-filter-group { width:100%; } }
@media (max-width: 575.98px) { .program-kpi-grid { grid-template-columns:1fr 1fr; gap:9px; }.program-kpi { min-height:80px; padding:12px; }.program-kpi-icon { width:40px; height:40px; flex-basis:40px; }.program-kpi strong { font-size:21px; }.program-kpi small { font-size:10px; }.programs-hero { border-radius:21px; }.programs-hero .btn { width:100%; }.program-card-head,.program-card-body { padding:19px; }.program-card-actions { flex-wrap:wrap; }.program-card-actions > .flex-grow-1 { flex-basis:calc(100% - 100px); }.create-program-section { padding:15px; } }

/* Loyalty program control center */
.program-control-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr); gap:28px; overflow:hidden; padding:clamp(24px,4vw,42px); border-radius:28px; background:linear-gradient(130deg,var(--program-colour),color-mix(in srgb,var(--program-colour) 20%,#0f172a) 62%,#0f172a); color:#fff; box-shadow:0 24px 58px rgba(15,23,42,.18); }
.program-control-hero::after { content:""; position:absolute; width:280px; height:280px; inset-inline-end:-110px; top:-145px; border:45px solid rgba(255,255,255,.065); border-radius:50%; pointer-events:none; }
.program-control-main,.program-control-metrics { position:relative; z-index:1; min-width:0; }.program-control-main h1 { max-width:780px; margin:0 0 7px; color:#fff; font-size:clamp(26px,3vw,39px); font-weight:900; overflow-wrap:anywhere; }
.program-back-link,.program-control-type,.program-control-status { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:100px; font-size:11px; font-weight:800; text-decoration:none; }.program-back-link { background:#fff; color:#111827; }.program-back-link:hover { color:var(--primary-dark); }.program-control-type { background:rgba(255,255,255,.15); color:#fff; backdrop-filter:blur(9px); }.program-control-status { background:rgba(15,23,42,.26); color:#fff; }.program-control-status i { font-size:7px; }.program-control-status.active i { color:#86efac; }.program-control-status.inactive i { color:#fca5a5; }
.program-control-url { display:flex; align-items:center; gap:6px; overflow:hidden; max-width:740px; color:rgba(255,255,255,.75); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.program-control-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }.program-control-actions form { margin:0; }.btn-hero-outline { border:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.09); color:#fff; backdrop-filter:blur(8px); }.btn-hero-outline:hover { border-color:#fff; background:#fff; color:#111827; }
.program-control-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-self:stretch; }.program-control-metrics > div { display:flex; min-width:0; min-height:105px; flex-direction:column; justify-content:center; padding:16px; border:1px solid rgba(255,255,255,.14); border-radius:17px; background:rgba(15,23,42,.2); backdrop-filter:blur(10px); }.program-control-metrics span { color:rgba(255,255,255,.72); font-size:11px; font-weight:700; }.program-control-metrics strong { margin:2px 0; color:#fff; font-size:29px; line-height:1.1; }.program-control-metrics small { overflow-wrap:anywhere; color:rgba(255,255,255,.6); font-size:10px; }
.program-tab-shell { position:sticky; z-index:20; top:74px; padding:7px; border:1px solid var(--border); border-radius:17px; background:rgba(255,255,255,.92); box-shadow:0 9px 26px rgba(15,23,42,.07); backdrop-filter:blur(14px); }.program-tab-shell .custom-tabs { flex-wrap:nowrap; overflow-x:auto; margin:0; padding-bottom:1px; scrollbar-width:none; }.program-tab-shell .custom-tabs::-webkit-scrollbar { display:none; }.program-tab-shell .nav-link { padding:10px 12px; white-space:nowrap; font-size:12px; }
.readiness-score { display:grid; width:68px; height:68px; flex:0 0 68px; place-items:center; align-content:center; border-radius:50%; background:conic-gradient(var(--primary) calc(var(--score,0) * 1%),#f1f5f9 0); box-shadow:inset 0 0 0 7px #fff; }.readiness-score strong { color:var(--ink); font-size:15px; line-height:1; }
.launch-checklist { display:grid; gap:9px; }.launch-check-item { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:11px; padding:11px; border:1px solid var(--border); border-radius:13px; background:#fff; color:var(--ink); text-align:start; transition:.15s ease; }.launch-check-item:hover { border-color:#f9a8d4; transform:translateX(2px); }.launch-check-item > span { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; background:#fff7ed; color:#ea580c; }.launch-check-item.complete > span { background:#ecfdf5; color:#059669; }.launch-check-item strong { font-size:13px; }.launch-check-item small { color:#c2410c; font-size:10px; font-weight:800; }.launch-check-item.complete small { color:#059669; }
.launch-insight { display:flex; align-items:flex-start; gap:12px; padding:15px; border-radius:14px; background:#f8fafc; }.launch-insight > span { display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; border-radius:12px; background:#ecfdf5; color:#059669; }.launch-insight strong { display:block; margin-bottom:3px; color:var(--ink); }.launch-insight p { margin:0; color:var(--muted); font-size:12px; }
.program-logic-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:14px; }.program-logic-flow > div { display:flex; min-height:142px; flex-direction:column; align-items:center; justify-content:center; padding:15px; border:1px solid var(--border); border-radius:17px; background:#f8fafc; text-align:center; }.program-logic-flow > i { color:#cbd5e1; font-size:21px; }.program-logic-flow div > span { display:grid; width:45px; height:45px; margin-bottom:9px; place-items:center; border-radius:14px; background:#fff; color:var(--program-colour,#db2777); box-shadow:0 0 0 1px var(--border); font-size:19px; }.program-logic-flow small { margin-bottom:4px; color:var(--muted); }.program-logic-flow strong { color:var(--ink); }.program-logic-flow .reward { border-color:color-mix(in srgb,var(--program-colour,#db2777) 28%,#e2e8f0); background:color-mix(in srgb,var(--program-colour,#db2777) 7%,#fff); }
.program-snapshot-list { display:grid; gap:2px; }.program-snapshot-list > div { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--border); }.program-snapshot-list > div:last-child { border-bottom:0; }.program-snapshot-list span { color:var(--muted); font-size:12px; }.program-snapshot-list span i { margin-inline-end:7px; color:var(--primary-dark); }.program-snapshot-list strong { color:var(--ink); }
.program-members-empty { min-height:360px; text-align:center; }.program-members-empty .empty-state-icon { display:grid; width:68px; height:68px; margin:0 auto 14px; place-items:center; border-radius:21px; background:var(--primary-light); color:var(--primary-dark); font-size:28px; }.program-members-empty p { max-width:610px; margin:0 auto 18px; color:var(--muted); }
.wallet-provider-mini { display:grid; width:28px; height:28px; place-items:center; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--ink); }

@media (max-width:1199.98px) { .program-control-hero { grid-template-columns:1fr; }.program-control-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }.program-control-metrics > div { min-height:94px; }.program-tab-shell { top:68px; } }
@media (max-width:767.98px) { .programs-hero,.program-control-hero,.loyalty-program-card { width:100%; max-width:100%; min-width:0; }.program-control-metrics { grid-template-columns:1fr 1fr; }.program-control-actions { align-items:stretch; flex-direction:column; }.program-control-actions .btn,.program-control-actions form { width:100%; flex:none; }.program-control-actions form .btn { width:100%; }.program-logic-flow { grid-template-columns:1fr; }.program-logic-flow > i { transform:rotate(90deg); }.program-logic-flow > div { min-height:112px; }.launch-check-item { grid-template-columns:38px 1fr; }.launch-check-item small { grid-column:2; }.program-tab-shell { top:62px; margin-inline:-5px; } }
@media (max-width:479.98px) { .program-control-hero { padding:21px; border-radius:21px; }.program-control-metrics { grid-template-columns:1fr 1fr; gap:7px; }.program-control-metrics > div { min-height:86px; padding:12px; }.program-control-metrics strong { font-size:23px; }.program-control-actions { align-items:stretch; flex-direction:column; }.program-control-actions .btn,.program-control-actions form { width:100%; }.readiness-score { width:59px; height:59px; flex-basis:59px; } }

/* Membership directory */
.memberships-page,.customer-page { display:grid; gap:24px; }
.memberships-page-header { position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr); gap:30px; overflow:hidden; padding:clamp(25px,4vw,42px); border-radius:28px; background:radial-gradient(circle at 88% 4%,rgba(255,67,143,.3),transparent 30%),linear-gradient(132deg,#0f172a 0%,#1f1d36 58%,#3a1d31 100%); color:#fff; box-shadow:0 22px 54px rgba(15,23,42,.16); }
.memberships-page-header::after { content:""; position:absolute; width:220px; height:220px; inset-inline-end:-95px; bottom:-145px; border:38px solid rgba(255,255,255,.055); border-radius:50%; pointer-events:none; }
.memberships-hero-main,.memberships-hero-stats { position:relative; z-index:1; min-width:0; }
.memberships-page-heading { display:flex; align-items:center; gap:16px; }.memberships-page-heading-icon { display:grid; width:58px; height:58px; flex:0 0 58px; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:rgba(255,255,255,.11); color:#f9a8d4; font-size:25px; backdrop-filter:blur(8px); }
.memberships-page-eyebrow,.memberships-card-eyebrow { display:block; margin-bottom:4px; color:#f9a8d4; font-size:10px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }.memberships-page-header h1 { margin:0; color:#fff; font-size:clamp(27px,3vw,39px); font-weight:900; letter-spacing:-.035em; }.memberships-hero-main > p { max-width:720px; margin:15px 0 22px; color:rgba(255,255,255,.7); font-size:14px; }
.memberships-card-filter { display:flex; width:min(470px,100%); align-items:center; gap:10px; padding:8px 9px 8px 14px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:rgba(255,255,255,.09); backdrop-filter:blur(10px); }.memberships-card-filter label { flex:0 0 auto; color:rgba(255,255,255,.75); font-size:11px; font-weight:800; }.memberships-card-filter .form-select { min-height:38px; border:0; background-color:#fff; font-size:12px; font-weight:700; box-shadow:none; }.memberships-no-programs { color:#fff; font-weight:700; }
.memberships-hero-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-self:stretch; }.memberships-hero-stats > div { display:flex; min-width:0; min-height:102px; flex-direction:column; justify-content:center; padding:16px; border:1px solid rgba(255,255,255,.14); border-radius:17px; background:rgba(15,23,42,.22); backdrop-filter:blur(10px); }.memberships-hero-stats span { display:flex; align-items:center; gap:7px; color:rgba(255,255,255,.68); font-size:11px; font-weight:700; }.memberships-hero-stats span i { color:#f9a8d4; }.memberships-hero-stats strong { margin-top:4px; color:#fff; font-size:29px; line-height:1; }
.memberships-qr-notice { display:flex; align-items:flex-start; gap:14px; padding:17px 19px; border:1px solid #fbcfe8; border-radius:18px; background:linear-gradient(115deg,#fff 0%,#fff7fb 100%); box-shadow:0 8px 24px rgba(15,23,42,.035); }.memberships-qr-notice > span { display:grid; width:43px; height:43px; flex:0 0 43px; place-items:center; border-radius:13px; background:#fce7f3; color:#be185d; font-size:19px; }.memberships-qr-notice strong { display:block; margin-bottom:2px; color:var(--ink); }.memberships-qr-notice p { margin:0; color:var(--muted); font-size:12px; }
.memberships-card { overflow:hidden; padding:0; border-radius:23px; box-shadow:0 12px 34px rgba(15,23,42,.055); }.memberships-card-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 24px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,#fff,#fbfcfe); }.memberships-card-header h2 { margin:0; color:var(--ink); font-size:20px; font-weight:850; }.memberships-card-header p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.memberships-result-count,.customer-panel-count { display:grid; min-width:48px; height:36px; padding:0 11px; place-items:center; border-radius:11px; background:#f1f5f9; color:#334155; font-size:12px; font-weight:800; white-space:nowrap; }.memberships-card .smart-table-tools { padding:15px 22px; border-bottom:1px solid #eef2f7; }.memberships-card .table-responsive { padding:0 12px 12px; }.memberships-table { margin:0; }.memberships-table tbody tr { transition:background .16s ease; }.memberships-table tbody tr:hover { background:#fff8fb; }.memberships-table td { padding-block:15px; vertical-align:middle; }
.membership-customer { display:flex; min-width:185px; align-items:center; gap:10px; }.membership-customer > span:first-child { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:12px; background:linear-gradient(135deg,#fce7f3,#ede9fe); color:#9d174d; font-weight:900; }.membership-customer > span:last-child { min-width:0; }.membership-customer strong,.membership-customer small { display:block; }.membership-customer strong { color:var(--ink); font-weight:800; }.membership-customer small { margin-top:2px; color:var(--muted); font-size:10px; }.membership-customer:hover strong { color:var(--primary-dark); }
.membership-program-badge { display:inline-flex; max-width:210px; align-items:center; gap:5px; padding:7px 9px; overflow:hidden; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; color:#334155; font-size:11px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.membership-wallet-actions { display:flex; flex-wrap:wrap; gap:6px; }.membership-wallet-actions .btn { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:5px 9px; font-size:10.5px; font-weight:800; }.membership-wallet-actions .wallet-provider-icon { width:18px; height:18px; flex-basis:18px; }.memberships-table .badge-status { display:inline-flex; align-items:center; gap:6px; }.memberships-table .badge-status i { font-size:6px; }.membership-status-action { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.memberships-empty-state { display:flex; min-height:390px; flex-direction:column; align-items:center; justify-content:center; padding:55px 24px; text-align:center; }.memberships-empty-state > span { display:grid; width:74px; height:74px; margin-bottom:15px; place-items:center; border-radius:23px; background:var(--primary-light); color:var(--primary-dark); font-size:31px; }.memberships-empty-state small { color:var(--primary-dark); font-size:10px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }.memberships-empty-state h3 { margin:7px 0; color:var(--ink); font-size:22px; }.memberships-empty-state p { max-width:560px; margin:0 0 18px; color:var(--muted); }
.memberships-modal .modal-content,.customer-modal .modal-content { overflow:hidden; border:0; border-radius:23px; box-shadow:0 24px 70px rgba(15,23,42,.2); }.memberships-modal .modal-header,.memberships-modal .modal-footer,.customer-modal .modal-header,.customer-modal .modal-footer { padding:17px 21px; }

/* Customer CRM profile */
.customer-page-header { position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(350px,.8fr); gap:28px; overflow:hidden; padding:clamp(25px,4vw,42px); border-radius:28px; background:radial-gradient(circle at 86% 8%,rgba(236,72,153,.32),transparent 30%),linear-gradient(132deg,#0f172a 0%,#211d34 60%,#3a1d31 100%); color:#fff; box-shadow:0 22px 54px rgba(15,23,42,.16); }.customer-page-header::after { content:""; position:absolute; width:220px; height:220px; inset-inline-end:-100px; bottom:-145px; border:38px solid rgba(255,255,255,.055); border-radius:50%; pointer-events:none; }.customer-hero-main,.customer-hero-stats { position:relative; z-index:1; min-width:0; }
.customer-identity { display:flex; align-items:center; gap:17px; min-width:0; }.customer-avatar-xl { display:grid; width:76px; height:76px; flex:0 0 76px; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:23px; background:linear-gradient(135deg,#ec4899,#8b5cf6); color:#fff; font-size:25px; font-weight:900; box-shadow:0 15px 34px rgba(236,72,153,.24); }.customer-identity-copy { min-width:0; }.customer-page-eyebrow,.customer-panel-eyebrow { display:block; margin-bottom:4px; color:#f9a8d4; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.customer-page-header h1 { overflow:hidden; margin:0; color:#fff; font-size:clamp(28px,3vw,39px); font-weight:900; letter-spacing:-.035em; text-overflow:ellipsis; white-space:nowrap; }
.customer-contact-meta { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:7px; color:rgba(255,255,255,.68); font-size:12px; }.customer-contact-meta span { display:inline-flex; align-items:center; gap:6px; }.customer-contact-meta i { color:#f9a8d4; }.customer-hero-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); }.customer-hero-actions .btn { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:8px 13px; border-radius:11px; font-size:12px; font-weight:800; }.customer-hero-back { border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.09); color:#fff; }.customer-hero-back:hover { border-color:#fff; background:#fff; color:#111827; }.customer-hero-notify { border:1px solid #fff; background:#fff; color:#9d174d; }.customer-hero-notify:hover { background:#fce7f3; color:#831843; }
.customer-hero-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-self:stretch; }.customer-hero-stats > div { display:flex; min-width:0; min-height:102px; flex-direction:column; justify-content:center; padding:16px; border:1px solid rgba(255,255,255,.14); border-radius:17px; background:rgba(15,23,42,.22); backdrop-filter:blur(10px); }.customer-hero-stats > div:last-child { grid-column:1 / -1; min-height:84px; }.customer-hero-stats span { display:flex; align-items:center; gap:7px; color:rgba(255,255,255,.68); font-size:11px; font-weight:700; }.customer-hero-stats span i { color:#f9a8d4; }.customer-hero-stats strong { margin-top:4px; color:#fff; font-size:27px; line-height:1.1; }
.customer-panel { padding:23px; border-radius:23px; box-shadow:0 12px 34px rgba(15,23,42,.05); }.customer-panel-header,.customer-activity-header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; }.customer-panel-header .panel-title,.customer-activity-header .panel-title { margin:0; color:var(--ink); font-size:18px; font-weight:850; }
.customer-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.customer-detail-item { display:flex; min-width:0; align-items:center; gap:10px; padding:13px; border:1px solid #e8edf3; border-radius:14px; background:#fbfcfe; }.customer-detail-item > span { display:grid; width:35px; height:35px; flex:0 0 35px; place-items:center; border-radius:11px; background:#fce7f3; color:#be185d; }.customer-detail-item > div { min-width:0; }.customer-detail-item small,.customer-detail-item strong { display:block; min-width:0; }.customer-detail-item small { margin-bottom:2px; color:var(--muted); font-size:10px; font-weight:700; }.customer-detail-item strong { overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.customer-balance-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }.customer-balance-card { display:flex; align-items:center; gap:11px; padding:14px; border:1px solid; border-radius:15px; }.customer-balance-card > span { display:grid; width:39px; height:39px; flex:0 0 39px; place-items:center; border-radius:12px; font-size:18px; }.customer-balance-card small,.customer-balance-card strong { display:block; }.customer-balance-card small { color:var(--muted); font-size:10px; font-weight:700; }.customer-balance-card strong { color:var(--ink); font-size:23px; line-height:1.1; }.customer-balance-card.stamps { border-color:#fbcfe8; background:#fff7fb; }.customer-balance-card.stamps > span { background:#fce7f3; color:#be185d; }.customer-balance-card.points { border-color:#ddd6fe; background:#faf8ff; }.customer-balance-card.points > span { background:#ede9fe; color:#6d28d9; }
.customer-notes-card { display:flex; align-items:flex-start; gap:11px; margin-top:12px; padding:14px; border:1px solid #fde68a; border-radius:15px; background:#fffbeb; }.customer-notes-card > span { display:grid; width:35px; height:35px; flex:0 0 35px; place-items:center; border-radius:11px; background:#fef3c7; color:#a16207; }.customer-notes-card strong { display:block; color:#713f12; font-size:11px; }.customer-notes-card p { margin:3px 0 0; color:#854d0e; font-size:11px; }
.customer-pass-list { display:grid; gap:11px; }.customer-pass-card { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; overflow:hidden; padding:16px 17px 16px 20px; border:1px solid color-mix(in srgb,var(--pass-color) 38%,#e2e8f0); border-radius:17px; background:linear-gradient(105deg,color-mix(in srgb,var(--pass-color) 7%,#fff),#fff 55%); transition:transform .18s ease,box-shadow .18s ease; }.customer-pass-card::before { content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:var(--pass-color); }.customer-pass-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,23,42,.075); }.customer-pass-copy { min-width:0; }.customer-pass-type { display:inline-flex; align-items:center; gap:4px; padding:5px 8px; border:1px solid #e2e8f0; border-radius:100px; background:#fff; color:#475569; font-size:9px; font-weight:850; }.customer-pass-card h3 { overflow:hidden; margin:7px 0 1px; color:var(--ink); font-size:17px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }.customer-pass-reference { overflow:hidden; max-width:310px; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.customer-pass-balance { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:8px; }.customer-pass-balance strong { padding:5px 8px; border-radius:8px; background:var(--pass-color); color:#fff; font-size:10px; }.customer-pass-balance span { color:var(--muted); font-size:10px; }.customer-pass-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:6px; }.customer-pass-actions .btn { display:inline-flex; align-items:center; gap:6px; min-height:35px; padding:6px 9px; font-size:10px; font-weight:800; }.customer-pass-actions .wallet-provider-icon { width:18px; height:18px; flex-basis:18px; }
.customer-section-empty { display:flex; min-height:260px; flex-direction:column; align-items:center; justify-content:center; padding:35px 20px; text-align:center; }.customer-section-empty > span { display:grid; width:62px; height:62px; margin-bottom:13px; place-items:center; border-radius:19px; background:var(--primary-light); color:var(--primary-dark); font-size:25px; }.customer-section-empty h3 { margin:0 0 5px; color:var(--ink); font-size:18px; }.customer-section-empty p { max-width:500px; margin:0; color:var(--muted); font-size:12px; }
.customer-activity-panel { margin-bottom:0; }.customer-activity-header p { margin:4px 0 0; color:var(--muted); font-size:12px; }.customer-timeline { position:relative; padding-inline-start:38px; }.customer-timeline::before { content:""; position:absolute; inset-block:9px; inset-inline-start:13px; width:2px; border-radius:3px; background:#e2e8f0; }.customer-timeline-list { display:grid; gap:11px; }.customer-timeline-item { position:relative; padding:15px 16px; border:1px solid #e8edf3; border-radius:16px; background:#fbfcfe; transition:border-color .16s ease,box-shadow .16s ease; }.customer-timeline-item:hover { border-color:#cbd5e1; box-shadow:0 8px 22px rgba(15,23,42,.045); }.customer-timeline-dot { position:absolute; display:grid; width:28px; height:28px; inset-inline-start:-39px; top:16px; place-items:center; border:4px solid #fff; border-radius:50%; color:#fff; font-size:10px; box-shadow:0 0 0 2px #e2e8f0; }.customer-timeline-item.is-earned .customer-timeline-dot { background:#4f46e5; }.customer-timeline-item.is-reward .customer-timeline-dot { background:#059669; }
.customer-timeline-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }.customer-timeline-labels { display:flex; flex-wrap:wrap; gap:5px; }.customer-timeline-labels .badge { margin:0 !important; }.customer-timeline-time { color:var(--muted); font-size:10px; white-space:nowrap; }.customer-timeline-details { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:10px; color:#334155; font-size:11px; font-weight:750; }.customer-timeline-note { color:var(--muted); font-weight:500; }

@media (max-width:991.98px) { .memberships-page-header,.customer-page-header { grid-template-columns:1fr; }.memberships-hero-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }.memberships-hero-stats > div { min-height:88px; }.customer-hero-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }.customer-hero-stats > div:last-child { grid-column:auto; min-height:102px; } }
@media (max-width:767.98px) { .memberships-page,.customer-page { gap:17px; }.memberships-page-header,.customer-page-header { gap:20px; padding:22px; border-radius:20px; }.memberships-page-heading { align-items:flex-start; gap:13px; }.memberships-page-heading-icon { width:46px; height:46px; flex-basis:46px; border-radius:14px; font-size:20px; }.memberships-page-header h1,.customer-page-header h1 { font-size:25px; }.memberships-card-filter { align-items:stretch; flex-direction:column; padding:10px; }.memberships-hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.memberships-hero-stats > div { min-height:80px; padding:12px; }.memberships-hero-stats strong { font-size:23px; }.memberships-qr-notice { padding:14px; }.memberships-card { border-radius:19px; }.memberships-card-header { align-items:flex-start; padding:18px; }.memberships-card .smart-table-tools { padding:13px 16px; }.memberships-card .table-responsive { padding:0 6px 8px; }.memberships-modal .modal-dialog,.customer-modal .modal-dialog { width:calc(100% - 20px); margin:10px auto; }.memberships-modal .modal-body,.customer-modal .modal-body { padding:20px !important; }.customer-identity { align-items:flex-start; }.customer-avatar-xl { width:62px; height:62px; flex-basis:62px; border-radius:19px; font-size:21px; }.customer-contact-meta { align-items:flex-start; flex-direction:column; }.customer-hero-actions .btn { flex:1 1 150px; justify-content:center; }.customer-hero-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }.customer-hero-stats > div,.customer-hero-stats > div:last-child { min-height:83px; padding:12px; }.customer-hero-stats strong { font-size:22px; }.customer-panel { padding:18px; border-radius:19px; }.customer-pass-card { align-items:stretch; flex-direction:column; }.customer-pass-actions .btn { flex:1; justify-content:center; }.customer-activity-header { align-items:flex-start; }.customer-timeline-topline { align-items:flex-start; flex-direction:column; } }
@media (max-width:479.98px) { .memberships-page-heading-icon { display:none; }.memberships-hero-stats,.customer-hero-stats { grid-template-columns:1fr 1fr; }.customer-hero-stats > div:last-child { grid-column:1 / -1; }.memberships-qr-notice > span { display:none; }.memberships-card-header { flex-direction:column; }.customer-avatar-xl { width:54px; height:54px; flex-basis:54px; border-radius:16px; font-size:18px; }.customer-detail-grid,.customer-balance-grid { grid-template-columns:1fr; }.customer-panel-header { align-items:flex-start; }.customer-panel-header .customer-edit-button { width:40px; overflow:hidden; padding-inline:0; white-space:nowrap; }.customer-panel-header .customer-edit-button i { width:38px; margin:0 !important; }.customer-pass-actions { flex-direction:column; }.customer-timeline { padding-inline-start:32px; }.customer-timeline-dot { inset-inline-start:-34px; } }