/* Icon Fix - Force Font Awesome Icons Visibility */

/* Force FA icons visibility (exclude menu-social and footer-social) */
i:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i),
i.fa:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i),
i.fas:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i),
i.fab:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i),
i.far:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i),
i.fal:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i),
.fa:not(.menu-social .fa):not(.menu-social a .fa):not(.footer-social .fa):not(.footer-social a .fa),
.fas:not(.menu-social .fas):not(.menu-social a .fas):not(.footer-social .fas):not(.footer-social a .fas),
.fab:not(.menu-social .fab):not(.menu-social a .fab):not(.footer-social .fab):not(.footer-social a .fab),
.far:not(.menu-social .far):not(.menu-social a .far):not(.footer-social .far):not(.footer-social a .far),
.fal:not(.menu-social .fal):not(.menu-social a .fal):not(.footer-social .fal):not(.footer-social a .fal) {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: inherit !important;
    width: auto !important;
    height: auto !important;
    line-height: inherit !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: auto !important;
    font-style: normal !important;
    font-variant: normal !important;
}

/* Force FAB (brands) to use correct font - BUT EXCLUDE menu-social and footer-social */
i.fab:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i),
.fab:not(.menu-social .fab):not(.menu-social a .fab):not(.footer-social .fab):not(.footer-social a .fab),
[class^="fab"]:not(.menu-social [class^="fab"]):not(.menu-social a [class^="fab"]):not(.footer-social [class^="fab"]):not(.footer-social a [class^="fab"]),
[class*=" fab"]:not(.menu-social [class*=" fab"]):not(.menu-social a [class*=" fab"]):not(.footer-social [class*=" fab"]):not(.footer-social a [class*=" fab"]) {
    /* Font Awesome CSS will handle font-family automatically */
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Specific icon fixes */
.fa-instagram,
.fa-tiktok,
.fa-youtube,
.fa-facebook,
.fa-spotify,
.fa-moon,
.fa-sun,
.fa-bars,
.fa-times,
.fa-paper-plane,
.fa-envelope,
.fa-phone,
.fa-arrow-right,
.fa-chevron-right,
.fa-chevron-down {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* FIX: Social icons in Follow Tali section - Ensure Font Awesome Brands icons display correctly */
.social-icon i,
.social-icon i.fab,
.social-card .social-icon i,
.social-card .social-icon i.fab,
.social-grid .social-card .social-icon i,
.social-integration .social-card .social-icon i {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: auto !important;
}

/* Set ::before content for social icons (Font Awesome unicode values) */
.social-icon i.fa-instagram::before,
.social-icon i.fab.fa-instagram::before,
.social-card .social-icon i.fa-instagram::before,
.social-card .social-icon i.fab.fa-instagram::before {
    content: "\f16d" !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    display: inline-block !important;
}

.social-icon i.fa-tiktok::before,
.social-icon i.fab.fa-tiktok::before,
.social-card .social-icon i.fa-tiktok::before,
.social-card .social-icon i.fab.fa-tiktok::before {
    content: "\e07b" !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    display: inline-block !important;
}

.social-icon i.fa-youtube::before,
.social-icon i.fab.fa-youtube::before,
.social-card .social-icon i.fa-youtube::before,
.social-card .social-icon i.fab.fa-youtube::before {
    content: "\f167" !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    display: inline-block !important;
}

.social-icon i.fa-facebook::before,
.social-icon i.fab.fa-facebook::before,
.social-card .social-icon i.fa-facebook::before,
.social-card .social-icon i.fab.fa-facebook::before {
    content: "\f09a" !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    display: inline-block !important;
}

/* Ensure social-icon container displays properly */
.social-icon,
.social-card .social-icon,
.social-grid .social-card .social-icon,
.social-integration .social-card .social-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Theme toggle icon - Hide <i> since JavaScript uses SVG */
#theme-toggle i,
.theme-toggle i {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
}

/* Footer social icons - Use Font Awesome Brands font */
.footer-social i,
.footer-social a i,
.footer-social i.fab,
.footer-social a i.fab,
.footer-social i.fa-instagram,
.footer-social i.fa-tiktok,
.footer-social i.fa-youtube,
.footer-social i.fa-facebook,
.footer-social i.fa-spotify {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1rem !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Menu social icons - COMPLETELY EXCLUDE FROM icon-fix.css - LET FONT AWESOME WORK NATURALLY */
.menu-social i,
.menu-social a i,
.menu-overlay .menu-social i,
.menu-overlay .menu-social a i,
.menu-overlay.active .menu-social i,
.menu-overlay.active .menu-social a i {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* Let Font Awesome handle font-family automatically */
    /* DO NOT set font-family, font-weight, or font-style here */
}

[data-theme="dark"] .menu-social a i,
[data-theme="dark"] .menu-social i,
[data-theme="dark"] .menu-social a i.fab,
html[data-theme="dark"] .menu-social a i,
body[data-theme="dark"] .menu-social a i {
    color: #ffffff !important;
}

.menu-social a {
    width: 45px !important;
    height: 45px !important;
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    position: relative !important;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !important;
    border: none !important;
}

:not([data-theme="dark"]) .menu-social a {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

[data-theme="dark"] .menu-social a,
html[data-theme="dark"] .menu-social a,
body[data-theme="dark"] .menu-social a,
.menu-overlay[data-theme="dark"] .menu-social a {
    background: #1E293B !important;
    background-color: #1E293B !important;
    border: none !important;
}

.menu-social a::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--accent-color) !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease-out !important;
    z-index: 1 !important;
}

[data-theme="dark"] .menu-social a::before {
    background: #FFD700 !important;
}

.menu-social a:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.menu-social a:hover::before {
    opacity: 0 !important;
}

/* Disable background change on active/click state - highest priority */
.menu-social a:active,
.menu-social a:active::before,
.menu-social a:active::after {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
}

.menu-social a:active::before,
.menu-social a:active::after {
    opacity: 0 !important;
    display: none !important;
    visibility: hidden !important;
}

[data-theme="dark"] .menu-social a:active,
[data-theme="dark"] .menu-social a:active::before,
[data-theme="dark"] .menu-social a:active::after {
    background: #1E293B !important;
    background-color: #1E293B !important;
    background-image: none !important;
}

[data-theme="dark"] .menu-social a:active::before,
[data-theme="dark"] .menu-social a:active::after {
    opacity: 0 !important;
    display: none !important;
    visibility: hidden !important;
}

.menu-social a:hover i {
    color: white !important;
}

[data-theme="dark"] .menu-social a:hover i {
    color: #0f172a !important;
}

/* Hamburger - keep it visible */
.hamburger-btn,
.hamburger-btn span,
#hamburgerBtn,
#hamburgerBtn span {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Newsletter icon */
.newsletter-btn i {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Modal icons */
.streaming-link i,
.streaming-modal-close i {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Back to top icon */
#backToTop i,
.back-to-top i {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override ANY rule trying to hide icons */
* i.fa,
* i.fas,
* i.fab,
* i.far,
* .fa,
* .fas,
* .fab,
* .far {
    display: inline-block !important;
    opacity: 1 !important;
}

/* Prevent transitions from hiding icons */
i,
i.fa,
i.fas,
i.fab,
i.far {
    transition: color 0.3s ease !important;
    /* Only transition color, nothing else */
}

/* Ensure icons work in all contexts - BUT EXCLUDE menu-social and footer-social */
button i:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i),
a i:not(.menu-social i):not(.menu-social a i):not(.menu-overlay .menu-social i):not(.menu-overlay .menu-social a i):not(.footer-social i):not(.footer-social a i),
div i:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i),
span i:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i),
nav i:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i),
footer i:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i),
header i:not(.menu-social i):not(.menu-social a i):not(.footer-social i):not(.footer-social a i) {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure menu-social uses Font Awesome Brands properly - Override icon-fix.css rules */
.menu-social i,
.menu-social a i,
.menu-social i.fab,
.menu-social a i.fab,
.menu-social i.fa-instagram,
.menu-social i.fa-tiktok,
.menu-social i.fa-youtube,
.menu-social i.fa-facebook,
.menu-social i.fa-spotify,
.menu-overlay .menu-social i,
.menu-overlay .menu-social a i,
.menu-overlay.active .menu-social i,
.menu-overlay.active .menu-social a i,
i.fab.fa-instagram,
i.fab.fa-tiktok,
i.fab.fa-youtube,
i.fab.fa-facebook,
i.fab.fa-spotify,
i.fab.fa-amazon,
i.fab.fa-soundcloud,
i.fab.fa-apple,
i.fab.fa-deezer {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* OVERRIDE: Menu Social Icons - MUST BE AT END - Ensure proper font for all menu-social icons */
.menu-overlay .menu-social i,
.menu-overlay .menu-social a i,
.menu-overlay.active .menu-social i,
.menu-overlay.active .menu-social a i,
.menu-content .menu-social i,
.menu-content .menu-social a i,
.menu-social i,
.menu-social a i,
.menu-social i.fab,
.menu-social a i.fab,
.menu-social i.fa-instagram,
.menu-social i.fa-tiktok,
.menu-social i.fa-youtube,
.menu-social i.fa-facebook,
.menu-social i.fa-spotify,
.menu-social a i.fa-instagram,
.menu-social a i.fa-tiktok,
.menu-social a i.fa-youtube,
.menu-social a i.fa-facebook,
.menu-social a i.fa-spotify {
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Set ::before content for menu-social icons */
/* High specificity to override conflicting rules */
.menu-overlay .menu-social a i.fa-instagram::before,
.menu-overlay.active .menu-social a i.fa-instagram::before,
.menu-content .menu-social a i.fa-instagram::before,
.menu-social a i.fa-instagram::before,
.menu-social a i.fab.fa-instagram::before,
.menu-overlay .menu-social a i.fab.fa-instagram::before {
    content: "\f16d" !important;
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.menu-overlay .menu-social a i.fa-tiktok::before,
.menu-overlay.active .menu-social a i.fa-tiktok::before,
.menu-content .menu-social a i.fa-tiktok::before,
.menu-social a i.fa-tiktok::before,
.menu-social a i.fab.fa-tiktok::before,
.menu-overlay .menu-social a i.fab.fa-tiktok::before {
    content: "\e07b" !important;
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.menu-overlay .menu-social a i.fa-youtube::before,
.menu-overlay.active .menu-social a i.fa-youtube::before,
.menu-content .menu-social a i.fa-youtube::before,
.menu-social a i.fa-youtube::before,
.menu-social a i.fab.fa-youtube::before,
.menu-overlay .menu-social a i.fab.fa-youtube::before {
    content: "\f167" !important;
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.menu-overlay .menu-social a i.fa-facebook::before,
.menu-overlay.active .menu-social a i.fa-facebook::before,
.menu-content .menu-social a i.fa-facebook::before,
.menu-social a i.fa-facebook::before,
.menu-social a i.fab.fa-facebook::before,
.menu-overlay .menu-social a i.fab.fa-facebook::before {
    content: "\f09a" !important;
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.menu-overlay .menu-social a i.fa-spotify::before,
.menu-overlay.active .menu-social a i.fa-spotify::before,
.menu-content .menu-social a i.fa-spotify::before,
.menu-social a i.fa-spotify::before,
.menu-social a i.fab.fa-spotify::before,
.menu-overlay .menu-social a i.fab.fa-spotify::before {
    content: "\f1bc" !important;
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}