.pidii-socialhub{
    --pidii-platform-color:#334155;
    width:100%;
}
.pidii-socialhub__intro{
    margin-bottom:.75rem;
    color:inherit;
    font-weight:700;
}
.pidii-socialhub__list{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--pidii-social-gap);
}
.pidii-socialhub--align-left .pidii-socialhub__list{justify-content:flex-start}
.pidii-socialhub--align-center .pidii-socialhub__list{justify-content:center}
.pidii-socialhub--align-right .pidii-socialhub__list{justify-content:flex-end}

.pidii-socialhub__item{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    color:inherit;
    text-decoration:none!important;
    transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.pidii-socialhub__item:hover,
.pidii-socialhub__item:focus-visible{
    transform:translateY(-2px);
}
.pidii-socialhub__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--pidii-social-size);
    height:var(--pidii-social-size);
    flex:0 0 var(--pidii-social-size);
    border-radius:var(--pidii-social-radius);
    background:var(--pidii-platform-color);
    color:#fff;
    font-size:calc(var(--pidii-social-size) * .31);
    font-weight:800;
    line-height:1;
    letter-spacing:-.03em;
}
.pidii-socialhub--custom .pidii-socialhub__icon,
.pidii-socialhub--custom .pidii-socialhub__item{
    --pidii-platform-color:var(--pidii-social-custom-bg);
}
.pidii-socialhub--shadow .pidii-socialhub__icon,
.pidii-socialhub--shadow.pidii-socialhub--pills .pidii-socialhub__item,
.pidii-socialhub--shadow.pidii-socialhub--grid .pidii-socialhub__item{
    box-shadow:0 7px 20px rgba(15,23,42,.14);
}

/* Model: ikon saja */
.pidii-socialhub--icons .pidii-socialhub__label{display:none}

/* Model: ikon + nama */
.pidii-socialhub--icon_label .pidii-socialhub__item{
    padding:.18rem .35rem .18rem .18rem;
}

/* Model: pill */
.pidii-socialhub--pills .pidii-socialhub__item{
    padding:.38rem .8rem .38rem .38rem;
    border:1px solid rgba(148,163,184,.35);
    border-radius:999px;
    background:#fff;
    color:#18324b;
}

/* Model: grid card */
.pidii-socialhub--grid .pidii-socialhub__list{
    display:grid;
    grid-template-columns:repeat(var(--pidii-social-columns),minmax(0,1fr));
}
.pidii-socialhub--grid .pidii-socialhub__item{
    min-width:0;
    padding:.8rem;
    border:1px solid rgba(148,163,184,.30);
    border-radius:var(--pidii-social-radius);
    background:#fff;
    color:#18324b;
}

/* Model: footer */
.pidii-socialhub--footer .pidii-socialhub__item{
    font-size:.92rem;
}
.pidii-socialhub--footer .pidii-socialhub__icon{
    width:calc(var(--pidii-social-size) * .78);
    height:calc(var(--pidii-social-size) * .78);
    flex-basis:calc(var(--pidii-social-size) * .78);
    border-radius:50%;
}

/* Model: floating */
.pidii-socialhub--floating_left,
.pidii-socialhub--floating_right{
    position:fixed;
    top:50%;
    z-index:999;
    width:auto;
    transform:translateY(-50%);
}
.pidii-socialhub--floating_left{left:12px}
.pidii-socialhub--floating_right{right:12px}
.pidii-socialhub--floating_left .pidii-socialhub__list,
.pidii-socialhub--floating_right .pidii-socialhub__list{
    flex-direction:column;
}
.pidii-socialhub--floating_left .pidii-socialhub__label,
.pidii-socialhub--floating_right .pidii-socialhub__label{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
}
.pidii-socialhub--floating_left .pidii-socialhub__item,
.pidii-socialhub--floating_right .pidii-socialhub__item{
    position:relative;
}

/* Dark mode compatibility */
html[data-theme="dark"] .pidii-socialhub--pills .pidii-socialhub__item,
html[data-theme="dark"] .pidii-socialhub--grid .pidii-socialhub__item{
    background:#142434;
    color:#edf6ff;
    border-color:rgba(255,255,255,.12);
}

@media(max-width:700px){
    .pidii-socialhub--grid .pidii-socialhub__list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .pidii-socialhub--floating_left{left:6px}
    .pidii-socialhub--floating_right{right:6px}
}