.wits-avatar{width:80px;height:80px;border-radius:50%;background:#0d6efd;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.3rem}
.wits-avatar-profile{width:120px;height:120px;font-size:2.7rem}
.wits-card{border:1px solid #e5e7eb;border-radius:.5rem}
.wits-card:hover{box-shadow:0 4px 18px rgba(0,0,0,.06)}
.wits-result{display:flex;gap:12px}
.wits-result .meta{font-size:.9rem}
.wits-facet h4.mt-5{margin-top:3rem}
.wits-facet .list-group-item{padding:.25rem .5rem; border:none !important; background:transparent !important}

/* Frontend search bar and autocomplete styling */
.wits-search-group .form-control{
  border:1px solid var(--bs-border-color) !important;
  height: calc(1.5em + 1.5rem + 2px);
  padding-left: 2.75rem;
  border-radius: .375rem .375rem 0 0 !important;
}
.wits-search-group .search-icon{
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  pointer-events: none;
  z-index: 10;
}
#wits-suggest{
  top: 100%;
  margin-top: -1px;
  border:1px solid var(--bs-border-color);
  border-top: none !important;
  border-top-left-radius:0;
  border-top-right-radius:0;
  border-bottom-left-radius:.375rem;
  border-bottom-right-radius:.375rem;
  background:#fff;
}
#wits-suggest .list-group-item{
  border:0;
  font-size:1rem;
  text-decoration: none !important;
}
#wits-suggest .list-group-item:hover{
  background-color: var(--bs-light-bg-subtle);
  text-decoration: none !important;
}
#wits-suggest .list-group-item strong{ font-weight:700; }

/* Frontend pagination styling */
#wits-pager .page-link {
  color: #000 !important;
  text-decoration: none !important;
}
#wits-pager .page-link:hover {
  color: #333 !important;
  text-decoration: none !important;
}
#wits-pager .page-item.active .page-link {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

/* Results count styling */
#wits-results-count {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Profile table styling */
.wits-card .table,
.table-borderless {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  margin: 0 !important;
}
.wits-card .table th,
.wits-card .table td,
.table-borderless th,
.table-borderless td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #dee2e6 !important;
}
.wits-card .table tbody tr,
.table-borderless tbody tr {
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid #dee2e6 !important;
}
.wits-card .table tbody tr:first-child,
.table-borderless tbody tr:first-child {
  border-top: none !important;
}
.wits-card .table tbody tr:last-child td,
.wits-card .table tbody tr:last-child th,
.table-borderless tbody tr:last-child td,
.table-borderless tbody tr:last-child th {
  border-bottom: none !important;
}

/* Profile charts: enforce title/subtitle sizes */
#wits-profile-metrics .highcharts-title {
  font-size: 28px !important;
  font-weight: 400 !important;
}
#wits-profile-metrics .highcharts-subtitle {
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* Enhanced Loading System */
.ar-dynamic-loading {
    max-width: 500px;
    margin: 40px auto;
    padding: 40px 30px;
    text-align: center;
}

.ar-loading-icon {
  display: inline-grid;
  width: 80px;
  aspect-ratio: 1;
  animation: l12-0 3s linear infinite;
}
.ar-loading-icon:before,
.ar-loading-icon:after {
  content: "";
  grid-area: 1/1;
}
.ar-loading-icon:before {
  clip-path: polygon(100% 50%,83.81% 59.06%,93.3% 75%,74.75% 74.75%,75% 93.3%,59.06% 83.81%,50% 100%,40.94% 83.81%,25% 93.3%,25.25% 74.75%,6.7% 75%,16.19% 59.06%,0% 50%,16.19% 40.94%,6.7% 25%,25.25% 25.25%,25% 6.7%,40.94% 16.19%,50% 0%,59.06% 16.19%,75% 6.7%,74.75% 25.25%,93.3% 25%,83.81% 40.94%);
  background: #1B325F;
  transform: rotate(0turn) translate(-12.5%) rotate(0turn);
  animation: 
    l12-1 2s linear infinite,
    l12-2 4s linear infinite alternate;
}
.ar-loading-icon:after {
  margin: 12.5%;
  clip-path: polygon(100% 50%,78.19% 60.26%,88.3% 82.14%,65% 75.98%,58.68% 99.24%,44.79% 79.54%,25% 93.3%,27.02% 69.28%,3.02% 67.1%,20% 50%,3.02% 32.9%,27.02% 30.72%,25% 6.7%,44.79% 20.46%,58.68% 0.76%,65% 24.02%,88.3% 17.86%,78.19% 39.74%);
  background: #9CC4E4;
  animation: l12-3 4s linear infinite alternate;
}
@keyframes l12-0 {to{rotate: 1turn;}}
@keyframes l12-1 {to{transform: rotate(-1turn) translate(-12.5%) rotate(.75turn);}}
@keyframes l12-2 {90%,to{clip-path: polygon(100% 50%,98.3% 62.94%,93.3% 75%,85.36% 85.36%,75% 93.3%,62.94% 98.3%,50% 100%,37.06% 98.3%,25% 93.3%,14.64% 85.36%,6.7% 75%,1.7% 62.94%,0% 50%,1.7% 37.06%,6.7% 25%,14.64% 14.64%,25% 6.7%,37.06% 1.7%,50% 0%,62.94% 1.7%,75% 6.7%,85.36% 14.64%,93.3% 25%,98.3% 37.06%)}}
@keyframes l12-3 {90%,to{clip-path: polygon(100% 50%,96.98% 67.1%,88.3% 82.14%,75% 93.3%,58.68% 99.24%,41.32% 99.24%,25% 93.3%,11.7% 82.14%,3.02% 67.1%,0% 50%,3.02% 32.9%,11.7% 17.86%,25% 6.7%,41.32% 0.76%,58.68% 0.76%,75% 6.7%,88.3% 17.86%,96.98% 32.9%)}}


.ar-loading-progress {
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    margin: 20px 0;
    overflow: hidden;
    position: relative;
}

.ar-loading-progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #1B325F, transparent);
    animation: ar-progress-slide 2s ease-in-out infinite;
}

@keyframes ar-progress-slide {
    0% { left: -100%; }
    100% { left: 100%; }
}

.ar-loading-message {
    font-size: 20px;
    font-weight: 600;
    color: #495057;
    margin: 10px 0 10px;
    min-height: 25px;
    transition: all 0.5s ease-in-out;
}

.ar-loading-submessage {
    font-size: 16px;
    color: #6c757d;
    opacity: 0.8;
    min-height: 20px;
    transition: all 0.5s ease-in-out;
}

.ar-message-fade-in {
    opacity: 1;
    transform: translateY(0);
}

.ar-message-fade-out {
    opacity: 0;
    transform: translateY(-10px);
}

/* Responsive design */
@media (max-width: 576px) {
    .ar-dynamic-loading {
        margin: 20px;
        padding: 30px 20px;
    }
    
    .ar-loading-message {
        font-size: 16px;
    }
}