/* Palette */
:root {
  --mc-primary: #1B365D; /* main */
  --mc-dark: #000000;
  --mc-light: #FFFFFF;
}

/* Make Bootstrap "primary" use your color */
.uae-mc .btn-outline-primary {
  --bs-btn-color: var(--mc-primary);
  --bs-btn-border-color: var(--mc-primary);
  --bs-btn-hover-bg: var(--mc-primary);
  --bs-btn-hover-border-color: var(--mc-primary);
  --bs-btn-active-bg: var(--mc-primary);
  --bs-btn-active-border-color: var(--mc-primary);
  --bs-btn-disabled-color: var(--mc-primary);
  --bs-btn-disabled-border-color: var(--mc-primary);
}
.uae-mc .btn-outline-primary.active {
  background-color: var(--mc-primary);
  color: #fff;
}

/* Headings & accents */
.uae-mc .text-primary { color: var(--mc-primary) !important; }
.uae-mc .card { border-radius: 1rem; }
.uae-mc .card .card-body { padding: 1.5rem; }

/* Range slider with left fill effect */
.uae-mc .range-primary {
  height: 0.25rem;
  background: linear-gradient(var(--mc-primary) 0 0) 0/var(--mc-fill,0%) 100% no-repeat, #e9ecef;
  border-radius: 999px;
  outline: none;
}
.uae-mc .range-primary::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mc-primary);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(27,54,93,.15);
  border: none;
}
.uae-mc .range-primary::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mc-primary);
  border: none;
  cursor: pointer;
}

/* Inputs */
.uae-mc .input-group-text {
  background: #F8F9FA;
  color: #333;
  border-color: #dee2e6;
}