/* Cofrecito v1.10.2 — reactions definitive layout */
.reaction-popover-wrap{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important
}
.v140-post footer,
.v140-post footer .actions,
.post-detail-actions{
    overflow:visible!important
}
.v140-post footer .actions .reaction-popover-wrap{
    flex:1 1 0!important
}
.reaction-trigger-v1100{
    appearance:none!important;
    border:0!important;
    background:transparent!important;
    color:#68768a!important;
    min-height:42px!important;
    width:100%!important;
    padding:8px 12px!important;
    border-radius:10px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    font:750 .88rem/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
    cursor:pointer!important
}
.reaction-trigger-v1100:hover,
.reaction-trigger-v1100.has-reaction{
    background:#eef4fb!important;
    color:#235f9f!important
}
.reaction-trigger-icon{
    font-size:1.08rem!important
}

/* Hidden by default. This is the rule missing on authenticated home. */
.reaction-popover-v1100{
    position:absolute!important;
    left:50%!important;
    bottom:calc(100% + 10px)!important;
    top:auto!important;
    z-index:99999!important;
    width:max-content!important;
    max-width:min(430px,94vw)!important;
    margin:0!important;
    padding:7px!important;
    border:1px solid #dce5ef!important;
    border-radius:999px!important;
    background:#fff!important;
    box-shadow:0 16px 44px rgba(16,35,63,.25)!important;

    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:4px!important;

    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate(-50%,8px) scale(.96)!important;
    transition:
        opacity .14s ease,
        transform .14s ease,
        visibility .14s ease!important
}
.reaction-popover-wrap.is-open>.reaction-popover-v1100{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate(-50%,0) scale(1)!important
}

.reaction-quick-v1100{
    position:relative!important;
    appearance:none!important;
    width:54px!important;
    min-width:54px!important;
    height:54px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:transparent!important;
    display:grid!important;
    place-items:center!important;
    cursor:pointer!important;
    transition:transform .13s ease,background .13s ease!important
}
.reaction-quick-v1100>span{
    font-size:1.65rem!important;
    line-height:1!important
}
.reaction-quick-v1100>small{
    position:absolute!important;
    left:50%!important;
    bottom:calc(100% + 7px)!important;
    transform:translate(-50%,4px)!important;
    padding:5px 7px!important;
    border-radius:7px!important;
    background:#10233f!important;
    color:#fff!important;
    font-size:.58rem!important;
    font-weight:700!important;
    line-height:1!important;
    white-space:nowrap!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important
}
.reaction-quick-v1100:hover{
    transform:translateY(-5px) scale(1.12)!important;
    background:#f1f5fa!important
}
.reaction-quick-v1100:hover>small{
    opacity:1!important;
    visibility:visible!important;
    transform:translate(-50%,0)!important
}
.reaction-quick-v1100.active{
    background:#eaf2fb!important;
    box-shadow:inset 0 0 0 2px #8db5df!important
}

@media(max-width:650px){
    .reaction-popover-v1100{
        position:fixed!important;
        left:50%!important;
        bottom:86px!important;
        top:auto!important;
        max-width:94vw!important;
        padding:8px!important;
        transform:translate(-50%,10px) scale(.96)!important
    }
    .reaction-popover-wrap.is-open>.reaction-popover-v1100{
        transform:translate(-50%,0) scale(1)!important
    }
    .reaction-quick-v1100{
        width:48px!important;
        min-width:48px!important;
        height:48px!important
    }
    .reaction-quick-v1100>span{
        font-size:1.48rem!important
    }
    .reaction-quick-v1100>small{
        display:none!important
    }
}