/**
 * All of the CSS for your dashboard-specific functionality should be
 * included in this file.
 */


/* sortable social networks */
.social-linkz-social-networks {
    margin: 0px 0px -10px 0px;
    overflow: hidden;
    max-width: 990px;
}
.social-linkz-social-networks.social-linkz-sortable li {
    overflow: hidden;
    float: left;
    margin-bottom: 0px;
}
.social-linkz-social-networks.social-linkz-sortable li label {
    position: relative;
    width: 123px;
    height: 30px;
    font-size: 12px;
    float: left;
    background: #dddddd;
    color: #aaaaaa;
    margin: 0px 10px 10px 0px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
}
.social-linkz-social-networks li label.active {
    background: green;
    color: #ffffff;
}
.social-linkz-social-networks.social-linkz-sortable li label svg {
    fill: #ffffff;
    height: 15px;
    width: 30px;
}
.social-linkz-social-networks.social-linkz-sortable li label input[type="checkbox"] {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    z-index: -1;
}
li.social-linkz-social-network-twitter label.active {
    background: #000;
}
li.social-linkz-social-network-facebook label.active {
    background: #3b5998;
}
li.social-linkz-social-network-linkedin label.active {
    background: #0077B5;
}
li.social-linkz-social-network-pinterest label.active {
    background: #C92228;
}
li.social-linkz-social-network-buffer label.active {
    background: #323b43;
}
li.social-linkz-social-network-reddit label.active {
    background: #ff4500;
}
i.social-linkz-social-network-hackernews label.active {
    background: #F0652F;
}
li.social-linkz-social-network-pocket label.active {
    background: #ef4056;
}
li.social-linkz-social-network-whatsapp label.active {
    background: #25d366;
}
li.social-linkz-social-network-tumblr label.active {
    background: #35465c;
}
li.social-linkz-social-network-vkontakte label.active {
    background: #45668e;
}
li.social-linkz-social-network-xing label.active {
    background: #026466;
}
li.social-linkz-social-network-flipboard label.active {
    background: #e12828;
}
li.social-linkz-social-network-telegram label.active {
    background: #0088cc;
}
li.social-linkz-social-network-mastodon label.active {
    background: #6364FF;
}
li.social-linkz-social-network-mix label.active {
    background: #fd8235;
}
li.social-linkz-social-network-threads label.active {
    background: #000;
}
li.social-linkz-social-network-yummly label.active {
    background: #e16120;
}
li.social-linkz-social-network-sms label.active {
    background: #218AFF;
}
li.social-linkz-social-network-messenger label.active {
    background: #0078FF;
}
li.social-linkz-social-network-line label.active {
    background: #00B900;
}
li.social-linkz-social-network-email label.active {
    background: #319324;
}
li.social-linkz-social-network-print label.active {
    background: #d34836;
}
li.social-linkz-social-network-copy label.active {
    background: #816B5B;
}
li.social-linkz-social-network-subscribe label.active {
    background: #7A5189;
}
li.social-linkz-social-network-share label.active {
    background: #2A2A2C;
}
/* Social Linkz footer - Start
   ---------------------------------------------------------------------------
   Scoped to the `kc-sl-screen` body class that Admin\Footer sets, from the same
   is_plugin_admin_screen() check everything else uses, so it cannot drift from
   the real screen ids.

   #footer-left and #footer-upgrade are core's two footer lines. Both are
   emptied by filters as well, so hiding them is belt and braces for anything
   that hooks in later. */

/*
 * Leave core's footer where core put it.
 *
 * `#wpfooter` is `position: absolute; bottom: 0` inside `#wpwrap`, which
 * carries `min-height: 100%` — so a page whose content ends halfway down
 * still puts the footer at the bottom of the screen rather than floating it
 * in the middle. That is worth keeping.
 *
 * The only reason it ever broke is the reserve. Core leaves 65px of padding
 * at the foot of `#wpbody-content` for its own one-line footer, and this one
 * is taller, so an absolute footer sat on whatever the page ended with.
 * Returning it to normal flow fixed the overlap and threw the
 * bottom-of-screen behaviour away with it; growing the reserve fixes the
 * overlap and keeps both.
 */
body.kc-sl-screen #wpbody-content {
    padding-bottom: 100px;
}

body.kc-sl-screen #footer-left,
body.kc-sl-screen #footer-upgrade {
    display: none;
}

/*
 * A rule and the admin's own type — no card.
 *
 * Three zones on one line: identity, signature, links. A grid of
 * `1fr auto 1fr` rather than `justify-content: space-between`, because the
 * middle has to be centred on the row and not merely between its neighbours.
 * The sides are different widths and they change: a free build carries an extra
 * "Go PRO", and "Social Linkz PRO" is wider than "Social Linkz", so
 * space-between would put the signature in a slightly different place on every
 * build.
 */
.kc-sl-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px 24px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #dcdcde;
    color: #50575e;
    font-size: 13px;
}

.kc-sl-footer__identity,
.kc-sl-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}

.kc-sl-footer__identity {
    gap: 6px 10px;
}

/* The right track is a track, so its contents have to be pushed to it. */
.kc-sl-footer__links {
    justify-content: flex-end;
}

/* Small, because identity here is a signature and not a banner. */
.kc-sl-footer__mark.dashicons {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: #4f46e5;
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
}

.kc-sl-footer__name {
    color: #1d2327;
    font-weight: 600;
}

.kc-sl-footer__version {
    color: #646970;
}

.kc-sl-footer__heart {
    /*
     * An emoji sits high against 13px text, and its glyph box swallows the
     * space after it — "Made with ❤️by KaizenCoders" without this.
     */
    margin: 0 3px 0 1px;
    vertical-align: -1px;
}

/*
 * The signature. In its own track it is separated by the space either side of
 * it, so a rule would only add furniture.
 */
.kc-sl-footer__maker {
    margin: 0;
    color: #646970;
    text-align: center;
    white-space: nowrap;
}

.kc-sl-footer a {
    color: #4f46e5;
    text-decoration: none;
}

.kc-sl-footer a:hover,
.kc-sl-footer a:focus {
    color: #3730a3;
    text-decoration: underline;
}

.kc-sl-footer__stars {
    color: #f0a007;
    font-size: 12px;
    letter-spacing: 1px;
}

/*
 * The one request in a row of signposts, so it is the one thing given any
 * weight: gold stars and a warm chip, sized so it still sits on the row's
 * baseline rather than pushing the footer taller.
 *
 * Two classes, to beat the plain-link rule above on specificity rather than on
 * source order.
 */
.kc-sl-footer .kc-sl-footer__rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: #fff7e3;
    color: #8a6100;
    font-weight: 600;
}

.kc-sl-footer .kc-sl-footer__rating:hover,
.kc-sl-footer .kc-sl-footer__rating:focus {
    background: #fdeec4;
    color: #6b4b00;
    text-decoration: none;
}

.kc-sl-footer .kc-sl-footer__rating:hover .kc-sl-footer__stars,
.kc-sl-footer .kc-sl-footer__rating:focus .kc-sl-footer__stars {
    color: #d98c00;
}

/*
 * Go PRO, on free builds only.
 *
 * Filled rather than tinted: the rating chip beside it is a favour being asked
 * and is deliberately soft, while this is the action the page exists to offer.
 * Two chips of the same weight would compete; a solid one and a warm one read
 * as primary and secondary without either shouting.
 *
 * Two classes, to beat the plain-link rule on specificity rather than on source
 * order.
 */
.kc-sl-footer .kc-sl-footer__pro {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 9999px;
    background: #4f46e5;
    color: #fff;
    font-weight: 600;
}

.kc-sl-footer .kc-sl-footer__pro:hover,
.kc-sl-footer .kc-sl-footer__pro:focus {
    background: #3730a3;
    color: #fff;
    text-decoration: none;
}

/*
 * Below about 1100px the three tracks stop fitting and the links start wrapping
 * under a centre that is no longer in the centre of anything. A centred stack
 * is the honest shape at that width.
 */
@media screen and (max-width: 1100px) {
    .kc-sl-footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 16px;
        text-align: center;
    }

    .kc-sl-footer__links {
        justify-content: center;
    }

    /* Wrapped onto two or three lines, it needs more room reserved for it. */
    body.kc-sl-screen #wpbody-content {
        padding-bottom: 160px;
    }
}
/* Social Linkz footer - End */