/* FOLLOWING_PAGE_V1 */

.following-page{

    width:100%;

    height:100%;

    min-height:0;

    display:grid;

    grid-template-rows:auto minmax(0,1fr);

    overflow:hidden;

    padding:0;

    background:#fff;

}

.following-hero{

    position:relative;

    padding:22px 18px 18px 54px;

    background:#111;

    color:#fff;

}

.following-back{

    position:absolute;

    left:14px;

    top:50%;

    transform:translateY(-50%);

    color:#fff;

    font-size:34px;

    text-decoration:none;

}

.following-hero small{

    color:#ffd900;

    font-size:11px;

    font-weight:850;

    letter-spacing:2px;

}

.following-hero h1{

    margin:7px 0 5px;

    font-size:28px;

    font-weight:900;

}

.following-hero p{

    margin:0;

    color:#aaa;

    font-size:12px;

}

.following-scroll{

    min-height:0;

    overflow-y:auto;

    padding:16px 14px 30px;

}

.following-list{

    display:grid;

    gap:12px;

}

.following-card{

    min-height:88px;

    padding:17px 16px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    border:1px solid #ededed;

    border-radius:16px;

    color:#111;

    text-decoration:none;

}

.following-name{

    font-size:21px;

    font-weight:900;

}

.following-meta{

    margin-top:8px;

    color:#999;

    font-size:12px;

}

.following-enter{

    flex:0 0 auto;

    padding:10px 13px;

    border-radius:999px;

    background:#111;

    color:#fff;

    font-size:12px;

    font-weight:800;

}

.following-loading,

.following-empty{

    min-height:52vh;

    display:grid;

    place-items:center;

    align-content:center;

    text-align:center;

    color:#aaa;

    font-size:13px;

}

.following-empty strong{

    color:#111;

    font-size:19px;

}

.following-empty p{

    margin:9px 0 20px;

}

.following-action{

    width:150px;

    height:44px;

    display:grid;

    place-items:center;

    border-radius:12px;

    background:#111;

    color:#fff;

    text-decoration:none;

    font-weight:800;

}


/* FOLLOWING_CANCEL_V1 */

.following-brand-link{
    min-width:0;
    flex:1;
    color:#111;
    text-decoration:none;
}

.following-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
}

.following-unfollow{
    height:34px;
    padding:0 11px;

    border:1px solid #ddd;
    border-radius:999px;

    background:#fff;
    color:#777;

    font:inherit;
    font-size:11px;
    font-weight:750;
    white-space:nowrap;
}

.following-unfollow:disabled{
    opacity:.5;
}

.following-enter{
    text-decoration:none;
}

@media (max-width:390px){

    .following-card{
        gap:10px;
    }

    .following-actions{
        gap:6px;
    }

    .following-unfollow{
        padding:0 9px;
    }

    .following-enter{
        padding-left:11px;
        padding-right:11px;
    }
}

/* FOLLOWING_UNFOLLOW_CONFIRM_V1 */

.following-confirm-overlay{
    position:fixed;
    inset:0;
    z-index:9999;

    display:grid;
    place-items:center;

    padding:24px;

    background:rgba(0,0,0,.42);
}

.following-confirm-box{
    width:min(320px,100%);

    padding:24px 20px 18px;

    border-radius:18px;

    background:#fff;
    color:#111;

    text-align:center;

    box-shadow:0 18px 50px rgba(0,0,0,.22);
}

.following-confirm-brand{
    display:block;

    font-size:22px;
    line-height:1.2;
    font-weight:900;
}

.following-confirm-box p{
    margin:10px 0 22px;

    color:#555;

    font-size:14px;
    line-height:1.5;
}

.following-confirm-actions{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:10px;
}

.following-confirm-actions button{
    height:44px;

    border:1px solid #ddd;
    border-radius:12px;

    background:#fff;
    color:#111;

    font:inherit;
    font-size:14px;
    font-weight:800;
}

.following-confirm-actions .is-confirm{
    border-color:#111;

    background:#111;
    color:#fff;
}