/* ТВК - мʼякі обʼємні кнопки (28.10.2026, Ч226, з дозволу Директора).
   Замість яскравих червоних «плям» - білі обʼємні кнопки з червоним текстом, як плашки «Аварії» / «Нове»
   і картки «Сплатити» / «Обіцяний платіж». Підключається ПІСЛЯ style.css, сам style.css не змінено. */
.btn-red,.btn.btn-red{
  background:linear-gradient(180deg,#ffffff 0%,#fff5f6 100%)!important;
  color:var(--red,#e23340)!important;
  border:1px solid rgba(226,51,64,.20)!important;
  box-shadow:0 1px 2px rgba(20,20,30,.05),0 6px 18px rgba(226,51,64,.10),inset 0 1px 0 #fff!important;
  font-weight:700;text-shadow:none!important;
  transition:box-shadow .2s,transform .2s,background .2s;
}
.btn-red:hover,.btn.btn-red:hover{
  background:linear-gradient(180deg,#fff 0%,#ffecee 100%)!important;
  box-shadow:0 2px 4px rgba(20,20,30,.06),0 10px 26px rgba(226,51,64,.16),inset 0 1px 0 #fff!important;
  transform:translateY(-1px);
}
.btn-red:active,.btn.btn-red:active{transform:translateY(0);box-shadow:0 1px 2px rgba(20,20,30,.06),0 3px 10px rgba(226,51,64,.10)!important}
.btn-red[disabled]{opacity:.65;transform:none}

.btn-ghost,.btn.btn-ghost{
  background:linear-gradient(180deg,#ffffff 0%,#fafafb 100%)!important;
  color:var(--red,#e23340)!important;
  border:1px solid rgba(20,20,30,.09)!important;
  box-shadow:0 1px 2px rgba(20,20,30,.05),0 6px 16px rgba(20,20,30,.06),inset 0 1px 0 #fff!important;
  font-weight:700;
  transition:box-shadow .2s,transform .2s;
}
.btn-ghost:hover,.btn.btn-ghost:hover{box-shadow:0 2px 4px rgba(20,20,30,.06),0 10px 24px rgba(20,20,30,.09),inset 0 1px 0 #fff!important;transform:translateY(-1px)}

/* вкладки тарифів: доріжка злегка вдавлена, вибрана вкладка - обʼємна біла */
.tabs{background:#f3f3f5!important;box-shadow:inset 0 1px 3px rgba(20,20,30,.07)!important;border:0!important}
.tab{transition:box-shadow .2s,background .2s,color .2s}
.tab[aria-selected="true"]{
  background:linear-gradient(180deg,#fff 0%,#fbfbfc 100%)!important;
  color:var(--red,#e23340)!important;
  box-shadow:0 1px 2px rgba(20,20,30,.06),0 6px 16px rgba(20,20,30,.08),inset 0 1px 0 #fff!important;
}
.tab:not([aria-selected="true"]):hover{background:rgba(255,255,255,.6)!important}

/* поля адреси - теж мʼякий обʼєм */
.addr-form .ain{box-shadow:inset 0 1px 2px rgba(20,20,30,.05),0 1px 0 #fff!important}

/* «Дихання ТВК» - лише знак у шапці (одне живе серце сторінки); знак плоский, дихає мʼяким червоним світлом.
   Знак у підвалі - спокійний. Хто вимкнув анімації в системі - знак не рухається. */
@keyframes tvkBreath{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(226,51,64,0)}
  50%{transform:scale(1.035);box-shadow:0 0 0 6px rgba(226,51,64,.07),0 0 18px 2px rgba(226,51,64,.12)}
}
.top .brand .mark{animation:tvkBreath 4.2s ease-in-out infinite;transform-origin:center;will-change:transform}
@media (prefers-reduced-motion:reduce){.top .brand .mark{animation:none}}

/* Меню: назви ті самі (звичні людям), додано стиль.
   - наведення: тонка червона лінія розходиться з центру
   - поточна сторінка: обʼємна біла «таблетка», як вибрана вкладка тарифів
   - «Радіо Hit»: маленька червона точка «в ефірі», мʼяко пульсує */
.nav a{position:relative;transition:color .2s,background .2s,box-shadow .2s}
.nav a:not([aria-current="page"])::before{content:"";position:absolute;left:50%;right:50%;bottom:4px;height:2px;border-radius:2px;
  background:var(--red,#e23340);opacity:.75;transition:left .25s ease,right .25s ease}
.nav a:not([aria-current="page"]):hover::before{left:14px;right:14px}
.nav a[aria-current="page"]{
  background:linear-gradient(180deg,#fff 0%,#fbfbfc 100%)!important;color:var(--red,#e23340)!important;
  box-shadow:0 1px 2px rgba(20,20,30,.06),0 6px 16px rgba(20,20,30,.08),inset 0 1px 0 #fff!important;border-radius:999px}
@keyframes tvkLive{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.nav a[href*="radio"]::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;vertical-align:middle;
  border-radius:50%;background:var(--red,#e23340);animation:tvkLive 1.8s ease-in-out infinite;position:relative;top:-1px}
@media (prefers-reduced-motion:reduce){.nav a[href*="radio"]::after{animation:none}}