/* ===== PROFILE USER INFO CARD ===== */

/* Card */

.profile-user-card {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.profile-user-card:hover {
  box-shadow: 0 8px 30px rgba(142, 9, 249, 0.1) !important;
}

/* Card Header */

.profile-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(142, 9, 249, 0.06), rgba(142, 9, 249, 0.02));
  border-bottom: 1px solid rgba(142, 9, 249, 0.1);
}

html[data-bs-theme="dark"] .profile-card-header {
  background: linear-gradient(135deg, rgba(142, 9, 249, 0.14), rgba(142, 9, 249, 0.06));
  border-bottom-color: rgba(142, 9, 249, 0.22);
}

.profile-header-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8e09f9, #6a07b8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(142, 9, 249, 0.35);
}

.profile-header-subtitle {
  font-size: 0.78rem;
  color: #888;
}

html[data-bs-theme="dark"] .profile-header-subtitle {
  color: #999;
}

/* Info Banner */

.profile-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(142, 9, 249, 0.05), rgba(142, 9, 249, 0.02));
  border: 1px solid rgba(142, 9, 249, 0.12);
  margin-bottom: 24px;
}

html[data-bs-theme="dark"] .profile-info-banner {
  background: linear-gradient(145deg, rgba(142, 9, 249, 0.1), rgba(142, 9, 249, 0.05));
  border-color: rgba(142, 9, 249, 0.22);
}

.profile-info-icon-wrap {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(142, 9, 249, 0.15), rgba(142, 9, 249, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8e09f9;
  font-size: 16px;
}

html[data-bs-theme="dark"] .profile-info-icon-wrap {
  background: linear-gradient(135deg, rgba(179, 102, 255, 0.22), rgba(179, 102, 255, 0.1));
  color: #b366ff;
}

/* Field Group */

.profile-field-group {
  background: linear-gradient(145deg, rgba(142, 9, 249, 0.03), transparent);
  border: 1px solid rgba(142, 9, 249, 0.1);
  border-radius: 14px;
  padding: 18px;
  transition: all 0.3s ease;
}

.profile-field-group:hover {
  border-color: rgba(142, 9, 249, 0.25);
  box-shadow: 0 4px 16px rgba(142, 9, 249, 0.06);
}

html[data-bs-theme="dark"] .profile-field-group {
  background: linear-gradient(145deg, rgba(142, 9, 249, 0.07), rgba(142, 9, 249, 0.03));
  border-color: rgba(142, 9, 249, 0.2);
}

html[data-bs-theme="dark"] .profile-field-group:hover {
  border-color: rgba(142, 9, 249, 0.35);
  box-shadow: 0 4px 16px rgba(142, 9, 249, 0.12);
}

/* Field Label */

.profile-field-label {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 10px;
}

.profile-field-label i {
  color: #8e09f9;
  font-size: 14px;
}

html[data-bs-theme="dark"] .profile-field-label {
  color: #bbb;
}

html[data-bs-theme="dark"] .profile-field-label i {
  color: #b366ff;
}

/* Input */

.profile-input {
  border-radius: 10px !important;
  border: 1px solid rgba(142, 9, 249, 0.15) !important;
  padding: 10px 14px !important;
  font-size: 0.92rem;
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0.6) !important;
}

.profile-input:focus {
  border-color: #8e09f9 !important;
  box-shadow: 0 0 0 3px rgba(142, 9, 249, 0.12) !important;
  background: white !important;
}

html[data-bs-theme="dark"] .profile-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(142, 9, 249, 0.25) !important;
  color: #ddd !important;
}

html[data-bs-theme="dark"] .profile-input:focus {
  border-color: #b366ff !important;
  box-shadow: 0 0 0 3px rgba(142, 9, 249, 0.2) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

html[data-bs-theme="dark"] .profile-input::placeholder {
  color: #777;
}