/* BeLoyal admin – design tokens ported from the New-bloyal design system */
:root {
  /* Values converted from the HSL tokens in BLOYAL web/src/index.css */
  --bl-bg: #ffffff;               /* --background / --card */
  --bl-surface: #f9f9fb;          /* --surface, --sidebar-background */
  --bl-muted-bg: #f3f4f6;         /* --muted */
  --bl-border: #e7e9ee;           /* --border */
  --bl-text: #000000;             /* --foreground */
  --bl-text-soft: #363c49;        /* --card-foreground */
  --bl-muted: #737b8c;            /* --muted-foreground */
  --bl-primary: #000000;
  --bl-primary-fg: #ffffff;
  --bl-accent: #e6def7;           /* --accent / --pastel-purple */
  --bl-accent-fg: #4e367d;
  --bl-ring: #a78dd9;
  --bl-success: #2eb88a;
  --bl-warning: #f49e25;
  --bl-danger: #dc2828;
  --bl-info: #3b82f6;
  --bl-pastel-pink: #f9dce1;
  --bl-pastel-yellow: #fbf3da;
  --bl-pastel-green: #d9f2ea;
  --bl-pastel-blue: #dee6f7;
  --bl-radius: 12px;              /* --radius: .75rem */
  --bl-radius-sm: 10px;           /* rounded-md */
  --bl-shadow: 0 1px 2px rgba(0, 0, 0, .05);                     /* shadow-sm */
  --bl-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.06);
  --bl-sidebar-w: 240px;          /* w-60 */
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--bl-text);
  background: var(--bl-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; }
.text-muted, .bl-muted { color: var(--bl-muted) !important; }

/* ---------- App shell ---------- */
.bl-shell { display: flex; min-height: 100vh; }
.bl-sidebar {
  width: var(--bl-sidebar-w);
  flex: 0 0 var(--bl-sidebar-w);
  background: var(--bl-surface);
  border-inline-end: 1px solid rgba(231, 233, 238, .6);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.bl-sidebar__brand { display: flex; align-items: center; height: 64px; padding: 0 20px; border-bottom: 1px solid rgba(231, 233, 238, .4); }
.bl-sidebar__brand img { height: 28px; width: auto; }
.bl-sidebar__biz { padding: 14px 20px; font-size: 12px; color: var(--bl-muted); border-bottom: 1px solid rgba(231, 233, 238, .4); }
.bl-sidebar__biz strong { display: block; color: var(--bl-text); font-size: 14px; font-weight: 600; margin-top: 2px; }
.bl-nav { padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.bl-nav__heading { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(115, 123, 140, .6); padding: 16px 12px 8px; }
.bl-nav__heading:first-child { padding-top: 0; }
.bl-nav__link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--bl-muted); font-size: 14px; font-weight: 500;
  border: 0; background: transparent; width: 100%; text-align: start;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.bl-nav__link svg { width: 20px; height: 20px; stroke-width: 1.5; flex-shrink: 0; }
.bl-nav__link:hover { background: rgba(255, 255, 255, .6); color: var(--bl-text); }
.bl-nav__link.active { background: var(--bl-bg); color: var(--bl-text); font-weight: 600; box-shadow: var(--bl-shadow); }
.bl-nav__link.active svg { stroke-width: 2; }
.bl-sidebar__footer { padding: 12px; border-top: 1px solid rgba(231, 233, 238, .4); }

.bl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bl-topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 32px; background: var(--bl-bg); border-bottom: 1px solid var(--bl-border);
  position: sticky; top: 0; z-index: 20;
}
.bl-topbar__title { font-size: 15px; font-weight: 600; margin: 0; }
.bl-avatar {
  width: 36px; height: 36px; border: 1px solid var(--bl-border); border-radius: 50%;
  background: var(--bl-primary); color: var(--bl-primary-fg);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px;
}
.bl-content { padding: 32px; max-width: 1400px; width: 100%; }

.bl-topbar .bl-burger { display: none; width: 40px; padding: 0; }
@media (max-width: 991.98px) {
  .bl-sidebar { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
  .bl-sidebar.open { transform: none; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
  .bl-topbar .bl-burger { display: inline-flex; }
  .bl-content { padding: 16px; }
  .bl-topbar { padding: 0 16px; }
}

/* ---------- Page header ---------- */
.bl-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.bl-page-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 4px; }
.bl-page-head p { margin: 0; color: var(--bl-muted); font-size: 14px; }
.bl-page-head__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Cards ---------- */
.bl-card {
  background: var(--bl-bg); border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius); box-shadow: var(--bl-shadow);
}
.bl-card__body { padding: 24px; }
.bl-card__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.bl-card__sub { font-size: 13px; color: var(--bl-muted); margin: 2px 0 0; }
.bl-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

/* KPI: the StatCard from BLOYAL AdminOverview (icon tile + label on one line, big number underneath) */
.bl-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.bl-kpi { padding: 24px; display: flex; flex-direction: column; gap: 6px; transition: box-shadow .3s, transform .3s; }
.bl-kpi:hover { box-shadow: var(--bl-shadow-lg); transform: translateY(-4px); }
.bl-kpi__top { display: flex; align-items: center; gap: 8px; }
.bl-kpi__icon {
  padding: 6px; border-radius: 8px; background: rgba(243, 244, 246, .5);
  color: rgba(0, 0, 0, .7); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.bl-kpi__icon svg { width: 16px; height: 16px; }
.bl-kpi__label { font-size: 12px; font-weight: 500; color: var(--bl-muted); margin: 0; line-height: 1.3; order: 2; }
.bl-kpi__value { font-size: 30px; font-weight: 700; line-height: 1.2; margin: 0; font-variant-numeric: tabular-nums; }
.bl-kpi__value small { font-size: 12px; font-weight: 500; color: var(--bl-muted); }
@media (max-width: 575.98px) {
  .bl-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bl-kpi { padding: 16px; }
  .bl-kpi__value { font-size: 24px; }
}

/* Charts grid */
.bl-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }
.bl-col-12 { grid-column: span 12; }
.bl-col-8 { grid-column: span 8; }
.bl-col-6 { grid-column: span 6; }
.bl-col-4 { grid-column: span 4; }
@media (max-width: 1199.98px) { .bl-col-8, .bl-col-4 { grid-column: span 6; } }
@media (max-width: 767.98px) { .bl-col-8, .bl-col-6, .bl-col-4 { grid-column: span 12; } }
.bl-chart { position: relative; height: 260px; }
.bl-chart--sm { height: 220px; }
.bl-chart canvas { width: 100% !important; height: 100% !important; }
.bl-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--bl-muted); font-size: 13px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 100%);
  border-radius: var(--bl-radius-sm); pointer-events: none;
}
.bl-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-size: 13px; }
.bl-legend__row { display: flex; align-items: center; gap: 8px; }
.bl-legend__dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.bl-legend__row span:nth-child(2) { flex: 1; color: var(--bl-muted); }
.bl-legend__row strong { font-weight: 600; }

/* ---------- Controls ---------- */
.btn-bl-primary, .btn-bl-secondary {
  height: 40px; padding: 0 16px; border-radius: var(--bl-radius-sm); font-weight: 500; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transition: background-color .15s, color .15s;
}
.btn-bl-primary { background: var(--bl-primary); color: var(--bl-primary-fg); border: 1px solid var(--bl-primary); }
.btn-bl-primary:hover { background: rgba(0, 0, 0, .9); color: #fff; }
.btn-bl-secondary { background: var(--bl-bg); color: var(--bl-text); border: 1px solid var(--bl-border); }
.btn-bl-secondary:hover { background: var(--bl-accent); color: var(--bl-accent-fg); }
.btn-bl-primary:focus-visible, .btn-bl-secondary:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bl-ring); }
.btn-bl-primary:disabled, .btn-bl-secondary:disabled { opacity: .5; pointer-events: none; }
.btn-bl-primary svg, .btn-bl-secondary svg { width: 16px; height: 16px; flex-shrink: 0; }
.form-select.bl-select, .form-control.bl-input {
  height: 40px; border-radius: var(--bl-radius-sm); border: 1px solid var(--bl-border); font-size: 14px; padding: 8px 12px; background-color: var(--bl-bg);
}
.form-select.bl-select { padding-inline-end: 36px; }
.form-select.bl-select:focus, .form-control.bl-input:focus { border-color: var(--bl-ring); box-shadow: 0 0 0 3px rgba(167, 141, 217, .25); }
.bl-search { position: relative; }
.bl-search svg { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--bl-muted); }
.bl-search .form-control { padding-inline-start: 34px; }

/* ---------- Table ---------- */
.bl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.bl-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--bl-muted); font-weight: 500; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--bl-border); background: transparent; white-space: nowrap; vertical-align: middle; }
.bl-table td { padding: 12px 16px; border-bottom: 1px solid var(--bl-border); vertical-align: middle; white-space: nowrap; }
.bl-table tr:last-child td { border-bottom: 0; }
.bl-table tbody tr:hover td { background: rgba(243, 244, 246, .5); }
.bl-table-wrap { overflow-x: auto; }
.bl-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bl-accent); color: var(--bl-accent-fg); }
.bl-pill--bronze { background: #f3e3d3; color: #7a4a1a; }
.bl-pill--silver { background: #e8e8ec; color: #4b4b55; }
.bl-pill--gold { background: #fdeed3; color: #9a5b00; }
.bl-pill--platinum { background: #dbeafe; color: #1d4ed8; }
.bl-progress { height: 6px; background: var(--bl-border); border-radius: 999px; overflow: hidden; width: 90px; display: inline-block; vertical-align: middle; margin-inline-end: 8px; }
.bl-progress span { display: block; height: 100%; background: var(--bl-primary); }
.bl-pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--bl-border); font-size: 13px; color: var(--bl-muted); }
.bl-pagination .pagination { margin: 0; }
.bl-pagination .page-link { border-radius: 8px !important; margin-inline-start: 4px; border-color: var(--bl-border); color: var(--bl-text); font-size: 13px; }
.bl-pagination .page-item.active .page-link { background: var(--bl-primary); border-color: var(--bl-primary); color: #fff; }

/* ---------- Auth ---------- */
.bl-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.bl-auth__panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bl-bg); }
.bl-auth__card { width: 100%; max-width: 380px; }
.bl-auth__card img { height: 34px; margin-bottom: 28px; }
.bl-auth__card h1 { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.bl-auth__card p { color: var(--bl-muted); font-size: 14px; margin: 0 0 24px; }
.bl-auth__label { font-size: 13px; font-weight: 500; margin-bottom: 6px; display: block; }
.bl-auth__side { background: #000; color: #fff; display: flex; align-items: center; justify-content: center; padding: 48px; }
.bl-auth__side h2 { font-size: 30px; font-weight: 700; max-width: 420px; line-height: 1.2; }
.bl-auth__side p { color: rgba(255,255,255,.7); max-width: 420px; }
.bl-alert { border-radius: var(--bl-radius-sm); padding: 10px 12px; font-size: 13px; background: #fdecec; color: #8a1f1f; border: 1px solid #f5c2c2; margin-bottom: 16px; }
@media (max-width: 899.98px) { .bl-auth { grid-template-columns: 1fr; } .bl-auth__side { display: none; } }

/* ---------- Modal tweak ---------- */
.modal-content { border-radius: var(--bl-radius); border: 1px solid var(--bl-border); }

/* ---------- Customers toolbar ---------- */
.bl-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--bl-border); }
.bl-toolbar .bl-search { flex: 1 1 240px; }
.bl-toolbar .bl-search .form-control { width: 100%; }
.bl-toolbar .bl-select { width: auto; min-width: 180px; }

/* ---------- Registration / QR poster ---------- */
.bl-qr-card { display: flex; gap: 18px; align-items: center; }
.bl-qr-card img { width: 112px; height: 112px; border-radius: 8px; border: 1px solid var(--bl-border); padding: 6px; background: #fff; flex: 0 0 112px; }
.bl-qr-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 575.98px) { .bl-qr-card { flex-direction: column; align-items: flex-start; } }
.bl-copy { display: flex; gap: 8px; }
.bl-copy .form-control { min-width: 0; font-size: 13px; color: var(--bl-muted); }

.bl-poster-layout { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 991.98px) { .bl-poster-layout { grid-template-columns: 1fr; } }
.bl-poster-stage { width: 100%; max-width: 480px; overflow: hidden; }
.bl-poster-scale { transform-origin: top left; width: 480px; }
.bl-poster {
  width: 480px; height: 679px; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(15,23,42,.12); display: flex; flex-direction: column;
  font-family: "Geist", "Inter", system-ui, sans-serif; color: #0f172a;
}
.bl-poster__band { background: var(--p-bg); color: var(--p-fg); padding: 28px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bl-poster__logo { max-height: 72px; max-width: 220px; object-fit: contain; }
.bl-poster__logo + .bl-poster__name { display: none; } /* the logo usually is the name; shown again if the logo fails to load */
.bl-poster__name { font-size: 22px; font-weight: 700; text-align: center; letter-spacing: -0.01em; }
.bl-poster__body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 24px 28px 10px; text-align: center; }
.bl-poster__headline { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.bl-poster__headline--ar { font-size: 22px; margin-top: 4px; color: #334155; font-family: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; letter-spacing: 0; }
.bl-poster__qr { margin: 20px 0 18px; padding: 12px; border: 2px solid #0f172a; border-radius: 16px; }
.bl-poster__qr img { width: 200px; height: 200px; display: block; }
.bl-poster__steps { list-style: none; padding: 0; margin: 0; display: flex; gap: 14px; font-size: 13px; font-weight: 500; color: #334155; }
.bl-poster__steps li { display: flex; align-items: center; gap: 6px; }
.bl-poster__steps span { width: 20px; height: 20px; border-radius: 50%; background: #0f172a; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.bl-poster__wallets { margin-top: 16px; display: flex; gap: 10px; align-items: center; justify-content: center; }
.bl-poster__wallets img { height: 34px; width: auto; }
.bl-poster__foot { background: var(--p-bg); color: var(--p-fg); padding: 10px 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; letter-spacing: .02em; }
.bl-poster__foot span { opacity: .75; }
.bl-poster__foot img { height: 13px; width: auto; display: block; }
.bl-poster-sizes { display: flex; gap: 8px; }
.bl-poster-sizes .bl-chip { cursor: pointer; }

@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .bl-sidebar, .bl-topbar, .bl-page-head, .bl-poster-side { display: none !important; }
  .bl-content { padding: 0; }
  .bl-poster-layout { display: block; }
  .bl-poster-stage { max-width: none; height: auto !important; overflow: visible; }
  .bl-poster-scale { transform: scale(var(--print-scale, 1.65)) !important; margin: 0 auto; }
  .bl-poster { box-shadow: none; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Transactions ---------- */
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--bl-border); background: var(--bl-bg); font-size: 13px; font-weight: 500; color: var(--bl-text); }
.bl-chip svg { width: 14px; height: 14px; color: var(--bl-muted); }
.bl-chip span { font-size: 12px; color: var(--bl-muted); font-variant-numeric: tabular-nums; }
.bl-chip:hover { background: var(--bl-surface); }
.bl-chip.active { background: var(--bl-primary); border-color: var(--bl-primary); color: #fff; }
.bl-chip.active svg, .bl-chip.active span { color: rgba(255,255,255,.75); }
.bl-tx { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bl-surface); color: var(--bl-text); }
.bl-tx svg { width: 14px; height: 14px; }
.bl-tx--joined { background: #f4f0fc; color: var(--bl-accent-fg); }
.bl-tx--stamp { background: #e6f6ef; color: #157a5a; }
.bl-tx--reward { background: #fdf1dc; color: #8a5300; }
.bl-tx--expired { background: #fdecec; color: #a12020; }

/* ---------- Admin: business list ---------- */
.bl-biz { display: inline-flex; align-items: center; gap: 10px; }
.bl-biz__logo { width: 64px; height: 32px; border-radius: 8px; flex: 0 0 64px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; border: 1px solid var(--bl-border); }
.bl-biz__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bl-biz__ph { width: 64px; height: 32px; border-radius: 8px; border: 1px solid var(--bl-border); flex: 0 0 64px; }
.bl-biz__ph { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--bl-muted); background: var(--bl-surface); }
.bl-biz:hover strong { text-decoration: underline; }
.bl-icon-btn { width: 40px; padding: 0; }
.bl-menu { border-radius: var(--bl-radius-sm); border: 1px solid var(--bl-border); box-shadow: 0 10px 30px rgba(15,23,42,.12); padding: 6px; font-size: 14px; }
.bl-menu .dropdown-item { display: flex; align-items: center; gap: 8px; border-radius: 6px; padding: 7px 10px; }
.bl-menu .dropdown-item svg { width: 16px; height: 16px; color: var(--bl-muted); }
.bl-menu .dropdown-item:active { background: var(--bl-primary); color: #fff; }
.bl-card__head .btn-bl-secondary svg { width: 14px; height: 14px; }

/* ---------- Card settings / new business form (Views/Business/CreateEdit) ---------- */
.bl-form-wrap { max-width: 1280px; }
/* Card settings: form on the left, live wallet card preview (_CardPreview, from main) on the right. */
.bl-form-grid { display: grid; grid-template-columns: minmax(0, 880px) minmax(300px, 1fr); gap: 24px; align-items: start; }
.bl-form-side { position: sticky; top: 80px; }
.bl-form-side .cp-wrap { margin-top: 0 !important; }
@media (max-width: 1199.98px) { .bl-form-grid { grid-template-columns: 1fr; } .bl-form-side { position: static; } }
.bl-form .bl-card__body { padding: 28px; }
.bl-form .row { --bs-gutter-x: 16px; --bs-gutter-y: 12px; }
.bl-form .form-control, .bl-form .form-select, .bl-form select.form-control {
  border: 1px solid var(--bl-border); border-radius: var(--bl-radius-sm); font-size: 15px; color: var(--bl-text); background-color: var(--bl-bg);
  box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.bl-form .form-control:focus, .bl-form select.form-control:focus {
  border-color: var(--bl-ring); box-shadow: 0 0 0 3px rgba(167, 141, 217, .25);
}
.bl-form .form-floating > .form-control, .bl-form .form-floating > select.form-control { height: 58px; padding: 26px 14px 8px; }
.bl-form .form-floating > label {
  padding: 12px 14px 0; height: auto; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--bl-muted);
  transform: none !important; opacity: 1 !important;
}
.bl-form .form-group > label, .bl-form .form-label {
  display: block; font-size: 13px; font-weight: 600; color: var(--bl-text); margin-bottom: 6px;
}
.bl-form input[type="file"].form-control { padding: 8px 10px; font-size: 14px; }
.bl-form input[type="file"].form-control::file-selector-button {
  border: 1px solid var(--bl-border); border-radius: 8px; background: var(--bl-surface); color: var(--bl-text);
  padding: 6px 12px; margin-right: 12px; font-weight: 500;
}
.bl-form .existing-stamps-container { gap: 6px; margin-top: 8px; font-size: 13px; color: var(--bl-muted); }
.bl-form .existing-stamp { border-color: var(--bl-border); background: var(--bl-surface); color: var(--bl-text-soft); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.bl-form .color-picker, .bl-form .color-picker-label { border-color: var(--bl-border); border-radius: 8px; cursor: pointer; }
.bl-form .color-code-display, .bl-form .color-code-display-label { border-color: var(--bl-border); border-radius: var(--bl-radius-sm); font-size: 14px; font-variant-numeric: tabular-nums; }
.bl-form .iti { width: 100%; }
.bl-form .iti input.form-control { height: 58px; }
.bl-form .iti__flag-container { border-left: 0; }
.bl-form .text-danger { font-size: 12px; }
.bl-form__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--bl-border); }
@media (max-width: 575.98px) { .bl-form .bl-card__body { padding: 18px; } .bl-form__actions > * { flex: 1; } }
.bl-form select.form-control {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737b8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}

/* ---------- Send notification ---------- */
.bl-notify { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 991.98px) { .bl-notify { grid-template-columns: 1fr; } }
.bl-notify__main { display: grid; gap: 16px; }
.bl-notify__side { position: sticky; top: 88px; }
.bl-notify .bl-chips { margin-bottom: 14px; }
.bl-notify .bl-chip { cursor: pointer; }
.bl-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bl-muted-bg); flex: 0 0 auto; }
.bl-seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--bl-muted); }
.bl-seg button.active { background: var(--bl-bg); color: var(--bl-text); box-shadow: var(--bl-shadow); }
.bl-tpl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.bl-tpl { text-align: start; border: 1px solid var(--bl-border); background: var(--bl-bg); border-radius: var(--bl-radius-sm); padding: 12px 14px; font-size: 13px; line-height: 1.45; color: var(--bl-text-soft); transition: border-color .15s, background .15s; }
.bl-tpl:hover { border-color: var(--bl-text); background: var(--bl-surface); }
.bl-tpl__ar { font-family: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; font-size: 14px; display: block; }
.bl-notify__text { resize: vertical; min-height: 92px; font-size: 15px; }
.bl-notify__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--bl-muted); font-variant-numeric: tabular-nums; }
.bl-notify__status { font-size: 13px; margin-top: 10px; }
.bl-notify__status:empty { display: none; }
.bl-notify__status.is-ok { color: #157a5a; }
.bl-notify__status.is-err { color: var(--bl-danger); }
.bl-notify__actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.bl-phone { border-radius: 36px; padding: 28px 14px 120px; background: #000; border: 6px solid #1f2329; min-height: 420px; }
.bl-phone__time { color: #fff; text-align: center; font-size: 56px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 24px; }
.bl-phone__note { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,.16); color: #fff; border-radius: 18px; padding: 11px 12px; font-size: 13px; line-height: 1.35; }
.bl-phone__icon { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: 0 0 34px; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.bl-phone__text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.bl-phone__row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 1px; }
.bl-phone__row span { color: rgba(255,255,255,.6); font-size: 12px; }
#previewText.is-empty { color: rgba(255,255,255,.55); }
.bl-confirm-msg { background: var(--bl-surface); border: 1px solid var(--bl-border); border-radius: var(--bl-radius-sm); padding: 12px 14px; font-size: 14px; overflow-wrap: anywhere; }

/* ---------- Sign-up form colours (admin) ---------- */
.bl-formstyle { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
@media (max-width: 1099.98px) { .bl-formstyle { grid-template-columns: 1fr; } }
.bl-formstyle .bl-card__foot { padding: 14px 20px; border-top: 1px solid var(--bl-border); display: flex; justify-content: flex-end; }
.bl-choice { display: grid; gap: 10px; margin-bottom: 18px; }
.bl-choice__opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--bl-border); border-radius: var(--bl-radius-sm); cursor: pointer; }
.bl-choice__opt:has(input:checked) { border-color: var(--bl-text); background: var(--bl-surface); }
.bl-choice__opt input { margin-top: 3px; accent-color: #000; }
.bl-choice__opt strong { display: block; font-size: 14px; }
.bl-choice__opt small { color: var(--bl-muted); font-size: 13px; }
.bl-swatches { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.bl-swatches[disabled] { opacity: .45; }
.bl-swatch { display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px; gap: 12px; align-items: center; }
.bl-swatch input[type=color] { width: 44px; height: 44px; padding: 0; border: 1px solid var(--bl-border); border-radius: 10px; background: none; cursor: pointer; }
.bl-swatch input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; }
.bl-swatch input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.bl-swatch__text label { display: block; font-size: 14px; font-weight: 500; }
.bl-swatch__text small { color: var(--bl-muted); font-size: 12px; }
.bl-swatch__hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; text-transform: lowercase; }
.bl-swatch__hex.is-invalid { border-color: var(--bl-danger); }
.bl-contrast { font-size: 13px; color: #9a5b00; background: #fff6e5; border: 1px solid #f6dfb3; border-radius: var(--bl-radius-sm); padding: 8px 12px; }
.bl-contrast:empty { display: none; }
.bl-flash { display: flex; align-items: center; gap: 8px; font-size: 14px; background: var(--bl-pastel-green); color: #0f5c43; border-radius: var(--bl-radius-sm); padding: 10px 14px; margin-bottom: 16px; }
.bl-flash svg { width: 16px; height: 16px; }
.bl-formstyle__preview { position: sticky; top: 88px; }
.bl-device { width: 100%; max-width: 360px; height: 700px; border-radius: 36px; border: 8px solid #111; overflow: hidden; background: #fff; box-shadow: var(--bl-shadow-lg); }
.bl-device iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Subscription pause (BusinessPause) */
.btn-bl-danger { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--bl-radius-sm); font-size: 14px; font-weight: 500; background: var(--bl-danger); color: #fff; border: 1px solid var(--bl-danger); cursor: pointer; }
.btn-bl-danger svg { width: 16px; height: 16px; }
.bl-pill--paused { background: #fdecec; color: #8a1f1f; }
.bl-pill--active { background: var(--bl-pastel-green); color: #0f5c43; }
.bl-paused { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; background: #fff4e5; color: #7a3e00; border: 1px solid #f6c98b; border-radius: var(--bl-radius-sm); padding: 12px 14px; margin-bottom: 16px; }
.bl-paused svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.bl-paused a { color: inherit; font-weight: 600; }
/* ---------- Arabic (dir="rtl", set by _LayoutApp when the bl_lang cookie is "ar") ---------- */
html[lang="ar"] body { font-family: "IBM Plex Sans Arabic", "Geist", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .bl-page-head h1 { letter-spacing: 0; }
html[lang="ar"] .bl-nav__heading { letter-spacing: 0; text-transform: none; }
.bl-lang { gap: 6px; }
.bl-lang svg { width: 16px; height: 16px; }
[dir="rtl"] .lucide-arrow-right, [dir="rtl"] .lucide-arrow-left { transform: scaleX(-1); }
@media (max-width: 991.98px) {
  [dir="rtl"] .bl-sidebar { left: auto; right: 0; transform: translateX(100%); }
  [dir="rtl"] .bl-sidebar.open { transform: none; }
}
/* The poster is artwork with its own fixed layout (and its own Arabic line), so it never flips. */
[dir="rtl"] .bl-poster-stage { direction: ltr; }
/* Phone numbers, colour codes and links read left to right inside Arabic text. */
[dir="rtl"] .bl-ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .bl-swatch__hex, [dir="rtl"] #regUrl { direction: ltr; text-align: left; }
.bl-auth__lang { display: flex; justify-content: flex-end; margin-bottom: 12px; }