/*
|--------------------------------------------------------------------------
| CultureRadar - UI Components / Page Helpers
|--------------------------------------------------------------------------
| Keeps Bootstrap layout; adds extra components for the redesigned UI.
*/

.gradient-chip{
  background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(34,211,238,.18));
  border: 1px solid rgba(255,255,255,.12);
}

.cr-kpi{
  position: relative;
  overflow: hidden;
}
.cr-kpi::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(520px 240px at 0% 0%, rgba(124,58,237,.35), transparent 60%),
              radial-gradient(520px 240px at 100% 0%, rgba(34,211,238,.25), transparent 60%);
  opacity:.65;
  pointer-events:none;
}
.cr-kpi > *{ position: relative; }

.cr-kpi-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.cr-section-title{
  font-weight: 700;
  letter-spacing: .2px;
}

.cr-subtle{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
}

.cr-cover{
  height: 180px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.10);
}

.cr-divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 1.25rem 0;
}

/* Make bootstrap link buttons readable in dark */
.btn-link{ color: rgba(255,255,255,.86); }
.btn-link:hover{ color:#fff; }