/* WhatsApp-painike sivuston ilmeessä: teeman väri + hehku. Vihreä «paikalla»-piste ja
   tervehdysikkuna säilyvät ennallaan (Webflow). Ylös-painike on samalla linjalla sen yläpuolella. */
.whatsapp-container {
  background-color: var(--primary);
  border: 0;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .8), 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent), 0 8px 30px color-mix(in srgb, var(--primary) 30%, transparent);
  transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .85), 0 0 0 6px color-mix(in srgb, var(--primary) 22%, transparent), 0 10px 36px color-mix(in srgb, var(--primary) 40%, transparent);
}
/* Valkoinen kuvake tummaksi teeman värin päälle */
.whatsapp-container .whatsapp-icon { filter: brightness(0); opacity: .88; }

/* Ylös-painikkeen paikka WhatsAppin yläpuolella: keskilinja sama, väli 14 px */
:root { --mc-ylos-r: 31.5px; --mc-ylos-b: 101px; }
@media screen and (max-width: 991px) { :root { --mc-ylos-r: 21.5px; --mc-ylos-b: 91px; } }
@media screen and (max-width: 767px) { :root { --mc-ylos-r: 19.5px; --mc-ylos-b: 86px; } }
@media screen and (max-width: 479px) { :root { --mc-ylos-r: 14.5px; --mc-ylos-b: 81px; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-container, .whatsapp-container:hover { transition: none; transform: none; } }