/* === Komfoterra: Zero-кнопки с классом .btn-light (надёжная версия) === */
/* Работает при любом месте класса: на .tn-elem или на .tn-atom. */
/* Размеры берутся из рамки элемента в Zero — мы их не меняем. */

/* БАЗА — когда класс на КОНТЕЙНЕРЕ .tn-elem */
.t396 .tn-elem.btn-light[data-elem-type="button"] > .tn-atom{
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;

  padding: 0 24px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;

  border: 0 !important; border-radius: 5px !important;
  color: #ffffff !important; text-decoration: none !important;
  position: relative !important; overflow: hidden !important; cursor: pointer !important;

  background-color: transparent !important;
  background-image: linear-gradient(0.518turn, rgba(211,170,110,1) 0%, rgba(187,123,73,1) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 200% 200% !important;
  background-position: 0% 50% !important;

  animation: gradient-breath 6s ease-in-out infinite !important;
  transition: box-shadow .3s ease, filter .25s ease !important;
}

/* БАЗА — когда класс на самой КНОПКЕ .tn-atom */
.t396 .tn-elem[data-elem-type="button"] > .tn-atom.btn-light{
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;

  padding: 0 24px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;

  border: 0 !important; border-radius: 5px !important;
  color: #ffffff !important; text-decoration: none !important;
  position: relative !important; overflow: hidden !important; cursor: pointer !important;

  background-color: transparent !important;
  background-image: linear-gradient(0.518turn, rgba(211,170,110,1) 0%, rgba(187,123,73,1) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 200% 200% !important;
  background-position: 0% 50% !important;

  animation: gradient-breath 6s ease-in-out infinite !important;
  transition: box-shadow .3s ease, filter .25s ease !important;
}

/* Мягкое «дыхание» градиента */
@keyframes gradient-breath{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* FLASH-полоса (hover) */
.t396 .tn-elem.btn-light[data-elem-type="button"] > .tn-atom::before,
.t396 .tn-elem[data-elem-type="button"] > .tn-atom.btn-light::before{
  content:""; position:absolute; top:0; left:-75%;
  width:50%; height:100%; transform:skewX(-25deg);
  border-radius:5px; pointer-events:none; opacity:0;
  background:linear-gradient(120deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 80%);
}
.t396 .tn-elem.btn-light[data-elem-type="button"] > .tn-atom:hover::before,
.t396 .tn-elem[data-elem-type="button"] > .tn-atom.btn-light:hover::before{
  opacity:1; animation: flash 1s ease forwards;
}
@keyframes flash{ 0%{left:-75%} 50%{left:125%} 100%{left:125%} }

/* Автопроблеск раз в 5с */
.t396 .tn-elem.btn-light[data-elem-type="button"] > .tn-atom::after,
.t396 .tn-elem[data-elem-type="button"] > .tn-atom.btn-light::after{
  content:""; position:absolute; top:0; left:-75%;
  width:50%; height:100%; transform:skewX(-25deg);
  border-radius:5px; pointer-events:none; opacity:0;
  background:linear-gradient(120deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 80%);
  animation: auto-flash 5s ease-in-out infinite;
}
@keyframes auto-flash{
  0%{left:-75%;opacity:0}
  2%{left:-75%;opacity:1}
  5%{left:125%;opacity:1}
  7%{left:125%;opacity:0}
  100%{left:-75%;opacity:0}
}

/* Hover — без смещения, с мягкой подсветкой и тенью */
.t396 .tn-elem.btn-light[data-elem-type="button"] > .tn-atom:hover,
.t396 .tn-elem[data-elem-type="button"] > .tn-atom.btn-light:hover{
  box-shadow: 0 6px 15px rgba(0,0,0,.15) !important;
  filter: brightness(1.06) saturate(1.02) !important;
}

/* Адаптив — меньше паддинги на узких экранах */
@media (max-width: 480px){
  .t396 .tn-elem.btn-light[data-elem-type="button"] > .tn-atom,
  .t396 .tn-elem[data-elem-type="button"] > .tn-atom.btn-light{
    padding: 0 16px !important;
  }
}
