/* Phosphor Icons customizations and overrides */

/* Ensure Phosphor icons are properly styled */
svg[data-phosphor-icon] {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Icon colors - inherit from parent text color for buttons */
.btn svg[data-phosphor-icon] {
  color: inherit; /* Icons inherit the button's text color */
}

/* Specific overrides for non-button contexts */
svg[data-phosphor-icon]:not(.btn *) {
  color: #e6a85c; /* Primary brand color for non-button contexts */
}

/* Success/checkmark icons - keep green */
svg[data-phosphor-icon="check"]:not(.btn *),
svg[data-phosphor-icon="check-circle"]:not(.btn *) {
  color: #4caf50;
}

/* Positive action icons - keep green */
svg[data-phosphor-icon="user-plus"]:not(.btn *) {
  color: #4caf50;
}

/* Positive metrics icons - keep green */
svg[data-phosphor-icon="chart-line"]:not(.btn *) {
  color: #4caf50;
}

/* Override for comparison icons on membership page - white for better contrast */
.comparison-icon svg[data-phosphor-icon] {
  color: #ffffff !important;
}

/* Icon hover effects */
svg[data-phosphor-icon] {
  transition: transform 0.3s ease, color 0.3s ease;
}

svg[data-phosphor-icon]:hover {
  transform: scale(1.1);
}

/* Specific icon styling for different contexts */
.feature-icon-large svg[data-phosphor-icon] {
  color: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.feature-icon-modern svg[data-phosphor-icon] {
  color: #e6a85c;
}

.exclusivity-badge svg[data-phosphor-icon] {
  color: #e6a85c;
  margin-right: 8px;
}

/* Brand icon styling - using official brand colors for non-button contexts */
svg[data-phosphor-icon="apple"]:not(.btn *) {
  color: #000000; /* Apple's official black */
}

svg[data-phosphor-icon="googlePlay"]:not(.btn *) {
  color: #01875f; /* Google Play's official green */
}

svg[data-phosphor-icon="facebook"]:not(.btn *) {
  color: #1877f2; /* Facebook's official blue */
}

svg[data-phosphor-icon="discord"]:not(.btn *) {
  color: #5865f2; /* Discord's official purple */
}

/* Download button specific styling */
.download-button-container .btn-primary svg[data-phosphor-icon="apple"] {
  color: #ffffff; /* White Apple icon on black button */
}

.download-button-container .btn-primary svg[data-phosphor-icon="googlePlay"] {
  color: #ffffff; /* White Google Play icon on green button */
}

/* Apple download button - black background with white text and icon */
.download-button-container .btn-primary.apple-btn {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

.download-button-container .btn-primary.apple-btn:hover {
  background: #333333;
  border-color: #333333;
}

/* Google Play download button - Google Play green background */
.download-button-container .btn-primary.google-play-btn {
  background: #01875f;
  border-color: #01875f;
  color: #ffffff;
}

.download-button-container .btn-primary.google-play-btn:hover {
  background: #016b4f;
  border-color: #016b4f;
}

/* Feature check styling */
.feature-check {
  color: #4caf50;
  font-weight: bold;
  margin-right: 8px;
}

/* Feature card icon styling */
.feature-icon-large svg[data-phosphor-icon],
.feature-icon-modern svg[data-phosphor-icon] {
  color: #ffffff; /* White color for better contrast */
  display: block;
  text-align: center;
}

.feature-icon-large svg[data-phosphor-icon] {
  width: 4rem; /* Bigger for Monitor Everything */
  height: 4rem;
}

.feature-icon-modern svg[data-phosphor-icon] {
  width: 2rem;
  height: 2rem;
}