/* Unlock Social Icons - wrapper: flex + gap and margin fallback for icon spacing */
.unlock_addon_header_social {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-row-gap, 0) var(--grid-column-gap, 5px);
    justify-content: center;
    align-items: center;
}

/* Alignment (prefix_class on widget wrapper) */
.unlock_addon_header_social_align-left .unlock_addon_header_social,
.unlock_addon_header_social_align-left-tablet .unlock_addon_header_social,
.unlock_addon_header_social_align-left-mobile .unlock_addon_header_social {
    justify-content: flex-start;
    text-align: left;
}
.unlock_addon_header_social_align-center .unlock_addon_header_social,
.unlock_addon_header_social_align-center-tablet .unlock_addon_header_social,
.unlock_addon_header_social_align-center-mobile .unlock_addon_header_social {
    justify-content: center;
    text-align: center;
}
.unlock_addon_header_social_align-right .unlock_addon_header_social,
.unlock_addon_header_social_align-right-tablet .unlock_addon_header_social,
.unlock_addon_header_social_align-right-mobile .unlock_addon_header_social {
    justify-content: flex-end;
    text-align: right;
}

/* Spacing between icons: margin fallback (works even if gap is overridden) */
.unlock_addon_header_social .unlock-social-icons-grid-item + .unlock-social-icons-grid-item {
    margin-left: var(--grid-column-gap, 5px);
}

/* Grid item */
.unlock-social-icons-grid-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon link - size & padding from variables */
.unlock-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--icon-size, 1em);
    width: calc(var(--icon-size, 1em) + (2 * var(--icon-padding, 0.5em)));
    height: calc(var(--icon-size, 1em) + (2 * var(--icon-padding, 0.5em)));
    padding: var(--icon-padding, 0.5em);
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.unlock-social-icon i,
.unlock-social-icon svg {
    font-size: inherit;
    width: 1em;
    height: 1em;
}

/* Shape - Square */
.unlock_addon_header_social_shape-square .unlock-social-icon {
    border-radius: 0;
}

/* Shape - Rounded */
.unlock_addon_header_social_shape-rounded .unlock-social-icon {
    border-radius: 10%;
}

/* Shape - Circle */
.unlock_addon_header_social_shape-circle .unlock-social-icon {
    border-radius: 50%;
}

/* Official colors (when Color = Official Color; Custom overrides via widget selectors) */
.unlock-social-icon-facebook { background-color: #1877f2; }
.unlock-social-icon-facebook i,
.unlock-social-icon-facebook svg { color: #fff; fill: #fff; }

.unlock-social-icon-twitter,
.unlock-social-icon-x-twitter { background-color: #1da1f2; }
.unlock-social-icon-twitter i,
.unlock-social-icon-twitter svg,
.unlock-social-icon-x-twitter i,
.unlock-social-icon-x-twitter svg { color: #fff; fill: #fff; }

.unlock-social-icon-youtube { background-color: #ff0000; }
.unlock-social-icon-youtube i,
.unlock-social-icon-youtube svg { color: #fff; fill: #fff; }

.unlock-social-icon-instagram { background-color: #e4405f; }
.unlock-social-icon-instagram i,
.unlock-social-icon-instagram svg { color: #fff; fill: #fff; }

.unlock-social-icon-linkedin,
.unlock-social-icon-linkedin-in { background-color: #0077b5; }
.unlock-social-icon-linkedin i,
.unlock-social-icon-linkedin svg,
.unlock-social-icon-linkedin-in i,
.unlock-social-icon-linkedin-in svg { color: #fff; fill: #fff; }

.unlock-social-icon-pinterest,
.unlock-social-icon-pinterest-p { background-color: #bd081c; }
.unlock-social-icon-pinterest i,
.unlock-social-icon-pinterest svg,
.unlock-social-icon-pinterest-p i,
.unlock-social-icon-pinterest-p svg { color: #fff; fill: #fff; }

.unlock-social-icon-github { background-color: #333; }
.unlock-social-icon-github i,
.unlock-social-icon-github svg { color: #fff; fill: #fff; }

.unlock-social-icon-whatsapp { background-color: #25d366; }
.unlock-social-icon-whatsapp i,
.unlock-social-icon-whatsapp svg { color: #fff; fill: #fff; }

.unlock-social-icon-tiktok { background-color: #000; }
.unlock-social-icon-tiktok i,
.unlock-social-icon-tiktok svg { color: #fff; fill: #fff; }

.unlock-social-icon-threads { background-color: #000; }
.unlock-social-icon-threads i,
.unlock-social-icon-threads svg { color: #fff; fill: #fff; }

.unlock-social-icon-envelope { background-color: #ea4335; }
.unlock-social-icon-envelope i,
.unlock-social-icon-envelope svg { color: #fff; fill: #fff; }

.unlock-social-icon-link { background-color: #5f6368; }
.unlock-social-icon-link i,
.unlock-social-icon-link svg { color: #fff; fill: #fff; }

.unlock-social-icon-rss { background-color: #f26522; }
.unlock-social-icon-rss i,
.unlock-social-icon-rss svg { color: #fff; fill: #fff; }

.unlock-social-icon-wordpress { background-color: #21759b; }
.unlock-social-icon-wordpress i,
.unlock-social-icon-wordpress svg { color: #fff; fill: #fff; }

/* Screen reader only */
.unlock-screen-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}