/*
 * FrontHub Tool Arrow Fix v93
 * Filter and dark-mode logic are intentionally untouched.
 *
 * The previous fix kept the arrow control white. This version restores the
 * arrow control itself as a blue circular/square chip with a white arrow,
 * so it remains visible on both white and blue tool cards.
 */

#toolsGrid .fh-tool-card .fh-tool-arrow,
.fh-tool-card .fh-tool-arrow{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;

    padding:0!important;
    margin:0!important;

    background:#5362e8!important;
    background-color:#5362e8!important;
    background-image:linear-gradient(135deg,#5b5cf0,#349cf2)!important;

    border:0!important;
    border-radius:10px!important;

    color:#fff!important;
    opacity:1!important;
    visibility:visible!important;

    box-shadow:0 5px 14px rgba(64,81,210,.24)!important;

    position:relative!important;
    z-index:3!important;

    overflow:visible!important;
}

/* Existing span arrow */
#toolsGrid .fh-tool-card .fh-tool-arrow span,
.fh-tool-card .fh-tool-arrow span{
    display:block!important;
    color:#fff!important;
    font-size:21px!important;
    line-height:1!important;
    font-weight:700!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    text-shadow:none!important;
}

/*
 * Defensive fallback:
 * if another CSS rule hides/empties the existing span glyph, render a real
 * arrow from the button itself.
 */
#toolsGrid .fh-tool-card .fh-tool-arrow::after,
.fh-tool-card .fh-tool-arrow::after{
    content:"→"!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-53%)!important;
    color:#fff!important;
    font-size:21px!important;
    line-height:1!important;
    font-weight:700!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:none!important;
}

/* Avoid a double arrow when the original span is visible. */
#toolsGrid .fh-tool-card .fh-tool-arrow span,
.fh-tool-card .fh-tool-arrow span{
    color:transparent!important;
}

/* Hover */
#toolsGrid .fh-tool-card .fh-tool-arrow:hover,
.fh-tool-card .fh-tool-arrow:hover{
    background:#4353dc!important;
    background-color:#4353dc!important;
    background-image:linear-gradient(135deg,#4d50df,#268de4)!important;
    transform:translateY(-1px)!important;
}

/* Selected blue cards: keep a visible contrasting arrow chip. */
#toolsGrid .fh-tool-card.fhv90-blue-card .fh-tool-arrow,
#toolsGrid .fh-tool-card.fhv89-category-card .fh-tool-arrow,
#toolsGrid.fh-filter-all .fh-tool-card .fh-tool-arrow,
#toolsGrid:not(.fh-filter-all) .fh-tool-card:not([hidden]) .fh-tool-arrow{
    background:#fff!important;
    background-color:#fff!important;
    background-image:none!important;
    border:1px solid rgba(255,255,255,.85)!important;
}

/* On blue cards the fallback arrow is blue inside the white chip. */
#toolsGrid .fh-tool-card.fhv90-blue-card .fh-tool-arrow::after,
#toolsGrid .fh-tool-card.fhv89-category-card .fh-tool-arrow::after,
#toolsGrid.fh-filter-all .fh-tool-card .fh-tool-arrow::after,
#toolsGrid:not(.fh-filter-all) .fh-tool-card:not([hidden]) .fh-tool-arrow::after{
    color:#4b58d8!important;
}

/* Dark mode: same high-contrast treatment. */
html[data-theme="dark"] #toolsGrid .fh-tool-card .fh-tool-arrow,
html.dark #toolsGrid .fh-tool-card .fh-tool-arrow,
body.dark #toolsGrid .fh-tool-card .fh-tool-arrow,
body.dark-mode #toolsGrid .fh-tool-card .fh-tool-arrow{
    opacity:1!important;
    visibility:visible!important;
}