/* Scroll area inside modal */
.profile-scroll-area {
  max-height: 500px;
  overflow-y: auto;
  padding: 4px;
}
/* Your base card style */
.record-card {
  border-radius: 12px;
  border: 2px solid #e3e7ef;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}
/* apply hover only when enabled */
.record-card:not(.disabled-card):hover {
  box-shadow: 0 0 8px 2px #5b8def;
  cursor: pointer;
}
/* Selected */
.record-card.selected {
  box-shadow: 0 0 8px 2px #5b8def;
  border-color: transparent;
}
.disabled-card {
  cursor: not-allowed;
  pointer-events: none;
}
/* 🔵 BIG AVATAR CIRCLE */
.big-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #eef3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
/* Icon inside avatar */
.big-avatar-icon {
  font-size: 56px;
  color: #8aa4ff;
}
.status-area {
  height: 48px;
  /* keeps both cards aligned */
  display: flex;
  align-items: center;
  justify-content: center;
}
.status-chip-container {
  display: flex;
  gap: 12px;
  justify-content: center;
}
/* BACK BUTTON */
.back-btn {
  color: #5b8def;
}
.back-btn.mud-button-root:disabled {
  color: #9bb7ff !important;
}
/* NEXT BUTTON ENABLED */
.next-btn {
  background: #5b8def;
  color: white;
}
.next-btn.mud-button-filled:hover {
  background: #5b8def;
  color: white;
}
/* NEXT BUTTON DISABLED */
.next-btn.mud-button-root:disabled {
  background: #cfd8f7 !important;
  color: white !important;
}
/* This could be used at multiple places where disabling the element should stay with primary color but in a lighter shade */
.primary-disabled {
  background-color: #9EB5F3 !important;
  /* lighter primary */
  cursor: not-allowed;
  pointer-events: none;
}
.primary-disabled .mud-icon-root {
  color: white !important;
}
.wrap-text {
  max-width: 98%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}