/* Extended Social Media Styling for YouTube and TikTok */

/* Custom TikTok Icon - Add support for fa-tiktok in older Font Awesome versions */

/* Fallback for TikTok - if the above doesn't work, use music note */
i.fa.fa-tiktok:before {
  display: inline-block;
  height: 13px !important;
  width: 16px !important;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiM3NzciPjxwYXRoIGZpbGw9IiM3NzciIGQ9Ik0xMi40MzggMi4wMTdDMTMuNTMgMiAxNC42MTMgMi4wMDggMTUuNjk2IDJjLjA2NyAxLjI3NS41MjUgMi41NzUgMS40NTkgMy40NzVjLjkzMy45MjUgMi4yNSAxLjM1IDMuNTMzIDEuNDkydjMuMzU4Yy0xLjItLjA0Mi0yLjQwOC0uMjkyLTMuNS0uODA4Yy0uNDc1LS4yMTctLjkxNy0uNDkyLTEuMzUtLjc3NWMtLjAwOCAyLjQzMy4wMDggNC44NjYtLjAxNyA3LjI5MWE2LjM2IDYuMzYgMCAwIDEtMS4xMjUgMy4yODNjLTEuMDkxIDEuNi0yLjk4MyAyLjY0Mi00LjkyNCAyLjY3NWMtMS4xOTIuMDY3LTIuMzg0LS4yNTgtMy40LS44NThjLTEuNjg0LS45OTItMi44NjctMi44MDgtMy4wNDItNC43NThhMTYgMTYgMCAwIDEtLjAwOC0xLjI0MmMuMTUtMS41ODMuOTMzLTMuMSAyLjE1LTQuMTMzYzEuMzgzLTEuMiAzLjMxNi0xLjc3NSA1LjEyNS0xLjQzM2MuMDE2IDEuMjMzLS4wMzQgMi40NjYtLjAzNCAzLjdjLS44MjUtLjI2Ny0xLjc5MS0uMTkyLTIuNTE2LjMwOGEyLjkgMi45IDAgMCAwLTEuMTM0IDEuNDU4Yy0uMTc1LjQyNS0uMTI1Ljg5Mi0uMTE2IDEuMzQyYy4yIDEuMzY2IDEuNTE2IDIuNTE2IDIuOTE2IDIuMzkyYy45MzQtLjAwOSAxLjgyNS0uNTUgMi4zMDktMS4zNDJjLjE1OC0uMjc1LjMzMy0uNTU5LjM0MS0uODg0Yy4wODQtMS40OTEuMDUtMi45NzUuMDU5LTQuNDY2Yy4wMDgtMy4zNTgtLjAwOS02LjcwOC4wMTYtMTAuMDU4Ii8+PC9zdmc+) !important;
  background-position: center;
  background-size: cover;
  content: "" !important;
}

/* Alternative fallback - ensure TikTok has SOME icon */

/* Fallback for TikTok if icon doesn't exist - use a video icon */

/* YouTube Icon - ensure it works */
.fa-youtube:before {
  content: "\f167"; /* YouTube icon unicode */
  font-family: "FontAwesome";
}

/* YouTube Button Styling */
.btn-youtube {
  background-color: #ff0000;
  border-color: #ff0000;
  color: white;
}

.btn-youtube:hover {
  background-color: #cc0000;
  border-color: #cc0000;
  color: white;
}

.btn-outline.btn-youtube {
  background-color: transparent;
  border-color: #ff0000;
  color: #ff0000;
}

.btn-outline.btn-youtube:hover {
  background-color: #ff0000;
  border-color: #ff0000;
  color: white;
}

/* TikTok Button Styling */
.btn-tiktok {
  background-color: #000000;
  border-color: #000000;
  color: white;
}

.btn-tiktok:hover {
  background-color: #333333;
  border-color: #333333;
  color: white;
}

.btn-outline.btn-tiktok {
  background-color: transparent;
  border-color: #000000;
  color: #000000;
}

.btn-outline.btn-tiktok:hover {
  background-color: #000000;
  border-color: #000000;
  color: white;
}

/* Social Media Icons */
.fa-youtube {
  /* color: #ff0000; */
}

.fa-tiktok {
  color: #000000;
  font-family: "Font Awesome 5 Free" !important;
}

/* Alternative TikTok styling using a musical note if TikTok icon fails */
.social-tiktok-alt:before {
  content: "♫";
  font-style: normal;
  font-weight: bold;
  color: #000000;
}

/* Social media display styling */
.user-social-media .social-link {
  margin-right: 8px;
  display: inline-block;
}

.social-link.social-youtube i {
  color: #ff0000;
}

.social-link.social-tiktok i {
  color: #000000;
}

/* Profile form social media fields */
.social-media-section .form-group {
  margin-bottom: 20px;
}

.social-media-header {
  font-weight: bold;
  margin-bottom: 15px;
  display: block;
}

.required-notice {
  font-weight: normal;
  color: #dc3545;
  font-size: 0.9em;
}

.social-media-input {
  transition: border-color 0.3s ease;
}

.social-media-input:focus {
  border-color: #007cba;
  box-shadow: 0 0 0 0.2rem rgba(0, 124, 186, 0.25);
}