/**
 * Footer social media icons styling.
 * Uses CSS variables set via PHP for dynamic colors.
 *
 * @package Codlion
 */

.footer-widget .codlion-social-links {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 14px;
}

.footer-widget .codlion-social-icon,
.footer-widget .codlion-social-links a.codlion-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    transition: opacity .25s ease;
    border: none;
    text-decoration: none;
    box-shadow: none;
    margin: 0;
}

.footer-widget .codlion-social-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--social-icon-color, var(--footer-text-color, #4a4a4a));
    transition: fill .25s ease, opacity .25s ease;
}

.footer-widget .codlion-social-icon:active,
.footer-widget .codlion-social-icon:focus,
.footer-widget .codlion-social-icon:hover,
.footer-widget .codlion-social-links a.codlion-social-icon:active,
.footer-widget .codlion-social-links a.codlion-social-icon:focus,
.footer-widget .codlion-social-links a.codlion-social-icon:hover {
    opacity: 0.7;
    background: transparent;
}

.footer-widget .codlion-social-icon:hover svg {
    fill: var(--primary-color, #a67c52);
}

.footer-widget .codlion-social-icon * {
    box-sizing: content-box;
}