:root{
    --adp-orange:#fc9012;
    --adp-cyan:#00bddd;
    --adp-ink:#172033;
    --adp-muted:#64748b;
    --adp-line:#dce7ee;
    --adp-soft:#f5f9fc;
    --adp-warm:#fff8ef;
    --adp-white:#ffffff;
}


html[lang="ar"] .adp-related-tools,
html[lang="ar"] .adp-related-tools button,
html[lang="ar"] .adp-related-tools input,
html[lang="ar"] .adp-related-tools textarea,
html[lang="ar"] .adp-related-tools select{
    font-family:"Cairo",sans-serif;
}


html[lang="en"] .adp-related-tools,
html[lang="en"] .adp-related-tools button,
html[lang="en"] .adp-related-tools input,
html[lang="en"] .adp-related-tools textarea,
html[lang="en"] .adp-related-tools select{
    font-family:"Montserrat",sans-serif;
}


html[lang="ar"] .adp-related-tools h2{
    font-family:"Cairo",sans-serif !important;
    font-weight:700 !important;
}


.adp-related-tools{
    width:100%;
    max-width:1180px;

    margin:
        36px auto 12px;

    padding:
        24px;

    border:
        1px solid var(--adp-line);

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            var(--adp-white) 0%,
            var(--adp-soft) 100%
        );

    box-sizing:
        border-box;
}


.adp-related-tools *{
    box-sizing:
        border-box;
}


.adp-related-tools__head{
    margin-bottom:
        18px;
}


.adp-related-tools__title{
    margin:
        0 0 6px;

    color:
        var(--adp-ink);

    font-size:
        clamp(21px,2vw,27px);

    line-height:
        1.35;
}


.adp-related-tools__intro{
    margin:
        0;

    color:
        var(--adp-muted);

    font-size:
        14px;

    line-height:
        1.8;
}


.adp-related-tools__grid{
    display:
        grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        12px;
}


.adp-related-tools__card{
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-height:
        92px;

    padding:
        16px;

    border:
        1px solid var(--adp-line);

    border-radius:
        15px;

    background:
        var(--adp-white);

    color:
        var(--adp-ink);

    text-decoration:
        none !important;

    box-shadow:
        0 4px 18px rgba(23,32,51,.04);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.adp-related-tools__card:hover,
.adp-related-tools__card:focus-visible{
    border-color:
        var(--adp-cyan);

    box-shadow:
        0 9px 24px rgba(23,32,51,.08);

    transform:
        translateY(-2px);

    color:
        var(--adp-ink);

    text-decoration:
        none;
}


.adp-related-tools__icon{
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 44px;

    width:
        44px;

    height:
        44px;

    border-radius:
        12px;

    background:
        var(--adp-warm);

    color:
        var(--adp-orange);
}


.adp-related-tools__content{
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    min-width:
        0;
}


.adp-related-tools__name{
    color:
        var(--adp-ink);

    font-size:
        15px;

    line-height:
        1.55;
}


.adp-related-tools__action{
    color:
        var(--adp-cyan);

    font-size:
        12px;

    font-weight:
        700;
}


html[lang="ar"] .adp-related-tools{
    direction:
        rtl;

    text-align:
        right;
}


html[lang="en"] .adp-related-tools{
    direction:
        ltr;

    text-align:
        left;
}


@media (max-width:800px){

    .adp-related-tools{
        margin-top:
            26px;

        padding:
            18px;

        border-radius:
            17px;
    }


    .adp-related-tools__grid{
        grid-template-columns:
            1fr;
    }


    .adp-related-tools__card{
        min-height:
            78px;

        padding:
            14px;
    }
}


@media (max-width:480px){

    .adp-related-tools{
        padding:
            15px;

        margin-top:
            22px;

        border-radius:
            15px;
    }


    .adp-related-tools__title{
        font-size:
            20px;
    }


    .adp-related-tools__intro{
        font-size:
            13px;
    }


    .adp-related-tools__icon{
        flex-basis:
            40px;

        width:
            40px;

        height:
            40px;
    }
}


/*
 * Related Tools v1.0.1
 * Directly below the active tool.
 */
.adp-related-tools[data-adp-related-position="after-tool"]{
    margin-top:24px;
    margin-bottom:28px;
}


@media (max-width:800px){

    .adp-related-tools[data-adp-related-position="after-tool"]{
        margin-top:18px;
        margin-bottom:22px;
    }
}
