/* =========================================================
   REKLAMA CONTENT
========================================================= */

.reklama-content {

    width: 100%;

    margin-top: 26px;

    padding: 24px 28px 26px;

    background: #b8b8b8;

    border: 1px solid #8c8c8c;

    border-radius: 4px;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, .20);
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.reklama-highlight {

    display: flex;

    align-items: center;

    min-height: 42px;

    margin-bottom: 18px;

    padding: 9px 14px;

    background: #cfcfcf;

    border-left: 4px solid #a0522d;

    color: #222;

    font-size: 16px;

    font-weight: bold;

    line-height: 23px;
}


.reklama-bullet {

    display: inline-block;

    margin-right: 10px;

    color: #a0522d;

    font-size: 22px;

    font-weight: bold;

    line-height: 20px;
}


/* =========================================================
   CONTACTS
========================================================= */

.reklama-contacts {

    display: grid;

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

    gap: 10px 12px;

    margin-bottom: 22px;

    padding-bottom: 22px;

    border-bottom: 1px solid #929292;
}


/* =========================================================
   CONTACT ITEM
========================================================= */

.contact-item {

    display: flex;

    align-items: center;

    min-width: 0;

    min-height: 54px;

    padding: 8px 14px;

    background: #d0d0d0;

    border: 1px solid #999999;

    border-radius: 4px;

    color: #222;

    font-size: 15px;

    font-weight: bold;

    text-decoration: none;

    box-shadow:
        0 2px 4px rgba(0, 0, 0, .16);

    transition:
        transform .16s ease,
        background-color .16s ease,
        box-shadow .16s ease;
}


.contact-item:hover {

    transform: translateY(-2px);

    background: #dddddd;

    text-decoration: none;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, .23);
}


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

.contact-icon {

    width: 36px;

    height: 36px;

    flex: 0 0 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 12px;

    border-radius: 50%;

    color: #ffffff;

    font-size: 16px;

    line-height: 1;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.25),
        0 1px 3px rgba(0,0,0,.25);
}


.contact-icon i {

    line-height: 1;
}


/* =========================================================
   PHONE
========================================================= */

.contact-item.phone {

    color: #218838;
}

.contact-item.phone .contact-icon {

    background: #218838;
}


/* =========================================================
   EMAIL
========================================================= */

.contact-item.email {

    color: #b04a2f;
}

.contact-item.email .contact-icon {

    background: #b04a2f;
}


/* =========================================================
   MESSENGER
========================================================= */

.contact-item.messenger {

    color: #0084ff;
}

.contact-item.messenger .contact-icon {

    background: linear-gradient(
        135deg,
        #00c6ff,
        #0078ff
    );

    font-size: 18px;
}


/* =========================================================
   FACEBOOK
========================================================= */

.contact-item.facebook {

    color: #1877f2;
}

.contact-item.facebook .contact-icon {

    background: #1877f2;

    font-size: 18px;
}


/* =========================================================
   CONTACT TEXT
========================================================= */

.contact-text {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   RULES
========================================================= */

.reklama-rules {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.reklama-rule {

    display: flex;

    align-items: flex-start;

    color: #222;

    font-size: 15px;

    line-height: 22px;
}


.reklama-rule .reklama-bullet {

    flex: 0 0 auto;

    margin-top: 1px;

    margin-right: 9px;

    font-size: 20px;
}


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

@media screen and (max-width: 600px) {

    .reklama-content {

        margin-top: 20px;

        padding: 16px 12px 18px;
    }


    .reklama-highlight {

        margin-bottom: 14px;

        padding: 8px 10px;

        font-size: 14px;

        line-height: 20px;
    }


    .reklama-contacts {

        grid-template-columns: 1fr;

        gap: 8px;

        margin-bottom: 17px;

        padding-bottom: 17px;
    }


    .contact-item {

        min-height: 48px;

        padding: 6px 11px;

        font-size: 14px;
    }


    .contact-icon {

        width: 32px;

        height: 32px;

        flex-basis: 32px;

        margin-right: 10px;

        font-size: 14px;
    }


    .contact-item.messenger .contact-icon {

        font-size: 16px;
    }


    .contact-item.facebook .contact-icon {

        font-size: 16px;
    }


    .reklama-rule {

        font-size: 13px;

        line-height: 19px;
    }


    .reklama-rule .reklama-bullet {

        margin-right: 7px;

        font-size: 18px;
    }

}