/**
 * Styles for Premium Profile Colors
 */

/* Main container styling */
.premium-profile-colors {
  background-color: var(--profile-bg-color) !important;
  color: var(--profile-text-color) !important;
  padding: 1rem;
  border-radius: 4px;
}

/* Target all headings in the profile */
.premium-profile-colors h1,
.premium-profile-colors h2,
.premium-profile-colors h3,
.premium-profile-colors h4,
.premium-profile-colors .page-title {
  color: var(--profile-accent-color) !important;
}

/* Profile username header */
.premium-profile-colors .profile-name,
.premium-profile-colors .username {
  color: var(--profile-accent-color) !important;
  font-weight: bold;
}

/* Section headings */
.premium-profile-colors .section-heading,
.premium-profile-colors .field__label {
  color: var(--profile-accent-color) !important;
  border-bottom: 2px solid var(--profile-accent-color);
  padding-bottom: 5px;
  margin-bottom: 10px;
}

/* Links */
.premium-profile-colors a:not(.btn):not(.button) {
  color: var(--profile-accent-color) !important;
  text-decoration: none;
}

.premium-profile-colors a:not(.btn):not(.button):hover {
  text-decoration: underline;
}

/* Buttons */
.premium-profile-colors .btn-primary,
.premium-profile-colors .button--primary,
.premium-profile-colors input[type="submit"] {
  background-color: var(--profile-accent-color) !important;
  border-color: var(--profile-accent-color) !important;
  color: white !important;
}

/* Profile image container */
.premium-profile-colors .user-picture,
.premium-profile-colors .field--name-user-picture {
  border: 3px solid var(--profile-accent-color) !important;
  border-radius: 50%;
  overflow: hidden;
}

/* About Me and other profile sections */
.premium-profile-colors .profile-about,
.premium-profile-colors .field--name-profile-aboutme,
.premium-profile-colors .about-content {
  background-color: white;
  border-left: 4px solid var(--profile-accent-color);
  padding: 10px 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Badge for premium status */
.premium-profile-colors .premium-badge {
  background-color: var(--profile-accent-color) !important;
  color: white !important;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: bold;
  display: inline-block;
  margin: 5px 0;
}

/* Override for specific elements */
.premium-profile-colors [class*="user-profile"] *,
.premium-profile-colors .user-profile-item * {
  color: var(--profile-text-color) !important;
}

.premium-profile-colors [class*="user-profile"] h1,
.premium-profile-colors [class*="user-profile"] h2,
.premium-profile-colors [class*="user-profile"] h3,
.premium-profile-colors [class*="user-profile"] .field__label,
.premium-profile-colors .user-profile-item h1,
.premium-profile-colors .user-profile-item h2,
.premium-profile-colors .user-profile-item h3,
.premium-profile-colors .user-profile-item .field__label {
  color: var(--profile-accent-color) !important;
}