/* ─── Safa Broker Portal — Custom Styles (Bootstrap 5 RTL) ───────────────────
   Brand: #c38a67 (taupe primary) · #6b7175 (slate secondary)
   Base: #F5F2ED (cream bg) · #1F1612 (ink)
   ─────────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: "pingAR";
    src: url("../../fonts/ar/broker-font.TTF") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "pingAR";
    src: url("../../fonts/ar/broker-font.TTF") format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}
:root {
    --safa-primary:   #8a93f7;
    --safa-primary-light:   #dfe0fd;
  --safa-secondary: #6b7175;
  --safa-ink:       linear-gradient(110deg, rgb(20, 18, 58) 0%, rgb(36, 31, 82) 45%, rgb(59, 47, 116) 100%);
  --safa-muted:     linear-gradient(110deg, rgb(20, 18, 58) 0%, rgb(36, 31, 82) 45%, rgb(59, 47, 116) 100%);
  --safa-bg:        #F5F2ED;
  --safa-card:      rgba(255,255,255,0.80);
  --safa-hairline:  #dfe0fd;
  --safa-nav:       #fff;
  --safa-nav-w:     240px;
  --safa-grad:       linear-gradient(120deg, rgb(99, 102, 241) 0%, rgb(124, 108, 245) 45%, rgb(167, 139, 250) 100%);
}

/* ── Base ── */
body {
  font-family: 'pingAR', system-ui, sans-serif;
    background: #f0effd;
    background-size: 23px 23px;
    background-position: -19px -19px;
    color: var(--safa-ink);
    min-height: 100vh;
}

/* ── Sidebar ── */
#sidebar {
  width: var(--safa-nav-w);
  min-height: 100vh;
    background: linear-gradient(190deg, rgb(255, 255, 255) 0%, rgb(251, 250, 255) 40%, rgb(242, 238, 255) 100%);
    border-left: 1px solid rgba(99, 102, 241, 0.1);
    border-right: 1px solid rgba(99, 102, 241, 0.1);
    box-shadow: rgba(79, 70, 229, 0.8) -20px 0px 50px -40px;
  border-inline-start: 0.5px solid var(--safa-hairline);
  position: sticky;
  top: 0;
  flex-shrink: 0;
  transition: width .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sidebar-logo img   { height: 40px; object-fit: contain; }
.sidebar-logo-text  { white-space: nowrap; overflow: hidden; }
.sidebar-logo-text h6 { font-size: 13.5px; font-weight: 800; margin: 0; line-height: 1.2; }
.sidebar-logo-text small { font-size: 10px; color: var(--safa-primary); font-weight: 600; letter-spacing: .05em; }

.sidebar-broker {
  padding: 12px 16px;
  background: #dfe0fd;
  border-bottom: 0.5px solid var(--safa-hairline);
    margin: 8px;
    border-radius: 12px;
}
.broker-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--safa-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0;
}

/* Nav items */
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 12px; border-radius: 10px;
  color: var(--safa-ink); font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden;
  transition: all .15s;
  cursor: pointer;
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
  background: var(--safa-ink);
  color: #ffffff;
}
.sidebar-nav .nav-link .nav-icon { flex-shrink: 0; color: var(--safa-primary); }
.sidebar-nav .nav-link.active .nav-icon { color: var(--safa-primary); }
.sidebar-nav .nav-link .active-bar {
  width: 3px; height: 18px; border-radius: 99px;
  background: var(--safa-primary); margin-inline-start: auto; display: none;
}
.sidebar-nav .nav-link.active .active-bar { display: block; }

/*#sidebar.collapsed .sidebar-broker,*/
/*#sidebar.collapsed .sidebar-logo-text,*/
/*#sidebar.collapsed .nav-label,*/
/*#sidebar.collapsed .nav-arrow,*/
/*#sidebar.collapsed .active-bar,*/
/*#sidebar.collapsed .sidebar-bottom-text,*/
/*#sidebar.collapsed .btn-cta-label { display: none !important; }#sidebar.collapsed .sidebar-broker,*/
/*#sidebar.collapsed .sidebar-logo-text,*/
/*#sidebar.collapsed .nav-label,*/
/*#sidebar.collapsed .nav-arrow,*/
/*#sidebar.collapsed .active-bar,*/
/*#sidebar.collapsed .sidebar-bottom-text,*/
/*#sidebar.collapsed .btn-cta-label { display: none !important; }*/
#sidebar.collapsed .nav-link { padding: 10px; }
#sidebar.collapsed .sidebar-logo { justify-content: center !important; padding: 18px 10px !important; }

.collapse-toggle {
  position: absolute; top: 18px; inset-inline-start: 12px;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(138,147,247,.15); border: 0.5px solid rgba(138,147,247,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--safa-primary); cursor: pointer; z-index: 10;
  transition: all .25s;
}
#sidebar.collapsed .collapse-toggle { inset-inline-start: 50%; transform: translateX(-50%); }
.collapse-toggle svg { transition: transform .25s; }
#sidebar.collapsed .collapse-toggle svg { transform: rotate(180deg); }

/* CTA button */
.btn-safa-primary {
  background: var(--safa-grad);
  border: none; color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px rgba(138,147,247,.35);
  border-radius: 90px;
  font-family: 'pingAR', sans-serif;
  transition: all .15s;
}
.btn-safa-primary:hover { box-shadow: 0 6px 20px rgba(138,147,247,.5); color: #fff; }
.btn-safa-secondary {
  background: rgba(138,147,247,.08); border: 0.5px solid rgba(138,147,247,.35);
  color: var(--safa-primary) !important; font-weight: 600; border-radius: 90px;
  font-family: 'pingAR', sans-serif;
  transition: all .15s;
}
.btn-safa-secondary:hover { background: var(--safa-muted); color: var(--safa-primary); }
.btn-safa-ghost {
  background: rgba(255,255,255,.5); border: 0.5px solid var(--safa-hairline);
  color: var(--safa-ink); font-weight: 600; border-radius: 10px;
  font-family: 'pingAR', sans-serif;
  backdrop-filter: blur(10px);
    transition: all 0.5s;
}
.btn-safa-ghost:hover { background: var(--safa-primary); }
.btn-safa-win {
  background: linear-gradient(135deg,#6ba26a,#5b8a5a); border: none;
  color: #fff; font-weight: 700; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(91,138,90,.3);
  font-family: 'pingAR', sans-serif;
}
.btn-safa-whatsapp {
  background: #25D366; border: none; color: #fff; font-weight: 700;
  border-radius: 10px; box-shadow: 0 4px 14px rgba(37,211,102,.3);
  font-family: 'pingAR', sans-serif;
}

/* ── Glass cards ── */
.safa-card {
    background: linear-gradient(115deg, rgb(49 48 238 / 26%) 0%, rgb(255 255 255) 42%, rgb(231 223 255) 100%);
    box-shadow: rgba(30, 27, 58, 0.04) 0px 1px 2px, rgba(79, 70, 229, 0.35) 0px 18px 44px -28px;
    border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 50px !important;
    margin-bottom: 50px !important;
}
.safa-card-lg { border-radius: 20px; }
.safa-card:hover { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 24px rgba(60,40,30,.08); }

.safa-card .card-section-title {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; margin-bottom: 8px;
  border-bottom: 0.5px dashed var(--safa-hairline);
}
.safa-card .card-section-title .icon-wrap {
  width: 24px; height: 24px; border-radius: 7px;
  background: rgba(138,147,247,.15); color: var(--safa-primary);
  display: flex; align-items: center; justify-content: center;
}
.safa-card .card-section-title span { font-size: 12px; font-weight: 700; color: var(--safa-ink); }

/* ── KPI cards ── */
.kpi-card {
  position: relative; overflow: hidden; cursor: pointer;
  transition: all .25s;
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0;
  width: 24px; height: 2px; border-radius: 99px;
  background: var(--safa-primary); box-shadow: 0 0 12px rgba(138,147,247,.7);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(60,40,30,.1) !important; }
.kpi-icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(138,147,247,.15); color: var(--safa-primary);
}
.kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 11.5px; color: var(--safa-muted); }

/* ── Badges / Status ── */
.badge-safa {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 99px;
  font-size: 11px; font-weight: 600;
}
.badge-safa .dot { width: 6px; height: 6px; border-radius: 50%; }
.badge-new     { background: rgba(138,147,247,.15); color: #c38a67;  border: 0.5px solid rgba(138,147,247,.3); }
.badge-qual    { background: rgba(91,138,90,.12);  color: #3d6840;  border: 0.5px solid rgba(91,138,90,.3); }
.badge-pending { background: rgba(107,113,117,.12);color: #4a4f53;  border: 0.5px solid rgba(107,113,117,.3);}
.badge-closed  { background: rgba(139,125,117,.12);color: #5d524d;  border: 0.5px solid rgba(139,125,117,.3);}
.badge-paid    { background: rgba(91,138,90,.12);  color: #3d6840;  border: 0.5px solid rgba(91,138,90,.3); }
.badge-draft   { background: rgba(107,113,117,.12);color: #4a4f53;  border: 0.5px solid rgba(107,113,117,.3);}
.badge-appr    { background: rgba(138,147,247,.15); color: #c38a67;  border: 0.5px solid rgba(138,147,247,.3); }
.badge-open    { background: rgba(138,147,247,.15); color: #c38a67;  border: 0.5px solid rgba(138,147,247,.3); }
.badge-res     { background: rgba(91,138,90,.12);  color: #3d6840;  border: 0.5px solid rgba(91,138,90,.3); }
.badge-high    { background: rgba(181,72,72,.1);   color: #b54848;  border: 0.5px solid rgba(181,72,72,.25);}
.badge-medium  { background: rgba(138,147,247,.15); color: #c38a67;  border: 0.5px solid rgba(138,147,247,.3); }
.badge-low     { background: rgba(107,113,117,.12);color: #4a4f53;  border: 0.5px solid rgba(107,113,117,.3);}

/* ── AI Chip ── */
.ai-chip {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 99px; cursor: pointer;
  background: linear-gradient(135deg, rgba(138,147,247,.08), rgba(107,113,117,.05));
  border: 0.5px solid rgba(138,147,247,.25);
  font-size: 12px; transition: all .2s;
}
.ai-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(138,147,247,.2); }

/* ── Forms ── */
.safa-input {
  background: rgba(255,255,255,.6) !important;
  border: 0.5px solid var(--safa-hairline) !important;
  border-radius: 10px !important;
  color: var(--safa-ink) !important;
  font-family: 'pingAR', sans-serif;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  transition: all .18s !important;
}
input.safa-input
{
    color: var(--safa-primary) !important;
}
.safa-input:focus {
  border-color: var(--safa-primary) !important;
  box-shadow: 0 0 0 3px rgba(138,147,247,.15) !important;
}
.safa-label {
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600; color: var(--safa-muted);
  margin-bottom: 6px !important;
}

/* File upload zone */
.upload-zone {
  border: 1.5px dashed rgba(138,147,247,.4); border-radius: 12px;
  padding: 22px 16px; text-align: center; cursor: pointer;
  background: rgba(255,255,255,.4); transition: all .2s;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--safa-primary); background: rgba(138,147,247,.06);
}

/* ── Auth page ── */
.auth-brand-panel {
  background: linear-gradient(160deg, #2a2422 0%, #3a3431 60%, #1f1a18 100%);
  min-height: 100vh; position: relative; overflow: hidden;
}
.auth-card {
  background: rgba(255,255,255,.85);
  border: 0.5px solid var(--safa-hairline);
  border-radius: 20px;
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 16px 48px rgba(60,40,30,.1);
  padding: 36px 40px;
}
.auth-tabs .nav-link {
  font-family: 'pingAR', sans-serif; font-weight: 700; color: var(--safa-muted);
  border-radius: 9px !important; border: none !important; padding: 10px 0;
}
.auth-tabs .nav-link.active { background: #fff !important; color: var(--safa-ink) !important; box-shadow: 0 2px 10px rgba(60,40,30,.1); }

/* OTP inputs */
.otp-input {
  width: 48px; height: 56px; text-align: center; font-size: 22px;
  font-weight: 700; border: 0.5px solid var(--safa-hairline);
  border-radius: 11px; background: rgba(255,255,255,.8);
  color: var(--safa-ink); font-family: 'pingAR', sans-serif;
  direction: ltr; transition: all .15s;
}
.otp-input:focus { border-color: var(--safa-primary); box-shadow: 0 0 0 3px rgba(138,147,247,.15); outline: none; }
.otp-input.filled { border-color: var(--safa-primary); }

/* ── Hero cards ── */
.hero-dark {
  background: linear-gradient(135deg, #3a3431, #2a2422);
  border-radius: 20px; overflow: hidden; position: relative;
}
.hero-dark::before {
  content: ''; position: absolute; top: -100px; inset-inline-start: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(138,147,247,.33), transparent 70%);
}

/* Progress bars */
.safa-progress { height: 8px; background: rgba(0,0,0,.2); border-radius: 99px; overflow: hidden; }
.safa-progress-bar {
  height: 100%; background: rgba(255,255,255,.8); border-radius: 99px;
  box-shadow: 0 0 12px rgba(255,255,255,.5); transition: width 1s cubic-bezier(.4,0,.2,1);
}
.safa-progress-thin { height: 5px; background: var(--safa-hairline); border-radius: 99px; overflow: hidden; }
.safa-progress-thin .bar { height: 100%; background: var(--safa-grad); border-radius: 99px; transition: width 1s; }

/* ── Pipeline / stages ── */
.pipeline { display: flex; align-items: center; width: 100%; }
.pipeline-step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.pipeline-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(120,90,60,.18); transition: all .3s;
}
.pipeline-dot.done, .pipeline-dot.active { background: var(--safa-primary); }
.pipeline-dot.active { box-shadow: 0 0 0 4px rgba(138,147,247,.22), 0 0 16px rgba(138,147,247,.7); width: 14px; height: 14px; }
.pipeline-label { font-size: 10.5px; color: var(--safa-muted); white-space: nowrap; }
.pipeline-label.active { color: var(--safa-primary); font-weight: 600; }
.pipeline-line { flex: 1; height: 1.5px; background: var(--safa-hairline); margin: 0 4px; margin-bottom: 24px; }
.pipeline-line.done { background: var(--safa-primary); }

/* ── Filter chips ── */
.filter-chip {
  padding: 6px 14px; border-radius: 99px; font-size: 12px; font-weight: 600;
  border: 0.5px solid var(--safa-hairline); background: rgba(255,255,255,.5);
  color: var(--safa-muted); cursor: pointer; transition: all .15s;
  font-family: 'pingAR', sans-serif;
  white-space: nowrap;
}
.filter-chip.active { border-color: var(--safa-primary); background: rgba(138,147,247,.15); color: var(--safa-primary); }
.filter-chip-sm { padding: 7px 13px; border-radius: 9px; font-size: 12px; font-weight: 600;
  border: 0.5px solid var(--safa-hairline); background: rgba(255,255,255,.5);
  color: var(--safa-muted); cursor: pointer; transition: all .15s; font-family: 'pingAR',sans-serif; }
.filter-chip-sm.active { border-color: var(--safa-primary); background: rgba(138,147,247,.15); color: var(--safa-primary); }

/* ── Tier cards ── */
.tier-bronze { background: linear-gradient(135deg, #c38a67, #8a5d3f); }
.tier-silver { background: linear-gradient(135deg, #6b7175, #4a4f53); }
.tier-gold   { background: linear-gradient(135deg, #b89568, #8a6a45); }

/* ── Property card image ── */
.prop-img-placeholder {
  height: 160px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 14px 16px;
}
.prop-img-bg {
  position: absolute; inset: 0; opacity: .22;
  background-image: repeating-linear-gradient(
    45deg, rgba(255,255,255,.4) 0, rgba(255,255,255,.4) 2px,
    transparent 2px, transparent 12px
  );
}

/* ── Dark hero (property/tier) ── */
.grad-bg { background: var(--safa-grad); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--safa-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--safa-ink); }

/* ── Table ── */
.safa-table thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--safa-muted); border-bottom: 0.5px solid var(--safa-hairline);
  padding: 10px 14px; background: transparent;
}
.safa-table tbody td { padding: 12px 14px; font-size: 13px; border-bottom: 0.5px solid var(--safa-hairline); vertical-align: middle; }
.safa-table tbody tr { transition: background .12s; }
.safa-table tbody tr:hover { background: rgba(138,147,247,.04); }

/* ── Breadcrumb ── */
.safa-bc { font-size: 12px; }
.safa-bc .bc-pill { padding: 4px 10px; border-radius: 99px; background: rgba(138,147,247,.12); color: var(--safa-primary); font-weight: 600; font-size: 11px; }

/* ── IBAN monospace ── */
.iban-text { font-family: monospace; font-size: 18px; font-weight: 800; letter-spacing: 1px; direction: ltr; text-align: end; }

/* ── Auth utility bar ── */
.auth-util-bar { background: #0E0B0A; font-size: 11.5px; padding: 6px 40px; }

/* ── RTL tweaks ── */
[dir="rtl"] .active-bar { margin-inline-start: auto; }

/* ── Page wrapper ── */
#app { display: flex; flex-direction: row; min-height: 100vh; }
#main-content { flex: 1; overflow-y: auto; overflow-x: hidden; }
.page-section { display: block; }
.page-section.active { display: block; }
.page-shell { padding: 24px 32px 40px; }

/* ── Multi-select dropdown ── */
.region-dropdown {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; width: 100%;
  background: #fff; border-radius: 12px; border: 0.5px solid var(--safa-hairline);
  box-shadow: 0 12px 32px rgba(60,40,30,.12); z-index: 200; overflow: hidden; display: none;
}
.region-dropdown.open { display: block; }
.region-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  cursor: pointer; font-size: 13px; transition: background .12s; }
.region-item:hover { background: rgba(138,147,247,.06); }
.region-checkbox {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--safa-hairline); display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.region-item.selected .region-checkbox { background: var(--safa-primary); border-color: var(--safa-primary); }

/* ── Step indicator ── */
.step-circle {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex-shrink: 0; transition: all .25s;
  background: rgb(240 239 253 / 35%); color: var(--safa-muted);
}
.step-circle.done { background: linear-gradient(135deg,var(--safa-ink),var(--safa-ink)); color: #fff; box-shadow: 0 4px 12px rgba(91,138,90,.3); }
.step-circle.active { background: var(--safa-grad); color: #fff; box-shadow: 0 6px 16px rgb(131, 153, 243); }
.step-line { flex: 1; height: 2px; margin: 0 8px; margin-bottom: 24px; background: var(--safa-hairline); border-radius: 99px; transition: background .25s; }
.step-line.done { background: linear-gradient(90deg,var(--safa-ink),var(--safa-ink)); }
.step-label { font-size: 11px; white-space: nowrap; color: var(--safa-muted); margin-top: 6px; }
.step-label.active { color: var(--safa-primary); font-weight: 700; }
.step-label.done { color: var(--safa-ink); }

/* ── Nafath widget ── */
.nafath-widget { background: rgba(138,147,247,.06); border: 0.5px solid rgba(138,147,247,.3); border-radius: 12px; }
.nafath-icon-wrap { width: 38px; height: 38px; border-radius: 9px; background: #006A35; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── MiniTimeline ── */
.mini-timeline-item { position: relative; padding-bottom: 14px; }
.mini-timeline-item:not(:last-child)::after {
  content: ''; position: absolute; top: 14px;
  inset-inline-start: 3.5px; width: 1.5px; bottom: 0;
  background: var(--safa-hairline);
}
.timeline-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(120,90,60,.3); margin-top: 4px; flex-shrink: 0; }
.timeline-dot.latest { background: var(--safa-primary); box-shadow: 0 0 8px rgba(138,147,247,.7); }
.is-invalid { border-color: #dc3545 !important; }
.invalid-feedback { display: block; color: #dc3545; font-size: 10px; margin-top: 4px; position: absolute; width: 20% }
@media(max-width:992px) {
    .invalid-feedback {
        width: 80% !important;
    }
}
.agreement .invalid-feedback
{
    top: 18px;
}

.addListBtn{
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--safa-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    transition: .3s;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.addListBtn:hover{
    transform:scale(1.08);
    background:var(--safa-primary);
    color:#fff;
}

.addListBtn.active{
    background:var(--safa-primary);
    color:#fff;
}
.unit-name-item
{
    background: #c38a671f;
    padding: 6px 20px;
    border-radius: 90px;
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SAFA — Gradient Theme Enhancement (buttons / headings / numbers / cards)
   Palette: #052139 → #8a93f7 → #b6bcfc → #cdd0fd
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --sg-1: #052139;
    --sg-2: #8a93f7;
    --sg-3: #b6bcfc;
    --sg-4: #cdd0fd;
    --sg-brand-flow: linear-gradient(120deg, rgb(0 5 247) 0%, rgb(128 115 226) 45%, rgb(64 0 255) 100%);
    --sg-soft:       linear-gradient(135deg, var(--sg-2) 0%, var(--sg-3) 55%, var(--sg-4) 100%);
    --sg-text:       linear-gradient(95deg, var(--sg-1) 0%, var(--sg-2) 100%);
}

/* ── CTA buttons ── */
.btn-safa-primary {
    background: var(--sg-brand-flow) !important;
    background-size: 200% auto !important;
    box-shadow: 0 4px 16px rgba(5, 33, 57, .3) !important;
    transition: background-position .5s ease, box-shadow .2s ease !important;
}
.btn-safa-primary:hover {
    background-position: right center !important;
    box-shadow: 0 8px 22px rgba(5, 33, 57, .4) !important;
}
.btn-safa-secondary {
    background: linear-gradient(135deg, rgba(138, 147, 247, .1), rgba(205, 208, 253, .16)) !important;
    border-color: rgba(138, 147, 247, .4) !important;
}
.btn-safa-secondary:hover { background: var(--sg-soft) !important; color: #fff !important; }
.btn-safa-ghost:hover { background: var(--sg-soft) !important; color: #fff !important; }
.addListBtn:hover,
.addListBtn.active {
    background: var(--sg-brand-flow) !important;
    color: #fff !important;
}

/* ── Numbers ── */
.kpi-value {
    background: var(--sg-brand-flow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Cards ── */
.safa-card,
.kpi-card {
    position: relative;
    overflow: hidden;
}
.kpi-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0; top: 0;
    width: 100%; height: 3px;
    background: var(--sg-brand-flow);
}
.kpi-card:hover { box-shadow: 0 14px 32px rgba(138, 147, 247, .28) !important; }
.step-circle.active { background: var(--sg-brand-flow) !important; }
.step-circle.done { background: var(--sg-soft) !important; }
.step-line.done { background: var(--sg-brand-flow) !important; }
.broker-avatar { background: var(--sg-brand-flow) !important; }

body.ltr
{
    direction: ltr;
    text-align: left;
}


/* ============================================================
   2) الشريط الإخباري (Ticker)
   ضعه أول عنصر داخل <body> فوق الهيدر
   ============================================================ */
.news-ticker {
    background: linear-gradient(90deg, #312e81, #4338ca);
    color: #e0e7ff;
    height: 42px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.news-ticker__label {
    background: #1e1b4b;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    font-weight: 800;
    font-size: 14px;
    color: #c7d2fe;
    white-space: nowrap;
    z-index: 2;
    flex-shrink: 0;
}

.news-ticker__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #818cf8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, .25);
}

.news-ticker__viewport {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    direction: ltr;
}

.news-ticker__track {
    display: flex;
    width: max-content;
    flex-shrink: 0;
    will-change: transform;
}

.news-ticker__group {
    display: flex;
    flex-shrink: 0;
}

.news-ticker__item {
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 28px;
    white-space: nowrap;
    font-size: 14px;
    flex-shrink: 0;
}

.news-ticker__tag {
    background: rgba(224, 231, 255, .15);
    border: 1px solid rgba(199, 210, 254, .35);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #c7d2fe;
}

.news-ticker__date {
    color: #a5b4fc;
    font-size: 12px;
}

.news-ticker__track:hover {
    animation-play-state: paused !important;
}

@keyframes tickerMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(var(--ticker-distance));
    }
}


/* ============================================================
   3) بوب اب التحديثات (Modal)
   ============================================================ */
.updates-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30,27,75,.45);
    backdrop-filter: blur(4px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .25s ease;
}
.updates-overlay[hidden] { display: none; }
.updates-modal {
    background: #fff;
    border-radius: 20px;
    width: 480px;
    max-width: 92vw;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(30,27,75,.35);
    animation: popIn .3s ease;
}
.updates-modal__header {
    background: linear-gradient(135deg, #4338ca, #6366f1);
    color: #fff;
    padding: 26px 28px;
    position: relative;
}
.updates-modal__date { font-size: 13px; color: #c7d2fe; margin-bottom: 4px; }
.updates-modal__title { font-size: 22px; font-weight: 800; }
.updates-modal__close {
    position: absolute;
    top: 18px; left: 18px;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    font-family: inherit;
}
.updates-modal__close:hover { background: rgba(255,255,255,.3); }
.updates-modal__body {
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 50vh;
    overflow: auto;
}
.update-item { display: flex; gap: 14px; align-items: flex-start; }
.update-item__icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.update-item__title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.update-item__tag {
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 6px;
}
.update-item__desc { font-size: 13px; color: #7a7aa5; line-height: 1.6; }
.updates-modal__footer { padding: 18px 28px 24px; border-top: 1px solid #f0f0f8; }
.updates-modal__btn {
    width: 100%;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 13px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(79,70,229,.3);
}
.updates-modal__btn:hover { filter: brightness(1.08); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ltr .updates-modal__close
{
    right: 18px;
    left: auto;
}
.ltr .news-ticker__item
{
    direction: ltr;
}

.ltr .news-ticker__viewport {
    direction: rtl;
}

/* ============================================================
   4) بوب اب الإعلانات المصورة (Image Ads) — فوق بوب اب التحديثات
   ============================================================ */
.image-ads-overlay {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(6px);
    z-index: 1200; /* أعلى من .updates-overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn .25s ease;
}
.image-ads-overlay[hidden] { display: none; }
.image-ads-modal {
    position: relative;
    background: transparent;
    border-radius: 20px;
    max-width: 94vw;
    max-height: 100vh;
    overflow: hidden;
    animation: popIn .3s ease;
}
.image-ads-modal__close {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 3;
    background: rgba(15,13,40,.55);
    border: none;
    color: #fff;
    width: 34px; height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    font-family: inherit;
    line-height: 1;
}
.image-ads-modal__close:hover { background: rgba(15,13,40,.8); }
.ltr .image-ads-modal__close { right: 14px; left: auto; }

.image-ads-slides { position: relative; }
.image-ads-slide { display: none; }
.image-ads-slide.is-active { display: block; }
.image-ads-slide__img {
    display: block;
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    background: transparent;
}
.image-ads-slide__caption { padding: 16px 22px 20px; }
.image-ads-slide__title { font-weight: 800; font-size: 16px; margin-bottom: 4px; color: #1e1b4b; }
.image-ads-slide__title a { color: #4f46e5; }
.image-ads-slide__desc { font-size: 13px; color: #7a7aa5; line-height: 1.6; }

.image-ads-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(15,13,40,.5);
    border: none;
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    font-family: inherit;
    line-height: 1;
}
.image-ads-nav:hover { background: rgba(15,13,40,.8); }
.image-ads-nav--prev { right: 12px; }
.image-ads-nav--next { left: 12px; }
.ltr .image-ads-nav--prev { left: 12px; right: auto; }
.ltr .image-ads-nav--next { right: 12px; left: auto; }

.image-ads-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15,13,40,.45);
    z-index: 3;
}
.image-ads-dot {
    width: 9px; height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(15,13,40,.25);
}
.image-ads-dot.is-active { background: #fff; transform: scale(1.15); }

@media (max-width: 575.98px) {
    .image-ads-modal { width: 100%; }
    .image-ads-nav { width: 34px; height: 34px; font-size: 15px; }
}