
/*.btn {*/
/*    border-radius: 100px;*/
/*    padding: 13px 25px;*/
/*    font-weight: 500;*/
/*    font-size: 14px;*/
/*    line-height: 120%;*/
/*    display: block;*/
/*    color: white;*/
/*}*/
/*.btn--primary {*/
/*    background-color: var(--red);*/
/*}*/
/*.btn--secondary {*/
/*    background-color: var(--blue);*/
/*}*/

/*.btn--ghost{*/
/*    background:transparent;*/
/*    color:var(--red);*/
/*    border-color:var(--red);*/
/*    border:solid 1px var(--red);*/
/*}*/
/*.btn--ghost:hover{*/
/*    background:rgba(176,53,53,.06);*/
/*}*/



.btn{
    --btn-bg: var(--red);
    --btn-accent: var(--red-darck);   /* тёмно-красный слой */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 25px;
    border-radius: 100px;
    font: 500 14px/1.2 var(--font, inherit);
    color:#fff;
    background: var(--btn-bg);
    overflow: hidden;
    isolation: isolate;
}


.btn::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    left:-20%;
    width:140%;
    background: var(--btn-accent);
    transform: skewX(-25deg) translateX(-100%);
    transition: transform .45s ease;
    z-index:0;
}
.btn:hover::after{
    transform: skewX(-25deg) translateX(0);
}

/* Текст поверх эффекта */
.btn > *{ position: relative; z-index: 1; }

/* Варианты */
.btn--primary{ --btn-bg: var(--red); --btn-accent: var(--red-darck); }
.btn--secondary{ --btn-bg: var(--blue); --btn-accent:  var(--red-darck); }
.btn--ghost{
    --btn-bg: transparent;
    --btn-accent: rgba(176,53,53,.9);
    color: var(--red);
    border:1px solid var(--red);
}
.btn--ghost:hover{ color:#fff; }



.site-header__socials-link {
    display: inline-block;
    width: 43px;
    height: 43px;
    border-radius: 100%;
    background-color: var(--grey);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.site-header__socials-link[aria-label="Telegram"] {
    background-image: url('../images/tg.svg');
}


.site-header__socials-link[aria-label="WhatsApp"] {
    background-image: url('../images/wh.svg');
}

.icons-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
}

.icons-wrapper a {
    width: 43px;
    height: 43px;
    display: flex;
    border-radius: 100%;
    background-color: var(--red);
    align-items: center;
    justify-content: center;
}

.icons-wrapper a img {
    object-fit: contain;
    max-width: 24px;
    max-height: 24px;
}


