/* =========================================================
   ToolZen Hub
   Calculators Empty State
========================================================= */


/* =========================================================
   EMPTY STATE
========================================================= */

.calculators-empty {

    display:
        grid;

    place-items:
        center;

    min-height:
        280px;

    margin-top:
        18px;

    padding:
        35px 25px;

    border:
        1px solid var(--calculators-border);

    border-radius:
        12px;

    background:
        var(--calculators-white);

    text-align:
        center;

    box-sizing:
        border-box;

}


/* =========================================================
   ICON
========================================================= */

.calculators-empty__icon {

    display:
        grid;

    place-items:
        center;

    width:
        52px;

    height:
        52px;

    margin-bottom:
        14px;

    border-radius:
        50%;

    background:
        var(--calculators-green-light);

    font-size:
        25px;

}


/* =========================================================
   TITLE
========================================================= */

.calculators-empty h2 {

    margin:
        0;

    color:
        var(--calculators-heading);

    font-size:
        20px;

    line-height:
        1.3;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.calculators-empty > p {

    max-width:
        500px;

    margin:
        8px auto 0;

    color:
        var(--calculators-body);

    font-size:
        13px;

    line-height:
        1.6;

}


/* =========================================================
   HELP SECTION
========================================================= */

.calculators-empty__help {

    max-width:
        560px;

    margin-top:
        24px;

    padding-top:
        20px;

    border-top:
        1px solid var(--calculators-border-light);

}


/* =========================================================
   HELP TITLE
========================================================= */

.calculators-empty__help h3 {

    margin:
        0;

    color:
        var(--calculators-heading);

    font-size:
        15px;

    line-height:
        1.4;

}


/* =========================================================
   HELP DESCRIPTION
========================================================= */

.calculators-empty__help p {

    margin:
        6px 0 14px;

    color:
        var(--calculators-body);

    font-size:
        12px;

    line-height:
        1.6;

}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.calculators-empty__contact {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        8px;

    background:
        var(--calculators-green);

    color:
        #FFFFFF;

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.calculators-empty__contact:hover {

    background:
        var(--calculators-green-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 15px rgba(0, 166, 81, .18);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .calculators-empty {

        min-height:
            260px;

        margin-top:
            12px;

        padding:
            30px 18px;

    }


    .calculators-empty h2 {

        font-size:
            19px;

    }


    .calculators-empty > p {

        font-size:
            12px;

    }


    .calculators-empty__help {

        margin-top:
            20px;

        padding-top:
            17px;

    }


    .calculators-empty__help h3 {

        font-size:
            14px;

    }

}

/* =========================================================
   HIDDEN STATE
   Keep empty state completely invisible until JavaScript
   explicitly shows it.
========================================================= */

.calculators-empty[hidden] {

    display:
        none !important;

}