/* ==================================================
СЕВЕРНЫЙ ВЕТЕР — TX16N2
Меняем ТОЛЬКО обводку и иконку
#rec3664024901
#rec4051495501
#rec4051855101
================================================== */


/* ==========================================

1. ОБВОДКА КАРТОЧЕК
========================================== */

#rec3664024901 .t668__wrapper,
#rec4051495501 .t668__wrapper,
#rec4051855101 .t668__wrapper {
border: 1px solid rgba(125, 134, 114, 0.55) !important;

transition:
    border-color 0.3s ease,
    background-color 0.3s ease !important;

}


/* При наведении обводка становится ярче */

#rec3664024901 .t668__wrapper:hover,
#rec4051495501 .t668__wrapper:hover,
#rec4051855101 .t668__wrapper:hover {
border-color: #7D8672 !important;
}


/* ==========================================
2. УБИРАЕМ СТАНДАРТНУЮ ИКОНКУ TILDA
========================================== */

#rec3664024901 .t668__icon,
#rec4051495501 .t668__icon,
#rec4051855101 .t668__icon {
border: none !important;
background: transparent !important;
}


/* Убираем стандартный + */

#rec3664024901 .t668__icon span,
#rec4051495501 .t668__icon span,
#rec4051855101 .t668__icon span {
display: none !important;
}


/* ==========================================
3. НОВАЯ ТЕХНИЧЕСКАЯ ИКОНКА
Четыре угловые метки
========================================== */

#rec3664024901 .t668__icon::before,
#rec4051495501 .t668__icon::before,
#rec4051855101 .t668__icon::before {
content: "";

position: absolute;

width: 18px;
height: 18px;

left: 50%;
top: 50%;

transform: translate(-50%, -50%);

background:

    linear-gradient(#7D8672, #7D8672)
    left top / 6px 1px no-repeat,

    linear-gradient(#7D8672, #7D8672)
    left top / 1px 6px no-repeat,

    linear-gradient(#7D8672, #7D8672)
    right top / 6px 1px no-repeat,

    linear-gradient(#7D8672, #7D8672)
    right top / 1px 6px no-repeat,

    linear-gradient(#7D8672, #7D8672)
    left bottom / 6px 1px no-repeat,

    linear-gradient(#7D8672, #7D8672)
    left bottom / 1px 6px no-repeat,

    linear-gradient(#7D8672, #7D8672)
    right bottom / 6px 1px no-repeat,

    linear-gradient(#7D8672, #7D8672)
    right bottom / 1px 6px no-repeat;

opacity: 0.75;

transition:
    transform 0.35s ease,
    opacity 0.35s ease;

}


/* ==========================================
4. ТОЧКА В ЦЕНТРЕ
========================================== */

#rec3664024901 .t668__icon::after,
#rec4051495501 .t668__icon::after,
#rec4051855101 .t668__icon::after {
content: "";

position: absolute;

left: 50%;
top: 50%;

width: 3px;
height: 3px;

background: #7D8672;

border-radius: 50%;

transform: translate(-50%, -50%);

opacity: 0.85;

}


/* ==========================================
5. HOVER ИКОНКИ
========================================== */

#rec3664024901 .t668__wrapper:hover .t668__icon::before,
#rec4051495501 .t668__wrapper:hover .t668__icon::before,
#rec4051855101 .t668__wrapper:hover .t668__icon::before {
transform:
translate(-50%, -50%)
rotate(45deg);

opacity: 1;

}


/* При hover центральная точка ярче */

#rec3664024901 .t668__wrapper:hover .t668__icon::after,
#rec4051495501 .t668__wrapper:hover .t668__icon::after,
#rec4051855101 .t668__wrapper:hover .t668__icon::after {
opacity: 1;
}


/* ==========================================
6. ТЕКСТ ОТВЕТА
Почти на всю ширину, но с аккуратным отступом справа
========================================== */

#rec3664024901 .t668__content,
#rec4051495501 .t668__content,
#rec4051855101 .t668__content {
max-width: none !important;
width: auto !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}


/* На мобильном уменьшаем правый отступ */

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

#rec3664024901 .t668__content,
#rec4051495501 .t668__content,
#rec4051855101 .t668__content {
padding-right: 12px !important;
}

}



/* ==================================================
СЕВЕРНЫЙ ВЕТЕР — TARGET STYLE ДЛЯ ВСЕХ КНОПОК
================================================== */

/* Zero Block + стандартные кнопки Tilda */

.t-btn,
.t-submit,
.tn-elem[data-elem-type="button"] .tn-atom {
position: relative !important;
}

/* Четыре технических уголка ВНУТРИ кнопки */

.t-btn::before,
.t-submit::before,
.tn-elem[data-elem-type="button"] .tn-atom::before {
content: "";
position: absolute;
inset: 4px;
pointer-events: none;
z-index: 5;

background:
linear-gradient(currentColor,currentColor) left top / 8px 1px no-repeat,
linear-gradient(currentColor,currentColor) left top / 1px 8px no-repeat,

linear-gradient(currentColor,currentColor) right top / 8px 1px no-repeat,
linear-gradient(currentColor,currentColor) right top / 1px 8px no-repeat,

linear-gradient(currentColor,currentColor) left bottom / 8px 1px no-repeat,
linear-gradient(currentColor,currentColor) left bottom / 1px 8px no-repeat,

linear-gradient(currentColor,currentColor) right bottom / 8px 1px no-repeat,
linear-gradient(currentColor,currentColor) right bottom / 1px 8px no-repeat;

opacity: .65;

transition:
inset .3s cubic-bezier(.16,1,.3,1),
opacity .25s ease;
}

/* HOVER — уголки немного сходятся внутрь */

.t-btn:hover::before,
.t-submit:hover::before,
.tn-elem[data-elem-type="button"] .tn-atom:hover::before {
inset: 7px;
opacity: 1;
}


/* ==================================================
ИСКЛЮЧЕНИЕ — КНОПКИ БЕЗ TARGET-ЭФФЕКТА
Класс: no-target
================================================== */

.no-target .tn-atom::before,
.no-target.t-btn::before,
.no-target.t-submit::before {
content: none !important;
display: none !important;
background: none !important;
}

</style>